fix: blocked layouts in use from being removed and minor fixes

Eyevinn · Nov 7, 2024 · ec527e9 · ec527e9
1 parent 7504087
commit ec527e9
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 24 deletions.
diff --git a/src/components/modal/multiviewLayoutSetup/MultiviewLayoutSetup.tsx b/src/components/modal/multiviewLayoutSetup/MultiviewLayoutSetup.tsx
@@ -33,14 +33,16 @@ export default function MultiviewLayoutSetup({
   isProductionActive,
   sourceList,
   open,
-  onClose
+  onClose,
+  savedMultiviews
 }: {
   onUpdateLayoutPreset: (newLayout: TMultiviewLayout | null) => void;
   productionId: string;
   isProductionActive: boolean;
   sourceList: SourceReference[];
   open: boolean;
   onClose: () => void;
+  savedMultiviews: string[];
 }) {
   const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
     useState<MultiviewPreset | null>(null);
@@ -136,6 +138,7 @@ export default function MultiviewLayoutSetup({
     setNewPresetName('');
     setPresetName('');
     setIsChecked(false);
+    setSelectedMultiviewPreset(null);
   };
 
   const handleLayoutUpdate = (name: string, type: string) => {
@@ -193,6 +196,21 @@ export default function MultiviewLayoutSetup({
       toast.error(t('preset.could_not_delete_layout'));
       return;
     }
+
+    // Check if the layout is in use
+    if (
+      layoutToRemove &&
+      layoutToRemove._id &&
+      savedMultiviews.includes(
+        typeof layoutToRemove._id === 'string'
+          ? layoutToRemove._id
+          : layoutToRemove._id.toString()
+      )
+    ) {
+      toast.error(t('preset.could_not_delete_layout_in_use'));
+      return;
+    }
+
     if (layoutToRemove && layoutToRemove._id) {
       deleteLayout(layoutToRemove._id.toString()).then(() => {
         setRefresh(true);

diff --git a/src/components/modal/multiviewLayoutSetup/MultiviewLayoutSetupButton.tsx b/src/components/modal/multiviewLayoutSetup/MultiviewLayoutSetupButton.tsx
@@ -13,15 +13,17 @@ type MultiviewLayoutSetupButtonProps = {
   productionId: string;
   isProductionActive: boolean;
   sourceList: SourceReference[];
-  resetRefresh: () => void;
+  refreshLayoutList: (reload: boolean) => void;
+  savedMultiviews: string[];
 };
 
 export function MultiviewLayoutSetupButton({
   onUpdateLayoutPreset,
   productionId,
   isProductionActive,
   sourceList,
-  resetRefresh
+  refreshLayoutList,
+  savedMultiviews
 }: MultiviewLayoutSetupButtonProps) {
   const [modalOpen, setModalOpen] = useState(false);
   const t = useTranslate();
@@ -31,10 +33,8 @@ export function MultiviewLayoutSetupButton({
   };
 
   useEffect(() => {
-    if (modalOpen) {
-      resetRefresh();
-    }
-  }, [modalOpen, resetRefresh]);
+    refreshLayoutList(!modalOpen);
+  }, [modalOpen, refreshLayoutList]);
 
   return (
     <>
@@ -56,6 +56,7 @@ export function MultiviewLayoutSetupButton({
         }}
         open={modalOpen}
         onClose={() => setModalOpen(false)}
+        savedMultiviews={savedMultiviews}
       />
     </>
   );

diff --git a/src/components/modal/multiviewLayoutSetup/MultiviewSettings.tsx b/src/components/modal/multiviewLayoutSetup/MultiviewSettings.tsx
@@ -42,6 +42,10 @@ export default function MultiviewSettingsConfig({
     );
   }, [multiviewLayouts, productionId]);
 
+  const defaultMultiview = multiviewLayouts
+    ? multiviewLayouts.find((m) => m.productionId !== undefined)
+    : undefined;
+
   const multiviewLayoutNames = useMemo(() => {
     return avaliableMultiviewLayouts?.map((layout) => layout.name) || [];
   }, [avaliableMultiviewLayouts]);
@@ -50,35 +54,30 @@ export default function MultiviewSettingsConfig({
     if (
       refresh &&
       multiview &&
-      multiviewLayouts &&
-      multiviewLayouts.length > 0
+      avaliableMultiviewLayouts &&
+      avaliableMultiviewLayouts.length > 0
     ) {
       handleSetSelectedMultiviewLayout(multiview.name);
     }
-  }, [refresh, multiviewLayouts]);
+  }, [refresh, avaliableMultiviewLayouts]);
 
   useEffect(() => {
     if (multiview) {
       setSelectedMultiviewLayout(multiview);
       return;
     }
-    if (multiviewLayouts) {
-      const defaultMultiview = multiviewLayouts.find(
-        (m) => m.productionId !== undefined
-      );
-      if (defaultMultiview) {
-        setSelectedMultiviewLayout(defaultMultiview);
-      }
+    if (defaultMultiview) {
+      setSelectedMultiviewLayout(defaultMultiview);
     }
-  }, [lastItem, multiview, multiviewLayouts, newMultiviewLayout]);
+  }, [lastItem, multiview, newMultiviewLayout, defaultMultiview]);
 
   if (!multiview) {
-    if (!multiviewLayouts || multiviewLayouts.length === 0) {
+    if (!defaultMultiview) {
       return null;
     }
     handleUpdateMultiview({
-      ...multiviewLayouts[0],
-      _id: multiviewLayouts[0]._id?.toString(),
+      ...defaultMultiview,
+      _id: defaultMultiview._id?.toString(),
       for_pipeline_idx: 0
     });
   }

diff --git a/src/components/production/multiviews/ProductionMultiviews.tsx b/src/components/production/multiviews/ProductionMultiviews.tsx
@@ -44,6 +44,10 @@ export default function ProductionMultiviews(props: ProductionMultiviewsProps) {
   const addNewLayout = usePutMultiviewLayout();
   const t = useTranslate();
 
+  const savedMultiviews = multiviewsProp.map((singleMultiview) => {
+    return singleMultiview._id ?? '';
+  });
+
   const clearInputs = () => {
     setMultiviews(multiviewsProp || []);
   };
@@ -273,7 +277,8 @@ export default function ProductionMultiviews(props: ProductionMultiviewsProps) {
           isProductionActive={isProductionActive}
           sourceList={sources}
           onUpdateLayoutPreset={onUpdateLayoutPreset}
-          resetRefresh={() => setRefresh(false)}
+          refreshLayoutList={setRefresh}
+          savedMultiviews={savedMultiviews}
         />
         <div className="flex flex-col">
           <Decision

diff --git a/src/hooks/productions.ts b/src/hooks/productions.ts
@@ -1,4 +1,3 @@
-import { defaultMultiview } from './../api/mongoClient/defaults/preset';
 import { ObjectId } from 'mongodb';
 import { Production } from '../interfaces/production';
 import { API_SECRET_KEY } from '../utils/constants';

diff --git a/src/hooks/useGetFirstEmptySlot.ts b/src/hooks/useGetFirstEmptySlot.ts
@@ -1,5 +1,4 @@
 import { useState } from 'react';
-import { Production } from '../interfaces/production';
 import { CallbackHook } from './types';
 import { SourceReference } from '../interfaces/Source';
 

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -722,6 +722,8 @@ export const en = {
     clear_layout: 'Clear layout',
     add_another_multiview: 'Add another multiview',
     could_not_delete_layout: 'Could not delete layout',
+    could_not_delete_layout_in_use:
+      'Could not delete layout that is saved in production',
     layout_deleted: 'Layout deleted',
     confirm_update_multiviewers:
       'Are you sure you want to update multiviewers for the running production?',

diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
@@ -727,6 +727,8 @@ export const sv = {
     add_another_multiview: 'Lägg till ny multiview',
     layout_deleted: 'Kompositionen har tagits bort',
     could_not_delete_layout: 'Kunde inte ta bort kompositionen',
+    could_not_delete_layout_in_use:
+      'Kompositionen används och kan inte tas bort',
     confirm_update_multiviewers:
       'Är du säker på att du vill uppdatera multiview för pågående produktion?',
     confirm_update: 'Uppdatera multiviewers'