Adding hz-resource-property/-list and filter/value retrieval
This patch adds hz-resource-property, which outputs the given object property as a label and value in a dt/dd. This uses hz-cell which ensures that all display rules dictated within the property configuration are followed. hz-resource-property-list is a level higher than hz-resource-property, which allows for supplying multiple properties to be displayed, to reduce excess markup. It is not to be used at the exclusion of hz-resource-property, but just as a way to make it easier to build simple displays. Change-Id: I62e3d9e4217aae428277bbef669ba704600f0b43 Partially-Implements: blueprint angular-registry
This commit is contained in:
parent
8f35c43bc5
commit
3ff5826af8
@ -100,6 +100,7 @@
|
||||
self.type = typeCode;
|
||||
self.initActions = initActions;
|
||||
self.setProperty = setProperty;
|
||||
self.getProperties = getProperties;
|
||||
self.getName = getName;
|
||||
self.setNames = setNames;
|
||||
self.label = label;
|
||||
@ -188,6 +189,11 @@
|
||||
return self;
|
||||
}
|
||||
|
||||
// Returns a copy of the properties.
|
||||
function getProperties() {
|
||||
return angular.copy(properties);
|
||||
}
|
||||
|
||||
/**
|
||||
* @ngdoc function
|
||||
* @name setListFunction
|
||||
@ -257,6 +263,13 @@
|
||||
function mapTableInfo(x) {
|
||||
var tableInfo = x;
|
||||
tableInfo.title = x.title || label(x.id);
|
||||
// use 'values' or 'filters' from property definition if available.
|
||||
if (properties[x.id] && properties[x.id].values) {
|
||||
tableInfo.values = properties[x.id].values;
|
||||
}
|
||||
if (properties[x.id] && properties[x.id].filters) {
|
||||
tableInfo.filters = properties[x.id].filters;
|
||||
}
|
||||
return tableInfo;
|
||||
}
|
||||
}
|
||||
|
@ -130,6 +130,21 @@
|
||||
{title: "im-a-title"}]);
|
||||
});
|
||||
|
||||
it('places property .values and .filters on table', function() {
|
||||
var type = service.getResourceType('something');
|
||||
var func = angular.noop;
|
||||
type.setProperty('im-an-id', {filters: [func], values: {a: 'apple'}});
|
||||
type.tableColumns.push({id: "im-an-id"});
|
||||
expect(type.getTableColumns()[0].filters).toEqual([func]);
|
||||
expect(type.getTableColumns()[0].values).toEqual({a: 'apple'});
|
||||
});
|
||||
|
||||
it('getProperties returns a copy of the properties', function() {
|
||||
var type = service.getResourceType('something');
|
||||
type.setProperty('im-an-id', {values: {a: 'apple'}});
|
||||
expect(type.getProperties()['im-an-id']).toEqual({values: {a: 'apple'}});
|
||||
});
|
||||
|
||||
it('manages the globalActions', function() {
|
||||
var typeA = service.getResourceType('a');
|
||||
var typeB = service.getResourceType('b');
|
||||
|
@ -0,0 +1,88 @@
|
||||
/**
|
||||
* (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('horizon.framework.widgets.property')
|
||||
.directive('hzResourcePropertyList', directive);
|
||||
|
||||
directive.$inject = [
|
||||
'horizon.framework.widgets.basePath'
|
||||
];
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name hzResourcePropertyList
|
||||
* @description
|
||||
* This directive is intended to be used with the resource registry. It currently
|
||||
* displays sets of properties registered for the given type, grouped into
|
||||
* label/values.
|
||||
*
|
||||
* The directive displays the groups proportionately based on the number of
|
||||
* property groups presented. The proportions are based off a 12-column system
|
||||
* such as Bootstrap, and any number of columns between 1 and 12 may be used.
|
||||
*
|
||||
* There is no limit to the number of properties within a group.
|
||||
*
|
||||
* @example
|
||||
* The following would produce three sets of property lists, each entry with
|
||||
* a label and value, based on the 'item' object given, and using registrations
|
||||
* for the given type ('OS::Neutron::Net') to inform how to format each
|
||||
* property. The 'cls' property will place the 'dl-horizontal' class on the <dl>
|
||||
* element.
|
||||
*
|
||||
* The following will produce three sets of lists. The first group, for example,
|
||||
* will contain the label and value of the 'name' property and the label and value
|
||||
* of the 'id' property.
|
||||
```
|
||||
<hz-resource-property-list
|
||||
resource-type-name="OS::Neutron::Net"
|
||||
item="item"
|
||||
cls="dl-horizontal"
|
||||
property-groups="[
|
||||
['name', 'id'],
|
||||
['shared', 'router__external'],
|
||||
['status', 'admin_state_up']]">
|
||||
</hz-resource-property-list>
|
||||
```
|
||||
*
|
||||
*/
|
||||
function directive(basePath) {
|
||||
|
||||
var directiveConf = {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
resourceTypeName: "@",
|
||||
propertyGroups: "=",
|
||||
cls: "@?",
|
||||
item: "="
|
||||
},
|
||||
link: link,
|
||||
templateUrl: basePath + 'property/hz-resource-property-list.html'
|
||||
};
|
||||
return directiveConf;
|
||||
|
||||
function link(scope) {
|
||||
scope.getBootstrapColumnSpan = getBootstrapColumnSpan;
|
||||
|
||||
function getBootstrapColumnSpan(columns) {
|
||||
return Math.floor(12 / columns.length);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
})();
|
@ -0,0 +1,12 @@
|
||||
<div class="row">
|
||||
<div ng-repeat="propNames in propertyGroups">
|
||||
<dl class="col-md-{$ getBootstrapColumnSpan(propertyGroups) $} {$ cls $}">
|
||||
<div ng-repeat="propName in propNames">
|
||||
<hz-resource-property
|
||||
resource-type-name="{$ resourceTypeName $}"
|
||||
prop-name="{$ propName $}"
|
||||
item="item"></hz-resource-property>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
@ -0,0 +1,39 @@
|
||||
/*
|
||||
* (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('horizon.framework.widgets.property')
|
||||
.controller('horizon.framework.widgets.property.hzResourcePropertyController', controller);
|
||||
|
||||
controller.$inject = [
|
||||
'horizon.framework.conf.resource-type-registry.service'
|
||||
];
|
||||
|
||||
function controller(registry) {
|
||||
var ctrl = this;
|
||||
|
||||
// 'Public' Controller members
|
||||
|
||||
// 'config' is the configuration for how to output the field, and 'config.id'
|
||||
// is the property name itself.
|
||||
ctrl.config = registry.getResourceType(ctrl.resourceTypeName).getProperties()[ctrl.propName];
|
||||
ctrl.config.id = ctrl.propName;
|
||||
|
||||
}
|
||||
|
||||
})();
|
@ -0,0 +1,63 @@
|
||||
/**
|
||||
* (c) Copyright 2016 Hewlett Packard Enterprise Development Company LP
|
||||
*
|
||||
* 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.
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('horizon.framework.widgets.property')
|
||||
.directive('hzResourceProperty', hzResourceProperty);
|
||||
|
||||
hzResourceProperty.$inject = [
|
||||
'horizon.framework.widgets.basePath'
|
||||
];
|
||||
|
||||
/**
|
||||
* @ngdoc directive
|
||||
* @name hzResourceProperty
|
||||
* @description
|
||||
* This directive produces a label/value output of a property. It uses the
|
||||
* resource type registry to look up the resource type by name, then outputs
|
||||
* the named property on the given item, using the registry's knowledge of
|
||||
* how to output the property.
|
||||
* @example
|
||||
*
|
||||
*
|
||||
```
|
||||
$scope.someObject = {somePropertyOnObject: 'myData'};
|
||||
|
||||
<hz-resource-property resource-type-name="OS::Glance::Image"
|
||||
item="someObject"
|
||||
propName="somePropertyOnObject"></hz-resource-property>
|
||||
```
|
||||
*
|
||||
*/
|
||||
function hzResourceProperty(basePath) {
|
||||
|
||||
var directiveConf = {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
resourceTypeName: "@",
|
||||
propName: "@",
|
||||
item: "="
|
||||
},
|
||||
bindToController: true,
|
||||
controller: 'horizon.framework.widgets.property.hzResourcePropertyController as ctrl',
|
||||
templateUrl: basePath + 'property/hz-resource-property.html'
|
||||
};
|
||||
return directiveConf;
|
||||
|
||||
}
|
||||
})();
|
@ -0,0 +1,5 @@
|
||||
<dt>{$ ctrl.config.label $}</dt>
|
||||
<dd>
|
||||
<hz-field config='ctrl.config' item='ctrl.item'></hz-field>
|
||||
</dd>
|
||||
|
Loading…
Reference in New Issue
Block a user