Prevent duplication of asset tabs (#63)

* Update to latest api version * Add icon update * Add icons for different asset types * Add coloring for asset icons * Prevent dublication of asset tabs
pimcore · Mar 1, 2024 · 586072b · 586072b
1 parent 58dce22
commit 586072b
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 42 deletions.
diff --git a/assets/js/src/modules/asset/hooks/use-asset.ts b/assets/js/src/modules/asset/hooks/use-asset.ts
@@ -23,6 +23,7 @@ export const useAsset = (): UseAssetReturn => {
     openMainWidget({
       name,
       icon,
+      id: `asset-${config.id}`,
       component: 'asset',
       config
     })

diff --git a/assets/js/src/modules/widget-manager/hooks/use-widget-manager.ts b/assets/js/src/modules/widget-manager/hooks/use-widget-manager.ts
@@ -4,6 +4,7 @@ import {
   openBottomWidget as openBottomWidgetAction,
   openLeftWidget as openLeftWidgetAction,
   openRightWidget as openRightWidgetAction,
+  setActiveWidgetById,
   type WidgetManagerTabConfig
 } from '../widget-manager-slice'
 
@@ -12,6 +13,8 @@ interface useWidgetManagerReturn {
   openBottomWidget: (tabConfig: WidgetManagerTabConfig) => void
   openLeftWidget: (tabConfig: WidgetManagerTabConfig) => void
   openRightWidget: (tabConfig: WidgetManagerTabConfig) => void
+  switchToWidget: (id: string) => void
+
 }
 
 export const useWidgetManager = (): useWidgetManagerReturn => {
@@ -33,5 +36,9 @@ export const useWidgetManager = (): useWidgetManagerReturn => {
     dispatch(openRightWidgetAction(tabConfig))
   }
 
-  return { openMainWidget, openBottomWidget, openLeftWidget, openRightWidget }
+  function switchToWidget (id: string): void {
+    dispatch(setActiveWidgetById(id))
+  }
+
+  return { openMainWidget, openBottomWidget, openLeftWidget, openRightWidget, switchToWidget }
 }
diff --git a/assets/js/src/modules/widget-manager/widget-manager-slice.ts b/assets/js/src/modules/widget-manager/widget-manager-slice.ts
@@ -1,6 +1,6 @@
 import { injectSliceWithState } from '@Pimcore/app/store/index'
 import { type PayloadAction, createSlice } from '@reduxjs/toolkit'
-import { type IJsonModel, type IJsonTabNode, Model, Actions, DockLocation } from 'flexlayout-react'
+import { type IJsonModel, type IJsonTabNode, Model, Actions, DockLocation, type Node } from 'flexlayout-react'
 import { getInitialModelJson } from './utils/widget-manager-model'
 
 export interface WidgetManagerState {
@@ -23,66 +23,113 @@ export const slice = createSlice({
       state.model = { ...action.payload }
     },
 
-    openMainWidget: (state, action: PayloadAction<WidgetManagerTabConfig>) => {
+    setActiveWidgetById: (state, action: PayloadAction<string>) => {
       const model = Model.fromJson(state.model)
+      const node = model.getNodeById(action.payload)
+
+      if (node !== undefined) {
+        model.doAction(Actions.selectTab(node.getId()))
+      }
+
+      state.model = { ...model.toJson() }
+    },
 
-      model.doAction(
-        Actions.addNode(
-          action.payload,
-          'main_tabset',
-          DockLocation.CENTER,
-          -1,
-          true
+    openMainWidget: (state, action: PayloadAction<WidgetManagerTabConfig>) => {
+      const model = Model.fromJson(state.model)
+      let node: Node | undefined
+
+      if (action.payload.id !== undefined) {
+        node = model.getNodeById(action.payload.id)
+      }
+
+      if (node !== undefined) {
+        model.doAction(Actions.selectTab(node.getId()))
+      } else {
+        model.doAction(
+          Actions.addNode(
+            action.payload,
+            'main_tabset',
+            DockLocation.CENTER,
+            -1,
+            true
+          )
         )
-      )
+      }
 
       state.model = { ...model.toJson() }
     },
 
     openBottomWidget: (state, action: PayloadAction<WidgetManagerTabConfig>) => {
       const model = Model.fromJson(state.model)
-
-      model.doAction(
-        Actions.addNode(
-          action.payload,
-          'bottom_tabset',
-          DockLocation.CENTER,
-          -1,
-          true
+      let node: Node | undefined
+
+      if (action.payload.id !== undefined) {
+        node = model.getNodeById(action.payload.id)
+      }
+
+      if (node !== undefined) {
+        model.doAction(Actions.selectTab(node.getId()))
+      } else {
+        model.doAction(
+          Actions.addNode(
+            action.payload,
+            'bottom_tabset',
+            DockLocation.CENTER,
+            -1,
+            true
+          )
         )
-      )
+      }
 
       state.model = { ...model.toJson() }
     },
 
     openLeftWidget: (state, action: PayloadAction<WidgetManagerTabConfig>) => {
       const model = Model.fromJson(state.model)
-
-      model.doAction(
-        Actions.addNode(
-          action.payload,
-          'border_left',
-          DockLocation.CENTER,
-          -1,
-          true
+      let node: Node | undefined
+
+      if (action.payload.id !== undefined) {
+        node = model.getNodeById(action.payload.id)
+      }
+
+      if (node !== undefined) {
+        model.doAction(Actions.selectTab(node.getId()))
+      } else {
+        model.doAction(
+          Actions.addNode(
+            action.payload,
+            'border_left',
+            DockLocation.CENTER,
+            -1,
+            true
+          )
         )
-      )
+      }
 
       state.model = { ...model.toJson() }
     },
 
     openRightWidget: (state, action: PayloadAction<WidgetManagerTabConfig>) => {
       const model = Model.fromJson(state.model)
-
-      model.doAction(
-        Actions.addNode(
-          action.payload,
-          'border_right',
-          DockLocation.CENTER,
-          -1,
-          true
+      let node: Node | undefined
+
+      if (action.payload.id !== undefined) {
+        node = model.getNodeById(action.payload.id)
+      }
+
+      if (node !== undefined) {
+        model.doAction(Actions.selectTab(node.getId()))
+      } else {
+        model.doAction(
+          Actions.addNode(
+            action.payload,
+            'border_right',
+            DockLocation.CENTER,
+            -1,
+            true
+          )
         )
-      )
+      }
 
       state.model = { ...model.toJson() }
     }
@@ -97,5 +144,5 @@ export const slice = createSlice({
 
 injectSliceWithState(slice)
 
-export const { updateModel, openMainWidget, openBottomWidget, openLeftWidget, openRightWidget } = slice.actions
+export const { updateModel, openMainWidget, openBottomWidget, openLeftWidget, openRightWidget, setActiveWidgetById } = slice.actions
 export const { selectModel } = slice.selectors
diff --git a/public/build/entrypoints.json b/public/build/entrypoints.json
@@ -3,7 +3,7 @@
     "main": {
       "js": [
         "/bundles/pimcorestudioui/build/239.37566adc.js",
-        "/bundles/pimcorestudioui/build/main.b0b41fde.js"
+        "/bundles/pimcorestudioui/build/main.88ffc0a8.js"
       ],
       "css": [
         "/bundles/pimcorestudioui/build/main.3691bcd8.css"

diff --git a/public/build/main.88ffc0a8.js b/public/build/main.88ffc0a8.js
diff --git a/public/build/main.b0b41fde.js b/public/build/main.b0b41fde.js
diff --git a/public/build/manifest.json b/public/build/manifest.json
@@ -1,6 +1,6 @@
 {
   "bundles/pimcorestudioui/build/main.css": "/bundles/pimcorestudioui/build/main.3691bcd8.css",
-  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.b0b41fde.js",
+  "bundles/pimcorestudioui/build/main.js": "/bundles/pimcorestudioui/build/main.88ffc0a8.js",
   "bundles/pimcorestudioui/build/58.9cf6e23a.js": "/bundles/pimcorestudioui/build/58.9cf6e23a.js",
   "bundles/pimcorestudioui/build/678.c220b736.js": "/bundles/pimcorestudioui/build/678.c220b736.js",
   "bundles/pimcorestudioui/build/625.b487b20e.js": "/bundles/pimcorestudioui/build/625.b487b20e.js",
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,6 +23,7 @@ export const useAsset = (): UseAssetReturn => { @@
         openMainWidget({
           name,
           icon,
+          id: `asset-${config.id}`,
           component: 'asset',
           config
         })
@@ Expand Down @@