ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-31 16:36:13 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

Added editing support to the View API (#2279)

Browse Source 
* Added edit to view API

* Fixed listener deregistration bug
This commit is contained in:
Andrew Henry 2019-02-13 19:26:26 -08:00 committed by Pegah Sarram
parent d0ab59f9da
commit 853764d863
14 changed files with 123 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/Editor.js
View File

@ -39,6 +39,7 @@ export default class Editor extends EventEmitter {
* Initiate an editing session. This will start a transaction during
* which any persist operations will be deferred until either save()
* or finish() are called.
* @private
*/
edit() {
if (this.editing === true) {
@ -59,6 +60,8 @@ export default class Editor extends EventEmitter {
/**
* Save any unsaved changes from this editing session. This will
* end the current transaction.
*
* @private
*/
save() {
return this.getTransactionService().commit().then((result)=>{
@ -72,6 +75,8 @@ export default class Editor extends EventEmitter {
/**
* End the currently active transaction and discard unsaved changes.
*
* @private
*/
cancel() {
this.getTransactionService().cancel();

10
src/plugins/flexibleLayout/components/container.vue
View File

@ -47,7 +47,8 @@
:key="frame.id"
:frame="frame"
:index="i"
:containerIndex="index">
:containerIndex="index"
:isEditing="isEditing">
</frame-component>
<drop-hint
@ -65,7 +66,8 @@
:orientation="rowsLayout ? 'horizontal' : 'vertical'"
@init-move="startFrameResizing"
@move="frameResizing"
@end-move="endFrameResizing">
@end-move="endFrameResizing"
:isEditing="isEditing">
</resize-handle>
</template>
</div>
@ -77,14 +79,12 @@ import FrameComponent from './frame.vue';
import Frame from '../utils/frame';
import ResizeHandle from './resizeHandle.vue';
import DropHint from './dropHint.vue';
import isEditingMixin from '../mixins/isEditing';
const MIN_FRAME_SIZE = 5;
export default {
inject:['openmct'],
props: ['container', 'index', 'rowsLayout'],
mixins: [isEditingMixin],
props: ['container', 'index', 'rowsLayout', 'isEditing'],
components: {
FrameComponent,
ResizeHandle,

7
src/plugins/flexibleLayout/components/flexibleLayout.vue
View File

@ -54,6 +54,7 @@
:index="index"
:container="container"
:rowsLayout="rowsLayout"
:isEditing="isEditing"
@move-frame="moveFrame"
@new-frame="setFrameLocation"
@persist="persist">
@ -64,6 +65,7 @@
:key="index"
:index="index"
:orientation="rowsLayout ? 'vertical' : 'horizontal'"
:isEditing="isEditing"
@init-move="startContainerResizing"
@move="containerResizing"
@end-move="endContainerResizing">
@ -420,7 +422,6 @@ import Container from '../utils/container';
import Frame from '../utils/frame';
import ResizeHandle from './resizeHandle.vue';
import DropHint from './dropHint.vue';
import isEditingMixin from '../mixins/isEditing';
const MIN_CONTAINER_SIZE = 5;
@ -465,7 +466,6 @@ function sizeToFill(items) {
export default {
inject: ['openmct', 'layoutObject'],
mixins: [isEditingMixin],
components: {
ContainerComponent,
ResizeHandle,
@ -477,6 +477,9 @@ export default {
newFrameLocation: []
}
},
props: {
isEditing: Boolean
},
computed: {
layoutDirectionStr() {
if (this.rowsLayout) {

4
src/plugins/flexibleLayout/components/frame.vue
View File

@ -51,12 +51,10 @@
<script>
import ResizeHandle from './resizeHandle.vue';
import ObjectFrame from '../../../ui/components/ObjectFrame.vue';
import isEditingMixin from '../mixins/isEditing';
export default {
inject: ['openmct'],
props: ['frame', 'index', 'containerIndex'],
mixins: [isEditingMixin],
props: ['frame', 'index', 'containerIndex', 'isEditing'],
data() {
return {
domainObject: undefined,

5
src/plugins/flexibleLayout/components/resizeHandle.vue
View File

@ -29,11 +29,8 @@
</template>
<script>
import isEditingMixin from '../mixins/isEditing';
export default {
props: ['orientation', 'index'],
mixins: [isEditingMixin],
props: ['orientation', 'index', 'isEditing'],
data() {
return {
initialPos: 0,

10
src/plugins/flexibleLayout/flexibleLayoutViewProvider.js
View File

@ -42,8 +42,13 @@ define([
let component;
return {
show: function (element) {
show: function (element, isEditing) {
component = new Vue({
data() {
return {
isEditing: isEditing
}
},
components: {
FlexibleLayoutComponent: FlexibleLayoutComponent.default
},
@ -64,6 +69,9 @@ define([
type: 'flexible-layout'
};
},
onEditModeChange: function (isEditing) {
component.isEditing = isEditing;
},
destroy: function (element) {
component.$destroy();
component = undefined;

19
src/plugins/flexibleLayout/mixins/isEditing.js
View File

@ -1,19 +0,0 @@
export default {
inject: ['openmct'],
data() {
return {
isEditing: this.openmct.editor.isEditing()
};
},
mounted() {
this.openmct.editor.on('isEditing', this.toggleEditing);
},
destroyed() {
this.openmct.editor.off('isEditing', this.toggleEditing);
},
methods: {
toggleEditing(value) {
this.isEditing = value;
}
}
};

14
src/plugins/summaryWidget/src/views/SummaryWidgetViewProvider.js
View File

@ -24,16 +24,10 @@ define([
return domainObject.type === 'summary-widget';
},
view: function (domainObject) {
var statusService = openmct.$injector.get('statusService');
var objectId = objectUtils.makeKeyString(domainObject.identifier);
var statuses = statusService.listStatuses(objectId);
var isEditing = statuses.indexOf('editing') !== -1;
if (isEditing) {
return new SummaryWidgetEditView(domainObject, openmct);
} else {
return new SummaryWidgetView(domainObject, openmct);
}
return new SummaryWidgetView(domainObject, openmct);
},
edit: function (domainObject) {
return new SummaryWidgetEditView(domainObject, openmct);
},
priority: function (domainObject) {
if (domainObject.type === 'summary-widget') {

12
src/plugins/telemetryTable/TelemetryTableViewProvider.js
View File

@ -47,8 +47,13 @@ define([
let table = new TelemetryTable(domainObject, openmct);
let component;
return {
show: function (element) {
show: function (element, isEditing) {
component = new Vue({
data() {
return {
isEditing: false
}
},
components: {
TableComponent: TableComponent.default,
},
@ -58,9 +63,12 @@ define([
table
},
el: element,
template: '<table-component></table-component>'
template: '<table-component :isEditing="isEditing"></table-component>'
});
},
onEditModeChange(isEditing) {
component.isEditing = isEditing;
},
destroy: function (element) {
component.$destroy();
component = undefined;

17
src/plugins/telemetryTable/components/table-column-header.vue
View File

@ -73,18 +73,14 @@ const MOVE_COLUMN_DT_TYPE = 'movecolumnfromindex';
export default {
inject: ['openmct'],
data() {
return {
isEditing: this.openmct.editor.isEditing()
}
},
props: {
headerKey: String,
headerIndex: Number,
isHeaderTitle: Boolean,
sortOptions: Object,
columnWidth: Number,
hotzone: Boolean
hotzone: Boolean,
isEditing: Boolean
},
computed: {
isSortable() {
@ -167,16 +163,7 @@ export default {
},
sort() {
this.$emit("sort");
},
toggleEditMode(isEditing) {
this.isEditing = isEditing;
}
},
created() {
this.openmct.editor.on('isEditing', this.toggleEditMode);
},
destroyed() {
this.openmct.editor.off('isEditing', this.toggleEditMode);
}
}
</script>

11
src/plugins/telemetryTable/components/table.vue
View File

@ -48,6 +48,7 @@
@resizeColumnEnd="updateConfiguredColumnWidths"
:columnWidth="columnWidths[key]"
:sortOptions="sortOptions"
:isEditing="isEditing"
>{{title}}</table-column-header>
</tr>
<tr class="c-telemetry-table__headers__filter">
@ -61,7 +62,9 @@
@dropTargetActive="dropTargetActive"
@reorderColumn="reorderColumn"
@resizeColumnEnd="updateConfiguredColumnWidths"
:columnWidth="columnWidths[key]">
:columnWidth="columnWidths[key]"
:isEditing="isEditing"
>
<search class="c-table__search"
v-model="filters[key]"
v-on:input="filterChanged(key)"
@ -260,6 +263,12 @@ export default {
search
},
inject: ['table', 'openmct', 'csvExporter'],
props: {
isEditing: {
type: Boolean,
default: false
}
},
data() {
let configuration = this.table.configuration.getConfiguration();

37
src/ui/components/ObjectView.vue
View File

@ -12,6 +12,9 @@ export default {
},
destroyed() {
this.clear();
if (this.releaseEditModeHandler) {
this.releaseEditModeHandler();
}
},
watch: {
view(newView, oldView) {
@ -37,6 +40,11 @@ export default {
if (this.currentView) {
this.currentView.destroy();
this.$el.innerHTML = '';
if (this.releaseEditModeHandler) {
this.releaseEditModeHandler();
delete this.releaseEditModeHandler;
}
}
delete this.viewContainer;
delete this.currentView;
@ -46,6 +54,13 @@ export default {
delete this.removeSelectable;
}
},
invokeEditModeHandler(editMode) {
this.currentView.onEditModeChange(editMode);
},
toggleEditView(editMode) {
this.clear();
this.updateView(true);
},
updateView(immediatelySelect) {
this.clear();
if (!this.currentObject) {
@ -55,14 +70,32 @@ export default {
this.viewContainer.classList.add('c-object-view','u-contents');
this.$el.append(this.viewContainer);
let provider = this.openmct.objectViews.getByProviderKey(this.viewKey);
if (!provider) {
provider = this.openmct.objectViews.get(this.currentObject)[0];
if (!provider) {
return;
}
}
this.currentView = provider.view(this.currentObject);
this.currentView.show(this.viewContainer);
if (provider.edit) {
if (this.openmct.editor.isEditing()) {
this.currentView = provider.edit(this.currentObject);
} else {
this.currentView = provider.view(this.currentObject, false);
}
this.openmct.editor.on('isEditing', this.toggleEditView);
this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.toggleEditView);
} else {
this.currentView = provider.view(this.currentObject, this.openmct.editor.isEditing());
if (this.currentView.onEditModeChange) {
this.openmct.editor.on('isEditing', this.invokeEditModeHandler);
this.releaseEditModeHandler = () => this.openmct.editor.off('isEditing', this.invokeEditModeHandler);
}
}
this.currentView.show(this.viewContainer, this.openmct.editor.isEditing());
if (immediatelySelect) {
this.removeSelectable = openmct.selection.selectable(

2
src/ui/preview/Preview.vue
View File

@ -84,7 +84,7 @@
mounted() {
let viewProvider = this.openmct.objectViews.get(this.domainObject)[0];
this.view = viewProvider.view(this.domainObject);
this.view.show(this.$refs.objectView);
this.view.show(this.$refs.objectView, false);
},
destroy() {
this.view.destroy();

36
src/ui/registries/ViewRegistry.js
View File

@ -120,6 +120,19 @@ define([], function () {
* @memberof module:openmct.View#
*/
/**
* Indicates whether or not the application is in edit mode. This supports
* views that have distinct visual and behavioral elements when the
* navigated object is being edited.
*
* For cases where a completely separate view is desired for editing purposes,
* see {@link openmct.ViewProvider#edit}
*
* @param {boolean} isEditing
* @method show
* @memberof module:openmct.View#
*/
/**
* Release any resources associated with this view.
*
@ -172,7 +185,15 @@ define([], function () {
/**
* An optional function that defines whether or not this view can be used to edit a given object.
* If not provided, will default to `false` and the view will not support editing.
* If not provided, will default to `false` and the view will not support editing. To support editing,
* return true from this function and then -
* * Return a {@link openmct.View} from the `view` function, using the `onEditModeChange` callback to
* add and remove editing elements from the view
* OR
* * Return a {@link openmct.View} from the `view` function defining a read-only view.
* AND
* * Define an {@link openmct.ViewProvider#Edit} function on the view provider that returns an
* editing-specific view.
*
* @method canEdit
* @memberof module:openmct.ViewProvider#
@ -211,6 +232,19 @@ define([], function () {
* @returns {module:openmct.View} a view of this domain object
*/
/**
* Provide an edit-mode specific view of this object.
*
* If optionally specified, this function will be called when the application
* enters edit mode. This will cause the active non-edit mode view and its
* dom element to be destroyed.
*
* @method edit
* @memberof module:openmct.ViewProvider#
* @param {*} object the object to be edit
* @returns {module:openmct.View} an editable view of this domain object
*/
return ViewRegistry;
});