paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-02 13:45:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature-more-like-this

Browse Source
This commit is contained in:
jonaswinkler 2020-12-19 00:06:16 +01:00
commit 557abbc17e
13 changed files with 218 additions and 165 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src-ui/package-lock.json generated
View File

@ -2056,6 +2056,14 @@
"tslib": "^2.0.0" "tslib": "^2.0.0"
} }
}, },
"@ng-select/ng-select": {
"version": "5.0.9",
"resolved": "https://registry.npmjs.org/@ng-select/ng-select/-/ng-select-5.0.9.tgz",
"integrity": "sha512-YZeSAiS8/Nx/eHZJPmOOYL8YmcvSq+dr1P8WIrsKmRA7mueorBpPc5xlUj+nLQbpLtsiQvdWDQspf/ykOvD/lA==",
"requires": {
"tslib": "^2.0.0"
}
},
"@ngtools/webpack": { "@ngtools/webpack": {
"version": "10.2.0", "version": "10.2.0",
"resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.0.tgz", "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-10.2.0.tgz",

1
src-ui/package.json
View File

@ -21,6 +21,7 @@
"@angular/platform-browser-dynamic": "~10.1.5", "@angular/platform-browser-dynamic": "~10.1.5",
"@angular/router": "~10.1.5", "@angular/router": "~10.1.5",
"@ng-bootstrap/ng-bootstrap": "^8.0.0", "@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@ng-select/ng-select": "^5.0.9",
"bootstrap": "^4.5.0", "bootstrap": "^4.5.0",
"ng-bootstrap": "^1.6.3", "ng-bootstrap": "^1.6.3",
"ng2-pdf-viewer": "^6.3.2", "ng2-pdf-viewer": "^6.3.2",

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

@ -54,6 +54,7 @@ import { FileSizePipe } from './pipes/file-size.pipe';
import { FilterPipe } from './pipes/filter.pipe'; import { FilterPipe } from './pipes/filter.pipe';
import { DocumentTitlePipe } from './pipes/document-title.pipe'; import { DocumentTitlePipe } from './pipes/document-title.pipe';
import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component'; import { MetadataCollapseComponent } from './components/document-detail/metadata-collapse/metadata-collapse.component';
import { NgSelectModule } from '@ng-select/ng-select';
@NgModule({ @NgModule({
declarations: [ declarations: [
@ -110,7 +111,8 @@ import { MetadataCollapseComponent } from './components/document-detail/metadata
ReactiveFormsModule, ReactiveFormsModule,
NgxFileDropModule, NgxFileDropModule,
InfiniteScrollModule, InfiniteScrollModule,
PdfViewerModule PdfViewerModule,
NgSelectModule
], ],
providers: [ providers: [
DatePipe, DatePipe,

18
src-ui/src/app/components/common/input/select/select.component.html
View File

@ -1,11 +1,15 @@
<div class="form-group"> <div class="form-group paperless-input-select">
<label [for]="inputId">{{title}}</label> <label [for]="inputId">{{title}}</label>
<div [class.input-group]="showPlusButton()"> <div [class.input-group]="showPlusButton()">
<select class="form-control" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" (blur)="onTouched()" <ng-select name="correspondent" [(ngModel)]="value"
[disabled]="disabled" [style.color]="textColor" [style.background]="backgroundColor"> [disabled]="disabled"
<option *ngIf="allowNull" [ngValue]="null" class="form-control">---</option> [style.color]="textColor"
<option *ngFor="let i of items" [ngValue]="i.id" class="form-control">{{i.name}}</option> [style.background]="backgroundColor"
</select> (change)="onChange(value)"
(blur)="onTouched()">
<ng-option *ngFor="let i of items" [value]="i.id">{{i.name}}</ng-option>
</ng-select>
<div *ngIf="showPlusButton()" class="input-group-append"> <div *ngIf="showPlusButton()" class="input-group-append">
<button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()"> <button class="btn btn-outline-secondary" type="button" (click)="createNew.emit()">
<svg class="buttonicon" fill="currentColor"> <svg class="buttonicon" fill="currentColor">
@ -15,4 +19,4 @@
</div> </div>
</div> </div>
<small *ngIf="hint" class="form-text text-muted">{{hint}}</small> <small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
</div> </div>

1
src-ui/src/app/components/common/input/select/select.component.scss
View File

@ -0,0 +1 @@
// styles for ng-select child are in styles.scss

45
src-ui/src/app/components/common/input/tags/tags.component.html
View File

@ -1,30 +1,41 @@
<div class="form-group"> <div class="form-group paperless-input-select paperless-input-tags">
<label for="exampleFormControlTextarea1">Tags</label> <label for="tags">Tags</label>
<div class="input-group"> <div class="input-group flex-nowrap">
<div class="form-control tags-form-control" id="tags"> <ng-select name="tags" [items]="tags" bindLabel="name" bindValue="id" [(ngModel)]="displayValue"
<app-tag class="mr-2" *ngFor="let id of displayValue" [tag]="getTag(id)" (click)="removeTag(id)"></app-tag> [multiple]="true"
</div> [closeOnSelect]="false"
[disabled]="disabled"
(change)="ngSelectChange()">
<div class="input-group-append" ngbDropdown placement="top-right"> <ng-template ng-label-tmp let-item="item">
<button class="btn btn-outline-secondary" type="button" ngbDropdownToggle></button> <span class="tag-wrap tag-wrap-delete" (click)="removeTag(item.id)">
<div ngbDropdownMenu class="scrollable-menu shadow"> <svg width="1.2em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<button type="button" *ngFor="let tag of tags" ngbDropdownItem (click)="addTag(tag.id)"> <use xlink:href="assets/bootstrap-icons.svg#x"/>
<app-tag [tag]="tag"></app-tag> </svg>
</button> <app-tag style="background-color: none;" [tag]="getTag(item.id)"></app-tag>
</div> </span>
</div> </ng-template>
<ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
<div class="tag-wrap">
<div class="selected-icon d-inline-block mr-1">
<svg *ngIf="displayValue.includes(item.id)" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="assets/bootstrap-icons.svg#check"/>
</svg>
</div>
<app-tag class="mr-2" [tag]="getTag(item.id)"></app-tag>
</div>
</ng-template>
</ng-select>
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" (click)="createTag()"> <button class="btn btn-outline-secondary" type="button" (click)="createTag()">
<svg class="buttonicon" fill="currentColor"> <svg class="buttonicon" fill="currentColor">
<use xlink:href="assets/bootstrap-icons.svg#plus" /> <use xlink:href="assets/bootstrap-icons.svg#plus" />
</svg> </svg>
</button> </button>
</div> </div>
</div> </div>
<small class="form-text text-muted" *ngIf="hint">{{hint}}</small> <small class="form-text text-muted" *ngIf="hint">{{hint}}</small>
</div> </div>

16
src-ui/src/app/components/common/input/tags/tags.component.scss
View File

@ -1,10 +1,12 @@
.tags-form-control { .selected-icon {
height: auto; min-width: 1em;
min-height: 1em;
} }
.tag-wrap {
font-size: 1rem;
}
.scrollable-menu { .tag-wrap-delete {
height: auto; cursor: pointer;
max-height: 300px; }
overflow-x: hidden;
}

23
src-ui/src/app/components/common/input/tags/tags.component.ts
View File

@ -21,7 +21,7 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
onChange = (newValue: number[]) => {}; onChange = (newValue: number[]) => {};
onTouched = () => {}; onTouched = () => {};
writeValue(newValue: number[]): void { writeValue(newValue: number[]): void {
@ -66,29 +66,28 @@ export class TagsComponent implements OnInit, ControlValueAccessor {
removeTag(id) { removeTag(id) {
let index = this.displayValue.indexOf(id) let index = this.displayValue.indexOf(id)
if (index > -1) { if (index > -1) {
this.displayValue.splice(index, 1) let oldValue = this.displayValue
oldValue.splice(index, 1)
this.displayValue = [...oldValue]
this.onChange(this.displayValue) this.onChange(this.displayValue)
} }
} }
addTag(id) {
let index = this.displayValue.indexOf(id)
if (index == -1) {
this.displayValue.push(id)
this.onChange(this.displayValue)
}
}
createTag() { createTag() {
var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'}) var modal = this.modalService.open(TagEditDialogComponent, {backdrop: 'static'})
modal.componentInstance.dialogMode = 'create' modal.componentInstance.dialogMode = 'create'
modal.componentInstance.success.subscribe(newTag => { modal.componentInstance.success.subscribe(newTag => {
this.tagService.listAll().subscribe(tags => { this.tagService.listAll().subscribe(tags => {
this.tags = tags.results this.tags = tags.results
this.addTag(newTag.id) this.displayValue = [...this.displayValue, newTag.id]
this.onChange(this.displayValue)
}) })
}) })
} }
ngSelectChange() {
this.value = this.displayValue
this.onChange(this.displayValue)
}
} }

4
src-ui/src/app/components/document-detail/document-detail.component.html
View File

@ -58,9 +58,9 @@
</div> </div>
<app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time> <app-input-date-time titleDate="Date created" formControlName="created"></app-input-date-time>
<app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent" <app-input-select [items]="correspondents" title="Correspondent" formControlName="correspondent"
allowNull="true" (createNew)="createCorrespondent()"></app-input-select> (createNew)="createCorrespondent()"></app-input-select>
<app-input-select [items]="documentTypes" title="Document type" formControlName="document_type" <app-input-select [items]="documentTypes" title="Document type" formControlName="document_type"
allowNull="true" (createNew)="createDocumentType()"></app-input-select> (createNew)="createDocumentType()"></app-input-select>
<app-input-tags formControlName="tags" title="Tags"></app-input-tags> <app-input-tags formControlName="tags" title="Tags"></app-input-tags>
</ng-template> </ng-template>

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

@ -4,38 +4,39 @@
</button> </button>
<div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}"> <div class="dropdown-menu date-filter shadow pt-0" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<button class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" (click)="clear()">Clear</button> <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)">
<button *ngFor="let range of [7, 30, 'month', 'year']" class="list-group-item small list-goup list-group-item-action d-flex p-2 pl-3" role="menuitem" (click)="setDateQuickFilter(range)"> {{qf.name}}
<ng-container *ngIf="isStringRange(range)">This </ng-container>
{{ range }}
<ng-container *ngIf="!isStringRange(range)"> days</ng-container>
</button> </button>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem"> <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div>Before</div>
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>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>
</a>
</div>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input class="form-control" type="text" placeholder="yyyy-mm-dd" name="before" [(ngModel)]="_dateBefore" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onBeforeSelected($event)" #dpBefore="ngbDatepicker"> <input type="date" class="form-control" id="date_after" [(ngModel)]="dateAfter" (change)="onChangeDebounce()">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-sm" (click)="dpBefore.toggle()" type="button">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
<path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
<div class="list-group-item d-flex flex-column align-items-start" role="menuitem"> <div class="list-group-item d-flex flex-column align-items-start" role="menuitem">
<div>After</div>
<div class="mb-2 d-flex flex-row w-100 justify-content-between small">
<div>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>
</a>
</div>
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input class="form-control form-control-sm" type="text" placeholder="yyyy-mm-dd" name="after" [(ngModel)]="_dateAfter" [maxDate]="this._maxDate" ngbDatepicker (dateSelect)="onAfterSelected($event)" #dpAfter="ngbDatepicker"> <input type="date" class="form-control" id="date_before" [(ngModel)]="dateBefore" (change)="onChangeDebounce()">
<div class="input-group-append">
<button class="btn btn-outline-secondary btn-sm" (click)="dpAfter.toggle()" type="button">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-calendar-date" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
<path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z"/>
</svg>
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

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

@ -1,24 +1,37 @@
import { Component, EventEmitter, Input, Output, ElementRef, ViewChild, SimpleChange } from '@angular/core'; import { formatDate } from '@angular/common';
import { NgbDate, NgbDateStruct, NgbDatepicker } from '@ng-bootstrap/ng-bootstrap'; import { Component, EventEmitter, Input, Output, OnInit, OnDestroy } from '@angular/core';
import { Subject, Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
export interface DateSelection { export interface DateSelection {
before?: NgbDateStruct before?: string
after?: NgbDateStruct after?: string
} }
const FILTER_LAST_7_DAYS = 0
const FILTER_LAST_MONTH = 1
const FILTER_LAST_3_MONTHS = 2
const FILTER_LAST_YEAR = 3
@Component({ @Component({
selector: 'app-filter-dropdown-date', selector: 'app-filter-dropdown-date',
templateUrl: './filter-dropdown-date.component.html', templateUrl: './filter-dropdown-date.component.html',
styleUrls: ['./filter-dropdown-date.component.scss'] styleUrls: ['./filter-dropdown-date.component.scss']
}) })
export class FilterDropdownDateComponent { export class FilterDropdownDateComponent 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"}
]
@Input() @Input()
dateBefore: NgbDateStruct dateBefore: string
@Input() @Input()
dateAfter: NgbDateStruct dateAfter: string
@Input() @Input()
title: string title: string
@ -26,87 +39,65 @@ export class FilterDropdownDateComponent {
@Output() @Output()
datesSet = new EventEmitter<DateSelection>() datesSet = new EventEmitter<DateSelection>()
@ViewChild('dpAfter') dpAfter: NgbDatepicker private datesSetDebounce$ = new Subject()
@ViewChild('dpBefore') dpBefore: NgbDatepicker
_dateBefore: NgbDateStruct private sub: Subscription
_dateAfter: NgbDateStruct
ngOnInit() {
get _maxDate(): NgbDate { this.sub = this.datesSetDebounce$.pipe(
let date = new Date() debounceTime(400)
return NgbDate.from({year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate()}) ).subscribe(() => {
this.onChange()
})
} }
isStringRange(range: any) { ngOnDestroy() {
return typeof range == 'string' if (this.sub) {
} this.sub.unsubscribe()
ngOnChanges(changes: SimpleChange) {
// this is a hacky workaround perhaps because of https://github.com/angular/angular/issues/11097
let dateString: string = ''
let dateAfterChange: SimpleChange
let dateBeforeChange: SimpleChange
if (changes) {
dateAfterChange = changes['dateAfter']
dateBeforeChange = changes['dateBefore']
} }
}
if (this.dpBefore && this.dpAfter) { setDateQuickFilter(qf: number) {
let dpAfterElRef: ElementRef = this.dpAfter['_elRef'] this.dateBefore = null
let dpBeforeElRef: ElementRef = this.dpBefore['_elRef'] let date = new Date()
switch (qf) {
case FILTER_LAST_7_DAYS:
date.setDate(date.getDate() - 7)
break;
if (dateAfterChange && dateAfterChange.currentValue) { case FILTER_LAST_MONTH:
let dateAfterDate = dateAfterChange.currentValue as NgbDateStruct date.setMonth(date.getMonth() - 1)
dateString = `${dateAfterDate.year}-${dateAfterDate.month.toString().padStart(2,'0')}-${dateAfterDate.day.toString().padStart(2,'0')}` break;
dpAfterElRef.nativeElement.value = dateString
} else if (dateBeforeChange && dateBeforeChange.currentValue) { case FILTER_LAST_3_MONTHS:
let dateBeforeDate = dateBeforeChange.currentValue as NgbDateStruct date.setMonth(date.getMonth() - 3)
dateString = `${dateBeforeDate.year}-${dateBeforeDate.month.toString().padStart(2,'0')}-${dateBeforeDate.day.toString().padStart(2,'0')}` break
dpBeforeElRef.nativeElement.value = dateString
} else { case FILTER_LAST_YEAR:
dpAfterElRef.nativeElement.value = dateString date.setFullYear(date.getFullYear() - 1)
dpBeforeElRef.nativeElement.value = dateString break
} }
} this.dateAfter = formatDate(date, 'yyyy-MM-dd', "en-us", "UTC")
this.onChange()
} }
setDateQuickFilter(range: any) { onChange() {
let date = new Date() this.datesSet.emit({after: this.dateAfter, before: this.dateBefore})
let newDate: NgbDateStruct = { year: date.getFullYear(), month: date.getMonth() + 1, day: date.getDate() }
switch (typeof range) {
case 'number':
date.setDate(date.getDate() - range)
newDate.year = date.getFullYear()
newDate.month = date.getMonth() + 1
newDate.day = date.getDate()
break
case 'string':
newDate.day = 1
if (range == 'year') newDate.month = 1
break
default:
break
}
this._dateAfter = newDate
this._dateBefore = null
this.datesSet.emit({after: newDate, before: null})
} }
onBeforeSelected(date: NgbDateStruct) { onChangeDebounce() {
this._dateBefore = date this.datesSetDebounce$.next({after: this.dateAfter, before: this.dateBefore})
this.datesSet.emit({after: this._dateAfter, before: date})
} }
onAfterSelected(date: NgbDateStruct) { clearBefore() {
this._dateAfter = date this.dateBefore = null;
this.datesSet.emit({after: date, before: this._dateBefore}) this.onChange()
} }
clear() { clearAfter() {
this._dateBefore = null this.dateAfter = null;
this._dateAfter = null this.onChange()
this.datesSet.emit({after: null, before: null})
} }
} }

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

@ -179,54 +179,53 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
this.applyFilters() this.applyFilters()
} }
get dateCreatedBefore(): NgbDateStruct { get dateCreatedBefore(): string {
let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE) let createdBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_BEFORE)
return createdBeforeRule ? this.dateParser.parse(createdBeforeRule.value) : null return createdBeforeRule ? createdBeforeRule.value : null
} }
get dateCreatedAfter(): NgbDateStruct { get dateCreatedAfter(): string {
let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER) let createdAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_CREATED_AFTER)
return createdAfterRule ? this.dateParser.parse(createdAfterRule.value) : null return createdAfterRule ? createdAfterRule.value : null
} }
get dateAddedBefore(): NgbDateStruct { get dateAddedBefore(): string {
let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE) let addedBeforeRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_BEFORE)
return addedBeforeRule ? this.dateParser.parse(addedBeforeRule.value) : null return addedBeforeRule ? addedBeforeRule.value : null
} }
get dateAddedAfter(): NgbDateStruct { get dateAddedAfter(): string {
let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER) let addedAfterRule: FilterRule = this.filterRules.find(fr => fr.rule_type == FILTER_ADDED_AFTER)
return addedAfterRule ? this.dateParser.parse(addedAfterRule.value) : null return addedAfterRule ? addedAfterRule.value : null
} }
setDateCreatedBefore(date?: NgbDateStruct) { setDateCreatedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE) if (date) this.setDateFilter(date, FILTER_CREATED_BEFORE)
else this.clearDateFilter(FILTER_CREATED_BEFORE) else this.clearDateFilter(FILTER_CREATED_BEFORE)
} }
setDateCreatedAfter(date?: NgbDateStruct) { setDateCreatedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_CREATED_AFTER) if (date) this.setDateFilter(date, FILTER_CREATED_AFTER)
else this.clearDateFilter(FILTER_CREATED_AFTER) else this.clearDateFilter(FILTER_CREATED_AFTER)
} }
setDateAddedBefore(date?: NgbDateStruct) { setDateAddedBefore(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE) if (date) this.setDateFilter(date, FILTER_ADDED_BEFORE)
else this.clearDateFilter(FILTER_ADDED_BEFORE) else this.clearDateFilter(FILTER_ADDED_BEFORE)
} }
setDateAddedAfter(date?: NgbDateStruct) { setDateAddedAfter(date?: string) {
if (date) this.setDateFilter(date, FILTER_ADDED_AFTER) if (date) this.setDateFilter(date, FILTER_ADDED_AFTER)
else this.clearDateFilter(FILTER_ADDED_AFTER) else this.clearDateFilter(FILTER_ADDED_AFTER)
} }
setDateFilter(date: NgbDateStruct, dateRuleTypeID: number) { setDateFilter(date: string, dateRuleTypeID: number) {
let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID) let existingRule = this.filterRules.find(rule => rule.rule_type == dateRuleTypeID)
let newValue = this.dateParser.format(date)
if (existingRule) { if (existingRule) {
existingRule.value = newValue existingRule.value = date
} else { } else {
this.filterRules.push({rule_type: dateRuleTypeID, value: newValue}) this.filterRules.push({rule_type: dateRuleTypeID, value: date})
} }
} }

42
src-ui/src/styles.scss
View File

@ -1,7 +1,6 @@
@import "theme"; @import "theme";
@import "node_modules/bootstrap/scss/bootstrap"; @import "node_modules/bootstrap/scss/bootstrap";
@import "~@ng-select/ng-select/themes/default.theme.css";
.toolbaricon { .toolbaricon {
width: 1.2em; width: 1.2em;
@ -20,7 +19,7 @@
} }
body { body {
font-size: .875rem; font-size: 0.875rem;
} }
.form-control-dark { .form-control-dark {
@ -65,4 +64,39 @@ body {
display: block; display: block;
background-size: 1rem; background-size: 1rem;
float: right; float: right;
} }
.paperless-input-select {
.ng-select {
position: relative;
flex: 1 1 auto;
margin-bottom: 0;
min-height: calc(1.5em + 0.75rem + 5px);
line-height: 1.5;
.ng-select-container {
height: 100%;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
.ng-value-container .ng-input {
top: 10px;
}
}
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
.ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
background: none;
}
}
}
.paperless-input-tags {
.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value {
background-color: transparent;
}
.ng-select.ng-select-multiple .ng-select-container .ng-value-container {
padding-top: 1px;
}
}