mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Merge branch 'feature-bulk-edit' of github.com:jonaswinkler/paperless-ng into feature-bulk-edit
This commit is contained in:
commit
3c2fac3d28
@ -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,
|
||||
|
@ -2,7 +2,7 @@
|
||||
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="dateBefore || dateAfter ? 'btn-primary' : 'btn-outline-primary'">
|
||||
{{title}}
|
||||
</button>
|
||||
<div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
|
||||
<div class="dropdown-menu date-dropdown shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
|
||||
<div class="list-group list-group-flush">
|
||||
<button *ngFor="let qf of quickFilters" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(qf.id)">
|
||||
{{qf.name}}
|
@ -1,4 +1,4 @@
|
||||
.date-filter {
|
||||
.date-dropdown {
|
||||
min-width: 250px;
|
||||
|
||||
.btn-link {
|
@ -1,20 +1,20 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { FilterDropodownComponent } from './filter-dropdown.component';
|
||||
import { DateDropdownComponent } from './date-dropdown.component';
|
||||
|
||||
describe('FilterDropodownComponent', () => {
|
||||
let component: FilterDropodownComponent;
|
||||
let fixture: ComponentFixture<FilterDropodownComponent>;
|
||||
describe('DateDropdownComponent', () => {
|
||||
let component: DateDropdownComponent;
|
||||
let fixture: ComponentFixture<DateDropdownComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ FilterDropodownComponent ]
|
||||
declarations: [ DateDropdownComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FilterDropodownComponent);
|
||||
fixture = TestBed.createComponent(DateDropdownComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
@ -8,23 +8,23 @@ export interface DateSelection {
|
||||
after?: string
|
||||
}
|
||||
|
||||
const FILTER_LAST_7_DAYS = 0
|
||||
const FILTER_LAST_MONTH = 1
|
||||
const FILTER_LAST_3_MONTHS = 2
|
||||
const FILTER_LAST_YEAR = 3
|
||||
const LAST_7_DAYS = 0
|
||||
const LAST_MONTH = 1
|
||||
const LAST_3_MONTHS = 2
|
||||
const LAST_YEAR = 3
|
||||
|
||||
@Component({
|
||||
selector: 'app-filter-dropdown-date',
|
||||
templateUrl: './filter-dropdown-date.component.html',
|
||||
styleUrls: ['./filter-dropdown-date.component.scss']
|
||||
selector: 'app-date-dropdown',
|
||||
templateUrl: './date-dropdown.component.html',
|
||||
styleUrls: ['./date-dropdown.component.scss']
|
||||
})
|
||||
export class FilterDropdownDateComponent implements OnInit, OnDestroy {
|
||||
export class DateDropdownComponent implements OnInit, OnDestroy {
|
||||
|
||||
quickFilters = [
|
||||
{id: FILTER_LAST_7_DAYS, name: "Last 7 days"},
|
||||
{id: FILTER_LAST_MONTH, name: "Last month"},
|
||||
{id: FILTER_LAST_3_MONTHS, name: "Last 3 months"},
|
||||
{id: FILTER_LAST_YEAR, name: "Last year"}
|
||||
{id: LAST_7_DAYS, name: "Last 7 days"},
|
||||
{id: LAST_MONTH, name: "Last month"},
|
||||
{id: LAST_3_MONTHS, name: "Last 3 months"},
|
||||
{id: LAST_YEAR, name: "Last year"}
|
||||
]
|
||||
|
||||
@Input()
|
||||
@ -42,7 +42,7 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
|
||||
private datesSetDebounce$ = new Subject()
|
||||
|
||||
private sub: Subscription
|
||||
|
||||
|
||||
ngOnInit() {
|
||||
this.sub = this.datesSetDebounce$.pipe(
|
||||
debounceTime(400)
|
||||
@ -61,22 +61,22 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
|
||||
this.dateBefore = null
|
||||
let date = new Date()
|
||||
switch (qf) {
|
||||
case FILTER_LAST_7_DAYS:
|
||||
case LAST_7_DAYS:
|
||||
date.setDate(date.getDate() - 7)
|
||||
break;
|
||||
|
||||
case FILTER_LAST_MONTH:
|
||||
case LAST_MONTH:
|
||||
date.setMonth(date.getMonth() - 1)
|
||||
break;
|
||||
|
||||
case FILTER_LAST_3_MONTHS:
|
||||
case LAST_3_MONTHS:
|
||||
date.setMonth(date.getMonth() - 3)
|
||||
break
|
||||
|
||||
case FILTER_LAST_YEAR:
|
||||
case LAST_YEAR:
|
||||
date.setFullYear(date.getFullYear() - 1)
|
||||
break
|
||||
|
||||
|
||||
}
|
||||
this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
|
||||
this.onChange()
|
@ -0,0 +1,41 @@
|
||||
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
|
||||
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="type !== types.Editing && itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<div class="d-none d-md-inline">{{title}}</div>
|
||||
<div class="d-inline-block d-md-none">
|
||||
<svg class="toolbaricon" fill="currentColor">
|
||||
<use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
|
||||
</svg>
|
||||
</div>
|
||||
<ng-container *ngIf="type !== types.Editing && itemsSelected?.length > 0">
|
||||
<div class="badge bg-secondary text-light rounded-pill badge-corner">
|
||||
{{itemsSelected?.length}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</button>
|
||||
<div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
|
||||
</div>
|
||||
</div>
|
||||
<button *ngIf="showRemoveAll" role="menuitem" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" (click)="removeAll.next()">
|
||||
<svg class="toolbaricon text-danger" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#x" />
|
||||
</svg>
|
||||
<small class="my-1">Remove All</small>
|
||||
</button>
|
||||
<div *ngIf="toggleableItems" class="items">
|
||||
<ng-container *ngFor="let toggleableItem of toggleableItems | filter: filterText">
|
||||
<app-toggleable-dropdown-button [toggleableItem]="toggleableItem" [showCounts]="showCounts" (toggle)="toggleItem($event)"></app-toggleable-dropdown-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
<button *ngIf="type == types.Editing" class="list-group-item list-group-item-action bg-light" (click)="dropdown.close()" [disabled]="!hasBeenToggled || (toggleableItems | filter: filterText).length == 0">
|
||||
<small class="ml-1" [ngClass]="{'font-weight-bold': hasBeenToggled && (toggleableItems | filter: filterText).length > 0}">Apply</small>
|
||||
<svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -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<FilterableDropodownComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ FilterableDropodownComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FilterableDropodownComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,12 @@
|
||||
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
|
||||
<div class="selected-icon mr-1">
|
||||
<svg *ngIf="getSelectedIconName() !== ''" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use attr.xlink:href="assets/bootstrap-icons.svg#{{getSelectedIconName()}}" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mr-1">
|
||||
<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 *ngIf="showCounts" class="badge badge-light rounded-pill ml-auto mr-1">{{toggleableItem?.count}}</div>
|
||||
</button>
|
@ -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<ToggleableDropdownButtonComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ ToggleableDropdownButtonComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ToggleableDropdownButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -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
|
||||
}
|
||||
}
|
@ -0,0 +1,70 @@
|
||||
<div class="row">
|
||||
<div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
|
||||
<button class="btn btn-sm btn-outline-danger" (click)="selectNone.next()">
|
||||
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
|
||||
</svg>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-100 d-xl-none"></div>
|
||||
<div class="col-auto mb-2 mb-xl-0" role="group" aria-label="Select">
|
||||
<label class="mr-2 mb-0">Select:</label>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-sm btn-outline-primary" (click)="selectPage.next()">
|
||||
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
|
||||
</svg>
|
||||
Page
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-primary" (click)="selectAll.next()">
|
||||
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#check-all" />
|
||||
</svg>
|
||||
All
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 d-xl-none"></div>
|
||||
<div class="col-auto mb-2 mb-xl-0">
|
||||
<div class="d-flex">
|
||||
<label class="ml-auto mt-1 mb-0 mr-2">Edit:</label>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
|
||||
[toggleableItems]="tagsToggleableItems"
|
||||
[type]="dropdownTypes.Editing"
|
||||
[showCounts]="!this.selectionSpansPages"
|
||||
[showRemoveAll]="this.selectionSpansPages"
|
||||
(open)="tagsDropdownOpen()"
|
||||
(removeAll)="removeAllTags()"
|
||||
(editingComplete)="applyTags($event)">
|
||||
</app-filterable-dropdown>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill" singular="true"
|
||||
[toggleableItems]="correspondentsToggleableItems"
|
||||
[type]="dropdownTypes.Editing"
|
||||
[showCounts]="!this.selectionSpansPages"
|
||||
[showRemoveAll]="this.selectionSpansPages"
|
||||
(open)="correspondentsDropdownOpen()"
|
||||
(removeAll)="removeAllCorrespondents()"
|
||||
(editingComplete)="applyCorrespondent($event)">
|
||||
</app-filterable-dropdown>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill" singular="true"
|
||||
[toggleableItems]="documentTypesToggleableItems"
|
||||
[type]="dropdownTypes.Editing"
|
||||
[showCounts]="!this.selectionSpansPages"
|
||||
[showRemoveAll]="this.selectionSpansPages"
|
||||
(open)="documentTypesDropdownOpen()"
|
||||
(removeAll)="removeAllDocumentTypes()"
|
||||
(editingComplete)="applyDocumentType($event)">
|
||||
</app-filterable-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 d-xl-none"></div>
|
||||
<div class="col mb-2 mb-xl-0 d-flex">
|
||||
<button type="button" class="btn btn-sm btn-outline-danger ml-0 ml-lg-auto" (click)="applyDelete()">
|
||||
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#trash" />
|
||||
</svg>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
@ -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<FilterDropdownDateComponent>;
|
||||
describe('BulkEditorComponent', () => {
|
||||
let component: BulkEditorComponent;
|
||||
let fixture: ComponentFixture<BulkEditorComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ FilterDropdownDateComponent ]
|
||||
declarations: [ BulkEditorComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FilterDropdownDateComponent);
|
||||
fixture = TestBed.createComponent(BulkEditorComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
@ -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<number>
|
||||
|
||||
@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()
|
||||
}
|
||||
}
|
@ -1,9 +1,9 @@
|
||||
<div class="col p-2 h-100 document-card">
|
||||
<div class="col p-2 h-100">
|
||||
<div class="card h-100 shadow-sm" [class.card-selected]="selected">
|
||||
<div class="border-bottom" [class.doc-img-background-selected]="selected">
|
||||
<img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected">
|
||||
|
||||
<div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected">
|
||||
<div class="border-right border-bottom bg-light p-1 rounded document-card-check">
|
||||
<div class="custom-control custom-checkbox">
|
||||
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
|
||||
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -1,25 +1,16 @@
|
||||
<app-page-header [title]="getTitle()">
|
||||
|
||||
<div ngbDropdown class="d-inline-block mr-2">
|
||||
<button class="btn btn-sm btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
|
||||
<button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
|
||||
<svg class="toolbaricon" fill="currentColor">
|
||||
<use xlink:href="assets/bootstrap-icons.svg#text-indent-left" />
|
||||
</svg>
|
||||
Bulk edit
|
||||
Select
|
||||
</button>
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow">
|
||||
<div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
|
||||
<button ngbDropdownItem (click)="list.selectPage()">Select page</button>
|
||||
<button ngbDropdownItem (click)="list.selectAll()">Select all</button>
|
||||
<button ngbDropdownItem (click)="list.selectNone()">Select none</button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetCorrespondent()">Set correspondent</button>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveCorrespondent()">Remove correspondent</button>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkSetDocumentType()">Set document type</button>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveDocumentType()">Remove document type</button>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkAddTag()">Add tag</button>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkRemoveTag()">Remove tag</button>
|
||||
<div class="dropdown-divider"></div>
|
||||
<button ngbDropdownItem [disabled]="list.selected.size == 0" (click)="bulkDelete()">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -87,11 +78,23 @@
|
||||
</app-page-header>
|
||||
|
||||
<div class="w-100 mb-2 mb-sm-4">
|
||||
<app-filter-editor [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
|
||||
<app-filter-editor *ngIf="!isBulkEditing" [(filterRules)]="list.filterRules" #filterEditor></app-filter-editor>
|
||||
|
||||
<app-bulk-editor *ngIf="isBulkEditing"
|
||||
[viewDocuments]="list.documents"
|
||||
[(selectedDocuments)]="list.selected"
|
||||
(selectPage)="list.selectPage()"
|
||||
(selectAll)="list.selectAll()"
|
||||
(selectNone)="list.selectNone()"
|
||||
(setTags)="bulkSetTags($event)"
|
||||
(setCorrespondents)="bulkSetCorrespondents($event)"
|
||||
(setDocumentTypes)="bulkSetDocumentTypes($event)"
|
||||
(delete)="bulkDelete()">
|
||||
</app-bulk-editor>
|
||||
</div>
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document(s) <span *ngIf="isFiltered">(filtered)</span></p>
|
||||
<p><span *ngIf="list.selected.size > 0">Selected {{list.selected.size}} of </span>{{list.collectionSize || 0}} document{{list.collectionSize > 1 ? 's' : ''}} <span *ngIf="isFiltered">(filtered)</span></p>
|
||||
<ngb-pagination [pageSize]="list.currentPageSize" [collectionSize]="list.collectionSize" [(page)]="list.currentPage" [maxSize]="5"
|
||||
[rotate]="true" (pageChange)="list.reload()" aria-label="Default pagination"></ngb-pagination>
|
||||
</div>
|
||||
@ -146,7 +149,6 @@
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
<div class="m-n2 row row-cols-paperless-cards" *ngIf="displayMode == 'smallCards'">
|
||||
<app-document-card-small [selected]="list.isSelected(d)" (selectedChange)="list.setSelected(d, $event)" [document]="d" *ngFor="let d of list.documents; trackBy: trackByDocumentId" (clickTag)="clickTag($event)" (clickCorrespondent)="clickCorrespondent($event)"></app-document-card-small>
|
||||
</div>
|
||||
|
@ -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()
|
||||
}
|
||||
|
@ -8,11 +8,11 @@
|
||||
<div class="w-100 d-xl-none"></div>
|
||||
<div class="col col-xl-auto mb-2 mb-xl-0">
|
||||
<div class="d-flex">
|
||||
<app-filter-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filter-dropdown>
|
||||
<app-filter-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filter-dropdown>
|
||||
<app-filter-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filter-dropdown>
|
||||
<app-filter-dropdown-date class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-filter-dropdown-date>
|
||||
<app-filter-dropdown-date [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (datesSet)="onDatesAddedSet($event)"></app-filter-dropdown-date>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [itemsSelected]="selectedTags" title="Tags" icon="tag-fill" (toggle)="toggleTag($event.id)"></app-filterable-dropdown>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [itemsSelected]="selectedCorrespondents" title="Correspondents" icon="person-fill" (toggle)="toggleCorrespondent($event.id)"></app-filterable-dropdown>
|
||||
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [itemsSelected]="selectedDocumentTypes" title="Document types" icon="file-earmark-fill" (toggle)="toggleDocumentType($event.id)"></app-filterable-dropdown>
|
||||
<app-date-dropdown class="mr-2 mr-md-3" [dateBefore]="dateCreatedBefore" [dateAfter]="dateCreatedAfter" title="Created" (datesSet)="onDatesCreatedSet($event)"></app-date-dropdown>
|
||||
<app-date-dropdown [dateBefore]="dateAddedBefore" [dateAfter]="dateAddedAfter" title="Added" (datesSet)="onDatesAddedSet($event)"></app-date-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-100 d-xl-none"></div>
|
@ -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<FilterRule[]>()
|
||||
|
||||
|
||||
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)
|
@ -1,12 +0,0 @@
|
||||
<button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-left-0 border-right-0 border-bottom" role="menuitem" (click)="toggleItem()">
|
||||
<div class="selected-icon mr-1">
|
||||
<svg *ngIf="selected" 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"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="mr-1">
|
||||
<app-tag *ngIf="isTag; else displayName" [tag]="item" [clickable]="true" linkTitle="Filter by tag"></app-tag>
|
||||
<ng-template #displayName><small>{{item.name}}</small></ng-template>
|
||||
</div>
|
||||
<div class="badge badge-light rounded-pill ml-auto mr-1">{{item.document_count}}</div>
|
||||
</button>
|
@ -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<FilterDropodownButtonComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
declarations: [ FilterDropodownButtonComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FilterDropodownButtonComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
@ -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)
|
||||
}
|
||||
}
|
@ -1,29 +0,0 @@
|
||||
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #filterDropdown="ngbDropdown">
|
||||
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="itemsSelected?.length > 0 ? 'btn-primary' : 'btn-outline-primary'">
|
||||
<div class="d-none d-md-inline">{{title}}</div>
|
||||
<div class="d-inline-block d-md-none">
|
||||
<svg class="toolbaricon" fill="currentColor">
|
||||
<use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
|
||||
</svg>
|
||||
</div>
|
||||
<ng-container *ngIf="itemsSelected?.length > 0">
|
||||
<div class="badge bg-secondary text-light rounded-pill badge-corner">
|
||||
{{itemsSelected?.length}}
|
||||
</div>
|
||||
</ng-container>
|
||||
</button>
|
||||
<div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
|
||||
<div class="list-group list-group-flush">
|
||||
<div class="list-group-item">
|
||||
<div class="input-group input-group-sm">
|
||||
<input class="form-control" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="items" class="items">
|
||||
<ng-container *ngFor="let item of items | filter: filterText; let i = index">
|
||||
<app-filter-dropdown-button [item]="item" [selected]="isItemSelected(item)" (toggle)="toggleItem($event)"></app-filter-dropdown-button>
|
||||
</ng-container>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
@ -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()
|
||||
}
|
||||
}
|
@ -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());
|
||||
});
|
||||
});
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user