Add expand/collapse toolbar for Job Templates list.

This commit is contained in:
Kia Lam
2019-01-24 13:50:32 -05:00
parent ebc2b821be
commit 9a10811366
4 changed files with 86 additions and 62 deletions

View File

@@ -389,6 +389,16 @@ function ListTemplatesController(
return html; return html;
} }
vm.isCollapsed = true;
vm.onCollapse = () => {
vm.isCollapsed = true;
};
vm.onExpand = () => {
vm.isCollapsed = false;
};
} }
ListTemplatesController.$inject = [ ListTemplatesController.$inject = [

View File

@@ -31,73 +31,87 @@
</div> </div>
</div> </div>
</div> </div>
<at-list-toolbar
ng-if="vm.templates.length > 0"
sort-only="false"
on-collapse="vm.onCollapse"
on-expand="vm.onExpand"
is-collapsed="vm.isCollapsed">
</at-list-toolbar>
<at-list results="vm.templates" id="templates_list"> <at-list results="vm.templates" id="templates_list">
<at-row ng-repeat="template in vm.templates" <at-row ng-repeat="template in vm.templates"
ng-class="{'at-Row--active': (template.id === vm.activeId)}" ng-class="{'at-Row--active': (template.id === vm.activeId), 'at-Row--collapsed': vm.isCollapsed}"
invalid="vm.isInvalid(template)" invalid="vm.isInvalid(template)"
invalid-tooltip="vm.invalidTooltip" invalid-tooltip="vm.invalidTooltip"
id="row-{{ template.id }}"> id="row-{{ template.id }}">
<div class="at-Row-items"> <div class="at-Row-items">
<at-row-item <div class="at-Row-container">
header-value="{{ template.name }}" <div class="at-Row-container">
header-link="/#/templates/job_template/{{ template.id }}" <at-row-item
header-tag="{{ vm.templateTypes[template.type] }}" header-value="{{ template.name }}"
ng-if="template.type === 'job_template'"> header-link="/#/templates/job_template/{{ template.id }}"
</at-row-item> header-tag="{{ vm.templateTypes[template.type] }}"
<at-row-item ng-if="template.type === 'job_template'">
header-value="{{ template.name }}" </at-row-item>
header-link="/#/templates/workflow_job_template/{{ template.id }}" <at-row-item
header-tag="{{ vm.templateTypes[template.type] }}" header-value="{{ template.name }}"
ng-if="template.type === 'workflow_job_template'"> header-link="/#/templates/workflow_job_template/{{ template.id }}"
</at-row-item> header-tag="{{ vm.templateTypes[template.type] }}"
<at-row-item ng-if="template.type === 'workflow_job_template'">
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ACTIVITY') }}" </at-row-item>
smart-status="template"> <at-row-item
</at-row-item> smart-status="template">
<at-row-item </at-row-item>
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}" </div>
value="{{ template.summary_fields.inventory.name }}" <div class="at-Row-actions">
value-link="/#/inventories/{{template.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ template.summary_fields.inventory.id }}"> <at-launch-template template="template"
</at-row-item> ng-show="template.summary_fields.user_capabilities.start">
<at-row-item </at-launch-template>
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}" <at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)"
value="{{ template.summary_fields.project.name }}" ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy"
value-link="/#/projects/{{ template.summary_fields.project.id }}"> tooltip="{{:: vm.strings.get('listActions.COPY', vm.getType(template)) }}">
</at-row-item> </at-row-action>
<at-row-item <at-row-action icon="fa-sitemap" ng-click="vm.openWorkflowVisualizer(template)"
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}" ng-show="!vm.isPortalMode"
tag-values="template.summary_fields.credentials" ng-if="template.type === 'workflow_job_template'"
tags-are-creds="true"> tooltip="{{:: vm.strings.get('list.OPEN_WORKFLOW_VISUALIZER') }}">
<at-toggle-tag ng-init="credTags=vm.buildCredentialTags(template.summary_fields.credentials)" tags="credTags"></at-toggle-tag> </at-row-action>
</at-row-item> <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
<at-row-item ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete"
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}" tooltip="{{:: vm.strings.get('listActions.DELETE', vm.getType(template)) }}">
value-bind-html="{{ vm.getModified(template) }}"> </at-row-action>
</at-row-item> </div>
<at-row-item </div>
label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}" <div class="at-Row-container--wrapped">
value-bind-html="{{ vm.getLastRan(template) }}"> <at-row-item
</at-row-item> label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
<labels-list class="LabelList" show-delete="false" is-row-item="true" state="template"> value="{{ template.summary_fields.inventory.name }}"
</labels-list> value-link="/#/inventories/{{template.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ template.summary_fields.inventory.id }}">
</div> </at-row-item>
<div class="at-Row-actions"> <at-row-item
<at-launch-template template="template" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
ng-show="template.summary_fields.user_capabilities.start"> value="{{ template.summary_fields.project.name }}"
</at-launch-template> value-link="/#/projects/{{ template.summary_fields.project.id }}">
<at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)" </at-row-item>
ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy" <at-row-item
tooltip="{{:: vm.strings.get('listActions.COPY', vm.getType(template)) }}"> label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
</at-row-action> value-bind-html="{{ vm.getModified(template) }}">
<at-row-action icon="fa-sitemap" ng-click="vm.openWorkflowVisualizer(template)" </at-row-item>
ng-show="!vm.isPortalMode" <at-row-item
ng-if="template.type === 'workflow_job_template'" label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
tooltip="{{:: vm.strings.get('list.OPEN_WORKFLOW_VISUALIZER') }}"> value-bind-html="{{ vm.getLastRan(template) }}">
</at-row-action> </at-row-item>
<at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)" </div>
ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete" <div class="at-Row-container--wrapped">
tooltip="{{:: vm.strings.get('listActions.DELETE', vm.getType(template)) }}"> <at-row-item
</at-row-action> label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
tag-values="template.summary_fields.credentials"
tags-are-creds="true">
<at-toggle-tag ng-init="credTags=vm.buildCredentialTags(template.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
</at-row-item>
<labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
</labels-list>
</div>
</div> </div>
</at-row> </at-row>
</at-list> </at-list>

View File

@@ -207,6 +207,7 @@
.at-Row-container { .at-Row-container {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center;
} }
.at-Row-container--wrapped { .at-Row-container--wrapped {

View File

@@ -1,7 +1,6 @@
/** @define SmartStatus */ /** @define SmartStatus */
.SmartStatus-container{ .SmartStatus-container{
max-width: 165px;
display:flex; display:flex;
} }