[Library | Trunk]: Search input: Fix reset function and toggle on selected. Sidebar: fix route on active route

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60488 d315682c-612b-4755-9ff5-7f18f6832af3

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -17,7 +17,7 @@
           <li [class.uk-active]="isTheActiveMenuItem(item)"
               [class.uk-open]="isTheActiveMenuItem(item)"
               [class.uk-parent]="item.items.length > 1">
-            <a *ngIf="item.items.length <= 1" [routerLink]="(item.route && !isTheActiveMenuItem(item))?item.route:null"
+            <a *ngIf="item.items.length <= 1" [routerLink]="(item.route)?item.route:null"
                [queryParams]=item.params [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
               <div *ngIf="item.icon && !open" class="uk-margin-auto">
                 <span [innerHTML]="satinizeHTML(item.icon)"></span>
@@ -35,7 +35,7 @@
               <ul [class.uk-hidden]="!open" class="uk-nav-sub uk-text-center">
                 <ng-template ngFor [ngForOf]="item.items" let-subItem let-j="index">
                   <li *ngIf="subItem.route" [class.uk-active]="isTheActiveMenuItem(item, subItem)">
-                    <a [routerLink]="!isTheActiveMenuItem(item, subItem)?subItem.route:null"
+                    <a [routerLink]="subItem.route"
                        [queryParams]=subItem.params [queryParamsHandling]="queryParamsHandling">
                       <div *ngIf="subItem.icon"><i class="material-icons">{{subItem.icon}}</i></div>
                       <span>{{subItem.title}}</span>

sharedComponents/search-input/search-input.component.ts

@@ -12,7 +12,6 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
           <input #input type="text" class="uk-width-1-1"
                  [class.uk-animation-slide-right-medium]="showSearch"
                  [class.uk-hidden@m]="!showSearch"
-                 [class.uk-hidden]="selected"
                  [placeholder]="placeholder"
                  (blur)="closeSearch()"
                  [formControl]="control"
@@ -23,10 +22,10 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
             </mat-option>
           </mat-autocomplete>
         </form>
-        <div *ngIf="selected" class="uk-flex uk-flex-left selected">
+        <div *ngIf="selected && !showSearch" class="uk-flex uk-flex-left selected">
-          <span class="uk-flex uk-flex-middle">
+          <span class="uk-flex uk-flex-middle clickable">
-            <span>{{selected}}</span>
+            <span (click)="toggle()">{{selected}}</span>
-            <span class="uk-icon clickable space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
+            <span class="uk-icon space" uk-icon="icon: close; ratio: 0.8" (click)="resetEmitter.emit()">
               <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close"><path
                   fill="none" stroke="#000" stroke-width="1.06" d="M16,16 L4,4"></path>
                 <path fill="none" stroke="#000" stroke-width="1.06" d="M16,4 L4,16"></path>
@@ -80,7 +79,6 @@ export class SearchInputComponent {
   closeEmitter: EventEmitter<any> = new EventEmitter<any>();
   
   toggle() {
-    if(!this.selected) {
     this.showSearch = !this.showSearch;
     if (this.showSearch) {
       setTimeout(() => { // this will make the execution after the above boolean has changed
@@ -88,7 +86,6 @@ export class SearchInputComponent {
       }, 0);
     }
   }
-  }
   
   closeSearch() {
     this.showSearch = false;
@@ -101,6 +98,8 @@ export class SearchInputComponent {
   }
   
   public reset() {
+    this.control.setValue('');
+    this.input.nativeElement.value = '';
     this.showSearch = true;
     setTimeout(() => {
       this.input.nativeElement.focus();

utils/icons/icons.ts

@@ -121,3 +121,8 @@ export const mail = {
   name: 'mail',
   data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/></svg>'
 }
+
+export const photo = {
+  name: 'photo',
+  data: '<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 0 24 24" width="20"><path d="M0 0h24v24H0z" fill="none"/><circle cx="12" cy="12" r="3.2"/><path d="M9 2L7.17 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2h-3.17L15 2H9zm3 15c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>'
+}