fix drag and drop selection

Signed-off-by: Mark Herwege <[email protected]>

Author: mherwege

bundles/org.openhab.ui/web/src/components/model/model-treeview.vue

@@ -27,6 +27,7 @@
                            :includeItemTags="includeItemTags"
                            :canDragDrop="canDragDrop"
                            @selected="nodeSelected"
+                           @clear-selected="clearSelection"
                            :selected="selected"
                            @checked="(item, check) => $emit('checked', item, check)"
                            @reload="$emit('reload')" />
@@ -78,7 +79,7 @@ export default {
     includeItemTags: Boolean,
     canDragDrop: Boolean
   },
-  emits: ['reload', 'checked', 'selected'],
+  emits: ['reload', 'checked', 'selected', 'clear-selected'],
   components: {
     Draggable,
     ModelTreeviewItem

bundles/org.openhab.ui/web/src/components/model/treeview-item.vue

@@ -6,7 +6,7 @@
                     :icon-md="icon('md')"
                     :textColor="iconColor"
                     :color="(model.item.created !== false) ? 'blue' : 'orange'"
-                    :selected="selected && selected.item.name === model.item.name ? true : null"
+                    :selected="itemSelected"
                     :opened="model.opened"
                     :toggle="canHaveChildren"
                     @treeview:open="model.opened = true"
@@ -37,7 +37,8 @@
                              :parentNode="model"
                              :rootNode="rootNode"
                              @selected="(event) => $emit('selected', event)"
-                             :selected="node.selected"
+                             @clear-selected="clearSelection"
+                             :selected="selected"
                              :includeItemName="includeItemName"
                              :includeItemTags="includeItemTags"
                              :canDragDrop="canDragDrop"
@@ -94,7 +95,7 @@ export default {
     includeItemTags: Boolean,
     canDragDrop: Boolean
   },
-  emits: ['reload', 'selected', 'checked'],
+  emits: ['reload', 'selected', 'clear-selected', 'checked'],
   components: {
     Draggable,
     ModelTreeviewItem: 'model-treeview-item'
@@ -118,6 +119,9 @@ export default {
         ? semantics.config.relatesTo : null
       return this.model.class.substring(this.model.class.lastIndexOf('_') + 1) +
         ((property) ? ' (' + property.replace('Property_', '') + ')' : '')
+    },
+    itemSelected () {
+      return this.selected && this.selected.item.name === this.model.item.name ? true : null
     }
   },
   methods: {

bundles/org.openhab.ui/web/src/pages/settings/model/model-dragdrop-mixin.js

@@ -6,10 +6,9 @@ import ItemMixin from '@/components/item/item-mixin'
 import TagMixin from '@/components/tags/tag-mixin'
 import fastDeepEqual from 'fast-deep-equal/es6'
 
-// TODO-V3.1 console.debug calls with cloneDeep - do we need to remove them?
-
 export default {
   mixins: [ItemMixin, TagMixin],
+  emits: ['clear-selected'],
   watch: {
     canSave (val) {
       if (val) this.saveUpdate()
@@ -64,6 +63,7 @@ export default {
   },
   methods: {
     onDragStart (event) {
+      this.$emit('clear-selected')
       this.moveState.node = this.children[event.oldIndex]
       if (!this.moveState.node.item.editable) return
       console.time('Timer: Drag')
@@ -257,8 +257,6 @@ export default {
       } else {
         this.addIntoRoot(node, parentNode)
       }
-      this.moveState.canAdd = false
-      this.moveState.adding = false
       console.timeEnd('Timer: validateAdd')
     },
     isValidGroupType (node, parentNode) {
@@ -538,6 +536,9 @@ export default {
       if (updateRequired) {
         this.moveState.nodesToUpdate.push(node)
       }
+      this.moveState.canAdd = false
+      this.moveState.adding = false
+      if (!this.moveState.canRemove) this.moveState.dragFinished = true
       console.debug('Add - finished, new moveState:', cloneDeep(this.moveState))
       console.timeEnd('Timer: updateAfterAdd')
     },
@@ -583,6 +584,7 @@ export default {
       const groupNameIndex = node.item.groupNames.findIndex((g) => g === parentNode.item?.name)
       if (groupNameIndex >= 0) {
         node.item.groupNames.splice(groupNameIndex, 1)
+        this.moveState.nodesToUpdate.push(node)
       }
       const newChildren = this.nodeChildren(parentNode)
       newChildren.splice(oldIndex, 1)
@@ -601,7 +603,7 @@ export default {
       console.time('Timer: updateAfterRemove')
       this.moveState.canRemove = false
       this.moveState.removing = false
-      this.moveState.dragFinished = true
+      if (!this.moveState.canAdd) this.moveState.dragFinished = true
       console.timeEnd('Timer: updateAfterRemove')
     },
     saveUpdate () {
@@ -661,6 +663,9 @@ export default {
         console.timeEnd('Timer: Drag')
         this.moveState.cancelled = true
       }
+    },
+    clearSelection () {
+      this.$emit('clear-selected')
     }
   }
 }

bundles/org.openhab.ui/web/src/pages/settings/model/model-mixin.js

@@ -173,23 +173,16 @@ export default {
       }
 
       if (this.includeNonSemantic) {
-        // Only non-semantic groups in groups, avoids showing semantic groups as child of the wrong semantic group
-        parent.children.groups = this.items
-          .filter((i) => i.type === 'Group' && !i.metadata?.semantics && i.groupNames.indexOf(parent.item.name) >= 0)
+        const nonSemanticItems = this.items
+          .filter((i) => !i.metadata?.semantics && i.groupNames.indexOf(parent.item.name) >= 0)
           .map(this.modelItem).sort(compareModelItems)
+
+        // Only non-semantic groups in groups
+        parent.children.groups = nonSemanticItems.filter((i) => i.item.type === 'Group')
         parent.children.groups.forEach(this.getChildren)
 
-        if (!parent.item.metadata?.semantics) {
-          // Items in non-semantic groups
-          parent.children.items = this.items
-            .filter((i) => i.type !== 'Group' && i.groupNames.indexOf(parent.item.name) >= 0)
-            .map(this.modelItem).sort(compareModelItems)
-        } else {
-          // Only non-semantic items in semantic groups, avoids showing semantic item as child of the wrong semantic group
-          parent.children.items = this.items
-            .filter((i) => i.type !== 'Group' && !i.metadata?.semantics && i.groupNames.indexOf(parent.item.name) >= 0)
-            .map(this.modelItem).sort(compareModelItems)
-        }
+        // Only non-semantic items in groups
+        parent.children.items = nonSemanticItems.filter((i) => i.item.type !== 'Group')
       }
     },
     /**

bundles/org.openhab.ui/web/src/pages/settings/model/model.vue

@@ -115,6 +115,7 @@
                             :includeItemTags="includeItemTags"
                             :canDragDrop="true"
                             @selected="selectItem"
+                            @clear-selected="clearSelection"
                             :selected="selectedItem"
                             @reload="load"
                             @click.stop />
@@ -482,8 +483,9 @@ export default {
       }
     },
     clearSelection (ev) {
-      if (ev.target && ev.currentTarget && ev.target === ev.currentTarget) {
+      if (!ev || (ev.target && ev.currentTarget && ev.target === ev.currentTarget)) {
         this.selectedItem = null
+        this.previousSelection = null
         this.detailsOpened = false
       }
     },