feat: Added table sorting and contract number + date columns

Author: VlO-OlV

admission-web/src/components/pages/admin/edit-entrant/components/ContractForm.tsx

@@ -52,6 +52,7 @@ import { isUniquePriorities } from '@/lib/utils/isUnique';
 import { useCommonToast } from '@/components/ui/toast/use-common-toast';
 import { Specialty } from '$/utils/src/enums/SpecialtyEnum';
 import { PaymentType } from '$/utils/src/enums/PaymentTypeEnum';
+import { useQueryClient } from '@tanstack/react-query';
 
 interface ContractFormProps {
   data: DocumentsApiBody;
@@ -69,6 +70,7 @@ export const ContractForm: FC<ContractFormProps> = ({
   entrantLastName,
 }) => {
   const { toastSuccess, toastError } = useCommonToast();
+  const queryClient = useQueryClient();
 
   const form = useForm<TAdminDocumentsSchema>({
     resolver: zodResolver(AdminDocumentsSchema),
@@ -107,6 +109,9 @@ export const ContractForm: FC<ContractFormProps> = ({
           },
           data.id
         );
+        queryClient.invalidateQueries({
+          queryKey: ['all-entrants'],
+        });
         toastSuccess(`Зміни збережено!`);
       } catch {
         toastError('Щось пішло не так!');

admission-web/src/components/pages/admin/entrants/components/EntrantsColumns.tsx

@@ -18,8 +18,20 @@ export const EntrantsColumns: ColumnDef<AdminUser>[] = [
     },
   },
   {
-    accessorKey: 'contracts',
+    accessorKey: 'degree',
     header: 'Освітній ступінь',
+    sortingFn: (rowA, rowB) => {
+      const getEntrantDegree = ({ contracts }: AdminUser) => {
+        if (contracts.length === 0) return '-';
+        return educationalDegreeLabels[
+          contracts[0].degree as EducationalDegree
+        ];
+      };
+
+      return getEntrantDegree(rowA.original).localeCompare(
+        getEntrantDegree(rowB.original)
+      );
+    },
     cell: ({ row }) => {
       return row.original.contracts.length
         ? educationalDegreeLabels[
@@ -31,6 +43,16 @@ export const EntrantsColumns: ColumnDef<AdminUser>[] = [
   {
     accessorKey: 'fundingSource',
     header: 'Форма фінансування',
+    sortingFn: (rowA, rowB) => {
+      const getEntrantFundingSource = ({ contracts }: AdminUser) => {
+        if (contracts.length === 0) return '-';
+        return FundingSourceLabels[contracts[0].fundingSource as FundingSource];
+      };
+
+      return getEntrantFundingSource(rowA.original).localeCompare(
+        getEntrantFundingSource(rowB.original)
+      );
+    },
     cell: ({ row }) => {
       return row.original.contracts.length > 0
         ? FundingSourceLabels[
@@ -42,6 +64,24 @@ export const EntrantsColumns: ColumnDef<AdminUser>[] = [
   {
     accessorKey: 'expectedSpecialities',
     header: 'Спеціальність',
+    sortingFn: (rowA, rowB) => {
+      const getEntrantSpecialities = ({
+        contracts,
+        expectedSpecialities,
+      }: AdminUser) => {
+        if (contracts.length === 0) return '-';
+        return (
+          contracts.find((contract) => contract.state === 'APPROVED')
+            ?.specialty ||
+          expectedSpecialities ||
+          contracts[0].specialty
+        );
+      };
+
+      return getEntrantSpecialities(rowA.original).localeCompare(
+        getEntrantSpecialities(rowB.original)
+      );
+    },
     cell: ({ row }) => {
       const { contracts, expectedSpecialities } = row.original;
       if (contracts.length > 0) {
@@ -61,8 +101,21 @@ export const EntrantsColumns: ColumnDef<AdminUser>[] = [
     },
   },
   {
-    accessorKey: 'contracts',
+    accessorKey: 'status',
     header: 'Статус',
+    sortingFn: (rowA, rowB) => {
+      const getEntrantStatus = ({ role, contracts }: AdminUser) => {
+        if (role === 'ADMIN') return 'Відсутній';
+        if (contracts.length === 0) return 'Не подано';
+        if (contracts.some((contract) => contract.state === 'APPROVED'))
+          return 'Зареєстровано';
+        return 'Подано';
+      };
+
+      return getEntrantStatus(rowA.original).localeCompare(
+        getEntrantStatus(rowB.original)
+      );
+    },
     cell: ({ row }) => {
       const { contracts, role } = row.original;
 
@@ -93,4 +146,58 @@ export const EntrantsColumns: ColumnDef<AdminUser>[] = [
       );
     },
   },
+  {
+    accessorKey: 'contractNumber',
+    header: 'Номер',
+    sortingFn: (rowA, rowB) => {
+      const contractADate =
+        rowA.original.contracts.find(
+          (contract) => contract.state === 'APPROVED'
+        )?.number || '-';
+      const contractBDate =
+        rowB.original.contracts.find(
+          (contract) => contract.state === 'APPROVED'
+        )?.number || '-';
+
+      return contractADate.localeCompare(contractBDate);
+    },
+    cell: ({ row }) => {
+      const { contracts } = row.original;
+
+      const approvedContract = contracts.find(
+        (contract) => contract.state === 'APPROVED'
+      );
+
+      return approvedContract?.number || '-';
+    },
+  },
+  {
+    accessorKey: 'contractDate',
+    header: 'Дата',
+    sortingFn: (rowA, rowB) => {
+      const contractADate =
+        rowA.original.contracts.find(
+          (contract) => contract.state === 'APPROVED'
+        )?.date || '-';
+      const contractBDate =
+        rowB.original.contracts.find(
+          (contract) => contract.state === 'APPROVED'
+        )?.date || '-';
+
+      return contractADate
+        .split('.')
+        .reverse()
+        .join('.')
+        .localeCompare(contractBDate.split('.').reverse().join('.'));
+    },
+    cell: ({ row }) => {
+      const { contracts } = row.original;
+
+      const approvedContract = contracts.find(
+        (contract) => contract.state === 'APPROVED'
+      );
+
+      return approvedContract?.date || '-';
+    },
+  },
 ];

admission-web/src/components/pages/admin/entrants/components/EntrantsDataTable.tsx

@@ -7,6 +7,8 @@ import {
   getCoreRowModel,
   getFilteredRowModel,
   getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
   useReactTable,
 } from '@tanstack/react-table';
 
@@ -22,13 +24,14 @@ import React, { useState } from 'react';
 import { Input } from '@/components/ui/input';
 import { AdminEntrantTablePagination } from '@/components/pages/admin/entrants/components/AdminEntrantTablePagination';
 import { Button } from '@/components/ui/button';
-import { Trash2Icon } from 'lucide-react';
+import { ChevronDown, ChevronUp, Trash2Icon } from 'lucide-react';
 import AdminEntrantsApi from '@/app/api/admin-entrants/admin-entrants-api';
 import { useCommonToast } from '@/components/ui/toast/use-common-toast';
 import AdminAlertDialog from '../../common/components/AdminAlertDialog';
 import { AdminUser } from '@/app/api/admin-entrants/admin-entrants-api.types';
 import Link from 'next/link';
 import { RefetchOptions, QueryObserverResult } from '@tanstack/react-query';
+import { cn } from '@/lib/utils/cn';
 
 interface DataTableProps {
   columns: ColumnDef<AdminUser>[];
@@ -44,15 +47,20 @@ export function AdminEntrantDataTable({
   refetch,
 }: DataTableProps) {
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
     onColumnFiltersChange: setColumnFilters,
     getFilteredRowModel: getFilteredRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
     state: {
       columnFilters,
+      sorting,
     },
   });
   const { toastSuccess, toastError } = useCommonToast();
@@ -89,13 +97,38 @@ export function AdminEntrantDataTable({
               <TableRow key={headerGroup.id}>
                 {headerGroup.headers.map((header) => {
                   return (
-                    <TableHead key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
+                    <TableHead
+                      key={header.id}
+                      onClick={header.column.getToggleSortingHandler()}
+                      className={cn(
+                        header.column.getCanSort() &&
+                          'cursor-pointer select-none'
+                      )}
+                    >
+                      {header.isPlaceholder ? null : (
+                        <div className='flex items-center gap-2'>
+                          {flexRender(
                             header.column.columnDef.header,
                             header.getContext()
                           )}
+                          {{
+                            asc: (
+                              <ChevronUp
+                                className='min-w-5'
+                                height={20}
+                                width={20}
+                              />
+                            ),
+                            desc: (
+                              <ChevronDown
+                                className='min-w-5'
+                                height={20}
+                                width={20}
+                              />
+                            ),
+                          }[header.column.getIsSorted() as string] ?? null}
+                        </div>
+                      )}
                     </TableHead>
                   );
                 })}