Merge pull request #1107 from nasa/api-type-forms

[API] Handle forms with a "properties" region
This commit is contained in:
Victor Woeltjen 2016-08-25 13:17:26 -07:00 committed by GitHub
commit c95d9c7956
8 changed files with 147 additions and 78 deletions

View File

@ -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();
})
});

View File

@ -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"
};

View 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;
});

View File

@ -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[]" ]
}
]
}

View File

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

View File

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

View File

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