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

auto-select list filter field & clear on close

Browse Source
This commit is contained in:
Michael Shamoon
2020-12-11 01:16:58 -08:00
parent 5de2f57ffb
commit aca375dac3
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,8 +1,8 @@
<div class="btn-group" ngbDropdown role="group"> <div class="btn-group" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)">
<button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button> <button class="btn btn-outline-primary btn-sm" id="dropdown{{title}}" ngbDropdownToggle>{{title}}</button>
<div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}"> <div class="dropdown-menu quick-filter shadow" ngbDropdownMenu attr.aria-labelledby="dropdown{{title}}">
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
<input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}"> <input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" #filterTextInput>
<ng-container *ngIf="(items | filter: filterText).length > 0"> <ng-container *ngIf="(items | filter: filterText).length > 0">
<button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: filterText; let i = index" (click)="toggleItem(item)"> <button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: filterText; let i = index" (click)="toggleItem(item)">
<div class="selected-icon mr-1"> <div class="selected-icon mr-1">

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

@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type'; import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
import { ObjectWithId } from 'src/app/data/object-with-id'; import { ObjectWithId } from 'src/app/data/object-with-id';
@@ -17,6 +17,8 @@ export class FilterDropdownComponent implements OnInit {
@Output() @Output()
toggle = new EventEmitter() toggle = new EventEmitter()
@ViewChild('filterTextInput') filterTextInput: ElementRef
items: ObjectWithId[] = [] items: ObjectWithId[] = []
itemsActive: ObjectWithId[] = [] itemsActive: ObjectWithId[] = []
title: string title: string
@@ -29,7 +31,17 @@ export class FilterDropdownComponent implements OnInit {
this.display = filterRuleType.datatype this.display = filterRuleType.datatype
} }
toggleItem(item: ObjectWithId) { toggleItem(item: ObjectWithId): void {
this.toggle.emit(item) this.toggle.emit(item)
} }
dropdownOpenChange(open: boolean): void {
if (open) {
setTimeout(() => {
this.filterTextInput.nativeElement.focus();
}, 0);
} else {
this.filterText = ''
}
}
} }