mirror of
https://github.com/nasa/openmct.git
synced 2025-04-23 18:33:46 +00:00
Fixed condition-improve-reorder branch (#2912)
* wip: changing to condition as drag target * wip * wip * wip * fixed dragging issues * fixed dragging classes and added temp border on condition with dragging class * Conditionals sanding and shimming - CSS and `all-dragging`; * wip * fixed drag end issue and changed dragging class to go on parent condition h * drag with counter * wip * wip * wip * return to logic in ConditionCollection.vue * wip * completed js part with highlighted c-condition-h on dragover * restored grippy as draggable elem, improved isValidTarget * fixed drag text bug * added moveIndex prop in Condition.vue * Conditionals drag reorder styling - Moved `.is-drag-target` class up to conditions-h element; - Renamed `.all-dragging` to `is-active-dragging`; - Styling for `__drop-target` elements; * fixed incorrect default for moveIndex in condition collection, unnecessary reset in condition * fixed downward move reorder * removed prevent from dragenter and drag leave, changed @blur to @change for name and output fields * removed console log * Repair merge-damaged conditionals.scss - Manual merge from latest master; * Test data layout tweaked - Prevent c-cs__test-data__controls from collapsing; Co-authored-by: Joel McKinnon <joel.g.mckinnon@nasa.gov> Co-authored-by: Joel McKinnon <JoelMcKinnon@users.noreply.github.com>
This commit is contained in:
Charles Hacskaylo
GitHub
parent
f885e83505
commit
99c095a69f
src/plugins/condition/components
@ -21,159 +21,167 @@
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<div v-if="isEditing"
|
||||
class="c-condition c-condition--edit js-condition-drag-wrapper"
|
||||
<div class="c-condition-h"
|
||||
:class="{ 'is-drag-target': draggingOver }"
|
||||
@dragover.prevent
|
||||
@drop.prevent="dropCondition($event, conditionIndex)"
|
||||
@dragenter="dragEnter($event, conditionIndex)"
|
||||
@dragleave="dragLeave($event, conditionIndex)"
|
||||
>
|
||||
<!-- Edit view -->
|
||||
<div class="c-condition__header">
|
||||
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
|
||||
title="Drag to reorder conditions"
|
||||
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
|
||||
:draggable="!condition.isDefault"
|
||||
@dragstart="dragStart"
|
||||
@dragstop="dragStop"
|
||||
@dragover.stop
|
||||
></span>
|
||||
|
||||
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
|
||||
:class="{ 'c-disclosure-triangle--expanded': expanded }"
|
||||
@click="expanded = !expanded"
|
||||
></span>
|
||||
|
||||
<span class="c-condition__name">{{ condition.configuration.name }}</span>
|
||||
<span class="c-condition__summary">
|
||||
<template v-if="!canEvaluateCriteria">
|
||||
Define criteria
|
||||
</template>
|
||||
<span v-else>
|
||||
<condition-description :show-label="false"
|
||||
:condition="condition"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="c-condition__buttons">
|
||||
<button v-if="!condition.isDefault"
|
||||
class="c-click-icon c-condition__duplicate-button icon-duplicate"
|
||||
title="Duplicate this condition"
|
||||
@click="cloneCondition"
|
||||
></button>
|
||||
|
||||
<button v-if="!condition.isDefault"
|
||||
class="c-click-icon c-condition__delete-button icon-trash"
|
||||
title="Delete this condition"
|
||||
@click="removeCondition"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expanded"
|
||||
class="c-condition__definition c-cdef"
|
||||
<div class="c-condition-h__drop-target"></div>
|
||||
<div v-if="isEditing"
|
||||
class="c-condition c-condition--edit"
|
||||
>
|
||||
<span class="c-cdef__separator c-row-separator"></span>
|
||||
<span class="c-cdef__label">Condition Name</span>
|
||||
<span class="c-cdef__controls">
|
||||
<input v-model="condition.configuration.name"
|
||||
class="t-condition-input__name"
|
||||
type="text"
|
||||
@blur="persist"
|
||||
>
|
||||
</span>
|
||||
<!-- Edit view -->
|
||||
<div class="c-condition__header">
|
||||
<span class="c-condition__drag-grippy c-grippy c-grippy--vertical-drag"
|
||||
title="Drag to reorder conditions"
|
||||
:class="[{ 'is-enabled': !condition.isDefault }, { 'hide-nice': condition.isDefault }]"
|
||||
:draggable="!condition.isDefault"
|
||||
@dragstart="dragStart"
|
||||
@dragend="dragEnd"
|
||||
></span>
|
||||
|
||||
<span class="c-cdef__label">Output</span>
|
||||
<span class="c-cdef__controls">
|
||||
<span class="c-cdef__control">
|
||||
<select v-model="selectedOutputSelection"
|
||||
@change="setOutputValue"
|
||||
>
|
||||
<option v-for="option in outputOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ initCap(option) }}
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="c-cdef__control">
|
||||
<input v-if="selectedOutputSelection === outputOptions[2]"
|
||||
v-model="condition.configuration.output"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
@blur="persist"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
<span class="c-condition__disclosure c-disclosure-triangle c-tree__item__view-control is-enabled"
|
||||
:class="{ 'c-disclosure-triangle--expanded': expanded }"
|
||||
@click="expanded = !expanded"
|
||||
></span>
|
||||
|
||||
<div v-if="!condition.isDefault"
|
||||
class="c-cdef__match-and-criteria"
|
||||
<span class="c-condition__name">{{ condition.configuration.name }}</span>
|
||||
<span class="c-condition__summary">
|
||||
<template v-if="!canEvaluateCriteria">
|
||||
Define criteria
|
||||
</template>
|
||||
<span v-else>
|
||||
<condition-description :show-label="false"
|
||||
:condition="condition"
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="c-condition__buttons">
|
||||
<button v-if="!condition.isDefault"
|
||||
class="c-click-icon c-condition__duplicate-button icon-duplicate"
|
||||
title="Duplicate this condition"
|
||||
@click="cloneCondition"
|
||||
></button>
|
||||
|
||||
<button v-if="!condition.isDefault"
|
||||
class="c-click-icon c-condition__delete-button icon-trash"
|
||||
title="Delete this condition"
|
||||
@click="removeCondition"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="expanded"
|
||||
class="c-condition__definition c-cdef"
|
||||
>
|
||||
<span class="c-cdef__separator c-row-separator"></span>
|
||||
<span class="c-cdef__label">Match</span>
|
||||
<span class="c-cdef__label">Condition Name</span>
|
||||
<span class="c-cdef__controls">
|
||||
<select v-model="condition.configuration.trigger"
|
||||
@change="persist"
|
||||
<input v-model="condition.configuration.name"
|
||||
class="t-condition-input__name"
|
||||
type="text"
|
||||
@change="persist"
|
||||
>
|
||||
<option v-for="option in triggers"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
> {{ option.label }}</option>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<template v-if="telemetry.length || condition.configuration.criteria.length">
|
||||
<div v-for="(criterion, index) in condition.configuration.criteria"
|
||||
:key="criterion.id"
|
||||
class="c-cdef__criteria"
|
||||
>
|
||||
<Criterion :telemetry="telemetry"
|
||||
:criterion="criterion"
|
||||
:index="index"
|
||||
:trigger="condition.configuration.trigger"
|
||||
:is-default="condition.configuration.criteria.length === 1"
|
||||
@persist="persist"
|
||||
/>
|
||||
<div class="c-cdef__criteria__buttons">
|
||||
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
|
||||
title="Duplicate this criteria"
|
||||
@click="cloneCriterion(index)"
|
||||
></button>
|
||||
<button v-if="!(condition.configuration.criteria.length === 1)"
|
||||
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
|
||||
title="Delete this criteria"
|
||||
@click="removeCriterion(index)"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="c-cdef__separator c-row-separator"></div>
|
||||
<div class="c-cdef__controls"
|
||||
:disabled="!telemetry.length"
|
||||
<span class="c-cdef__label">Output</span>
|
||||
<span class="c-cdef__controls">
|
||||
<span class="c-cdef__control">
|
||||
<select v-model="selectedOutputSelection"
|
||||
@change="setOutputValue"
|
||||
>
|
||||
<option v-for="option in outputOptions"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ initCap(option) }}
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
<span class="c-cdef__control">
|
||||
<input v-if="selectedOutputSelection === outputOptions[2]"
|
||||
v-model="condition.configuration.output"
|
||||
class="t-condition-name-input"
|
||||
type="text"
|
||||
@change="persist"
|
||||
>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div v-if="!condition.isDefault"
|
||||
class="c-cdef__match-and-criteria"
|
||||
>
|
||||
<button
|
||||
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
|
||||
@click="addCriteria"
|
||||
<span class="c-cdef__separator c-row-separator"></span>
|
||||
<span class="c-cdef__label">Match</span>
|
||||
<span class="c-cdef__controls">
|
||||
<select v-model="condition.configuration.trigger"
|
||||
@change="persist"
|
||||
>
|
||||
<option v-for="option in triggers"
|
||||
:key="option.value"
|
||||
:value="option.value"
|
||||
> {{ option.label }}</option>
|
||||
</select>
|
||||
</span>
|
||||
|
||||
<template v-if="telemetry.length || condition.configuration.criteria.length">
|
||||
<div v-for="(criterion, index) in condition.configuration.criteria"
|
||||
:key="criterion.id"
|
||||
class="c-cdef__criteria"
|
||||
>
|
||||
<Criterion :telemetry="telemetry"
|
||||
:criterion="criterion"
|
||||
:index="index"
|
||||
:trigger="condition.configuration.trigger"
|
||||
:is-default="condition.configuration.criteria.length === 1"
|
||||
@persist="persist"
|
||||
/>
|
||||
<div class="c-cdef__criteria__buttons">
|
||||
<button class="c-click-icon c-cdef__criteria-duplicate-button icon-duplicate"
|
||||
title="Duplicate this criteria"
|
||||
@click="cloneCriterion(index)"
|
||||
></button>
|
||||
<button v-if="!(condition.configuration.criteria.length === 1)"
|
||||
class="c-click-icon c-cdef__criteria-duplicate-button icon-trash"
|
||||
title="Delete this criteria"
|
||||
@click="removeCriterion(index)"
|
||||
></button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="c-cdef__separator c-row-separator"></div>
|
||||
<div class="c-cdef__controls"
|
||||
:disabled="!telemetry.length"
|
||||
>
|
||||
<span class="c-button__label">Add Criteria</span>
|
||||
</button>
|
||||
<button
|
||||
class="c-cdef__add-criteria-button c-button c-button--labeled icon-plus"
|
||||
@click="addCriteria"
|
||||
>
|
||||
<span class="c-button__label">Add Criteria</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="c-condition c-condition--browse"
|
||||
>
|
||||
<!-- Browse view -->
|
||||
<div class="c-condition__header">
|
||||
<span class="c-condition__name">
|
||||
{{ condition.configuration.name }}
|
||||
</span>
|
||||
<span class="c-condition__output">
|
||||
Output: {{ condition.configuration.output }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="c-condition__summary">
|
||||
<condition-description :show-label="false"
|
||||
:condition="condition"
|
||||
/>
|
||||
<div v-else
|
||||
class="c-condition c-condition--browse"
|
||||
>
|
||||
<!-- Browse view -->
|
||||
<div class="c-condition__header">
|
||||
<span class="c-condition__name">
|
||||
{{ condition.configuration.name }}
|
||||
</span>
|
||||
<span class="c-condition__output">
|
||||
Output: {{ condition.configuration.output }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="c-condition__summary">
|
||||
<condition-description :show-label="false"
|
||||
:condition="condition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -207,6 +215,14 @@ export default {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => []
|
||||
},
|
||||
isDragging: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
moveIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
},
|
||||
data() {
|
||||
@ -217,8 +233,8 @@ export default {
|
||||
selectedOutputSelection: '',
|
||||
outputOptions: ['false', 'true', 'string'],
|
||||
criterionIndex: 0,
|
||||
selectedTelemetryName: '',
|
||||
selectedFieldName: ''
|
||||
draggingOver: false,
|
||||
isDefault: this.condition.isDefault
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -286,11 +302,39 @@ export default {
|
||||
dragStart(e) {
|
||||
e.dataTransfer.setData('dragging', e.target); // required for FF to initiate drag
|
||||
e.dataTransfer.effectAllowed = "copyMove";
|
||||
e.dataTransfer.setDragImage(e.target.closest('.js-condition-drag-wrapper'), 0, 0);
|
||||
e.dataTransfer.setDragImage(e.target.closest('.c-condition-h'), 0, 0);
|
||||
this.$emit('setMoveIndex', this.conditionIndex);
|
||||
},
|
||||
dragStop(e) {
|
||||
e.dataTransfer.clearData();
|
||||
dragEnd(event) {
|
||||
this.dragStarted = false;
|
||||
event.dataTransfer.clearData();
|
||||
this.$emit('dragComplete');
|
||||
},
|
||||
dropCondition(event, targetIndex) {
|
||||
if (!this.isDragging) { return }
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
|
||||
if (this.isValidTarget(targetIndex)) {
|
||||
this.dragElement = undefined;
|
||||
this.draggingOver = false;
|
||||
this.$emit('dropCondition', targetIndex);
|
||||
}
|
||||
},
|
||||
dragEnter(event, targetIndex) {
|
||||
if (!this.isDragging) { return }
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
|
||||
if (this.isValidTarget(targetIndex)) {
|
||||
this.dragElement = event.target.parentElement;
|
||||
this.draggingOver = true;
|
||||
}
|
||||
},
|
||||
dragLeave(event) {
|
||||
if (event.target.parentElement === this.dragElement) {
|
||||
this.draggingOver = false;
|
||||
this.dragElement = undefined;
|
||||
}
|
||||
},
|
||||
isValidTarget(targetIndex) {
|
||||
return this.moveIndex !== targetIndex;
|
||||
},
|
||||
destroy() {
|
||||
},
|
||||
|
||||
@ -52,28 +52,24 @@
|
||||
<span class="c-cs-button__label">Add Condition</span>
|
||||
</button>
|
||||
|
||||
<div class="c-cs__conditions-h">
|
||||
<div v-for="(condition, index) in conditionCollection"
|
||||
:key="condition.id"
|
||||
class="c-condition-h"
|
||||
>
|
||||
<div v-if="isEditing"
|
||||
class="c-c__drag-ghost"
|
||||
@drop.prevent="dropCondition"
|
||||
@dragenter="dragEnter"
|
||||
@dragleave="dragLeave"
|
||||
@dragover.prevent
|
||||
></div>
|
||||
<Condition :condition="condition"
|
||||
:condition-index="index"
|
||||
:telemetry="telemetryObjs"
|
||||
:is-editing="isEditing"
|
||||
@updateCondition="updateCondition"
|
||||
@removeCondition="removeCondition"
|
||||
@cloneCondition="cloneCondition"
|
||||
@setMoveIndex="setMoveIndex"
|
||||
/>
|
||||
</div>
|
||||
<div class="c-cs__conditions-h"
|
||||
:class="{ 'is-active-dragging': isDragging }"
|
||||
>
|
||||
<Condition v-for="(condition, index) in conditionCollection"
|
||||
:key="condition.id"
|
||||
:condition="condition"
|
||||
:condition-index="index"
|
||||
:telemetry="telemetryObjs"
|
||||
:is-editing="isEditing"
|
||||
:move-index="moveIndex"
|
||||
:is-dragging="isDragging"
|
||||
@updateCondition="updateCondition"
|
||||
@removeCondition="removeCondition"
|
||||
@cloneCondition="cloneCondition"
|
||||
@setMoveIndex="setMoveIndex"
|
||||
@dragComplete="dragComplete"
|
||||
@dropCondition="dropCondition"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -108,9 +104,10 @@ export default {
|
||||
conditionResults: {},
|
||||
conditions: [],
|
||||
telemetryObjs: [],
|
||||
moveIndex: Number,
|
||||
moveIndex: undefined,
|
||||
isDragging: false,
|
||||
defaultOutput: undefined
|
||||
defaultOutput: undefined,
|
||||
dragCounter: 0
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -165,9 +162,7 @@ export default {
|
||||
this.moveIndex = index;
|
||||
this.isDragging = true;
|
||||
},
|
||||
dropCondition(e) {
|
||||
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
|
||||
dropCondition(targetIndex) {
|
||||
const oldIndexArr = Object.keys(this.conditionCollection);
|
||||
const move = function (arr, old_index, new_index) {
|
||||
while (old_index < 0) {
|
||||
@ -193,20 +188,10 @@ export default {
|
||||
}
|
||||
|
||||
this.reorder(reorderPlan);
|
||||
|
||||
e.target.classList.remove("dragging");
|
||||
},
|
||||
dragComplete() {
|
||||
this.isDragging = false;
|
||||
},
|
||||
dragEnter(e) {
|
||||
if (!this.isDragging) { return }
|
||||
let targetIndex = Array.from(document.querySelectorAll('.c-c__drag-ghost')).indexOf(e.target);
|
||||
if (targetIndex > this.moveIndex) { targetIndex-- } // for 'downward' move
|
||||
if (this.moveIndex === targetIndex) { return }
|
||||
e.target.classList.add("dragging");
|
||||
},
|
||||
dragLeave(e) {
|
||||
e.target.classList.remove("dragging");
|
||||
},
|
||||
addTelemetryObject(domainObject) {
|
||||
this.telemetryObjs.push(domainObject);
|
||||
this.$emit('telemetryUpdated', this.telemetryObjs);
|
||||
|
||||
@ -36,7 +36,7 @@
|
||||
<div v-if="expanded"
|
||||
class="c-cs__content"
|
||||
>
|
||||
<div class="c-cdef__controls"
|
||||
<div class="c-cs__test-data__controls c-cdef__controls"
|
||||
:disabled="!telemetry.length"
|
||||
>
|
||||
<label class="c-toggle-switch">
|
||||
|
||||
@ -19,6 +19,33 @@
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
/***************************** DRAGGING */
|
||||
.is-active-dragging {
|
||||
.c-condition-h__drop-target {
|
||||
height: 3px;
|
||||
margin-bottom: $interiorMarginSm;
|
||||
}
|
||||
}
|
||||
|
||||
.c-condition-h {
|
||||
&__drop-target {
|
||||
border-radius: $controlCr;
|
||||
height: 0;
|
||||
min-height: 0;
|
||||
transition: background-color, height;
|
||||
transition-duration: 150ms;
|
||||
}
|
||||
|
||||
&.is-drag-target {
|
||||
.c-condition > * {
|
||||
pointer-events: none; // Keeps the JS drop handler from being intercepted by internal elements
|
||||
}
|
||||
|
||||
.c-condition-h__drop-target {
|
||||
background-color: rgba($colorKey, 0.7);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs {
|
||||
display: flex;
|
||||
@ -261,6 +288,12 @@
|
||||
}
|
||||
|
||||
/***************************** TEST DATA */
|
||||
.c-cs__test-data {
|
||||
&__controls {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.c-cs-tests {
|
||||
flex: 0 1 auto;
|
||||
overflow: auto;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user