mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Live filter badges when editing & hide badges when active filter items in dropdown
This commit is contained in:
parent
7dfcc7f47b
commit
46f778111c
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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()
|
||||
|
||||
|
@ -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
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user