diff --git a/src/app/app.component.html b/src/app/app.component.html
index 352b0562753ca95df1f204bb31fb9bd2cd2b095c..50e2060eb0d02973e081cf099812e7dbd2c681a6 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 38eeabc9524c08bb66465a6620bb7faab9793981..aa8b9e502ba4607f44986ee319d30ceb22d8b620 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 01ddce6dd0e2eca54c061a0bf6ffee385848b23c..6cbd0887f705634a567f6508511737b4850c783b 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 ca149bc7eef258e3303acc02ab589d3872715863..8ed21e34314d770e30a89a08863990ea05c1286c 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 7a948010ef1f6f2a785ecfb05d871981983d9d1a..2cdafcee528ae89c0858e3b966a3540704b70916 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 665a2b38cf6b830616ae0a60b49b7026f1f59102..5be9933b4be7410bd52c9797f765bd34f6bd9123 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 1e05c7b1ea359a78ab0aa507c32567763cc95a6a..8bb4597b10232373b7a28e8f2e1cbbab2e0a3b5b 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 529148f6dd5fe422f2a7392c13f2bb60615bc7e0..9d8b2407b1d9effde7f0874b28372fdbf5209b7e 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 f89b6fa41000d998f36ab8984d94d0f631949ba6..87d77cd1574b0f4ccc297c860c9842019da46a52 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",