refactor: allow locking cuesheet and operator

This commit is contained in:
Carlos Valente
2025-02-02 20:55:39 +01:00
committed by Carlos Valente
parent 3d50b8ce49
commit 44b0cfd928
2 changed files with 8 additions and 28 deletions
@@ -1,28 +1,12 @@
import { useCallback } from 'react'; import ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
import { useSearchParams } from 'react-router-dom';
import { useDisclosure } from '@chakra-ui/react';
import FloatingNavigation from '../../common/components/navigation-menu/FloatingNavigation';
import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu';
import ProtectRoute from '../../common/components/protect-route/ProtectRoute'; import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
import Operator from './Operator'; import Operator from './Operator';
export default function OperatorExport() { export default function OperatorExport() {
const [searchParams, setSearchParams] = useSearchParams();
const { isOpen, onOpen, onClose } = useDisclosure();
const showEditFormDrawer = useCallback(() => {
searchParams.set('edit', 'true');
setSearchParams(searchParams);
}, [searchParams, setSearchParams]);
const toggleMenu = isOpen ? onClose : onOpen;
return ( return (
<ProtectRoute permission='operator'> <ProtectRoute permission='operator'>
<FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} /> <ViewNavigationMenu isLockable />
<ProductionNavigationMenu isMenuOpen={isOpen} onMenuClose={onClose} />
<Operator /> <Operator />
</ProtectRoute> </ProtectRoute>
); );
@@ -1,10 +1,10 @@
import { useCallback, useMemo, useState } from 'react'; import { useCallback, useMemo, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react'; import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
import { IoApps } from '@react-icons/all-files/io5/IoApps'; import { IoApps } from '@react-icons/all-files/io5/IoApps';
import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline'; import { IoSettingsOutline } from '@react-icons/all-files/io5/IoSettingsOutline';
import ProductionNavigationMenu from '../../common/components/navigation-menu/ProductionNavigationMenu'; import NavigationMenu from '../../common/components/navigation-menu/NavigationMenu';
import useViewEditor from '../../common/components/navigation-menu/useViewEditor';
import EmptyPage from '../../common/components/state/EmptyPage'; import EmptyPage from '../../common/components/state/EmptyPage';
import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor'; import ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
import { useWindowTitle } from '../../common/hooks/useWindowTitle'; import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -25,7 +25,7 @@ export default function CuesheetPage() {
// TODO: can we use the normalised rundown for the table? // TODO: can we use the normalised rundown for the table?
const { data: flatRundown } = useFlatRundown(); const { data: flatRundown } = useFlatRundown();
const { data: customFields } = useCustomFields(); const { data: customFields } = useCustomFields();
const [searchParams, setSearchParams] = useSearchParams(); const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable: true });
const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure(); const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
const { isOpen: isEventEditorOpen, onOpen: onEventEditorOpen, onClose: onEventEditorClose } = useDisclosure(); const { isOpen: isEventEditorOpen, onOpen: onEventEditorOpen, onClose: onEventEditorClose } = useDisclosure();
const [eventId, setEventId] = useState<string | null>(null); const [eventId, setEventId] = useState<string | null>(null);
@@ -34,12 +34,6 @@ export default function CuesheetPage() {
useWindowTitle('Cuesheet'); useWindowTitle('Cuesheet');
/** Handles showing the view params edit drawer */
const showEditFormDrawer = useCallback(() => {
searchParams.set('edit', 'true');
setSearchParams(searchParams);
}, [searchParams, setSearchParams]);
/** /**
* Handles setting the edit modal target and visibility * Handles setting the edit modal target and visibility
*/ */
@@ -69,7 +63,7 @@ export default function CuesheetPage() {
</ModalContent> </ModalContent>
</Modal> </Modal>
<div className={styles.tableWrapper} data-testid='cuesheet'> <div className={styles.tableWrapper} data-testid='cuesheet'>
<ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} /> <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
<ViewParamsEditor viewOptions={cuesheetOptions} /> <ViewParamsEditor viewOptions={cuesheetOptions} />
<CuesheetOverview> <CuesheetOverview>
<IconButton <IconButton
@@ -78,6 +72,7 @@ export default function CuesheetPage() {
size='lg' size='lg'
icon={<IoApps />} icon={<IoApps />}
onClick={onOpen} onClick={onOpen}
isDisabled={isViewLocked}
/> />
<IconButton <IconButton
aria-label='Toggle settings' aria-label='Toggle settings'
@@ -85,6 +80,7 @@ export default function CuesheetPage() {
size='lg' size='lg'
icon={<IoSettingsOutline />} icon={<IoSettingsOutline />}
onClick={showEditFormDrawer} onClick={showEditFormDrawer}
isDisabled={isViewLocked}
/> />
</CuesheetOverview> </CuesheetOverview>
<CuesheetProgress /> <CuesheetProgress />