add timeperiod filter to logs (default all)
This commit is contained in:
Dobromir Popov
@ -1,16 +1,11 @@
|
|||||||
//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 { useEffect, useState } from "react";
|
||||||
import toast from "react-hot-toast";
|
import axiosInstance from "../../../src/axiosSecure";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { useSession } from "next-auth/react"
|
import { useSession } from "next-auth/react";
|
||||||
//const common = require('src/helpers/common');
|
|
||||||
import common from '../../../src/helpers/common';
|
|
||||||
import Layout from "../../../components/layout";
|
import Layout from "../../../components/layout";
|
||||||
import ProtectedRoute from '../../../components/protectedRoute';
|
import ProtectedRoute from "../../../components/protectedRoute";
|
||||||
import { Location, Shift, UserRole, EventLog, EventType, EventLogType } from "@prisma/client";
|
import { UserRole, EventLogType } from "@prisma/client";
|
||||||
import { set } from 'date-fns';
|
|
||||||
|
|
||||||
const timeFilters = [
|
const timeFilters = [
|
||||||
{ label: "1 седмица", value: 7 },
|
{ label: "1 седмица", value: 7 },
|
||||||
@ -22,66 +17,105 @@ const timeFilters = [
|
|||||||
export default function EventLogList() {
|
export default function EventLogList() {
|
||||||
const [eventLogs, setEventLog] = useState([]);
|
const [eventLogs, setEventLog] = useState([]);
|
||||||
const [requestedAssignments, setRequestedAssignments] = useState([]);
|
const [requestedAssignments, setRequestedAssignments] = useState([]);
|
||||||
const router = useRouter();
|
|
||||||
const { data: session } = useSession();
|
|
||||||
|
|
||||||
const [locations, setLocations] = useState([]);
|
const [locations, setLocations] = useState([]);
|
||||||
const [showOpenRequests, setShowOpenRequests] = useState(false);
|
const [showOpenRequests, setShowOpenRequests] = useState(false);
|
||||||
|
const [selectedTimeFilter, setSelectedTimeFilter] = useState(null); // Time filter state
|
||||||
|
const { data: session } = useSession();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const fetchLocations = async () => {
|
const fetchLocations = async () => {
|
||||||
try {
|
try {
|
||||||
const { data: eventLogsDataold } = await axiosInstance.get(`/api/data/prisma/eventLog?where={"type":"${EventLogType.AssignmentReplacementAccepted}"}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`);
|
|
||||||
|
|
||||||
// const where = encodeURIComponent(`{OR: [{type: "${EventLogType.AssignmentReplacementAccepted}"}, {type: "${EventLogType.AssignmentReplacementManual}"}]}`);
|
|
||||||
const where = encodeURIComponent(JSON.stringify({
|
const where = encodeURIComponent(JSON.stringify({
|
||||||
OR: [
|
OR: [
|
||||||
{ type: EventLogType.AssignmentReplacementAccepted },
|
{ type: EventLogType.AssignmentReplacementAccepted },
|
||||||
{ type: EventLogType.AssignmentReplacementManual }
|
{ type: EventLogType.AssignmentReplacementManual },
|
||||||
]
|
{ type: EventLogType.AssignmentReplacementRequested }
|
||||||
|
],
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const { data: eventLogsData } = await axiosInstance.get(`/api/data/prisma/eventLog?where=${where}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`);
|
const { data: eventLogsData } = await axiosInstance.get(
|
||||||
|
`/api/data/prisma/eventLog?where=${where}&include={"publisher":{"select":{"firstName":true,"lastName":true}},"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}}}`
|
||||||
|
);
|
||||||
|
|
||||||
setEventLog(eventLogsData);
|
setEventLog(eventLogsData);
|
||||||
|
|
||||||
const { data: shiftsData } = await axiosInstance.get(`/api/data/prisma/assignment?where={"publicGuid":{"not":"null"}}&include={"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}},"publisher":{"select":{"firstName":true,"lastName":true}}}`);
|
const { data: shiftsData } = await axiosInstance.get(
|
||||||
|
`/api/data/prisma/assignment?where={"publicGuid":{"not":"null"}}&include={"shift":{"include":{"assignments":{"include":{"publisher":{"select":{"firstName":true,"lastName":true}}}}}},"publisher":{"select":{"firstName":true,"lastName":true}}}`
|
||||||
|
);
|
||||||
setRequestedAssignments(shiftsData);
|
setRequestedAssignments(shiftsData);
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
if (!locations.length) {
|
if (!locations.length) {
|
||||||
fetchLocations();
|
fetchLocations();
|
||||||
}
|
}
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
// Filter events based on the selected time range
|
||||||
|
const filteredEventLogs = eventLogs.filter((event) => {
|
||||||
|
if (!selectedTimeFilter) return true;
|
||||||
|
const eventDate = new Date(event.date);
|
||||||
|
const cutoffDate = new Date();
|
||||||
|
cutoffDate.setDate(cutoffDate.getDate() - selectedTimeFilter);
|
||||||
|
return eventDate >= cutoffDate;
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout>
|
||||||
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
|
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
|
||||||
|
|
||||||
<div className="h-5/6 grid place-items-start px-4 pt-8">
|
<div className="h-5/6 grid place-items-start px-4 pt-8">
|
||||||
<div className="flex flex-col w-full px-4">
|
<div className="flex flex-col w-full px-4">
|
||||||
<h1 className="text-2xl font-bold text-center">Заявки за заместване</h1>
|
<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> */}
|
|
||||||
<div className="flex gap-2 mb-4">
|
|
||||||
|
|
||||||
<label className={`cursor-pointer px-4 py-2 rounded-full ${!showOpenRequests ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
|
<div className="flex gap-2 mb-4">
|
||||||
<input type="radio" name="reportType" value="ServiceReport" onChange={() => setShowOpenRequests(false)} checked={!showOpenRequests} className="sr-only" />
|
<label
|
||||||
|
className={`cursor-pointer px-4 py-2 rounded-full ${!showOpenRequests ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="reportType"
|
||||||
|
value="ServiceReport"
|
||||||
|
onChange={() => setShowOpenRequests(false)}
|
||||||
|
checked={!showOpenRequests}
|
||||||
|
className="sr-only"
|
||||||
|
/>
|
||||||
Приети заявки
|
Приети заявки
|
||||||
</label>
|
</label>
|
||||||
<label className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}`}>
|
<label
|
||||||
<input type="radio" name="reportType" value="Experience" onChange={() => setShowOpenRequests(true)} checked={showOpenRequests} className="sr-only" />
|
className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"
|
||||||
Отворени заявки
|
}`}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name="reportType"
|
||||||
|
value="Experience"
|
||||||
|
onChange={() => setShowOpenRequests(true)}
|
||||||
|
checked={showOpenRequests}
|
||||||
|
className="sr-only"
|
||||||
|
/>
|
||||||
|
Отворени заявки (Без отговор/Още се търси)
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Time Filter Pills */}
|
||||||
|
<div className="flex gap-2 mb-4">
|
||||||
|
{timeFilters.map((filter) => (
|
||||||
|
<button
|
||||||
|
key={filter.value}
|
||||||
|
onClick={() => setSelectedTimeFilter(filter.value)}
|
||||||
|
className={`px-4 py-2 rounded-full ${selectedTimeFilter === filter.value
|
||||||
|
? "bg-blue-500 text-white"
|
||||||
|
: "bg-gray-200 text-gray-800"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{filter.label}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="mt-4 w-full overflow-x-auto">
|
<div className="mt-4 w-full overflow-x-auto">
|
||||||
<table className="w-full table-auto">
|
<table className="w-full table-auto">
|
||||||
<thead>
|
<thead>
|
||||||
@ -91,64 +125,57 @@ export default function EventLogList() {
|
|||||||
<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>
|
<th className="px-4 py-2 text-left">Събитие</th>
|
||||||
{/* <th className="px-4 py-2 text-left">Действия</th> */}
|
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{!showOpenRequests && (eventLogs.map((event) => (
|
{!showOpenRequests &&
|
||||||
<tr key={event.id}>
|
filteredEventLogs.map((event) => (
|
||||||
<td className="border px-2 py-2">{new Date(event.date).toLocaleString('bg')}</td>
|
<tr key={event.id}>
|
||||||
<td className="border px-2 py-2">
|
<td className="border px-2 py-2">{new Date(event.date).toLocaleString("bg")}</td>
|
||||||
{event.publisher?.firstName && event.publisher?.lastName
|
<td className="border px-2 py-2">
|
||||||
? `${event.publisher.firstName} ${event.publisher.lastName}`
|
{event.publisher?.firstName && event.publisher?.lastName
|
||||||
: '???'}
|
? `${event.publisher.firstName} ${event.publisher.lastName}`
|
||||||
</td>
|
: "???"}
|
||||||
<td className="border px-2 py-2">{new Date(event.shift?.startTime).toLocaleString('bg')}</td>
|
</td>
|
||||||
<td className="border px-2 py-2">
|
<td className="border px-2 py-2">{new Date(event.shift?.startTime).toLocaleString("bg")}</td>
|
||||||
{event.shift?.assignments.map((ass) => (
|
<td className="border px-2 py-2">
|
||||||
<div key={ass.id}>{ass.publisher.firstName + " " + ass.publisher.lastName}</div>
|
{event.shift?.assignments.map((ass) => (
|
||||||
))}
|
<div key={ass.id}>
|
||||||
</td>
|
{ass.publisher.firstName + " " + ass.publisher.lastName}
|
||||||
<td className="border px-2 py-2">
|
</div>
|
||||||
{event.content}
|
))}
|
||||||
</td>
|
</td>
|
||||||
{/* <td className="border px-4 py-2">
|
<td className="border px-2 py-2">{event.content}</td>
|
||||||
<button
|
</tr>
|
||||||
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
|
))}
|
||||||
Изтрий
|
|
||||||
</button>
|
{showOpenRequests &&
|
||||||
</td> */}
|
requestedAssignments.map((assignment) => (
|
||||||
</tr>
|
<tr key={assignment.id}>
|
||||||
))
|
<td className="border px-2 py-2">
|
||||||
)}
|
{new Date(assignment.date).toLocaleString("bg")}
|
||||||
{showOpenRequests && (requestedAssignments.map((assignment) => (
|
</td>
|
||||||
<tr key={assignment.id}>
|
<td className="border px-2 py-2">
|
||||||
<td className="border px-2 py-2">{new Date(assignment.date).toLocaleString('bg')}</td>
|
{assignment.publisher.firstName + " " + assignment.publisher.lastName}
|
||||||
<td className="border px-2 py-2">{assignment.publisher.firstName + " " + assignment.publisher.lastName}</td>
|
</td>
|
||||||
<td className="border px-2 py-2">{new Date(assignment.shift.startTime).toLocaleString('bg')}</td>
|
<td className="border px-2 py-2">
|
||||||
<td className="border px-2 py-2">
|
{new Date(assignment.shift.startTime).toLocaleString("bg")}
|
||||||
{assignment.shift.assignments.map((ass) => (
|
</td>
|
||||||
<div key={ass.id}>{ass.publisher.firstName + " " + ass.publisher.lastName}</div>
|
<td className="border px-2 py-2">
|
||||||
))}
|
{assignment.shift.assignments.map((ass) => (
|
||||||
</td>
|
<div key={ass.id}>
|
||||||
{/* <td className="border px-4 py-2">
|
{ass.publisher.firstName + " " + ass.publisher.lastName}
|
||||||
<button
|
</div>
|
||||||
className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
|
))}
|
||||||
>
|
</td>
|
||||||
Изтрий
|
</tr>
|
||||||
</button>
|
))}
|
||||||
</td> */}
|
|
||||||
</tr>
|
|
||||||
))
|
|
||||||
)}
|
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div >
|
</div>
|
||||||
</div >
|
</div>
|
||||||
</ProtectedRoute >
|
</ProtectedRoute>
|
||||||
</Layout >
|
</Layout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user