From c445c42f8aa6ceaa5cfa8ba86f7fb76854fc199f Mon Sep 17 00:00:00 2001
From: Carlos Valente <carlosvalente@pm.me>
Date: Fri, 20 Dec 2024 12:39:49 +0100
Subject: [PATCH] refactor: extract edit element in table

---
 .../cuesheet-table/CuesheetTable.module.scss  | 20 +++++++-----------
 .../cuesheet/cuesheet-table/CuesheetTable.tsx | 21 +++++++------------
 .../CuesheetHeader.tsx                        |  2 +-
 .../cuesheet-table-elements/EventRow.tsx      | 11 ++++++++++
 4 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
index 2f51170dc..5ba435717 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.module.scss
@@ -32,23 +32,19 @@ $table-header-font-size: calc(1rem - 2px);
 
 .tableHeader,
 .eventRow {
+  .actionColumn {
+    width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
+    background-color: transparent;
+  }
+
   .indexColumn {
     display: flex;
     align-items: center;
     justify-content: end;
-    
-    min-width: 3em; // allow for 3-digit numbers
-    text-align: right;
-    font-weight: 400;
-    font-size: $table-header-font-size;
-    position: sticky;
-    left: 0;
-    z-index: 1;
-    background-color: $gray-1300; // will be overridden inline
-  }
 
-  .actionColumn {
-    width: calc(2rem + 0.5rem); // sm button size (--chakra-sizes-8) + 2 * padding
+    min-width: 3em; // allow for 3-digit numbers
+    font-size: $table-header-font-size;
+    background-color: $gray-1300; // will be overridden inline
   }
 }
 
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
index f4c24c38e..3ef193020 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx
@@ -1,6 +1,5 @@
 import { useRef } from 'react';
-import { IconButton, Menu, MenuButton } from '@chakra-ui/react';
-import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
+import { Menu } from '@chakra-ui/react';
 import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import Color from 'color';
 import {
@@ -11,6 +10,7 @@ import {
   OntimeEvent,
   OntimeRundown,
   OntimeRundownEntry,
+  TimeField,
 } from 'ontime-types';
 
 import { useEventAction } from '../../../common/hooks/useEventAction';
@@ -38,7 +38,7 @@ interface CuesheetTableProps {
 export default function CuesheetTable(props: CuesheetTableProps) {
   const { data, columns, showModal } = props;
 
-  const { updateEvent } = useEventAction();
+  const { updateEvent, updateTimer } = useEventAction();
   const { selectedEventId } = useSelectedEventId();
   const { followSelected, hideDelays, hidePast, hideIndexColumn } = useCuesheetOptions();
   const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } =
@@ -61,7 +61,7 @@ export default function CuesheetTable(props: CuesheetTableProps) {
     onColumnSizingChange: setColumnSizing,
     getCoreRowModel: getCoreRowModel(),
     meta: {
-      handleUpdate: async (rowIndex: number, accessor: string, payload: string, isCustom = false) => {
+      handleUpdate: (rowIndex: number, accessor: string, payload: string, isCustom = false) => {
         // check if value is the same
         const event = data[rowIndex];
         if (!event || !isOntimeEvent(event)) {
@@ -82,6 +82,10 @@ export default function CuesheetTable(props: CuesheetTableProps) {
 
         updateEvent({ id: event.id, [accessor]: payload });
       },
+      handleUpdateTimer: (eventId: string, field: TimeField, payload) => {
+        // the timer element already contains logic to avoid submitting a unchanged value
+        updateTimer(eventId, field, payload, true);
+      },
     },
   });
 
@@ -166,15 +170,6 @@ export default function CuesheetTable(props: CuesheetTableProps) {
                       colour={entry.colour}
                       showIndexColumn={!hideIndexColumn}
                     >
-                      <td>
-                        <MenuButton
-                          as={IconButton}
-                          size='sm'
-                          aria-label='Options'
-                          icon={<IoEllipsisHorizontal />}
-                          variant='ontime-subtle'
-                        />
-                      </td>
                       {row.getVisibleCells().map((cell) => {
                         return (
                           <td key={cell.id} style={{ width: cell.column.getSize(), backgroundColor: rowBgColour }}>
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
index adc4ac0c8..9fbea6d9b 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/CuesheetHeader.tsx
@@ -23,8 +23,8 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) {
 
         return (
           <tr key={headerGroup.id}>
-            <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
             <th className={style.actionColumn} />
+            <th className={style.indexColumn}>{showIndexColumn && '#'}</th>
             <SortableContext key={key} items={headerGroup.headers} strategy={horizontalListSortingStrategy}>
               {headerGroup.headers.map((header) => {
                 const width = header.getSize();
diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
index c8d52f0e1..9feabf9b2 100644
--- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
+++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/EventRow.tsx
@@ -1,4 +1,6 @@
 import { memo, MutableRefObject, PropsWithChildren, useLayoutEffect, useRef, useState } from 'react';
+import { IconButton, MenuButton } from '@chakra-ui/react';
+import { IoEllipsisHorizontal } from '@react-icons/all-files/io5/IoEllipsisHorizontal';
 import Color from 'color';
 
 import { cx, getAccessibleColour } from '../../../../common/utils/styleUtils';
@@ -55,6 +57,15 @@ function EventRow(props: PropsWithChildren<EventRowProps>) {
       style={{ opacity: `${isPast ? '0.2' : '1'}` }}
       ref={selectedRef ?? ownRef}
     >
+      <td className={style.actionColumn}>
+        <MenuButton
+          as={IconButton}
+          size='sm'
+          aria-label='Options'
+          icon={<IoEllipsisHorizontal />}
+          variant='ontime-subtle'
+        />
+      </td>
       <td className={style.indexColumn} style={{ backgroundColor, color: mutedText }}>
         {showIndexColumn && eventIndex}
       </td>