From 510f4c56ba1fc3da4ee3e106dfbad50f22c3bd77 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Thu, 7 Apr 2022 01:09:49 +0300
Subject: [PATCH] 1. LayoutService: Delete isDashboard. 2. Navbar: fix a bug
 with class add and remove. 3. Role-users: Add new search-input. 4. Modal make
 title h5

---
 .../sidebar/layout.service.ts                 | 19 ---------
 .../sidebar/sideBar.component.html            | 18 ++++----
 .../role-users/role-users.component.html      | 13 +++---
 sharedComponents/menu.ts                      | 10 ++++-
 sharedComponents/navigationBar.component.html |  2 +-
 .../search-input/search-input.component.ts    | 42 ++++++++++---------
 utils/modal/alert.ts                          | 10 +++--
 utils/modal/alertModal.module.ts              |  3 +-
 8 files changed, 56 insertions(+), 61 deletions(-)

diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts
index 49cb7a3b..dd4fee8b 100644
--- a/dashboard/sharedComponents/sidebar/layout.service.ts
+++ b/dashboard/sharedComponents/sidebar/layout.service.ts
@@ -35,11 +35,6 @@ export class LayoutService {
    */
   private isSmallScreenSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
   
-  /**
-   *  Add isDashboard: false on data of route config, if page is for a stakeholder but not for dashboard.
-   */
-  private isDashboardSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
-
   /**
    *  Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match.
    */
@@ -90,12 +85,6 @@ export class LayoutService {
         } else {
           this.setSmallScreen(false);
         }
-        if (data['isDashboard'] !== undefined &&
-          data['isDashboard'] === false) {
-          this.setDashboard(false);
-        } else {
-          this.setDashboard(true);
-        }
         if (data['activeMenuItem'] !== undefined &&
           data['activeMenuItem'] !== null) {
           this.setActiveMenuItem(data['activeMenuItem']);
@@ -147,14 +136,6 @@ export class LayoutService {
     this.isFrontPageSubject.next(value);
   }
   
-  get isDashboard(): Observable<boolean> {
-    return this.isDashboardSubject.asObservable();
-  }
-  
-  setDashboard(value: boolean) {
-    this.isDashboardSubject.next(value);
-  }
-  
   get isSmallScreen(): boolean {
     return this.isSmallScreenSubject.getValue();
   }
diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html
index 5f5873e5..087c01d4 100644
--- a/dashboard/sharedComponents/sidebar/sideBar.component.html
+++ b/dashboard/sharedComponents/sidebar/sideBar.component.html
@@ -1,6 +1,6 @@
 <aside id="sidebar_main">
   <div id="sidebar_content">
-    <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top">
+    <div *ngIf="items.length > 0" class="menu_section uk-margin-xlarge-top" style="min-height: 30vh">
       <div *ngIf="items[activeIndex]" class="active" [style]="'--index: ' + activeIndex + '; --size: ' + (items[activeIndex].icon?'40px':0)"></div>
       <ul class="uk-list uk-nav-parent-icon" uk-nav>
         <ng-template ngFor [ngForOf]="items" let-item let-i="index">
@@ -12,7 +12,7 @@
                [queryParams]=item.params [queryParamsHandling]="queryParamsHandling">
               <div class="uk-flex uk-flex-middle uk-flex-center">
                 <div *ngIf="item.icon" class="uk-width-auto">
-                  <icon class="menu-icon" [svg]="item.icon" [flex]="true"></icon>
+                  <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" [svg]="item.icon.svg" [flex]="true"></icon>
                 </div>
                 <span *ngIf="open || !item.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{item.title}}</span>
               </div>
@@ -22,15 +22,17 @@
       </ul>
     </div>
     <ng-template [ngIf]="specialMenuItem">
-      <div class="special_section uk-margin-large-top">
+      <div class="menu_section uk-margin-large-top">
         <ul class="uk-list">
           <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
             <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
-               [queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
-              <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
-              <span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
-                    [class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
-                    [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
+               [queryParamsHandling]="queryParamsHandling">
+              <div class="uk-flex uk-flex-middle uk-flex-center">
+                <div *ngIf="specialMenuItem.icon" class="uk-width-auto">
+                  <icon class="menu-icon" [customClass]="specialMenuItem.icon.class"  [name]="specialMenuItem.icon.name" [svg]="specialMenuItem.icon.svg" [flex]="true"></icon>
+                </div>
+                <span *ngIf="open || !specialMenuItem.icon" [class.uk-text-small]="!open" class="uk-width-expand uk-text-truncate uk-margin-small-left">{{specialMenuItem.title}}</span>
+              </div>
             </a>
           </li>
         </ul>
diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html
index 5b70999d..08a575a1 100644
--- a/dashboard/users/role-users/role-users.component.html
+++ b/dashboard/users/role-users/role-users.component.html
@@ -6,7 +6,7 @@
 		<div *ngIf="loadActive || loadPending" class="uk-position-center">
 			<loading></loading>
     </div>
-		<div class="uk-grid uk-margin-medium-bottom" uk-grid>
+		<div class="uk-grid uk-margin-medium-bottom uk-margin-top" uk-grid>
 			<div class="uk-flex uk-flex-left@m uk-flex-center uk-width-expand">
 				<ul class="uk-subnav uk-subnav-pill">
 					<li [class.uk-active]="showCurrent" (click)="showCurrent = true">
@@ -17,13 +17,12 @@
 					</li>
 				</ul>
 			</div>
-			<div [class.uk-invisible]="loadActive || loadPending"
-					class="uk-width-auto@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-remove-left" uk-grid>
-				<div *ngIf="showCurrent" search-input [control]="filterForm.get('active')" [showSearch]="false" [placeholder]="'Search ' + role + 's'"
-						[bordered]="true" colorClass="uk-text-secondary">
+			<div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle uk-flex-right@m uk-flex-center uk-margin-remove-left" uk-grid>
+				<div *ngIf="showCurrent" [disabled]="loadActive" search-input class="uk-width-expand@l uk-width-1-1"
+						 [searchControl]="filterForm.get('active')" [expandable]="true" [placeholder]="'Search ' + role + 's'" searchInputClass="outer">
 				</div>
-				<div *ngIf="!showCurrent" search-input [control]="filterForm.get('active')"  [showSearch]="false" [placeholder]="'Search invitations'"
-						[bordered]="true" colorClass="uk-text-secondary">
+				<div *ngIf="!showCurrent" [disabled]="loadPending" search-input class="uk-width-expand@l uk-width-1-1"
+						 [searchControl]="filterForm.get('pending')" [expandable]="true" [placeholder]="'Search invitations'" searchInputClass="outer">
 				</div>
 				<div>
 					<button *ngIf="exists" class="uk-button uk-button-default uk-text-primary uk-flex uk-flex-middle" [attr.uk-tooltip]="inviteDisableMessage"
diff --git a/sharedComponents/menu.ts b/sharedComponents/menu.ts
index c6a27633..545ea055 100644
--- a/sharedComponents/menu.ts
+++ b/sharedComponents/menu.ts
@@ -1,3 +1,9 @@
+export interface Icon {
+  name?: string,
+  svg?: string,
+  class?: string
+}
+
 export class MenuItem {
   _id: string = ""; // for root menu in order to close the dropdown when clicked
   title: string = "";
@@ -11,12 +17,12 @@ export class MenuItem {
   params: any = {};
   fragment: string;
   items: MenuItem[] = [];
-  icon: string;
+  icon: Icon;
   open: boolean;
   customClass: string = null;
 	isFeatured: boolean;
 
-  constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon=null, fragment = null, customClass = null, routeActive = null) {
+  constructor(id: string, title: string, url: string, route: string, needsAuthorization: boolean, entitiesRequired: string[], routeRequired: string[], params, icon: Icon = null, fragment = null, customClass = null, routeActive = null) {
     this._id = id;
     this.title = title;
     this.url = url;
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 2e8f0567..b3a287b4 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -276,7 +276,7 @@
     </ng-container>
   </a>
   <a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
-     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
+     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
     <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
          [src]="!mobile?header.logoUrl:header.logoSmallUrl"
          [alt]="header.title">
diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts
index fe91b574..3703f89e 100644
--- a/sharedComponents/search-input/search-input.component.ts
+++ b/sharedComponents/search-input/search-input.component.ts
@@ -16,20 +16,22 @@ import {InputComponent} from "../input/input.component";
 @Component({
   selector: '[search-input]',
   template: `
-    <div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
-      <div class="uk-flex uk-flex-middle">
-        <div class="uk-width-expand">
-          <div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
-               [disabled]="disabled" [formInput]="searchControl"></div>
-        </div>
-        <div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
-          <a class="uk-link-text" (click)="reset()">
-            <icon name="close" [flex]="true"></icon>
-          </a>
-        </div>
-        <div class="uk-width-auto">
-          <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
-            <icon name="search" [flex]="true" ratio="1.3"></icon>
+    <div *ngIf="searchControl || value" class="uk-flex uk-flex-right uk-width-1-1">
+      <div #searchInput class="search-input" [class.collapsed]="hidden" [ngClass]="searchInputClass">
+        <div class="uk-flex uk-flex-middle">
+          <div class="uk-width-expand">
+            <div [class.uk-hidden]="hidden" #input input inputClass="search" [placeholder]="{label: placeholder, static: true}" [(value)]="value"
+                 [disabled]="disabled" [formInput]="searchControl"></div>
+          </div>
+          <div [class.uk-hidden]="!searchControl.value" class="uk-width-auto">
+            <a class="uk-link-text" (click)="reset()">
+              <icon name="close" [flex]="true"></icon>
+            </a>
+          </div>
+          <div class="uk-width-auto">
+            <div class="search-icon" [class.disabled]="disabled" (click)="search($event)">
+              <icon name="search" [flex]="true" ratio="1.3"></icon>
+            </div>
           </div>
         </div>
       </div>
@@ -53,7 +55,7 @@ export class SearchInputComponent implements OnInit {
   
   @HostListener('document:click', ['$event'])
   click(event) {
-    if(event.isTrusted && this.expandable) {
+    if(event.isTrusted && this.expandable && !this.disabled) {
       this.expand(this.searchInput && this.searchInput.nativeElement.contains(event.target));
     }
   }
@@ -71,11 +73,13 @@ export class SearchInputComponent implements OnInit {
   }
   
   public search(event) {
-    if(this.expandable) {
-      this.expand(!this.expanded);
-      event.stopPropagation();
+    if(!this.disabled) {
+      if (this.expandable) {
+        this.expand(!this.expanded);
+        event.stopPropagation();
+      }
+      this.searchEmitter.emit();
     }
-    this.searchEmitter.emit();
   }
   
   public reset() {
diff --git a/utils/modal/alert.ts b/utils/modal/alert.ts
index 1fde16c8..796f6b09 100644
--- a/utils/modal/alert.ts
+++ b/utils/modal/alert.ts
@@ -10,17 +10,19 @@ declare var UIkit: any;
       <div class="uk-modal-dialog uk-modal-body uk-animation-fast uk-margin-medium-bottom uk-text-left"
            [ngClass]="classBody">
         <div [ngClass]="classTitle" class="uk-modal-title" [hidden]=!alertHeader>
-          <button class="uk-modal-close-default uk-float-right" (click)='cancel()' uk-close></button>
-          <h4 class="modal-title">{{alertTitle}}</h4>
+          <button class="uk-close uk-icon uk-modal-close-default uk-float-right" (click)='cancel()'>
+            <icon name="close" ratio="1.5"></icon>
+          </button>
+          <h5>{{alertTitle}}</h5>
         </div>
         <div class="uk-margin">
           <div *ngIf="message" [hidden]=!alertMessage [innerHTML]="message | safeHtml"></div>
           <ng-content></ng-content>
         </div>
         <div class="uk-grid uk-flex uk-flex-middle">
-          <label *ngIf="choice" class="uk-width-1-2 checkbox">
+          <label *ngIf="choice" class="uk-width-1-2">
             <input type="checkbox" [(ngModel)]="select">
-            <span class="uk-margin-small-left" style="font-weight: normal;">Don't show this message again</span>
+            <span class="uk-margin-small-left">Don't show this message again</span>
           </label>
           <div [ngClass]="(choice)?'uk-width-1-2':'uk-width-1-1'">
             <div *ngIf="alertFooter" class="uk-flex-right uk-grid uk-grid-small" uk-grid>
diff --git a/utils/modal/alertModal.module.ts b/utils/modal/alertModal.module.ts
index 33274dab..4ca3256d 100644
--- a/utils/modal/alertModal.module.ts
+++ b/utils/modal/alertModal.module.ts
@@ -5,9 +5,10 @@ import { FormsModule }         from '@angular/forms';
 import {AlertModal} from './alert';
 import {ModalModule} from './modal.module';
 import {SafeHtmlPipeModule} from "../pipes/safeHTMLPipe.module";
+import {IconsModule} from "../icons/icons.module";
 
 @NgModule({
-  imports: [CommonModule, FormsModule, ModalModule, SafeHtmlPipeModule],
+  imports: [CommonModule, FormsModule, ModalModule, SafeHtmlPipeModule, IconsModule],
   declarations: [
     AlertModal
   ],