From 698d7a55ba3e114771f29077af7ee9d8dbfe06e5 Mon Sep 17 00:00:00 2001
From: prosfus <paurosfusftm@gmail.com>
Date: Sun, 24 Nov 2024 17:21:59 +0100
Subject: [PATCH] feat: go to service view on row click

---
 src/components/Table/index.tsx                  | 17 ++++++++++++++---
 .../services/components/ServicesList/index.tsx  |  4 ++++
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 4a6cd37..6c9d938 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -39,6 +39,7 @@ type ActionButton<T> = {
 type GenericTableProps<T> = {
   data: T[];
   columns: ColumnDef<T>[];
+  onRowClick?: (item: T) => void;
   actions?: ActionButton<T>[];
   bulkActions?: ActionButton<T[]>[];
   globalActions?: ActionButton<T[]>[];
@@ -51,6 +52,7 @@ function GenericTable<T extends object>({
   actions,
   bulkActions,
   globalActions,
+  onRowClick,
   idKey,
 }: GenericTableProps<T>) {
   const [selectedRows, setSelectedRows] = useState<Set<T[typeof idKey]>>(
@@ -175,11 +177,18 @@ function GenericTable<T extends object>({
           </TableHeader>
           <TableBody>
             {paginatedData?.map((item, rowIndex) => (
-              <TableRow key={rowIndex}>
+              <TableRow
+                key={rowIndex}
+                onClick={() => onRowClick?.(item)}
+                className="cursor-pointer"
+              >
                 <TableCell>
                   <Checkbox
                     checked={selectedRows.has(item[idKey])}
-                    onCheckedChange={() => toggleRow(item[idKey])}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      toggleRow(item[idKey]);
+                    }}
                   />
                 </TableCell>
                 {columns.map((column, colIndex) => (
@@ -193,7 +202,9 @@ function GenericTable<T extends object>({
                   <TableCell>
                     <div className="flex justify-end items-center">
                       {actions.map((action, index) => (
-                        <div key={index}>{action.button(item)}</div>
+                        <div key={index} onClick={(e) => e.stopPropagation()}>
+                          {action.button(item)}
+                        </div>
                       ))}
                     </div>
                   </TableCell>
diff --git a/src/pages/ui/services/components/ServicesList/index.tsx b/src/pages/ui/services/components/ServicesList/index.tsx
index 117d938..c4dfd96 100644
--- a/src/pages/ui/services/components/ServicesList/index.tsx
+++ b/src/pages/ui/services/components/ServicesList/index.tsx
@@ -95,6 +95,10 @@ function ServicesList() {
       <GenericTable<Service>
         data={filteredServices}
         idKey="name"
+        onRowClick={(item) => {
+          setFormService(item);
+          navigate(`/ui/services/${item.name}/settings`);
+        }}
         columns={[
           { header: "Name", accessor: "name" },
           { header: "Image", accessor: "image" },