added button and set up iteratable render of criteria

src/plugins/condition/components/ConditionCollection.vue

@@ -28,27 +28,37 @@
                 <span class="c-cs-button__label">Add Condition</span>
             </button>
         </div>
-        <div class="condition-collection">
+        <div class="c-c condition-collection">
-            <div v-for="conditionIdentifier in conditionCollection"
+            <ul class="c-c__container-holder">
+                <li v-for="(conditionIdentifier, index) in conditionCollection"
                     :key="conditionIdentifier.key"
-                 class="conditionArea"
                 >
                     <div v-if="isEditing">
+                        <div class="c-c__drag-ghost"
+                             @drop.prevent="dropCondition"
+                             @dragenter="dragEnter"
+                             @dragleave="dragLeave"
+                             @dragover.prevent
+                        ></div>
                         <ConditionEdit :condition-identifier="conditionIdentifier"
-                                   :telemetry="telemetryObjs"
                                        :current-condition-identifier="currentConditionIdentifier"
+                                       :condition-index="index"
+                                       :telemetry="telemetryObjs"
                                        @update-current-condition="updateCurrentCondition"
                                        @remove-condition="removeCondition"
+                                       @clone-condition="cloneCondition"
                                        @condition-result-updated="handleConditionResult"
+                                       @set-move-index="setMoveIndex"
                         />
                     </div>
                     <div v-else>
                         <Condition :condition-identifier="conditionIdentifier"
-                               @condition-result-updated="handleConditionResult"
                                    :current-condition-identifier="currentConditionIdentifier"
+                                   @condition-result-updated="handleConditionResult"
                         />
                     </div>
-            </div>
+                </li>
+            </ul>
         </div>
     </div>
 </section>
@@ -59,6 +69,7 @@ import Condition from '../../condition/components/Condition.vue';
 import ConditionEdit from '../../condition/components/ConditionEdit.vue';
 import uuid from 'uuid';
 
+
 export default {
     inject: ['openmct', 'domainObject'],
     components: {
@@ -75,6 +86,7 @@ export default {
             conditionCollection: [],
             conditions: [],
             currentConditionIdentifier: this.currentConditionIdentifier || {},
+            moveIndex: null,
             telemetryObjs: this.telemetryObjs
         };
     },
@@ -97,6 +109,50 @@ export default {
         }
     },
     methods: {
+        setMoveIndex(index) {
+            this.moveIndex = index;
+        },
+        dropCondition(e) {
+            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
+            if (targetIndex > this.moveIndex) { targetIndex-- }
+            const oldIndexArr = Object.keys(this.conditionCollection);
+            const move = function (arr, old_index, new_index) {
+                while (old_index < 0) {
+                    old_index += arr.length;
+                }
+                while (new_index < 0) {
+                    new_index += arr.length;
+                }
+                if (new_index >= arr.length) {
+                    var k = new_index - arr.length;
+                    while ((k--) + 1) {
+                        arr.push(undefined);
+                    }
+                }
+                arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
+                return arr;
+            }
+            const newIndexArr = move(oldIndexArr, this.moveIndex, targetIndex);
+            const reorderPlan = [];
+
+            for (let i = 0; i < oldIndexArr.length; i++) {
+                reorderPlan.push({oldIndex: Number(newIndexArr[i]), newIndex: i});
+            }
+
+            this.reorder(reorderPlan);
+
+            e.target.classList.remove("dragging");
+        },
+        dragEnter(e) {
+            let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
+
+            if (targetIndex > this.moveIndex) { targetIndex-- }
+            if (this.moveIndex === targetIndex) { return }
+            e.target.classList.add("dragging");
+        },
+        dragLeave(e) {
+            e.target.classList.remove("dragging");
+        },
         handleConditionResult(args) {
             let idAsString = this.openmct.objects.makeKeyString(args.id);
             this.conditionResults[idAsString] = args.result;
@@ -127,24 +183,32 @@ export default {
                 this.telemetryObjs.splice(index, 1);
             }
         },
-        addCondition(event, isDefault) {
+        /*
-            let conditionDO = this.getConditionDomainObject(!!isDefault);
+            Adds a condition to list via programatic creation of default for initial list, manual
+            creation via Add Condition button, or duplication via button in title bar of condition.
+            Params:
+            event: always null,
+            isDefault (boolean): true if conditionList is empty
+            isClone (boolean): true if duplicating a condition
+            definition (string): definition property of condition being duplicated with new name
+            index (number): index of condition being duplicated
+        */
+        addCondition(event, isDefault, isClone, definition, index) {
+            let conditionDO = this.getConditionDomainObject(!!isDefault, isClone, definition);
             //persist the condition DO so that we can do an openmct.objects.get on it and only persist the identifier in the conditionCollection of conditionSet
             this.openmct.objects.mutate(conditionDO, 'created', new Date());
+            if (!isClone) {
                 this.conditionCollection.unshift(conditionDO.identifier);
+            } else {
+                this.conditionCollection.splice(index + 1, 0, conditionDO.identifier);
+            }
             this.persist();
         },
         updateCurrentCondition(identifier) {
             this.currentConditionIdentifier = identifier;
         },
-        getConditionDomainObject(isDefault) {
+        getConditionDomainObject(isDefault, isClone, definition) {
-            let conditionObj = {
+            const definitionTemplate = {
-                isDefault: isDefault,
-                identifier: {
-                    namespace: this.domainObject.identifier.namespace,
-                    key: uuid()
-                },
-                definition: {
                 name: isDefault ? 'Default' : 'Unnamed Condition',
                 output: 'false',
                 trigger: 'any',
@@ -154,7 +218,14 @@ export default {
                     metaDataKey: '',
                     key: ''
                 }]
+            };
+            let conditionObj = {
+                isDefault: isDefault,
+                identifier: {
+                    namespace: this.domainObject.identifier.namespace,
+                    key: uuid()
                 },
+                definition: isClone ? definition: definitionTemplate,
                 summary: 'summary description'
             };
             let conditionDOKeyString = this.openmct.objects.makeKeyString(conditionObj.identifier);
@@ -178,10 +249,17 @@ export default {
             this.updateCurrentConditionId();
         },
         reorder(reorderPlan) {
-            let oldConditions = this.conditionCollection.slice();
+            let oldConditions = Array.from(this.conditionCollection);
             reorderPlan.forEach((reorderEvent) => {
                 this.$set(this.conditionCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
             });
+            this.persist();
+        },
+        cloneCondition(condition) {
+            this.openmct.objects.get(condition.identifier).then((obj) => {
+                obj.definition.name = 'Copy of ' + obj.definition.name;
+                this.addCondition(null, false, true, obj.definition, condition.index);
+            });
         },
         persist() {
             this.openmct.objects.mutate(this.domainObject, 'configuration.conditionCollection', this.conditionCollection);
@@ -189,3 +267,4 @@ export default {
     }
 }
 </script>
+

src/plugins/condition/components/ConditionEdit.vue

@@ -1,18 +1,21 @@
 <template>
 <div v-if="condition"
-     class="c-cs-editui__conditions"
+     class="c-c-editui__conditions c-c-container__container c-c__drag-wrapper"
      :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
+     :data-condition-index="conditionIndex"
+     :draggable="!condition.isDefault"
+     @dragstart="dragStart"
+     @dragover.stop
 >
     <div class="title-bar">
         <span
             class="c-c__menu-hamburger"
             :class="{ 'is-enabled': !condition.isDefault }"
-            @click="expanded = !condition.expanded"
         ></span>
         <span
             class="is-enabled flex-elem"
             :class="['c-c__disclosure-triangle', { 'c-c__disclosure-triangle--expanded': expanded }]"
-            @click="expanded = !condition.expanded"
+            @click="expanded = !expanded"
         ></span>
         <div class="condition-summary">
             <span class="condition-name">{{ condition.definition.name }}</span>
@@ -20,6 +23,7 @@
         </div>
         <span v-if="!condition.isDefault"
               class="is-enabled c-c__duplicate"
+              @click="cloneCondition"
         ></span>
         <span v-if="!condition.isDefault"
               class="is-enabled c-c__trash"
@@ -27,20 +31,20 @@
         ></span>
     </div>
     <div v-if="expanded"
-         class="condition-config-edit widget-rule-content c-sw-editui__rules-wrapper holder widget-rules-wrapper flex-elem expanded"
+         class="condition-config-edit widget-condition-content c-sw-editui__conditions-wrapper holder widget-conditions-wrapper flex-elem expanded"
     >
-        <div id="ruleArea"
+        <div id="conditionArea"
-             class="c-sw-editui__rules widget-rules"
+             class="c-c-editui__condition widget-conditions"
         >
-            <div class="c-sw-rule">
+            <div class="c-c-condition">
-                <div class="c-sw-rule__ui l-compact-form l-widget-rule has-local-controls">
+                <div class="c-c-condition__ui l-compact-form l-widget-condition has-local-controls">
                     <div>
-                        <ul class="t-widget-rule-config">
+                        <ul class="t-widget-condition-config">
                             <li>
                                 <label>Condition Name</label>
                                 <span class="controls">
                                     <input v-model="condition.definition.name"
-                                           class="t-rule-name-input"
+                                           class="t-condition-name-input"
                                            type="text"
                                     >
                                 </span>
@@ -61,16 +65,16 @@
                                     </select>
                                     <input v-if="selectedOutputKey === outputOptions[2].key"
                                            v-model="condition.definition.output"
-                                           class="t-rule-name-input"
+                                           class="t-condition-name-input"
                                            type="text"
                                     >
                                 </span>
                             </li>
                         </ul>
                         <div v-if="!condition.isDefault"
-                             class="widget-rule-content expanded"
+                             class="widget-condition-content expanded"
                         >
-                            <ul class="t-widget-rule-config">
+                            <ul class="t-widget-condition-config">
                                 <li class="has-local-controls t-condition">
                                     <label>Match when</label>
                                     <span class="controls">
@@ -81,11 +85,13 @@
                                     </span>
                                 </li>
                             </ul>
-                            <ul class="t-widget-rule-config">
+                            <ul v-if="telemetry.length"
-                                <li v-if="telemetry.length"
+                                class="t-widget-condition-config">
+                                <li v-for="(criteria, index) in condition.definition.criteria"
+                                    :key="criteria.key.key"
                                     class="has-local-controls t-condition"
                                 >
-                                    <label>when</label>
+                                    <label>{{ index === 0 ? 'when' : 'and when' }}</label>
                                     <span class="t-configuration">
                                         <span class="controls">
                                             <select v-model="selectedTelemetryKey"
@@ -124,14 +130,23 @@
                                                 </option>
                                             </select>
                                             <input v-if="comparisonValueField"
-                                                   class="t-rule-name-input"
-                                                   type="text"
                                                    v-model="operationValue"
+                                                   class="t-condition-name-input"
+                                                   type="text"
                                             >
                                         </span>
                                     </span>
                                 </li>
                             </ul>
+                            <div class="holder c-c-button-wrapper align-left">
+                                <span class="c-c-label-spacer"></span>
+                                <button
+                                    class="c-c-button c-c-button--minor add-criteria-button"
+                                    @click="addCriteria"
+                                >
+                                    <span class="c-c-button__label">Add Criteria</span>
+                                </button>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -144,6 +159,7 @@
 <script>
 import { OPERATIONS } from '../utils/operations';
 import ConditionClass from "@/plugins/condition/Condition";
+import uuid from 'uuid';
 
 export default {
     inject: ['openmct', 'domainObject'],
@@ -156,6 +172,10 @@ export default {
             type: Object,
             required: true
         },
+        conditionIndex: {
+            type: Number,
+            required: true
+        },
         telemetry: {
             type: Array,
             required: true,
@@ -201,6 +221,8 @@ export default {
             this.condition = obj;
             this.initialize();
         }));
+
+        this.dragGhost = document.getElementById('js-c-drag-ghost');
     },
     updated() {
         //validate telemetry exists, update criteria as needed
@@ -208,6 +230,22 @@ export default {
         this.persist();
     },
     methods: {
+        addCriteria() {
+            const criteriaObject = {
+                operation: '',
+                input: '',
+                metaDataKey: '',
+                key: {
+                    namespace: '',
+                    key: uuid()
+                }
+            }
+            this.condition.definition.criteria.push(criteriaObject);
+            console.log('this.condition.definition.criteria', this.condition.definition.criteria);
+        },
+        dragStart(e) {
+            this.$emit('set-move-index', Number(e.target.getAttribute('data-condition-index')));
+        },
         initialize() {
             this.setOutput();
             this.setOperation();
@@ -246,6 +284,12 @@ export default {
         removeCondition(ev) {
             this.$emit('remove-condition', this.conditionIdentifier);
         },
+        cloneCondition(ev) {
+            this.$emit('clone-condition', {
+                identifier: this.conditionIdentifier,
+                index: Number(ev.target.closest('.widget-condition').getAttribute('data-condition-index'))
+            });
+        },
         setOutput() {
             if (this.condition.definition.output !== 'false' && this.condition.definition.output !== 'true') {
                 this.selectedOutputKey = this.outputOptions[2].key;
@@ -343,3 +387,4 @@ export default {
     }
 }
 </script>
+

src/plugins/condition/components/condition-set.scss

@@ -29,7 +29,6 @@ section {
 
 .c-cs-ui__label {
     color: #333;
-    vertical-align: middle;
 }
 
 .c-cs__ui_content .help {
@@ -85,7 +84,7 @@ section {
 .c-cs-button[class*='is-active'],
 .c-cs-button--menu[class*="--major"],
 .c-cs-button--menu[class*='is-active'] {
-    border: solid 1.5px #0B427C;
+    border: solid 1px #0B427C;
     background-color: #4778A3;
     padding: 0.2em 0.6em;
     margin: 0.4em;
@@ -145,3 +144,4 @@ section {
     }
 }
 
+

src/plugins/condition/components/condition.scss

@@ -1,8 +1,6 @@
-
-
 .widget-condition {
     background-color: #eee;
-    margin: 0 0 0.6em;
+    margin: 0 0 5px;
     border-radius: 3px;
 
     &--current {
@@ -11,6 +9,35 @@
 
 }
 
+.c-c-editui__conditions.widget-condition {
+    margin: 0;
+}
+
+.c-c-button-wrapper {
+    border-top: solid 1px #ccc;
+    padding: 2px;
+}
+
+.c-c-label-spacer {
+    display: inline-block;
+    width: 90px;
+}
+
+.c-c-button[class*="--minor"],
+.c-c-button[class*='is-active'],
+.c-c-button--menu[class*="--minor"],
+.c-c-button--menu[class*='is-active'] {
+    border: solid 1px #666;
+    background-color: #eee;
+    padding: 0.1em 0.4em;
+    margin: 0.4em;
+    font-weight: normal;
+    color: #666;
+    border-radius: 6px;
+}
+
+
+
 .title-bar {
     display: flex;
     align-items: center;
@@ -53,7 +80,7 @@
     margin-left: 0;
 }
 
-.l-widget-rule {
+.l-widget-condition {
     padding: 0;
 }
 
@@ -61,11 +88,11 @@
     padding: 0;
 }
 
-.widget-rule-content.expanded {
+.widget-condition-content.expanded {
     margin: 0 3px;
 }
 
-.widget-rule-content.expanded ul {
+.widget-condition-content.expanded ul {
     border-top: solid 1px #ccc;
     padding: 2px;
 }
@@ -152,3 +179,15 @@
         content: $glyph-icon-trash;
     }
 }
+
+.c-c__drag-ghost {
+    width: 100%;
+    min-height: 5px;
+    &.dragging {
+        min-height: 20px;
+        border: solid 1px blue;
+        background-color: lightblue;
+        border-radius: 2px;
+    }
+
+}