From 23584a0a50210ea197c0eba02296644a4bd55e2c Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Sun, 30 Jun 2024 13:36:13 +0200
Subject: [PATCH] select checkboxes

---
 src/app/story/columns.tsx          |  2 ++
 src/app/tailwind.css               |  8 ++++----
 src/app/ui/tables/data-table.tsx   |  7 ++-----
 src/app/ui/tables/selectColumn.tsx | 30 ++++++++++++++++++++++++++++++
 4 files changed, 38 insertions(+), 9 deletions(-)
 create mode 100644 src/app/ui/tables/selectColumn.tsx

diff --git a/src/app/story/columns.tsx b/src/app/story/columns.tsx
index 3b77f7f..10ffa3f 100644
--- a/src/app/story/columns.tsx
+++ b/src/app/story/columns.tsx
@@ -6,11 +6,13 @@ import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
 import { TextInputCell } from "app/ui/inputs/textInput"
+import { selectCol } from "app/ui/tables/selectColumn"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
 
 export const columns: ColumnDef<StoryWithGenres>[] = [
+  selectCol,
   {
     accessorKey: "title",
     header: ({ column }) => {
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index 3e9ce40..bccdab7 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -1072,10 +1072,6 @@ body {
   align-items: flex-start;
 }
 
-.items-end {
-  align-items: flex-end;
-}
-
 .items-center {
   align-items: center;
 }
@@ -1100,6 +1096,10 @@ body {
   justify-content: space-around;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
diff --git a/src/app/ui/tables/data-table.tsx b/src/app/ui/tables/data-table.tsx
index a984c1b..91dab39 100644
--- a/src/app/ui/tables/data-table.tsx
+++ b/src/app/ui/tables/data-table.tsx
@@ -46,7 +46,7 @@ import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 import pluralize from "app/lib/pluralize"
 import { updateTextField } from "app/lib/update"
 
-interface DataTableProps<TData, TValue> {
+export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
   data: TData[]
 }
@@ -85,13 +85,12 @@ export function DataTable<TData, TValue>({
     //this is where you put arbitrary functions etc to make them accessible via the table api
     meta: {
       updateTextField,
-      //TODO - move select row action here so it can be accessed from within a cell
-      selectRow: () => { }
     }
   })
 
 
 
+
   const pathname: Pathname = usePathname()
   const [filterBy, setFilterBy] = useState(table.getAllColumns()[0])
   const [isContextMenuOpen, setIsContextMenuOpen] = useState(false)
@@ -221,8 +220,6 @@ export function DataTable<TData, TValue>({
                     key={row.id}
                     data-state={row.getIsSelected() && "selected"}
                     tabIndex={0}
-                    //check if context menu is open, so as not to select the row on clicking a menu item
-                    onClick={() => { if (!isContextMenuOpen) { row.toggleSelected() } }}
                   >
                     {row.getVisibleCells().map((cell) => (
                       <TableCell key={cell.id}>
diff --git a/src/app/ui/tables/selectColumn.tsx b/src/app/ui/tables/selectColumn.tsx
new file mode 100644
index 0000000..622bdf2
--- /dev/null
+++ b/src/app/ui/tables/selectColumn.tsx
@@ -0,0 +1,30 @@
+import { Checkbox } from "@/components/ui/checkbox";
+import { CellContext, Column, ColumnDef, ColumnMeta, Header, HeaderContext, RowSelectionTableState, Table, TableState } from "@tanstack/react-table";
+
+export const selectCol = {
+  id: "select",
+  header: (props: HeaderContext<any, any>) => {
+    return (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={props.table.getIsAllRowsSelected()}
+          onCheckedChange={props.table.toggleAllRowsSelected}
+          aria-label="select/deselect all rows"
+        />
+      </div>
+
+    )
+  },
+
+  cell: (props: CellContext<any, any>) => {
+    return (
+      <div className="flex items-center justify-center">
+        <Checkbox
+          checked={props.row.getIsSelected()}
+          onCheckedChange={props.row.toggleSelected}
+          aria-label="select/deselect row" />
+      </div>
+    )
+  }
+}
+