initial commit - code moved to separate repo
This commit is contained in:
Dobromir Popov
214
pages/cart/publishers/index.tsx
Normal file
214
pages/cart/publishers/index.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
// Next.js page to show all locations in the database with a link to the location page
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useEffect, useState, useRef, use } from "react";
|
||||
// import { getSession } from 'next-auth/client'
|
||||
// import { NextAuth } from 'next-auth/client'
|
||||
import { Publisher, UserRole } from "@prisma/client";
|
||||
import Layout from "../../../components/layout";
|
||||
import PublisherCard from "../../../components/publisher/PublisherCard";
|
||||
import axiosInstance from "../../../src/axiosSecure";
|
||||
import axiosServer from '../../../src/axiosServer';
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import { levenshteinEditDistance } from "levenshtein-edit-distance";
|
||||
import ProtectedRoute from '../../../components/protectedRoute';
|
||||
import ConfirmationModal from '../../../components/ConfirmationModal';
|
||||
|
||||
|
||||
|
||||
interface IProps {
|
||||
initialItems: Publisher[];
|
||||
}
|
||||
|
||||
function PublishersPage({ publishers = [] }: IProps) {
|
||||
const [shownPubs, setShownPubs] = useState(publishers);
|
||||
const [filter, setFilter] = useState("");
|
||||
const [filterIsImported, setFilterIsImported] = useState({
|
||||
checked: false,
|
||||
indeterminate: true,
|
||||
});
|
||||
const [showZeroShiftsOnly, setShowZeroShiftsOnly] = useState(false);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
|
||||
const handleDeleteAllVisible = async () => {
|
||||
setIsDeleting(true);
|
||||
|
||||
for (const publisher of shownPubs) {
|
||||
try {
|
||||
await axiosInstance.delete(`/api/data/publishers/${publisher.id}`);
|
||||
setShownPubs(shownPubs.filter(p => p.id !== publisher.id));
|
||||
} catch (error) {
|
||||
console.log(JSON.stringify(error));
|
||||
}
|
||||
}
|
||||
|
||||
setIsDeleting(false);
|
||||
setIsModalOpen(false);
|
||||
// After all publishers are deleted, you might want to refresh the list or make additional changes
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// const filteredPublishers = publishers.filter((publisher) => {
|
||||
// return publisher.firstName.toLowerCase().includes(filter.toLowerCase())
|
||||
// || publisher.lastName.toLowerCase().includes(filter.toLowerCase());
|
||||
// });
|
||||
|
||||
//name filter
|
||||
let filteredPublishersByName = publishers
|
||||
.filter((publisher) => {
|
||||
const fullName = publisher.firstName.toLowerCase() + " " + publisher.lastName.toLowerCase();
|
||||
const distance = levenshteinEditDistance(fullName, filter.toLowerCase());
|
||||
const lenDiff = Math.max(fullName.length, filter.length) - Math.min(fullName.length, filter.length);
|
||||
|
||||
let similarity;
|
||||
if (distance === 0) {
|
||||
similarity = 1; // Exact match
|
||||
} else {
|
||||
similarity = 1 - (distance - lenDiff) / distance;
|
||||
}
|
||||
|
||||
console.log("distance: " + distance + "; lenDiff: " + lenDiff + " similarity: " + similarity + "; " + fullName + " =? " + filter + "")
|
||||
return similarity >= 0.95;
|
||||
});
|
||||
|
||||
// Email filter
|
||||
let filteredPublishersByEmail = publishers.filter(publisher =>
|
||||
publisher.email.toLowerCase().includes(filter.toLowerCase())
|
||||
);
|
||||
|
||||
// Combine name and email filters, removing duplicates
|
||||
let filteredPublishers = [...new Set([...filteredPublishersByName, ...filteredPublishersByEmail])];
|
||||
|
||||
// inactive publishers filter
|
||||
filteredPublishers = showZeroShiftsOnly
|
||||
? filteredPublishers.filter(p => p.assignments.length === 0)
|
||||
: filteredPublishers;
|
||||
|
||||
setShownPubs(filteredPublishers);
|
||||
}, [filter, showZeroShiftsOnly]);
|
||||
|
||||
const checkboxRef = useRef();
|
||||
|
||||
const renderPublishers = () => {
|
||||
if (shownPubs.length === 0) {
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<a
|
||||
className="btn"
|
||||
href="javascript:void(0);"
|
||||
onClick={() => {
|
||||
setFilter("");
|
||||
handleFilterChange({ target: { value: "" } });
|
||||
}}
|
||||
>
|
||||
Clear filters
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
else {
|
||||
return shownPubs.map((publisher) => (
|
||||
<PublisherCard key={publisher.id} publisher={publisher} />
|
||||
));
|
||||
}
|
||||
};
|
||||
|
||||
const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value, type, checked } = event.target;
|
||||
|
||||
// setFilter(event.target.value);
|
||||
if (type === 'text') {
|
||||
setFilter(value);
|
||||
} else if (type === 'checkbox') {
|
||||
// setFilterIsImported({ ...checkboxFilter, [name]: checked });
|
||||
const { checked, indeterminate } = checkboxRef.current;
|
||||
if (!checked && !indeterminate) {
|
||||
// Checkbox was unchecked, set it to indeterminate state
|
||||
checkboxRef.current.indeterminate = true;
|
||||
setFilterIsImported({ checked: false, indeterminate: true });
|
||||
} else if (!checked && indeterminate) {
|
||||
// Checkbox was indeterminate, set it to checked state
|
||||
checkboxRef.current.checked = true;
|
||||
checkboxRef.current.indeterminate = false;
|
||||
setFilterIsImported({ checked: true, indeterminate: false });
|
||||
} else if (checked && !indeterminate) {
|
||||
// Checkbox was checked, set it to unchecked state
|
||||
checkboxRef.current.checked = false;
|
||||
checkboxRef.current.indeterminate = false;
|
||||
setFilterIsImported({ checked: false, indeterminate: false });
|
||||
} else {
|
||||
// Checkbox was checked and indeterminate (should not happen), set it to unchecked state
|
||||
checkboxRef.current.checked = false;
|
||||
checkboxRef.current.indeterminate = false;
|
||||
setFilterIsImported({ checked: false, indeterminate: false });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
|
||||
<div className="">
|
||||
<div className="flex items-center justify-center space-x-4 m-4">
|
||||
<div className="flex justify-center m-4">
|
||||
<a href="/cart/publishers/new" className="btn"> Добави вестител </a>
|
||||
</div>
|
||||
|
||||
<button className="button m-2 btn btn-danger" onClick={() => setIsModalOpen(true)} disabled={isDeleting} >
|
||||
{isDeleting ? "Изтриване..." : "Изтрий показаните вестители"}
|
||||
</button>
|
||||
<ConfirmationModal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
onConfirm={handleDeleteAllVisible}
|
||||
message="Сигурни ли сте, че искате да изтриете всички показани в момента вестители?"
|
||||
/>
|
||||
<div className="flex justify-center m-4">
|
||||
<a href="/cart/publishers/import" className="btn"> Import publishers </a>
|
||||
</div>
|
||||
</div>
|
||||
<div name="filters" className="flex items-center justify-center space-x-4 m-4 sticky top-4 z-10 bg-gray-100 p-2">
|
||||
<label htmlFor="filter">Filter:</label>
|
||||
<input type="text" id="filter" name="filter" value={filter} onChange={handleFilterChange}
|
||||
className="border border-gray-300 rounded-md px-2 py-1"
|
||||
/>
|
||||
|
||||
|
||||
<label htmlFor="zeroShiftsOnly" className="ml-4 inline-flex items-center">
|
||||
<input type="checkbox" id="zeroShiftsOnly" checked={showZeroShiftsOnly}
|
||||
onChange={e => setShowZeroShiftsOnly(e.target.checked)}
|
||||
className="form-checkbox text-indigo-600"
|
||||
/>
|
||||
<span className="ml-2">само без смени</span>
|
||||
</label>
|
||||
|
||||
<span id="filter-info" className="ml-4">{publishers.length} от {publishers.length} вестителя</span>
|
||||
|
||||
</div>
|
||||
<div className="grid gap-4 grid-cols-1 md:grid-cols-4 z-0">
|
||||
{renderPublishers()}
|
||||
</div>
|
||||
</div>
|
||||
</ProtectedRoute>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default PublishersPage;
|
||||
|
||||
//import { set } from "date-fns";
|
||||
|
||||
export const getServerSideProps = async (context) => {
|
||||
const axios = await axiosServer(context);
|
||||
//ToDo: refactor all axios calls to use axiosInstance and this URL
|
||||
const { data: publishers } = await axios.get('/api/data/publishers?select=id,firstName,lastName,email,isactive,isTrained,isImported,assignments.shift.startTime,availabilities.startTime&dev=fromuseefect');
|
||||
|
||||
return {
|
||||
props: {
|
||||
publishers,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user