Merge branch 'features' into 'master'

#24 AJouter le support des configurations env.build.version, env.build.time et recipe.approbation.expiration

See merge request color-recipes-explorer/frontend!26

docker-compose.yml

@@ -0,0 +1,29 @@
+version: "3.1"
+
+services:
+  database:
+    image: mysql
+    command: --default-authentication-plugin=mysql_native_password
+    environment:
+      MYSQL_ROOT_PASSWORD: "pass"
+      MYSQL_DATABASE: "cre"
+    ports:
+      - 3306:3306
+  backend:
+    image: fyloz.dev:5443/color-recipes-explorer/backend:master
+    environment:
+      spring_profiles_active: "mysql,debug"
+      cre_database_url: "mysql://database:3306/cre"
+      cre_database_username: "root"
+      cre_database_password: "pass"
+      CRE_ENABLE_DB_UPDATE: 0
+      server_port: 9090
+    ports:
+      - 9090:9090
+    volumes:
+      - cre_data:/usr/bin/cre/data
+      - cre_config:/usr/bin/cre/config
+
+volumes:
+  cre_data:
+  cre_config:

src/app/modules/colors/components/recipe-info/recipe-info.component.html

@@ -11,7 +11,7 @@
         <p>Non approuvée</p>
         <mat-icon svgIcon="alert" class="color-warning"></mat-icon>
       </div>
-      <div *ngIf="isApprobationExpired" class="recipe-not-approved-wrapper d-flex flex-row" title="Cette recette a été approuvée il y a plus de 4 ans">
+      <div *ngIf="recipe.approbationExpired" class="recipe-not-approved-wrapper d-flex flex-row" title="Cette recette a été approuvée il y a plus de 4 ans">
         <p>Approbation expirée</p>
         <mat-icon svgIcon="clock-alert" class="color-warning"></mat-icon>
       </div>

src/app/modules/colors/components/recipe-info/recipe-info.component.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, Input} from '@angular/core'
-import {getRecipeLuma, recipeApprobationExpired, Recipe} from '../../../shared/model/recipe.model'
+import {Recipe} from '../../../shared/model/recipe.model'
 import {formatDate} from '../../../shared/utils/utils'
 
 @Component({
@@ -20,8 +20,4 @@ export class RecipeInfoComponent implements AfterViewInit {
   get approbationDate(): string {
     return formatDate(this.recipe.approbationDate)
   }
-
-  get isApprobationExpired(): boolean {
-    return recipeApprobationExpired(this.recipe)
-  }
 }

src/app/modules/colors/pages/list/list.component.html

@@ -74,10 +74,10 @@
           title="Cette recette n'est pas approuvée">
         </mat-icon>
         <mat-icon
-          *ngIf="isRecipeApprobationExpired(recipe)"
+          *ngIf="recipe.approbationExpired"
           svgIcon="clock-alert"
           class="color-warning"
-          title="L'approbation de l'échantillon est expirée (il y a plus de 4 ans)">
+          title="L'approbation de l'échantillon est expirée">
         </mat-icon>
       </td>
     </ng-container>

src/app/modules/colors/pages/list/list.component.ts

@@ -3,7 +3,7 @@ import {ErrorHandlingComponent} from '../../../shared/components/subscribing.com
 import {RecipeService} from '../../services/recipe.service'
 import {Permission} from '../../../shared/model/user'
 import {AccountService} from '../../../accounts/services/account.service'
-import {getRecipeLuma, Recipe, recipeApprobationExpired} from '../../../shared/model/recipe.model'
+import {getRecipeLuma, Recipe} from '../../../shared/model/recipe.model'
 import {ActivatedRoute, Router} from '@angular/router'
 import {ErrorService} from '../../../shared/service/error.service'
 import {AppState} from '../../../shared/app-state'
@@ -65,10 +65,6 @@ export class ListComponent extends ErrorHandlingComponent {
       .forEach(r => this.recipeMatchesSearchQuery(r))
   }
 
-  isRecipeApprobationExpired(recipe: Recipe): boolean {
-    return recipeApprobationExpired(recipe)
-  }
-
   isCompanyHidden(companyRecipes: Recipe[]): boolean {
     return (this.searchQuery && this.searchQuery.length > 0) && companyRecipes.map(r => this.hiddenRecipes[r.id]).filter(r => !r).length <= 0
   }

src/app/modules/configuration/bool.html

@@ -1,4 +1,4 @@
 <div *ngIf="configuration" [attr.title]="tooltip?.content" class="d-flex flex-row justify-content-between align-items-center">
   <cre-checkbox-input [label]="label.content" [control]="config.control"></cre-checkbox-input>
-  <mat-hint>Dernière mise à jour: {{lastUpdated}}</mat-hint>
+  <mat-hint>{{lastUpdated}}</mat-hint>
 </div>

src/app/modules/configuration/config.html

@@ -3,7 +3,7 @@
     class="w-100"
     [type]="config.key === 'database.password' ? 'password' : 'text'"
     [label]="label.content"
-    [hint]="configuration.editable ? 'Dernière mise à jour: ' + lastUpdated : null"
+    [hint]="configuration.editable ? lastUpdated : null"
     [control]="config.control"
     [icon]="configuration.requireRestart ? 'alert' : null"
     [iconTitle]="configuration.requireRestart ? 'Requiert un redémarrage' : null"

src/app/modules/configuration/config.module.ts

@@ -7,7 +7,7 @@ import {
   CreImageConfig,
   CreConfigList,
   CreConfigActions,
-  CreConfigTooltip
+  CreConfigTooltip, CrePeriodConfig, CreBoolConfig, CreDateConfig
 } from './config'
 import {SharedModule} from '../shared/shared.module'
 import {CreInputsModule} from '../shared/components/inputs/inputs.module'
@@ -23,7 +23,10 @@ import {CreButtonsModule} from '../shared/components/buttons/buttons.module'
     CreImageConfig,
     CreConfigSection,
     CreConfigList,
-    CreConfigActions
+    CreConfigActions,
+    CreBoolConfig,
+    CrePeriodConfig,
+    CreDateConfig
   ],
   imports: [
     SharedModule,

src/app/modules/configuration/config.ts

@@ -15,7 +15,7 @@ import {Config} from '../shared/model/config.model'
 import {ErrorHandlingComponent, SubscribingComponent} from '../shared/components/subscribing.component'
 import {ErrorService} from '../shared/service/error.service'
 import {ActivatedRoute, Router} from '@angular/router'
-import {formatDateTime, readFile} from '../shared/utils/utils'
+import {formatDate, formatDateTime, getFileUrl, readFile} from '../shared/utils/utils'
 import {FormControl, Validators} from '@angular/forms'
 import {ConfirmBoxComponent} from '../shared/components/confirm-box/confirm-box.component'
 import {environment} from '../../../environments/environment'
@@ -117,13 +117,13 @@ export class CreConfig extends SubscribingComponent {
   }
 
   get lastUpdated(): string {
-    return formatDateTime(this.configuration.lastUpdated)
+    return 'Dernière mise à jour: ' + formatDateTime(this.configuration.lastUpdated)
   }
 }
 
 @Component({
   selector: 'cre-image-config',
-  templateUrl: 'image-config.html',
+  templateUrl: 'image.html',
   styleUrls: ['config.sass'],
   encapsulation: ViewEncapsulation.None
 })
@@ -147,14 +147,15 @@ export class CreImageConfig extends CreConfig {
     readFile(file, (content) => this.updatedImage = content)
   }
 
-  get imageUrl(): string {
-    return `${environment.apiUrl}/file?path=${this.configuration.content}`
+
+  get configuredImageUrl(): string {
+    return getFileUrl(this.configuration.content)
   }
 }
 
 @Component({
   selector: 'cre-bool-config',
-  templateUrl: 'bool-config.html'
+  templateUrl: 'bool.html'
 })
 export class CreBoolConfig extends CreConfig {
   setConfig(config: Config) {
@@ -163,6 +164,24 @@ export class CreBoolConfig extends CreConfig {
   }
 }
 
+@Component({
+  selector: 'cre-period-config',
+  templateUrl: 'period.html'
+})
+export class CrePeriodConfig extends CreConfig {
+}
+
+@Component({
+  selector: 'cre-date-config',
+  templateUrl: 'date.html'
+})
+export class CreDateConfig extends CreConfig {
+  setConfig(config: Config) {
+    super.setConfig(config);
+    this.config.control.setValue(formatDate(config.content))
+  }
+}
+
 @Component({
   selector: 'cre-config-editor',
   templateUrl: 'editor.html'
@@ -179,8 +198,11 @@ export class CreConfigEditor extends ErrorHandlingComponent {
     DATABASE_USER: Config.DATABASE_USER,
     DATABASE_PASSWORD: Config.DATABASE_PASSWORD,
     DATABASE_VERSION: Config.DATABASE_VERSION,
+    RECIPE_APPROBATION_EXPIRATION: Config.RECIPE_APPROBATION_EXPIRATION,
     TOUCH_UP_KIT_CACHE_PDF: Config.TOUCH_UP_KIT_CACHE_PDF,
-    APP_VERSION: Config.APP_VERSION,
+    TOUCH_UP_KIT_EXPIRATION: Config.TOUCH_UP_KIT_EXPIRATION,
+    BACKEND_BUILD_VERSION: Config.BACKEND_BUILD_VERSION,
+    BACKEND_BUILD_TIME: Config.BACKEND_BUILD_TIME,
     JAVA_VERSION: Config.JAVA_VERSION,
     OPERATING_SYSTEM: Config.OPERATING_SYSTEM
   }

src/app/modules/configuration/date.html

@@ -0,0 +1,12 @@
+<div *ngIf="configuration" [attr.title]="tooltip?.content">
+  <cre-input [class.has-hint]="configuration.editable"
+             class="w-100"
+             type="text"
+             [label]="label.content"
+             [hint]="configuration.editable ? lastUpdated : null"
+             [control]="config.control"
+             [icon]="configuration.requireRestart ? 'alert' : null"
+             [iconTitle]="configuration.requireRestart ? 'Requiert un redémarrage' : null"
+             iconColor="warning">
+  </cre-input>
+</div>

src/app/modules/configuration/editor.html

@@ -41,8 +41,19 @@
   </cre-config-section>
 
   <cre-config-section>
-    <cre-config-label>Kits de retouche</cre-config-label>
+    <cre-config-label>Données</cre-config-label>
     <cre-config-list class="pt-2">
+      <cre-period-config [config]="getConfig(keys.RECIPE_APPROBATION_EXPIRATION)">
+        <cre-config-label>Période d'expiration de l'approbation de l'échantillon des recettes</cre-config-label>
+      </cre-period-config>
+
+      <cre-period-config [config]="getConfig(keys.TOUCH_UP_KIT_EXPIRATION)">
+        <cre-config-label>Période d'expiration des kits de retouches complets</cre-config-label>
+        <cre-config-tooltip>
+          Les kits de retouche complétés expirent après la période configurée. Les kits de retouche expirés seront supprimés automatiquement.
+        </cre-config-tooltip>
+      </cre-period-config>
+
       <cre-bool-config [config]="getConfig(keys.TOUCH_UP_KIT_CACHE_PDF)">
         <cre-config-label>Activer le cache des PDFs générés</cre-config-label>
         <cre-config-tooltip>
@@ -80,10 +91,14 @@
         <cre-config-label>Version de la base de données</cre-config-label>
       </cre-config>
 
-      <cre-config [config]="getConfig(keys.APP_VERSION)">
+      <cre-config [config]="getConfig(keys.BACKEND_BUILD_VERSION)">
         <cre-config-label>Version de Color Recipes Explorer</cre-config-label>
       </cre-config>
 
+      <cre-date-config [config]="getConfig(keys.BACKEND_BUILD_TIME)">
+        <cre-config-label>Date de compilation de Color Recipes Explorer</cre-config-label>
+      </cre-date-config>
+
       <cre-config [config]="getConfig(keys.JAVA_VERSION)">
         <cre-config-label>Version de Java</cre-config-label>
       </cre-config>

src/app/modules/configuration/image.html

@@ -17,10 +17,10 @@
   <div class="image-wrapper d-flex flex-column justify-content-end">
     <div>
       <img
-        [src]="updatedImage ? updatedImage : imageUrl"
+        [src]="updatedImage ? updatedImage : configuredImageUrl"
         [attr.width]="previewWidth ? previewWidth : null"
         class="mat-elevation-z3"/>
     </div>
-    <mat-hint>Dernière mise à jour:<br/>{{lastUpdated}}</mat-hint>
+    <mat-hint>{{lastUpdated}}</mat-hint>
   </div>
 </div>

src/app/modules/configuration/period.html

@@ -0,0 +1,7 @@
+<div *ngIf="configuration" [attr.title]="tooltip?.content">
+  <cre-period-input
+    [control]="config.control"
+    [label]="label.content"
+    [hint]="lastUpdated">
+  </cre-period-input>
+</div>

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"
+    return environment.apiUrl + "/file?path=images%2Flogo&mediaType=image/png"
   }
 
   set activeLink(link: string) {

src/app/modules/shared/components/inputs/input.sass

@@ -12,3 +12,11 @@ cre-file-input
 
 cre-checkbox-input mat-checkbox
   margin-top: .5rem
+
+cre-period-input
+  .mat-form-field-infix
+    display: inherit
+
+  mat-select
+    margin-left: 1em
+    width: 7em !important

src/app/modules/shared/components/inputs/inputs.module.ts

@@ -4,7 +4,7 @@ import {
   CreChipComboBoxComponent,
   CreChipInputComponent,
   CreComboBoxComponent, CreFileInputComponent,
-  CreInputComponent
+  CreInputComponent, CrePeriodInputComponent
 } from './inputs'
 import {MatInputModule} from '@angular/material/input'
 import {MatIconModule} from '@angular/material/icon'
@@ -15,8 +15,8 @@ import {MatListModule} from '@angular/material/list'
 import {MatAutocompleteModule} from '@angular/material/autocomplete'
 import {MatChipsModule} from '@angular/material/chips'
 import {CreButtonsModule} from '../buttons/buttons.module'
-import {CreBoolConfig} from '../../../configuration/config'
 import {MatCheckboxModule} from '@angular/material/checkbox'
+import {MatSelectModule} from '@angular/material/select'
 
 @NgModule({
   declarations: [
@@ -26,8 +26,8 @@ import {MatCheckboxModule} from '@angular/material/checkbox'
     CreComboBoxComponent,
     CreChipComboBoxComponent,
     CreFileInputComponent,
-    CreBoolConfig,
-    CreCheckboxInputComponent
+    CreCheckboxInputComponent,
+    CrePeriodInputComponent
   ],
   imports: [
     MatInputModule,
@@ -41,17 +41,18 @@ import {MatCheckboxModule} from '@angular/material/checkbox'
     FormsModule,
     CreButtonsModule,
     MatCheckboxModule,
+    MatSelectModule,
   ],
-    exports: [
-        CreInputComponent,
-        CreComboBoxComponent,
-        CreChipComboBoxComponent,
-        CreChipInputComponent,
-        CreAutocompleteInputComponent,
-        CreFileInputComponent,
-        CreBoolConfig,
-        CreCheckboxInputComponent
-    ]
+  exports: [
+    CreInputComponent,
+    CreComboBoxComponent,
+    CreChipComboBoxComponent,
+    CreChipInputComponent,
+    CreAutocompleteInputComponent,
+    CreFileInputComponent,
+    CreCheckboxInputComponent,
+    CrePeriodInputComponent
+  ]
 })
 export class CreInputsModule {
 }

src/app/modules/shared/components/inputs/inputs.ts

@@ -11,13 +11,13 @@ import {
   ViewChild,
   ViewEncapsulation
 } from '@angular/core'
-import {AbstractControl, FormControl, ValidationErrors, ValidatorFn} from '@angular/forms'
+import {AbstractControl, FormControl, ValidationErrors, ValidatorFn, Validators} from '@angular/forms'
 import {COMMA, ENTER} from '@angular/cdk/keycodes'
 import {Observable, Subject} from 'rxjs'
 import {map, takeUntil} from 'rxjs/operators'
 import {MatChipInputEvent} from '@angular/material/chips'
 import {MatAutocomplete, MatAutocompleteSelectedEvent} from '@angular/material/autocomplete'
-import {MatFormFieldAppearance} from '@angular/material/form-field'
+import {MatOptionSelectionChange} from '@angular/material/core'
 
 @Component({
   selector: 'cre-input',
@@ -47,7 +47,7 @@ export class CreInputComponent {
 
 @Component({
   selector: 'cre-autocomplete-input',
-  templateUrl: 'autocomplete-input.html',
+  templateUrl: 'autocomplete.html',
   encapsulation: ViewEncapsulation.None
 })
 export class CreAutocompleteInputComponent {
@@ -65,7 +65,7 @@ export class CreAutocompleteInputComponent {
 
 @Component({
   selector: 'cre-chip-input',
-  templateUrl: 'chip-input.html',
+  templateUrl: 'chips.html',
   encapsulation: ViewEncapsulation.None
 })
 export class CreChipInputComponent implements OnInit {
@@ -129,7 +129,7 @@ export class CreComboBoxComponent {
 
 @Component({
   selector: 'cre-chip-combo-box',
-  templateUrl: 'chip-combo-box.html',
+  templateUrl: 'chips-combo-box.html',
   encapsulation: ViewEncapsulation.None
 })
 export class CreChipComboBoxComponent extends CreChipInputComponent implements OnDestroy {
@@ -194,7 +194,7 @@ export class CreCheckboxInputComponent {
 
 @Component({
   selector: 'cre-file-input',
-  templateUrl: 'file-input.html'
+  templateUrl: 'file.html'
 })
 export class CreFileInputComponent implements OnInit {
   @Input() label: string
@@ -227,6 +227,51 @@ export class CreFileInputComponent implements OnInit {
   }
 }
 
+@Component({
+  selector: 'cre-period-input',
+  templateUrl: 'period.html',
+  styleUrls: ['input.sass'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CrePeriodInputComponent implements OnInit {
+  @Input() control: FormControl
+  @Input() label: string
+  @Input() hint: string | null
+
+  readonly periodTypes = [
+    {value: 'D', label: 'Jours'},
+    {value: 'M', label: 'Mois'},
+    {value: 'Y', label: 'Années'}
+  ]
+  readonly inputControl = new FormControl(null, Validators.compose([Validators.required, Validators.min(1), Validators.pattern(/^[0-9]\d*$/)]))
+  readonly selectControl = new FormControl()
+
+  ngOnInit(): void {
+    this.setValuesFromPeriod(this.control.value as string)
+  }
+
+  inputControlUpdate(value: string) {
+    this.updateControl(value, this.selectControl.value)
+  }
+
+  selectControlUpdate(event: any) {
+    this.updateControl(this.inputControl.value, event.value)
+  }
+
+  private updateControl(inputValue: string, selectValue: string) {
+    this.control.setValue('P' + inputValue + selectValue)
+    this.control.markAsDirty()
+  }
+
+  private setValuesFromPeriod(period: string) {
+    const periodTypeChar = period.slice(-1)
+    period = period.slice(1, -1)
+
+    this.selectControl.setValue(periodTypeChar)
+    this.inputControl.setValue(period)
+  }
+}
+
 export class ComboBoxEntry {
   constructor(
     public key: any,

src/app/modules/shared/components/inputs/period.html

@@ -0,0 +1,18 @@
+<div class="d-flex flex-row justify-content-start">
+  <mat-form-field>
+    <mat-label>{{label}}</mat-label>
+    <input matInput type="number" step="1" [formControl]="inputControl" required (ngModelChange)="inputControlUpdate($event)"/>
+    <mat-hint *ngIf="hint">{{hint}}</mat-hint>
+    <mat-error *ngIf="inputControl.invalid">
+      <p *ngIf="inputControl.errors.required">Une période est requise</p>
+      <p *ngIf="inputControl.errors.min">La période doit être supérieure ou égale à 1</p>
+      <p *ngIf="inputControl.errors.pattern">La période doit être un nombre entier</p>
+    </mat-error>
+
+    <mat-select [formControl]="selectControl" (selectionChange)="selectControlUpdate($event)">
+      <mat-option *ngFor="let type of periodTypes; let i = index" [value]="type.value" >
+        {{type.label}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+</div>

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

@@ -7,10 +7,12 @@ export class Config {
   static readonly DATABASE_USER = 'database.user'
   static readonly DATABASE_PASSWORD = 'database.password'
   static readonly DATABASE_VERSION = 'database.version.supported'
+  static readonly RECIPE_APPROBATION_EXPIRATION = 'recipe.approbation.expiration'
   static readonly TOUCH_UP_KIT_CACHE_PDF = 'touchupkit.pdf.cache'
   static readonly TOUCH_UP_KIT_EXPIRATION = 'touchupkit.expiration'
   static readonly EMERGENCY_MODE = 'env.emergency'
-  static readonly APP_VERSION = 'env.version'
+  static readonly BACKEND_BUILD_VERSION = 'env.build.version'
+  static readonly BACKEND_BUILD_TIME = 'env.build.time'
   static readonly JAVA_VERSION = 'env.java.version'
   static readonly OPERATING_SYSTEM = 'env.os'
 

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

@@ -12,6 +12,7 @@ export class Recipe {
     public gloss: number,
     public sample: number,
     public approbationDate: string,
+    public approbationExpired: boolean,
     public remark: string,
     public company: Company,
     public mixes: Mix[],
@@ -124,10 +125,3 @@ export function getRecipeLuma(recipe: Recipe): number {
 
   return 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709
 }
-
-// TODO hard-coded for prototype
-export function recipeApprobationExpired(recipe: Recipe): boolean {
-  // @ts-ignore
-  return recipe.approbationDate && LocalDate.parse(recipe.approbationDate).year() < new Date().getFullYear() - 4
-}
-

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

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

src/environments/environment.prod.ts

@@ -1,4 +1,4 @@
 export const environment = {
   production: true,
-  apiUrl: 'https://cre.fyloz.dev/api'
+  apiUrl: window.location.href + '/api'
 };