[Edit] Allow inline-editing the name only if the object is editable

Made the contenteditable attribute conditional based on whether the object can be edited or not. If the object is not editable, the attribute is removed.

Add Tests.

Fixes 
This commit is contained in:
Pegah Sarram 2017-10-05 14:41:19 -07:00
parent 7f43c0bf1a
commit eb4ded39b3
3 changed files with 29 additions and 14 deletions
platform/commonUI/browse

View File

@ -22,7 +22,7 @@
<span class='type-icon flex-elem {{type.getCssClass()}}'></span>
<span class="l-elem-wrapper l-flex-row flex-elem grows" ng-controller="ObjectHeaderController as controller">
<span ng-if="parameters.mode" class='action flex-elem'>{{parameters.mode}}</span>
<span contenteditable="true"
<span ng-attr-contenteditable="{{ controller.editable ? true : undefined }}"
class='title-label flex-elem holder flex-can-shrink s-input-inline'
ng-click="controller.edit()"
ng-blur="controller.updateName($event)"

View File

@ -32,7 +32,8 @@ define(
*/
function ObjectHeaderController($scope) {
this.$scope = $scope;
$scope.editing = false;
this.domainObject = $scope.domainObject;
this.editable = this.allowEdit();
}
/**
@ -45,18 +46,16 @@ define(
var name = event.currentTarget.innerHTML;
if (name.length === 0) {
name = "Unnamed " + this.$scope.domainObject.getCapability("type").typeDef.name;
name = "Unnamed " + this.domainObject.getCapability("type").typeDef.name;
event.currentTarget.innerHTML = name;
}
if (name !== this.$scope.domainObject.model.name) {
this.$scope.domainObject.getCapability('mutation').mutate(function (model) {
this.domainObject.getCapability('mutation').mutate(function (model) {
model.name = name;
});
}
this.$scope.editing = false;
if (event.which === 13) {
event.currentTarget.blur();
}
@ -64,10 +63,14 @@ define(
};
/**
* Marks the status of the field as editing.
* Checks if the domain object is editable.
*
* @private
* @return true if object is editable
*/
ObjectHeaderController.prototype.edit = function () {
this.$scope.editing = true;
ObjectHeaderController.prototype.allowEdit = function () {
var type = this.domainObject && this.domainObject.getCapability('type');
return !!(type && type.hasFeature('creation'));
};
return ObjectHeaderController;

View File

@ -36,11 +36,12 @@ define(
beforeEach(function () {
mockMutationCapability = jasmine.createSpyObj("mutation", ["mutate"]);
mockTypeCapability = {
typeDef: {
name: ""
}
};
mockTypeCapability = jasmine.createSpyObj("type", ["typeDef", "hasFeature"]);
mockTypeCapability.typeDef = { name: ""};
mockTypeCapability.hasFeature.andCallFake(function (feature) {
return feature === 'creation';
});
mockCapabilities = {
mutation: mockMutationCapability,
type: mockTypeCapability
@ -115,6 +116,17 @@ define(
expect(mockEvent.currentTarget.blur).toHaveBeenCalled();
});
it("allows editting name when object is creatable", function () {
expect(controller.allowEdit()).toBe(true);
});
it("disallows editting name when object is non-creatable", function () {
mockTypeCapability.hasFeature.andReturn(false);
expect(controller.allowEdit()).toBe(false);
});
});
}
);