mirror of
https://github.com/nasa/openmct.git
synced 2024-12-27 00:31:06 +00:00
[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 #1746
This commit is contained in:
parent
7f43c0bf1a
commit
eb4ded39b3
platform/commonUI/browse
@ -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)"
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user