Merge branch 'topic-conditionals' into dave/provide-conditions-telemetry

src/plugins/condition/ConditionManager.js

@@ -115,7 +115,6 @@ export default class ConditionManager extends EventEmitter {
             conditionObj = {
                 isDefault: isDefault,
                 type: 'condition',
-                name: isDefault ? 'Default' : 'Unnamed Condition',
                 identifier: {
                     ...this.domainObject.identifier,
                     key: uuid()
@@ -123,7 +122,7 @@ export default class ConditionManager extends EventEmitter {
                 configuration: {
                     name: isDefault ? 'Default' : 'Unnamed Condition',
                     output: 'false',
-                    trigger: 'any',
+                    trigger: 'all',
                     criteria: isDefault ? [] : [{
                         telemetry: '',
                         operation: '',

src/plugins/condition/components/Condition.vue

@@ -102,7 +102,9 @@
                                     <li class="has-local-controls t-condition">
                                         <label>Match when</label>
                                         <span class="controls">
-                                            <select v-model="trigger">
+                                            <select v-model="domainObject.configuration.trigger"
+                                                    @change="persist"
+                                            >
                                                 <option value="all">all criteria are met</option>
                                                 <option value="any">any criteria are met</option>
                                             </select>
@@ -112,14 +114,27 @@
                                 <ul v-if="telemetry.length"
                                     class="t-widget-condition-config"
                                 >
-                                    <Criterion v-for="(criterion, index) in domainObject.configuration.criteria"
+                                    <li v-for="(criterion, index) in domainObject.configuration.criteria"
-                                               :key="index"
+                                        :key="index"
-                                               :telemetry="telemetry"
+                                        class="has-local-controls t-condition"
-                                               :criterion="criterion"
+                                    >
-                                               :index="index"
+                                        <Criterion :telemetry="telemetry"
-                                               :trigger="trigger"
+                                                   :criterion="criterion"
-                                               @persist="persist"
+                                                   :index="index"
-                                    />
+                                                   :trigger="domainObject.configuration.trigger"
+                                                   :is-default="domainObject.configuration.criteria.length === 1"
+                                                   @persist="persist"
+                                        />
+                                        <div class="c-c__criterion-controls">
+                                            <span class="is-enabled c-c__duplicate"
+                                                  @click="cloneCriterion(index)"
+                                            ></span>
+                                            <span v-if="!(domainObject.configuration.criteria.length === 1)"
+                                                  class="is-enabled c-c__trash"
+                                                  @click="removeCriterion(index)"
+                                            ></span>
+                                        </div>
+                                    </li>
                                 </ul>
                                 <div class="holder c-c-button-wrapper align-left">
                                     <span class="c-c-label-spacer"></span>
@@ -197,10 +212,10 @@ export default {
             domainObject: this.domainObject,
             currentCriteria: this.currentCriteria,
             expanded: true,
-            trigger: 'all',
             selectedOutputKey: '',
             stringOutputField: false,
-            outputOptions: ['false', 'true', 'string']
+            outputOptions: ['false', 'true', 'string'],
+            criterionIndex: 0
         };
     },
     computed: {
@@ -246,6 +261,16 @@ export default {
                 index: Number(ev.target.closest('.widget-condition').getAttribute('data-condition-index'))
             });
         },
+        removeCriterion(index) {
+            this.domainObject.configuration.criteria.splice(index, 1);
+            this.persist()
+        },
+        cloneCriterion(index) {
+            const clonedCriterion = {...this.domainObject.configuration.criteria[index]};
+            this.domainObject.configuration.criteria.splice(index + 1, 0, clonedCriterion);
+            this.persist()
+        },
+
         setOutput() {
             let conditionOutput = this.domainObject.configuration.output;
             if (conditionOutput) {

src/plugins/condition/components/ConditionCollection.vue

@@ -38,19 +38,22 @@
         <div v-show="isEditing"
              class="help"
         >
-            <span>The first condition to match is the one that wins. Drag conditions to rearrange.</span>
+            <span v-if="!telemetryObjs.length">Drag telemetry into Condition Set in order to add conditions.</span>
+            <span v-else>The first condition to match is the one that wins. Drag conditions to rearrange.</span>
         </div>
         <div class="holder add-condition-button-wrapper align-left">
             <button
                 v-show="isEditing"
                 id="addCondition"
                 class="c-cs-button c-cs-button--major add-condition-button"
+                :class="{ 'is-disabled': !telemetryObjs.length}"
+                :disabled="!telemetryObjs.length"
                 @click="addCondition"
             >
                 <span class="c-cs-button__label">Add Condition</span>
             </button>
         </div>
-        <div class="c-c condition-collection">
+        <div class="c-c__condition-collection">
             <ul class="c-c__container-holder">
                 <li v-for="(conditionIdentifier, index) in conditionCollection"
                     :key="conditionIdentifier.key"
@@ -82,7 +85,6 @@
 import Condition from './Condition.vue';
 import ConditionManager from '../ConditionManager';
 
-
 export default {
     inject: ['openmct', 'domainObject'],
     components: {

src/plugins/condition/components/Criterion.vue

@@ -1,5 +1,5 @@
 <template>
-<li class="has-local-controls t-condition">
+<div>
     <label>{{ setRowLabel }}</label>
     <span class="t-configuration">
         <span class="controls">
@@ -46,8 +46,7 @@
             >
         </span>
     </span>
-</li>
+</div>
-
 </template>
 
 <script>

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

@@ -64,6 +64,10 @@ section {
     margin-top: 5px;
 }
 
+.c-c__condition-collection.is-disabled {
+    opacity: 0.5;
+}
+
 .widget-condition form {
     padding: 0.5em;
     display: flex;
@@ -91,6 +95,10 @@ section {
     font-weight: bold;
     color: #eee;
     border-radius: 6px;
+
+    &.is-disabled {
+        opacity: 0.5;
+    }
 }
 
 .c-cs__disclosure-triangle,

src/plugins/condition/components/condition.scss

@@ -197,3 +197,12 @@
         border-radius: 2px;
     }
 }
+
+.c-c__criterion-controls {
+    width: 28px;
+
+    .c-c__duplicate,
+    .c-c__trash {
+        display: inline-block;
+    }
+}