[Edit Mode] Refactor edit concerns out of browse controllers

Fixed jslint errors

Removed commented code and added line breaks
This commit is contained in:
Henry 2016-02-04 17:06:26 -08:00
parent 560897fe81
commit a515ccfb61
21 changed files with 238 additions and 287 deletions

View File

@ -80,7 +80,6 @@ define([
"$scope",
"$route",
"$location",
"$q",
"objectService",
"navigationService",
"urlService"
@ -137,10 +136,6 @@ define([
}
],
"representations": [
{
"key": "view-region",
"templateUrl": "templates/view-object.html"
},
{
"key": "browse-object",
"templateUrl": "templates/browse-object.html",
@ -206,6 +201,10 @@ define([
{
"key": "inspector-region",
"templateUrl": "templates/browse/inspector-region.html"
},
{
"key": "view-region",
"templateUrl": "templates/view-region.html"
}
],
"services": [

View File

@ -71,7 +71,7 @@
<mct-splitter class="splitter-inspect mobile-hide flush-right edge-shdw"></mct-splitter>
<div class="split-pane-component t-inspect pane right mobile-hide">
<mct-representation key="'inspector-region'"
<mct-representation key="'object-inspector'"
mct-object="navigatedObject"
ng-model="treeModel">
</mct-representation>
@ -87,4 +87,3 @@
</div>
<mct-include key="'bottombar'"></mct-include>
</div>

View File

@ -19,15 +19,12 @@
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<!--
A representation that allows the 'View' region of an object view to change
dynamically (eg. between browse and edit modes). Values correspond to a
representation key, and currently defaults to 'browse-object'.
In the case of edit, the EditRepresenter will change this to editable
representation of the object as needed.
-->
<mct-representation mct-object="domainObject"
key="viewRegionTemplate || 'browse-object'"
class="abs holder holder-object">
</mct-representation>
<div ng-controller="RegionController as regionController">
<div ng-repeat="part in regions.view.parts">
<mct-representation
key="part.content.key"
mct-object="domainObject"
ng-model="ngModel">
</mct-representation>
</div>
</div><!--/ PaneController -->

View File

@ -46,7 +46,7 @@ define(
* @memberof platform/commonUI/browse
* @constructor
*/
function BrowseController($scope, $route, $location, $q, objectService, navigationService, urlService) {
function BrowseController($scope, $route, $location, objectService, navigationService, urlService) {
var path = [ROOT_ID].concat(
($route.current.params.ids || DEFAULT_PATH).split("/")
);
@ -174,4 +174,3 @@ define(
return BrowseController;
}
);

View File

@ -81,4 +81,3 @@ define(
return BrowseObjectController;
}
);

View File

@ -23,9 +23,10 @@
define(
[
'./InspectorRegion'
'./InspectorRegion',
'./ViewRegion'
],
function (InspectorRegion) {
function (InspectorRegion, ViewRegion) {
"use strict";
/**
@ -53,6 +54,7 @@ define(
var regions = type.getDefinition().regions || {};
regions.inspector = regions.inspector || new InspectorRegion();
regions.view = regions.view || new ViewRegion();
type.getDefinition().regions = regions;

View File

@ -0,0 +1,73 @@
/*****************************************************************************
* Open MCT Web, Copyright (c) 2014-2015, United States Government
* as represented by the Administrator of the National Aeronautics and Space
* Administration. All rights reserved.
*
* Open MCT Web is licensed under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
* http://www.apache.org/licenses/LICENSE-2.0.
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
* License for the specific language governing permissions and limitations
* under the License.
*
* Open MCT Web includes source code licensed under additional open source
* licenses. See the Open Source Licenses file (LICENSES.md) included with
* this source code distribution or the Licensing information page available
* at runtime from the About dialog for additional information.
*****************************************************************************/
/*global define,window*/
define(
[
'../../regions/src/Region'
],
function (Region) {
"use strict";
/**
* Defines the default View region. Captured in a class to
* allow for modular extension and customization of regions based on
* the typical case.
* @memberOf platform/commonUI/regions
* @constructor
*/
function ViewRegion() {
Region.call(this);
this.buildRegion();
}
ViewRegion.prototype = Object.create(Region.prototype);
ViewRegion.prototype.constructor = Region;
/**
* @private
*/
ViewRegion.prototype.buildRegion = function() {
var browseViewPart = {
name: 'browse-view',
title: 'Browse Object View',
modes: ['browse'],
content: {
key: 'browse-object'
}
},
editViewPart = {
name: 'edit-view',
title: 'Edit Object View',
modes: ['edit'],
content: {
key: 'edit-object'
}
};
this.addPart(browseViewPart);
this.addPart(editViewPart);
};
return ViewRegion;
}
);

View File

@ -57,7 +57,7 @@ define(
NavigationService.prototype.setNavigation = function (value) {
var canNavigate = true;
if (this.navigated !== value) {
canNavigate = (this.callbacks['before'] || [])
canNavigate = (this.callbacks.before || [])
.reduce(function (previous, callback) {
//Check whether the callback returned a value of
// 'false' indicating that navigation should not
@ -67,7 +67,7 @@ define(
}, true);
if (canNavigate) {
this.navigated = value;
this.callbacks['after'].forEach(function (callback) {
(this.callbacks.after || []).forEach(function (callback) {
callback(value);
});
}

View File

@ -29,8 +29,7 @@ define(
function (BrowseController) {
"use strict";
//TODO: Disabled for NEM Beta
xdescribe("The browse controller", function () {
describe("The browse controller", function () {
var mockScope,
mockRoute,
mockLocation,
@ -230,7 +229,10 @@ define(
// prior to setting $route.current
mockLocation.path.andReturn("/browse/");
mockNavigationService.setNavigation.andReturn(true);
// Exercise the Angular workaround
mockNavigationService.addListener.mostRecentCall.args[0]();
mockScope.$on.mostRecentCall.args[1]();
expect(mockUnlisten).toHaveBeenCalled();
@ -241,6 +243,32 @@ define(
);
});
it("after successful navigation event sets the selected tree " +
"object", function () {
mockScope.navigatedObject = mockDomainObject;
mockNavigationService.setNavigation.andReturn(true);
//Simulate a change in selected tree object
mockScope.treeModel = {selectedObject: mockDomainObject};
mockScope.$watch.mostRecentCall.args[1](mockNextObject);
expect(mockScope.treeModel.selectedObject).toBe(mockNextObject);
expect(mockScope.treeModel.selectedObject).not.toBe(mockDomainObject);
});
it("after failed navigation event resets the selected tree" +
" object", function () {
mockScope.navigatedObject = mockDomainObject;
mockNavigationService.setNavigation.andReturn(false);
//Simulate a change in selected tree object
mockScope.treeModel = {selectedObject: mockDomainObject};
mockScope.$watch.mostRecentCall.args[1](mockNextObject);
expect(mockScope.treeModel.selectedObject).not.toBe(mockNextObject);
expect(mockScope.treeModel.selectedObject).toBe(mockDomainObject);
});
});
}
);

View File

@ -84,6 +84,24 @@ define(
expect(callback).not.toHaveBeenCalled();
});
it("adds listeners to the 'after' state by default", function(){
expect(navigationService.callbacks.after).toBeUndefined();
navigationService.addListener(function(){});
expect(navigationService.callbacks.after).toBeDefined();
expect(navigationService.callbacks.after.length).toBe(1);
});
it("allows navigationService events to be prevented", function(){
var callback = jasmine.createSpy("callback"),
navigationResult;
callback.andReturn(false);
navigationService.addListener(callback, "before");
navigationResult = navigationService.setNavigation({});
expect(callback).toHaveBeenCalled();
expect(navigationResult).toBe(false);
});
});
}
);

View File

@ -84,7 +84,8 @@ define([
"key": "EditObjectController",
"implementation": EditObjectController,
"depends": [
"$scope"
"$scope",
"$location"
]
}
],
@ -215,10 +216,6 @@ define([
{
"key": "topbar-edit",
"templateUrl": "templates/topbar-edit.html"
},
{
"key": "inspector-edit",
"templateUrl": "templates/inspector-edit.html"
}
],
"representers": [

View File

@ -1,80 +0,0 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web is licensed under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
Open MCT Web includes source code licensed under additional open source
licenses. See the Open Source Licenses file (LICENSES.md) included with
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div ng-controller="PaneController as modelPaneEdit">
<mct-split-pane class='abs contents split-layout' anchor='bottom'>
<div class="split-pane-component pane top">
<div class="abs holder holder-inspector l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div><!--/ holder-inspector -->
</div><!--/ split-pane-component -->
<mct-splitter class="splitter-inspect-panel mobile-hide"></mct-splitter>
<div class="split-pane-component pane bottom">
<div class="abs holder holder-elements l-flex-col">
<em class="flex-elem">Elements</em>
<mct-representation
key="'edit-elements'"
mct-object="domainObject"
class="flex-elem holder grows vscroll current-elements">
</mct-representation>
</div>
</div>
</mct-split-pane>
</div><!--/ PaneController -->
</span>

View File

@ -36,7 +36,7 @@ define(
* @memberof platform/commonUI/edit
* @constructor
*/
function EditObjectController($scope) {
function EditObjectController($scope, $location) {
this.scope = $scope;
var navigatedObject;

View File

@ -55,6 +55,20 @@ define(
return scope.$eval(attrs.mctBeforeUnload);
}
function shouldAllowNavigation(){
// Get an unload message (if any)
var warning = unload();
// Prompt the user if there's an unload message
return !warning || $window.confirm(warning);
}
// Show a dialog before allowing a location change
function checkNavigationEvent(event) {
// Return a false value to the navigationService to
// indicate that the navigation event should be prevented
return shouldAllowNavigation();
}
// Stop using this unload expression
function removeUnload() {
navigationService.removeListener(checkNavigationEvent, "before");
@ -66,13 +80,6 @@ define(
}
}
function shouldAllowNavigation(){
// Get an unload message (if any)
var warning = unload();
// Prompt the user if there's an unload message
return !warning || $window.confirm(warning);
}
// Show a dialog before allowing a location change
function checkLocationChange(event) {
if (!shouldAllowNavigation()) {
@ -81,13 +88,6 @@ define(
}
}
// Show a dialog before allowing a location change
function checkNavigationEvent(event) {
// Return a false value to the navigationService to
// indicate that the navigation event should be prevented
return shouldAllowNavigation();
}
// If this is the first active instance of this directive,
// register as the window's beforeunload handler
if (unloads.length === 0) {

View File

@ -49,7 +49,6 @@ define(
var self = this;
this.scope = scope;
this.listenHandle = undefined;
// Mutate and persist a new version of a domain object's model.
function doPersist(model) {
@ -101,13 +100,10 @@ define(
// Place the "commit" method in the scope
scope.commit = commit;
scope.setEditable = setEditable;
}
// Handle a specific representation of a specific domain object
EditRepresenter.prototype.represent = function represent(representation, representedObject) {
var scope = this.scope,
self = this;
// Track the key, to know which view configuration to save to.
this.key = (representation || {}).key;
// Track the represented object
@ -115,34 +111,11 @@ define(
// Ensure existing watches are released
this.destroy();
function setEditing(){
scope.viewRegionTemplate = 'edit-object';
scope.inspectorRegionTemplate = 'inspector-edit'
}
/**
* Listen for changes in object state. If the object becomes
* editable then change the view and inspector regions
* object representation accordingly
*/
this.listenHandle = this.domainObject.getCapability('status').listen(function(statuses){
if (statuses.indexOf('editing')!=-1){
setEditing();
} else {
delete scope.viewRegionTemplate;
}
});
if (representedObject.getCapability('status').get('editing')){
setEditing();
}
};
// Respond to the destruction of the current representation.
EditRepresenter.prototype.destroy = function destroy() {
// Nothing to clean up
this.listenHandle && this.listenHandle();
};
return EditRepresenter;

View File

@ -22,89 +22,72 @@
/*global define,describe,it,expect,beforeEach,jasmine*/
define(
["../../src/controllers/EditController"],
function (EditController) {
["../../src/controllers/EditObjectController"],
function (EditObjectController) {
"use strict";
describe("The Edit mode controller", function () {
var mockScope,
mockQ,
mockNavigationService,
mockObject,
mockType,
mockLocation,
mockStatusCapability,
mockCapabilities,
controller;
// Utility function; look for a $watch on scope and fire it
function fireWatch(expr, value) {
mockScope.$watch.calls.forEach(function (call) {
if (call.args[0] === expr) {
call.args[1](value);
}
});
}
beforeEach(function () {
mockScope = jasmine.createSpyObj(
"$scope",
[ "$on" ]
);
mockQ = jasmine.createSpyObj('$q', ['when', 'all']);
mockNavigationService = jasmine.createSpyObj(
"navigationService",
[ "getNavigation", "addListener", "removeListener" ]
[ "$on", "$watch" ]
);
mockObject = jasmine.createSpyObj(
"domainObject",
[ "getId", "getModel", "getCapability", "hasCapability" ]
[ "getId", "getModel", "getCapability", "hasCapability", "useCapability" ]
);
mockType = jasmine.createSpyObj(
"type",
[ "hasFeature" ]
);
mockStatusCapability = jasmine.createSpyObj('statusCapability',
["get"]
);
mockCapabilities = {
"type" : mockType,
"status": mockStatusCapability
};
mockLocation = jasmine.createSpyObj('$location',
["search"]
);
mockLocation.search.andReturn({"view": "fixed"});
mockNavigationService.getNavigation.andReturn(mockObject);
mockObject.getId.andReturn("test");
mockObject.getModel.andReturn({ name: "Test object" });
mockObject.getCapability.andCallFake(function (key) {
return key === 'type' && mockType;
return mockCapabilities[key];
});
mockType.hasFeature.andReturn(true);
controller = new EditController(
mockScope.domainObject = mockObject;
controller = new EditObjectController(
mockScope,
mockQ,
mockNavigationService
mockLocation
);
});
it("exposes the currently-navigated object", function () {
expect(controller.navigatedObject()).toBeDefined();
expect(controller.navigatedObject().getId()).toEqual("test");
});
it("adds an editor capability to the navigated object", function () {
// Should provide an editor capability...
expect(controller.navigatedObject().getCapability("editor"))
.toBeDefined();
// Shouldn't have been the mock capability we provided
expect(controller.navigatedObject().getCapability("editor"))
.not.toEqual(mockType);
});
it("detaches its navigation listener when destroyed", function () {
var navCallback = mockNavigationService
.addListener.mostRecentCall.args[0];
expect(mockScope.$on).toHaveBeenCalledWith(
"$destroy",
jasmine.any(Function)
);
// Verify precondition
expect(mockNavigationService.removeListener)
.not.toHaveBeenCalled();
// Trigger destroy
mockScope.$on.mostRecentCall.args[1]();
// Listener should have been removed
expect(mockNavigationService.removeListener)
.toHaveBeenCalledWith(navCallback);
});
it("exposes a warning message for unload", function () {
var obj = controller.navigatedObject(),
var obj = mockObject,
mockEditor = jasmine.createSpyObj('editor', ['dirty']);
// Normally, should be undefined
@ -112,14 +95,32 @@ define(
// Override the object's editor capability, make it look
// like there are unsaved changes.
obj.getCapability = jasmine.createSpy();
obj.getCapability.andReturn(mockEditor);
mockCapabilities.editor = mockEditor;
mockEditor.dirty.andReturn(true);
mockStatusCapability.get.andReturn(true);
// Should have some warning message here now
expect(controller.getUnloadWarning()).toEqual(jasmine.any(String));
});
it("sets the active view from query parameters", function () {
var testViews = [
{ key: 'abc' },
{ key: 'def', someKey: 'some value' },
{ key: 'xyz' }
];
mockObject.useCapability.andCallFake(function (c) {
return (c === 'view') && testViews;
});
mockLocation.search.andReturn({ view: 'def' });
fireWatch('domainObject', mockObject);
expect(mockScope.representation.selected)
.toEqual(testViews[1]);
});
});
}
);

View File

@ -31,6 +31,7 @@ define(
mockScope,
testAttrs,
mockEvent,
mockNavigationService,
directive;
function fireListener(eventType, value) {
@ -46,7 +47,8 @@ define(
mockScope = jasmine.createSpyObj("$scope", ['$eval', '$on']);
testAttrs = { mctBeforeUnload: "someExpression" };
mockEvent = jasmine.createSpyObj("event", ["preventDefault"]);
directive = new MCTBeforeUnload(mockWindow);
mockNavigationService = jasmine.createSpyObj("navigationService", ["addListener", "removeListener"]);
directive = new MCTBeforeUnload(mockWindow, mockNavigationService);
directive.link(mockScope, {}, testAttrs);
});
@ -65,6 +67,10 @@ define(
);
});
it("listens for navigation changes", function () {
expect(mockNavigationService.addListener).toHaveBeenCalledWith(jasmine.any(Function), "before");
});
it("listens for its scope's destroy event", function () {
expect(mockScope.$on).toHaveBeenCalledWith(
"$destroy",
@ -108,6 +114,7 @@ define(
it("cleans up listeners when destroyed", function () {
fireListener("$destroy", mockEvent);
expect(mockWindow.onbeforeunload).toBeUndefined();
expect(mockNavigationService.removeListener).toHaveBeenCalled();
});

View File

@ -33,6 +33,8 @@ define(
testRepresentation,
mockDomainObject,
mockPersistence,
mockStatusCapability,
mockCapabilities,
representer;
function mockPromise(value) {
@ -57,11 +59,20 @@ define(
]);
mockPersistence =
jasmine.createSpyObj("persistence", ["persist"]);
mockStatusCapability =
jasmine.createSpyObj("statusCapability", ["get", "listen"]);
mockCapabilities = {
"persistence": mockPersistence,
"status": mockStatusCapability
};
mockDomainObject.getModel.andReturn({});
mockDomainObject.hasCapability.andReturn(true);
mockDomainObject.useCapability.andReturn(true);
mockDomainObject.getCapability.andReturn(mockPersistence);
mockDomainObject.getCapability.andCallFake(function(capability){
return mockCapabilities[capability];
});
representer = new EditRepresenter(mockQ, mockLog, mockScope);
representer.represent(testRepresentation, mockDomainObject);

View File

@ -447,12 +447,8 @@ define([
]
},
{
"key": "inspector-region",
"key": "object-inspector",
"templateUrl": "templates/object-inspector.html"
},
{
"key": "inspector-browse",
"templateUrl": "templates/inspector-browse.html"
}
],
"controls": [

View File

@ -1,64 +0,0 @@
<!--
Open MCT Web, Copyright (c) 2014-2015, United States Government
as represented by the Administrator of the National Aeronautics and Space
Administration. All rights reserved.
Open MCT Web is licensed under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0.
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
under the License.
Open MCT Web includes source code licensed under additional open source
licenses. See the Open Source Licenses file (LICENSES.md) included with
this source code distribution or the Licensing information page available
at runtime from the About dialog for additional information.
-->
<span class="l-inspect" ng-controller="ObjectInspectorController as controller">
<div class="abs holder holder-inspector l-flex-col">
<div class="pane-header flex-elem">Inspection</div>
<ul class="flex-elem grows vscroll">
<li>
<em>Properties</em>
<div class="inspector-properties"
ng-repeat="data in metadata"
ng-class="{ first:$index === 0 }">
<div class="label">{{ data.name }}</div>
<div class="value">{{ data.value }}</div>
</div>
</li>
<li ng-if="contextutalParents.length > 0">
<em title="The location of this linked object.">Location</em>
<span class="inspector-location"
ng-repeat="parent in contextutalParents"
ng-class="{ last:($index + 1) === contextualParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
<li ng-if="primaryParents.length > 0">
<em title="The location of the original object that this was linked from.">Original Location</em>
<span class="inspector-location"
ng-repeat="parent in primaryParents"
ng-class="{ last:($index + 1) === primaryParents.length }">
<mct-representation key="'label'"
mct-object="parent"
ng-model="ngModel"
ng-click="ngModel.selectedObject = parent"
class="location-item">
</mct-representation>
</span>
</li>
</ul>
</div><!--/ holder-inspector -->
</div><!--/ PaneController -->
</span>

View File

@ -166,16 +166,12 @@ define(
editableDomainObject = createVirtualPanel(domainObject, selectedObject);
if (editableDomainObject) {
editableDomainObject.getCapability('action').perform('edit');
//navigationService.setNavigation(editableDomainObject);
broadcastDrop(id, event);
//editableDomainObject.getCapability('status').set('editing', true);
}
} else {
$q.when(action && action.perform()).then(function (result) {
//Don't go into edit mode for folders
if (domainObjectType!=='folder') {
// navigationService.setNavigation(editableDomainObject);
//editableDomainObject.getCapability('status').set('editing', true);
editableDomainObject.getCapability('action').perform('edit');
}
broadcastDrop(id, event);