Edit mode and cancel buttons work

This commit is contained in:
Henry 2015-10-22 10:09:09 -07:00
parent fdfb524eef
commit 0fb9f3731a
7 changed files with 54 additions and 39 deletions

View File

@ -35,7 +35,8 @@
{ {
"key": "BrowseObjectController", "key": "BrowseObjectController",
"implementation": "BrowseObjectController.js", "implementation": "BrowseObjectController.js",
"depends": [ "$scope", "$location", "$route", "$q" ] "depends": [ "$scope", "$location", "$route", "$q",
"navigationService" ]
}, },
{ {
"key": "CreateMenuController", "key": "CreateMenuController",

View File

@ -20,13 +20,14 @@
at runtime from the About dialog for additional information. at runtime from the About dialog for additional information.
--> -->
<div ng-init=" <div ng-init="
editBtns = [{ cssclass: 'save',title: 'Save' },{ cssclass: 'cancel',title: 'Discard Changes' }]; editBtns = [{ cssclass: 'save',title: 'Save' },{ cssclass: 'cancel',title: 'Discard Changes', action:'cancelEditing' }];
"></div> "></div>
<span ng-controller="BrowseObjectController"> <span ng-controller="BrowseObjectController"
<a class="s-btn" mct-before-unload="getUnloadWarning()">
<!--<a class="s-btn"
style="opacity: 0.9; position:absolute; right: 250px; z-index: 100" style="opacity: 0.9; position:absolute; right: 250px; z-index: 100"
ng-class="{ major:!editMode }" ng-class="{ major:!editMode }"
ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a> ng-click="editMode = !editMode">Set EditMode to {{!editMode}}</a> -->
<div class="object-browse-bar bar l-flex"> <div class="object-browse-bar bar l-flex">
<div class="items-select left"> <div class="items-select left">
<mct-representation key="'back-arrow'" <mct-representation key="'back-arrow'"
@ -100,7 +101,7 @@
<span ng-repeat="btn in editBtns"> <span ng-repeat="btn in editBtns">
<a class='s-btn t-{{btn.cssclass}}' <a class='s-btn t-{{btn.cssclass}}'
title='{{btn.title}}' title='{{btn.title}}'
ng-click="currentAction.perform()" ng-click="doAction(btn.action)"
ng-class="{ major: $index === 0 }"> ng-class="{ major: $index === 0 }">
<span class="title-label">{{btn.title}}</span> <span class="title-label">{{btn.title}}</span>
</a> </a>

View File

@ -74,15 +74,17 @@ define(
// Callback for updating the in-scope reference to the object // Callback for updating the in-scope reference to the object
// that is currently navigated-to. // that is currently navigated-to.
function setNavigation(domainObject) { function setNavigation(domainObject) {
var navigatedDomainObject = domainObject;
$scope.navigatedObject = navigatedDomainObject; var wrappedObject = domainObject;
$scope.navigatedObject = wrappedObject;
$scope.treeModel.selectedObject = domainObject; $scope.treeModel.selectedObject = domainObject;
navigationService.setNavigation(domainObject); navigationService.setNavigation(domainObject);
updateRoute(domainObject); updateRoute(domainObject);
} }
function navigateTo(domainObject) { function navigateTo(domainObject) {
// Check if an object has been navigated-to already... // Check if an object has been navigated-to already...
// If not, or if an ID path has been explicitly set in the URL, // If not, or if an ID path has been explicitly set in the URL,
// navigate to the URL-specified object. // navigate to the URL-specified object.
@ -148,6 +150,16 @@ define(
selectedObject: navigationService.getNavigation() selectedObject: navigationService.getNavigation()
}; };
$scope.beforeUnloadWarning = function() {
var editorCapability = $scope.navigatedObject &&
$scope.navigatedObject.getCapability("editor"),
hasChanges = editorCapability && editorCapability.dirty();
return hasChanges ?
"Unsaved changes will be lost if you leave this page." :
undefined;
}
// Listen for changes in navigation state. // Listen for changes in navigation state.
navigationService.addListener(setNavigation); navigationService.addListener(setNavigation);
@ -159,8 +171,6 @@ define(
navigationService.removeListener(setNavigation); navigationService.removeListener(setNavigation);
}); });
$scope.editMode = false;
} }
return BrowseController; return BrowseController;

View File

@ -33,7 +33,8 @@ define(
* @memberof platform/commonUI/browse * @memberof platform/commonUI/browse
* @constructor * @constructor
*/ */
function BrowseObjectController($scope, $location, $route, $q) { function BrowseObjectController($scope, $location, $route, $q, navigationService) {
var navigatedObject;
function setViewForDomainObject(domainObject) { function setViewForDomainObject(domainObject) {
var locationViewKey = $location.search().view; var locationViewKey = $location.search().view;
@ -49,6 +50,8 @@ define(
((domainObject && domainObject.useCapability('view')) || []) ((domainObject && domainObject.useCapability('view')) || [])
.forEach(selectViewIfMatching); .forEach(selectViewIfMatching);
} }
$scope.editMode = domainObject.getDomainObject ? true : false;
navigatedObject = domainObject;
} }
function updateQueryParam(viewKey) { function updateQueryParam(viewKey) {
@ -67,22 +70,16 @@ define(
} }
} }
function toggleEditMode(editMode){
var domainObject = $scope.domainObject;
if (editMode){
$scope.domainObject = domainObject && new EditableDomainObject(domainObject, $q);
} else {
$scope.domainObject = (domainObject.getDomainObject && domainObject.getDomainObject()) || domainObject;
}
}
$scope.$watch('editMode', toggleEditMode);
$scope.$watch('domainObject', setViewForDomainObject); $scope.$watch('domainObject', setViewForDomainObject);
$scope.$watch('representation.selected.key', updateQueryParam); $scope.$watch('representation.selected.key', updateQueryParam);
$scope.$on(GestureConstants.MCT_DROP_EVENT, function() { $scope.cancelEditing = function() {
$scope.editMode = true; navigationService.setNavigation($scope.domainObject.getDomainObject());
}); }
$scope.doAction = function (action){
$scope[action] && $scope[action]();
}
} }

View File

@ -25,8 +25,8 @@
* Module defining EditAction. Created by vwoeltje on 11/14/14. * Module defining EditAction. Created by vwoeltje on 11/14/14.
*/ */
define( define(
[], ['../objects/EditableDomainObject'],
function () { function (EditableDomainObject) {
"use strict"; "use strict";
// A no-op action to return in the event that the action cannot // A no-op action to return in the event that the action cannot
@ -71,8 +71,10 @@ define(
* Enter edit mode. * Enter edit mode.
*/ */
EditAction.prototype.perform = function () { EditAction.prototype.perform = function () {
this.navigationService.setNavigation(this.domainObject); if (!this.domainObject.getDomainObject) {
this.$location.path("/edit"); this.navigationService.setNavigation(new EditableDomainObject(this.domainObject));
}
//this.$location.path("/edit");
}; };
/** /**
@ -83,10 +85,11 @@ define(
*/ */
EditAction.appliesTo = function (context) { EditAction.appliesTo = function (context) {
var domainObject = (context || {}).domainObject, var domainObject = (context || {}).domainObject,
type = domainObject && domainObject.getCapability('type'); type = domainObject && domainObject.getCapability('type'),
isEditMode = domainObject && domainObject.getDomainObject ? true : false;
// Only allow creatable types to be edited // Only allow creatable types to be edited
return type && type.hasFeature('creation'); return type && type.hasFeature('creation') && !isEditMode;
}; };
return EditAction; return EditAction;

View File

@ -21,7 +21,7 @@
{ {
"key": "drop", "key": "drop",
"implementation": "gestures/DropGesture.js", "implementation": "gestures/DropGesture.js",
"depends": [ "dndService", "$q" ] "depends": [ "dndService", "$q", "navigationService" ]
}, },
{ {
"key": "menu", "key": "menu",

View File

@ -25,8 +25,9 @@
* Module defining DropGesture. Created by vwoeltje on 11/17/14. * Module defining DropGesture. Created by vwoeltje on 11/17/14.
*/ */
define( define(
['./GestureConstants'], ['./GestureConstants',
function (GestureConstants) { '../../../commonUI/edit/src/objects/EditableDomainObject'],
function (GestureConstants, EditableDomainObject) {
"use strict"; "use strict";
/** /**
@ -40,8 +41,9 @@ define(
* @param {DomainObject} domainObject the domain object whose * @param {DomainObject} domainObject the domain object whose
* composition should be modified as a result of the drop. * composition should be modified as a result of the drop.
*/ */
function DropGesture(dndService, $q, element, domainObject) { function DropGesture(dndService, $q, navigationService, element, domainObject) {
var actionCapability = domainObject.getCapability('action'), var editableDomainObject = domainObject instanceof EditableDomainObject ? domainObject : new EditableDomainObject(domainObject, $q),
actionCapability = editableDomainObject.getCapability('action'),
action; // Action for the drop, when it occurs action; // Action for the drop, when it occurs
function broadcastDrop(id, event) { function broadcastDrop(id, event) {
@ -93,7 +95,7 @@ define(
function drop(e) { function drop(e) {
var event = (e || {}).originalEvent || e, var event = (e || {}).originalEvent || e,
id = event.dataTransfer.getData(GestureConstants.MCT_DRAG_TYPE), id = event.dataTransfer.getData(GestureConstants.MCT_DRAG_TYPE),
domainObjectType = domainObject.getModel().type; domainObjectType = editableDomainObject.getModel().type;
// If currently in edit mode allow drag and drop gestures to the // If currently in edit mode allow drag and drop gestures to the
// domain object. An exception to this is folders which have drop // domain object. An exception to this is folders which have drop
@ -105,6 +107,7 @@ define(
// the change. // the change.
if (id) { if (id) {
$q.when(action && action.perform()).then(function (result) { $q.when(action && action.perform()).then(function (result) {
navigationService.setNavigation(editableDomainObject);
broadcastDrop(id, event); broadcastDrop(id, event);
}); });
} }