taskana/web/src/app/administration/components/classification-list/classification-list.compone...

64 lines
2.7 KiB
HTML

<div class="classification-list-full-height">
<!-- ACTION TOOLBAR -->
<li class="list-group-item tab-align" id="wb-action-toolbar">
<div class="row">
<div class="col-xs-6 btn-group">
<button class="btn btn-default" type="button" (click)="addClassification()" data-toggle="tooltip" title="Add">
<span class="material-icons md-20 green-blue">add_circle_outline</span>
</button>
<taskana-import-export-component
class ="btn-group" [currentSelection]="taskanaType.CLASSIFICATIONS">
</taskana-import-export-component>
</div>
<div class="col-xs-6">
<taskana-classification-types-selector
class="pull-right">
</taskana-classification-types-selector>
</div>
</div>
</li>
<!-- FILTER -->
<div class="col-xs-2 category-filter">
<button class="btn btn-default" data-toggle="dropdown" type="button" id="dropdown-classification-filter" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="true">
<svg-icon class="blue" *ngIf="selectedCategory else category_unselected" [src]="(getCategoryIcon(selectedCategory) | async)?.name"
data-toggle="tooltip"></svg-icon>
<ng-template #category_unselected>
<svg-icon data-toggle="tooltip" title="All" class="blue" src="./assets/icons/asterisk.svg"></svg-icon>
</ng-template>
</button>
<ul class="dropdown-menu dropdown-menu-classification" role="menu">
<li>
<a type="button" (click)="selectCategory('');" data-toggle="tooltip">
<svg-icon class="blue" src="./assets/icons/asterisk.svg"></svg-icon>
All
</a>
<a *ngFor="let category of categories$ | async" type="button" (click)="selectCategory(category);" data-toggle="tooltip">
<svg-icon class="blue" [src]="(getCategoryIcon(category) | async)?.name" data-toggle="tooltip" [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
{{category}}
</a>
</li>
</ul>
</div>
<div class="col-xs-8">
<input class="filter-input" [ngModel]="inputValue" (ngModelChange)="inputValue = $event" placeholder="Filter classifications">
</div>
<div class="col-xs-12 horizontal-bottom-divider"></div>
<!-- CLASSIFICATION TREE -->
<taskana-spinner class="col-xs-12" [isRunning]="requestInProgress" positionClass="centered-spinner-whole-screen"></taskana-spinner>
<taskana-tree class="col-xs-12" *ngIf="(classifications && classifications.length) else empty_classifications"
[filterText]="inputValue" [filterIcon]="selectedCategory"></taskana-tree>
<ng-template #empty_classifications>
<div *ngIf="!requestInProgress" class="col-xs-12 container-no-items center-block">
<h3 class="grey">There are no classifications</h3>
<svg-icon class="img-responsive empty-icon" src="./assets/icons/classification-empty.svg"></svg-icon>
</div>
</ng-template>
</div>