condition view with highlighting of current condition, add/remove condition, change name, output and persist

src/plugins/condition/components/Condition.vue

@@ -2,7 +2,7 @@
 <div v-if="condition"
      id="conditionArea"
      class="c-cs-ui__conditions"
-     :class="['widget-condition', { 'widget-condition--current': isCurrent && (isCurrent.key === conditionIdentifier.key) }]"
+     :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
 >
     <div class="title-bar">
         <span class="condition-name">
@@ -28,7 +28,7 @@ export default {
             type: Object,
             required: true
         },
-        isCurrent: {
+        currentConditionIdentifier: {
             type: Object,
             required: true
         }

src/plugins/condition/components/ConditionCollection.vue

@@ -35,7 +35,7 @@
             >
                 <div v-if="isEditing">
                     <ConditionEdit :condition-identifier="conditionIdentifier"
-                                   :is-current="currentConditionIdentifier"
+                                   :current-condition-identifier="currentConditionIdentifier"
                                    @update-current-condition="updateCurrentCondition"
                                    @remove-condition="removeCondition"
                                    @condition-result-updated="handleConditionResult"
@@ -43,7 +43,7 @@
                 </div>
                 <div v-else>
                     <Condition :condition-identifier="conditionIdentifier"
-                               :is-current="currentConditionIdentifier"
+                               :current-condition-identifier="currentConditionIdentifier"
                     />
                 </div>
             </div>
@@ -80,16 +80,35 @@ export default {
     },
     mounted() {
         this.telemetryObjs = [];
+        this.conditionResults = {};
         this.instantiate = this.openmct.$injector.get('instantiate');
         this.composition = this.openmct.composition.get(this.domainObject);
         this.composition.on('add', this.addTelemetry);
         this.composition.load();
         this.conditionCollection = this.domainObject.configuration ? this.domainObject.configuration.conditionCollection : [];
-        if (!this.conditionCollection.length) {this.addCondition(null, true)}
+        if (!this.conditionCollection.length) {
+            this.addCondition(null, true);
+        } else {
+            this.updateCurrentCondition(this.conditionCollection[0]);
+        }
     },
     methods: {
         handleConditionResult(args) {
-            console.log('ConditionCollection: ', args.result);
+            let idAsString = this.openmct.objects.makeKeyString(args.id);
+            this.conditionResults[idAsString] = args.result;
+            this.updateCurrentConditionId();
+        },
+        updateCurrentConditionId() {
+            let currentConditionIdentifier = this.conditionCollection[this.conditionCollection.length-1];
+            for (let i=0, ii = this.conditionCollection.length-1; i< ii; i++) {
+                let conditionIdAsString = this.openmct.objects.makeKeyString(this.conditionCollection[i]);
+                if (this.conditionResults[conditionIdAsString]) {
+                    //first condition to be true wins
+                    currentConditionIdentifier = this.conditionCollection[i];
+                    break;
+                }
+            }
+            this.$emit('current-condition-updated', currentConditionIdentifier);
         },
         addTelemetry(telemetryDomainObject) {
             this.telemetryObjs.push(telemetryDomainObject);
@@ -135,12 +154,14 @@ export default {
             this.conditions[index] = updatedCondition;
         },
         removeCondition(identifier) {
-            console.log('this.conditions', this.conditions);
             let index = _.findIndex(this.conditionCollection, (condition) => {
-                identifier.key === condition.key
+                let conditionId = this.openmct.objects.makeKeyString(condition);
+                let id = this.openmct.objects.makeKeyString(identifier);
+                return conditionId === id;
             });
-            this.conditionCollection.splice(index + 1, 1);
+            this.conditionCollection.splice(index, 1);
             this.persist();
+            this.updateCurrentConditionId();
         },
         reorder(reorderPlan) {
             let oldConditions = this.conditionCollection.slice();

src/plugins/condition/components/ConditionEdit.vue

@@ -1,7 +1,7 @@
 <template>
 <div v-if="condition"
      class="c-cs-editui__conditions"
-     :class="['widget-condition', { 'widget-condition--current': isCurrent && (isCurrent.key === conditionIdentifier.key) }]"
+     :class="['widget-condition', { 'widget-condition--current': currentConditionIdentifier && (currentConditionIdentifier.key === conditionIdentifier.key) }]"
 >
     <div class="title-bar">
         <span
@@ -147,7 +147,7 @@ export default {
             type: Object,
             required: true
         },
-        isCurrent: {
+        currentConditionIdentifier: {
             type: Object,
             required: true
         }
@@ -160,8 +160,8 @@ export default {
             telemetryMetadata: this.telemetryMetadata,
             operations: OPERATIONS,
             selectedMetaDataKey: null,
-            selectedTelemetryKey: null,
-            selectedOperationKey: null,
+            selectedTelemetryKey: '',
+            selectedOperationKey: '',
             selectedOutputKey: null,
             stringOutputField: false,
             comparisonValueField: false,
@@ -206,7 +206,7 @@ export default {
     },
     methods: {
         handleConditionResult(args) {
-            console.log('ConditionEdit::Result', args);
+            // console.log('ConditionEdit::Result', args);
             this.$emit('condition-result-updated', {
                 id: this.conditionIdentifier,
                 result: args.data.result
@@ -240,7 +240,8 @@ export default {
                 this.openmct.objects.get(this.condition.definition.criteria[0].key).then((obj) => {
                     this.telemetryObject = obj;
                     this.telemetryMetadata = this.openmct.telemetry.getMetadata(this.telemetryObject).values();
-                    this.selectedMetaDataKey = this.telemetryMetadata[0].key;
+                    // this.selectedMetaDataKey = this.telemetryMetadata[0].key;
+                    this.selectedMetaDataKey = '';
                     this.selectedTelemetryKey = this.telemetryObject.identifier;
                 });
             } else {
@@ -256,6 +257,8 @@ export default {
         checkInputValue() {
             if (this.selectedOutputKey === this.outputOptions[2].key) {
                 this.condition.definition.output = '';
+            } else {
+                this.condition.definition.output = this.selectedOutputKey;
             }
         },
         operationKeyChange(ev) {

src/plugins/condition/components/ConditionSet.vue

@@ -5,7 +5,7 @@
             <CurrentOutput :condition="currentCondition" />
             <TestData :is-editing="isEditing" />
             <ConditionCollection :is-editing="isEditing"
-                                 @update-current-condition="updateCurrentcondition"
+                                 @current-condition-updated="updateCurrentCondition"
             />
         </div>
     </div>
@@ -17,7 +17,6 @@ import CurrentOutput from './CurrentOutput.vue';
 import TestData from './TestData.vue';
 import ConditionCollection from './ConditionCollection.vue';
 
-
 export default {
     inject: ["openmct", "domainObject"],
     components: {
@@ -35,20 +34,19 @@ export default {
     },
     mounted() {
         let conditionCollection = this.domainObject.configuration.conditionCollection;
-        this.currentConditionIdentifier = conditionCollection.length ? this.domainObject.configuration.conditionCollection[0] : null;
-        if (this.currentConditionIdentifier) {
-            this.openmct.objects.get(this.currentConditionIdentifier).then((obj) => {
-                this.currentCondition = obj;
-            });
-        }
-
+        this.currentConditionIdentifier = conditionCollection.length ? this.updateCurrentCondition(conditionCollection[0]) : null;
     },
     methods: {
-        updateCurrentcondition(identifier) {
-            this.currentConditionIdentifier = identifier;
-            this.openmct.objects.get(this.currentConditionIdentifier).then((obj) => {
-                this.currentCondition = obj;
-            });
+        setCurrentCondition() {
+            if (this.currentConditionIdentifier) {
+                this.openmct.objects.get(this.currentConditionIdentifier).then((obj) => {
+                    this.currentCondition = obj;
+                });
+            }
+        },
+        updateCurrentCondition(conditionIdentifier) {
+            this.currentConditionIdentifier = conditionIdentifier;
+            this.setCurrentCondition();
         }
     }
 };