#13 Use new API for app's logo and icon

src/app/app.component.ts

@@ -5,7 +5,6 @@ import {SubscribingComponent} from './modules/shared/components/subscribing.comp
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from './modules/shared/service/error.service'
 import {ConfigService} from './modules/shared/service/config.service'
-import {Config} from './modules/shared/model/config.model'
 import {environment} from '../environments/environment'
 
 @Component({
@@ -38,7 +37,7 @@ export class AppComponent extends SubscribingComponent {
       online => this.isServerOnline = online
     )
 
-    this.favIcon.href = environment.apiUrl + "/file?path=images%2Ficon"
+    this.favIcon.href = environment.apiUrl + "/config/icon"
   }
 
   reload() {

src/app/modules/configuration/config-editor.html

@@ -11,23 +11,23 @@
   <div class="d-flex flex-column" style="gap: 1.5rem">
     <cre-config-section *ngIf="!emergencyMode" label="Apparence">
       <cre-config-list>
-<!--        <cre-image-config-->
+        <cre-image-config
-<!--          label="Logo"-->
+          label="Logo"
-<!--          tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le-->
+          tooltip="Affiché dans la bannière de l'application web. Il peut être nécessaire de forcer le
-<!--                rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
+                rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
-<!--                'Ctrl+F5')."-->
+                'Ctrl+F5')."
-<!--          [configControl]="getConfigControl(keys.INSTANCE_LOGO_PATH)" previewWidth="170px"-->
+          [configControl]="getConfigControl(keys.INSTANCE_LOGO_SET)" previewWidth="170px"
-<!--          (invalidFormat)="invalidFormatConfirmBox.show()">-->
+          (invalidFormat)="invalidFormatConfirmBox.show()">
-<!--        </cre-image-config>-->
+        </cre-image-config>
 
-<!--        <cre-image-config-->
+        <cre-image-config
-<!--          label="Icône"-->
+          label="Icône"
-<!--          tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le-->
+          tooltip="Affiché dans l'onglet de la page dans le navigateur. Il peut être nécessaire de forcer le
-<!--                  rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches-->
+                  rafraîchissement du cache du navigateur pour que ce changement prenne effet (généralement avec les touches
-<!--                  'Ctrl+F5')."-->
+                  'Ctrl+F5')."
-<!--          [configControl]="getConfigControl(keys.INSTANCE_ICON_PATH)" previewWidth="32px"-->
+          [configControl]="getConfigControl(keys.INSTANCE_ICON_SET)" previewWidth="32px"
-<!--          (invalidFormat)="invalidFormatConfirmBox.show()">-->
+          (invalidFormat)="invalidFormatConfirmBox.show()">
-<!--        </cre-image-config>-->
+        </cre-image-config>
       </cre-config-list>
     </cre-config-section>
 

src/app/modules/configuration/config-editor.ts

@@ -16,8 +16,8 @@ export class CreConfigEditor extends ErrorHandlingComponent {
 
   keys = {
     INSTANCE_NAME: Config.INSTANCE_NAME,
-    INSTANCE_LOGO_PATH: Config.INSTANCE_LOGO_PATH,
+    INSTANCE_LOGO_SET: Config.INSTANCE_LOGO_SET,
-    INSTANCE_ICON_PATH: Config.INSTANCE_ICON_PATH,
+    INSTANCE_ICON_SET: Config.INSTANCE_ICON_SET,
     INSTANCE_URL: Config.INSTANCE_URL,
     DATABASE_URL: Config.DATABASE_URL,
     DATABASE_USER: Config.DATABASE_USER,

src/app/modules/configuration/config-image.html

@@ -18,7 +18,7 @@
     <div class="image-wrapper d-flex flex-column justify-content-end">
       <div>
         <img
-          [src]="updatedImage ? updatedImage : configuredImageUrl"
+          [src]="updatedImage ? updatedImage : imageUrl"
           [attr.width]="previewWidth ? previewWidth : null"
           class="mat-elevation-z3"/>
       </div>

src/app/modules/configuration/config.ts

@@ -1,10 +1,20 @@
-import {AfterViewInit, Component, ContentChild, Directive, EventEmitter, Input, Output, ViewChild, ViewEncapsulation} from '@angular/core'
+import {
+  AfterViewInit,
+  Component,
+  ContentChild,
+  Directive,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core'
 import {ConfigService} from '../shared/service/config.service'
 import {Config, ConfigControl} from '../shared/model/config.model'
 import {SubscribingComponent} from '../shared/components/subscribing.component'
 import {ErrorService} from '../shared/service/error.service'
 import {ActivatedRoute, Router} from '@angular/router'
-import {formatDate, formatDateTime, getFileUrl, readFile} from '../shared/utils/utils'
+import {formatDate, formatDateTime, getConfiguredImageUrl, getFileUrl, readFile} from '../shared/utils/utils'
 import {AbstractControl} from '@angular/forms'
 import {CrePromptDialog} from '../shared/components/dialogs/dialogs'
 
@@ -121,9 +131,9 @@ export class CreImageConfig extends _CreConfigBase {
     readFile(file, (content) => this.updatedImage = content)
   }
 
-
+  get imageUrl(): string {
-  get configuredImageUrl(): string {
+    const path = this.config.key == Config.INSTANCE_ICON_SET ? 'icon' : 'logo'
-    return getFileUrl(this.config.content)
+    return getConfiguredImageUrl(path)
   }
 }
 

src/app/modules/shared/components/header/header.component.ts

@@ -66,7 +66,7 @@ export class HeaderComponent extends SubscribingComponent {
   }
 
   get logoUrl(): string {
-    return environment.apiUrl + "/file?path=images%2Flogo&mediaType=image/png"
+    return environment.apiUrl + "/config/logo"
   }
 
   set activeLink(link: string) {

src/app/modules/shared/model/config.model.ts

@@ -3,8 +3,8 @@ import {filterMap} from '../utils/map.utils'
 
 export class Config {
   static readonly INSTANCE_NAME = 'instance.name'
-  static readonly INSTANCE_LOGO_PATH = 'instance.logo.path'
+  static readonly INSTANCE_LOGO_SET = 'instance.logo.set'
-  static readonly INSTANCE_ICON_PATH = 'instance.icon.path'
+  static readonly INSTANCE_ICON_SET = 'instance.icon.set'
   static readonly INSTANCE_URL = 'instance.url'
   static readonly DATABASE_URL = 'database.url'
   static readonly DATABASE_USER = 'database.user'
@@ -20,8 +20,8 @@ export class Config {
   static readonly OPERATING_SYSTEM = 'env.os'
 
   static readonly IMAGE_CONFIG_KEYS = [
-    Config.INSTANCE_LOGO_PATH,
+    Config.INSTANCE_LOGO_SET,
-    Config.INSTANCE_ICON_PATH
+    Config.INSTANCE_ICON_SET
   ]
 
   static readonly PASSWORD_CONFIG_KEYS = [

src/app/modules/shared/service/config.service.ts

@@ -39,11 +39,12 @@ export class ConfigService {
   }
 
   setImage(key: string, image: File): Observable<void> {
-    const body = new FormData()
+    const path = key == Config.INSTANCE_ICON_SET ? 'icon' : 'logo';
-    body.append('key', key)
-    body.append('image', image)
 
-    return this.api.put<void>('/config/image', body)
+    const body = new FormData()
+    body.append(path, image)
+
+    return this.api.put<void>(`/config/${path}`, body)
   }
 
   restart(): Observable<void> {

src/app/modules/shared/utils/utils.ts

@@ -60,3 +60,7 @@ export function readFile(file: File, consumer: (any) => void) {
 export function getFileUrl(path: string) {
   return `${environment.apiUrl}/file?path=${encodeURIComponent(path)}`
 }
+
+export function getConfiguredImageUrl(path: string) {
+  return `${environment.apiUrl}/config/${path}`
+}