refactored env & api connectors

src/app/app.module.ts

@@ -13,13 +13,10 @@ import { AppRootComponent } from './app.root.component';
 import { SharedLibModule, AuthInterceptorService } from 'sb-shared-lib';
 
 
-
-
 /* HTTP requests interception dependencies */
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
 
-
 @NgModule({
   declarations: [
     AppRootComponent, AppsComponent

src/app/app.root.component.ts

@@ -2,46 +2,46 @@ import { Component, OnInit } from '@angular/core';
 import { ApiService } from 'sb-shared-lib';
 import { AuthService } from 'sb-shared-lib';
 
-/* 
+/*
 This is the component that is bootstrapped by app.module.ts
 */
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.root.component.html',
-  styleUrls: ['./app.root.component.scss']  
+  styleUrls: ['./app.root.component.scss']
 })
 export class AppRootComponent implements OnInit {
 
-  public ready: boolean = false;
+    public ready: boolean = false;
 
-  constructor(private auth: AuthService, private api: ApiService) {}
+    constructor(private auth: AuthService, private api: ApiService) {}
 
-
-  public async ngOnInit() {
 
-    this.auth.getObservable().subscribe( (user:any) => {
-      console.log('received user object', user);
-      if(user.id > 0) {
-        this.ready = true;
-      }
-      else {
-        this.navigateToAuth();  
-      }      
-    });
+    public async ngOnInit() {
 
-    try {
-      await this.auth.authenticate();
-    }
-    catch(error:any) {
-      this.navigateToAuth();
-    }    
+        this.auth.getObservable().subscribe( (user:any) => {
+            console.log('received user object', user);
+            if(user.id > 0) {
+                this.ready = true;
+            }
+            else {
+                this.navigateToAuth();
+            }
+        });
+
+        try {
+            await this.auth.authenticate();
+        }
+        catch(error:any) {
+            this.navigateToAuth();
+        }
 
-  }
+    }
 
-  public navigateToAuth() {
-    window.location.href = '/auth';
-  }
+    public navigateToAuth() {
+        window.location.href = '/auth';
+    }
 
-}
+}

src/app/apps.component.html

@@ -1,6 +1,7 @@
 <div class="container">
-    <div class="container-header" style="width: 300px;">
-        <button mat-button [matMenuTriggerFor]="auth_menu"><strong>{{user.name}}</strong> ({{user.login}})</button>
+    <div class="brand-logo" [style.background-image]="'url(' + url_brand_logo + ')'"></div>
+    <div class="container-header">
+        <button mat-button [matMenuTriggerFor]="auth_menu" title="{{user.login}}"><strong>{{user.name}} ({{user.login}})</strong></button>
         <mat-menu #auth_menu="matMenu" class="auth-menu" backdropClass="auth-menu">
             <button mat-menu-item (click)="onclickDisconnect()">Se déconnecter</button>
         </mat-menu>
@@ -11,9 +12,42 @@
                 <button mat-raised-button
                         [ngClass]="app"
                         color="primary"
-                        [style]="'background-color: '+apps[app].color"
+                        [style.background-color]="getColor(app)"
+                        [style.color]="getTextColor(app)"
                         (click)="onSelect(app)">
-                    <mat-icon>{{apps[app].icon}}</mat-icon> {{apps[app].name | translate}}
+                    <div style="
+                        width: 100%;
+                        height: 100%;
+                        position: absolute;
+                        top: 0;
+                        left: 0;
+                        background: linear-gradient(transparent, #00000018);
+                        border-radius: 4px;
+                    "></div>
+                    <div style="
+                        width: 40px;
+                        height: 40px;
+                        border: solid 2px white;
+                        background-color: white;
+                        margin-right: 10px;
+                        border-radius: 8px;">
+                        <mat-icon [ngStyle]="{'color': getColor(app)}" style="margin: 6px;">{{apps[app].icon}}</mat-icon>
+                    </div>
+                    <div style="
+                        display: flex;
+                        flex-direction: column;
+                        overflow: hidden;">
+                        <div style="
+                            height: 18px;
+                            text-align: left;
+                            font-size: 18px;
+                            text-overflow: ellipsis;">{{apps[app].name}}</div>
+                        <div style="
+                            text-align: left;
+                            font-size: 11px;
+                            overflow: hidden;
+                            text-overflow: ellipsis;">{{apps[app].description}}</div>
+                    </div>
                 </button>
             </div>
         </ng-container>

src/app/apps.component.scss

@@ -1,5 +1,5 @@
 ::ng-deep .mat-menu-panel.auth-menu {
-    max-width: 100%!important; 
+    max-width: 100%!important;
     min-width: 128px!important;
     width: 90%;
 }
@@ -12,32 +12,44 @@
 
     .container {
 
-        &::before {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        width: 100%;
+        align-items: center;
+        height: 100%;
+
+        .brand-logo {
             position: absolute;
             display: inline-block;
-            background-image: url("/assets/img/brand/logo.svg");
             background-size: contain;
             background-repeat: no-repeat;
-            height: 33vh;    
-            content: "";
+            height: 33vh;
             width: 19vw;
             left: 5%;
             top: 20px;
         }
 
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        width: 100%;
-        align-items: center;
-        height: 100%;
-
         .container-header {
             position: absolute;
+            width: 50vw;
             top: 0;
             right: 0;
             margin: 10px 20px;
 
+            .mat-button {
+                width: 100%;
+                display: flex;
+                max-width: 285px;
+                margin-left: auto;
+
+                ::ng-deep .mat-button-wrapper {
+                    display: inline-block;
+                    width: 100%;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
         }
     }
 
@@ -48,18 +60,43 @@
         justify-content: center;
         align-items: center;
         flex-wrap: wrap;
-        max-width: 50%;
-        margin: auto;
-    }
+        max-width: 1024px;
+        margin: max(25vh, 100px) auto auto;
 
-    div.app {
-        flex: 0 1 25%;
-        margin: 20px;
-        min-width: 135px;
-    }
+        div.app {
+            padding: 15px;
+            @media only screen and (max-width: 339px) {
+                flex: 0 1 100%;
+            }
 
-    div.app button {
-        width: 100%;
-        height: 60px;
+            @media only screen and (min-width: 340px) {
+                flex: 0 1 80%;
+                max-width: 80%;
+            }
+
+            @media only screen and (min-width: 768px) {
+                flex: 0 1 50%;
+                max-width: 50%;
+            }
+
+            @media only screen and (min-width: 1024px) {
+                flex: 0 1 33%;
+                max-width: 33%;
+            }
+
+            button {
+                width: 100%;
+                height: 70px;
+                display: flex;
+                align-items: center;
+
+                ::ng-deep .mat-button-wrapper {
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                }
+
+            }
+        }
     }
-}
+}

src/app/apps.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-
-import { ApiService, AuthService } from 'sb-shared-lib';
+import { ApiService, AuthService, EnvService } from 'sb-shared-lib';
 
 
 @Component({
@@ -15,25 +14,37 @@ export class AppsComponent implements OnInit {
 
     public array: any;
     public apps: any;
+    public url_brand_logo: string;
 
     constructor(
-        private auth: AuthService,
-        private api: ApiService
+            private auth: AuthService,
+            private api: ApiService,
+            private env: EnvService
         ) {
     }
 
 
     public async ngOnInit() {
         try {
-            this.apps = await this.api.fetch("/?get=installed-apps");
+            this.apps = await this.api.fetch("/?get=config_live_apps");
+        }
+        catch(response) {
+            console.warn('unable to retrieve installed apps', response);
         }
-        catch (response){
-            console.log(response);
+
+        try {
+            const environment = await this.env.getEnv();
+            // #memo - env has a default app_logo_url, so we should always get a value
+            this.url_brand_logo = environment.app_logo_url;
         }
+        catch(response) {
+            console.warn('unable to retrieve brand logo', response);
+        }
+
         this.auth.getObservable().subscribe( (user:any) => {
-            this.user_apps = [];
-            this.user = user;
-        });
+                this.user_apps = [];
+                this.user = user;
+            });
     }
 
     public getApps() {
@@ -45,6 +56,22 @@ export class AppsComponent implements OnInit {
         }
     }
 
+    public getColor(app: string) {
+        let color: string = '#b0b0b0';
+        if(this.apps.hasOwnProperty(app) && this.apps[app].hasOwnProperty('color') && this.apps[app].color.length) {
+            color = this.apps[app].color;
+        }
+        return color;
+    }
+
+    public getTextColor(app: string) {
+        let text_color: string = '#ffffff';
+        if(this.apps.hasOwnProperty(app) && this.apps[app].hasOwnProperty('text_color') && this.apps[app].text_color.length) {
+            text_color = this.apps[app].text_color;
+        }
+        return text_color;
+    }
+
     public isGranted(app_name:string) {
         let app = this.apps[app_name];
         if(app.access?.groups && app.show_in_apps) {
@@ -58,7 +85,9 @@ export class AppsComponent implements OnInit {
     }
 
     public onSelect(app: any) {
-        window.location.href = this.apps[app].url;
+        if(this.apps.hasOwnProperty(app)  && this.apps[app].hasOwnProperty('url')) {
+            window.location.href = this.apps[app].url;
+        }
     }
 
     public async onclickDisconnect() {
@@ -73,4 +102,4 @@ export class AppsComponent implements OnInit {
         }
     }
 
-}
+}

src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+    production: true
 };

src/environments/environment.ts

@@ -3,11 +3,7 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false,
-  parent_domain:  'wharn.com',
-  backend_url:  'https://api.wharn.com',
-  rest_api_url: 'https://api.wharn.com/v1'  
-
+    production: false,
 };
 
 /*