diff --git a/src/pages/tickets.tsx b/src/pages/tickets.tsx index e63b3e1a..d03afb4f 100644 --- a/src/pages/tickets.tsx +++ b/src/pages/tickets.tsx @@ -25,6 +25,7 @@ import { withIronSessionSsr } from "iron-session/next"; import moment from "moment"; import Head from "next/head"; import { useEffect, useState } from "react"; +import { BsArrowDown, BsArrowUp } from "react-icons/bs"; import { ToastContainer } from "react-toastify"; const columnHelper = createColumnHelper(); @@ -75,6 +76,7 @@ export default function Tickets() { const [filteredTickets, setFilteredTickets] = useState([]); const [selectedTicket, setSelectedTicket] = useState(); const [assigneeFilter, setAssigneeFilter] = useState(); + const [dateSorting, setDateSorting] = useState<"asc" | "desc">("desc"); const [typeFilter, setTypeFilter] = useState(); const [statusFilter, setStatusFilter] = useState(); @@ -83,6 +85,12 @@ export default function Tickets() { const { users } = useUsers(); const { tickets, reload } = useTickets(); + const sortByDate = (a: Ticket, b: Ticket) => { + return moment((dateSorting === "desc" ? b : a).date).diff( + moment((dateSorting === "desc" ? a : b).date), + ); + }; + useEffect(() => { const filters = []; if (typeFilter) filters.push((x: Ticket) => x.type === typeFilter); @@ -90,8 +98,10 @@ export default function Tickets() { if (assigneeFilter) filters.push((x: Ticket) => x.assignedTo === assigneeFilter); - setFilteredTickets(filters.reduce((d, f) => d.filter(f), tickets)); - }, [tickets, typeFilter, statusFilter, assigneeFilter]); + setFilteredTickets( + [...filters.reduce((d, f) => d.filter(f), tickets)].sort(sortByDate), + ); + }, [tickets, typeFilter, statusFilter, assigneeFilter, dateSorting]); const columns = [ columnHelper.accessor("id", { @@ -120,7 +130,19 @@ export default function Tickets() { cell: (info) => info.getValue(), }), columnHelper.accessor("date", { - header: "Date", + id: "date", + header: ( + + ) as any, cell: (info) => moment(info.getValue()).format("DD/MM/YYYY - HH:mm"), }), columnHelper.accessor("subject", {