drag to reorder conditions

src/plugins/condition/components/ConditionCollection.vue

@@ -29,16 +29,19 @@
             </button>
         </div>
         <div class="c-c condition-collection">
-            <div id="js-c-drag-ghost"
-                 class="c-c__drag-ghost"
-            ></div>
             <div class="c-c__container-holder">
                 <div v-for="(conditionIdentifier, index) in conditionCollection"
                      :key="conditionIdentifier.key"
                 >
                     <div v-if="isEditing">
+                        <div :id="'drop' + index"
+                             class="c-c__drag-ghost"
+                             @drop.prevent="dropCondition"
+                             @dragover.prevent
+                        ></div>
                         <ConditionEdit :condition-identifier="conditionIdentifier"
                                        :current-condition-identifier="currentConditionIdentifier"
+                                       :condition-index="index"
                                        @update-current-condition="updateCurrentCondition"
                                        @remove-condition="removeCondition"
                                        @condition-result-updated="handleConditionResult"
@@ -98,6 +101,27 @@ export default {
         }
     },
     methods: {
+        dropCondition(e) {
+            const newCondIndex = Number(e.dataTransfer.getData('conditionIndex'));
+            const oldCondIndex = Number(e.target.id.slice(4));
+
+            let reorderPlan = [];
+
+            this.conditionCollection.forEach((condition, index) => {
+                const reorderObj = {};
+                reorderObj.oldIndex = index;
+                if (index === oldCondIndex) {
+                    reorderObj.newIndex = newCondIndex;
+                } else if (index === newCondIndex) {
+                    reorderObj.newIndex = oldCondIndex;
+                } else {
+                    reorderObj.newIndex = index;
+                }
+                reorderPlan.push(reorderObj);
+            });
+
+            this.reorder(reorderPlan);
+        },
         handleConditionResult(args) {
             let idAsString = this.openmct.objects.makeKeyString(args.id);
             this.conditionResults[idAsString] = args.result;
@@ -173,6 +197,7 @@ export default {
             reorderPlan.forEach((reorderEvent) => {
                 this.$set(this.conditionCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
             });
+            this.persist();
         },
         persist() {
             this.openmct.objects.mutate(this.domainObject, 'configuration.conditionCollection', this.conditionCollection);

src/plugins/condition/components/ConditionEdit.vue

@@ -1,9 +1,11 @@
 <template>
 <div v-if="condition"
+     :data-condition-index="conditionIndex"
      class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
      :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
-     draggable="true"
+     :draggable="!condition.isDefault"
-     @dragstart="initDrag"
+     @dragstart="dragStart"
+     @dragover.stop
 >
     <div class="title-bar">
         <span
@@ -153,6 +155,10 @@ export default {
             type: Object,
             required: true
         },
+        conditionIndex: {
+            type: Number,
+            required: true
+        }
     },
     data() {
         return {
@@ -209,24 +215,8 @@ export default {
         this.persist();
     },
     methods: {
-        initDrag() {
+        dragStart: e => {
-            // let type = this.openmct.types.get(this.domainObject.type),
+            e.dataTransfer.setData('conditionIndex', e.target.getAttribute('data-condition-index'));
-            //     iconClass = type.definition ? type.definition.cssClass : 'icon-object-unknown';
-
-            // if (this.dragGhost) {
-            //     let originalClassName = this.dragGhost.classList[0];
-            //     this.dragGhost.className = '';
-            //     this.dragGhost.classList.add(originalClassName, iconClass);
-
-            //     this.dragGhost.innerHTML = `<span>${this.domainObject.name}</span>`;
-            //     event.dataTransfer.setDragImage(this.dragGhost, 0, 0);
-            // }
-
-            console.log('conditionId', this.condition.id);
-            console.log('containerIndex', this.containerIndex);
-
-            event.dataTransfer.setData('conditionId', this.condition.id);
-            event.dataTransfer.setData('containerIndex', this.containerIndex);
         },
         handleConditionResult(args) {
             // console.log('ConditionEdit::Result', args);

src/plugins/condition/components/condition.scss

@@ -1,6 +1,6 @@
 .widget-condition {
     background-color: #eee;
-    margin: 0 0 0.6em;
+    margin: 0 0 5px;
     border-radius: 3px;
 
     &--current {
@@ -9,6 +9,10 @@
 
 }
 
+.c-c-editui__conditions.widget-condition {
+    margin: 0;
+}
+
 .title-bar {
     display: flex;
     align-items: center;
@@ -150,3 +154,8 @@
         content: $glyph-icon-trash;
     }
 }
+
+.c-c__drag-ghost {
+    width: 100%;
+    min-height: 10px;
+}