From 30e4d48b162adbbe437b7a9e18be07d0a5b83ad4 Mon Sep 17 00:00:00 2001
From: Florian Hotze <florianh_dev@icloud.com>
Date: Thu, 24 Oct 2024 14:31:01 +0200
Subject: [PATCH] Refactor shared model code into a mixin (#2825)

Fixes #2268, where the model building code in the model-picker was
different from the model page.

Signed-off-by: Florian Hotze <dev@florianhotze.com>
---
 .../components/model/model-picker-popup.vue   | 144 +---------------
 .../src/pages/settings/model/model-mixin.js   | 160 ++++++++++++++++++
 .../web/src/pages/settings/model/model.vue    | 132 +--------------
 3 files changed, 171 insertions(+), 265 deletions(-)
 create mode 100644 bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js

diff --git a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
index 5f58571eac..cd1e05ee62 100644
--- a/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
+++ b/bundles/org.openhab.ui/web/src/components/model/model-picker-popup.vue
@@ -67,13 +67,10 @@
 <script>
 import ModelTreeview from '@/components/model/model-treeview.vue'
 
-import { compareItems } from '@/components/widgets/widget-order'
-
-function compareModelItems (o1, o2) {
-  return compareItems(o1.item || o1, o2.item || o2)
-}
+import ModelMixin from '@/pages/settings/model/model-mixin'
 
 export default {
+  mixins: [ModelMixin],
   props: ['value', 'multiple', 'semanticOnly', 'groupsOnly', 'editableOnly', 'allowEmpty', 'popupTitle', 'actionLabel'],
   components: {
     ModelTreeview
@@ -81,26 +78,12 @@ export default {
   data () {
     if (!this.$f7.data.modelPicker) this.$f7.data.modelPicker = {}
     return {
-      ready: false,
-      loading: false,
       initSearchbar: false,
-      includeNonSemantic: false,
       includeItemName: this.$f7.data.modelPicker.includeItemName || false,
       includeItemTags: this.$f7.data.modelPicker.includeItemTags || false,
       expanded: this.$f7.data.modelPicker.expanded || false,
       doubleClickStarted: null,
       doubleClickItem: null,
-      items: [],
-      links: [],
-      locations: [],
-      rootLocations: [],
-      equipment: {},
-      rootEquipment: [],
-      rootPoints: [],
-      rootGroups: [],
-      rootItems: [],
-      selectedItem: null,
-      previousSelection: null,
       checkedItems: []
     }
   },
@@ -139,8 +122,8 @@ export default {
     modelItem (item) {
       const modelItem = {
         item,
-        opened: (item.type.indexOf('Group') === 0) ? false : undefined,
-        checked: undefined,
+        opened: false,
+        checked: false,
         class: (item.metadata && item.metadata.semantics) ? item.metadata.semantics.value : '',
         children: {
           locations: [],
@@ -170,116 +153,14 @@ export default {
 
       return modelItem
     },
-    load (update) {
-      // if (this.ready) return
-      this.loading = true
-      const items = this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=.+')
-      const links = this.$oh.api.get('/rest/links')
-      Promise.all([items, links]).then((data) => {
-        if (this.editableOnly) {
-          this.items = data[0].filter((i) => i.editable)
-        } else {
-          this.items = data[0]
-        }
-        this.links = data[1]
-
-        if (this.newItem) {
-          this.items.push(this.newItem)
-        }
-
-        this.locations = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Location') === 0)
-        this.equipment = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Equipment') === 0)
-        this.points = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Point') === 0)
-
-        this.rootLocations = this.locations
-          .filter((i) => !i.metadata.semantics.config || !i.metadata.semantics.config.isPartOf)
-          .map(this.modelItem).sort(compareModelItems)
-        this.rootLocations.forEach(this.getChildren)
-        this.rootEquipment = this.equipment
-          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPartOf && !i.metadata.semantics.config.hasLocation))
-          .map(this.modelItem).sort(compareModelItems)
-        this.rootEquipment.forEach(this.getChildren)
-        this.rootPoints = this.points
-          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPointOf && !i.metadata.semantics.config.hasLocation))
-          .map(this.modelItem).sort(compareModelItems)
-
-        if (this.includeNonSemantic && !this.semanticOnly) {
-          this.rootGroups = this.items
-            .filter((i) => i.type === 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
-            .map(this.modelItem).sort(compareModelItems)
-          this.rootGroups.forEach(this.getChildren)
-          this.rootItems = this.items
-            .filter((i) => i.type !== 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
-            .map(this.modelItem).sort(compareModelItems)
-        }
-
-        this.loading = false
-        this.ready = true
+    load () {
+      this.loadModel().then(() => {
         this.$nextTick(() => {
           this.initSearchbar = true
           this.applyExpandedOption()
         })
       })
     },
-    getChildren (parent) {
-      // open the parent node of the placeholder
-      if (this.newItemParent && this.newItemParent === parent.item.name) {
-        parent.opened = true
-      }
-
-      // restore previous selection
-      if (this.previousSelection && parent.item.name === this.previousSelection.item.name) {
-        this.selectedItem = parent
-        this.previousSelection = null
-        this.selectItem(parent)
-      }
-
-      if (parent.class.indexOf('Location') === 0) {
-        parent.children.locations = this.locations
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.locations.forEach(this.getChildren)
-        parent.children.equipment = this.equipment
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.equipment.forEach(this.getChildren)
-
-        if (!this.groupsOnly) {
-          parent.children.points = this.points
-            .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
-            .map(this.modelItem).sort(compareModelItems)
-        }
-      } else {
-        parent.children.equipment = this.equipment
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.equipment.forEach(this.getChildren)
-
-        if (!this.groupsOnly) {
-          parent.children.points = this.points
-            .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPointOf === parent.item.name)
-            .map(this.modelItem).sort(compareModelItems)
-        }
-      }
-
-      if (this.includeNonSemantic) {
-        parent.children.groups = this.items
-          .filter((i) => i.type === 'Group' && (!i.metadata) && i.groupNames.indexOf(parent.item.name) >= 0)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.groups.forEach(this.getChildren)
-        if (parent.item.metadata) {
-          parent.children.items = this.items
-            .filter((i) => i.type !== 'Group' && (!i.metadata) && i.groupNames.indexOf(parent.item.name) >= 0)
-            .map(this.modelItem).sort(compareModelItems)
-        } else {
-          if (!this.groupsOnly) {
-            parent.children.items = this.items
-              .filter((i) => i.type !== 'Group' && i.groupNames.indexOf(parent.item.name) >= 0)
-              .map(this.modelItem).sort(compareModelItems)
-          }
-        }
-      }
-    },
     selectItem (item) {
       if (!this.multiple) {
         this.selectedItem = item
@@ -320,19 +201,6 @@ export default {
       this.expanded = !this.expanded
       this.$f7.data.modelPicker.expanded = this.expanded
       this.applyExpandedOption()
-    },
-    applyExpandedOption () {
-      const treeviewItems = document.querySelectorAll('.treeview-item')
-
-      treeviewItems.forEach(item => {
-        if (item.classList.contains('treeview-item')) {
-          if (this.expanded) {
-            item.classList.add('treeview-item-opened')
-          } else {
-            item.classList.remove('treeview-item-opened')
-          }
-        }
-      })
     }
   }
 }
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js b/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js
new file mode 100644
index 0000000000..e7126940d3
--- /dev/null
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js
@@ -0,0 +1,160 @@
+import { compareItems } from '@/components/widgets/widget-order'
+
+function compareModelItems (o1, o2) {
+  return compareItems(o1.item || o1, o2.item || o2)
+}
+
+/**
+ * Mixin for model page and model picker popup.
+ *
+ * The component using this mixin has to provide the following methods:
+ * - `selectItem(item)`: Called when an item is selected.
+ * - `modelItem(item)`: Called to create a model item from an item.
+ */
+export default {
+  data () {
+    return {
+      ready: false,
+      loading: false,
+      includeNonSemantic: false,
+
+      items: [],
+      links: [],
+      locations: [],
+      rootLocations: [],
+      equipment: {},
+      rootEquipment: [],
+      rootPoints: [],
+      rootGroups: [],
+      rootItems: [],
+
+      previousSelection: null,
+      selectedItem: null
+    }
+  },
+  methods: {
+    /**
+     * Load the items and links from the REST API and build the model.
+     *
+     * @returns {Promise<void>}
+     */
+    loadModel () {
+      if (this.loading) return
+      this.loading = true
+
+      const items = this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=.+')
+      const links = this.$oh.api.get('/rest/links')
+      return Promise.all([items, links]).then((data) => {
+        this.items = data[0]
+        this.links = data[1]
+
+        if (this.newItem) {
+          this.items.push(this.newItem)
+        }
+
+        this.locations = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Location') === 0)
+        this.equipment = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Equipment') === 0)
+        this.points = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Point') === 0)
+
+        this.rootLocations = this.locations
+          .filter((i) => !i.metadata.semantics.config || !i.metadata.semantics.config.isPartOf)
+          .map(this.modelItem).sort(compareModelItems)
+        this.rootLocations.forEach(this.getChildren)
+        this.rootEquipment = this.equipment
+          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPartOf && !i.metadata.semantics.config.hasLocation))
+          .map(this.modelItem).sort(compareModelItems)
+        this.rootEquipment.forEach(this.getChildren)
+        this.rootPoints = this.points
+          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPointOf && !i.metadata.semantics.config.hasLocation))
+          .map(this.modelItem).sort(compareModelItems)
+
+        if (this.includeNonSemantic) {
+          this.rootGroups = this.items
+            .filter((i) => i.type === 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
+            .map(this.modelItem).sort(compareModelItems)
+          this.rootGroups.forEach(this.getChildren)
+          this.rootItems = this.items
+            .filter((i) => i.type !== 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
+            .map(this.modelItem).sort(compareModelItems)
+        }
+
+        this.loading = false
+        this.ready = true
+
+        return Promise.resolve()
+      }).catch((error) => {
+        return Promise.reject(error)
+      })
+    },
+    getChildren (parent) {
+      // open the parent node of the placeholder
+      if (this.newItemParent && this.newItemParent === parent.item.name) {
+        parent.opened = true
+      }
+
+      // restore previous selection
+      if (this.previousSelection && parent.item.name === this.previousSelection.item.name) {
+        this.selectedItem = parent
+        this.previousSelection = null
+        this.selectItem(parent)
+      }
+
+      if (parent.class.indexOf('Location') === 0) {
+        parent.children.locations = this.locations
+          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
+          .map(this.modelItem).sort(compareModelItems)
+        parent.children.locations.forEach(this.getChildren)
+        parent.children.equipment = this.equipment
+          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
+          .map(this.modelItem).sort(compareModelItems)
+        parent.children.equipment.forEach(this.getChildren)
+
+        parent.children.points = this.points
+          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
+          .map(this.modelItem).sort(compareModelItems)
+      } else {
+        parent.children.equipment = this.equipment
+          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
+          .map(this.modelItem).sort(compareModelItems)
+        parent.children.equipment.forEach(this.getChildren)
+
+        parent.children.points = this.points
+          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPointOf === parent.item.name)
+          .map(this.modelItem).sort(compareModelItems)
+      }
+
+      if (this.includeNonSemantic) {
+        parent.children.groups = this.items
+          .filter((i) => i.type === 'Group' && (!i.metadata || (i.metadata && !i.metadata.semantics)) && i.groupNames.indexOf(parent.item.name) >= 0)
+          .map(this.modelItem).sort(compareModelItems)
+        parent.children.groups.forEach(this.getChildren)
+        if (parent.item.metadata && parent.item.metadata.semantics) {
+          parent.children.items = this.items
+            .filter((i) => i.type !== 'Group' && (!i.metadata || (i.metadata && !i.metadata.semantics)) && i.groupNames.indexOf(parent.item.name) >= 0)
+            .map(this.modelItem).sort(compareModelItems)
+        } else {
+          parent.children.items = this.items
+            .filter((i) => i.type !== 'Group' && i.groupNames.indexOf(parent.item.name) >= 0)
+            .map(this.modelItem).sort(compareModelItems)
+        }
+      }
+    },
+    /**
+     * Expands or collapses all treeview items based on the current state of `this.expanded`.
+     * `this.expanded` has to be provided by the component using this mixin.
+     */
+    applyExpandedOption () {
+      const treeviewItems = document.querySelectorAll('.treeview-item')
+
+      treeviewItems.forEach(item => {
+        if (item.classList.contains('treeview-item')) {
+          if (this.expanded) {
+            item.classList.add('treeview-item-opened')
+          } else {
+            item.classList.remove('treeview-item-opened')
+          }
+        }
+      })
+    }
+  }
+}
diff --git a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
index 8d8916de39..b9020a5a70 100644
--- a/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
+++ b/bundles/org.openhab.ui/web/src/pages/settings/model/model.vue
@@ -242,13 +242,10 @@ import ItemDetails from '@/components/model/item-details.vue'
 import MetadataMenu from '@/components/item/metadata/item-metadata-menu.vue'
 import LinkDetails from '@/components/model/link-details.vue'
 
-import { compareItems } from '@/components/widgets/widget-order'
-
-function compareModelItems (o1, o2) {
-  return compareItems(o1.item || o1, o2.item || o2)
-}
+import ModelMixin from '@/pages/settings/model/model-mixin'
 
 export default {
+  mixins: [ModelMixin],
   components: {
     'empty-state-placeholder': () => import('@/components/empty-state-placeholder.vue'),
     ModelDetailsPane,
@@ -260,26 +257,12 @@ export default {
   data () {
     if (!this.$f7.data.model) this.$f7.data.model = {}
     return {
-      ready: false,
-      loading: false,
-      includeNonSemantic: false,
       includeItemName: this.$f7.data.model.includeItemName || false,
       includeItemTags: this.$f7.data.model.includeItemTags || false,
       expanded: this.$f7.data.model.expanded || false,
-      items: [],
-      links: [],
-      locations: [],
-      rootLocations: [],
-      equipment: {},
-      rootEquipment: [],
-      rootPoints: [],
-      rootGroups: [],
-      rootItems: [],
       newItem: null,
       newItemParent: null,
       initSearchbar: false,
-      selectedItem: null,
-      previousSelection: null,
       detailsOpened: false,
       detailsTab: 'state',
       eventSource: null,
@@ -320,7 +303,7 @@ export default {
     modelItem (item) {
       const modelItem = {
         item,
-        opened: null,
+        opened: false,
         class: (item.metadata && item.metadata.semantics) ? item.metadata.semantics.value : '',
         children: {
           locations: [],
@@ -342,47 +325,8 @@ export default {
 
       return modelItem
     },
-    load (update) {
-      // if (this.ready) return
-      this.loading = true
-      const items = this.$oh.api.get('/rest/items?staticDataOnly=true&metadata=.+')
-      const links = this.$oh.api.get('/rest/links')
-      Promise.all([items, links]).then((data) => {
-        this.items = data[0]
-        this.links = data[1]
-
-        if (this.newItem) {
-          this.items.push(this.newItem)
-        }
-
-        this.locations = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Location') === 0)
-        this.equipment = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Equipment') === 0)
-        this.points = this.items.filter((i) => i.metadata && i.metadata.semantics && i.metadata.semantics.value.indexOf('Point') === 0)
-
-        this.rootLocations = this.locations
-          .filter((i) => !i.metadata.semantics.config || !i.metadata.semantics.config.isPartOf)
-          .map(this.modelItem).sort(compareModelItems)
-        this.rootLocations.forEach(this.getChildren)
-        this.rootEquipment = this.equipment
-          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPartOf && !i.metadata.semantics.config.hasLocation))
-          .map(this.modelItem).sort(compareModelItems)
-        this.rootEquipment.forEach(this.getChildren)
-        this.rootPoints = this.points
-          .filter((i) => !i.metadata.semantics.config || (!i.metadata.semantics.config.isPointOf && !i.metadata.semantics.config.hasLocation))
-          .map(this.modelItem).sort(compareModelItems)
-
-        if (this.includeNonSemantic) {
-          this.rootGroups = this.items
-            .filter((i) => i.type === 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
-            .map(this.modelItem).sort(compareModelItems)
-          this.rootGroups.forEach(this.getChildren)
-          this.rootItems = this.items
-            .filter((i) => i.type !== 'Group' && (!i.metadata || !i.metadata.semantics) && i.groupNames.length === 0)
-            .map(this.modelItem).sort(compareModelItems)
-        }
-
-        this.loading = false
-        this.ready = true
+    load () {
+      this.loadModel().then(() => {
         this.$nextTick(() => {
           this.initSearchbar = true
           this.applyExpandedOption()
@@ -413,59 +357,6 @@ export default {
       this.$oh.sse.close(this.eventSource)
       this.eventSource = null
     },
-    getChildren (parent) {
-      // open the parent node of the placeholder
-      if (this.newItemParent && this.newItemParent === parent.item.name) {
-        parent.opened = true
-      }
-
-      // restore previous selection
-      if (this.previousSelection && parent.item.name === this.previousSelection.item.name) {
-        this.selectedItem = parent
-        this.previousSelection = null
-        this.selectItem(parent)
-      }
-
-      if (parent.class.indexOf('Location') === 0) {
-        parent.children.locations = this.locations
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.locations.forEach(this.getChildren)
-        parent.children.equipment = this.equipment
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.equipment.forEach(this.getChildren)
-
-        parent.children.points = this.points
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.hasLocation === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-      } else {
-        parent.children.equipment = this.equipment
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPartOf === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.equipment.forEach(this.getChildren)
-
-        parent.children.points = this.points
-          .filter((i) => i.metadata.semantics.config && i.metadata.semantics.config.isPointOf === parent.item.name)
-          .map(this.modelItem).sort(compareModelItems)
-      }
-
-      if (this.includeNonSemantic) {
-        parent.children.groups = this.items
-          .filter((i) => i.type === 'Group' && (!i.metadata || (i.metadata && !i.metadata.semantics)) && i.groupNames.indexOf(parent.item.name) >= 0)
-          .map(this.modelItem).sort(compareModelItems)
-        parent.children.groups.forEach(this.getChildren)
-        if (parent.item.metadata && parent.item.metadata.semantics) {
-          parent.children.items = this.items
-            .filter((i) => i.type !== 'Group' && (!i.metadata || (i.metadata && !i.metadata.semantics)) && i.groupNames.indexOf(parent.item.name) >= 0)
-            .map(this.modelItem).sort(compareModelItems)
-        } else {
-          parent.children.items = this.items
-            .filter((i) => i.type !== 'Group' && i.groupNames.indexOf(parent.item.name) >= 0)
-            .map(this.modelItem).sort(compareModelItems)
-        }
-      }
-    },
     selectItem (item) {
       this.selectedItem = item
       if (this.newItem && (!item || item.item.name !== this.newItem.name)) {
@@ -506,19 +397,6 @@ export default {
       this.$f7.data.model.expanded = this.expanded
       this.applyExpandedOption()
     },
-    applyExpandedOption () {
-      const treeviewItems = document.querySelectorAll('.treeview-item')
-
-      treeviewItems.forEach(item => {
-        if (item.classList.contains('treeview-item')) {
-          if (this.expanded) {
-            item.classList.add('treeview-item-opened')
-          } else {
-            item.classList.remove('treeview-item-opened')
-          }
-        }
-      })
-    },
     addSemanticItem (semanticType) {
       this.newItem = {
         type: (semanticType === 'Point') ? 'Switch' : 'Group',