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

Support keyboard esc and X button for filter editor text field

Browse Source
This commit is contained in:
Michael Shamoon
2022-10-29 00:56:48 -07:00
parent 89e0f8e3ef
commit a9abffaddc
3 changed files with 24 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.html
View File

@@ -11,7 +11,12 @@
<select *ngIf="textFilterTarget == 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()"> <select *ngIf="textFilterTarget == 'asn'" class="form-select flex-grow-0 w-auto" [(ngModel)]="textFilterModifier" (change)="textFilterModifierChange()">
<option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option> <option *ngFor="let m of textFilterModifiers" ngbDropdownItem [value]="m.id">{{m.label}}</option>
</select> </select>
<input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup.enter)="textFilterEnter()" [readonly]="textFilterTarget == 'fulltext-morelike'"> <button *ngIf="_textFilter" class="btn btn-link btn-sm px-0 position-absolute top-0 end-0 z-10" (click)="resetTextField()">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-x me-1" 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>
</button>
<input #textFilterInput class="form-control form-control-sm" type="text" [disabled]="textFilterModifierIsNull" [(ngModel)]="textFilter" (keyup)="textFilterKeyup($event)" [readonly]="textFilterTarget == 'fulltext-morelike'">
</div> </div>
</div> </div>
</div> </div>

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

@@ -21,3 +21,7 @@
input[type="text"] { input[type="text"] {
min-width: 120px; min-width: 120px;
} }
.z-10 {
z-index: 10;
}

10
src-ui/src/app/components/document-list/filter-editor/filter-editor.component.ts
View File

@@ -709,13 +709,21 @@ export class FilterEditorComponent implements OnInit, OnDestroy {
this.updateRules() this.updateRules()
} }
textFilterEnter() { textFilterKeyup(event: KeyboardEvent) {
if (event.key == 'Enter') {
const filterString = ( const filterString = (
this.textFilterInput.nativeElement as HTMLInputElement this.textFilterInput.nativeElement as HTMLInputElement
).value ).value
if (filterString.length) { if (filterString.length) {
this.updateTextFilter(filterString) this.updateTextFilter(filterString)
} }
} else if (event.key == 'Escape') {
this.resetTextField()
}
}
resetTextField() {
this.updateTextFilter('')
} }
changeTextFilterTarget(target) { changeTextFilterTarget(target) {