enhanced filters in coverMe report
This commit is contained in:
@ -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>
|
||||
|
Reference in New Issue
Block a user