From 88daccb93eeced6a82a306323bd89348ea6c4bd9 Mon Sep 17 00:00:00 2001
From: "mathias.chouet" <mathias.chouet@irstea.fr>
Date: Mon, 31 Aug 2020 14:36:36 +0200
Subject: [PATCH] Update #428
toggle search field by clicking a search icon in the nav bar
use flex for search field
---
src/app/app.component.html | 6 ++++-
src/app/app.component.scss | 9 +++++++
src/app/app.component.ts | 6 ++++-
src/app/app.module.ts | 1 +
.../calculator-list.component.html | 26 +++++++++----------
.../calculator-list.component.scss | 7 ++---
.../calculator-list.component.ts | 23 +++++++++++++---
src/locale/messages.en.json | 1 +
src/locale/messages.fr.json | 1 +
9 files changed, 59 insertions(+), 21 deletions(-)
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 352b05627..50e2060eb 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -47,10 +47,14 @@
</div>
</div>
- <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list"
+ <button *ngIf="! currentRoute.includes('/list')" mat-icon-button id="new-calculator" routerLink="/list"
[title]="uitextSidenavNewCalc" (click)="sidenav.close()">
<mat-icon>add_box</mat-icon>
</button>
+ <button *ngIf="currentRoute === '/list'" mat-icon-button id="enable-search" routerLink="/list/search"
+ [title]="uitextSearch" (click)="sidenav.close()">
+ <mat-icon>search</mat-icon>
+ </button>
<a *ngIf="enableHeaderDoc" target="_blank" id="header-doc" [href]="docIndexPath"
[title]="uitextSidenavHelp" (click)="sidenav.close()">
<mat-icon>help</mat-icon>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 38eeabc95..aa8b9e502 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -76,6 +76,15 @@ button:focus {
}
}
+#enable-search {
+ margin-right: .5em;
+
+ mat-icon {
+ font-weight: bold;
+ font-size: 2em;
+ }
+}
+
#header-doc {
color: white;
transform: scale(1.4);
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 01ddce6dd..6cbd0887f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -327,6 +327,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
return this.intlService.localizeText("INFO_MENU_SELECT_CALC");
}
+ public get uitextSearch() {
+ return this.intlService.localizeText("INFO_MENU_RECHERCHE_MODULES");
+ }
+
public getCalculatorLabel(t: CalculatorType) {
return decodeHtml(this.formulaireService.getLocalisedTitleFromCalculatorType(t));
}
@@ -405,7 +409,7 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
}
public get enableHeaderDoc(): boolean {
- return this.currentRoute === "/list" && this._calculators.length === 0;
+ return this.currentRoute.includes("/list") && this._calculators.length === 0;
}
public get enableSaveSessionMenu(): boolean {
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index ca149bc7e..8ed21e343 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -117,6 +117,7 @@ import {
import { ImmediateErrorStateMatcher } from "./formulaire/immediate-error-state-matcher";
const appRoutes: Routes = [
+ { path: "list/search", component: CalculatorListComponent },
{ path: "list", component: CalculatorListComponent },
{ path: "calculator/:uid", component: GenericCalculatorComponent },
{ path: "setup", component: ApplicationSetupComponent },
diff --git a/src/app/components/calculator-list/calculator-list.component.html b/src/app/components/calculator-list/calculator-list.component.html
index 7a948010e..2cdafcee5 100644
--- a/src/app/components/calculator-list/calculator-list.component.html
+++ b/src/app/components/calculator-list/calculator-list.component.html
@@ -1,18 +1,18 @@
-<div id="header-search">
- <form id="search-modules">
- <mat-form-field>
- <mat-icon matPrefix>search</mat-icon>
- <input type="search" matInput name="searchTerms" [(ngModel)]="searchTerms" (input)="filterItems()"
- (keydown.escape)="resetSearch()">
- </mat-form-field>
- </form>
- <div *ngIf="filteredItems.length === 0">
- {{ uitextSearchNoResult }}
- </div>
-</div>
-
<div class="container" fxLayout="row wrap" fxLayoutAlign="space-evenly stretch" (konami)="onKC()">
+ <div id="header-search" *ngIf="enableSearch">
+ <form id="search-modules">
+ <mat-form-field>
+ <mat-icon matPrefix>search</mat-icon>
+ <input type="search" matInput name="searchTerms" [(ngModel)]="searchTerms" (input)="filterItems()"
+ (keydown.escape)="resetSearch()" autofocus #searchField>
+ </mat-form-field>
+ </form>
+ <div *ngIf="filteredItems.length === 0">
+ {{ uitextSearchNoResult }}
+ </div>
+ </div>
+
<mat-card class="welcome-card" *ngIf="nbOpenCalculators === 0 && searchTerms === ''">
<mat-card-header>
diff --git a/src/app/components/calculator-list/calculator-list.component.scss b/src/app/components/calculator-list/calculator-list.component.scss
index 665a2b38c..5be9933b4 100644
--- a/src/app/components/calculator-list/calculator-list.component.scss
+++ b/src/app/components/calculator-list/calculator-list.component.scss
@@ -62,11 +62,12 @@ a.load-example {
}
#header-search {
- width: 100%;
- text-align: center;
+ flex: 0 1 100%;
+ padding: 0 4em;
+ min-width: 420px;
mat-form-field {
- width: 280px;
+ width: 100%;
mat-icon {
vertical-align: bottom;
diff --git a/src/app/components/calculator-list/calculator-list.component.ts b/src/app/components/calculator-list/calculator-list.component.ts
index 1e05c7b1e..8bb4597b1 100644
--- a/src/app/components/calculator-list/calculator-list.component.ts
+++ b/src/app/components/calculator-list/calculator-list.component.ts
@@ -1,5 +1,5 @@
-import { Component, OnInit, Inject, forwardRef } from "@angular/core";
-import { Router } from "@angular/router";
+import { Component, OnInit, Inject, forwardRef, ElementRef, ViewChild } from "@angular/core";
+import { Router, ActivatedRoute } from "@angular/router";
import { CalculatorType, EnumEx, Session } from "jalhyd";
@@ -27,20 +27,37 @@ export class CalculatorListComponent implements OnInit {
public filteredItems: any[];
+ /** enable search only if /list/search route was called */
+ private enableSearch = false;
+
/** what is typed into the search field in the nav bar */
public searchTerms: string;
+ @ViewChild("searchField")
+ private searchField: ElementRef;
+
constructor(
@Inject(forwardRef(() => AppComponent)) private appComponent: AppComponent,
private router: Router,
private httpService: HttpService,
private intlService: I18nService,
- private appSetupService: ApplicationSetupService
+ private appSetupService: ApplicationSetupService,
+ public route: ActivatedRoute
) {
ServiceFactory.i18nService.addObserver(this);
ServiceFactory.applicationSetupService.addObserver(this);
this.searchTerms = "";
+
+ this.route.url.subscribe(params => {
+ if (params.length > 1 && params[1].path === "search") {
+ this.enableSearch = true;
+ // focus the new Field
+ setTimeout(() => {
+ this.searchField.nativeElement.focus();
+ }, 0);
+ }
+ });
}
/** triggered on init */
diff --git a/src/locale/messages.en.json b/src/locale/messages.en.json
index 529148f6d..9d8b2407b 100644
--- a/src/locale/messages.en.json
+++ b/src/locale/messages.en.json
@@ -402,6 +402,7 @@
"INFO_MENU_HELP_TITLE": "Help",
"INFO_MENU_LOAD_SESSION_TITLE": "Load session",
"INFO_MENU_NOUVELLE_CALC": "New calculation module",
+ "INFO_MENU_RECHERCHE_MODULES": "Search modules",
"INFO_MENU_REPORT_BUG": "Report an issue",
"INFO_MENU_RESTORE_DEFAULT_SETTINGS": "Default settings",
"INFO_MENU_SAVE_SESSION_TITLE": "Save session",
diff --git a/src/locale/messages.fr.json b/src/locale/messages.fr.json
index f89b6fa41..87d77cd15 100644
--- a/src/locale/messages.fr.json
+++ b/src/locale/messages.fr.json
@@ -403,6 +403,7 @@
"INFO_MENU_HELP_TITLE": "Aide",
"INFO_MENU_LOAD_SESSION_TITLE": "Charger une session",
"INFO_MENU_NOUVELLE_CALC": "Nouveau module de calcul",
+ "INFO_MENU_RECHERCHE_MODULES": "Rechercher des modules",
"INFO_MENU_REPORT_BUG": "Signaler un problème",
"INFO_MENU_RESTORE_DEFAULT_SETTINGS": "Paramètres par défaut",
"INFO_MENU_SAVE_SESSION_TITLE": "Enregistrer la session",
--
GitLab