From a204eec7767a4dfc94e25481b32647e3ba35c31b Mon Sep 17 00:00:00 2001 From: andrzej Date: Wed, 7 Aug 2024 15:46:14 +0200 Subject: [PATCH] implement controlled edit / delete dialogs --- prisma/dev.db | Bin 69632 -> 69632 bytes src/app/tailwind.css | 52 -------------- src/app/ui/tables/contextMenu.tsx | 90 +++++++------------------ src/app/ui/tables/data-table.tsx | 61 ++++++++++++++++- src/app/ui/tables/inputs/textInput.tsx | 2 +- 5 files changed, 84 insertions(+), 121 deletions(-) diff --git a/prisma/dev.db b/prisma/dev.db index 24c5931e680f5f1bcb45a24022193ce280d34110..40bc4633b86bcdbb6a3df3e51a667e5fced4a667 100644 GIT binary patch delta 58 zcmV-A0LA}+pag)R1dtm6N0A&u0Y|Z5r2hd0wFLph2Lb^Jx620smH`Xi009Ak5rGW> QB?y;I2myn)?+F1B1`DPTQ2+n{ delta 58 zcmV-A0LA}+pag)R1dtm6MUfms0Y$N3r2hd2wFLph2Lb?jx620smH`Wq009Ak5rGW> QB?y;I2myn)?+F1B1`(SOaR2}S diff --git a/src/app/tailwind.css b/src/app/tailwind.css index 00165a0..f73f4ea 100644 --- a/src/app/tailwind.css +++ b/src/app/tailwind.css @@ -706,22 +706,6 @@ body { z-index: 100; } -.col-span-full { - grid-column: 1 / -1; -} - -.col-start-1 { - grid-column-start: 1; -} - -.col-start-3 { - grid-column-start: 3; -} - -.col-end-3 { - grid-column-end: 3; -} - .m-auto { margin: auto; } @@ -975,18 +959,6 @@ body { width: 100vw; } -.w-1 { - width: 0.25rem; -} - -.w-6 { - width: 1.5rem; -} - -.w-32 { - width: 8rem; -} - .min-w-\[8rem\] { min-width: 8rem; } @@ -1012,10 +984,6 @@ body { max-width: 24rem; } -.max-w-28 { - max-width: 7rem; -} - .max-w-xs { max-width: 20rem; } @@ -1088,10 +1056,6 @@ body { user-select: none; } -.grid-cols-12 { - grid-template-columns: repeat(12, minmax(0, 1fr)); -} - .flex-row { flex-direction: row; } @@ -1132,10 +1096,6 @@ body { justify-content: space-between; } -.justify-around { - justify-content: space-around; -} - .gap-1 { gap: 0.25rem; } @@ -1148,14 +1108,6 @@ body { gap: 1rem; } -.gap-3 { - gap: 0.75rem; -} - -.gap-44 { - gap: 11rem; -} - .gap-x-16 { -moz-column-gap: 4rem; column-gap: 4rem; @@ -1169,10 +1121,6 @@ body { row-gap: 2rem; } -.gap-y-4 { - row-gap: 1rem; -} - .space-x-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.25rem * var(--tw-space-x-reverse)); diff --git a/src/app/ui/tables/contextMenu.tsx b/src/app/ui/tables/contextMenu.tsx index 0975cd7..feb46ec 100644 --- a/src/app/ui/tables/contextMenu.tsx +++ b/src/app/ui/tables/contextMenu.tsx @@ -8,80 +8,40 @@ import { Row, Table, TableState } from "@tanstack/react-table" import { tableNameToItemName } from "app/lib/nameMaps" import EditSubmissionDialog from "app/submission/edit" -export default function FormContextMenu({ table, row }: ComponentProps<"div"> & { table: Table, row: Row }) { +export default function FormContextMenu({ table, row, openEditDialog, openDeleteDialog }: ComponentProps<"div"> & { table: Table, row: Row, openEditDialog: (row: Row) => void, openDeleteDialog: (row: Row) => void }) { const pathname = table.options.meta.pathname const selectedRows = table.getSelectedRowModel().flatRows - const [dialog, setDialog] = useState<"edit" | "delete" | null>("delete") return ( - - - {pathname !== "/submission" && selectedRows.length <= 1 ? + + {pathname !== "/submission" && selectedRows.length <= 1 ? + <> + + Inspect + + + : "" + } + + { + pathname === "/submission" ? <> - - Inspect - + openEditDialog(row)}> + Edit + : "" - } + } - { - pathname === "/submission" ? - <> - - setDialog("edit")}> - Edit - - - - : "" - } - - { - selectedRows.length > 0 ? - { table.resetRowSelection() }}>Deselect - : "" - } - - - setDialog("delete")}>Delete - - - - { - dialog === "delete" ? - <> - - Are you sure? - - Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone! - - - - - - - - - : dialog === "edit" ? - - : - <> - Edit/delete dialog - - } - - + { + selectedRows.length > 0 ? + { table.resetRowSelection() }}>Deselect + : "" + } + + openDeleteDialog(row)}>Delete + ) } diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx index c990f92..ae78d74 100644 --- a/src/app/ui/tables/data-table.tsx +++ b/src/app/ui/tables/data-table.tsx @@ -26,7 +26,8 @@ import { getFilteredRowModel, getCoreRowModel, getPaginationRowModel, - useReactTable + useReactTable, + Row } from "@tanstack/react-table" import { @@ -40,13 +41,15 @@ import { import { EyeIcon, Trash2 } from "lucide-react" import { usePathname } from "next/navigation" import FormContextMenu from "./contextMenu" -import { deleteRecords } from "app/lib/del" +import { deleteRecord, deleteRecords } from "app/lib/del" import { Pathname } from "app/types" import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog" import pluralize from "app/lib/pluralize" import { updateField } from "app/lib/update" import { tableNameToItemName } from "app/lib/nameMaps" import { Genre, Pub, Response, Story } from "@prisma/client" +import EditSubmissionDialog from "app/submission/edit" +import { DialogTitle } from "@radix-ui/react-dialog" export interface DataTableProps { columns: ColumnDef[] @@ -65,6 +68,9 @@ export function DataTable({ genres }: DataTableProps & ComponentProps<"div"> & { tableName: string, stories?: Story[], pubs?: Pub[], responses?: Response[], genres?: Genre[] }) { //STATE + const [isEditDialogVisible, setIsEditDialogVisible] = useState(false) + const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false) + const [dialogRow, SetDialogRow] = useState | null>(null) const [sorting, setSorting] = useState([]) const [columnFilters, setColumnFilters] = useState( [] @@ -103,6 +109,14 @@ export function DataTable({ }) + function openEditDialog(row) { + setIsEditDialogVisible(true) + SetDialogRow(row) + } + function openDeleteDialog(row) { + setIsDeleteDialogVisible(true) + SetDialogRow(row) + } const [filterBy, setFilterBy] = useState(table.getAllColumns()[0]) @@ -143,6 +157,39 @@ export function DataTable({ {children} + + + + + + + + + + + + Are you sure? + + Deleting a {tableNameToItemName(tableName)} cannot be undone! + + + + + + + + + +