paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Clear button & visual tweaks

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-09 00:40:23 -08:00
parent 0d48aea308
commit 0f635d1bb2
3 changed files with 44 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src-ui/src/app/components/document-list/document-list.component.html
View File

@@ -78,12 +78,14 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<input class="list-group-item form-control" type="text" [(ngModel)]="filterTagsText" placeholder="Filter tags"> <input class="list-group-item form-control" type="text" [(ngModel)]="filterTagsText" placeholder="Filter tags">
<ng-container *ngIf="(tags | filter: filterTagsText).length > 0"> <ng-container *ngIf="(tags | filter: filterTagsText).length > 0">
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let tag of tags | filter: filterTagsText; let i = index" (click)="toggleFilterByTag(tag.id)"> <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let tag of tags | filter: filterTagsText; let i = index" (click)="toggleFilterByTag(tag.id)">
<div class="selected-icon mr-1">
<svg *ngIf="currentViewIncludesTag(tag.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg *ngIf="currentViewIncludesTag(tag.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/> <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg> </svg>
{{tag.name}} </div>
<span class="badge bg-primary text-light rounded-pill">{{tag.document_count}}</span> <div>{{tag.name}}</div>
<div class="badge bg-primary text-light rounded-pill ml-auto">{{tag.document_count}}</div>
</button> </button>
</ng-container> </ng-container>
</div> </div>
@@ -96,12 +98,14 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<input class="list-group-item form-control" type="text" [(ngModel)]="filterCorrespondentsText" placeholder="Filter correspondents"> <input class="list-group-item form-control" type="text" [(ngModel)]="filterCorrespondentsText" placeholder="Filter correspondents">
<ng-container *ngIf="(correspondents | filter: filterCorrespondentsText).length > 0"> <ng-container *ngIf="(correspondents | filter: filterCorrespondentsText).length > 0">
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: filterCorrespondentsText; let i = index" (click)="toggleFilterByCorrespondent(correspondent.id)"> <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let correspondent of correspondents | filter: filterCorrespondentsText; let i = index" (click)="toggleFilterByCorrespondent(correspondent.id)">
<div class="selected-icon mr-1">
<svg *ngIf="currentViewIncludesCorrespondent(correspondent.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg *ngIf="currentViewIncludesCorrespondent(correspondent.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/> <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg> </svg>
{{correspondent.name}} </div>
<span class="badge bg-primary text-light rounded-pill">{{correspondent.document_count}}</span> <div>{{correspondent.name}}</div>
<div class="badge bg-primary text-light rounded-pill ml-auto">{{correspondent.document_count}}</div>
</button> </button>
</ng-container> </ng-container>
</div> </div>
@@ -114,18 +118,27 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<input class="list-group-item form-control" type="text" [(ngModel)]="filterDocumentTypesText" placeholder="Filter tags"> <input class="list-group-item form-control" type="text" [(ngModel)]="filterDocumentTypesText" placeholder="Filter tags">
<ng-container *ngIf="(documentTypes | filter: filterDocumentTypesText).length > 0"> <ng-container *ngIf="(documentTypes | filter: filterDocumentTypesText).length > 0">
<button class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: filterDocumentTypesText; let i = index" (click)="toggleFilterByDocumentType(documentType.id)"> <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let documentType of documentTypes | filter: filterDocumentTypesText; let i = index" (click)="toggleFilterByDocumentType(documentType.id)">
<div class="selected-icon mr-1">
<svg *ngIf="currentViewIncludesDocumentType(documentType.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <svg *ngIf="currentViewIncludesDocumentType(documentType.id)" width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-check" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/> <path fill-rule="evenodd" d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.236.236 0 0 1 .02-.022z"/>
</svg> </svg>
{{documentType.name}} </div>
<span class="badge bg-primary text-light rounded-pill">{{documentType.document_count}}</span> <div>{{documentType.name}}</div>
<div class="badge bg-primary text-light rounded-pill ml-auto">{{documentType.document_count}}</div>
</button> </button>
</ng-container> </ng-container>
</div> </div>
</div> </div>
</div> </div>
<button class="btn-link border-0 bg-transparent ml-3 text-muted" *ngIf="currentViewIncludesQuickFilter()" (click)="filterEditor.clearClicked()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
Clear
</button>
</div> </div>
</div> </div>

5
src-ui/src/app/components/document-list/document-list.component.scss
View File

@@ -1,4 +1,9 @@
.quick-filter { .quick-filter {
min-width: 250px; min-width: 250px;
max-height: 400px; max-height: 400px;
.selected-icon {
min-width: 1em;
min-height: 1em;
}
} }

9
src-ui/src/app/components/document-list/document-list.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit, ViewChild } from '@angular/core';
import { Title } from '@angular/platform-browser'; import { Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
@@ -17,6 +17,7 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
import { TagService } from 'src/app/services/rest/tag.service'; import { TagService } from 'src/app/services/rest/tag.service';
import { CorrespondentService } from 'src/app/services/rest/correspondent.service'; import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
import { DocumentTypeService } from 'src/app/services/rest/document-type.service'; import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
import { FilterEditorComponent } from 'src/app/components/filter-editor/filter-editor.component';
@Component({ @Component({
selector: 'app-document-list', selector: 'app-document-list',
@@ -45,6 +46,8 @@ export class DocumentListComponent implements OnInit {
correspondents: PaperlessCorrespondent[] = [] correspondents: PaperlessCorrespondent[] = []
documentTypes: PaperlessDocumentType[] = [] documentTypes: PaperlessDocumentType[] = []
@ViewChild(FilterEditorComponent) filterEditor;
get isFiltered() { get isFiltered() {
return this.list.filterRules?.length > 0 return this.list.filterRules?.length > 0
} }
@@ -210,4 +213,8 @@ export class DocumentListComponent implements OnInit {
return this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id) !== -1 return this.findRuleIndex(FILTER_DOCUMENT_TYPE, document_type_id) !== -1
} }
currentViewIncludesQuickFilter() {
return this.list.filterRules.find(rule => rule.type.id == FILTER_HAS_TAG || rule.type.id == FILTER_CORRESPONDENT || rule.type.id == FILTER_DOCUMENT_TYPE) !== undefined
}
} }