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

name list copy on click implemented

Browse Source
This commit is contained in:
Dobromir Popov
2024-06-21 02:42:23 +03:00
parent f9a41c1630
commit 22bc38b695
1 changed files with 55 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
components/survey/SurveyForm.tsx
View File

@ -189,6 +189,21 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
.filter((message) => !message.answer)
.map((message) => message.publisherId);
};
// const copyToClipboard = (text) => {
// navigator.clipboard.writeText(text).then(
// () => toast.success('Copied to clipboard!'),
// (err) => toast.error('Failed to copy text: ', err)
// );
// };
const copyToClipboard = (text) => {
navigator.clipboard.writeText(text).then(
() => alert('Имената са копирани: ' + text),
(err) => alert('Не успяхме да копираме имената: ', err)
);
};
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} >
@ -221,55 +236,57 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
</div>
{/* show count of each answer and the total answered/unanswered messages */}
{item?.answersCount?.length > 0 && (
<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);
<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>
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}
onClick={() => copyToClipboard(names)} style={{ cursor: 'copy' }}>
<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">
{item.messages ? item.messages.filter((message) => message.answer).length : 0}
{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(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 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())}
onClick={() => copyToClipboard(getNamesByIds(getIdsForAnswered()))} style={{ cursor: 'copy' }}
>
<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())}
style={{ cursor: 'copy' }}
onClick={() => copyToClipboard(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="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}>