diff --git a/apps/client/src/features/cuesheet/Cuesheet.tsx b/apps/client/src/features/cuesheet/Cuesheet.tsx index abf4a4f55..6811ae7d3 100644 --- a/apps/client/src/features/cuesheet/Cuesheet.tsx +++ b/apps/client/src/features/cuesheet/Cuesheet.tsx @@ -25,7 +25,7 @@ interface CuesheetProps { } export default function Cuesheet({ data, columns, handleUpdate, selectedId }: CuesheetProps) { - const { followSelected, showSettings, showDelayBlock, showPrevious } = useCuesheetSettings(); + const { followSelected, showSettings, showDelayBlock, showPrevious, showIndexColumn } = useCuesheetSettings(); const [columnVisibility, setColumnVisibility] = useLocalStorage({ key: 'table-hidden', defaultValue: {} }); const [columnOrder, saveColumnOrder] = useLocalStorage({ @@ -112,7 +112,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu )}
- + {rowModel.rows.map((row) => { const key = row.original.id; @@ -165,6 +165,7 @@ export default function Cuesheet({ data, columns, handleUpdate, selectedId }: Cu selectedRef={isSelected ? selectedRef : undefined} skip={row.original.skip} colour={row.original.colour} + showIndexColumn={showIndexColumn} > {row.getVisibleCells().map((cell) => { return ( diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx index a72f01318..956882ee4 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx +++ b/apps/client/src/features/cuesheet/cuesheet-table-elements/CuesheetHeader.tsx @@ -1,4 +1,3 @@ -import { Tooltip } from '@chakra-ui/react'; import { closestCorners, DndContext, @@ -13,7 +12,6 @@ import { flexRender, HeaderGroup } from '@tanstack/react-table'; import { OntimeRundownEntry } from 'ontime-types'; import { getAccessibleColour } from '../../../common/utils/styleUtils'; -import { tooltipDelayFast } from '../../../ontimeConfig'; import { SortableCell } from './SortableCell'; @@ -22,10 +20,11 @@ import style from '../Cuesheet.module.scss'; interface CuesheetHeaderProps { headerGroups: HeaderGroup[]; saveColumnOrder: (fromId: string, toId: string) => void; + showIndexColumn: boolean; } export default function CuesheetHeader(props: CuesheetHeaderProps) { - const { headerGroups, saveColumnOrder } = props; + const { headerGroups, saveColumnOrder, showIndexColumn } = props; const handleOnDragEnd = (event: DragEndEvent) => { const { delta, active, over } = event; @@ -61,11 +60,7 @@ export default function CuesheetHeader(props: CuesheetHeaderProps) { return ( - + {showIndexColumn && } {headerGroup.headers.map((header) => { const width = header.getSize(); diff --git a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx index 61bdba737..73b15661b 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx +++ b/apps/client/src/features/cuesheet/cuesheet-table-elements/EventRow.tsx @@ -8,6 +8,7 @@ const pastOpacity = '0.2'; interface EventRowProps { eventIndex: number; + showIndexColumn: boolean; isPast?: boolean; selectedRef?: MutableRefObject; skip?: boolean; @@ -15,7 +16,7 @@ interface EventRowProps { } function EventRow(props: PropsWithChildren) { - const { children, eventIndex, isPast, selectedRef, skip, colour } = props; + const { children, eventIndex, isPast, selectedRef, skip, colour, showIndexColumn } = props; const ownRef = useRef(null); const [isVisible, setIsVisible] = useState(false); @@ -55,9 +56,11 @@ function EventRow(props: PropsWithChildren) { style={{ opacity: `${isPast ? pastOpacity : '1'}` }} ref={selectedRef ?? ownRef} > - + {showIndexColumn && ( + + )} {isVisible ? children : null} ); diff --git a/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx b/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx index 5b9a47a37..045196bc0 100644 --- a/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx +++ b/apps/client/src/features/cuesheet/cuesheet-table-settings/CuesheetTableSettings.tsx @@ -24,11 +24,13 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) { const { columns, handleResetResizing, handleResetReordering, handleClearToggles } = props; const { followSelected, + showIndexColumn, toggleFollow, showPrevious, togglePreviousVisibility, showDelayBlock, showDelayedTimes, + toggleIndexColumn, toggleDelayedTimes, toggleDelayVisibility, } = useCuesheetSettings(); @@ -38,6 +40,10 @@ function CuesheetTableSettings(props: CuesheetTableSettingsProps) {
Toggle column visibility
+ {columns.map((column) => { const columnHeader = column.columnDef.header; const visible = column.getIsVisible(); diff --git a/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx b/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx index 0b840f5a5..cf08701d1 100644 --- a/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx +++ b/apps/client/src/features/cuesheet/store/CuesheetSettings.tsx @@ -4,6 +4,7 @@ import { booleanFromLocalStorage } from '../../../common/utils/localStorage'; interface CuesheetSettings { showSettings: boolean; + showIndexColumn: boolean; followSelected: boolean; showPrevious: boolean; showDelayBlock: boolean; @@ -12,6 +13,7 @@ interface CuesheetSettings { toggleSettings: (newValue?: boolean) => void; toggleFollow: (newValue?: boolean) => void; togglePreviousVisibility: (newValue?: boolean) => void; + toggleIndexColumn: (newValue?: boolean) => void; toggleDelayVisibility: (newValue?: boolean) => void; toggleDelayedTimes: (newValue?: boolean) => void; } @@ -27,11 +29,13 @@ enum CuesheetKeys { Follow = 'ontime-cuesheet-follow-selected', DelayVisibility = 'ontime-cuesheet-show-delay', PreviousVisibility = 'ontime-cuesheet-show-previous', + ColumnIndex = 'ontime-cuesheet-show-index-column', DelayedTimes = 'ontime-cuesheet-show-delayed', } export const useCuesheetSettings = create()((set) => ({ showSettings: false, + showIndexColumn: booleanFromLocalStorage(CuesheetKeys.ColumnIndex, true), followSelected: booleanFromLocalStorage(CuesheetKeys.Follow, false), showPrevious: booleanFromLocalStorage(CuesheetKeys.PreviousVisibility, true), showDelayBlock: booleanFromLocalStorage(CuesheetKeys.DelayVisibility, true), @@ -44,6 +48,12 @@ export const useCuesheetSettings = create()((set) => ({ localStorage.setItem(CuesheetKeys.Follow, String(followSelected)); return { followSelected }; }), + toggleIndexColumn: (newValue?: boolean) => + set((state) => { + const showIndexColumn = toggle(state.showIndexColumn, newValue); + localStorage.setItem(CuesheetKeys.ColumnIndex, String(showIndexColumn)); + return { showIndexColumn }; + }), togglePreviousVisibility: (newValue?: boolean) => set((state) => { const showPrevious = toggle(state.showPrevious, newValue);
- - # - - # - {eventIndex} - + {eventIndex} +