From 4984ff3317e03b025f3f4953eb5fecbf35ac5d0e Mon Sep 17 00:00:00 2001
From: Jiho Park <59248080+jihorobert@users.noreply.github.com>
Date: Tue, 19 Mar 2024 17:30:49 +0900
Subject: [PATCH] feat(fe): data table admin make filter search pagination
 delete functions optional (#1572)

* feat(fe): make component for search lang tags filter

* feat(fe): add enable props for search filter delete functions

* feat(fe): make pagination optional

* feat(fe): change href when click row
---
 apps/frontend/app/admin/problem/page.tsx    |   9 +-
 apps/frontend/components/DataTableAdmin.tsx | 151 +++++++++++---------
 2 files changed, 92 insertions(+), 68 deletions(-)

diff --git a/apps/frontend/app/admin/problem/page.tsx b/apps/frontend/app/admin/problem/page.tsx
index b2de86c0f5..acb17610c6 100644
--- a/apps/frontend/app/admin/problem/page.tsx
+++ b/apps/frontend/app/admin/problem/page.tsx
@@ -114,7 +114,14 @@ export default function Page() {
             ))}
           </>
         ) : (
-          <DataTableAdmin columns={columns} data={problems} />
+          <DataTableAdmin
+            columns={columns}
+            data={problems}
+            enableSearch={true}
+            enableFilter={true}
+            enableDelete={true}
+            enablePagination={true}
+          />
         )}
       </div>
       <ScrollBar orientation="horizontal" />
diff --git a/apps/frontend/components/DataTableAdmin.tsx b/apps/frontend/components/DataTableAdmin.tsx
index 0c415111be..abb710a226 100644
--- a/apps/frontend/components/DataTableAdmin.tsx
+++ b/apps/frontend/components/DataTableAdmin.tsx
@@ -22,7 +22,7 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import { useQuery, useMutation } from '@apollo/client'
+import { useMutation, useQuery } from '@apollo/client'
 import type { ColumnDef, SortingState } from '@tanstack/react-table'
 import {
   flexRender,
@@ -48,26 +48,28 @@ import { Input } from './ui/input'
 interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
+  enableSearch?: boolean // Enable search title
+  enableFilter?: boolean // Enable filter for languages and tags
+  enableDelete?: boolean // Enable delete selected rows
+  enablePagination?: boolean // Enable pagination
 }
 
-// dummy data
 const languageOptions = ['C', 'Cpp', 'Golang', 'Java', 'Python2', 'Python3']
 
 export function DataTableAdmin<TData, TValue>({
   columns,
-  data
+  data,
+  enableSearch = false,
+  enableFilter = false,
+  enableDelete = false,
+  enablePagination = false
 }: DataTableProps<TData, TValue>) {
   const [rowSelection, setRowSelection] = useState({})
   const [sorting, setSorting] = useState<SortingState>([])
   const pathname = usePathname()
   const page = pathname.split('/').pop()
-
   const router = useRouter()
-
-  const { data: tagsData } = useQuery(GET_TAGS)
-  const tags =
-    tagsData?.getTags.map(({ id, name }) => ({ id: +id, name })) ?? []
-
+  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length
   const table = useReactTable({
     data,
     columns,
@@ -87,8 +89,6 @@ export function DataTableAdmin<TData, TValue>({
     getFacetedUniqueValues: getFacetedUniqueValues()
   })
 
-  const selectedRowCount = Object.values(rowSelection).filter(Boolean).length
-
   const DELETE_PROBLEM = gql(`
   mutation DeleteProblem($groupId: Int!, $id: Int!) {
     deleteProblem(groupId: $groupId, id: $id) {
@@ -98,13 +98,11 @@ export function DataTableAdmin<TData, TValue>({
 `)
 
   const [deleteProblem] = useMutation(DELETE_PROBLEM)
-
   // TODO: contest랑 notice도 같은 방식으로 추가
   const handleDeleteRows = async () => {
     const selectedRows = table.getSelectedRowModel().rows as {
       original: { id: number }
     }[]
-
     const deletePromise = selectedRows.map((row) => {
       if (page === 'problem') {
         return deleteProblem({
@@ -127,64 +125,81 @@ export function DataTableAdmin<TData, TValue>({
       })
   }
 
+  const { data: tagsData } = useQuery(GET_TAGS)
+  const tags =
+    tagsData?.getTags.map(({ id, name }) => ({ id: +id, name })) ?? []
+
   return (
     <div className="space-y-4">
-      <div className="flex justify-between">
-        <div className="flex gap-2">
-          <Input
-            placeholder="Search"
-            value={(table.getColumn('title')?.getFilterValue() as string) ?? ''}
-            onChange={(event) =>
-              table.getColumn('title')?.setFilterValue(event.target.value)
-            }
-            className="h-10 w-[150px] lg:w-[250px]"
-          />
-
-          {table.getColumn('languages') && (
-            <DataTableLangFilter
-              column={table.getColumn('languages')}
-              title="Languages"
-              options={languageOptions}
-            />
-          )}
+      {(enableSearch || enableFilter || enableDelete) && (
+        <div className="flex justify-between">
+          <div className="flex gap-2">
+            {enableSearch && (
+              <Input
+                placeholder="Search"
+                value={
+                  (table.getColumn('title')?.getFilterValue() as string) ?? ''
+                }
+                onChange={(event) =>
+                  table.getColumn('title')?.setFilterValue(event.target.value)
+                }
+                className="h-10 w-[150px] lg:w-[250px]"
+              />
+            )}
+            {enableFilter && (
+              <div className="flex gap-2">
+                {table.getColumn('languages') && (
+                  <DataTableLangFilter
+                    column={table.getColumn('languages')}
+                    title="Languages"
+                    options={languageOptions}
+                  />
+                )}
+                {table.getColumn('tag') && (
+                  <DataTableTagsFilter
+                    column={table.getColumn('tag')}
+                    title="Tags"
+                    options={tags}
+                  />
+                )}
+              </div>
+            )}
+          </div>
 
-          {table.getColumn('tag') && (
-            <DataTableTagsFilter
-              column={table.getColumn('tag')}
-              title="Tags"
-              options={tags}
-            />
-          )}
-        </div>
-        {selectedRowCount !== 0 ? (
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
+          {enableDelete ? (
+            selectedRowCount !== 0 ? (
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button variant="outline">
+                    <PiTrashLight fontSize={18} />
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>Delete</AlertDialogTitle>
+                    <AlertDialogDescription>
+                      Are you sure you want to permanently delete{' '}
+                      {selectedRowCount} {page}(s)?
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>Cancel</AlertDialogCancel>
+                    <AlertDialogAction asChild>
+                      <Button onClick={() => handleDeleteRows()}>
+                        Continue
+                      </Button>
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            ) : (
               <Button variant="outline">
                 <PiTrashLight fontSize={18} />
               </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>Delete</AlertDialogTitle>
-                <AlertDialogDescription>
-                  Are you sure you want to permanently delete {selectedRowCount}{' '}
-                  {page}(s)?
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>Cancel</AlertDialogCancel>
-                <AlertDialogAction asChild>
-                  <Button onClick={() => handleDeleteRows()}>Continue</Button>
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
-        ) : (
-          <Button variant="outline">
-            <PiTrashLight fontSize={18} />
-          </Button>
-        )}
-      </div>
+            )
+          ) : null}
+        </div>
+      )}
 
       <div className="rounded-md border">
         <Table>
@@ -211,7 +226,9 @@ export function DataTableAdmin<TData, TValue>({
             {table.getRowModel().rows?.length ? (
               table.getRowModel().rows.map((row) => {
                 const href =
-                  `/admin/${page}/${(row.original as { id: number }).id}` as Route
+                  page === 'contest'
+                    ? (`/admin/contest/${(row.original as { id: number }).id}` as Route)
+                    : (`/admin/problem/${(row.original as { id: number }).id}` as Route)
                 return (
                   <TableRow
                     key={row.id}
@@ -250,7 +267,7 @@ export function DataTableAdmin<TData, TValue>({
           </TableBody>
         </Table>
       </div>
-      <DataTablePagination table={table} />
+      {enablePagination && <DataTablePagination table={table} />}
     </div>
   )
 }