95 lines
4.3 KiB
TypeScript
95 lines
4.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
||
import Layout from "../../../components/layout";
|
||
import { GetServerSideProps } from 'next';
|
||
import { Location, UserRole } from "@prisma/client";
|
||
import axiosServer from '../../../src/axiosServer';
|
||
const common = require('../../../src/helpers/common');
|
||
// import * as common from '../../../src/helpers/common';
|
||
import SurveyForm from '../../../components/survey/SurveyForm';
|
||
import _ from 'lodash';
|
||
|
||
const SurveyPage = ({ serverSurveys }) => {
|
||
const [selectedSurvey, setSelectedSurvey] = useState(null);
|
||
|
||
return (
|
||
<Layout>
|
||
<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="w-1/2 pr-4">
|
||
<h2 className="text-xl font-semibold mb-4">Списък</h2>
|
||
<ul className="space-y-4">
|
||
{serverSurveys.map((survey) => (
|
||
<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="text-gray-700">{survey.publicFrom} - {survey.publicUntil}</p> */}
|
||
<p className="mt-2"> [{survey.answers}] </p>
|
||
<div className="mt-2">
|
||
{Object.entries(_.groupBy(survey.messages, message => message.answer || "Без отговор")).map(([key, items]) => (
|
||
<div key={key} className="text-sm text-gray-700">
|
||
{key}: {items.length}
|
||
</div>
|
||
))}
|
||
</div>
|
||
<button
|
||
className="btn mt-2 bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded"
|
||
onClick={() => setSelectedSurvey(survey)}
|
||
>
|
||
Зареди детайли
|
||
</button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
<button
|
||
className="btn mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
|
||
onClick={() => setSelectedSurvey(null)}
|
||
>
|
||
Нова анкета
|
||
</button>
|
||
</div>
|
||
<div className="w-1/2 pl-4">
|
||
<h2 className="text-xl font-semibold mb-4">Детайли</h2>
|
||
<SurveyForm existingItem={selectedSurvey} />
|
||
</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 className="mt-8">
|
||
</div>
|
||
</div>
|
||
</Layout>
|
||
);
|
||
};
|
||
|
||
export default SurveyPage;
|
||
|
||
export const getServerSideProps: GetServerSideProps = async (context) => {
|
||
const prisma = common.getPrismaClient();
|
||
let serverSurveys = await prisma.survey.findMany({
|
||
where: {
|
||
},
|
||
include: {
|
||
messages: true,
|
||
},
|
||
});
|
||
serverSurveys = common.convertDatesToISOStrings(serverSurveys);
|
||
|
||
context.res.setHeader("Cache-Control", "s-maxage=1, stale-while-revalidate");
|
||
return {
|
||
props: {
|
||
serverSurveys: serverSurveys
|
||
},
|
||
};
|
||
};
|
||
|