enhanced filters in coverMe report

This commit is contained in:
Dobromir Popov
2024-11-16 23:32:25 +02:00
parent 8037f4daf4
commit 3236286a2a

View File

@ -1,7 +1,5 @@
import { useEffect, useState } from "react";
import axiosInstance from "../../../src/axiosSecure";
import { useRouter } from "next/router";
import Link from "next/link";
import { useSession } from "next-auth/react";
import Layout from "../../../components/layout";
import ProtectedRoute from "../../../components/protectedRoute";
@ -14,24 +12,28 @@ const timeFilters = [
{ label: "Всички", value: null },
];
const eventTypes = [
{ label: "Заявки", value: EventLogType.AssignmentReplacementRequested },
{ label: "Приети замествания", value: EventLogType.AssignmentReplacementAccepted },
{ label: "Ръчно въведени замествания", value: EventLogType.AssignmentReplacementManual },
];
export default function EventLogList() {
const [eventLogs, setEventLog] = useState([]);
const [requestedAssignments, setRequestedAssignments] = useState([]);
const [locations, setLocations] = useState([]);
const [showOpenRequests, setShowOpenRequests] = useState(false);
const [selectedTimeFilter, setSelectedTimeFilter] = useState(null); // Time filter state
const [selectedEventTypes, setSelectedEventTypes] = useState(eventTypes.map((et) => et.value)); // Default: all types
const { data: session } = useSession();
useEffect(() => {
const fetchLocations = async () => {
const fetchEventLogs = async () => {
try {
const where = encodeURIComponent(JSON.stringify({
OR: [
{ type: EventLogType.AssignmentReplacementAccepted },
{ type: EventLogType.AssignmentReplacementManual },
{ type: EventLogType.AssignmentReplacementRequested }
],
}));
const where = encodeURIComponent(
JSON.stringify({
OR: selectedEventTypes.map((type) => ({ type })),
})
);
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}}}}}}}`
@ -48,10 +50,8 @@ export default function EventLogList() {
}
};
if (!locations.length) {
fetchLocations();
}
}, []);
fetchEventLogs();
}, [selectedEventTypes]);
// Filter events based on the selected time range
const filteredEventLogs = eventLogs.filter((event) => {
@ -62,6 +62,15 @@ export default function EventLogList() {
return eventDate >= cutoffDate;
});
// Toggle event type selection
const toggleEventType = (eventType) => {
setSelectedEventTypes((prev) =>
prev.includes(eventType)
? prev.filter((type) => type !== eventType)
: [...prev, eventType]
);
};
return (
<Layout>
<ProtectedRoute allowedRoles={[UserRole.POWERUSER, UserRole.ADMIN]}>
@ -82,10 +91,10 @@ export default function EventLogList() {
checked={!showOpenRequests}
className="sr-only"
/>
Приети заявки
Приети/затворени заявки
</label>
<label
className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? "bg-blue-500 text-white" : "bg-gray-200 text-gray-800"
className={`cursor-pointer px-4 py-2 rounded-full ${showOpenRequests ? "bg-yellow-500 text-white" : "bg-yellow-100 text-gray-800"
}`}
>
<input
@ -100,6 +109,23 @@ export default function EventLogList() {
</label>
</div>
{/* Event Type Filter Pills */}
<div className="flex gap-2 mb-4">
{eventTypes.map((type) => (
<button
key={type.value}
onClick={() => toggleEventType(type.value)}
className={`px-4 py-2 rounded-full ${selectedEventTypes.includes(type.value)
? "bg-blue-500 text-white"
: "bg-gray-200 text-gray-800"
}`}
>
{type.label}
</button>
))}
</div>
{/* Time Filter Pills */}
<div className="flex gap-2 mb-4">
{timeFilters.map((filter) => (
@ -115,7 +141,6 @@ export default function EventLogList() {
</button>
))}
</div>
<div className="mt-4 w-full overflow-x-auto">
<table className="w-full table-auto">
<thead>