External-Mirrors/awx
2
0
Fork 0
mirror of https://github.com/ansible/awx.git synced 2026-03-27 05:45:02 -02: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
Download Patch File Download Diff File Expand all files Collapse all files

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>