From 336c024bba050e46d3f05c284a6593c21f2d1a0a Mon Sep 17 00:00:00 2001
From: Serge <sergesoroka@gmail.com>
Date: Tue, 12 Mar 2024 14:46:04 +0200
Subject: [PATCH] Row Selection, background color

---
 src/DataTable/TemplateTable.tsx         | 51 ++++++++++++-------------
 src/StartScreenComp/StartScreenComp.css |  8 ++++
 src/components/ui/checkbox.tsx          | 14 +++----
 3 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/src/DataTable/TemplateTable.tsx b/src/DataTable/TemplateTable.tsx
index da43dc6..186cbbe 100644
--- a/src/DataTable/TemplateTable.tsx
+++ b/src/DataTable/TemplateTable.tsx
@@ -11,33 +11,30 @@ import { RowsIcon } from "lucide-react";
 import { Checkbox } from "@/components/ui/checkbox";
 
 const columns = [
-  {
-    accessorKey: "uuid",
-    header: ({ table }) => (
-      <Checkbox
-        checked={
-          table.getIsAllPageRowsSelected() ||
-          (table.getIsSomePageRowsSelected() && "indeterminate")
-        }
-        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-        aria-label="Select all"
-      />
-    ),
-    cell: ({ row }) => (
-      <Checkbox
-        checked={row.getIsSelected()}
-        onCheckedChange={(value) => {
-          row.toggleSelected(!!value);
-        }}
-        aria-label="Select row"
-      />
-    ),
-  },
+  // {
+  //   accessorKey: "uuid",
+  //   header: ({ table }) => <>#</>,
+  //   cell: ({ row }) => (
+  //     <Checkbox
+  //       checked={row.getIsSelected()}
+  //       onCheckedChange={(value) => {
+  //         row.toggleSelected(!!value);
+  //       }}
+  //       aria-label="Select row"
+  //     />
+  //   ),
+  // },
+
   {
     accessorKey: "template_name",
     header: "Template Name",
     cell: (props) => <p>{props.getValue()}</p>,
   },
+  {
+    accessorKey: "template_author",
+    header: "Template Author",
+    cell: (props) => <p>{props.getValue()}</p>,
+  },
   {
     accessorKey: "METHOD",
     header: "Method",
@@ -58,6 +55,8 @@ const columns = [
 export default function TemplateTable({ data }) {
   const [rowSelection, setRowSelection] = useState({});
 
+  console.log(rowSelection);
+
   const table = useReactTable({
     data,
     columns,
@@ -71,11 +70,7 @@ export default function TemplateTable({ data }) {
 
   const setIdShosen = useSetIsShosen();
   useEffect(() => {
-    setIdShosen(
-      data && Object.keys(rowSelection)[0]
-        ? data[Object.keys(rowSelection)[0]].uuid
-        : null
-    );
+    setIdShosen(data && rowSelection ? data[rowSelection]?.uuid : null);
   }, [rowSelection]);
 
   return (
@@ -96,6 +91,8 @@ export default function TemplateTable({ data }) {
               <tr
                 key={RowsIcon.id}
                 data-state={row.getIsSelected() && "selected"}
+                onClick={() => setRowSelection(row.id)}
+                className={row.id == rowSelection ? "selected" : "nonSelected"}
               >
                 {row.getVisibleCells().map((cell) => (
                   <td key={cell.id}>
diff --git a/src/StartScreenComp/StartScreenComp.css b/src/StartScreenComp/StartScreenComp.css
index 6c96fe1..1b42fae 100644
--- a/src/StartScreenComp/StartScreenComp.css
+++ b/src/StartScreenComp/StartScreenComp.css
@@ -156,3 +156,11 @@ tr.choosen {
 iframe {
   border: none;
 }
+
+.selected {
+  background-color: #dee0ff;
+}
+.nonSelected {
+  background-color: #fff;
+  cursor: pointer;
+}
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index 7e8c96a..18f9570 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
@@ -22,7 +22,7 @@ const Checkbox = React.forwardRef<
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
-))
-Checkbox.displayName = CheckboxPrimitive.Root.displayName
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox }
+export { Checkbox };