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

protet admin page; gix toaster multiple show bug

Browse Source
This commit is contained in:
Dobromir Popov
2024-06-17 22:17:51 +03:00
parent 090b1704d3
commit 905ea86329
2 changed files with 104 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
pages/cart/surveys/index.tsx
View File

@ -7,66 +7,58 @@ const common = require('../../../src/helpers/common');
// import * as common from '../../../src/helpers/common'; // import * as common from '../../../src/helpers/common';
import SurveyForm from '../../../components/survey/SurveyForm'; import SurveyForm from '../../../components/survey/SurveyForm';
import _ from 'lodash'; import _ from 'lodash';
import ProtectedRoute from 'components/protectedRoute';
const SurveyPage = ({ serverSurveys }) => { const SurveyPage = ({ serverSurveys }) => {
const [selectedSurvey, setSelectedSurvey] = useState(null); const [selectedSurvey, setSelectedSurvey] = useState(null);
return ( return (
<Layout> <Layout>
<div className="max-w-4xl mx-auto my-8 p-4 bg-white shadow-md rounded"> <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
<h1 className="text-2xl font-bold mb-4">Анкети</h1> <div className="max-w-4xl mx-auto my-8 p-4 bg-white shadow-md rounded">
<h1 className="text-2xl font-bold mb-4">Анкети</h1>
<div className="flex flex-row justify-between"> <div className="flex flex-row justify-between">
<div className="w-1/2 pr-4"> <div className="w-1/2 pr-4">
<h2 className="text-xl font-semibold mb-4">Списък</h2> <h2 className="text-xl font-semibold mb-4">Списък</h2>
<ul className="space-y-4"> <ul className="space-y-4">
{serverSurveys.map((survey) => ( {serverSurveys.map((survey) => (
<li key={survey.id} className="p-4 border rounded bg-gray-50 shadow-sm"> <li key={survey.id} className="p-4 border rounded bg-gray-50 shadow-sm">
<p className="font-medium">{survey.id}: {survey.content}</p> <p className="font-medium">{survey.id}: {survey.content}</p>
{/* <p className="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */} {/* <p className="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */}
<p className="mt-2"> [{survey.answers}] </p> <p className="mt-2"> [{survey.answers}] </p>
<div className="mt-2"> <div className="mt-2">
{Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => ( {Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => (
<div key={key} className="text-sm text-gray-700"> <div key={key} className="text-sm text-gray-700">
{key}: {items.length} {key}: {items.length}
</div> </div>
))} ))}
</div> </div>
<button <button
className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded" className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
onClick={() => setSelectedSurvey(survey)} onClick={() => setSelectedSurvey(survey)}
> >
Зареди детайли Зареди детайли
</button> </button>
</li> </li>
))} ))}
</ul> </ul>
<button <button
className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
onClick={() => setSelectedSurvey(null)} onClick={() => setSelectedSurvey(null)}
> >
Нова анкета Нова анкета
</button> </button>
</div>
<div className="w-1/2 pl-4">
<h2 className="text-xl font-semibold mb-4">Детайли</h2>
<SurveyForm existingItem={selectedSurvey} />
</div>
</div> </div>
<div className="w-1/2 pl-4"> <div className="mt-8">
<h2 className="text-xl font-semibold mb-4">Детайли</h2>
<SurveyForm existingItem={selectedSurvey} />
</div> </div>
{/* <div className="w-1/2 pl-4">
<h2 className="text-xl font-semibold mb-4">Selected Survey</h2>
{selectedSurvey ? (
<div className="p-4 border rounded bg-gray-50 shadow-sm">
<h3 className="text-lg font-bold">{selectedSurvey.title}</h3>
<p className="text-gray-700 mt-2">{selectedSurvey.description}</p>
</div>
) : (
<p className="text-gray-700">No survey selected.</p>
)}
</div> */}
</div> </div>
<div className="mt-8"> </ProtectedRoute>
</div>
</div>
</Layout> </Layout>
); );
}; };

122
pages/dash.tsx
View File

@ -65,11 +65,13 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
// } // }
// }, []);// show the message every time we load the page // }, []);// show the message every time we load the page
useEffect(() => { useEffect(() => {
if (messages.length > 0) { if (messages && messages.length > 0) {
console.log("user has ", messages.length, " messages.");
showMessageToasts(messages); showMessageToasts(messages);
} }
}, [messages]); }, []);
const showMessageToasts = (messages, handleMessageOptionAnswer) => { const showMessageToasts = (messages, handleMessageOptionAnswer) => {
const handleOptionClick = async (messageId, option, toastId) => { const handleOptionClick = async (messageId, option, toastId) => {
@ -86,8 +88,8 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
toast.dismiss(toastId); toast.dismiss(toastId);
}; };
messages.forEach((message, messageIndex) => { messages.forEach((message) => {
const toastId = `message-${messageIndex}`; const toastId = `message-${message.id}`;
const content = ( const content = (
<div> <div>
<div>{message.content.message}</div> <div>{message.content.message}</div>
@ -114,68 +116,68 @@ export default function DashboardPage({ initialItems, initialUserId, cartEvents,
}); });
}; };
const showMessageToastNewModal = (messages, handleMessageOptionAnswer) => { // const showMessageToastNewModal = (messages, handleMessageOptionAnswer) => {
let currentMessageIndex = 0; // let currentMessageIndex = 0;
const showModal = () => { // const showModal = () => {
if (currentMessageIndex >= messages.length) { // if (currentMessageIndex >= messages.length) {
return; // All messages have been shown // return; // All messages have been shown
} // }
const message = messages[currentMessageIndex]; // const message = messages[currentMessageIndex];
const content = ( // const content = (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> // <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded shadow-lg p-4 max-w-lg w-full"> // <div className="bg-white rounded shadow-lg p-4 max-w-lg w-full">
<div className="text-right"> // <div className="text-right">
<button // <button
className="text-gray-500 hover:text-gray-700" // className="text-gray-500 hover:text-gray-700"
onClick={handleClose} // onClick={handleClose}
> // >
&times; // &times;
</button> // </button>
</div> // </div>
<div className="mb-4">{message.content.message}</div> // <div className="mb-4">{message.content.message}</div>
<div> // <div>
{message.content.options?.map((option, index) => ( // {message.content.options?.map((option, index) => (
<button // <button
key={index} // key={index}
onClick={() => handleOptionClick(message.id, option)} // onClick={() => handleOptionClick(message.id, option)}
className="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded m-1" // className="btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded m-1"
> // >
{option} // {option}
</button> // </button>
))} // ))}
</div> // </div>
</div> // </div>
</div> // </div>
); // );
toast(content, { // toast(content, {
autoClose: false, // Keep the toast open until manually closed // autoClose: false, // Keep the toast open until manually closed
closeButton: false, // closeButton: false,
onClose: handleClose, // onClose: handleClose,
//className: 'custom-toast', // Optional custom class for additional styling // //className: 'custom-toast', // Optional custom class for additional styling
}); // });
}; // };
const handleOptionClick = async (messageId, option) => { // const handleOptionClick = async (messageId, option) => {
try { // try {
await axiosInstance.put(`/api/data/messages/${messageId}`, { answer: option }); // await axiosInstance.put(`/api/data/messages/${messageId}`, { answer: option });
toast.dismiss(); // toast.dismiss();
currentMessageIndex++; // currentMessageIndex++;
showModal(); // showModal();
} catch (error) { // } catch (error) {
console.error("Error updating message:", error); // console.error("Error updating message:", error);
toast.error("Error updating message. Please try again."); // toast.error("Error updating message. Please try again.");
} // }
}; // };
const handleClose = () => { // const handleClose = () => {
toast.dismiss(); // toast.dismiss();
}; // };
showModal(); // showModal();
}; // };
// FOR ADMINS ONLY // FOR ADMINS ONLY
const handleUserSelection = async (publisher) => { const handleUserSelection = async (publisher) => {