feat/variables-update (#136)

* feat(variable): front update * feat(variable): front update * feat(variable): front update * feat(variable): front update * feat(variable): front update * feat(variable): front update
RomainDreidemy · Oct 11, 2023 · 7c01c10 · 7c01c10
1 parent 2ac3559
commit 7c01c10
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 1 deletion.
diff --git a/front/src/enums/eventEmitters.ts b/front/src/enums/eventEmitters.ts
@@ -3,6 +3,7 @@ export enum EventEmitters {
   ON_MOVED_DRAWER = 'onDrawerMoved',
   ON_SELECTED_DRAWER = 'onDrawerSelected',
   ON_UNSELECTED_DRAWER = 'onDrawerUnselected',
+  ON_UPDATED_DRAWER = 'onUpdatedDrawer',
   ON_CREATED_LINKER = 'createdLinker',
   ON_DELETED_LINKER = 'DeletedLinker',
   ON_SELECTED_LINKER = 'selectedLinker',

diff --git a/front/src/hooks/useBoard.ts b/front/src/hooks/useBoard.ts
@@ -24,6 +24,11 @@ const useBoard = (board: TBoardOrNullify): {
   const [selectedDrawer, setSelectedDrawer] = useState<TDrawerOrNullify>(undefined)
   const [selectedLinker, setSelectedLinker] = useState<TLinkerOrNullify>(undefined)
 
+  const onUpdatedDrawer: EventListenerCallback<TDrawer> = async (drawer: TDrawer) => {
+    await onSelectDrawer(drawer, DrawerManager.get)
+    EventsCanvas.updateScreen()
+  }
+
   const onSelectedDrawer: EventListenerCallback<TDrawer> = async (drawer: TDrawer) => {
     await onSelectDrawer(drawer, DrawerManager.get)
   }
@@ -96,6 +101,7 @@ const useBoard = (board: TBoardOrNullify): {
     { name: EventEmitters.ON_CREATED_LINKER, action: onCreatedLinker },
     { name: EventEmitters.ON_DELETED_LINKER, action: onDeletedLinker },
     { name: EventEmitters.ON_SELECTED_DRAWER, action: onSelectedDrawer },
+    { name: EventEmitters.ON_UPDATED_DRAWER, action: onUpdatedDrawer },
     { name: EventEmitters.ON_UNSELECTED_DRAWER, action: onUnselectedDrawer },
     { name: EventEmitters.ON_MOVED_DRAWERS, action: onMovedDrawers },
     { name: EventEmitters.ON_SELECTED_LINKER, action: onSelectedLinker },

diff --git a/front/src/interfaces/VariableConfig.interface.ts b/front/src/interfaces/VariableConfig.interface.ts
@@ -9,6 +9,7 @@ export interface IVariableMolecule<IVariableCreate, IVariable> {
   serviceId: string
   addCallback?: (variable: IVariable) => void
   deleteCallback?: (variable: IVariable) => void
+  onDrawerUpdate: () => void
   Requester: IVariableRequest<IVariableCreate, IVariable>
 }
 

diff --git a/front/src/views/molecules/ServiceVariable/Variable.molecule.tsx b/front/src/views/molecules/ServiceVariable/Variable.molecule.tsx
@@ -18,7 +18,7 @@ import { TypeList } from '../../../forms/editor.structure'
 function VariableMolecule<
   IVariable extends IServicePortVariable | IServiceEnvVariable | IServiceVolume,
   IVariableCreate extends IServicePortVariableCreate | IServiceEnvVariableCreate | IServiceVolumeCreate
-> ({ variable, serviceId, addCallback, deleteCallback, fields, Requester }:
+> ({ variable, serviceId, addCallback, deleteCallback, onDrawerUpdate, fields, Requester }:
 IVariableMolecule<IVariableCreate, IVariable>): JSX.Element {
   const defaultByType = {
     [TypeList.TEXT]: '',
@@ -59,6 +59,8 @@ IVariableMolecule<IVariableCreate, IVariable>): JSX.Element {
 
         setForm(initialForm)
       }
+
+      onDrawerUpdate()
     } catch (err) {
       console.error(err)
     }
@@ -69,6 +71,7 @@ IVariableMolecule<IVariableCreate, IVariable>): JSX.Element {
       if (isCreating) return
 
       await Requester.delete(variable!.id)
+      onDrawerUpdate()
 
       if (deleteCallback == null) return
 

diff --git a/front/src/views/organisms/ServiceVariables/ServiceVariables.organism.tsx b/front/src/views/organisms/ServiceVariables/ServiceVariables.organism.tsx
@@ -6,6 +6,9 @@ import { type IServicePortVariable, type IServicePortVariableCreate } from '../.
 import { type IServiceEnvVariable, type IServiceEnvVariableCreate } from '../../../interfaces/ServiceVariable/EnvVariable.interface'
 import { type TVariablesEditor } from '../../../interfaces/VariableConfig.interface'
 import { type IServiceVolume, type IServiceVolumeCreate } from '../../../interfaces/ServiceVariable/Volume.interface'
+import { EventEmitters } from '../../../enums/eventEmitters'
+import eventEmitter from '../../../services/apps/Event.emitter'
+import { type EventListenerCallback } from '../../../interfaces/EventListener.interface'
 
 function ServiceVariablesOrganism<
   IVariable extends IServicePortVariable | IServiceEnvVariable | IServiceVolume,
@@ -31,6 +34,8 @@ function ServiceVariablesOrganism<
     setVariables([...variables, variable])
   }
 
+  const onDrawerUpdate = (): void => { eventEmitter.emit<EventListenerCallback<TDrawer>>(EventEmitters.ON_UPDATED_DRAWER, drawer) }
+
   const deleteCallback = (variable: IVariable): void => {
     const filtered = variables.filter(v => v.id !== variable.id)
 
@@ -55,12 +60,14 @@ function ServiceVariablesOrganism<
                            variable={variable}
                            serviceId={drawer.entity!.id}
                            deleteCallback={deleteCallback}
+                           onDrawerUpdate={onDrawerUpdate}
                            {...editor}
                 />
               ))}
 
               <Component serviceId={drawer.entity!.id}
                          addCallback={addCallback}
+                         onDrawerUpdate={onDrawerUpdate}
                          {...editor} />
             </div>
           </div>