refactor: allow locking cuesheet and operator

cpvalente · Feb 2, 2025 · 0d60132 · 0d60132
1 parent 62dcf72
commit 0d60132
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 28 deletions.
diff --git a/apps/client/src/features/operator/OperatorExport.tsx b/apps/client/src/features/operator/OperatorExport.tsx
@@ -1,28 +1,12 @@
-import { useCallback } from 'react';
-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 ViewNavigationMenu from '../../common/components/navigation-menu/ViewNavigationMenu';
 import ProtectRoute from '../../common/components/protect-route/ProtectRoute';
 
 import Operator from './Operator';
 
 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 (
     <ProtectRoute permission='operator'>
-      <FloatingNavigation toggleMenu={toggleMenu} toggleSettings={showEditFormDrawer} />
-      <ProductionNavigationMenu isMenuOpen={isOpen} onMenuClose={onClose} />
+      <ViewNavigationMenu isLockable />
       <Operator />
     </ProtectRoute>
   );

diff --git a/apps/client/src/views/cuesheet/CuesheetPage.tsx b/apps/client/src/views/cuesheet/CuesheetPage.tsx
@@ -1,10 +1,10 @@
 import { useCallback, useMemo, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
 import { IconButton, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
 import { IoApps } from '@react-icons/all-files/io5/IoApps';
 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 ViewParamsEditor from '../../common/components/view-params-editor/ViewParamsEditor';
 import { useWindowTitle } from '../../common/hooks/useWindowTitle';
@@ -25,7 +25,7 @@ export default function CuesheetPage() {
   // TODO: can we use the normalised rundown for the table?
   const { data: flatRundown } = useFlatRundown();
   const { data: customFields } = useCustomFields();
-  const [searchParams, setSearchParams] = useSearchParams();
+  const { showEditFormDrawer, isViewLocked } = useViewEditor({ isLockable: true });
   const { isOpen: isMenuOpen, onOpen, onClose } = useDisclosure();
   const { isOpen: isEventEditorOpen, onOpen: onEventEditorOpen, onClose: onEventEditorClose } = useDisclosure();
   const [eventId, setEventId] = useState<string | null>(null);
@@ -34,12 +34,6 @@ export default function CuesheetPage() {
 
   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
    */
@@ -69,7 +63,7 @@ export default function CuesheetPage() {
         </ModalContent>
       </Modal>
       <div className={styles.tableWrapper} data-testid='cuesheet'>
-        <ProductionNavigationMenu isMenuOpen={isMenuOpen} onMenuClose={onClose} />
+        <NavigationMenu isOpen={isMenuOpen} onClose={onClose} />
         <ViewParamsEditor viewOptions={cuesheetOptions} />
         <CuesheetOverview>
           <IconButton
@@ -78,13 +72,15 @@ export default function CuesheetPage() {
             size='lg'
             icon={<IoApps />}
             onClick={onOpen}
+            isDisabled={isViewLocked}
           />
           <IconButton
             aria-label='Toggle settings'
             variant='ontime-subtle-white'
             size='lg'
             icon={<IoSettingsOutline />}
             onClick={showEditFormDrawer}
+            isDisabled={isViewLocked}
           />
         </CuesheetOverview>
         <CuesheetProgress />