add condition button working with persistance

src/plugins/condition/ConditionSetViewProvider.js

@@ -58,7 +58,7 @@ export default class ConditionSetViewProvider {
                             isEditing
                         }
                     },
-                    template: '<condition-set :isEditing="isEditing"></condition-set>'
+                    template: '<condition-set ref="conditionSet" :isEditing="isEditing"></condition-set>'
                 });
             },
             onEditModeChange: (isEditing) => {

src/plugins/condition/components/ConditionCollection.vue

@@ -28,18 +28,18 @@
                 <span class="c-cs-button__label">Add Condition</span>
             </button>
         </div>
-        <div v-for="condition in conditions"
+        <div class="condition-collection">
-             :key="condition.key"
+            <div v-for="condition in conditionCollection"
-        >
+                 :key="condition.key"
-            <div v-if="isEditing">
+            >
-                <ConditionEdit :domain-object="condition.domainObject"
+                <div v-if="isEditing">
-                               :is-default="condition.isDefault"
+                    <ConditionEdit :is-default="condition.isDefault"
-                />
+                                   @persist="persist"
-            </div>
+                    />
-            <div v-else>
+                </div>
-                <Condition :domain-object="condition.domainObject"
+                <div v-else>
-                           :is-default="condition.isDefault"
+                    <Condition :is-default="condition.isDefault" />
-                />
+                </div>
             </div>
         </div>
     </div>
@@ -63,41 +63,28 @@ export default {
     data() {
         return {
             expanded: true,
-            conditions: [
+            parentKeyString: this.openmct.objects.makeKeyString(this.domainObject.identifier),
-                {
+            conditionCollection: [{
-                    identifier: {
+                isDefault: true
-                        key: 'testConditionKey',
+            }]
-                        namespace: ''
-                    },
-                    type: 'condition',
-                    isDefault: true
-                }
-            ],
-            parentKeyString: this.openmct.objects.makeKeyString(this.domainObject.identifier)
         };
     },
     destroyed() {
-        this.composition.off('add', this.added);
+
-        // this.composition.off('remove', this.removeCondition);
-        // this.composition.off('reorder', this.reorder);
     },
     mounted() {
         this.instantiate = this.openmct.$injector.get('instantiate');
-        this.composition = this.openmct.composition.get(this.domainObject);
+        this.conditionCollection = this.domainObject.configuration.conditionCollection;
-        this.composition.on('add', this.added);
-        // this.composition.on('remove', this.removeCondition);
-        // this.composition.on('reorder', this.reorder);
-        this.composition.load();
     },
     methods: {
         added(conditionDO) {
-            this.conditions.unshift(conditionDO);
+            this.conditionCollection.unshift(conditionDO);
         },
         addCondition() {
             let conditionObjId = uuid();
             let conditionObj = {
                 "composition": [],
-                "name": "Condition"+this.conditions.length,
+                "name": "condition" + this.conditionCollection.length,
                 "type": "condition",
                 "id": conditionObjId,
                 "location": this.parentKeyString,
@@ -112,19 +99,27 @@ export default {
             newDO.useCapability('location').setPrimaryLocation(this.parentKeyString);
             let conditionDO = newDO.useCapability('adapter');
 
-            this.composition.add(conditionDO);
+            this.conditionCollection.unshift(conditionDO);
+
+            this.persist();
         },
         removeCondition(identifier) {
-            console.log(`remove condition`);
+            let index = _.findIndex(this.conditionCollection, (condition) => this.openmct.objects.makeKeyString(identifier) === condition.identifier.key);
-            // let index = _.findIndex(this.conditions, (condition) => this.openmct.objects.makeKeyString(identifier) === item.key);
 
-            // this.conditions.splice(index, 1);
+            this.conditionCollection.splice(index, 1);
         },
         reorder(reorderPlan) {
-            let oldConditions = this.conditions.slice();
+            let oldConditions = this.conditionCollection.slice();
             reorderPlan.forEach((reorderEvent) => {
-                this.$set(this.conditions, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
+                this.$set(this.conditionCollection, reorderEvent.newIndex, oldConditions[reorderEvent.oldIndex]);
             });
+        },
+        persist(index) {
+            if (index) {
+                this.openmct.objects.mutate(this.domainObject, `configuration.conditionCollection[${index}]`, this.conditionCollection[index]);
+            } else {
+                this.openmct.objects.mutate(this.domainObject, 'configuration.conditionCollection', this.conditionCollection);
+            }
         }
     }
 }

src/plugins/condition/components/ConditionEdit.vue

@@ -1,6 +1,5 @@
 <template>
-<div id="conditionArea"
+<div class="conditionArea c-cs-editui__conditions"
-     class="c-cs-editui__conditions"
      :class="['widget-condition', { 'widget-condition--current': isCurrent }]"
 >
     <div class="title-bar">
@@ -77,21 +76,33 @@
 
 <script>
 export default {
-    inject: ['openmct'],
+    inject: ['openmct', 'domainObject'],
     props: {
         isEditing: Boolean,
         isCurrent: Boolean,
         isDefault: Boolean
     },
     data() {
+        // console.log(`domainObject: ${domainObject}`);
         return {
-            conditions: {},
             expanded: true
         };
     },
+    mounted() {
+        // console.log(`currentObjectPath: ${this.currentObjectPath.name}`);
+        //  console.log(this.domainObject);
+    },
     methods: {
-        removeCondition() {
+        removeCondition(ev) {
-            console.log(this);
+            let conditionDiv = ev.target.closest('.conditionArea');
+            let conditionCollectionDiv = conditionDiv.closest('.condition-collection');
+            let index = Array.from(conditionDiv.parentNode.children).indexOf(conditionDiv)
+
+            //Array.from(element.parentNode.children).indexOf(element)
+            //console.log(`conditionDiv.nodeName: ${conditionDiv.nodeName}`);
+            console.log(`index: ${index}`);
+            console.log(`conditionCollectionDiv.children.length: ${conditionCollectionDiv.childNodes.length}`);
+            console.log(this.domainObject.configuration.conditionCollection.length);
             // this.conditions.splice(index, 1);
         }
     }

src/plugins/condition/components/ConditionSet.vue

@@ -4,7 +4,9 @@
         <div class="c-sw-edit__ui holder">
             <CurrentOutput :current-output="mockCurrentOutput" />
             <TestData :is-editing="isEditing" />
-            <ConditionCollection :is-editing="isEditing" />
+            <ConditionCollection :is-editing="isEditing"
+                                 :condition-collection="domainObject.conditionCollection"
+            />
         </div>
     </div>
 </div>
@@ -16,7 +18,7 @@ import TestData from './TestData.vue';
 import ConditionCollection from './ConditionCollection.vue';
 
 export default {
-    inject: ["openmct", "objectPath", "domainObject"],
+    inject: ["openmct", "domainObject"],
     components: {
         CurrentOutput,
         TestData,
@@ -29,6 +31,19 @@ export default {
         return {
             mockCurrentOutput: 'Data_Present'
         }
+    },
+    methods: {
+        persist(index) {
+            if (index) {
+                this.openmct.objects.mutate(this.domainObject, `configuration.conditionCollection[${index}]`, this.conditionCollection[index]);
+            } else {
+                this.openmct.objects.mutate(this.domainObject, 'configuration.conditionCollection', this.conditionCollection);
+            }
+        },
+        mounted() {
+        },
+        addCondition() {
+        }
     }
 };
 </script>

src/plugins/condition/plugin.js

@@ -20,6 +20,7 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 import ConditionSetViewProvider from './ConditionSetViewProvider.js';
+// import Condition from './Condition.js';
 
 export default function ConditionPlugin() {
 
@@ -41,6 +42,9 @@ export default function ConditionPlugin() {
             creatable: true,
             cssClass: 'icon-summary-widget',  // TODO: replace with class for new icon
             initialize: function (domainObject) {
+                domainObject.configuration = {
+                    conditionCollection: []
+                };
                 domainObject.composition = [];
             }
         });