add condition button working with persistance

This commit is contained in:
Joel McKinnon 2020-01-10 12:22:05 -08:00
parent eb7efae1cc
commit d819c6efe2
5 changed files with 73 additions and 48 deletions

View File

@ -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) => {

View File

@ -28,18 +28,18 @@
<span class="c-cs-button__label">Add Condition</span>
</button>
</div>
<div v-for="condition in conditions"
:key="condition.key"
>
<div v-if="isEditing">
<ConditionEdit :domain-object="condition.domainObject"
:is-default="condition.isDefault"
/>
</div>
<div v-else>
<Condition :domain-object="condition.domainObject"
:is-default="condition.isDefault"
/>
<div class="condition-collection">
<div v-for="condition in conditionCollection"
:key="condition.key"
>
<div v-if="isEditing">
<ConditionEdit :is-default="condition.isDefault"
@persist="persist"
/>
</div>
<div v-else>
<Condition :is-default="condition.isDefault" />
</div>
</div>
</div>
</div>
@ -63,41 +63,28 @@ export default {
data() {
return {
expanded: true,
conditions: [
{
identifier: {
key: 'testConditionKey',
namespace: ''
},
type: 'condition',
isDefault: true
}
],
parentKeyString: this.openmct.objects.makeKeyString(this.domainObject.identifier)
parentKeyString: this.openmct.objects.makeKeyString(this.domainObject.identifier),
conditionCollection: [{
isDefault: true
}]
};
},
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.composition.on('add', this.added);
// this.composition.on('remove', this.removeCondition);
// this.composition.on('reorder', this.reorder);
this.composition.load();
this.conditionCollection = this.domainObject.configuration.conditionCollection;
},
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.conditions, (condition) => this.openmct.objects.makeKeyString(identifier) === item.key);
let index = _.findIndex(this.conditionCollection, (condition) => this.openmct.objects.makeKeyString(identifier) === condition.identifier.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);
}
}
}
}

View File

@ -1,6 +1,5 @@
<template>
<div id="conditionArea"
class="c-cs-editui__conditions"
<div class="conditionArea 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() {
console.log(this);
removeCondition(ev) {
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);
}
}

View File

@ -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>

View File

@ -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 = [];
}
});