Model editor: Drag and drop

bundles/org.openhab.ui/web/src/components/item/item.vue

@@ -8,7 +8,7 @@
     :subtitle="noType ? '' : getItemTypeAndMetaLabel(item)"
     :after="state"
     v-on="$listeners">
-    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" :state="(noState || item.type === 'Image') ? null : (context.store[item.name].state || item.state)" height="32" width="32" />
+    <oh-icon v-if="!noIcon && item.category" slot="media" :icon="item.category" :state="(noState || item.type === 'Image') ? null : (context?.store[item.name]?.state || item.state)" height="32" width="32" />
     <span v-else-if="!noIcon" slot="media" class="item-initial">{{ item.name[0] }}</span>
     <f7-icon v-if="!item.editable" slot="after-title" f7="lock_fill" size="1rem" color="gray" />
     <slot name="footer" #footer />

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

@@ -66,7 +66,7 @@
       <f7-block strong class="no-padding" v-if="ready">
         <model-treeview class="model-picker-treeview" :root-nodes="rootNodes"
                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                        :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
+                        :selected="selectedItem" @selected="selectItem" @checked="checkItem" />
       </f7-block>
       <f7-block v-else-if="!ready" class="text-align-center">
         <f7-preloader />
@@ -178,7 +178,7 @@ export default {
       this.loadModel().then(() => {
         this.$nextTick(() => {
           this.initSearchbar = true
-          this.applyExpandedOption()
+          this.restoreExpanded()
         })
       })
     },

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

@@ -1,10 +1,14 @@
 <template>
   <f7-treeview class="model-treeview">
-    <model-treeview-item v-for="node in rootNodes"
-                         :key="node.item.name" :model="node"
-                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                         @selected="nodeSelected" :selected="selectedItem"
-                         @checked="(item, check) => $emit('checked', item, check)" />
+    <draggable :disabled="!canDragDrop" :list="children" group="model-treeview" animation="150" fallbackOnBody="true" forceFallback="true" scrollSensitivity="200" delay="400" swapThreshold="0.6"
+               @start="onDragStart" @change="onDragChange" @end="onDragEnd" :move="onDragMove">
+      <model-treeview-item v-for="(node, index) in children"
+                           :key="node.item.name + '_' + index" :model="node" :parentNode="model"
+                           :includeItemName="includeItemName" :includeItemTags="includeItemTags" :canDragDrop="canDragDrop" :moveState="moveState"
+                           @selected="nodeSelected" :selected="selected"
+                           @checked="(item, check) => $emit('checked', item, check)"
+                           @reload="$emit('reload')" />
+    </draggable>
   </f7-treeview>
 </template>
 
@@ -22,12 +26,40 @@
 
 <script>
 import ModelTreeviewItem from '@/components/model/treeview-item.vue'
+import ModelDragDropMixin from '@/pages/settings/model/model-dragdrop-mixin'
+import Draggable from 'vuedraggable'
 
 export default {
-  props: ['rootNodes', 'selectedItem', 'includeItemName', 'includeItemTags'],
+  mixins: [ModelDragDropMixin],
+  props: ['rootNodes', 'selected', 'includeItemName', 'includeItemTags', 'canDragDrop'],
+  emits: ['reload'],
   components: {
+    Draggable,
     ModelTreeviewItem
   },
+  data () {
+    return {
+      moveState: {}
+    }
+  },
+  computed: {
+    model: {
+      get: function () {
+        return {
+          class: '',
+          children: {
+            locations: this.rootNodes.filter(n => n.class.startsWith('Location')),
+            equipment: this.rootNodes.filter(n => n.class.startsWith('Equipment')),
+            points: this.rootNodes.filter(n => n.class.startsWith('Point')),
+            groups: this.rootNodes.filter(n => !n.class && n.item.type === 'Group'),
+            items: this.rootNodes.filter(n => !n.class && n.item.type !== 'Group')
+          },
+          opened: true,
+          item: null
+        }
+      }
+    }
+  },
   methods: {
     nodeSelected (node) {
       this.$emit('selected', node)

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

@@ -3,17 +3,21 @@
                     :icon-ios="icon('ios')" :icon-aurora="icon('aurora')" :icon-md="icon('md')"
                     :textColor="iconColor" :color="(model.item.created !== false) ? 'blue' :'orange'"
                     :selected="selected && selected.item.name === model.item.name"
-                    :opened="model.opened"
+                    :opened="model.opened" :toggle="canHaveChildren"
                     @click="select">
-    <model-treeview-item v-for="node in [model.children.locations,
-                                         model.children.equipment, model.children.points,
-                                         model.children.groups, model.children.items].flat()"
-                         :key="node.item.name"
-                         :model="node"
-                         @selected="(event) => $emit('selected', event)"
-                         :selected="selected"
-                         :includeItemName="includeItemName" :includeItemTags="includeItemTags"
-                         @checked="(item, check) => $emit('checked', item, check)" />
+    <draggable :disabled="!canDragDrop || !model.item.editable" :list="children" group="model-treeview" animation="150" fallbackOnBody="true" forceFallback="true" scrollSensitivity="200" delay="400" swapThreshold="0.6"
+               @start="onDragStart" @change="onDragChange" @end="onDragEnd" :move="onDragMove">
+      <model-treeview-item v-for="(node, index) in children"
+                           :key="node.item.name + '_' + index"
+                           :model="node"
+                           :parentNode="model"
+                           @selected="(event) => $emit('selected', event)"
+                           :selected="selected"
+                           :includeItemName="includeItemName" :includeItemTags="includeItemTags"
+                           :canDragDrop="canDragDrop"
+                           :moveState="moveState"
+                           @checked="(item, check) => $emit('checked', item, check)" />
+    </draggable>
     <div slot="label" class="semantic-class">
       {{ className() }}
       <template v-if="includeItemTags">
@@ -34,31 +38,25 @@
 
 <script>
 import ItemMixin from '@/components/item/item-mixin'
+import ModelDragDropMixin from '@/pages/settings/model/model-dragdrop-mixin'
+import Draggable from 'vuedraggable'
 
 export default {
   name: 'model-treeview-item',
-  mixins: [ItemMixin],
-  props: ['model', 'selected', 'includeItemName', 'includeItemTags'],
+  mixins: [ItemMixin, ModelDragDropMixin],
+  props: ['model', 'parentNode', 'selected', 'includeItemName', 'includeItemTags', 'canDragDrop', 'moveState'],
+  emits: ['reload'],
   components: {
+    Draggable,
     ModelTreeviewItem: 'model-treeview-item'
   },
-  computed: {
-    children () {
-      return [this.model.children.locations,
-        this.model.children.equipment, this.model.children.points,
-        this.model.children.groups, this.model.children.items].flat()
-    },
-    iconColor () {
-      return (this.model.item.metadata && this.model.item.metadata.semantics) ? '' : 'gray'
-    }
-  },
   methods: {
     icon (theme) {
-      if (this.model.class.indexOf('Location') === 0) {
+      if (this.model.class?.indexOf('Location') === 0) {
         return (theme === 'md') ? 'material:place' : 'f7:placemark'
-      } else if (this.model.class.indexOf('Equipment') === 0) {
+      } else if (this.model.class?.indexOf('Equipment') === 0) {
         return (theme === 'md') ? 'material:payments' : 'f7:cube_box'
-      } else if (this.model.class.indexOf('Point') === 0) {
+      } else if (this.model.class?.indexOf('Point') === 0) {
         return (theme === 'md') ? 'material:flash_on' : 'f7:bolt_fill'
       } else if (this.model.item.type === 'Group') {
         return (theme === 'md') ? 'material:folder' : 'f7:folder'

bundles/org.openhab.ui/web/src/pages/settings/model/add-from-template.vue

@@ -43,7 +43,7 @@
           </f7-block-footer>
           <f7-block class="semantic-tree">
             <model-treeview class="model-picker-treeview" :rootNodes="rootLocations"
-                            :selected-item="selectedItem" @selected="selectItem" @checked="checkItem" />
+                            :selected="selectedItem" @selected="selectItem" @checked="checkItem" />
           </f7-block>
         </f7-block>
       </f7-col>