Files
mwitnessing/pages/cart/reports/list.tsx
Dobromir Popov acd776e988 renames
2024-03-26 01:08:57 +02:00

152 lines
7.5 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

//page to show all repots in the database with a link to the report page
import axiosInstance from '../../../src/axiosSecure';
import { useEffect, useState } from "react";
import toast from "react-hot-toast";
import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react"
//const common = require('src/helpers/common');
import common from '../../../src/helpers/common';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { Location, UserRole } from "@prisma/client";
export default function Reports() {
const [reports, setReports] = useState([]);
const router = useRouter();
const { data: session } = useSession();
const deleteReport = (id) => {
axiosInstance
.delete(`/api/data/reports/${id}`)
.then((res) => {
toast.success("Успешно изтрит отчет");
// router.push("/cart/reports/list");
setReports(reports.filter(report => report.id !== id));
})
.catch((err) => {
console.log(err);
});
};
const [locations, setLocations] = useState([]);
useEffect(() => {
const fetchLocations = async () => {
try {
console.log("fetching locations");
const { data } = await axiosInstance.get("/api/data/locations");
setLocations(data);
console.log(data);
axiosInstance.get(`/api/data/reports?include=publisher,location`)
.then((res) => {
// let reports = res.data;
// reports.forEach((report) => {
// report.location = data.find((loc) => loc.id === report.locationId);
// });
setReports(res.data);
})
.catch((err) => {
console.log(err);
});
} catch (error) {
console.error(error);
}
};
if (!locations.length) {
fetchLocations();
}
}, []);
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN, UserRole.USER, UserRole.EXTERNAL]}>
<div className="h-5/6 grid place-items-center">
<div className="flex flex-col w-full px-4">
<h1 className="text-2xl font-bold text-center">Отчети</h1>
<Link href="/cart/reports/report">
<button className="mt-4 bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Добави нов отчет
</button>
</Link>
<label className="mr-4">
<input type="radio" name="reportType" value="ServiceReport" defaultChecked />
Отчети
</label>
<label className="mr-4">
<input type="radio" name="reportType" value="Experience" />
Случка
</label>
<label className="mr-4">
<input type="radio" name="reportType" value="Feedback" />
Отзиви
</label>
<div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
<tr>
<th className="px-4 py-2 text-left">От</th>
<th className="px-4 py-2 text-left">Дата</th>
<th className="px-4 py-2 text-left" >Място</th>
<th className="px-4 py-2 text-left">Отчет</th>
<th className="px-4 py-2 text-left">Действия</th>
</tr>
</thead>
<tbody>
{reports.map((report) => (
<tr key={report.id}>
<td className="border px-2 py-2">{report.publisher.firstName + " " + report.publisher.lastName}</td>
<td className="border px-2 py-2">{common.getDateFormated(new Date(report.date))}</td>
<td className="border px-2 py-2">{report.location?.name}</td>
<td className="border px-2 py-2">
{(report.experienceInfo === null || report.experienceInfo === "")
? (
<>
<div><strong>Отчет</strong></div>
Издания: {report.placementCount} <br />
Разговори: {report.conversationCount} <br />
Клипове: {report.videoCount} <br />
Адреси / Телефони: {report.returnVisitInfoCount} <br />
</>
) : (report.placementCount > 0) ? (
<>
<div><strong>Отзив</strong></div>
<div dangerouslySetInnerHTML={{ __html: report.experienceInfo }} />
</>
) : (
<>
<div><strong>Случка</strong></div>
<div dangerouslySetInnerHTML={{ __html: report.experienceInfo }} />
</>
)
}
</td>
<td className="border px-4 py-2">
<button
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
onClick={() => deleteReport(report.id)}
>
Изтрий
</button>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div >
</div >
</ProtectedRoute >
</Layout >
);
}