FEAT #13671 TIME 1 show desc if err prerequisites

src/frontend/app/app-routing.module.ts

@@ -44,7 +44,7 @@ const routes: Routes = [
     { path: 'basketList/users/:userSerialId/groups/:groupSerialId/baskets/:basketId', canActivate: [AppGuard], component: BasketListComponent },
     { path: 'login', component: LoginComponent },
     {
-        path: '**',
+        path: '',
         redirectTo: 'home',
         pathMatch: 'full'
     },

src/frontend/app/app.module.ts

@@ -2,14 +2,15 @@ import { NgModule, Injectable } from '@angular/core';
 
 import { SharedModule } from './app-common.module';
 import { AppRoutingModule } from './app-routing.module';
-import { ProcessModule } from './process/process.module';
-import { DocumentViewerModule } from './viewer/document-viewer.module';
-import { AppListModule } from './app-list.module';
 
 import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 
+import { ProcessModule } from './process/process.module';
+import { DocumentViewerModule } from './viewer/document-viewer.module';
+import { AppListModule } from './app-list.module';
+
 import { AuthInterceptor } from '../service/auth-interceptor.service';
 import { FiltersListService } from '../service/filtersList.service';
 import { FoldersService } from './folder/folders.service';

src/frontend/app/installer/installer.component.html

@@ -7,7 +7,7 @@
         <div class="container" [class.fullContainer]="appService.getViewMode()">
             <div class="container-content" style="overflow: hidden;">
                 <mat-horizontal-stepper [@.disabled]="true" linear #stepper style="height: 100vh;overflow: auto;" (selectionChange)="initStep($event)">
-                    <mat-step>
+                    <mat-step label="install">
                         <ng-template matStepLabel>Installation</ng-template>
                         <div class="stepContainer">
                             <div class="stepContent">

src/frontend/app/installer/installer.component.ts

@@ -66,7 +66,8 @@ export class InstallerComponent implements OnInit, AfterViewInit {
     }
 
     initStep(ev: any) {
-        // console.log(ev.selectedStep.content);
+        console.log((ev));
+        this.stepContent.toArray()[ev.selectedIndex].initStep();
     }
 
     endInstall() {

src/frontend/app/installer/prerequisite/prerequisite.component.html

@@ -9,7 +9,10 @@
             <mat-grid-tile *ngFor="let package of packagesList[groupPackage.key]">
                 <mat-list-item>
                     <mat-icon mat-list-icon class="fa iconCheckPackage icon_{{package.state}}"></mat-icon>
-                    <div mat-line class="packageName">{{lang['install_'+package.label]}} <i class="fa fa-info-circle" [title]="lang['install_'+package.label+'_desc']"></i></div>
+                    <div mat-line class="packageName">
+                        {{lang['install_'+package.label]}} <i #toto="matTooltip" [id]="package.label" class="fa fa-info-circle" [matTooltip]="lang['install_'+package.label+'_desc']"
+                        [matTooltipClass]="package.state !== 'ok' ? 'tooltip-red' : ''" matTooltipPosition="right"></i>
+                    </div>
                 </mat-list-item>  
             </mat-grid-tile>
           </mat-grid-list>

src/frontend/app/installer/prerequisite/prerequisite.component.scss

@@ -66,4 +66,10 @@
         opacity: 0.5;
         color: $primary;
     }
-}
\ No newline at end of file
+}
+
+::ng-deep.tooltip-red {
+    background: #b71c1c;
+    font-size: 14px;
+  }
+  
\ No newline at end of file

src/frontend/app/installer/prerequisite/prerequisite.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChildren, QueryList, ViewChild, ElementRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { HttpClient } from '@angular/common/http';
 import { tap } from 'rxjs/internal/operators/tap';
@@ -7,6 +7,7 @@ import { of } from 'rxjs/internal/observable/of';
 import { catchError } from 'rxjs/internal/operators/catchError';
 import { LANG } from '../../translate.component';
 import { environment } from '../../../environments/environment';
+import { MatTooltip } from '@angular/material/tooltip';
 
 @Component({
     selector: 'app-prerequisite',
@@ -63,7 +64,7 @@ export class PrerequisiteComponent implements OnInit {
             {
                 label: 'fileinfo',
                 required: true
-            },            {
+            }, {
                 label: 'pdoPgsql',
                 required: true
             },
@@ -106,6 +107,8 @@ export class PrerequisiteComponent implements OnInit {
 
     docMaarchUrl: string = `https://docs.maarch.org/gitbook/html/MaarchCourrier/${environment.VERSION.split('.')[0] + '.' + environment.VERSION.split('.')[1]}/guat/guat_prerequisites/home.html`;
 
+    @ViewChildren('toto') toto: QueryList<any>;
+
     constructor(
         public http: HttpClient,
         private notify: NotificationService,
@@ -141,6 +144,18 @@ export class PrerequisiteComponent implements OnInit {
         ).subscribe();
     }
 
+    initStep() {
+        let i = 0;
+        Object.keys(this.packagesList).forEach(group => {
+            this.packagesList[group].forEach((item: any, key: number) => {
+                if (this.packagesList[group][key].state === 'ko') {
+                    this.toto.toArray().filter((itemKo: any) => itemKo._elementRef.nativeElement.id === this.packagesList[group][key].label)[0].toggle();
+                }
+                i++;
+            });
+        });
+    }
+
     checkStep() {
         let state = 'success';
         Object.keys(this.packagesList).forEach((group: any) => {