diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 37b3a027d..c78dc3cfe 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -26,12 +26,13 @@ import { ResultHighlightComponent } from './components/search/result-highlight/r import { PageHeaderComponent } from './components/common/page-header/page-header.component'; import { AppFrameComponent } from './components/app-frame/app-frame.component'; import { ToastsComponent } from './components/common/toasts/toasts.component'; -import { FilterEditorComponent } from './components/filter-editor/filter-editor.component'; -import { FilterDropdownComponent } from './components/filter-editor/filter-dropdown/filter-dropdown.component'; -import { FilterDropdownButtonComponent } from './components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component'; -import { FilterDropdownDateComponent } from './components/filter-editor/filter-dropdown-date/filter-dropdown-date.component'; +import { FilterEditorComponent } from './components/document-list/filter-editor/filter-editor.component'; +import { FilterableDropdownComponent } from './components/common/filterable-dropdown/filterable-dropdown.component'; +import { ToggleableDropdownButtonComponent } from './components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'; +import { DateDropdownComponent } from './components/common/date-dropdown/date-dropdown.component'; import { DocumentCardLargeComponent } from './components/document-list/document-card-large/document-card-large.component'; import { DocumentCardSmallComponent } from './components/document-list/document-card-small/document-card-small.component'; +import { BulkEditorComponent } from './components/document-list/bulk-editor/bulk-editor.component'; import { NgxFileDropModule } from 'ngx-file-drop'; import { TextComponent } from './components/common/input/text/text.component'; import { SelectComponent } from './components/common/input/select/select.component'; @@ -54,8 +55,8 @@ import { FileSizePipe } from './pipes/file-size.pipe'; import { FilterPipe } from './pipes/filter.pipe'; import { DocumentTitlePipe } from './pipes/document-title.pipe'; import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'; -import { NgSelectModule } from '@ng-select/ng-select'; import { SelectDialogComponent } from './components/common/select-dialog/select-dialog.component'; +import { NgSelectModule } from '@ng-select/ng-select'; @NgModule({ declarations: [ @@ -80,11 +81,12 @@ import { SelectDialogComponent } from './components/common/select-dialog/select- AppFrameComponent, ToastsComponent, FilterEditorComponent, - FilterDropdownComponent, - FilterDropdownButtonComponent, - FilterDropdownDateComponent, + FilterableDropdownComponent, + ToggleableDropdownButtonComponent, + DateDropdownComponent, DocumentCardLargeComponent, DocumentCardSmallComponent, + BulkEditorComponent, TextComponent, SelectComponent, CheckComponent, diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html similarity index 95% rename from src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html rename to src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html index aca6e836c..ba9f1fafb 100644 --- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html +++ b/src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html @@ -2,7 +2,7 @@ -
+
+
+
+
+
+ +
+
+ +
+ + + +
+ +
+
+
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss similarity index 100% rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss rename to src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts new file mode 100644 index 000000000..3eef95c16 --- /dev/null +++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { FilterableDropodownComponent } from './filterable-dropdown.component'; + +describe('FilterableDropodownComponent', () => { + let component: FilterableDropodownComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ FilterableDropodownComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(FilterableDropodownComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts new file mode 100644 index 000000000..3f0b3c3ad --- /dev/null +++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts @@ -0,0 +1,132 @@ +import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core'; +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'; +import { FilterPipe } from 'src/app/pipes/filter.pipe'; +import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' +import { ToggleableItem, ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component'; + +export enum FilterableDropdownType { + Filtering = 'filtering', + Editing = 'editing' +} + +@Component({ + selector: 'app-filterable-dropdown', + templateUrl: './filterable-dropdown.component.html', + styleUrls: ['./filterable-dropdown.component.scss'] +}) +export class FilterableDropdownComponent { + + @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef + @ViewChild('dropdown') dropdown: NgbDropdown + + filterText: string + + @Input() + set items(items: (PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[]) { + if (items) { + this._toggleableItems = items.map(i => { + return {item: i, state: ToggleableItemState.NotSelected, count: i.document_count} + }) + } + } + + _toggleableItems: ToggleableItem[] = [] + + @Input() + set toggleableItems (toggleableItems: ToggleableItem[]) { + if (this.type == FilterableDropdownType.Editing && this.dropdown?.isOpen()) return + else this._toggleableItems = toggleableItems + } + + get toggleableItems(): ToggleableItem[] { + return this._toggleableItems + } + + @Input() + 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() :(PaperlessTag | PaperlessCorrespondent | PaperlessDocumentType)[] { + return this.toggleableItems.filter(ti => ti.state == ToggleableItemState.Selected).map(ti => ti.item) + } + + @Input() + title: string + + @Input() + icon: string + + @Input() + type: FilterableDropdownType = FilterableDropdownType.Filtering + + types = FilterableDropdownType + + @Input() + singular: boolean = false + + @Input() + showRemoveAll: boolean = false + + @Output() + toggle = new EventEmitter() + + @Output() + open = new EventEmitter() + + @Output() + removeAll = new EventEmitter() + + @Output() + editingComplete = new EventEmitter() + + _showCounts: boolean = true + + @Input() + set showCounts(show: boolean) { + this._showCounts = show + } + + get showCounts(): boolean { + return this._showCounts && (this.type == FilterableDropdownType.Editing || (this.type == FilterableDropdownType.Filtering && this.itemsSelected.length == 0)) + } + + hasBeenToggled:boolean = false + + constructor(private filterPipe: FilterPipe) { } + + toggleItem(toggleableItem: ToggleableItem): void { + if (this.singular && toggleableItem.state == ToggleableItemState.Selected) { + this._toggleableItems.filter(ti => ti.item.id !== toggleableItem.item.id).forEach(ti => ti.state = ToggleableItemState.NotSelected) + } + this.hasBeenToggled = true + this.toggle.emit(toggleableItem.item) + } + + dropdownOpenChange(open: boolean): void { + if (open) { + setTimeout(() => { + this.listFilterTextInput.nativeElement.focus(); + }, 0) + this.hasBeenToggled = false + this.open.next() + } else { + this.filterText = '' + if (this.type == FilterableDropdownType.Editing) this.editingComplete.emit(this.toggleableItems) + } + } + + listFilterEnter(): void { + let filtered = this.filterPipe.transform(this.toggleableItems, this.filterText) + if (filtered.length == 1) { + let toggleableItem = this.toggleableItems.find(ti => ti.item.id == filtered[0].item.id) + if (toggleableItem) toggleableItem.state = ToggleableItemState.Selected + this.toggleItem(filtered[0]) + this.dropdown.close() + } + } +} diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html new file mode 100644 index 000000000..32f9c58ad --- /dev/null +++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html @@ -0,0 +1,12 @@ + diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss similarity index 100% rename from src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss rename to src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts new file mode 100644 index 000000000..ec2868d7c --- /dev/null +++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ToggleableDropdownButtonComponent } from './toggleable-dropdown-button.component'; + +describe('ToggleableDropdownButtonComponent', () => { + let component: ToggleableDropdownButtonComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ToggleableDropdownButtonComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ToggleableDropdownButtonComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts new file mode 100644 index 000000000..4d58023ad --- /dev/null +++ b/src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.ts @@ -0,0 +1,49 @@ +import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core'; +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'; + +export interface ToggleableItem { + item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent, + state: ToggleableItemState, + count: number +} + +export enum ToggleableItemState { + NotSelected = 0, + Selected = 1, + PartiallySelected = 2 +} + +@Component({ + selector: 'app-toggleable-dropdown-button', + templateUrl: './toggleable-dropdown-button.component.html', + styleUrls: ['./toggleable-dropdown-button.component.scss'] +}) +export class ToggleableDropdownButtonComponent { + + @Input() + toggleableItem: ToggleableItem + + @Input() + showCounts: boolean = true + + @Output() + toggle = new EventEmitter() + + get isTag(): boolean { + return 'is_inbox_tag' in this.toggleableItem?.item // ~ this.item instanceof PaperlessTag + } + + toggleItem(): void { + this.toggleableItem.state = (this.toggleableItem.state == ToggleableItemState.NotSelected || this.toggleableItem.state == ToggleableItemState.PartiallySelected) ? ToggleableItemState.Selected : ToggleableItemState.NotSelected + this.toggle.emit(this.toggleableItem) + } + + getSelectedIconName() { + let iconName = '' + if (this.toggleableItem?.state == ToggleableItemState.Selected) iconName = 'check' + else if (this.toggleableItem?.state == ToggleableItemState.PartiallySelected) iconName = 'dash' + return iconName + } +} diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html new file mode 100644 index 000000000..b547b8505 --- /dev/null +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html @@ -0,0 +1,70 @@ +
+
+ +
+
+
+ +
+ + +
+
+
+
+
+ + + + + + + +
+
+
+
+ +
+
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts similarity index 50% rename from src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts rename to src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts index 6bf59e2e7..140d73301 100644 --- a/src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { FilterDropdownDateComponent } from './filter-dropdown-date.component'; +import { BulkEditorComponent } from './bulk-editor.component'; -describe('FilterDropdownDateComponent', () => { - let component: FilterDropdownDateComponent; - let fixture: ComponentFixture; +describe('BulkEditorComponent', () => { + let component: BulkEditorComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ FilterDropdownDateComponent ] + declarations: [ BulkEditorComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(FilterDropdownDateComponent); + fixture = TestBed.createComponent(BulkEditorComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts new file mode 100644 index 000000000..bbf5494f0 --- /dev/null +++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts @@ -0,0 +1,185 @@ +import { Component, EventEmitter, Input, Output } 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'; +import { PaperlessDocument } from 'src/app/data/paperless-document'; +import { TagService } from 'src/app/services/rest/tag.service'; +import { CorrespondentService } from 'src/app/services/rest/correspondent.service'; +import { DocumentTypeService } from 'src/app/services/rest/document-type.service'; +import { DocumentService } from 'src/app/services/rest/document.service'; +import { FilterableDropdownType } from 'src/app/components/common/filterable-dropdown/filterable-dropdown.component'; +import { ToggleableItem, ToggleableItemState } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'; + +export interface ChangedItems { + itemsToAdd: any[], + itemsToRemove: any[] +} + +@Component({ + selector: 'app-bulk-editor', + templateUrl: './bulk-editor.component.html', + styleUrls: ['./bulk-editor.component.scss'] +}) +export class BulkEditorComponent { + + @Input() + selectedDocuments: Set + + @Input() + viewDocuments: PaperlessDocument[] + + @Output() + selectPage = new EventEmitter() + + @Output() + selectAll = new EventEmitter() + + @Output() + selectNone = new EventEmitter() + + @Output() + setTags = new EventEmitter() + + @Output() + setCorrespondents = new EventEmitter() + + @Output() + setDocumentTypes = new EventEmitter() + + @Output() + delete = new EventEmitter() + + tags: PaperlessTag[] + correspondents: PaperlessCorrespondent[] + documentTypes: PaperlessDocumentType[] + + private initialTagsToggleableItems: ToggleableItem[] + private initialCorrespondentsToggleableItems: ToggleableItem[] + private initialDocumentTypesToggleableItems: ToggleableItem[] + + dropdownTypes = FilterableDropdownType + + get selectionSpansPages(): boolean { + return this.selectedDocuments.size > this.viewDocuments.length || !Array.from(this.selectedDocuments).every(sd => this.viewDocuments.find(d => d.id == sd)) + } + + private _tagsToggleableItems: ToggleableItem[] + get tagsToggleableItems(): ToggleableItem[] { + let tagsToggleableItems = [] + let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id)) + if (this.selectionSpansPages) selectedDocuments = [] + + this.tags?.forEach(t => { + let selectedDocumentsWithTag: PaperlessDocument[] = selectedDocuments.filter(d => d.tags.includes(t.id)) + let state = ToggleableItemState.NotSelected + if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithTag.length}) + }) + this._tagsToggleableItems = tagsToggleableItems + return tagsToggleableItems + } + + private _correspondentsToggleableItems: ToggleableItem[] + get correspondentsToggleableItems(): ToggleableItem[] { + let correspondentsToggleableItems = [] + let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id)) + if (this.selectionSpansPages) selectedDocuments = [] + + this.correspondents?.forEach(c => { + let selectedDocumentsWithCorrespondent: PaperlessDocument[] = selectedDocuments.filter(d => d.correspondent == c.id) + let state = ToggleableItemState.NotSelected + if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithCorrespondent.length}) + }) + this._correspondentsToggleableItems = correspondentsToggleableItems + return correspondentsToggleableItems + } + + private _documentTypesToggleableItems: ToggleableItem[] + get documentTypesToggleableItems(): ToggleableItem[] { + let documentTypesToggleableItems = [] + let selectedDocuments: PaperlessDocument[] = this.viewDocuments.filter(d => this.selectedDocuments.has(d.id)) + if (this.selectionSpansPages) selectedDocuments = [] + + this.documentTypes?.forEach(dt => { + let selectedDocumentsWithDocumentType: PaperlessDocument[] = selectedDocuments.filter(d => d.document_type == dt.id) + let state = ToggleableItemState.NotSelected + if (selectedDocuments.length > 0 && 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, count: selectedDocumentsWithDocumentType.length}) + }) + this._documentTypesToggleableItems = documentTypesToggleableItems + return documentTypesToggleableItems + } + + constructor( + private documentTypeService: DocumentTypeService, + private tagService: TagService, + private correspondentService: CorrespondentService, + private documentService: DocumentService + ) { } + + ngOnInit() { + this.tagService.listAll().subscribe(result => this.tags = result.results) + this.correspondentService.listAll().subscribe(result => this.correspondents = result.results) + this.documentTypeService.listAll().subscribe(result => this.documentTypes = result.results) + } + + tagsDropdownOpen() { + this.initialTagsToggleableItems = this._tagsToggleableItems + } + + correspondentsDropdownOpen() { + this.initialCorrespondentsToggleableItems = this._correspondentsToggleableItems + } + + documentTypesDropdownOpen() { + this.initialDocumentTypesToggleableItems = this._documentTypesToggleableItems + } + + applyTags(newTagsToggleableItems: ToggleableItem[]) { + let changedTags = this.checkForChangedItems(this.initialTagsToggleableItems, newTagsToggleableItems) + if (changedTags.itemsToAdd.length > 0 || changedTags.itemsToRemove.length > 0) this.setTags.emit(changedTags) + } + + removeAllTags() { + this.setTags.emit(null) + } + + applyCorrespondent(newCorrespondentsToggleableItems: ToggleableItem[]) { + let changedCorrespondents = this.checkForChangedItems(this.initialCorrespondentsToggleableItems, newCorrespondentsToggleableItems) + if (changedCorrespondents.itemsToAdd.length > 0 || changedCorrespondents.itemsToRemove.length > 0) this.setCorrespondents.emit(changedCorrespondents) + } + + removeAllCorrespondents() { + this.setDocumentTypes.emit(null) + } + + applyDocumentType(newDocumentTypesToggleableItems: ToggleableItem[]) { + let changedDocumentTypes = this.checkForChangedItems(this.initialDocumentTypesToggleableItems, newDocumentTypesToggleableItems) + if (changedDocumentTypes.itemsToAdd.length > 0 || changedDocumentTypes.itemsToRemove.length > 0) this.setDocumentTypes.emit(changedDocumentTypes) + } + + removeAllDocumentTypes() { + this.setDocumentTypes.emit(null) + } + + checkForChangedItems(toggleableItemsA: ToggleableItem[], toggleableItemsB: ToggleableItem[]): ChangedItems { + let itemsToAdd: any[] = [] + let itemsToRemove: any[] = [] + toggleableItemsA.forEach(oldItem => { + let newItem = toggleableItemsB.find(nTTI => nTTI.item.id == oldItem.item.id) + + if (newItem.state == ToggleableItemState.Selected && (oldItem.state == ToggleableItemState.PartiallySelected || oldItem.state == ToggleableItemState.NotSelected)) itemsToAdd.push(newItem.item) + else if (newItem.state == ToggleableItemState.NotSelected && (oldItem.state == ToggleableItemState.Selected || oldItem.state == ToggleableItemState.PartiallySelected)) itemsToRemove.push(newItem.item) + }) + return { itemsToAdd: itemsToAdd, itemsToRemove: itemsToRemove } + } + + applyDelete() { + this.delete.next() + } +} diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html index 658aa1ea0..32736956f 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html @@ -1,9 +1,9 @@ -
+
-
+
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss index 36db2203c..a4af1bb11 100644 --- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss +++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss @@ -8,7 +8,15 @@ } .document-card-check { - display: none + display: none; + position: absolute; + top: 0; + left: 0; + + .custom-control { + margin-left: 4px; + margin-right: -3px; + } } .document-card:hover .document-card-check { @@ -17,8 +25,12 @@ .card-selected { border-color: $primary; + + .document-card-check { + display: block; + } } .doc-img-background-selected { background-color: $primaryFaded; -} \ No newline at end of file +} diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html index 25bcb7468..816b9b3b6 100644 --- a/src-ui/src/app/components/document-list/document-list.component.html +++ b/src-ui/src/app/components/document-list/document-list.component.html @@ -1,25 +1,16 @@
- -
+
-
- - - - - - -
-
@@ -87,11 +78,23 @@
- + + + +
-

Selected {{list.selected.size}} of {{list.collectionSize || 0}} document(s) (filtered)

+

Selected {{list.selected.size}} of {{list.collectionSize || 0}} document{{list.collectionSize > 1 ? 's' : ''}} (filtered)

@@ -146,7 +149,6 @@ -
diff --git a/src-ui/src/app/components/document-list/document-list.component.ts b/src-ui/src/app/components/document-list/document-list.component.ts index f72a92aa9..236bdeeaa 100644 --- a/src-ui/src/app/components/document-list/document-list.component.ts +++ b/src-ui/src/app/components/document-list/document-list.component.ts @@ -12,10 +12,11 @@ import { DocumentService, DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/doc import { TagService } from 'src/app/services/rest/tag.service'; import { SavedViewService } from 'src/app/services/rest/saved-view.service'; import { Toast, ToastService } from 'src/app/services/toast.service'; -import { FilterEditorComponent } from '../filter-editor/filter-editor.component'; +import { FilterEditorComponent } from './filter-editor/filter-editor.component'; import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'; import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component'; import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component'; +import { ChangedItems } from './bulk-editor/bulk-editor.component'; import { OpenDocumentsService } from 'src/app/services/open-documents.service'; @Component({ @@ -55,6 +56,10 @@ export class DocumentListComponent implements OnInit { return DOCUMENT_SORT_FIELDS } + get isBulkEditing(): boolean { + return this.list.selected.size > 0 + } + saveDisplayMode() { localStorage.setItem('document-list:displayMode', this.displayMode) } @@ -115,15 +120,24 @@ export class DocumentListComponent implements OnInit { } clickTag(tagID: number) { - this.filterEditor.toggleTag(tagID) + this.list.selectNone() + setTimeout(() => { + this.filterEditor.toggleTag(tagID) + }) } clickCorrespondent(correspondentID: number) { - this.filterEditor.toggleCorrespondent(correspondentID) + this.list.selectNone() + setTimeout(() => { + this.filterEditor.toggleCorrespondent(correspondentID) + }) } clickDocumentType(documentTypeID: number) { - this.filterEditor.toggleDocumentType(documentTypeID) + this.list.selectNone() + setTimeout(() => { + this.filterEditor.toggleDocumentType(documentTypeID) + }) } trackByDocumentId(index, item: PaperlessDocument) { @@ -142,69 +156,63 @@ export class DocumentListComponent implements OnInit { ) } - bulkSetCorrespondent() { - let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Select correspondent" - modal.componentInstance.message = `Select the correspondent you wish to assign to ${this.list.selected.size} selected document(s):` - this.correspondentService.listAll().subscribe(response => { - modal.componentInstance.objects = response.results - }) - modal.componentInstance.selectClicked.subscribe(selectedId => { - this.executeBulkOperation('set_correspondent', {"correspondent": selectedId}).subscribe( - response => { - modal.close() - } - ) - }) - } - - bulkRemoveCorrespondent() { + bulkSetTags(changedTags: ChangedItems) { let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Remove correspondent" - modal.componentInstance.message = `This operation will remove the correspondent from all ${this.list.selected.size} selected document(s).` + modal.componentInstance.title = "Confirm Tags Assignment" + let action = 'set_tags' + let tags + let messageFragment = '' + let both = changedTags && changedTags.itemsToAdd.length > 0 && changedTags.itemsToRemove.length > 0 + if (!changedTags) { + messageFragment = `remove all tags from` + } else { + if (changedTags.itemsToAdd.length > 0) { + tags = changedTags.itemsToAdd + messageFragment = `assign the tag(s) ${changedTags.itemsToAdd.map(t => t.name).join(', ')} to` + } + if (changedTags.itemsToRemove.length > 0) { + if (!both) { + action = 'remove_tags' + tags = changedTags.itemsToRemove + } else { + messageFragment += ' and ' + } + messageFragment += `remove the tag(s) ${changedTags.itemsToRemove.map(t => t.name).join(', ')} from` + } + } + modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).` + modal.componentInstance.btnClass = "btn-warning" + modal.componentInstance.btnCaption = "Confirm" modal.componentInstance.confirmClicked.subscribe(() => { - this.executeBulkOperation('set_correspondent', {"correspondent": null}).subscribe(r => { - modal.close() - }) - }) - } - - bulkSetDocumentType() { - let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Select document type" - modal.componentInstance.message = `Select the document type you wish to assign to ${this.list.selected.size} selected document(s):` - this.documentTypeService.listAll().subscribe(response => { - modal.componentInstance.objects = response.results - }) - modal.componentInstance.selectClicked.subscribe(selectedId => { - this.executeBulkOperation('set_document_type', {"document_type": selectedId}).subscribe( + // TODO: API endpoints for add/remove multiple tags + this.executeBulkOperation(action, {"tags": tags ? tags.map(t => t.id) : null}).subscribe( response => { - modal.close() + if (!both) modal.close() + else { + this.executeBulkOperation('remove_tags', {"tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe( + response => { + modal.close() + }) + } } ) }) } - bulkRemoveDocumentType() { + bulkSetCorrespondents(changedCorrespondents: ChangedItems) { let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Remove document type" - modal.componentInstance.message = `This operation will remove the document type from all ${this.list.selected.size} selected document(s).` + modal.componentInstance.title = "Confirm Correspondent Assignment" + let correspondent + let messageFragment = 'remove all correspondents from' + if (changedCorrespondents && changedCorrespondents.itemsToAdd.length > 0) { + correspondent = changedCorrespondents.itemsToAdd[0] + messageFragment = `assign the correspondent ${correspondent.name} to` + } + modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).` + modal.componentInstance.btnClass = "btn-warning" + modal.componentInstance.btnCaption = "Confirm" modal.componentInstance.confirmClicked.subscribe(() => { - this.executeBulkOperation('set_document_type', {"document_type": null}).subscribe(r => { - modal.close() - }) - }) - } - - bulkAddTag() { - let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Select tag" - modal.componentInstance.message = `Select the tag you wish to assign to ${this.list.selected.size} selected document(s):` - this.tagService.listAll().subscribe(response => { - modal.componentInstance.objects = response.results - }) - modal.componentInstance.selectClicked.subscribe(selectedId => { - this.executeBulkOperation('add_tag', {"tag": selectedId}).subscribe( + this.executeBulkOperation('set_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe( response => { modal.close() } @@ -212,15 +220,20 @@ export class DocumentListComponent implements OnInit { }) } - bulkRemoveTag() { - let modal = this.modalService.open(SelectDialogComponent, {backdrop: 'static'}) - modal.componentInstance.title = "Select tag" - modal.componentInstance.message = `Select the tag you wish to remove from ${this.list.selected.size} selected document(s):` - this.tagService.listAll().subscribe(response => { - modal.componentInstance.objects = response.results - }) - modal.componentInstance.selectClicked.subscribe(selectedId => { - this.executeBulkOperation('remove_tag', {"tag": selectedId}).subscribe( + bulkSetDocumentTypes(changedDocumentTypes: ChangedItems) { + let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) + modal.componentInstance.title = "Confirm Document Type Assignment" + let documentType + let messageFragment = 'remove all document types from' + if (changedDocumentTypes && changedDocumentTypes.itemsToAdd.length > 0) { + documentType = changedDocumentTypes.itemsToAdd[0] + messageFragment = `assign the document type ${documentType.name} to` + } + modal.componentInstance.message = `This operation will ${messageFragment} all ${this.list.selected.size} selected document(s).` + modal.componentInstance.btnClass = "btn-warning" + modal.componentInstance.btnCaption = "Confirm" + modal.componentInstance.confirmClicked.subscribe(() => { + this.executeBulkOperation('set_document_type', {"document_type": documentType ? documentType.id : null}).subscribe( response => { modal.close() } diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.html b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html similarity index 51% rename from src-ui/src/app/components/filter-editor/filter-editor.component.html rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html index 6847a2902..2d480bfed 100644 --- a/src-ui/src/app/components/filter-editor/filter-editor.component.html +++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html @@ -8,11 +8,11 @@
- - - - - + + + + +
diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.scss b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss similarity index 100% rename from src-ui/src/app/components/filter-editor/filter-editor.component.scss rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.spec.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts similarity index 100% rename from src-ui/src/app/components/filter-editor/filter-editor.component.spec.ts rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts diff --git a/src-ui/src/app/components/filter-editor/filter-editor.component.ts b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts similarity index 98% rename from src-ui/src/app/components/filter-editor/filter-editor.component.ts rename to src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts index 913c738a5..2d88579f9 100644 --- a/src-ui/src/app/components/filter-editor/filter-editor.component.ts +++ b/src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts @@ -10,7 +10,7 @@ import { TagService } from 'src/app/services/rest/tag.service'; import { CorrespondentService } from 'src/app/services/rest/correspondent.service'; import { FilterRule } from 'src/app/data/filter-rule'; import { FILTER_ADDED_AFTER, FILTER_ADDED_BEFORE, FILTER_CORRESPONDENT, FILTER_CREATED_AFTER, FILTER_CREATED_BEFORE, FILTER_DOCUMENT_TYPE, FILTER_HAS_TAG, FILTER_RULE_TYPES, FILTER_TITLE } from 'src/app/data/filter-rule-type'; -import { DateSelection } from './filter-dropdown-date/filter-dropdown-date.component'; +import { DateSelection } from 'src/app/components/common/date-dropdown/date-dropdown.component'; @Component({ selector: 'app-filter-editor', @@ -23,7 +23,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy { if (this.filterRules.length == 1) { let rule = this.filterRules[0] switch(this.filterRules[0].rule_type) { - + case FILTER_CORRESPONDENT: return `Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}` @@ -55,7 +55,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy { @Output() filterRulesChange = new EventEmitter() - + hasFilters() { return this.filterRules.length > 0 } @@ -123,7 +123,7 @@ export class FilterEditorComponent implements OnInit, OnDestroy { let existingRule = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID && rule.value == value?.toString()) let existingRuleOfSameType = this.filterRules.find(rule => rule.rule_type == filterRuleTypeID) - + if (existingRule) { // if this exact rule already exists, remove it in all cases. this.filterRules.splice(this.filterRules.indexOf(existingRule), 1) diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html deleted file mode 100644 index 8dff12a33..000000000 --- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts deleted file mode 100644 index 5cf1fefa2..000000000 --- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { ComponentFixture, TestBed } from '@angular/core/testing'; - -import { FilterDropodownButtonComponent } from './filter-dropdown-button.component'; - -describe('FilterDropodownButtonComponent', () => { - let component: FilterDropodownButtonComponent; - let fixture: ComponentFixture; - - beforeEach(async () => { - await TestBed.configureTestingModule({ - declarations: [ FilterDropodownButtonComponent ] - }) - .compileComponents(); - }); - - beforeEach(() => { - fixture = TestBed.createComponent(FilterDropodownButtonComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts deleted file mode 100644 index d3ddd3cbf..000000000 --- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core'; -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'; - -@Component({ - selector: 'app-filter-dropdown-button', - templateUrl: './filter-dropdown-button.component.html', - styleUrls: ['./filter-dropdown-button.component.scss'] -}) -export class FilterDropdownButtonComponent implements OnInit { - - @Input() - item: PaperlessTag | PaperlessDocumentType | PaperlessCorrespondent - - @Input() - selected: boolean - - @Output() - toggle = new EventEmitter() - - isTag: boolean - - ngOnInit() { - this.isTag = 'is_inbox_tag' in this.item // ~ this.item instanceof PaperlessTag - } - - toggleItem(): void { - this.selected = !this.selected - this.toggle.emit(this.item) - } -} diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html deleted file mode 100644 index d0cbfc3c9..000000000 --- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html +++ /dev/null @@ -1,29 +0,0 @@ -
- -
-
-
-
- -
-
-
- - - -
-
-
-
diff --git a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts b/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts deleted file mode 100644 index b9d3fca6f..000000000 --- a/src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts +++ /dev/null @@ -1,58 +0,0 @@ -import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core'; -import { ObjectWithId } from 'src/app/data/object-with-id'; -import { FilterPipe } from 'src/app/pipes/filter.pipe'; -import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap' - -@Component({ - selector: 'app-filter-dropdown', - templateUrl: './filter-dropdown.component.html', - styleUrls: ['./filter-dropdown.component.scss'] -}) -export class FilterDropdownComponent { - - constructor(private filterPipe: FilterPipe) { } - - @Input() - items: ObjectWithId[] - - @Input() - itemsSelected: ObjectWithId[] - - @Input() - title: string - - @Input() - icon: string - - @Output() - toggle = new EventEmitter() - - @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef - @ViewChild('filterDropdown') filterDropdown: NgbDropdown - - filterText: string - - toggleItem(item: ObjectWithId): void { - this.toggle.emit(item) - } - - isItemSelected(item: ObjectWithId): boolean { - return this.itemsSelected?.find(i => i.id == item.id) !== undefined - } - - dropdownOpenChange(open: boolean): void { - if (open) { - setTimeout(() => { - this.listFilterTextInput.nativeElement.focus(); - }, 0); - } else { - this.filterText = '' - } - } - - listFilterEnter(): void { - let filtered = this.filterPipe.transform(this.items, this.filterText) - if (filtered.length == 1) this.toggleItem(filtered.shift()) - this.filterDropdown.close() - } -} diff --git a/src-ui/src/app/pipes/filter.pipe.ts b/src-ui/src/app/pipes/filter.pipe.ts index f799f40cc..a982e9019 100644 --- a/src-ui/src/app/pipes/filter.pipe.ts +++ b/src-ui/src/app/pipes/filter.pipe.ts @@ -1,16 +1,17 @@ import { Pipe, PipeTransform } from '@angular/core'; +import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component'; @Pipe({ name: 'filter' }) export class FilterPipe implements PipeTransform { - transform(items: any[], searchText: string): any[] { - if (!items) return []; - if (!searchText) return items; + transform(toggleableItems: ToggleableItem[], searchText: string): any[] { + if (!toggleableItems) return []; + if (!searchText) return toggleableItems; - return items.filter(item => { - return Object.keys(item).some(key => { - return String(item[key]).toLowerCase().includes(searchText.toLowerCase()); + return toggleableItems.filter(toggleableItem => { + return Object.keys(toggleableItem.item).some(key => { + return String(toggleableItem.item[key]).toLowerCase().includes(searchText.toLowerCase()); }); }); }