Fix oh- components cannot be configured in action modals (#2094)

Fixes #927. When attempting to open an `oh-` Vue component, e.g. `oh-colorpicker-card`, as action modal, it was not possible to configure it, even though `actionModalConfig` was set. This was because `oh-` componens take their configuration from the computed `config` of the widget-mixin instead of the Vue component `props`. This PR fixes that by using the `actionModalConfig` for the computed `config` of `oh-` components in action modals. --------- Signed-off-by: Florian Hotze <[email protected]>
openhab · Sep 30, 2023 · f32ef1f · f32ef1f
1 parent 7893bd9
commit f32ef1f
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git a/bundles/org.openhab.ui/web/src/components/widgets/modals/modal-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/modals/modal-mixin.js
@@ -7,7 +7,7 @@ export default {
     'oh-plan-page': () => import('@/components/widgets/plan/oh-plan-page.vue'),
     'oh-chart-page': () => import('@/components/widgets/chart/oh-chart-page.vue')
   },
-  props: ['uid', 'el', 'modalParams'],
+  props: ['uid', 'el', 'modalConfig'],
   data () {
     return {
       currentTab: 0,
@@ -22,8 +22,9 @@ export default {
         component: component,
         root: component,
         store: this.$store.getters.trackedItems,
-        props: this.modalParams,
-        vars: this.vars
+        props: this.modalConfig,
+        vars: this.vars,
+        modalConfig: this.modalConfig // For configuration of oh- components
       }
     },
     modalStyle () {

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/widget-actions.js b/bundles/org.openhab.ui/web/src/components/widgets/widget-actions.js
@@ -179,7 +179,7 @@ export const actionsMixin = {
           const actionModal = actionConfig[prefix + 'actionModal']
           const actionModalConfig = actionConfig[prefix + 'actionModalConfig']
           if (actionModal.indexOf('page:') !== 0 && actionModal.indexOf('widget:') !== 0 && actionModal.indexOf('oh-') !== 0) {
-            console.log('Action target is not of the format page:uid or widget:uid')
+            console.log('Action target is not of the format page:uid or widget:uid or oh-')
             return
           }
 
@@ -196,7 +196,7 @@ export const actionsMixin = {
             props: {
               uid: actionModal,
               el: (evt && evt.target && evt.target._icon) ? evt.target._icon : (evt) ? evt.target : null,
-              modalParams: actionModalConfig || {}
+              modalConfig: actionModalConfig || {}
             }
           }
           this.$f7.views.main.router.navigate(modalRoute, modalProps)

diff --git a/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js b/bundles/org.openhab.ui/web/src/components/widgets/widget-mixin.js
@@ -59,8 +59,9 @@ export default {
     config () {
       if (!this.context || !this.context.component) return null
       let evalConfig = {}
-      if (this.context.component.config) {
-        const sourceConfig = this.context.component.config
+      // Fallback to modelConfig for oh- components to allow configuring them in modals
+      const sourceConfig = this.context.component.config || (this.componentType.startsWith('oh-') ? this.context.modalConfig : {})
+      if (sourceConfig) {
         if (typeof sourceConfig !== 'object') return {}
         for (const key in sourceConfig) {
           if (key === 'visible' || key === 'visibleTo' || key === 'stylesheet') continue