From 22bc38b695fcb012ee80e3f496a356678d082cab Mon Sep 17 00:00:00 2001
From: Dobromir Popov <dobromir.popov@gateway.one>
Date: Fri, 21 Jun 2024 02:42:23 +0300
Subject: [PATCH] name list copy on click implemented

---
 components/survey/SurveyForm.tsx | 93 +++++++++++++++++++-------------
 1 file changed, 55 insertions(+), 38 deletions(-)

diff --git a/components/survey/SurveyForm.tsx b/components/survey/SurveyForm.tsx
index 1c7f551..60c3ace 100644
--- a/components/survey/SurveyForm.tsx
+++ b/components/survey/SurveyForm.tsx
@@ -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}>