mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
Merge pull request #1107 from nasa/api-type-forms
[API] Handle forms with a "properties" region
This commit is contained in:
commit
c95d9c7956
@ -31,10 +31,12 @@
|
||||
<script type="text/javascript">
|
||||
require(['main'], function (mct) {
|
||||
require([
|
||||
'./tutorials/todo/todo',
|
||||
'./example/imagery/bundle',
|
||||
'./example/eventGenerator/bundle',
|
||||
'./example/generator/bundle',
|
||||
], function () {
|
||||
], function (todo) {
|
||||
todo(mct);
|
||||
mct.run();
|
||||
})
|
||||
});
|
||||
|
25
src/MCT.js
25
src/MCT.js
@ -4,7 +4,6 @@ define([
|
||||
'uuid',
|
||||
'./api/api',
|
||||
'text!./adapter/templates/edit-object-replacement.html',
|
||||
'./ui/Dialog',
|
||||
'./Selection',
|
||||
'./api/objects/object-utils'
|
||||
], function (
|
||||
@ -13,13 +12,21 @@ define([
|
||||
uuid,
|
||||
api,
|
||||
editObjectTemplate,
|
||||
Dialog,
|
||||
Selection,
|
||||
objectUtils
|
||||
) {
|
||||
function MCT() {
|
||||
EventEmitter.call(this);
|
||||
this.legacyBundle = { extensions: {} };
|
||||
this.legacyBundle = { extensions: {
|
||||
services: [
|
||||
{
|
||||
key: "mct",
|
||||
implementation: function () {
|
||||
return this;
|
||||
}.bind(this)
|
||||
}
|
||||
]
|
||||
} };
|
||||
|
||||
this.selection = new Selection();
|
||||
this.on('navigation', this.selection.clear.bind(this.selection));
|
||||
@ -94,13 +101,6 @@ define([
|
||||
region: region,
|
||||
key: viewKey
|
||||
});
|
||||
|
||||
this.legacyExtension('services', {
|
||||
key: 'PublicAPI',
|
||||
implementation: function () {
|
||||
return this;
|
||||
}.bind(this)
|
||||
});
|
||||
};
|
||||
|
||||
MCT.prototype.type = function (key, type) {
|
||||
@ -117,10 +117,6 @@ define([
|
||||
});
|
||||
};
|
||||
|
||||
MCT.prototype.dialog = function (view, title) {
|
||||
return new Dialog(view, title).show();
|
||||
};
|
||||
|
||||
MCT.prototype.start = function () {
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['navigationService'],
|
||||
@ -147,6 +143,7 @@ define([
|
||||
|
||||
MCT.prototype.regions = {
|
||||
main: "MAIN",
|
||||
properties: "PROPERTIES",
|
||||
toolbar: "TOOLBAR"
|
||||
};
|
||||
|
||||
|
44
src/adapter/actions/ActionDialogDecorator.js
Normal file
44
src/adapter/actions/ActionDialogDecorator.js
Normal file
@ -0,0 +1,44 @@
|
||||
define([
|
||||
'../../api/objects/object-utils'
|
||||
], function (objectUtils) {
|
||||
function ActionDialogDecorator(mct, newViews, actionService) {
|
||||
this.actionService = actionService;
|
||||
this.mct = mct;
|
||||
this.definitions = newViews.filter(function (newView) {
|
||||
return newView.region === mct.regions.properties;
|
||||
}).map(function (newView) {
|
||||
return newView.factory;
|
||||
});
|
||||
}
|
||||
|
||||
ActionDialogDecorator.prototype.getActions = function (context) {
|
||||
var mct = this.mct;
|
||||
var definitions = this.definitions;
|
||||
|
||||
return this.actionService.getActions(context).map(function (action) {
|
||||
if (action.dialogService) {
|
||||
var domainObject = objectUtils.toNewFormat(
|
||||
context.domainObject.getModel(),
|
||||
objectUtils.parseKeyString(context.domainObject.getId())
|
||||
);
|
||||
|
||||
definitions = definitions.filter(function (definition) {
|
||||
return definition.canView(domainObject);
|
||||
});
|
||||
|
||||
if (definitions.length > 0) {
|
||||
action.dialogService = Object.create(action.dialogService);
|
||||
action.dialogService.getUserInput = function (form, value) {
|
||||
return new mct.Dialog(
|
||||
definitions[0].view(context.domainObject),
|
||||
form.title
|
||||
).show();
|
||||
};
|
||||
}
|
||||
}
|
||||
return action;
|
||||
});
|
||||
};
|
||||
|
||||
return ActionDialogDecorator;
|
||||
});
|
@ -1,10 +1,12 @@
|
||||
define([
|
||||
'legacyRegistry',
|
||||
'./actions/ActionDialogDecorator',
|
||||
'./directives/MCTView',
|
||||
'./services/Instantiate',
|
||||
'./capabilities/APICapabilityDecorator'
|
||||
], function (
|
||||
legacyRegistry,
|
||||
ActionDialogDecorator,
|
||||
MCTView,
|
||||
Instantiate,
|
||||
APICapabilityDecorator
|
||||
@ -17,7 +19,7 @@ define([
|
||||
implementation: MCTView,
|
||||
depends: [
|
||||
"newViews[]",
|
||||
"PublicAPI"
|
||||
"mct"
|
||||
]
|
||||
}
|
||||
],
|
||||
@ -41,6 +43,12 @@ define([
|
||||
depends: [
|
||||
"$injector"
|
||||
]
|
||||
},
|
||||
{
|
||||
type: "decorator",
|
||||
provides: "actionService",
|
||||
implementation: ActionDialogDecorator,
|
||||
depends: [ "mct", "newViews[]" ]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -3,19 +3,22 @@ define([
|
||||
'./TimeConductor',
|
||||
'./View',
|
||||
'./objects/ObjectAPI',
|
||||
'./composition/CompositionAPI'
|
||||
'./composition/CompositionAPI',
|
||||
'./ui/Dialog'
|
||||
], function (
|
||||
Type,
|
||||
TimeConductor,
|
||||
View,
|
||||
ObjectAPI,
|
||||
CompositionAPI
|
||||
CompositionAPI,
|
||||
Dialog
|
||||
) {
|
||||
return {
|
||||
Type: Type,
|
||||
TimeConductor: new TimeConductor(),
|
||||
View: View,
|
||||
Objects: ObjectAPI,
|
||||
Composition: CompositionAPI
|
||||
Composition: CompositionAPI,
|
||||
Dialog: Dialog
|
||||
};
|
||||
});
|
||||
|
@ -2,9 +2,15 @@ define(['text!./dialog.html', 'zepto'], function (dialogTemplate, $) {
|
||||
function Dialog(view, title) {
|
||||
this.view = view;
|
||||
this.title = title;
|
||||
this.showing = false;
|
||||
this.enabledState = true;
|
||||
}
|
||||
|
||||
Dialog.prototype.show = function () {
|
||||
if (this.showing) {
|
||||
throw new Error("Dialog already showing.");
|
||||
}
|
||||
|
||||
var $body = $('body');
|
||||
var $dialog = $(dialogTemplate);
|
||||
var $contents = $dialog.find('.contents .editor');
|
||||
@ -13,31 +19,45 @@ define(['text!./dialog.html', 'zepto'], function (dialogTemplate, $) {
|
||||
var $ok = $dialog.find('.ok');
|
||||
var $cancel = $dialog.find('.cancel');
|
||||
|
||||
var view = this.view;
|
||||
|
||||
function dismiss() {
|
||||
$dialog.remove();
|
||||
view.destroy();
|
||||
}
|
||||
|
||||
if (this.title) {
|
||||
$dialog.find('.title').text(this.title);
|
||||
}
|
||||
|
||||
$body.append($dialog);
|
||||
this.view.show($contents[0]);
|
||||
this.$dialog = $dialog;
|
||||
this.$ok = $ok;
|
||||
this.showing = true;
|
||||
|
||||
[$ok, $cancel, $close].forEach(function ($button) {
|
||||
$button.on('click', this.hide.bind(this));
|
||||
}.bind(this));
|
||||
|
||||
return new Promise(function (resolve, reject) {
|
||||
$ok.on('click', resolve);
|
||||
$ok.on('click', dismiss);
|
||||
|
||||
$cancel.on('click', reject);
|
||||
$cancel.on('click', dismiss);
|
||||
|
||||
$close.on('click', reject);
|
||||
$close.on('click', dismiss);
|
||||
});
|
||||
};
|
||||
|
||||
Dialog.prototype.hide = function () {
|
||||
if (!this.showing) {
|
||||
return;
|
||||
}
|
||||
this.$dialog.remove();
|
||||
this.view.destroy();
|
||||
this.showing = false;
|
||||
};
|
||||
|
||||
Dialog.prototype.enabled = function (state) {
|
||||
if (state !== undefined) {
|
||||
this.enabledState = state;
|
||||
if (this.showing) {
|
||||
this.$ok.toggleClass('disabled', !state);
|
||||
}
|
||||
}
|
||||
return this.enabledState;
|
||||
};
|
||||
|
||||
return Dialog;
|
||||
});
|
@ -48,22 +48,20 @@ define([
|
||||
var self = this;
|
||||
this.destroy();
|
||||
|
||||
mct.Objects.get(utils.parseKeyString(self.domainObject.getId())).then(function (object) {
|
||||
self.$els = $(todoTemplate);
|
||||
self.$buttons = {
|
||||
all: self.$els.find('.example-todo-button-all'),
|
||||
incomplete: self.$els.find('.example-todo-button-incomplete'),
|
||||
complete: self.$els.find('.example-todo-button-complete')
|
||||
};
|
||||
self.$els = $(todoTemplate);
|
||||
self.$buttons = {
|
||||
all: self.$els.find('.example-todo-button-all'),
|
||||
incomplete: self.$els.find('.example-todo-button-incomplete'),
|
||||
complete: self.$els.find('.example-todo-button-complete')
|
||||
};
|
||||
|
||||
$(container).empty().append(self.$els);
|
||||
$(container).empty().append(self.$els);
|
||||
|
||||
|
||||
self.initialize();
|
||||
self.objectChanged(object);
|
||||
self.initialize();
|
||||
self.objectChanged(this.domainObject);
|
||||
|
||||
mct.selection.on('change', self.render);
|
||||
});
|
||||
mct.selection.on('change', self.render);
|
||||
};
|
||||
|
||||
TodoView.prototype.destroy = function () {
|
||||
@ -148,47 +146,44 @@ define([
|
||||
var self = this;
|
||||
this.destroy();
|
||||
|
||||
mct.Objects.get(utils.parseKeyString(this.domainObject.getId())).then(function (wrappedObject){
|
||||
self.mutableObject = mct.Objects.getMutable(this.domainObject);
|
||||
|
||||
self.mutableObject = mct.Objects.getMutable(wrappedObject);
|
||||
var $els = $(toolbarTemplate);
|
||||
var $add = $els.find('a.example-add');
|
||||
var $remove = $els.find('a.example-remove');
|
||||
|
||||
var $els = $(toolbarTemplate);
|
||||
var $add = $els.find('a.example-add');
|
||||
var $remove = $els.find('a.example-remove');
|
||||
$(container).append($els);
|
||||
|
||||
$(container).append($els);
|
||||
$add.on('click', function () {
|
||||
var $dialog = $(dialogTemplate),
|
||||
view = {
|
||||
show: function (container) {
|
||||
$(container).append($dialog);
|
||||
},
|
||||
destroy: function () {}
|
||||
};
|
||||
|
||||
$add.on('click', function () {
|
||||
var $dialog = $(dialogTemplate),
|
||||
view = {
|
||||
show: function (container) {
|
||||
$(container).append($dialog);
|
||||
},
|
||||
destroy: function () {}
|
||||
};
|
||||
|
||||
mct.dialog(view, "Add a Task").then(function () {
|
||||
var description = $dialog.find('input').val();
|
||||
var tasks = self.mutableObject.get('tasks');
|
||||
tasks.push({ description: description });
|
||||
self.mutableObject.set('tasks', tasks);
|
||||
});
|
||||
new mct.Dialog(view, "Add a Task").show().then(function () {
|
||||
var description = $dialog.find('input').val();
|
||||
var tasks = self.mutableObject.get('tasks');
|
||||
tasks.push({ description: description });
|
||||
self.mutableObject.set('tasks', tasks);
|
||||
});
|
||||
$remove.on('click', function () {
|
||||
var index = mct.selection.selected()[0].index;
|
||||
if (index !== undefined) {
|
||||
var tasks = self.mutableObject.get('tasks').filter(function (t, i) {
|
||||
return i !== index;
|
||||
});
|
||||
self.mutableObject.set("tasks", tasks);
|
||||
self.mutableObject.set("selected", undefined);
|
||||
mct.selection.clear();
|
||||
}
|
||||
});
|
||||
self.$remove = $remove;
|
||||
self.handleSelectionChange();
|
||||
mct.selection.on('change', self.handleSelectionChange);
|
||||
});
|
||||
$remove.on('click', function () {
|
||||
var index = mct.selection.selected()[0].index;
|
||||
if (index !== undefined) {
|
||||
var tasks = self.mutableObject.get('tasks').filter(function (t, i) {
|
||||
return i !== index;
|
||||
});
|
||||
self.mutableObject.set("tasks", tasks);
|
||||
self.mutableObject.set("selected", undefined);
|
||||
mct.selection.clear();
|
||||
}
|
||||
});
|
||||
self.$remove = $remove;
|
||||
self.handleSelectionChange();
|
||||
mct.selection.on('change', self.handleSelectionChange);
|
||||
};
|
||||
|
||||
TodoToolbarView.prototype.handleSelectionChange = function () {
|
||||
|
Loading…
Reference in New Issue
Block a user