rendering correct number of input fields depending on operation and persisting values

This commit is contained in:
Joel McKinnon 2020-02-24 16:31:59 -08:00
parent a1bf4a92e5
commit f4f1d0387b

View File

@ -44,8 +44,15 @@
{{ option.text }} {{ option.text }}
</option> </option>
</select> </select>
<input v-if="isInputOperation" <input v-if="inputCount > 0"
v-model="criterion.input" v-model="criterion.input[0]"
class="t-condition-name-input"
type="text"
@blur="persist"
>
<span v-if="inputCount === 2">and</span>
<input v-if="inputCount === 2"
v-model="criterion.input[1]"
class="t-condition-name-input" class="t-condition-name-input"
type="text" type="text"
@blur="persist" @blur="persist"
@ -53,7 +60,6 @@
</span> </span>
</span> </span>
</li> </li>
</template> </template>
<script> <script>
@ -86,7 +92,7 @@ export default {
telemetryMetadataOptions: {}, telemetryMetadataOptions: {},
operations: OPERATIONS, operations: OPERATIONS,
filteredOps: [], filteredOps: [],
isInputOperation: false, inputCount: 0,
rowLabel: '' rowLabel: ''
} }
}, },
@ -101,11 +107,7 @@ export default {
}, },
methods: { methods: {
updateMetadataOptions(ev) { updateMetadataOptions(ev) {
if (ev) { if (ev) {this.clearInputs()}
this.criterion.metadata = '';
this.criterion.operation = '';
this.criterion.input = [];
}
if (this.criterion.telemetry) { if (this.criterion.telemetry) {
this.openmct.objects.get(this.criterion.telemetry).then((telemetryObject) => { this.openmct.objects.get(this.criterion.telemetry).then((telemetryObject) => {
this.telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject); this.telemetryMetadata = this.openmct.telemetry.getMetadata(telemetryObject);
@ -116,13 +118,9 @@ export default {
} else { } else {
this.criterion.metadata = ''; this.criterion.metadata = '';
} }
this.persist();
}, },
updateOperations(ev) { updateOperations(ev) {
if (ev) { if (ev) {this.clearInputs()}
this.criterion.operation = '';
this.criterion.input = [];
}
let operationFormat = 'string'; let operationFormat = 'string';
this.telemetryMetadata.valueMetadatas.forEach((value, index) => { this.telemetryMetadata.valueMetadatas.forEach((value, index) => {
if (value.key === this.criterion.metadata) { if (value.key === this.criterion.metadata) {
@ -139,23 +137,25 @@ export default {
} }
}); });
this.filteredOps = [...this.operations.filter(op => op.appliesTo.indexOf(operationFormat) !== -1)]; this.filteredOps = [...this.operations.filter(op => op.appliesTo.indexOf(operationFormat) !== -1)];
this.persist();
}, },
updateOperationInputVisibility(ev) { updateOperationInputVisibility(ev) {
if (ev) { if (ev) {
this.criterion.input = []; this.criterion.input = [];
} }
if (this.criterion.operation === '') {
this.isInputOperation = false;
} else {
for (let i = 0; i < this.filteredOps.length; i++) { for (let i = 0; i < this.filteredOps.length; i++) {
if (this.criterion.operation === this.filteredOps[i].name) { if (this.criterion.operation === this.filteredOps[i].name) {
this.isInputOperation = this.filteredOps[i].inputCount > 0; this.inputCount = this.filteredOps[i].inputCount;
if (!this.isInputOperation) {this.criterion.input = ''} if (!this.inputCount) {this.criterion.input = []}
}
} }
} }
this.persist(); this.persist();
}, },
clearInputs() {
this.criterion.operation = '';
this.criterion.input = [];
this.inputCount = 0;
},
updateMetadataSelection() { updateMetadataSelection() {
this.updateOperationInputVisibility(); this.updateOperationInputVisibility();
}, },