Hide toggled state & counts when selection spans documents not in view

This commit is contained in:
Michael Shamoon 2020-12-19 23:42:08 -08:00
parent 46f778111c
commit 86da578774
4 changed files with 34 additions and 19 deletions

View File

@ -78,8 +78,15 @@ export class FilterableDropdownComponent {
@Output() @Output()
editingComplete = new EventEmitter() editingComplete = new EventEmitter()
_showCounts: boolean = true
@Input
set showCounts(show: boolean) {
this._showCounts = show
}
get showCounts(): boolean { get showCounts(): boolean {
return this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0) return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected == 0))
} }
constructor(private filterPipe: FilterPipe) { } constructor(private filterPipe: FilterPipe) { }

View File

@ -28,9 +28,9 @@
<div class="col-auto mb-2 mb-xl-0"> <div class="col-auto mb-2 mb-xl-0">
<div class="d-flex"> <div class="d-flex">
<label class="ml-auto mt-1 mr-2">Edit:</label> <label class="ml-auto mt-1 mr-2">Edit:</label>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill" [toggleableItems]="tagsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" (open)="tagsDropdownOpen()" (editingComplete)="applyTags($event)"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" [toggleableItems]="correspondentsToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="correspondentsDropdownOpen()" (editingComplete)="applyCorrespondent($event)"></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown> <app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" [toggleableItems]="documentTypesToggleableItems" [type]="dropdownTypes.Editing" [showCounts]="!this.selectionSpansPages" singular="true" (open)="documentTypesDropdownOpen()" (editingComplete)="applyDocumentType($event)"></app-filterable-dropdown>
</div> </div>
</div> </div>
<div class="w-100 d-xl-none"></div> <div class="w-100 d-xl-none"></div>

View File

@ -22,7 +22,7 @@ export class BulkEditorComponent {
selectedDocuments: Set<number> selectedDocuments: Set<number>
@Input() @Input()
allDocuments: PaperlessDocument[] viewDocuments: PaperlessDocument[]
@Output() @Output()
selectPage = new EventEmitter() selectPage = new EventEmitter()
@ -45,53 +45,61 @@ export class BulkEditorComponent {
@Output() @Output()
delete = new EventEmitter() delete = new EventEmitter()
tags: PaperlessTag[] private tags: PaperlessTag[]
correspondents: PaperlessCorrespondent[] private correspondents: PaperlessCorrespondent[]
documentTypes: PaperlessDocumentType[] private documentTypes: PaperlessDocumentType[]
private initiallySelectedTagsToggleableItems: ToggleableItem[] private initiallySelectedTagsToggleableItems: ToggleableItem[]
private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[] private initiallySelectedCorrespondentsToggleableItems: ToggleableItem[]
private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[] private initiallySelectedDocumentTypesToggleableItems: ToggleableItem[]
dropdownTypes = FilterableDropdownType private dropdownTypes = FilterableDropdownType
get selectionSpansPages(): boolean {
return this.selectedDocuments.length > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd))
}
get tagsToggleableItems(): ToggleableItem[] { get tagsToggleableItems(): ToggleableItem[] {
let tagsToggleableItems = [] let tagsToggleableItems = []
let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id)) let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
if (this.selectionSpansPages) selectedDocuments = []
this.tags?.forEach(t => { this.tags?.forEach(t => {
let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id)) let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id))
let state = ToggleableItemState.NotSelected let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected if (selectedDocuments.length > 0 && selectedDocumentsWithTag.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected else if (selectedDocumentsWithTag.length > 0 && selectedDocumentsWithTag.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
tagsToggleableItems.push( { item: t, state: state, count: selectedDocumentsWithTag.length } ) tagsToggleableItems.push({item: t, state: state, count: selectedDocumentsWithTag.length})
}) })
return tagsToggleableItems return tagsToggleableItems
} }
get correspondentsToggleableItems(): ToggleableItem[] { get correspondentsToggleableItems(): ToggleableItem[] {
let correspondentsToggleableItems = [] let correspondentsToggleableItems = []
let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id)) let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
if (this.selectionSpansPages) selectedDocuments = []
this.correspondents?.forEach(c => { this.correspondents?.forEach(c => {
let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id) let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id)
let state = ToggleableItemState.NotSelected let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected if (selectedDocuments.length > 0 && selectedDocumentsWithCorrespondent.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected else if (selectedDocumentsWithCorrespondent.length > 0 && selectedDocumentsWithCorrespondent.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
correspondentsToggleableItems.push( { item: c, state: state, count: selectedDocumentsWithCorrespondent.length } ) correspondentsToggleableItems.push({item: c, state: state, count: selectedDocumentsWithCorrespondent.length})
}) })
return correspondentsToggleableItems return correspondentsToggleableItems
} }
get documentTypesToggleableItems(): ToggleableItem[] { get documentTypesToggleableItems(): ToggleableItem[] {
let documentTypesToggleableItems = [] let documentTypesToggleableItems = []
let selectedDocuments: PaperlessDocument[] = this.allDocuments.filter(d => this.selectedDocuments.has(d.id)) let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id))
if (this.selectionSpansPages) selectedDocuments = []
this.documentTypes?.forEach(dt => { this.documentTypes?.forEach(dt => {
let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id) let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id)
let state = ToggleableItemState.NotSelected let state = ToggleableItemState.NotSelected
if (selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected if (selectedDocuments.length > 0 && selectedDocumentsWithDocumentType.length == selectedDocuments.length) state = ToggleableItemState.Selected
else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected else if (selectedDocumentsWithDocumentType.length > 0 && selectedDocumentsWithDocumentType.length < selectedDocuments.length) state = ToggleableItemState.PartiallySelected
documentTypesToggleableItems.push( { item: dt, state: state, count: selectedDocumentsWithDocumentType.length } ) documentTypesToggleableItems.push({item: dt, state: state, count: selectedDocumentsWithDocumentType.length})
}) })
return documentTypesToggleableItems return documentTypesToggleableItems
} }

View File

@ -81,7 +81,7 @@
<app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor> <app-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
<app-bulk-editor [hidden]="!isBulkEditing" <app-bulk-editor [hidden]="!isBulkEditing"
[allDocuments]="list.documents" [viewDocuments]="list.documents"
[(selectedDocuments)]="list.selected" [(selectedDocuments)]="list.selected"
(selectPage)="list.selectPage()" (selectPage)="list.selectPage()"
(selectAll)="list.selectAll()" (selectAll)="list.selectAll()"