mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
Use ng select
This commit is contained in:
parent
1eb2842f5a
commit
b828424aca
@ -1732,7 +1732,7 @@
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">11</context>
|
||||
<context context-type="linenumber">10</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
|
||||
@ -3344,19 +3344,19 @@
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">50</context>
|
||||
<context context-type="linenumber">56</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">76</context>
|
||||
<context context-type="linenumber">82</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">126</context>
|
||||
<context context-type="linenumber">137</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">152</context>
|
||||
<context context-type="linenumber">163</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/input/date/date.component.html</context>
|
||||
@ -3371,19 +3371,19 @@
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">51</context>
|
||||
<context context-type="linenumber">57</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">77</context>
|
||||
<context context-type="linenumber">83</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">127</context>
|
||||
<context context-type="linenumber">138</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">153</context>
|
||||
<context context-type="linenumber">164</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/input/date/date.component.html</context>
|
||||
@ -3502,44 +3502,55 @@
|
||||
<context context-type="linenumber">168</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="6312759212949884929" datatype="html">
|
||||
<source>Relative dates</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">27</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">110</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="6052766076365105714" datatype="html">
|
||||
<source>now</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">25</context>
|
||||
<context context-type="linenumber">32</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">101</context>
|
||||
<context context-type="linenumber">114</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="5203279511751768967" datatype="html">
|
||||
<source>From</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">42</context>
|
||||
<context context-type="linenumber">48</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">118</context>
|
||||
<context context-type="linenumber">129</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="1640609344969975994" datatype="html">
|
||||
<source>To</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">68</context>
|
||||
<context context-type="linenumber">74</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">144</context>
|
||||
<context context-type="linenumber">155</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="231679111972850796" datatype="html">
|
||||
<source>Added</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.html</context>
|
||||
<context context-type="linenumber">86</context>
|
||||
<context context-type="linenumber">92</context>
|
||||
</context-group>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/edit-dialog/workflow-edit-dialog/workflow-edit-dialog.component.ts</context>
|
||||
@ -3562,28 +3573,28 @@
|
||||
<source>Within 1 week</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
|
||||
<context context-type="linenumber">67</context>
|
||||
<context context-type="linenumber">70</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="123064370501514576" datatype="html">
|
||||
<source>Within 1 month</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
|
||||
<context context-type="linenumber">72</context>
|
||||
<context context-type="linenumber">75</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="1027161426440526546" datatype="html">
|
||||
<source>Within 3 months</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
|
||||
<context context-type="linenumber">77</context>
|
||||
<context context-type="linenumber">80</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="226779700214642230" datatype="html">
|
||||
<source>Within 1 year</source>
|
||||
<context-group purpose="location">
|
||||
<context context-type="sourcefile">src/app/components/common/dates-dropdown/dates-dropdown.component.ts</context>
|
||||
<context context-type="linenumber">82</context>
|
||||
<context context-type="linenumber">85</context>
|
||||
</context-group>
|
||||
</trans-unit>
|
||||
<trans-unit id="8743659855412792665" datatype="html">
|
||||
|
@ -7,27 +7,33 @@
|
||||
<div class="dropdown-menu date-dropdown shadow p-2" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
|
||||
<div class="row d-flex">
|
||||
<div class="col border-end">
|
||||
<h6 class="dropdown-header border-bottom" i18n>Created</h6>
|
||||
<div class="list-group list-group-flush">
|
||||
<h6 class="dropdown-header border-bottom" i18n>Created</h6>
|
||||
@for (rd of relativeDates; track rd) {
|
||||
<button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setCreatedRelativeDate(rd.id)">
|
||||
<div class="selected-icon">
|
||||
@if (createdRelativeDate === rd.id) {
|
||||
<i-bs width="1em" height="1em" name="check"></i-bs>
|
||||
}
|
||||
</div>
|
||||
<div class="d-flex justify-content-between w-100 align-items-center ps-2">
|
||||
<div class="pe-4">
|
||||
{{rd.name}}
|
||||
</div>
|
||||
<div class="text-muted small pe-2">
|
||||
<span class="small">
|
||||
{{ rd.date | customDate:'mediumDate' }} – <ng-container i18n>now</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
|
||||
<div class="list-group-item d-flex p-2" role="menuitem">
|
||||
<div class="selected-icon">
|
||||
@if (createdRelativeDate) {
|
||||
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearCreatedRelativeDate()">
|
||||
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
|
||||
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
<div class="input-group input-group-sm small ps-1 pe-2">
|
||||
<ng-select class="w-100" name="createdRelativeDate"
|
||||
[items]="relativeDates" [(ngModel)]="createdRelativeDate"
|
||||
bindValue="id"
|
||||
bindLabel="name"
|
||||
placeholder="Relative dates"
|
||||
i18n-placeholder
|
||||
(change)="onSetCreatedRelativeDate($event)">
|
||||
<ng-template ng-option-tmp let-item="item">
|
||||
{{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} – <ng-container i18n>now</ng-container></span>
|
||||
</ng-template>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="list-group-item d-flex p-2" role="menuitem">
|
||||
|
||||
<div class="selected-icon">
|
||||
@ -85,27 +91,32 @@
|
||||
<div class="col">
|
||||
<h6 class="dropdown-header border-bottom" i18n>Added</h6>
|
||||
<div class="list-group list-group-flush">
|
||||
@for (rd of relativeDates; track rd) {
|
||||
<button class="list-group-item small list-goup list-group-item-action d-flex p-2" role="menuitem" (click)="setAddedRelativeDate(rd.id)">
|
||||
<div class="selected-icon">
|
||||
@if (addedRelativeDate === rd.id) {
|
||||
<i-bs width="1em" height="1em" name="check"></i-bs>
|
||||
}
|
||||
</div>
|
||||
<div class="d-flex justify-content-between w-100 align-items-center ps-2">
|
||||
<div class="pe-4">
|
||||
{{rd.name}}
|
||||
</div>
|
||||
<div class="text-muted small pe-2">
|
||||
<span class="small">
|
||||
{{ rd.date | customDate:'mediumDate' }} – <ng-container i18n>now</ng-container>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
}
|
||||
<div class="list-group-item d-flex p-2" role="menuitem">
|
||||
|
||||
<div class="selected-icon">
|
||||
@if (addedRelativeDate) {
|
||||
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedRelativeDate()">
|
||||
<i-bs width="1em" height="1em" name="check" class="variant-unfocused"></i-bs>
|
||||
<i-bs width="1em" height="1em" name="x" class="variant-focused text-primary"></i-bs>
|
||||
</a>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="input-group input-group-sm small ps-1 pe-2">
|
||||
<ng-select class="w-100" name="addedRelativeDate"
|
||||
[items]="relativeDates" [(ngModel)]="addedRelativeDate"
|
||||
bindValue="id"
|
||||
bindLabel="name"
|
||||
placeholder="Relative dates"
|
||||
i18n-placeholder
|
||||
(change)="onSetAddedRelativeDate($event)">
|
||||
<ng-template ng-option-tmp let-item="item">
|
||||
{{ item.name }} <span class="ms-2 text-muted small">{{ item.date | customDate:'mediumDate' }} – <ng-container i18n>now</ng-container></span>
|
||||
</ng-template>
|
||||
</ng-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-group-item d-flex p-2" role="menuitem">
|
||||
<div class="selected-icon">
|
||||
@if (addedDateFrom) {
|
||||
<a class="text-light focus-variants" href="javascript:void(0)" (click)="clearAddedFrom()">
|
||||
|
@ -82,10 +82,12 @@ describe('DatesDropdownComponent', () => {
|
||||
it('should support relative dates', fakeAsync(() => {
|
||||
let result: DateSelection
|
||||
component.datesSet.subscribe((date) => (result = date))
|
||||
component.setCreatedRelativeDate(null)
|
||||
component.setCreatedRelativeDate(RelativeDate.WITHIN_1_WEEK)
|
||||
component.setAddedRelativeDate(null)
|
||||
component.setAddedRelativeDate(RelativeDate.WITHIN_1_WEEK)
|
||||
component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
|
||||
component.onSetCreatedRelativeDate({
|
||||
id: RelativeDate.WITHIN_1_WEEK,
|
||||
} as any)
|
||||
component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK // normally set by ngModel binding in dropdown
|
||||
component.onSetAddedRelativeDate({ id: RelativeDate.WITHIN_1_WEEK } as any)
|
||||
tick(500)
|
||||
expect(result).toEqual({
|
||||
createdFrom: null,
|
||||
@ -147,8 +149,19 @@ describe('DatesDropdownComponent', () => {
|
||||
expect(component.addedDateTo).toBeNull()
|
||||
})
|
||||
|
||||
it('should support clearRelativeDate', () => {
|
||||
component.createdRelativeDate = RelativeDate.WITHIN_1_WEEK
|
||||
component.clearCreatedRelativeDate()
|
||||
expect(component.createdRelativeDate).toBeNull()
|
||||
|
||||
component.addedRelativeDate = RelativeDate.WITHIN_1_WEEK
|
||||
component.clearAddedRelativeDate()
|
||||
expect(component.addedRelativeDate).toBeNull()
|
||||
})
|
||||
|
||||
it('should limit keyboard events', () => {
|
||||
const input: HTMLInputElement = fixture.nativeElement.querySelector('input')
|
||||
const input: HTMLInputElement =
|
||||
fixture.nativeElement.querySelector('input.form-control')
|
||||
let event: KeyboardEvent = new KeyboardEvent('keypress', {
|
||||
key: '9',
|
||||
})
|
||||
@ -163,4 +176,19 @@ describe('DatesDropdownComponent', () => {
|
||||
input.dispatchEvent(event)
|
||||
expect(eventSpy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should support debounce', fakeAsync(() => {
|
||||
let result: DateSelection
|
||||
component.datesSet.subscribe((date) => (result = date))
|
||||
component.onChangeDebounce()
|
||||
tick(500)
|
||||
expect(result).toEqual({
|
||||
createdFrom: null,
|
||||
createdTo: null,
|
||||
createdRelativeDateID: null,
|
||||
addedFrom: null,
|
||||
addedTo: null,
|
||||
addedRelativeDateID: null,
|
||||
})
|
||||
}))
|
||||
})
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { NgClass } from '@angular/common'
|
||||
import { NgClass, NgTemplateOutlet } from '@angular/common'
|
||||
import {
|
||||
Component,
|
||||
EventEmitter,
|
||||
@ -13,6 +13,7 @@ import {
|
||||
NgbDatepickerModule,
|
||||
NgbDropdownModule,
|
||||
} from '@ng-bootstrap/ng-bootstrap'
|
||||
import { NgSelectModule } from '@ng-select/ng-select'
|
||||
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
|
||||
import { Subject, Subscription } from 'rxjs'
|
||||
import { debounceTime } from 'rxjs/operators'
|
||||
@ -32,10 +33,10 @@ export interface DateSelection {
|
||||
}
|
||||
|
||||
export enum RelativeDate {
|
||||
WITHIN_1_WEEK = 0,
|
||||
WITHIN_1_MONTH = 1,
|
||||
WITHIN_3_MONTHS = 2,
|
||||
WITHIN_1_YEAR = 3,
|
||||
WITHIN_1_WEEK = 1,
|
||||
WITHIN_1_MONTH = 2,
|
||||
WITHIN_3_MONTHS = 3,
|
||||
WITHIN_1_YEAR = 4,
|
||||
}
|
||||
|
||||
@Component({
|
||||
@ -49,9 +50,11 @@ export enum RelativeDate {
|
||||
NgxBootstrapIconsModule,
|
||||
NgbDatepickerModule,
|
||||
NgbDropdownModule,
|
||||
NgSelectModule,
|
||||
FormsModule,
|
||||
ReactiveFormsModule,
|
||||
NgClass,
|
||||
NgTemplateOutlet,
|
||||
],
|
||||
})
|
||||
export class DatesDropdownComponent implements OnInit, OnDestroy {
|
||||
@ -88,38 +91,38 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
|
||||
|
||||
// created
|
||||
@Input()
|
||||
createdDateTo: string
|
||||
createdDateTo: string = null
|
||||
|
||||
@Output()
|
||||
createdDateToChange = new EventEmitter<string>()
|
||||
|
||||
@Input()
|
||||
createdDateFrom: string
|
||||
createdDateFrom: string = null
|
||||
|
||||
@Output()
|
||||
createdDateFromChange = new EventEmitter<string>()
|
||||
|
||||
@Input()
|
||||
createdRelativeDate: RelativeDate
|
||||
createdRelativeDate: RelativeDate = null
|
||||
|
||||
@Output()
|
||||
createdRelativeDateChange = new EventEmitter<number>()
|
||||
|
||||
// added
|
||||
@Input()
|
||||
addedDateTo: string
|
||||
addedDateTo: string = null
|
||||
|
||||
@Output()
|
||||
addedDateToChange = new EventEmitter<string>()
|
||||
|
||||
@Input()
|
||||
addedDateFrom: string
|
||||
addedDateFrom: string = null
|
||||
|
||||
@Output()
|
||||
addedDateFromChange = new EventEmitter<string>()
|
||||
|
||||
@Input()
|
||||
addedRelativeDate: RelativeDate
|
||||
addedRelativeDate: RelativeDate = null
|
||||
|
||||
@Output()
|
||||
addedRelativeDateChange = new EventEmitter<number>()
|
||||
@ -172,17 +175,17 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
setCreatedRelativeDate(rd: RelativeDate) {
|
||||
onSetCreatedRelativeDate(rd: { id: number; name: string; date: number }) {
|
||||
// createdRelativeDate is set by ngModel
|
||||
this.createdDateTo = null
|
||||
this.createdDateFrom = null
|
||||
this.createdRelativeDate = this.createdRelativeDate == rd ? null : rd
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
setAddedRelativeDate(rd: RelativeDate) {
|
||||
onSetAddedRelativeDate(rd: { id: number; name: string; date: number }) {
|
||||
// addedRelativeDate is set by ngModel
|
||||
this.addedDateTo = null
|
||||
this.addedDateFrom = null
|
||||
this.addedRelativeDate = this.addedRelativeDate == rd ? null : rd
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
@ -224,6 +227,11 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
clearCreatedRelativeDate() {
|
||||
this.createdRelativeDate = null
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
clearAddedTo() {
|
||||
this.addedDateTo = null
|
||||
this.onChange()
|
||||
@ -234,6 +242,11 @@ export class DatesDropdownComponent implements OnInit, OnDestroy {
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
clearAddedRelativeDate() {
|
||||
this.addedRelativeDate = null
|
||||
this.onChange()
|
||||
}
|
||||
|
||||
// prevent chars other than numbers and separators
|
||||
onKeyPress(event: KeyboardEvent) {
|
||||
if ('Enter' !== event.key && !/[0-9,\.\/-]+/.test(event.key)) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user