popov/mwitnessing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more derails on survey-details;

Browse Source 
publisher list
This commit is contained in:
Dobromir Popov
2024-06-21 02:13:59 +03:00
parent 297efe931e
commit f9a41c1630
1 changed files with 82 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
components/survey/SurveyForm.tsx
View File

@ -1,5 +1,5 @@
import axiosInstance from '../../src/axiosSecure';
import { useEffect, useState } from "react";
import { use, useEffect, useState } from "react";
import { toast } from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
@ -55,6 +55,8 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
const router = useRouter();
const [editMode, setEditMode] = useState(existingItem ? true : false);
const [pubs, setPubs] = useState([]);
const [item, setItem] = useState(existingItem || {
...existingItem,
@ -72,6 +74,12 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
setItem(transformedItem);
}, [existingItem]);
useEffect(async () => {
const pubs = await axiosInstance.get("/api/data/publishers?select=id,firstName,lastName,email");
setPubs(pubs.data);
}, []);
const handleChange = ({ target }) => {
setItem({ ...item, [target.name]: target.value });
@ -96,7 +104,6 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
}
else {
//get all publisherIds and create a message for each
const pubs = await axiosInstance.get("/api/data/publishers");
const messages = pubs.data.map(pub => {
return {
publisherId: pub.id,
@ -154,6 +161,34 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
});
}
const getNamesByIds = (ids) => {
return ids
.map((id) => {
const pub = pubs.find((p) => p.id === id);
return pub ? `${pub.firstName} ${pub.lastName}` : null;
})
.filter((name) => name !== null)
.join(", ");
};
const getIdsForAnswer = (answer) => {
return item.messages
.filter((message) => message.answer === answer)
.map((message) => message.publisherId);
};
const getIdsForAnswered = () => {
return item.messages
.filter((message) => message.answer)
.map((message) => message.publisherId);
};
const getIdsForUnanswered = () => {
return item.messages
.filter((message) => !message.answer)
.map((message) => message.publisherId);
};
return (
<div className="w-full max-w-md mx-auto" >
< form className="bg-white dark:bg-gray-800 shadow-md rounded px-8 pt-6 pb-8 mb-4" onSubmit={handleSubmit} >
@ -186,29 +221,55 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
</div>
{/* show count of each answer and the total answered/unanswered messages */}
{item?.answersCount?.length > 0 && (
<div className="mb-4">
<h3 className="text-lg font-semibold mb-2">Отговори:</h3>
{item.answersCount.map((answer, index) => (
<div key={index} className="mb-2">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor={`answer-${index}`}>
{answer}
</label>
<p className="text-gray-700">
{item.messages ? item.messages.filter((message) => message.answer === answer).length : 0}
</p>
<div>
{item?.answersCount?.length > 0 && (
<div className="mb-4">
<h3 className="text-lg font-semibold mb-2">Отговори:</h3>
{item.answersCount.map((answer, index) => {
const currentCount = item.messages ? item.messages.filter((message) => message.answer === answer).length : 0;
const totalCount = item.messages ? item.messages.length : 0;
const percentage = totalCount > 0 ? (currentCount / totalCount) * 100 : 0;
const ids = getIdsForAnswer(answer);
const names = getNamesByIds(ids);
return (
<div key={index} className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor={`answer-${index}`}>
{answer}
</label>
<div className="relative h-6 w-full bg-gray-200 rounded" title={names}>
<div className="absolute h-full bg-blue-600 rounded" style={{ width: `${percentage}%` }}></div>
<div className="absolute inset-0 flex items-center justify-center text-white font-bold">
{currentCount} ({percentage.toFixed(1)}%)
</div>
</div>
</div>
);
})}
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Общо отговорили</label>
<div className="relative h-6 w-full bg-gray-200 rounded" title={getNamesByIds(getIdsForAnswered())}>
<div className="absolute h-full bg-green-600 rounded" style={{ width: `${item.messages ? (item.messages.filter((message) => message.answer).length / item.messages.length) * 100 : 0}%` }}></div>
<div className="absolute inset-0 flex items-center justify-center text-white font-bold">
{item.messages ? item.messages.filter((message) => message.answer).length : 0}
</div>
</div>
</div>
<div className="mb-4">
<label className="block text-gray-700 text-sm font-bold mb-2">Общо неотговорили</label>
<div className="relative h-6 w-full bg-gray-200 rounded" title={getNamesByIds(getIdsForUnanswered())}>
<div className="absolute h-full bg-red-600 rounded" style={{ width: `${item.messages ? (item.messages.filter((message) => !message.answer).length / item.messages.length) * 100 : 0}%` }}></div>
<div className="absolute inset-0 flex items-center justify-center text-white font-bold">
{item.messages ? item.messages.filter((message) => !message.answer).length : 0}
</div>
</div>
</div>
</div>
))}
<div className="mb-2">
<label className="block text-gray-700 text-sm font-bold mb-2">Общо отговорили</label>
<p className="text-gray-700">{item.messages ? item.messages.filter((message) => message.answer).length : 0}</p>
</div>
<div className="mb-2">
<label className="block text-gray-700 text-sm font-bold mb-2">Общо неотговорили</label>
<p className="text-gray-700">{item.messages ? item.messages.filter((message) => !message.answer).length : 0}</p>
</div>
)}
</div>
)}
<div className="flex items-center justify-between">
{editMode && (<>
<button className="button btn-outline bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={handleDelete}>