83 lines
2.7 KiB
HTML
83 lines
2.7 KiB
HTML
<ng-container *ngIf="!hide">
|
|
<div class="filter-heading">
|
|
<button
|
|
class="toggle-button"
|
|
[attr.aria-expanded]="!isCollapsed(foldersGrouping)"
|
|
(click)="toggleCollapse(foldersGrouping)"
|
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
aria-hidden="true"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(foldersGrouping),
|
|
'bwi-angle-down': !isCollapsed(foldersGrouping)
|
|
}"
|
|
></i>
|
|
</button>
|
|
<h2> {{ foldersGrouping.name | i18n }}</h2>
|
|
<button class="add-button" (click)="addFolder()" appA11yTitle="{{ 'addFolder' | i18n }}">
|
|
<i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<ul class="filter-options" *ngIf="!isCollapsed(foldersGrouping)">
|
|
<ng-template #recursiveFolders let-folders>
|
|
<li
|
|
*ngFor="let f of folders"
|
|
[ngClass]="{
|
|
active: f.node.id === activeFilter.selectedFolderId && activeFilter.selectedFolder
|
|
}"
|
|
class="filter-option"
|
|
>
|
|
<span class="filter-buttons">
|
|
<button
|
|
class="toggle-button"
|
|
*ngIf="f.children.length"
|
|
(click)="toggleCollapse(f.node)"
|
|
appA11yTitle="{{ 'toggleCollapse' | i18n }}"
|
|
>
|
|
<i
|
|
class="bwi bwi-fw"
|
|
aria-hidden="true"
|
|
[ngClass]="{
|
|
'bwi-angle-right': isCollapsed(f.node),
|
|
'bwi-angle-down': !isCollapsed(f.node)
|
|
}"
|
|
></i>
|
|
</button>
|
|
<button
|
|
class="filter-button"
|
|
(click)="applyFilter(f.node)"
|
|
appA11yTitle="{{ 'applyFilter' | i18n }}"
|
|
>
|
|
<i *ngIf="f.children.length === 0" class="bwi bwi-fw bwi-folder" aria-hidden="true"></i>
|
|
{{ f.node.name }}
|
|
</button>
|
|
<button
|
|
class="edit-button"
|
|
*ngIf="f.node.id"
|
|
(click)="editFolder(f.node)"
|
|
appA11yTitle="{{ 'editFolder' | i18n }}"
|
|
>
|
|
<i class="bwi bwi-pencil bwi-fw" aria-hidden="true"></i>
|
|
<span
|
|
(click)="editFolder(f.node)"
|
|
role="button"
|
|
appA11yTitle="{{ 'editFolder' | i18n }}"
|
|
*ngIf="f.node.id"
|
|
>
|
|
</span>
|
|
</button>
|
|
</span>
|
|
<ul class="nested-filter-options" *ngIf="f.children.length && !isCollapsed(f.node)">
|
|
<ng-container *ngTemplateOutlet="recursiveFolders; context: { $implicit: f.children }">
|
|
</ng-container>
|
|
</ul>
|
|
</li>
|
|
</ng-template>
|
|
<ng-container
|
|
*ngTemplateOutlet="recursiveFolders; context: { $implicit: nestedFolders }"
|
|
></ng-container>
|
|
</ul>
|
|
</ng-container>
|