name list copy on click implemented

This commit is contained in:
Dobromir Popov
2024-06-21 02:42:23 +03:00
parent f9a41c1630
commit 22bc38b695

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} >
@ -220,8 +235,6 @@ 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>
@ -237,7 +250,8 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
<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="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">
{currentCount} ({percentage.toFixed(1)}%)
@ -248,7 +262,9 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
})}
<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="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}
@ -257,7 +273,9 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
</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="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}
@ -266,8 +284,7 @@ const SurveyForm: React.FC<SurveyFormProps> = ({ existingItem }) => {
</div>
</div>
)}
</div>
)}
<div className="flex items-center justify-between">