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

add repotys filter and store type properly

Browse Source
This commit is contained in:
Dobromir Popov
2024-04-17 13:44:34 +03:00
parent 7b8f14720a
commit 2c45064391
5 changed files with 40 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
pages/cart/reports/list.tsx
View File

@ -9,7 +9,7 @@ import { useSession } from "next-auth/react"
import common from '../../../src/helpers/common';
import Layout from "../../../components/layout";
import ProtectedRoute from '../../../components/protectedRoute';
import { Location, UserRole } from "@prisma/client";
import { Location, UserRole, ReportType } from "@prisma/client";
export default function Reports() {
@ -17,8 +17,18 @@ export default function Reports() {
const router = useRouter();
const { data: session } = useSession();
const [filterType, setFilterType] = useState('ServiceReport');
const handleFilterChange = (event) => {
setFilterType(event.target.value);
console.log("event filter set to:" + event.target.value);
};
const [filteredReports, setFilteredReports] = useState([]);
useEffect(() => {
setFilteredReports(reports.filter(report => report.type === filterType));
}, [reports, filterType]);
const deleteReport = (id) => {
axiosInstance
@ -66,7 +76,7 @@ export default function Reports() {
<Layout>
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN, UserRole.USER, UserRole.EXTERNAL]}>
<div className="h-5/6 grid place-items-center">
<div className="h-5/6 grid place-items-start px-4 pt-8">
<div className="flex flex-col w-full px-4">
<h1 className="text-2xl font-bold text-center">Отчети</h1>
<Link href="/cart/reports/report">
@ -74,18 +84,21 @@ export default function Reports() {
Добави нов отчет
</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="flex gap-2 mb-4">
<label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'ServiceReport' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
<input type="radio" name="reportType" value="ServiceReport" checked={filterType === 'ServiceReport'} onChange={handleFilterChange} className="sr-only" />
Отчети
</label>
<label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'Experience' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
<input type="radio" name="reportType" value="Experience" checked={filterType === 'Experience'} onChange={handleFilterChange} className="sr-only" />
Случка
</label>
<label className={`cursor-pointer px-4 py-2 rounded-full ${filterType === 'Feedback' ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
<input type="radio" name="reportType" value="Feedback" checked={filterType === 'Feedback'} onChange={handleFilterChange} className="sr-only" />
Отзиви
</label>
</div>
<div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>
@ -98,7 +111,7 @@ export default function Reports() {
</tr>
</thead>
<tbody>
{reports.map((report) => (
{filteredReports.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>