External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-01-14 11:20:39 -03:30
Code Issues Packages Projects Releases Wiki Activity

Offload tag formatting logic to templateList controller

Browse Source
This commit is contained in:
kialam 2018-06-05 17:40:59 -04:00
parent b8404abb26
commit 6ca4c7de9d
5 changed files with 54 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
awx/ui/client/features/templates/templatesList.controller.js
View File

@ -165,6 +165,17 @@ function ListTemplatesController(
return html;
};
vm.buildCredentialTags = (credentials) => {
return credentials.map(credential => {
const icon = `${credential.kind}`;
const link = `/#/credentials/${credential.id}`;
const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL');
const value = $filter('sanitize')(credential.name);
return { icon, link, tooltip, value };
})
};
vm.getLastRan = template => {
const lastJobRun = _.get(template, 'last_job_run');

18
awx/ui/client/features/templates/templatesList.view.html
View File

@ -69,11 +69,23 @@
value-link="/#/projects/{{ template.summary_fields.project.id }}">
</at-row-item>
<!-- TODO: add see more for creds -->
<at-row-item
<at-toggle-tag tags="vm.buildCredentialTags(template.summary_fields.credentials)"></at-toggle-tag>
<!-- <at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
tag-values="template.summary_fields.credentials"
tags-are-creds="true">
</at-row-item>
tags-are-creds="true"> -->
<!-- If there are 5 or less credential tags, show them all with Tag Component -->
<!-- <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
<at-tag tag="tag.name" icon="{{ tag.kind }}" link="/#/credentials/{{ tag.id }}"></at-tag>
</div> -->
<!-- If there are 5 or MORE credential tags, handle them accordingly with Toggle Tag Component -->
<!-- <at-toggle-tag tag-type="cred" tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag> -->
<!-- </at-row-item> -->
<at-row-item
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
value-bind-html="{{ vm.getModified(template) }}">

12
awx/ui/client/lib/components/list/row-item.partial.html
View File

@ -42,11 +42,19 @@
template-type="smartStatus.type" ng-if="smartStatus">
</aw-smart-status>
<div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
<!-- If there are 5 or less credential tags, show them all with Tag Component -->
<div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
<at-tag tag="tag.name" icon="{{ tag.kind }}" link="/#/credentials/{{ tag.id }}"></at-tag>
</div>
<!-- <at-toggle-tag tag-length="tagValues.length" tags="tagValues"></at-toggle-tag> -->
<!-- <at-tag tag="thing"></at-tag> -->
<!-- If there are 5 or less credential tags, show them all with Tag Component -->
<!-- <div ng-if="tagValues.length <= 5" ng-repeat="tag in tagValues">
<at-tag tag="tag.name" icon="{{ tag.kind }}" link="/#/credentials/{{ tag.id }}"></at-tag>
</div> -->
<!-- If there are 5 or MORE credential tags, handle them accordingly with Toggle Tag Component -->
<at-toggle-tag tag-type="cred" tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag>
<!-- <at-toggle-tag tag-type="cred" tags="tagValues" ng-if="tagValues.length > 5"></at-toggle-tag> -->
</div>
</div>

23
awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js
View File

@ -2,8 +2,8 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants';
const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html');
function controller ($scope, TagService, strings) {
const { tags } = $scope;
function controller (strings) {
// const { tags } = $scope;
const vm = this;
vm.truncatedLength = TRUNCATE_LENGTH;
vm.truncated = TRUNCATED;
@ -13,20 +13,20 @@ function controller ($scope, TagService, strings) {
vm.truncated = !vm.truncated;
};
vm.tags = [];
// vm.tags = [];
// Let the controller handle what type of tag should be passed to the directive
// e.g. default tag, crential tag, etc.
Object.keys(tags).forEach(key => {
if ($scope.tagType === 'cred') {
vm.tags.push(TagService.buildCredentialTag(tags[key]));
} else {
vm.tags.push(TagService.buildTag(tags[key]));
}
});
// Object.keys(tags).forEach(key => {
// if ($scope.tagType === 'cred') {
// vm.tags.push(TagService.buildCredentialTag(tags[key]));
// } else {
// vm.tags.push(TagService.buildTag(tags[key]));
// }
// });
}
controller.$inject = ['$scope', 'TagService', 'ComponentsStrings'];
controller.$inject = ['ComponentsStrings'];
function atToggleTag () {
return {
@ -39,6 +39,7 @@ function atToggleTag () {
scope: {
tags: '=',
tagType: '@',
tagLength: '@',
},
};
}

12
awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html
View File

@ -1,15 +1,15 @@
<div class="ToggleComponent-wrapper">
<div ng-show="vm.truncated" class="ToggleComponent-container">
<div ng-repeat="tag in vm.tags | limitTo: vm.truncatedLength">
<at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
<at-tag ng-if="tagType !== 'cred'" tag="tag.value"></at-tag>
<div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
<at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
<!-- <at-tag tag="tag.value"></at-tag> -->
</div>
<button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_MORE') }}</button>
</div>
<div ng-show="!vm.truncated" class="ToggleComponent-container">
<div ng-repeat="tag in vm.tags">
<at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
<at-tag ng-if="tagType !== 'cred'" tag="tag.value"></at-tag>
<div ng-repeat="tag in tags">
<!-- <at-tag ng-if="tagType === 'cred'" tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag> -->
<at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
</div>
<button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_LESS') }}</button>
</div>