paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Live filter badges when editing & hide badges when active filter items in dropdown

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-19 22:54:37 -08:00
parent 7dfcc7f47b
commit 46f778111c
5 changed files with 18 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
View File

@ -21,7 +21,7 @@
</div>
<div *ngIf="toggleableItems" class="items">
<ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
<app-toggleable-dropdown-button [toggleableItem]="toggleableItem" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
<app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
</ng-container>
</div>
</div>

13
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
View File

@ -1,5 +1,4 @@
import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
import { ObjectWithId } from 'src/app/data/object-with-id';
import { PaperlessTag } from 'src/app/data/paperless-tag';
import { PaperlessCorrespondent } from 'src/app/data/paperless-correspondent';
import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
@ -25,10 +24,10 @@ export class FilterableDropdownComponent {
filterText: string
@Input()
set items(items: ObjectWithId[]) {
set items(items: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
if (items) {
this._toggleableItems = items.map(i => {
return {item: i, state: ToggleableItemState.NotSelected}
return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count}
})
}
}
@ -46,13 +45,13 @@ export class FilterableDropdownComponent {
}
@Input()
set itemsSelected(itemsSelected: ObjectWithId[]) {
set itemsSelected(itemsSelected: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) {
this.toggleableItems.forEach(i => {
i.state = (itemsSelected.find(is => is.id == i.item.id)) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected
})
}
get itemsSelected() :ObjectWithId[] {
get itemsSelected() :(PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[] {
return this.toggleableItems.filter(si => si.state == ToggleableItemState.Selected).map(si => si.item)
}
@ -79,6 +78,10 @@ export class FilterableDropdownComponent {
@Output()
editingComplete = new EventEmitter()
get showCounts(): boolean {
return this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0)
}
constructor(private filterPipe: FilterPipe) { }
toggleItem(toggleableItem: ToggleableItem): void {

2
src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html
View File

@ -8,5 +8,5 @@
<app-tag *ngIf="isTag; else displayName" [tag]="toggleableItem?.item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
<ng-template #displayName><small>{{toggleableItem?.item.name}}</small></ng-template>
</div>
<div class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.item.document_count}}</div>
<div *ngIf="showCounts" class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.count}}</div>
</button>

6
src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts
View File

@ -5,7 +5,8 @@ import { PaperlessDocumentType } from 'src/app/data/paperless-document-type';
export interface ToggleableItem {
item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent,
state: ToggleableItemState
state: ToggleableItemState,
count: number
}
export enum ToggleableItemState {
@ -24,6 +25,9 @@ export class ToggleableDropdownButtonComponent {
@Input()
toggleableItem: ToggleableItem
@Input()
showCounts: boolean = true
@Output()
toggle = new EventEmitter()

6
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts
View File

@ -63,7 +63,7 @@ export class BulkEditorComponent {
let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
tagsToggleableItems.push( { item: t, state: state } )
tagsToggleableItems.push( { item: t, state: state, count: selectedDocumentsWithTag.length } )
})
return tagsToggleableItems
}
@ -77,7 +77,7 @@ export class BulkEditorComponent {
let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
correspondentsToggleableItems.push( { item: c, state: state } )
correspondentsToggleableItems.push( { item: c, state: state, count: selectedDocumentsWithCorrespondent.length } )
})
return correspondentsToggleableItems
}
@ -91,7 +91,7 @@ export class BulkEditorComponent {
let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
documentTypesToggleableItems.push( { item: dt, state: state } )
documentTypesToggleableItems.push( { item: dt, state: state, count: selectedDocumentsWithDocumentType.length } )
})
return documentTypesToggleableItems
}