paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-30 03:56:23 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature/dark-mode

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-28 10:26:33 -08:00
parent 34494939ca 5c60d211e2
commit dd51d27cf8
53 changed files with 1171 additions and 703 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src-ui/src/app/app.module.ts
View File

@@ -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,

4
src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts
View File

@@ -14,7 +14,7 @@ export class ConfirmDialogComponent implements OnInit {
public confirmClicked = new EventEmitter()
@Input()
title = "Confirmation"
title = $localize`Confirmation`
@Input()
messageBold
@@ -26,7 +26,7 @@ export class ConfirmDialogComponent implements OnInit {
btnClass = "btn-primary"
@Input()
btnCaption = "Confirm"
btnCaption = $localize`Confirm`
confirmButtonEnabled = true
seconds = 0

10
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.html → src-ui/src/app/components/common/date-dropdown/date-dropdown.component.html
View File

@@ -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}}
@@ -10,12 +10,12 @@
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>After</div>
<div i18n>After</div>
<a *ngIf="dateAfter" class="btn btn-link p-0 m-0" (click)="clearAfter()">
<svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<small>Clear</small>
<small i18n>Clear</small>
</a>
</div>
@@ -26,12 +26,12 @@
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>Before</div>
<div i18n>Before</div>
<a *ngIf="dateBefore" class="btn btn-link p-0 m-0" (click)="clearBefore()">
<svg width="0.8em" height="0.8em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
</svg>
<small>Clear</small>
<small i18n>Clear</small>
</a>
</div>

2
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.scss → src-ui/src/app/components/common/date-dropdown/date-dropdown.component.scss
View File

@@ -1,4 +1,4 @@
.date-filter {
.date-dropdown {
min-width: 250px;
.btn-link {

12
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.spec.ts → src-ui/src/app/components/common/date-dropdown/date-dropdown.component.spec.ts
View File

@@ -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();
});

48
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.ts → src-ui/src/app/components/common/date-dropdown/date-dropdown.component.ts
View File

@@ -8,31 +8,37 @@ 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()
dateBefore: string
@Output()
dateBeforeChange = new EventEmitter<string>()
@Input()
dateAfter: string
@Output()
dateAfterChange = new EventEmitter<string>()
@Input()
title: string
@@ -42,7 +48,7 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
private datesSetDebounce$ = new Subject()
private sub: Subscription
ngOnInit() {
this.sub = this.datesSetDebounce$.pipe(
debounceTime(400)
@@ -61,28 +67,30 @@ 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()
}
onChange() {
this.dateAfterChange.emit(this.dateAfter)
this.dateBeforeChange.emit(this.dateBefore)
this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
}
@@ -91,12 +99,12 @@ export class FilterDropdownDateComponent implements OnInit, OnDestroy {
}
clearBefore() {
this.dateBefore = null;
this.dateBefore = null
this.onChange()
}
clearAfter() {
this.dateAfter = null;
this.dateAfter = null
this.onChange()
}

35
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html Normal file
View File

@@ -0,0 +1,35 @@
<div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 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="!editing && selectionModel.selectionSize() > 0">
<div class="badge bg-secondary text-light rounded-pill badge-corner">
{{selectionModel.selectionSize()}}
</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="selectionModel.items" class="items">
<ng-container *ngFor="let item of selectionModel.items | filter: filterText">
<app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
</ng-container>
</div>
<button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!selectionModel.isDirty()">
<small class="ml-1" [ngClass]="{'font-weight-bold': selectionModel.isDirty()}" i18n>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
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.scss → src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss
View File

25
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts Normal file
View File

@@ -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();
});
});

240
src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts Normal file
View File

@@ -0,0 +1,240 @@
import { Component, EventEmitter, Input, Output, ElementRef, ViewChild } from '@angular/core';
import { FilterPipe } from 'src/app/pipes/filter.pipe';
import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
import { ToggleableItemState } from './toggleable-dropdown-button/toggleable-dropdown-button.component';
import { MatchingModel } from 'src/app/data/matching-model';
import { Subject } from 'rxjs';
export interface ChangedItems {
itemsToAdd: MatchingModel[],
itemsToRemove: MatchingModel[]
}
export class FilterableDropdownSelectionModel {
changed = new Subject<FilterableDropdownSelectionModel>()
multiple = false
items: MatchingModel[] = []
private selectionStates = new Map<number, ToggleableItemState>()
private temporarySelectionStates = new Map<number, ToggleableItemState>()
getSelectedItems() {
return this.items.filter(i => this.temporarySelectionStates.get(i.id) == ToggleableItemState.Selected)
}
set(id: number, state: ToggleableItemState, fireEvent = true) {
if (state == ToggleableItemState.NotSelected) {
this.temporarySelectionStates.delete(id)
} else {
this.temporarySelectionStates.set(id, state)
}
if (fireEvent) {
this.changed.next(this)
}
}
toggle(id: number, fireEvent = true) {
let state = this.temporarySelectionStates.get(id)
if (state == null || state != ToggleableItemState.Selected) {
this.temporarySelectionStates.set(id, ToggleableItemState.Selected)
} else if (state == ToggleableItemState.Selected) {
this.temporarySelectionStates.delete(id)
}
if (!this.multiple) {
for (let key of this.temporarySelectionStates.keys()) {
if (key != id) {
this.temporarySelectionStates.delete(key)
}
}
}
if (!id) {
for (let key of this.temporarySelectionStates.keys()) {
if (key) {
this.temporarySelectionStates.delete(key)
}
}
} else {
this.temporarySelectionStates.delete(null)
}
if (fireEvent) {
this.changed.next(this)
}
}
get(id: number) {
return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
}
selectionSize() {
return this.getSelectedItems().length
}
clear(fireEvent = true) {
this.temporarySelectionStates.clear()
if (fireEvent) {
this.changed.next(this)
}
}
isDirty() {
if (!Array.from(this.temporarySelectionStates.keys()).every(id => this.temporarySelectionStates.get(id) == this.selectionStates.get(id))) {
return true
} else if (!Array.from(this.selectionStates.keys()).every(id => this.selectionStates.get(id) == this.temporarySelectionStates.get(id))) {
return true
} else {
return false
}
}
isNoneSelected() {
return this.selectionSize() == 1 && this.get(null) == ToggleableItemState.Selected
}
init(map) {
this.temporarySelectionStates = map
this.apply()
}
apply() {
this.selectionStates.clear()
this.temporarySelectionStates.forEach((value, key) => {
this.selectionStates.set(key, value)
})
}
reset() {
this.temporarySelectionStates.clear()
this.selectionStates.forEach((value, key) => {
this.temporarySelectionStates.set(key, value)
})
}
diff(): ChangedItems {
return {
itemsToAdd: this.items.filter(item => this.temporarySelectionStates.get(item.id) == ToggleableItemState.Selected && this.selectionStates.get(item.id) != ToggleableItemState.Selected),
itemsToRemove: this.items.filter(item => !this.temporarySelectionStates.has(item.id) && this.selectionStates.has(item.id)),
}
}
}
@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: MatchingModel[]) {
if (items) {
this._selectionModel.items = Array.from(items)
this._selectionModel.items.unshift({
name: "None",
id: null
})
}
}
get items(): MatchingModel[] {
return this._selectionModel.items
}
_selectionModel = new FilterableDropdownSelectionModel()
@Input()
set selectionModel(model: FilterableDropdownSelectionModel) {
if (this.selectionModel) {
this.selectionModel.changed.complete()
model.items = this.selectionModel.items
model.multiple = this.selectionModel.multiple
}
model.changed.subscribe(updatedModel => {
this.selectionModelChange.next(updatedModel)
})
this._selectionModel = model
}
get selectionModel(): FilterableDropdownSelectionModel {
return this._selectionModel
}
@Output()
selectionModelChange = new EventEmitter<FilterableDropdownSelectionModel>()
@Input()
set multiple(value: boolean) {
this.selectionModel.multiple = value
}
get multiple() {
return this.selectionModel.multiple
}
@Input()
title: string
@Input()
icon: string
@Input()
allowSelectNone: boolean = false
@Input()
editing = false
@Output()
apply = new EventEmitter<ChangedItems>()
@Output()
open = new EventEmitter()
constructor(private filterPipe: FilterPipe) {
this.selectionModel = new FilterableDropdownSelectionModel()
}
applyClicked() {
if (this.selectionModel.isDirty()) {
this.dropdown.close()
this.apply.emit(this.selectionModel.diff())
}
}
dropdownOpenChange(open: boolean): void {
if (open) {
setTimeout(() => {
this.listFilterTextInput.nativeElement.focus();
}, 0)
if (this.editing) {
this.selectionModel.reset()
}
this.open.next()
} else {
this.filterText = ''
}
}
listFilterEnter(): void {
let filtered = this.filterPipe.transform(this.items, this.filterText)
if (filtered.length == 1) {
this.selectionModel.toggle(filtered[0].id)
if (this.editing) {
this.applyClicked()
} else {
this.dropdown.close()
}
}
}
}

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

@@ -0,0 +1,20 @@
<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">
<ng-container *ngIf="isChecked()">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-check" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 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.267.267 0 0 1 .02-.022z"/>
</svg>
</ng-container>
<ng-container *ngIf="isPartiallyChecked()">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" class="bi bi-dash" viewBox="0 0 16 16">
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
</ng-container>
</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>

0
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.scss → src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss
View File

25
src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.spec.ts Normal file
View File

@@ -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();
});
});

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

@@ -0,0 +1,51 @@
import { Component, EventEmitter, Input, Output, OnInit } from '@angular/core';
import { MatchingModel } from 'src/app/data/matching-model';
export interface ToggleableItem {
item: MatchingModel,
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()
item: MatchingModel
@Input()
state: ToggleableItemState
@Input()
count: number
@Output()
toggle = new EventEmitter()
get isTag(): boolean {
return 'is_inbox_tag' in this.item
}
toggleItem(): void {
this.toggle.emit()
}
isChecked() {
return this.state == ToggleableItemState.Selected
}
isPartiallyChecked() {
return this.state == ToggleableItemState.PartiallySelected
}
}

4
src-ui/src/app/components/common/select-dialog/select-dialog.component.html
View File

@@ -10,6 +10,6 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="cancelClicked()">Cancel</button>
<button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)">Select</button>
<button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" i18n>Cancel</button>
<button type="button" class="btn btn-primary" (click)="selectClicked.emit(selected)" i18n>Select</button>
</div>

4
src-ui/src/app/components/common/select-dialog/select-dialog.component.ts
View File

@@ -15,10 +15,10 @@ export class SelectDialogComponent implements OnInit {
public selectClicked = new EventEmitter()
@Input()
title = "Select"
title = $localize`Select`
@Input()
message = "Please select an object"
message = $localize`Please select an object`
@Input()
objects: ObjectWithId[] = []

2
src-ui/src/app/components/document-detail/metadata-collapse/metadata-collapse.component.ts
View File

@@ -15,7 +15,7 @@ export class MetadataCollapseComponent implements OnInit {
metadata
@Input()
title = "Metadata"
title = $localize`Metadata`
ngOnInit(): void {
}

61
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html Normal file
View File

@@ -0,0 +1,61 @@
<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)="list.selectNone()">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#slash-circle" />
</svg>&nbsp;<ng-container i18n>Cancel</ng-container>
</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" i18n>Select:</label>
<div class="btn-group">
<button class="btn btn-sm btn-outline-primary" (click)="list.selectPage()">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#file-earmark-check" />
</svg>&nbsp;<ng-container i18n>Page</ng-container>
</button>
<button class="btn btn-sm btn-outline-primary" (click)="list.selectAll()">
<svg width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#check-all" />
</svg>&nbsp;<ng-container i18n>All</ng-container>
</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" i18n>Edit:</label>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Tags" icon="tag-fill"
[items]="tags"
[editing]="true"
[multiple]="true"
(open)="openTagsDropdown()"
[(selectionModel)]="tagSelectionModel"
(apply)="setTags($event)">
</app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Correspondent" icon="person-fill"
[items]="correspondents"
[editing]="true"
(open)="openCorrespondentDropdown()"
[(selectionModel)]="correspondentSelectionModel"
(apply)="setCorrespondents($event)">
</app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" title="Document Type" icon="file-earmark-fill"
[items]="documentTypes"
[editing]="true"
(open)="openDocumentTypeDropdown()"
[(selectionModel)]="documentTypeSelectionModel"
(apply)="setDocumentTypes($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>&nbsp;<ng-container i18n>Delete</ng-container>
</button>
</div>
</div>

0
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.scss Normal file
View File

12
src-ui/src/app/components/filter-editor/filter-dropdown-date/filter-dropdown-date.component.spec.ts → src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts
View File

@@ -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();
});

174
src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts Normal file
View File

@@ -0,0 +1,174 @@
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
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 { 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 { DocumentListViewService } from 'src/app/services/document-list-view.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { DocumentService, SelectionDataItem } from 'src/app/services/rest/document.service';
import { OpenDocumentsService } from 'src/app/services/open-documents.service';
import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
import { ChangedItems, FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
@Component({
selector: 'app-bulk-editor',
templateUrl: './bulk-editor.component.html',
styleUrls: ['./bulk-editor.component.scss']
})
export class BulkEditorComponent {
tags: PaperlessTag[]
correspondents: PaperlessCorrespondent[]
documentTypes: PaperlessDocumentType[]
tagSelectionModel = new FilterableDropdownSelectionModel()
correspondentSelectionModel = new FilterableDropdownSelectionModel()
documentTypeSelectionModel = new FilterableDropdownSelectionModel()
constructor(
private documentTypeService: DocumentTypeService,
private tagService: TagService,
private correspondentService: CorrespondentService,
public list: DocumentListViewService,
private documentService: DocumentService,
private modalService: NgbModal,
private openDocumentService: OpenDocumentsService
) { }
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)
}
private executeBulkOperation(method: string, args): Observable<any> {
return this.documentService.bulkEdit(Array.from(this.list.selected), method, args).pipe(
tap(() => {
this.list.reload()
this.list.selected.forEach(id => {
this.openDocumentService.refreshDocument(id)
})
this.list.selectNone()
})
)
}
private applySelectionData(items: SelectionDataItem[], selectionModel: FilterableDropdownSelectionModel) {
let selectionData = new Map<number, ToggleableItemState>()
items.forEach(i => {
if (i.document_count == this.list.selected.size) {
selectionData.set(i.id, ToggleableItemState.Selected)
} else if (i.document_count > 0) {
selectionData.set(i.id, ToggleableItemState.PartiallySelected)
}
})
selectionModel.init(selectionData)
}
openTagsDropdown() {
this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
this.applySelectionData(s.selected_tags, this.tagSelectionModel)
})
}
openDocumentTypeDropdown() {
this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
this.applySelectionData(s.selected_document_types, this.documentTypeSelectionModel)
})
}
openCorrespondentDropdown() {
this.documentService.getSelectionData(Array.from(this.list.selected)).subscribe(s => {
this.applySelectionData(s.selected_correspondents, this.correspondentSelectionModel)
})
}
setTags(changedTags: ChangedItems) {
if (changedTags.itemsToAdd.length == 0 && changedTags.itemsToRemove.length == 0) return
let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
modal.componentInstance.title = "Confirm Tags Assignment"
modal.componentInstance.message = `This operation will modify some tags on all ${this.list.selected.size} selected document(s).`
modal.componentInstance.btnClass = "btn-warning"
modal.componentInstance.btnCaption = "Confirm"
modal.componentInstance.confirmClicked.subscribe(() => {
this.executeBulkOperation('modify_tags', {"add_tags": changedTags.itemsToAdd.map(t => t.id), "remove_tags": changedTags.itemsToRemove.map(t => t.id)}).subscribe(
response => {
this.tagService.clearCache()
modal.close()
})
}
)
}
setCorrespondents(changedCorrespondents: ChangedItems) {
if (changedCorrespondents.itemsToAdd.length == 0 && changedCorrespondents.itemsToRemove.length == 0) return
let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
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_correspondent', {"correspondent": correspondent ? correspondent.id : null}).subscribe(
response => {
this.correspondentService.clearCache()
modal.close()
}
)
})
}
setDocumentTypes(changedDocumentTypes: ChangedItems) {
if (changedDocumentTypes.itemsToAdd.length == 0 && changedDocumentTypes.itemsToRemove.length == 0) return
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 => {
this.documentService.clearCache()
modal.close()
}
)
})
}
applyDelete() {
let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
modal.componentInstance.delayConfirm(5)
modal.componentInstance.title = "Delete confirm"
modal.componentInstance.messageBold = `This operation will permanently delete all ${this.list.selected.size} selected document(s).`
modal.componentInstance.message = `This operation cannot be undone.`
modal.componentInstance.btnClass = "btn-danger"
modal.componentInstance.btnCaption = "Delete document(s)"
modal.componentInstance.confirmClicked.subscribe(() => {
this.executeBulkOperation("delete", {}).subscribe(
response => {
modal.close()
}
)
})
}
}

4
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@@ -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)="setSelected(!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)="setSelected($event.target.checked)">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>

16
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
View File

@@ -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;
}
}

27
src-ui/src/app/components/document-list/document-list.component.html
View File

@@ -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
</svg>&nbsp;<ng-container i18n>Select</ng-container>
</button>
<div ngbDropdownMenu aria-labelledby="dropdownBasic1" 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 ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
<button ngbDropdownItem (click)="list.selectNone()" i18n>Select none</button>
<button ngbDropdownItem (click)="list.selectPage()" i18n>Select page</button>
<button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
</div>
</div>
@@ -87,7 +78,8 @@
</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"></app-bulk-editor>
</div>
<div class="d-flex justify-content-between align-items-center">
@@ -147,7 +139,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>

153
src-ui/src/app/components/document-list/document-list.component.ts
View File

@@ -1,22 +1,14 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { PaperlessDocument } from 'src/app/data/paperless-document';
import { PaperlessSavedView } from 'src/app/data/paperless-saved-view';
import { DocumentListViewService } from 'src/app/services/document-list-view.service';
import { CorrespondentService } from 'src/app/services/rest/correspondent.service';
import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
import { DocumentService, DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.service';
import { TagService } from 'src/app/services/rest/tag.service';
import { DOCUMENT_SORT_FIELDS } from 'src/app/services/rest/document.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 { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component';
import { SelectDialogComponent } from '../common/select-dialog/select-dialog.component';
import { FilterEditorComponent } from './filter-editor/filter-editor.component';
import { SaveViewConfigDialogComponent } from './save-view-config-dialog/save-view-config-dialog.component';
import { OpenDocumentsService } from 'src/app/services/open-documents.service';
@Component({
selector: 'app-document-list',
@@ -31,12 +23,7 @@ export class DocumentListComponent implements OnInit {
public route: ActivatedRoute,
private router: Router,
private toastService: ToastService,
public modalService: NgbModal,
private correspondentService: CorrespondentService,
private documentTypeService: DocumentTypeService,
private tagService: TagService,
private documentService: DocumentService,
private openDocumentService: OpenDocumentsService) { }
private modalService: NgbModal) { }
@ViewChild("filterEditor")
private filterEditor: FilterEditorComponent
@@ -55,6 +42,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,133 +106,27 @@ 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) {
return item.id
}
private executeBulkOperation(method: string, args): Observable<any> {
return this.documentService.bulkEdit(Array.from(this.list.selected), method, args).pipe(
tap(() => {
this.list.reload()
this.list.selected.forEach(id => {
this.openDocumentService.refreshDocument(id)
})
this.list.selectNone()
})
)
}
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() {
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.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(
response => {
modal.close()
}
)
})
}
bulkRemoveDocumentType() {
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.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(
response => {
modal.close()
}
)
})
}
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(
response => {
modal.close()
}
)
})
}
bulkDelete() {
let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
modal.componentInstance.delayConfirm(5)
modal.componentInstance.title = "Delete confirm"
modal.componentInstance.messageBold = `This operation will permanently delete all ${this.list.selected.size} selected document(s).`
modal.componentInstance.message = `This operation cannot be undone.`
modal.componentInstance.btnClass = "btn-danger"
modal.componentInstance.btnCaption = "Delete document(s)"
modal.componentInstance.confirmClicked.subscribe(() => {
this.executeBulkOperation("delete", {}).subscribe(
response => {
modal.close()
}
)
})
}
}

27
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html Normal file
View File

@@ -0,0 +1,27 @@
<div class="row">
<div class="col mb-2 mb-xl-0">
<div class="form-inline d-flex">
<label class="text-muted mr-2" i18n>Filter by:</label>
<input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title" i18n-placeholder>
</div>
</div>
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<div class="d-flex">
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="tags" [(selectionModel)]="tagSelectionModel" (selectionModelChange)="updateRules()" [multiple]="true" [allowSelectNone]="true" title="Tags" icon="tag-fill" i18n-title></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="correspondents" [(selectionModel)]="correspondentSelectionModel" (selectionModelChange)="updateRules()" [allowSelectNone]="true" title="Correspondents" icon="person-fill" i18n-title></app-filterable-dropdown>
<app-filterable-dropdown class="mr-2 mr-md-3" [items]="documentTypes" [(selectionModel)]="documentTypeSelectionModel" (selectionModelChange)="updateRules()" [allowSelectNone]="true" title="Document types" icon="file-earmark-fill" i18n-title></app-filterable-dropdown>
<app-date-dropdown class="mr-2 mr-md-3" [(dateBefore)]="dateCreatedBefore" [(dateAfter)]="dateCreatedAfter" title="Created" (datesSet)="updateRules()" i18n-title></app-date-dropdown>
<app-date-dropdown [(dateBefore)]="dateAddedBefore" [(dateAfter)]="dateAddedAfter" title="Added" (datesSet)="updateRules()" i18n-title></app-date-dropdown>
</div>
</div>
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>&nbsp;<ng-container i18n>Clear all filters</ng-container>
</button>
</div>
</div>

0
src-ui/src/app/components/filter-editor/filter-editor.component.scss → src-ui/src/app/components/document-list/filter-editor/filter-editor.component.scss
View File

0
src-ui/src/app/components/filter-editor/filter-editor.component.spec.ts → src-ui/src/app/components/document-list/filter-editor/filter-editor.component.spec.ts
View File

192
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts Normal file
View File

@@ -0,0 +1,192 @@
import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } 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 { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
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_ANY_TAG, FILTER_HAS_TAG, FILTER_TITLE } from 'src/app/data/filter-rule-type';
import { FilterableDropdownSelectionModel } from '../../common/filterable-dropdown/filterable-dropdown.component';
import { ToggleableItemState } from '../../common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
@Component({
selector: 'app-filter-editor',
templateUrl: './filter-editor.component.html',
styleUrls: ['./filter-editor.component.scss']
})
export class FilterEditorComponent implements OnInit, OnDestroy {
generateFilterName() {
if (this.filterRules.length == 1) {
let rule = this.filterRules[0]
switch(this.filterRules[0].rule_type) {
case FILTER_CORRESPONDENT:
return $localize`Correspondent: ${this.correspondents.find(c => c.id == +rule.value)?.name}`
case FILTER_DOCUMENT_TYPE:
return $localize`Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
case FILTER_HAS_TAG:
return $localize`Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
}
}
return ""
}
constructor(
private documentTypeService: DocumentTypeService,
private tagService: TagService,
private correspondentService: CorrespondentService
) { }
tags: PaperlessTag[] = []
correspondents: PaperlessCorrespondent[] = []
documentTypes: PaperlessDocumentType[] = []
_titleFilter = ""
tagSelectionModel = new FilterableDropdownSelectionModel()
correspondentSelectionModel = new FilterableDropdownSelectionModel()
documentTypeSelectionModel = new FilterableDropdownSelectionModel()
dateCreatedBefore: string
dateCreatedAfter: string
dateAddedBefore: string
dateAddedAfter: string
@Input()
set filterRules (value: FilterRule[]) {
value.forEach(rule => {
switch (rule.rule_type) {
case FILTER_TITLE:
this._titleFilter = rule.value
break
case FILTER_CREATED_AFTER:
this.dateCreatedAfter = rule.value
break
case FILTER_CREATED_BEFORE:
this.dateCreatedBefore = rule.value
break
case FILTER_ADDED_AFTER:
this.dateAddedAfter = rule.value
break
case FILTER_ADDED_BEFORE:
this.dateAddedBefore = rule.value
break
case FILTER_HAS_TAG:
this.tagSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
break
case FILTER_CORRESPONDENT:
this.correspondentSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
break
case FILTER_DOCUMENT_TYPE:
this.documentTypeSelectionModel.set(+rule.value, ToggleableItemState.Selected, false)
break
}
})
}
@Output()
filterRulesChange = new EventEmitter<FilterRule[]>()
updateRules() {
let filterRules: FilterRule[] = []
if (this._titleFilter) {
filterRules.push({rule_type: FILTER_TITLE, value: this._titleFilter})
}
if (this.tagSelectionModel.isNoneSelected()) {
filterRules.push({rule_type: FILTER_HAS_ANY_TAG, value: "false"})
} else {
this.tagSelectionModel.getSelectedItems().filter(tag => tag.id).forEach(tag => {
filterRules.push({rule_type: FILTER_HAS_TAG, value: tag.id?.toString()})
})
}
this.correspondentSelectionModel.getSelectedItems().forEach(correspondent => {
filterRules.push({rule_type: FILTER_CORRESPONDENT, value: correspondent.id?.toString()})
})
this.documentTypeSelectionModel.getSelectedItems().forEach(documentType => {
filterRules.push({rule_type: FILTER_DOCUMENT_TYPE, value: documentType.id?.toString()})
})
if (this.dateCreatedBefore) {
filterRules.push({rule_type: FILTER_CREATED_BEFORE, value: this.dateCreatedBefore})
}
if (this.dateCreatedAfter) {
filterRules.push({rule_type: FILTER_CREATED_AFTER, value: this.dateCreatedAfter})
}
if (this.dateAddedBefore) {
filterRules.push({rule_type: FILTER_ADDED_BEFORE, value: this.dateAddedBefore})
}
if (this.dateAddedAfter) {
filterRules.push({rule_type: FILTER_ADDED_AFTER, value: this.dateAddedAfter})
}
this.filterRulesChange.next(filterRules)
}
hasFilters() {
return this._titleFilter ||
this.dateAddedAfter || this.dateAddedBefore || this.dateCreatedAfter || this.dateCreatedBefore ||
this.tagSelectionModel.selectionSize() || this.correspondentSelectionModel.selectionSize() || this.documentTypeSelectionModel.selectionSize()
}
get titleFilter() {
return this._titleFilter
}
set titleFilter(value) {
this.titleFilterDebounce.next(value)
}
titleFilterDebounce: Subject<string>
subscription: Subscription
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)
this.titleFilterDebounce = new Subject<string>()
this.subscription = this.titleFilterDebounce.pipe(
debounceTime(400),
distinctUntilChanged()
).subscribe(title => {
this._titleFilter = title
this.updateRules()
})
}
ngOnDestroy() {
this.titleFilterDebounce.complete()
}
clearSelected() {
this._titleFilter = ""
this.tagSelectionModel.clear(false)
this.documentTypeSelectionModel.clear(false)
this.correspondentSelectionModel.clear(false)
this.dateAddedBefore = null
this.dateAddedAfter = null
this.dateCreatedBefore = null
this.dateCreatedAfter = null
this.updateRules()
}
toggleTag(tagId: number) {
this.tagSelectionModel.toggle(tagId)
}
toggleCorrespondent(correspondentId: number) {
this.correspondentSelectionModel.toggle(correspondentId)
}
toggleDocumentType(documentTypeId: number) {
this.documentTypeSelectionModel.toggle(documentTypeId)
}
}

12
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.html
View File

@@ -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>

25
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.spec.ts
View File

@@ -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();
});
});

32
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown-button/filter-dropdown-button.component.ts
View File

@@ -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)
}
}

29
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.html
View File

@@ -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>

58
src-ui/src/app/components/filter-editor/filter-dropdown/filter-dropdown.component.ts
View File

@@ -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()
}
}

27
src-ui/src/app/components/filter-editor/filter-editor.component.html
View File

@@ -1,27 +0,0 @@
<div class="row">
<div class="col mb-2 mb-xl-0">
<div class="form-inline d-flex">
<label class="text-muted mr-2">Filter by:</label>
<input class="form-control form-control-sm flex-grow-1" type="text" [(ngModel)]="titleFilter" placeholder="Title">
</div>
</div>
<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>
</div>
</div>
<div class="w-100 d-xl-none"></div>
<div class="col col-xl-auto mb-2 mb-xl-0">
<button class="btn btn-link btn-sm px-0 mx-0 ml-xl-n4" [disabled]="!hasFilters()" (click)="clearSelected()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
</svg>
Clear all filters
</button>
</div>
</div>

239
src-ui/src/app/components/filter-editor/filter-editor.component.ts
View File

@@ -1,239 +0,0 @@
import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } 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 { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import { NgbDateParserFormatter, NgbDateStruct } from '@ng-bootstrap/ng-bootstrap';
import { DocumentTypeService } from 'src/app/services/rest/document-type.service';
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';
@Component({
selector: 'app-filter-editor',
templateUrl: './filter-editor.component.html',
styleUrls: ['./filter-editor.component.scss']
})
export class FilterEditorComponent implements OnInit, OnDestroy {
generateFilterName() {
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}`
case FILTER_DOCUMENT_TYPE:
return `Type: ${this.documentTypes.find(dt => dt.id == +rule.value)?.name}`
case FILTER_HAS_TAG:
return `Tag: ${this.tags.find(t => t.id == +rule.value)?.name}`
}
}
return ""
}
constructor(
private documentTypeService: DocumentTypeService,
private tagService: TagService,
private correspondentService: CorrespondentService,
private dateParser: NgbDateParserFormatter
) { }
tags: PaperlessTag[] = []
correspondents: PaperlessCorrespondent[]
documentTypes: PaperlessDocumentType[] = []
@Input()
filterRules: FilterRule[]
@Output()
filterRulesChange = new EventEmitter<FilterRule[]>()
hasFilters() {
return this.filterRules.length > 0
}
get selectedTags(): PaperlessTag[] {
let tagRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_HAS_TAG)
return this.tags?.filter(t => tagRules.find(tr => +tr.value == t.id))
}
get selectedCorrespondents(): PaperlessCorrespondent[] {
let correspondentRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_CORRESPONDENT)
return this.correspondents?.filter(c => correspondentRules.find(cr => +cr.value == c.id))
}
get selectedDocumentTypes(): PaperlessDocumentType[] {
let documentTypeRules: FilterRule[] = this.filterRules.filter(fr => fr.rule_type == FILTER_DOCUMENT_TYPE)
return this.documentTypes?.filter(dt => documentTypeRules.find(dtr => +dtr.value == dt.id))
}
get titleFilter() {
let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
return existingRule ? existingRule.value : ''
}
set titleFilter(value) {
this.titleFilterDebounce.next(value)
}
titleFilterDebounce: Subject<string>
subscription: Subscription
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)
this.titleFilterDebounce = new Subject<string>()
this.subscription = this.titleFilterDebounce.pipe(
debounceTime(400),
distinctUntilChanged()
).subscribe(title => {
this.setTitleRule(title)
})
}
ngOnDestroy() {
this.titleFilterDebounce.complete()
// TODO: not sure if both is necessary
this.subscription.unsubscribe()
}
applyFilters() {
this.filterRulesChange.next(this.filterRules)
}
clearSelected() {
this.filterRules = []
this.applyFilters()
}
private toggleFilterRule(filterRuleTypeID: number, value: number) {
let filterRuleType = FILTER_RULE_TYPES.find(t => t.id == filterRuleTypeID)
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)
} else if (filterRuleType.multi || !existingRuleOfSameType) {
// if we allow multiple rules per type, or no rule of this type already exists, push a new rule.
this.filterRules.push({rule_type: filterRuleTypeID, value: value?.toString()})
} else {
// otherwise (i.e., no multi support AND there's already a rule of this type), update the rule.
existingRuleOfSameType.value = value?.toString()
}
this.applyFilters()
}
private setTitleRule(title: string) {
let existingRule = this.filterRules.find(rule => rule.rule_type == FILTER_TITLE)
if (!existingRule && title) {
this.filterRules.push({rule_type: FILTER_TITLE, value: title})
} else if (existingRule && !title) {
this.filterRules.splice(this.filterRules.findIndex(rule => rule.rule_type == FILTER_TITLE), 1)
} else if (existingRule && title) {
existingRule.value = title
}
this.applyFilters()
}
toggleTag(tagId: number) {
this.toggleFilterRule(FILTER_HAS_TAG, tagId)
}
toggleCorrespondent(correspondentId: number) {
this.toggleFilterRule(FILTER_CORRESPONDENT, correspondentId)
}
toggleDocumentType(documentTypeId: number) {
this.toggleFilterRule(FILTER_DOCUMENT_TYPE, documentTypeId)
}
// Date handling
onDatesCreatedSet(dates: DateSelection) {
this.setDateCreatedBefore(dates.before)
this.setDateCreatedAfter(dates.after)
this.applyFilters()
}
onDatesAddedSet(dates: DateSelection) {
this.setDateAddedBefore(dates.before)
this.setDateAddedAfter(dates.after)
this.applyFilters()
}
get dateCreatedBefore(): string {
let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
return createdBeforeRule ? createdBeforeRule.value : null
}
get dateCreatedAfter(): string {
let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
return createdAfterRule ? createdAfterRule.value : null
}
get dateAddedBefore(): string {
let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
return addedBeforeRule ? addedBeforeRule.value : null
}
get dateAddedAfter(): string {
let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
return addedAfterRule ? addedAfterRule.value : null
}
setDateCreatedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
else this.clearDateFilter(FILTER_CREATED_BEFORE)
}
setDateCreatedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
else this.clearDateFilter(FILTER_CREATED_AFTER)
}
setDateAddedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
else this.clearDateFilter(FILTER_ADDED_BEFORE)
}
setDateAddedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
else this.clearDateFilter(FILTER_ADDED_AFTER)
}
setDateFilter(date: string, dateRuleTypeID: number) {
let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
if (existingRule) {
existingRule.value = date
} else {
this.filterRules.push({rule_type: dateRuleTypeID, value: date})
}
}
clearDateFilter(dateRuleTypeID: number) {
let ruleIndex = this.filterRules.findIndex(rule => rule.rule_type == dateRuleTypeID)
if (ruleIndex != -1) {
this.filterRules.splice(ruleIndex, 1)
}
}
}

2
src-ui/src/app/data/matching-model.ts
View File

@@ -29,4 +29,6 @@ export interface MatchingModel extends ObjectWithId {
is_insensitive?: boolean
document_count?: number
}

2
src-ui/src/app/data/paperless-correspondent.ts
View File

@@ -1,8 +1,6 @@
import { MatchingModel } from './matching-model';
export interface PaperlessCorrespondent extends MatchingModel {
document_count?: number
last_correspondence?: Date

2
src-ui/src/app/data/paperless-document-type.ts
View File

@@ -2,6 +2,4 @@ import { MatchingModel } from './matching-model';
export interface PaperlessDocumentType extends MatchingModel {
document_count?: number
}

3
src-ui/src/app/data/paperless-tag.ts
View File

@@ -23,6 +23,5 @@ export interface PaperlessTag extends MatchingModel {
colour?: number
is_inbox_tag?: boolean
document_count?: number
}

4
src-ui/src/app/pipes/filter.pipe.ts
View File

@@ -1,10 +1,12 @@
import { Pipe, PipeTransform } from '@angular/core';
import { ToggleableItem } from 'src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component';
import { MatchingModel } from '../data/matching-model';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
transform(items: MatchingModel[], searchText: string): MatchingModel[] {
if (!items) return [];
if (!searchText) return items;

12
src-ui/src/app/services/rest/abstract-paperless-service.ts
View File

@@ -74,27 +74,31 @@ export abstract class AbstractPaperlessService<T extends ObjectWithId> {
)
}
clearCache() {
this._listAll = null
}
get(id: number): Observable<T> {
return this.http.get<T>(this.getResourceUrl(id))
}
create(o: T): Observable<T> {
this._listAll = null
this.clearCache()
return this.http.post<T>(this.getResourceUrl(), o)
}
delete(o: T): Observable<any> {
this._listAll = null
this.clearCache()
return this.http.delete(this.getResourceUrl(o.id))
}
update(o: T): Observable<T> {
this._listAll = null
this.clearCache()
return this.http.put<T>(this.getResourceUrl(o.id), o)
}
patch(o: T): Observable<T> {
this._listAll = null
this.clearCache()
return this.http.patch<T>(this.getResourceUrl(o.id), o)
}

17
src-ui/src/app/services/rest/document.service.ts
View File

@@ -2,7 +2,7 @@ import { Injectable } from '@angular/core';
import { PaperlessDocument } from 'src/app/data/paperless-document';
import { PaperlessDocumentMetadata } from 'src/app/data/paperless-document-metadata';
import { AbstractPaperlessService } from './abstract-paperless-service';
import { HttpClient } from '@angular/common/http';
import { HttpClient, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Results } from 'src/app/data/results';
import { FilterRule } from 'src/app/data/filter-rule';
@@ -22,6 +22,17 @@ export const DOCUMENT_SORT_FIELDS = [
{ field: 'modified', name: $localize`Modified` }
]
export interface SelectionDataItem {
id: number
document_count: number
}
export interface SelectionData {
selected_correspondents: SelectionDataItem[]
selected_tags: SelectionDataItem[]
selected_document_types: SelectionDataItem[]
}
@Injectable({
providedIn: 'root'
})
@@ -114,4 +125,8 @@ export class DocumentService extends AbstractPaperlessService<PaperlessDocument>
})
}
getSelectionData(ids: number[]): Observable<SelectionData> {
return this.http.post<SelectionData>(this.getResourceUrl(null, 'selection_data'), {"documents": ids})
}
}