diff --git a/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx b/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx index 9fc23c8ed..5645baf30 100644 --- a/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx +++ b/apps/client/src/common/components/input/auto-text-area/AutoTextArea.tsx @@ -25,4 +25,4 @@ export const AutoTextArea = (props: TextareaProps & { inputref: RefObject ); -}; +}; \ No newline at end of file diff --git a/apps/client/src/declarations/declaration.d.ts b/apps/client/src/declarations/declaration.d.ts index 70cd162d1..ffc1afc68 100644 --- a/apps/client/src/declarations/declaration.d.ts +++ b/apps/client/src/declarations/declaration.d.ts @@ -31,6 +31,7 @@ declare module '@tanstack/react-table' { options: { showDelayedTimes: boolean; hideTableSeconds: boolean; + allowEdits: boolean; }; } } diff --git a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx index d56875be7..c3156bfba 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/CuesheetTable.tsx @@ -1,4 +1,5 @@ import { useCallback, useRef } from 'react'; +import { useSearchParams } from 'react-router-dom'; import { useTableNav } from '@table-nav/react'; import { ColumnDef, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { isOntimeEvent, MaybeString, OntimeEvent, OntimeRundown, OntimeRundownEntry, TimeField } from 'ontime-types'; @@ -25,6 +26,9 @@ export default function CuesheetTable(props: CuesheetTableProps) { const { data, columns, showModal } = props; const { updateEvent, updateTimer } = useEventAction(); + const [searchParams] = useSearchParams(); + const blockEdits = searchParams.get('locked') ?? false; + const { followSelected, showDelayedTimes, hideTableSeconds } = useCuesheetOptions(); const { columnVisibility, columnOrder, columnSizing, resetColumnOrder, setColumnVisibility, setColumnSizing } = useColumnManager(columns); @@ -77,6 +81,7 @@ export default function CuesheetTable(props: CuesheetTableProps) { options: { showDelayedTimes, hideTableSeconds, + allowEdits: !blockEdits, }, }, }); diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx index 9a9c5ec67..54bc00103 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/MultiLineCell.tsx @@ -6,12 +6,13 @@ import useReactiveTextInput from '../../../../common/components/input/text-input interface MultiLineCellProps { initialValue: string; handleUpdate: (newValue: string) => void; + allowEdits?: boolean; } export default memo(MultiLineCell); function MultiLineCell(props: MultiLineCellProps) { - const { initialValue, handleUpdate } = props; + const { initialValue, handleUpdate, allowEdits } = props; const ref = useRef(null); const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]); @@ -38,6 +39,7 @@ function MultiLineCell(props: MultiLineCellProps) { onBlur={onBlur} onKeyDown={onKeyDown} spellCheck={false} + isDisabled={!allowEdits} /> ); } diff --git a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx index 6eb546291..95588ada0 100644 --- a/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx +++ b/apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-elements/SingleLineCell.tsx @@ -1,17 +1,18 @@ import { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react'; -import { Input } from '@chakra-ui/react'; +import { Input, Text } from '@chakra-ui/react'; import useReactiveTextInput from '../../../../common/components/input/text-input/useReactiveTextInput'; interface SingleLineCellProps { initialValue: string; allowSubmitSameValue?: boolean; + allowEdits?: boolean; handleUpdate: (newValue: string) => void; handleCancelUpdate?: () => void; } const SingleLineCell = forwardRef((props: SingleLineCellProps, inputRef) => { - const { initialValue, allowSubmitSameValue, handleUpdate, handleCancelUpdate } = props; + const { initialValue, allowSubmitSameValue, handleUpdate, handleCancelUpdate, allowEdits } = props; const ref = useRef(null); const submitCallback = useCallback((newValue: string) => handleUpdate(newValue), [handleUpdate]); @@ -38,6 +39,14 @@ const SingleLineCell = forwardRef((props: SingleLineCellProps, inputRef) => { }; }, [ref]); + if (allowEdits === false) { + return ( + + {initialValue} + + ); + } + return ( void; } @@ -18,7 +19,7 @@ interface ParentFocusableInput extends HTMLInputElement { export default memo(TimeInputDuration); function TimeInputDuration(props: PropsWithChildren) { - const { initialValue, lockedValue, delayed, onSubmit, children } = props; + const { initialValue, lockedValue, delayed, onSubmit, children, allowEdits } = props; const [isEditing, setIsEditing] = useState(false); const [value, setValue] = useState(initialValue); @@ -86,7 +87,7 @@ function TimeInputDuration(props: PropsWithChildren) { const timeString = millisToString(value); - return isEditing ? ( + return isEditing && allowEdits ? ( + {formattedTime} @@ -60,7 +66,13 @@ function MakeEnd({ getValue, row, table }: CellContext + {formattedTime} @@ -81,7 +93,12 @@ function MakeDuration({ getValue, row, table }: CellContext + {formattedDuration} ); @@ -103,7 +120,13 @@ function MakeMultiLineField({ row, column, table }: CellContext; + return ( + + ); } function LazyImage({ row, column, table }: CellContext) { @@ -140,7 +163,13 @@ function MakeSingleLineField({ row, column, table }: CellContext; + return ( + + ); } function MakeCustomField({ row, column, table }: CellContext) { @@ -158,7 +187,13 @@ function MakeCustomField({ row, column, table }: CellContext; + return ( + + ); } export function makeCuesheetColumns(customFields: CustomFields): ColumnDef[] {