name list copy on click implemented
This commit is contained in:
Dobromir Popov
@ -189,6 +189,21 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
|
|||||||
.filter((message) => !message.answer)
|
.filter((message) => !message.answer)
|
||||||
.map((message) => message.publisherId);
|
.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 (
|
return (
|
||||||
<div className="w-full max-w-md mx-auto" >
|
<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} >
|
< 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>
|
</div>
|
||||||
{/* show count of each answer and the total answered/unanswered messages */}
|
{/* show count of each answer and the total answered/unanswered messages */}
|
||||||
{item?.answersCount?.length > 0 && (
|
{item?.answersCount?.length > 0 && (
|
||||||
<div>
|
<div className="mb-4">
|
||||||
{item?.answersCount?.length > 0 && (
|
<h3 className="text-lg font-semibold mb-2">Отговори:</h3>
|
||||||
<div className="mb-4">
|
{item.answersCount.map((answer, index) => {
|
||||||
<h3 className="text-lg font-semibold mb-2">Отговори:</h3>
|
const currentCount = item.messages ? item.messages.filter((message) => message.answer === answer).length : 0;
|
||||||
{item.answersCount.map((answer, index) => {
|
const totalCount = item.messages ? item.messages.length : 0;
|
||||||
const currentCount = item.messages ? item.messages.filter((message) => message.answer === answer).length : 0;
|
const percentage = totalCount > 0 ? (currentCount / totalCount) * 100 : 0;
|
||||||
const totalCount = item.messages ? item.messages.length : 0;
|
const ids = getIdsForAnswer(answer);
|
||||||
const percentage = totalCount > 0 ? (currentCount / totalCount) * 100 : 0;
|
const names = getNamesByIds(ids);
|
||||||
const ids = getIdsForAnswer(answer);
|
|
||||||
const names = getNamesByIds(ids);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div key={index} className="mb-4">
|
<div key={index} className="mb-4">
|
||||||
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor={`answer-${index}`}>
|
<label className="block text-gray-700 text-sm font-bold mb-2" htmlFor={`answer-${index}`}>
|
||||||
{answer}
|
{answer}
|
||||||
</label>
|
</label>
|
||||||
<div className="relative h-6 w-full bg-gray-200 rounded" title={names}>
|
<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>
|
onClick={() => copyToClipboard(names)} style={{ cursor: 'copy' }}>
|
||||||
<div className="absolute inset-0 flex items-center justify-center text-white font-bold">
|
<div className="absolute h-full bg-blue-600 rounded" style={{ width: `${percentage}%` }}></div>
|
||||||
{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">
|
<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>
|
||||||
</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="mb-4">
|
||||||
<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>
|
<label className="block text-gray-700 text-sm font-bold mb-2">Общо отговорили</label>
|
||||||
<div className="absolute inset-0 flex items-center justify-center text-white font-bold">
|
<div className="relative h-6 w-full bg-gray-200 rounded" title={getNamesByIds(getIdsForAnswered())}
|
||||||
{item.messages ? item.messages.filter((message) => !message.answer).length : 0}
|
onClick={() => copyToClipboard(getNamesByIds(getIdsForAnswered()))} style={{ cursor: 'copy' }}
|
||||||
</div>
|
>
|
||||||
</div>
|
<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>
|
||||||
)}
|
</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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
{editMode && (<>
|
{editMode && (<>
|
||||||
<button className="button btn-outline bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={handleDelete}>
|
<button className="button btn-outline bg-red-500 hover:bg-red-700 focus:outline-none focus:shadow-outline" type="button" onClick={handleDelete}>
|
||||||
|
|||||||
Reference in New Issue
Block a user