SHIBUI-1663 fixed live announcement

TIER · Dec 4, 2019 · 0a29a21 · 0a29a21
1 parent f7f715a
commit 0a29a21
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 30 deletions.
diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.html b/ui/src/app/schema-form/widget/filter-target/filter-target.component.html
@@ -52,7 +52,8 @@
                                 class="component-control"
                                 limit="10"
                                 [formControl]="search"
-                                [matches]="ids"
+                                [matches]="ids$ | async"
+                                [count]="idCount$ | async"
                                 (keydown.enter)="onSelectValue(search.value)">
                             </auto-complete>
                             <small [class.text-danger]="search.invalid && search.touched" translate="message.entity-id-min-unique">

diff --git a/ui/src/app/schema-form/widget/filter-target/filter-target.component.ts b/ui/src/app/schema-form/widget/filter-target/filter-target.component.ts
@@ -3,7 +3,7 @@ import { FormControl, Validators, AbstractControl, ValidatorFn } from '@angular/
 import { ObjectWidget } from 'ngx-schema-form';
 import { Store } from '@ngrx/store';
 import { Observable, Subject } from 'rxjs';
-import { distinctUntilChanged, skipWhile, takeUntil, map } from 'rxjs/operators';
+import { distinctUntilChanged, skipWhile, takeUntil, map, withLatestFrom, filter, switchMap, startWith } from 'rxjs/operators';
 
 import * as fromRoot from '../../../app.reducer';
 import * as fromFilters from '../../../metadata/filter/reducer';
@@ -19,7 +19,7 @@ import { QueryEntityIds, ClearSearch } from '../../../metadata/filter/action/sea
 export class FilterTargetComponent extends ObjectWidget implements OnDestroy, AfterViewInit {
     private ngUnsubscribe: Subject<null> = new Subject<null>();
     ids$: Observable<string[]>;
-    ids: string[];
+    idCount$: Observable<number>;
 
     search: FormControl = new FormControl(
         '',
@@ -40,17 +40,22 @@ export class FilterTargetComponent extends ObjectWidget implements OnDestroy, Af
     ) {
         super();
         this.ids$ = this.store.select(fromFilters.getEntityCollection);
-        this.ids$.subscribe(ids => {
-            this.ids = [...ids];
-        });
+
+        this.idCount$ = this.ids$.pipe(map(list => list.length));
 
         this.search
             .valueChanges
             .pipe(
                 takeUntil(this.ngUnsubscribe),
-                distinctUntilChanged()
+                distinctUntilChanged(),
+                withLatestFrom(this.ids$),
+                filter(([term, ids]) => term && term.length >= 4 && ids.indexOf(term) < 0),
+                map(([term]) => new QueryEntityIds({
+                    term,
+                    limit: 10
+                }))
             )
-            .subscribe(query => this.searchEntityIds(query));
+            .subscribe(action => this.store.dispatch(action));
 
         this.script
             .valueChanges
@@ -101,15 +106,6 @@ export class FilterTargetComponent extends ObjectWidget implements OnDestroy, Af
         };
     }
 
-    searchEntityIds(term: string): void {
-        if (term && term.length >= 4 && this.ids.indexOf(term) < 0) {
-            this.store.dispatch(new QueryEntityIds({
-                term,
-                limit: 10
-            }));
-        }
-    }
-
     getButtonConfig(id: string): any {
         let buttons = this.formProperty.getProperty('value').schema.buttons;
         return (buttons || []).map(btn => ({

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.html b/ui/src/app/shared/autocomplete/autocomplete.component.html
@@ -54,8 +54,7 @@
         [attr.aria-label]="this.input.value"
         [innerHTML]="option | highlight:this.input.value">
     </button>
-    <p class="dropdown-item dropdown-item-noresults"
-        role="option"
+    <p class="dropdown-item dropdown-item-noresults m-0"
         *ngIf="matches && matches.length === 0 && !processing">
         {{ noneFoundText }}
     </p>

diff --git a/ui/src/app/shared/autocomplete/autocomplete.component.ts b/ui/src/app/shared/autocomplete/autocomplete.component.ts
@@ -51,6 +51,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     @Input() processing = false;
     @Input() dropdown = false;
     @Input() placeholder = '';
+    @Input() count = null;
 
     @Output() more: EventEmitter<any> = new EventEmitter<any>();
     @Output() onChange: EventEmitter<string> = new EventEmitter<string>();
@@ -118,14 +119,16 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
     }
 
     ngOnChanges(changes: SimpleChanges): void {
-        if (changes.matches && this.matches) {
+        if (changes.matches && this.matches && this.state.currentState.menuOpen) {
             this.announceResults();
         }
     }
 
     announceResults(): void {
         const count = this.matches.length;
-        this.live.announce(count === 0 ? 'No results available' : `${count} result${count === 1 ? '' : 's'} available`);
+        this.live.announce(count === 0 ?
+            `${this.noneFoundText}` :
+            `${count} result${count === 1 ? '' : 's'} available`, 'polite', 5000);
     }
 
     writeValue(value: any): void {
@@ -222,7 +225,6 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
 
     handleInputChange(query: string): void {
         query = query || '';
-
         const queryEmpty = query.length === 0;
         const autoselect = this.hasAutoselect;
         const optionsAvailable = this.matches.length > 0;
@@ -233,8 +235,6 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
             selected: searchForOptions ? ((autoselect && optionsAvailable) ? 0 : -1) : null
         });
         this.propagateChange(query);
-
-        setTimeout(() => this.announceResults(), 250);
     }
 
     handleInputFocus(): void {
@@ -247,8 +247,6 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
             focused: index,
             selected: index
         });
-
-        console.log(this.activeDescendant);
     }
     handleOptionClick(index: number): void {
         const selectedOption = this.matches[index];
@@ -357,7 +355,7 @@ export class AutoCompleteComponent implements OnInit, OnDestroy, OnChanges, Afte
         return !!(agent.match(/(iPod|iPhone|iPad)/g) && agent.match(/AppleWebKit/g));
     }
 
-    getOptionId(index): string {
+    getOptionId(index: string | number): string {
         return `${this.fieldId}__option--${index}`.replace('/', '');
     }
 

diff --git a/ui/src/app/shared/autocomplete/autocomplete.model.ts b/ui/src/app/shared/autocomplete/autocomplete.model.ts
@@ -9,9 +9,9 @@ export const defaultState: AutoCompleteState = {
 };
 
 export interface AutoCompleteState {
-    focused: number;
-    selected: number;
-    hovered: number;
+    focused: number | null;
+    selected: number | null;
+    hovered: number | null;
     menuOpen: boolean;
 }