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

refactor: cuesheet design review

Browse Source 
fix: parsing of custom fields for blocks
refactor: extract cuesheet settings
refactor: cuesheet actions
refactor: improve cuesheet performance on resizing
This commit is contained in:
Carlos Valente
2025-06-29 08:51:38 +02:00
committed by Carlos Valente
parent 0726c04f20
commit 8ad260d28a
61 changed files with 1421 additions and 734 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenu.tsx
+53 -8
View File
@@ -1,17 +1,38 @@
import { memo } from 'react';
import { Menu, MenuButton, Portal } from '@chakra-ui/react';
import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
import { Menu, MenuButton, MenuDivider, MenuItem, MenuList, Portal } from '@chakra-ui/react';
import { isOntimeEvent, SupportedEntry } from 'ontime-types';
import { useEntryActions } from '../../../../common/hooks/useEntryAction';
import { cloneEvent } from '../../../../common/utils/clone';
import { useCuesheetEditModal } from '../../cuesheet-edit-modal/useCuesheetEditModal';
import CuesheetTableMenuActionsProps from './CuesheetTableMenuActions';
import { useCuesheetTableMenu } from './useCuesheetTableMenu';
interface CuesheetTableMenuProps {
showModal: (eventId: string) => void;
}
export default memo(CuesheetTableMenu);
function CuesheetTableMenu({ showModal }: CuesheetTableMenuProps) {
function CuesheetTableMenu() {
const { isOpen, eventId, entryIndex, position, closeMenu } = useCuesheetTableMenu();
const { addEntry, getEntryById, move, deleteEntry } = useEntryActions();
const showModal = useCuesheetEditModal((state) => state.setEditableEntry);
const handleCloneEvent = () => {
if (!eventId) {
return;
}
const currentEvent = getEntryById(eventId);
if (!currentEvent || !isOntimeEvent(currentEvent)) {
return;
}
const newEvent = cloneEvent(currentEvent);
try {
addEntry(newEvent, { after: eventId });
} catch (_error) {
// we do not handle errors here
}
};
return (
<Portal>
@@ -26,7 +47,31 @@ function CuesheetTableMenu({ showModal }: CuesheetTableMenuProps) {
w={1}
h={1}
/>
<CuesheetTableMenuActionsProps eventId={eventId} entryIndex={entryIndex} showModal={showModal} />
<MenuList>
<MenuItem icon={<IoOptions />} onClick={() => showModal(eventId)}>
Edit ...
</MenuItem>
<MenuDivider />
<MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { before: eventId })}>
Add event above
</MenuItem>
<MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { after: eventId })}>
Add event below
</MenuItem>
<MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
Clone event
</MenuItem>
<MenuDivider />
<MenuItem isDisabled={entryIndex < 1} icon={<IoArrowUp />} onClick={() => move(eventId, 'up')}>
Move up
</MenuItem>
<MenuItem icon={<IoArrowDown />} onClick={() => move(eventId, 'down')}>
Move down
</MenuItem>
<MenuItem icon={<IoTrash />} onClick={() => deleteEntry([eventId])}>
Delete
</MenuItem>
</MenuList>
</Menu>
)}
</Portal>
apps/client/src/views/cuesheet/cuesheet-table/cuesheet-table-menu/CuesheetTableMenuActions.tsx
-58
View File
@@ -1,58 +0,0 @@
import { IoAdd, IoArrowDown, IoArrowUp, IoDuplicateOutline, IoOptions, IoTrash } from 'react-icons/io5';
import { MenuDivider, MenuItem, MenuList } from '@chakra-ui/react';
import { isOntimeEvent, SupportedEntry } from 'ontime-types';
import { useEntryActions } from '../../../../common/hooks/useEntryAction';
import { cloneEvent } from '../../../../common/utils/clone';
interface CuesheetTableMenuActionsProps {
eventId: string;
entryIndex: number;
showModal: (entryId: string) => void;
}
export default function CuesheetTableMenuActions({ eventId, entryIndex, showModal }: CuesheetTableMenuActionsProps) {
const { addEntry, getEntryById, move, deleteEntry } = useEntryActions();
const handleCloneEvent = () => {
const currentEvent = getEntryById(eventId);
if (!currentEvent || !isOntimeEvent(currentEvent)) {
return;
}
const newEvent = cloneEvent(currentEvent);
try {
addEntry(newEvent, { after: eventId });
} catch (_error) {
// we do not handle errors here
}
};
return (
<MenuList>
<MenuItem icon={<IoOptions />} onClick={() => showModal(eventId)}>
Edit ...
</MenuItem>
<MenuDivider />
<MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { before: eventId })}>
Add event above
</MenuItem>
<MenuItem icon={<IoAdd />} onClick={() => addEntry({ type: SupportedEntry.Event }, { after: eventId })}>
Add event below
</MenuItem>
<MenuItem icon={<IoDuplicateOutline />} onClick={handleCloneEvent}>
Clone event
</MenuItem>
<MenuDivider />
<MenuItem isDisabled={entryIndex < 1} icon={<IoArrowUp />} onClick={() => move(eventId, 'up')}>
Move up
</MenuItem>
<MenuItem icon={<IoArrowDown />} onClick={() => move(eventId, 'down')}>
Move down
</MenuItem>
<MenuItem icon={<IoTrash />} onClick={() => deleteEntry([eventId])}>
Delete
</MenuItem>
</MenuList>
);
}