Allow enter key to toggle items in filtered list if single item remains

This commit is contained in:
Michael Shamoon 2020-12-11 01:40:42 -08:00
parent 0b4c860354
commit a37796d0cf
4 changed files with 13 additions and 9 deletions

View File

@ -112,7 +112,8 @@ import { FilterPipe } from './pipes/filter.pipe';
provide: HTTP_INTERCEPTORS,
useClass: CsrfInterceptor,
multi: true
}
},
FilterPipe
],
bootstrap: [AppComponent]
})

View File

@ -2,9 +2,9 @@
<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="list-group list-group-flush">
<input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="listFilterText" placeholder="Filter {{title}}" #listFilterTextInput>
<ng-container *ngIf="(items | filter: listFilterText).length > 0">
<button class="list-group-item list-group-item-action d-flex align-items-center" role="menuitem" *ngFor="let item of items | filter: listFilterText; let i = index" (click)="toggleItem(item)">
<input class="list-group-item form-control form-control-sm" type="text" [(ngModel)]="filterText" placeholder="Filter {{title}}" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
<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)">
<div class="selected-icon mr-1">
<svg *ngIf="itemsActive.includes(item)" 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"/>

View File

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output, ElementRef, ViewChild } from '@angular/core';
import { FilterRuleType, FILTER_RULE_TYPES } from 'src/app/data/filter-rule-type';
import { ObjectWithId } from 'src/app/data/object-with-id';
import { FilterPipe } from 'src/app/pipes/filter.pipe';
@Component({
selector: 'app-filter-dropdown',
@ -9,7 +10,7 @@ import { ObjectWithId } from 'src/app/data/object-with-id';
})
export class FilterDropdownComponent implements OnInit {
constructor() { }
constructor(private filterPipe: FilterPipe) { }
@Input()
filterRuleTypeID: number
@ -22,7 +23,7 @@ export class FilterDropdownComponent implements OnInit {
items: ObjectWithId[] = []
itemsActive: ObjectWithId[] = []
title: string
listFilterText: string
filterText: string
display: string
ngOnInit(): void {
@ -44,4 +45,9 @@ export class FilterDropdownComponent implements OnInit {
this.filterText = ''
}
}
listFilterEnter(): void {
let filtered = this.filterPipe.transform(this.items, this.filterText)
if (filtered.length == 1) this.toggleItem(filtered.shift())
}
}

View File

@ -42,9 +42,6 @@ export class FilterEditorComponent implements OnInit, AfterViewInit {
documentTypes: PaperlessDocumentType[] = []
filterText: string
filterTagsText: string
filterCorrespondentsText: string
filterDocumentTypesText: string
ngOnInit(): void {
this.updateTextFilterInput()