fix group menu

2025-03-03 00:21:51 +07:00
parent 43fbef97f7 fa4be57a8b
commit 80596e6f29
71 changed files with 4252 additions and 15 deletions
--- a/src/components/confirm.tsx
+++ b/src/components/confirm.tsx
@ -0,0 +1,25 @@
+import React from "react";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
+import Button from "@mui/material/Button";
+
+const ConfirmDialog = ({ open, onClose, title, content, onYes, onNo }: any) => {
+  return (
+    <Dialog open={open} onClose={onClose}>
+      {title && <DialogTitle>{title}</DialogTitle>}
+      {content && <DialogContent>{content}</DialogContent>}
+      <DialogActions>
+        <Button onClick={onNo} color="secondary">
+          No
+        </Button>
+        <Button onClick={onYes} color="primary">
+          Yes
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmDialog;
--- a/src/components/ui/DataTable.tsx
+++ b/src/components/ui/DataTable.tsx
@ -0,0 +1,156 @@
+'use client';
+
+import {
+  ColumnDef,
+  ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable
+} from '@tanstack/react-table';
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from '@/components/ui/table';
+import { useState } from 'react';
+import { Input } from './input';
+import { Button } from './button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './dialog';
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
+  onUpdate: any;
+  onDelete: any;
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+  createGroup,
+  onUpdate,
+  onDelete
+}: DataTableProps<TData, TValue> & { createGroup?: () => void }) {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+  const [sorting, setSorting] = useState<SortingState>([]);
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: setColumnFilters,
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    state: {
+      sorting,
+      columnFilters
+    }
+  });
+
+  return (
+    <div>
+      <div className="flex items-center py-4 justify-between">
+        <Input
+          placeholder="Search"
+          value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
+          onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+          className="max-w-sm"
+        />
+
+        {createGroup && (
+          <Button variant="outline" onClick={createGroup}>
+            Create Group
+          </Button>
+        )}
+      </div>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  );
+                })}
+                <TableHead>Actions</TableHead>
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                  <TableCell>
+                    <div className="space-x-2">
+                      <Button
+                        className="bg-blue-500 text-white px-2 py-1 rounded"
+                        onClick={() => onUpdate(row.original)}>
+                        Update
+                      </Button>
+                      <Button
+                        className="bg-red-500 text-white px-2 py-1 rounded"
+                        onClick={() => onDelete(row.original)}>
+                        Delete
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="h-24 text-center">
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2 py-4">
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.previousPage()}
+          disabled={!table.getCanPreviousPage()}
+        >
+          Previous
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => table.nextPage()}
+          disabled={!table.getCanNextPage()}
+        >
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+}