cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-21 23:19:09 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

feat: table mode in editor

Browse Source
This commit is contained in:
Carlos Valente
2025-12-21 17:04:24 +01:00
parent 2af13b340b
commit 5f634bb48a
17 changed files with 405 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/useColumnManager.tsx
+14 -11
View File
@@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useLocalStorage } from '@mantine/hooks';
import { ColumnDef, ColumnSizingState, Updater } from '@tanstack/react-table';
@@ -6,15 +6,11 @@ import { debounce } from '../../../common/utils/debounce';
import { makeStageKey } from '../../../common/utils/localStorage';
import type { ExtendedEntry } from '../../../common/utils/rundownMetadata';
const tableSizesKey = makeStageKey('cuesheet-sizes');
const tableHiddenKey = makeStageKey('cuesheet-hidden');
const tableOrderKey = makeStageKey('cuesheet-order');
type TableRoot = 'editor' | 'cuesheet';
const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
}, 500);
export function useColumnSizes(tableRoot: TableRoot = 'cuesheet') {
const tableSizesKey = useMemo(() => makeStageKey(`${tableRoot}-table-sizes`), [tableRoot]);
export function useColumnSizes() {
const [columnSizing, setColumnSizingState] = useState<Record<string, number>>(() => {
try {
const stored = localStorage.getItem(tableSizesKey);
@@ -26,8 +22,11 @@ export function useColumnSizes() {
// save sizes to localStorage whenever they change (debounced)
useEffect(() => {
const saveSizesToStorage = debounce((sizes: Record<string, number>) => {
localStorage.setItem(tableSizesKey, JSON.stringify(sizes));
}, 500);
saveSizesToStorage(columnSizing);
}, [columnSizing]);
}, [columnSizing, tableSizesKey]);
const setColumnSizing = useCallback((sizesOrUpdater: Updater<ColumnSizingState>) => {
setColumnSizingState(sizesOrUpdater);
@@ -39,7 +38,9 @@ export function useColumnSizes() {
};
}
export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[], tableRoot: TableRoot = 'cuesheet') {
const tableOrderKey = useMemo(() => makeStageKey(`${tableRoot}-table-order`), [tableRoot]);
const [columnOrder, saveColumnOrder] = useLocalStorage<string[]>({
key: tableOrderKey,
defaultValue: columns.map((col) => col.id as string),
@@ -64,7 +65,9 @@ export function useColumnOrder(columns: ColumnDef<ExtendedEntry>[]) {
};
}
export function useColumnVisibility() {
export function useColumnVisibility(tableRoot: TableRoot = 'cuesheet') {
const tableHiddenKey = useMemo(() => makeStageKey(`${tableRoot}-table-hidden`), [tableRoot]);
const [columnVisibility, setColumnVisibility] = useLocalStorage({
key: tableHiddenKey,
defaultValue: {},