Merge remote-tracking branch 'origin/open987' into open-master
This commit is contained in:
bwyu
@@ -88,6 +88,11 @@
|
||||
{
|
||||
"key": "SplitPaneController",
|
||||
"implementation": "controllers/SplitPaneController.js"
|
||||
},
|
||||
{
|
||||
"key": "SelectorController",
|
||||
"implementation": "controllers/SelectorController.js",
|
||||
"depends": [ "objectService", "$scope" ]
|
||||
}
|
||||
],
|
||||
"directives": [
|
||||
@@ -185,6 +190,12 @@
|
||||
"uses": [ "view" ]
|
||||
}
|
||||
],
|
||||
"controls": [
|
||||
{
|
||||
"key": "selector",
|
||||
"templateUrl": "templates/controls/selector.html"
|
||||
}
|
||||
],
|
||||
"licenses": [
|
||||
{
|
||||
"name": "Modernizr",
|
||||
|
||||
@@ -0,0 +1,62 @@
|
||||
<div class='form-control complex channel-selector cols cols-32'
|
||||
ng-controller="SelectorController as selector">
|
||||
<div class='col col-15'>
|
||||
<div class='line field-hints'>Available</div>
|
||||
<!--div id='_form_filter' class='line filter'>
|
||||
<input type='text' class='control filter' name='filter-available' />
|
||||
<a class='icon ui-symbol t-available-trigger'
|
||||
href=''
|
||||
title="Filter is case sensitive">M</a>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
Showing {{shown}} of {{count}} available options.
|
||||
</div -->
|
||||
|
||||
<div class='line treeview checkbox-list' name='available'>
|
||||
<mct-representation key="'tree'"
|
||||
mct-object="selector.root()"
|
||||
ng-model="selector.treeModel">
|
||||
</mct-representation>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col col-2'>
|
||||
<div class='btn-holder valign-mid btns-add-remove'>
|
||||
<a class='btn major'
|
||||
ng-click="selector.select(selector.treeModel.selectedObject)">
|
||||
<span class='ui-symbol'>></span>
|
||||
</a>
|
||||
<a class='btn major'
|
||||
ng-click="selector.deselect(selector.listModel.selectedObject)">
|
||||
<span class='ui-symbol'><</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='col col-15'>
|
||||
<div class='line field-hints'>Selected</div>
|
||||
<!-- div id='_form_filter' class='line filter'>
|
||||
<input type='text' class='control filter' name='filter-selected' />
|
||||
<a class='icon ui-symbol t-selected-trigger'
|
||||
href=''
|
||||
title="Filter is case sensitive">
|
||||
M
|
||||
</a>
|
||||
</div>
|
||||
<div class="line">
|
||||
Showing {{shown}} of {{count}} available options.
|
||||
</div -->
|
||||
|
||||
<div class='line treeview checkbox-list' name='selected'>
|
||||
<ul class="tree">
|
||||
<li ng-repeat="selectedObject in selector.selected()">
|
||||
<mct-representation key="'label'"
|
||||
mct-object="selectedObject"
|
||||
ng-click="selector.listModel.selectedObject = selectedObject"
|
||||
ng-class="{ test: selector.listModel.selectedObject === selectedObject }">
|
||||
</mct-representation>
|
||||
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
135
platform/commonUI/general/src/controllers/SelectorController.js
Normal file
135
platform/commonUI/general/src/controllers/SelectorController.js
Normal file
@@ -0,0 +1,135 @@
|
||||
/*global define*/
|
||||
|
||||
define(
|
||||
[],
|
||||
function () {
|
||||
"use strict";
|
||||
|
||||
var ROOT_ID = "ROOT";
|
||||
|
||||
/**
|
||||
* Controller for the domain object selector control.
|
||||
* @constructor
|
||||
* @param {ObjectService} objectService service from which to
|
||||
* read domain objects
|
||||
* @param $scope Angular scope for this controller
|
||||
*/
|
||||
function SelectorController(objectService, $scope) {
|
||||
var treeModel = {},
|
||||
listModel = {},
|
||||
selectedObjects = [],
|
||||
rootObject,
|
||||
previousSelected;
|
||||
|
||||
// For watch; look at the user's selection in the tree
|
||||
function getTreeSelection() {
|
||||
return treeModel.selectedObject;
|
||||
}
|
||||
|
||||
// Get the value of the field being edited
|
||||
function getField() {
|
||||
return $scope.ngModel[$scope.field] || [];
|
||||
}
|
||||
|
||||
// Get the value of the field being edited
|
||||
function setField(value) {
|
||||
$scope.ngModel[$scope.field] = value;
|
||||
}
|
||||
|
||||
// Store root object for subsequent exposure to template
|
||||
function storeRoot(objects) {
|
||||
rootObject = objects[ROOT_ID];
|
||||
}
|
||||
|
||||
// Check that a selection is of the valid type
|
||||
function validateTreeSelection(selectedObject) {
|
||||
var type = selectedObject &&
|
||||
selectedObject.getCapability('type');
|
||||
|
||||
// Delegate type-checking to the capability...
|
||||
if (!type || !type.instanceOf($scope.structure.type)) {
|
||||
treeModel.selectedObject = previousSelected;
|
||||
}
|
||||
|
||||
// Track current selection to restore it if an invalid
|
||||
// selection is made later.
|
||||
previousSelected = treeModel.selectedObject;
|
||||
}
|
||||
|
||||
// Update the right-hand list of currently-selected objects
|
||||
function updateList(ids) {
|
||||
function updateSelectedObjects(objects) {
|
||||
// Look up from the
|
||||
function getObject(id) { return objects[id]; }
|
||||
selectedObjects = ids.filter(getObject).map(getObject);
|
||||
}
|
||||
|
||||
// Look up objects by id, then populate right-hand list
|
||||
objectService.getObjects(ids).then(updateSelectedObjects);
|
||||
}
|
||||
|
||||
// Reject attempts to select objects of the wrong type
|
||||
$scope.$watch(getTreeSelection, validateTreeSelection);
|
||||
|
||||
// Make sure right-hand list matches underlying model
|
||||
$scope.$watchCollection(getField, updateList);
|
||||
|
||||
// Look up root object, then store it
|
||||
objectService.getObjects([ROOT_ID]).then(storeRoot);
|
||||
|
||||
return {
|
||||
/**
|
||||
* Get the root object to show in the left-hand tree.
|
||||
* @returns {DomainObject} the root object
|
||||
*/
|
||||
root: function () {
|
||||
return rootObject;
|
||||
},
|
||||
/**
|
||||
* Add a domain object to the list of selected objects.
|
||||
* @param {DomainObject} the domain object to select
|
||||
*/
|
||||
select: function (domainObject) {
|
||||
var id = domainObject && domainObject.getId(),
|
||||
list = getField() || [];
|
||||
// Only select if we have a valid id,
|
||||
// and it isn't already selected
|
||||
if (id && list.indexOf(id) === -1) {
|
||||
setField(list.concat([id]));
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Remove a domain object from the list of selected objects.
|
||||
* @param {DomainObject} the domain object to select
|
||||
*/
|
||||
deselect: function (domainObject) {
|
||||
var id = domainObject && domainObject.getId(),
|
||||
list = getField() || [];
|
||||
// Only change if this was a valid id,
|
||||
// for an object which was already selected
|
||||
if (id && list.indexOf(id) !== -1) {
|
||||
// Filter it out of the current field
|
||||
setField(list.filter(function (otherId) {
|
||||
return otherId !== id;
|
||||
}));
|
||||
// Clear the current list selection
|
||||
delete listModel.selectedObject;
|
||||
}
|
||||
},
|
||||
/**
|
||||
* Get the currently-selected domain objects.
|
||||
* @returns {DomainObject[]} the current selection
|
||||
*/
|
||||
selected: function () {
|
||||
return selectedObjects;
|
||||
},
|
||||
// Expose tree/list model for use in template directly
|
||||
treeModel: treeModel,
|
||||
listModel: listModel
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
return SelectorController;
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,163 @@
|
||||
/*global define,Promise,describe,it,expect,beforeEach,waitsFor,jasmine*/
|
||||
|
||||
define(
|
||||
["../../src/controllers/SelectorController"],
|
||||
function (SelectorController) {
|
||||
"use strict";
|
||||
|
||||
describe("The controller for the 'selector' control", function () {
|
||||
var mockObjectService,
|
||||
mockScope,
|
||||
mockDomainObject,
|
||||
mockType,
|
||||
mockDomainObjects,
|
||||
controller;
|
||||
|
||||
function promiseOf(v) {
|
||||
return (v || {}).then ? v : {
|
||||
then: function (callback) {
|
||||
return promiseOf(callback(v));
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function makeMockObject(id) {
|
||||
var mockObject = jasmine.createSpyObj(
|
||||
'object-' + id,
|
||||
[ 'getId' ]
|
||||
);
|
||||
mockObject.getId.andReturn(id);
|
||||
return mockObject;
|
||||
}
|
||||
|
||||
beforeEach(function () {
|
||||
mockObjectService = jasmine.createSpyObj(
|
||||
'objectService',
|
||||
['getObjects']
|
||||
);
|
||||
mockScope = jasmine.createSpyObj(
|
||||
'$scope',
|
||||
['$watch', '$watchCollection']
|
||||
);
|
||||
mockDomainObject = jasmine.createSpyObj(
|
||||
'domainObject',
|
||||
[ 'getCapability', 'hasCapability' ]
|
||||
);
|
||||
mockType = jasmine.createSpyObj(
|
||||
'type',
|
||||
[ 'instanceOf' ]
|
||||
);
|
||||
mockDomainObjects = {};
|
||||
|
||||
[ "ROOT", "abc", "def", "xyz" ].forEach(function (id) {
|
||||
mockDomainObjects[id] = makeMockObject(id);
|
||||
});
|
||||
|
||||
mockDomainObject.getCapability.andReturn(mockType);
|
||||
mockObjectService.getObjects.andReturn(promiseOf(mockDomainObjects));
|
||||
mockScope.field = "testField";
|
||||
mockScope.ngModel = {};
|
||||
|
||||
controller = new SelectorController(
|
||||
mockObjectService,
|
||||
mockScope
|
||||
);
|
||||
});
|
||||
|
||||
it("loads the root object", function () {
|
||||
expect(mockObjectService.getObjects)
|
||||
.toHaveBeenCalledWith(["ROOT"]);
|
||||
});
|
||||
|
||||
it("watches for changes in selection in left-hand tree", function () {
|
||||
var testObject = { a: 123, b: 456 };
|
||||
// This test is sensitive to ordering of watch calls
|
||||
expect(mockScope.$watch.calls.length).toEqual(1);
|
||||
// Make sure we're watching the correct object
|
||||
controller.treeModel.selectedObject = testObject;
|
||||
expect(mockScope.$watch.calls[0].args[0]()).toBe(testObject);
|
||||
});
|
||||
|
||||
it("watches for changes in controlled property", function () {
|
||||
var testValue = [ "a", "b", 1, 2 ];
|
||||
// This test is sensitive to ordering of watch calls
|
||||
expect(mockScope.$watchCollection.calls.length).toEqual(1);
|
||||
// Make sure we're watching the correct object
|
||||
mockScope.ngModel = { testField: testValue };
|
||||
expect(mockScope.$watchCollection.calls[0].args[0]()).toBe(testValue);
|
||||
});
|
||||
|
||||
it("rejects selection of incorrect types", function () {
|
||||
mockScope.structure = { type: "someType" };
|
||||
mockType.instanceOf.andReturn(false);
|
||||
controller.treeModel.selectedObject = mockDomainObject;
|
||||
// Fire the watch
|
||||
mockScope.$watch.calls[0].args[1](mockDomainObject);
|
||||
// Should have cleared the selection
|
||||
expect(controller.treeModel.selectedObject).toBeUndefined();
|
||||
// Verify interaction (that instanceOf got a useful argument)
|
||||
expect(mockType.instanceOf).toHaveBeenCalledWith("someType");
|
||||
});
|
||||
|
||||
it("permits selection of matching types", function () {
|
||||
mockScope.structure = { type: "someType" };
|
||||
mockType.instanceOf.andReturn(true);
|
||||
controller.treeModel.selectedObject = mockDomainObject;
|
||||
// Fire the watch
|
||||
mockScope.$watch.calls[0].args[1](mockDomainObject);
|
||||
// Should have preserved the selection
|
||||
expect(controller.treeModel.selectedObject).toEqual(mockDomainObject);
|
||||
// Verify interaction (that instanceOf got a useful argument)
|
||||
expect(mockType.instanceOf).toHaveBeenCalledWith("someType");
|
||||
});
|
||||
|
||||
it("loads objects when the underlying list changes", function () {
|
||||
var testIds = [ "abc", "def", "xyz" ];
|
||||
// This test is sensitive to ordering of watch calls
|
||||
expect(mockScope.$watchCollection.calls.length).toEqual(1);
|
||||
// Make sure we're watching the correct object
|
||||
mockScope.ngModel = { testField: testIds };
|
||||
// Fire the watch
|
||||
mockScope.$watchCollection.calls[0].args[1](testIds);
|
||||
// Should have loaded the corresponding objects
|
||||
expect(mockObjectService.getObjects).toHaveBeenCalledWith(testIds);
|
||||
});
|
||||
|
||||
it("exposes the root object to populate the left-hand tree", function () {
|
||||
expect(controller.root()).toEqual(mockDomainObjects.ROOT);
|
||||
});
|
||||
|
||||
it("adds objects to the underlying model", function () {
|
||||
expect(mockScope.ngModel.testField).toBeUndefined();
|
||||
controller.select(mockDomainObjects.def);
|
||||
expect(mockScope.ngModel.testField).toEqual(["def"]);
|
||||
controller.select(mockDomainObjects.abc);
|
||||
expect(mockScope.ngModel.testField).toEqual(["def", "abc"]);
|
||||
});
|
||||
|
||||
it("removes objects to the underlying model", function () {
|
||||
controller.select(mockDomainObjects.def);
|
||||
controller.select(mockDomainObjects.abc);
|
||||
expect(mockScope.ngModel.testField).toEqual(["def", "abc"]);
|
||||
controller.deselect(mockDomainObjects.def);
|
||||
expect(mockScope.ngModel.testField).toEqual(["abc"]);
|
||||
});
|
||||
|
||||
it("provides a list of currently-selected objects", function () {
|
||||
// Verify precondition
|
||||
expect(controller.selected()).toEqual([]);
|
||||
// Select some objects
|
||||
controller.select(mockDomainObjects.def);
|
||||
controller.select(mockDomainObjects.abc);
|
||||
// Fire the watch for the id changes...
|
||||
mockScope.$watchCollection.calls[0].args[1](
|
||||
mockScope.$watchCollection.calls[0].args[0]()
|
||||
);
|
||||
// Should have loaded and exposed those objects
|
||||
expect(controller.selected()).toEqual(
|
||||
[mockDomainObjects.def, mockDomainObjects.abc]
|
||||
);
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
@@ -4,6 +4,7 @@
|
||||
"controllers/ClickAwayController",
|
||||
"controllers/ContextMenuController",
|
||||
"controllers/GetterSetterController",
|
||||
"controllers/SelectorController",
|
||||
"controllers/SplitPaneController",
|
||||
"controllers/ToggleController",
|
||||
"controllers/TreeNodeController",
|
||||
|
||||
Reference in New Issue
Block a user