purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2024-10-30 01:08:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

(layout/common/search) Implemented the new MatAutocomplete "autoSelectActiveOption" functionality

Browse Source
This commit is contained in:
Sercan Yemen 2022-05-12 23:37:33 +03:00
parent 6aaa355a48
commit b87173b056
3 changed files with 34 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/layout/common/search/search.component.html
View File

@ -18,11 +18,12 @@
class="w-full h-full px-16 sm:px-18"
[formControl]="searchControl"
[matAutocomplete]="matAutocomplete"
[placeholder]="'Search for a page or a contact'"
[placeholder]="'Search...'"
(keydown)="onKeydown($event)"
#barSearchInput>
<mat-autocomplete
class="max-h-128 sm:px-2 border-t rounded-b shadow-md"
[autoSelectActiveOption]="true"
[disableRipple]="true"
#matAutocomplete="matAutocomplete">
<mat-option
@ -37,7 +38,8 @@
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
<mat-option
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
[routerLink]="result.link">
[routerLink]="result.link"
[value]="result.value">
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>
@ -74,11 +76,12 @@
matInput
[formControl]="searchControl"
[matAutocomplete]="matAutocomplete"
[placeholder]="'Search for a page or a contact'"
[placeholder]="'Search...'"
(keydown)="onKeydown($event)">
</mat-form-field>
<mat-autocomplete
class="max-h-128 mt-1 rounded"
[autoSelectActiveOption]="true"
[disableRipple]="true"
#matAutocomplete="matAutocomplete">
<mat-option
@ -93,7 +96,8 @@
<ng-container *ngFor="let result of resultSet.results; trackBy: trackByFn">
<mat-option
class="group relative mb-1 py-0 px-6 text-md rounded-md hover:bg-gray-100 dark:hover:bg-hover"
[routerLink]="result.link">
[routerLink]="result.link"
[value]="result.value">
<!-- Contacts -->
<ng-container *ngIf="resultSet.id === 'contacts'">
<ng-container *ngTemplateOutlet="contactResult; context: {$implicit: result}"></ng-container>

25
src/app/layout/common/search/search.component.ts
View File

@ -1,6 +1,7 @@
import { Component, ElementRef, EventEmitter, HostBinding, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges, ViewChild, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { MatAutocomplete } from '@angular/material/autocomplete';
import { debounceTime, filter, map, Subject, takeUntil } from 'rxjs';
import { fuseAnimations } from '@fuse/animations/public-api';
@ -21,6 +22,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
opened: boolean = false;
resultSets: any[];
searchControl: FormControl = new FormControl();
private _matAutocomplete: MatAutocomplete;
private _unsubscribeAll: Subject<any> = new Subject<any>();
/**
@ -59,7 +61,7 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
set barSearchInput(value: ElementRef)
{
// If the value exists, it means that the search input
// is now in the DOM and we can focus on the input..
// is now in the DOM, and we can focus on the input..
if ( value )
{
// Give Angular time to complete the change detection cycle
@ -71,6 +73,17 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
}
}
/**
* Setter for mat-autocomplete element reference
*
* @param value
*/
@ViewChild('matAutocomplete')
set matAutocomplete(value: MatAutocomplete)
{
this._matAutocomplete = value;
}
// -----------------------------------------------------------------------------------------------------
// @ Lifecycle hooks
// -----------------------------------------------------------------------------------------------------
@ -152,14 +165,12 @@ export class SearchComponent implements OnChanges, OnInit, OnDestroy
*/
onKeydown(event: KeyboardEvent): void
{
// Listen for escape to close the search
// if the appearance is 'bar'
if ( this.appearance === 'bar' )
// Escape
if ( event.code === 'Escape' )
{
// Escape
if ( event.code === 'Escape' )
// If the appearance is 'bar' and the mat-autocomplete is not open, close the search
if ( this.appearance === 'bar' && !this._matAutocomplete.isOpen )
{
// Close the search
this.close();
}
}

8
src/app/mock-api/common/search/api.ts
View File

@ -79,6 +79,9 @@ export class SearchMockApi
// Add a link
result.link = '/apps/contacts/' + result.id;
// Add the name as the value
result.value = result.name;
});
// Add to the results
@ -95,6 +98,8 @@ export class SearchMockApi
// Normalize the results
pagesResults.forEach((result: any) => {
// Add the page title as the value
result.value = result.title;
});
// Add to the results
@ -113,6 +118,9 @@ export class SearchMockApi
// Add a link
result.link = '/apps/tasks/' + result.id;
// Add the title as the value
result.value = result.title;
});
// Add to the results