Feat/delete from layout config

src/api/manager/multiviews.ts

@@ -1,6 +1,7 @@
 import { ObjectId, WithId } from 'mongodb';
 import { TMultiviewLayout } from '../../interfaces/preset';
 import { getDatabase } from '../mongoClient/dbClient';
+import { Log } from '../logger';
 
 export async function getMultiviewLayouts(): Promise<TMultiviewLayout[]> {
   const db = await getDatabase();
@@ -36,3 +37,12 @@ export async function putMultiviewLayout(
     await collection.insertOne({ ...newMultiviewLayout, _id: new ObjectId() });
   }
 }
+
+export async function deleteLayout(id: string): Promise<void> {
+  const db = await getDatabase();
+
+  await db.collection('multiviews').deleteOne({
+    _id: { $eq: new ObjectId(id) }
+  });
+  Log().info('Deleted multiview layout', id);
+}

src/app/api/manager/multiviews/[id]/route.ts

@@ -3,7 +3,10 @@ import { isAuthenticated } from '../../../../../api/manager/auth';
 import { Params } from 'next/dist/shared/lib/router/utils/route-matcher';
 import { updateMultiviewForPipeline } from '../../../../../api/ateliereLive/pipelines/multiviews/multiviews';
 import { MultiviewViews } from '../../../../../interfaces/multiview';
-import { getMultiviewLayout } from '../../../../../api/manager/multiviews';
+import {
+  deleteLayout,
+  getMultiviewLayout
+} from '../../../../../api/manager/multiviews';
 
 type PutMultiviewRequest = {
   pipelineId: string;
@@ -52,3 +55,28 @@ export async function PUT(
     });
   }
 }
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Params }
+): Promise<NextResponse> {
+  if (!(await isAuthenticated())) {
+    return new NextResponse(`Not Authorized!`, {
+      status: 403
+    });
+  }
+  try {
+    await deleteLayout(params.id);
+    return new NextResponse(null, {
+      status: 200
+    });
+  } catch (error) {
+    console.log(error);
+    return new NextResponse(
+      `Error occurred while deleting from DB! Error: ${error}`,
+      {
+        status: 500
+      }
+    );
+  }
+}

src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayout.tsx

@@ -45,7 +45,7 @@ export default function MultiviewLayout({
                   id: singleSource.id,
                   label: singleSource.label
                 }))}
-                value={label || ''}
+                value=""
                 update={(value) => handleChange(id || '', value)}
                 columnStyle
               />

src/components/modal/configureMultiviewModal/MultiviewLayoutSettings/MultiviewLayoutSettings.tsx

@@ -3,7 +3,10 @@ import { useMultiviewPresets } from '../../../../hooks/multiviewPreset';
 import { MultiviewPreset } from '../../../../interfaces/preset';
 import { useTranslate } from '../../../../i18n/useTranslate';
 import { useSetupMultiviewLayout } from '../../../../hooks/useSetupMultiviewLayout';
-import { useMultiviewLayouts } from '../../../../hooks/multiviewLayout';
+import {
+  useDeleteMultiviewLayout,
+  useMultiviewLayouts
+} from '../../../../hooks/multiviewLayout';
 import { Production } from '../../../../interfaces/production';
 import { useConfigureMultiviewLayout } from '../../../../hooks/useConfigureMultiviewLayout';
 import { TMultiviewLayout } from '../../../../interfaces/preset';
@@ -12,6 +15,9 @@ import { TListSource } from '../../../../interfaces/multiview';
 import Options from '../../configureOutputModal/Options';
 import Input from '../../configureOutputModal/Input';
 import MultiviewLayout from './MultiviewLayout';
+import { IconTrash } from '@tabler/icons-react';
+import toast from 'react-hot-toast';
+import { set } from 'lodash';
 
 type ChangeLayout = {
   defaultLabel?: string;
@@ -28,10 +34,11 @@ export default function MultiviewLayoutSettings({
 }) {
   const [selectedMultiviewPreset, setSelectedMultiviewPreset] =
     useState<MultiviewPreset | null>(null);
+  const [refresh, setRefresh] = useState(true);
   const [changedLayout, setChangedLayout] = useState<ChangeLayout | null>(null);
   const [newPresetName, setNewPresetName] = useState<string | null>(null);
   const [layoutToChange, setLayoutToChange] = useState<string>('');
-  const [multiviewLayouts] = useMultiviewLayouts();
+  const [multiviewLayouts] = useMultiviewLayouts(refresh);
   const [multiviewPresets] = useMultiviewPresets();
   const { multiviewPresetLayout } = useSetupMultiviewLayout(
     selectedMultiviewPreset
@@ -45,6 +52,7 @@ export default function MultiviewLayoutSettings({
     newPresetName
   );
   const { inputList } = useCreateInputArray(production);
+  const deleteLayout = useDeleteMultiviewLayout();
   const t = useTranslate();
 
   const multiviewPresetNames = multiviewPresets?.map((preset) => preset.name)
@@ -57,6 +65,15 @@ export default function MultiviewLayoutSettings({
   const multiviewLayoutNames =
     availableMultiviewLayouts?.map((layout) => layout.name) || [];
 
+  const productionLayouts =
+    multiviewLayouts?.filter(
+      (layout) => layout.productionId === production?._id
+    ) || [];
+  const globalMultiviewLayouts = multiviewLayouts?.filter(
+    (layout) => !layout.productionId
+  );
+  const deleteDisabled = productionLayouts.length < 1;
+
   // This useEffect is used to set the drawn layout of the multiviewer on start,
   // if this fails then the modal will be empty
   useEffect(() => {
@@ -65,6 +82,12 @@ export default function MultiviewLayoutSettings({
     }
   }, [multiviewPresets]);
 
+  useEffect(() => {
+    if (multiviewLayouts) {
+      setRefresh(false);
+    }
+  }, [multiviewLayouts]);
+
   const layoutNameAlreadyExist = availableMultiviewLayouts?.find(
     (singlePreset) => singlePreset.name === multiviewLayout?.name
   )?.name;
@@ -111,6 +134,7 @@ export default function MultiviewLayoutSettings({
       const defaultLabel = availableMultiviewLayouts[0].layout.views.find(
         (item) => item.input_slot === idFirstInputView
       )?.label;
+
       inputList.map((source) => {
         if (value === '') {
           setChangedLayout({ defaultLabel, viewId });
@@ -122,21 +146,68 @@ export default function MultiviewLayoutSettings({
     }
   };
 
+  const removeMultiviewLayout = () => {
+    const layoutToRemove = productionLayouts.find(
+      (layout) => layout.name === newPresetName
+    );
+    const globalLayoutToRemove = globalMultiviewLayouts?.find(
+      (layout) => layout.name === newPresetName
+    );
+
+    if (!layoutToRemove && globalLayoutToRemove) {
+      toast.error(t('preset.not_possible_delete_global_layout'));
+      return;
+    }
+    if (layoutToRemove && !layoutToRemove._id) {
+      toast.error(t('preset.could_not_delete_layout'));
+      return;
+    }
+    if (layoutToRemove && layoutToRemove._id) {
+      deleteLayout(layoutToRemove._id.toString()).then(() => {
+        setRefresh(true);
+        if (multiviewPresets && multiviewPresets[0]) {
+          setSelectedMultiviewPreset(multiviewPresets[0]);
+        }
+        setNewPresetName('');
+        toast.success(t('preset.layout_deleted'));
+      });
+    }
+  };
+
   return (
     <>
       {selectedMultiviewPreset && (
         <div className="flex flex-col w-full h-full">
           <div className="flex flex-col self-center w-[40%] pt-5">
-            <Options
-              label={t('preset.select_multiview_layout')}
-              options={multiviewLayoutNames.map((singleItem) => ({
-                label: singleItem
-              }))}
-              value={
-                selectedMultiviewPreset ? selectedMultiviewPreset.name : ''
-              }
-              update={(value) => handleLayoutUpdate(value, 'layout')}
-            />
+            <div className="relative">
+              <Options
+                label={t('preset.select_multiview_layout')}
+                options={multiviewLayoutNames.map((singleItem) => ({
+                  label: singleItem
+                }))}
+                value={
+                  selectedMultiviewPreset ? selectedMultiviewPreset.name : ''
+                }
+                update={(value) => handleLayoutUpdate(value, 'layout')}
+              />
+              {!production?.isActive && (
+                <button
+                  type="button"
+                  title={t('preset.remove_layout')}
+                  className="absolute top-0 right-[-10%] min-w-fit"
+                  onClick={() => removeMultiviewLayout()}
+                  disabled={deleteDisabled}
+                >
+                  <IconTrash
+                    className={`ml-4 ${
+                      deleteDisabled
+                        ? 'pointer-events-none text-zinc-400'
+                        : 'text-button-delete hover:text-red-400'
+                    }`}
+                  />
+                </button>
+              )}
+            </div>
             <Options
               label={t('preset.select_multiview_preset')}
               options={multiviewPresetNames.map((singleItem) => ({

src/components/modal/configureMultiviewModal/MultiviewSettings.tsx

@@ -28,7 +28,7 @@ export default function MultiviewSettingsConfig({
   productionId
 }: MultiviewSettingsProps) {
   const t = useTranslate();
-  const [multiviewLayouts] = useMultiviewLayouts();
+  const [multiviewLayouts] = useMultiviewLayouts(true);
   const [selectedMultiviewLayout, setSelectedMultiviewLayout] = useState<
     TMultiviewLayout | undefined
   >();

src/components/modal/configureOutputModal/Options.tsx

@@ -32,16 +32,16 @@ export default function Options({
         onChange={(e) => {
           update(e.target.value);
         }}
-        value={value}
+        value={value === '' && columnStyle ? undefined : value}
         className="cursor-pointer px-2 border justify-center text-sm rounded-lg w-6/12 pt-1 pb-1 bg-gray-700 border-gray-600 placeholder-gray-400 text-white focus:border-gray-400 focus:outline-none"
       >
-        {columnStyle && <option value={''}>{t('preset.select_option')}</option>}
-        {options.map((value, i) => (
+        {columnStyle && <option value="">{t('preset.select_option')}</option>}
+        {options.map((option, i) => (
           <option
-            value={value.id ? value.id : value.label}
-            key={value.id ? value.id.toString() : value.label + i}
+            value={option.id ? option.id.toString() : option.label}
+            key={option.id ? option.id.toString() : option.label + i}
           >
-            {value.label}
+            {option.label}
           </option>
         ))}
       </select>

src/components/startProduction/StartProductionButton.tsx

@@ -41,7 +41,7 @@ export function StartProductionButton({
   const [deleteMonitoring] = useDeleteMonitoring();
   const [modalOpen, setModalOpen] = useState(false);
   const [stopModalOpen, setStopModalOpen] = useState(false);
-  const [multiviewLayouts] = useMultiviewLayouts();
+  const [multiviewLayouts] = useMultiviewLayouts(true);
 
   const onClick = () => {
     if (!production) return;

src/hooks/multiviewLayout.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { TMultiviewLayout } from '../interfaces/preset';
 import { DataHook } from './types';
 import { WithId } from 'mongodb';
@@ -30,13 +30,21 @@ export function useGetMultiviewLayout() {
   };
 }
 
-export function useMultiviewLayouts(): DataHook<TMultiviewLayout[]> {
+export function useMultiviewLayouts(
+  refresh: boolean
+): DataHook<TMultiviewLayout[]> {
   const [loading, setLoading] = useState(true);
   const [multiviewLayouts, setmultiviewLayouts] = useState<TMultiviewLayout[]>(
     []
   );
 
   useEffect(() => {
+    setmultiviewLayouts([]);
+
+    if (!refresh) {
+      return;
+    }
+
     setLoading(true);
     fetch('/api/manager/multiviews', {
       method: 'GET',
@@ -48,7 +56,7 @@ export function useMultiviewLayouts(): DataHook<TMultiviewLayout[]> {
         }
       })
       .finally(() => setLoading(false));
-  }, []);
+  }, [refresh]);
 
   return [multiviewLayouts, loading, undefined];
 }
@@ -66,3 +74,16 @@ export function usePutMultiviewLayout() {
     throw await response.text();
   };
 }
+
+export function useDeleteMultiviewLayout() {
+  return async (id: string): Promise<void> => {
+    const response = await fetch(`/api/manager/multiviews/${id}`, {
+      method: 'DELETE',
+      headers: [['x-api-key', `Bearer ${API_SECRET_KEY}`]]
+    });
+    if (response.ok) {
+      return;
+    }
+    throw await response.text();
+  };
+}

src/i18n/locales/en.ts

@@ -681,7 +681,11 @@ export const en = {
     layout_already_exist:
       'Layout {{layoutNameAlreadyExist}} will be replaced on save',
     remove_multiview: 'Remove multiview',
+    remove_layout: 'Remove layout',
     add_another_multiview: 'Add another multiview',
+    not_possible_delete_global_layout: 'Global layout can not be deleted',
+    could_not_delete_layout: 'Could not delete layout',
+    layout_deleted: 'Layout deleted',
     confirm_update_multiviewers:
       'Are you sure you want to update multiviewers for the running production?',
     confirm_update: 'Update multiviewers'

src/i18n/locales/sv.ts

@@ -685,7 +685,12 @@ export const sv = {
     layout_already_exist:
       'Konfigurationen {{layoutNameAlreadyExist}} skrivs över om du sparar',
     remove_multiview: 'Ta bort multiview',
+    remove_layout: 'Ta bort komposition',
     add_another_multiview: 'Lägg till ny multiview',
+    layout_deleted: 'Kompositionen har tagits bort',
+    not_possible_delete_global_layout:
+      'Det går inte att ta bort globala kompositioner',
+    could_not_delete_layout: 'Kunde inte ta bort kompositionen',
     confirm_update_multiviewers:
       'Är du säker på att du vill uppdatera multiview för pågående produktion?',
     confirm_update: 'Uppdatera multiviewers'