2018-06-07 23:12:11 +02:00
|
|
|
<div class="card vault-filters">
|
2018-06-06 23:25:57 +02:00
|
|
|
<div class="card-header">
|
2018-07-26 14:16:37 +02:00
|
|
|
{{'filters' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</div>
|
|
|
|
<div class="card-body">
|
2018-10-25 15:38:52 +02:00
|
|
|
<input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search" class="form-control"
|
|
|
|
[(ngModel)]="searchText" (input)="searchTextChanged()" appAutofocus>
|
2018-06-11 16:09:59 +02:00
|
|
|
<ul class="fa-ul card-ul">
|
2018-06-06 23:25:57 +02:00
|
|
|
<li [ngClass]="{active: selectedAll}">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectAll()">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-th"></i>{{'allItems' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
2018-07-04 05:33:12 +02:00
|
|
|
<li [ngClass]="{active: selectedFavorites}" *ngIf="showFavorites">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectFavorites()">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-star"></i>{{'favorites' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2018-06-07 15:05:25 +02:00
|
|
|
<h3>{{'types' | i18n}}</h3>
|
2018-06-11 16:09:59 +02:00
|
|
|
<ul class="fa-ul card-ul">
|
2018-06-06 23:25:57 +02:00
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Login}">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectType(cipherType.Login)">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-globe"></i>{{'typeLogin' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Card}">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectType(cipherType.Card)">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-credit-card"></i>{{'typeCard' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li [ngClass]="{active: selectedType === cipherType.Identity}">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectType(cipherType.Identity)">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-id-card-o"></i>{{'typeIdentity' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li [ngClass]="{active: selectedType === cipherType.SecureNote}">
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" appStopClick (click)="selectType(cipherType.SecureNote)">
|
2018-06-07 15:05:25 +02:00
|
|
|
<i class="fa-li fa fa-fw fa-sticky-note-o"></i>{{'typeSecureNote' | i18n}}
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
</ul>
|
2018-06-07 23:12:11 +02:00
|
|
|
<p *ngIf="!loaded" class="text-muted">
|
2018-07-18 05:15:15 +02:00
|
|
|
<i class="fa fa-spinner fa-spin" title="{{'loading' | i18n}}"></i>
|
2018-06-07 23:12:11 +02:00
|
|
|
</p>
|
2018-06-06 23:25:57 +02:00
|
|
|
<ng-container *ngIf="loaded">
|
2018-07-04 05:33:12 +02:00
|
|
|
<ng-container *ngIf="showFolders">
|
|
|
|
<h3 class="d-flex">
|
|
|
|
{{'folders' | i18n}}
|
2018-07-18 05:21:23 +02:00
|
|
|
<a href="#" class="text-muted ml-auto" appStopClick (click)="addFolder()" title="{{'addFolder' | i18n}}">
|
2018-07-04 05:33:12 +02:00
|
|
|
<i class="fa fa-plus fa-fw"></i>
|
2018-06-06 23:25:57 +02:00
|
|
|
</a>
|
2018-07-04 05:33:12 +02:00
|
|
|
</h3>
|
|
|
|
<ul class="fa-ul card-ul carets">
|
2018-10-25 18:19:35 +02:00
|
|
|
<ng-template #recursiveFolders let-folders>
|
2018-10-25 15:38:52 +02:00
|
|
|
<li *ngFor="let f of folders" [ngClass]="{active: selectedFolder && f.node.id === selectedFolderId}">
|
|
|
|
<div class="d-flex">
|
2018-11-09 23:50:26 +01:00
|
|
|
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(f.node), 'fa-caret-down': !isCollapsed(f.node)}" (click)="collapse(f.node)"></i>
|
2018-11-09 23:45:01 +01:00
|
|
|
<a href="#" appStopClick (click)="selectFolder(f.node)">{{f.node.name}}</a>
|
2018-10-25 15:38:52 +02:00
|
|
|
<a href="#" class="text-muted ml-auto show-active" appStopClick (click)="editFolder(f.node)"
|
|
|
|
title="{{'editFolder' | i18n}}" *ngIf="f.node.id">
|
|
|
|
<i class="fa fa-pencil fa-fw"></i>
|
|
|
|
</a>
|
|
|
|
</div>
|
2018-11-09 23:45:01 +01:00
|
|
|
<ul class="fa-ul card-ul carets" *ngIf="f.children.length && !isCollapsed(f.node)">
|
2018-10-25 18:19:35 +02:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: f.children }"></ng-container>
|
2018-10-25 15:38:52 +02:00
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ng-template>
|
2018-10-25 18:19:35 +02:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveFolders; context:{ $implicit: nestedFolders }"></ng-container>
|
2018-07-04 05:33:12 +02:00
|
|
|
</ul>
|
|
|
|
</ng-container>
|
|
|
|
<ng-container *ngIf="showCollections && collections && collections.length">
|
2018-06-07 15:05:25 +02:00
|
|
|
<h3>{{'collections' | i18n}}</h3>
|
2018-06-11 16:09:59 +02:00
|
|
|
<ul class="fa-ul card-ul carets">
|
2018-10-25 18:19:35 +02:00
|
|
|
<ng-template #recursiveCollections let-collections>
|
|
|
|
<li *ngFor="let c of collections" [ngClass]="{active: c.node.id === selectedCollectionId}">
|
2018-11-09 23:50:26 +01:00
|
|
|
<i class="fa-li fa" title="{{'toggleCollapse' | i18n}}" [ngClass]="{'fa-caret-right': isCollapsed(c.node), 'fa-caret-down': !isCollapsed(c.node)}" (click)="collapse(c.node)"></i>
|
2018-11-09 23:45:01 +01:00
|
|
|
<a href="#" appStopClick (click)="selectCollection(c.node)">{{c.node.name}}</a>
|
|
|
|
<ul class="fa-ul card-ul carets" *ngIf="c.children.length && !isCollapsed(c.node)">
|
2018-10-25 18:19:35 +02:00
|
|
|
<ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: c.children }"></ng-container>
|
|
|
|
</ul>
|
|
|
|
</li>
|
|
|
|
</ng-template>
|
|
|
|
<ng-container *ngTemplateOutlet="recursiveCollections; context:{ $implicit: nestedCollections }"></ng-container>
|
2018-06-06 23:25:57 +02:00
|
|
|
</ul>
|
2018-07-04 05:33:12 +02:00
|
|
|
</ng-container>
|
2018-06-06 23:25:57 +02:00
|
|
|
</ng-container>
|
|
|
|
</div>
|
|
|
|
</div>
|