Correction de la pastille de couleur dans la liste des recettes

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

@@ -1,3 +1,6 @@
-<mat-checkbox [formControl]="control">
-  {{label}}
+<mat-checkbox *ngIf="control" [formControl]="control">{{label}}</mat-checkbox>
+<mat-checkbox
+  *ngIf="!control"
+  [checked]="checked"
+  (change)="checkedChange.emit($event.checked)">
 </mat-checkbox>

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

@@ -42,15 +42,16 @@ import {MatCheckboxModule} from '@angular/material/checkbox'
     CreButtonsModule,
     MatCheckboxModule,
   ],
-  exports: [
-    CreInputComponent,
-    CreComboBoxComponent,
-    CreChipComboBoxComponent,
-    CreChipInputComponent,
-    CreAutocompleteInputComponent,
-    CreFileInputComponent,
-    CreBoolConfig
-  ]
+    exports: [
+        CreInputComponent,
+        CreComboBoxComponent,
+        CreChipComboBoxComponent,
+        CreChipInputComponent,
+        CreAutocompleteInputComponent,
+        CreFileInputComponent,
+        CreBoolConfig,
+        CreCheckboxInputComponent
+    ]
 })
 export class CreInputsModule {
 }

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

@@ -187,6 +187,9 @@ export class CreChipComboBoxComponent extends CreChipInputComponent implements O
 export class CreCheckboxInputComponent {
   @Input() label: string
   @Input() control: FormControl
+  @Input() checked: boolean
+
+  @Output() checkedChange = new EventEmitter<boolean>()
 }
 
 @Component({

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

@@ -8,6 +8,7 @@ export class Config {
   static readonly DATABASE_PASSWORD = 'database.password'
   static readonly DATABASE_VERSION = 'database.version.supported'
   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 JAVA_VERSION = 'env.java.version'

src/app/modules/shared/model/touch-up-kit.model.ts

@@ -6,6 +6,8 @@ export class TouchUpKit {
     public company: string,
     public quantity: number,
     public shippingDate: string,
+    public completed: boolean,
+    public completionDate: string,
     public finish: string[],
     public material: string[],
     public content: TouchUpKitProduct[]
@@ -18,7 +20,8 @@ export class TouchUpKitProduct {
     public id: number,
     public name: string,
     public description: string | null,
-    public quantity: number
+    public quantity: number,
+    public ready: boolean
   ) {
   }
 }

src/app/modules/touch-up-kit/components/form.ts

@@ -65,6 +65,8 @@ export class TouchUpKitForm extends SubscribingComponent {
       company: this.controls.company.value,
       quantity: this.controls.quantity.value,
       shippingDate: this.controls.shippingDate.value,
+      completed: false,
+      completionDate: null,
       finish: this.selectedFinish,
       material: this.selectedMaterial,
       content: this.touchUpKitContent

src/app/modules/touch-up-kit/components/product-editor.ts

@@ -51,7 +51,8 @@ export class TouchUpKitProductEditor implements OnInit {
       id: null,
       name: '',
       description: '',
-      quantity: 1
+      quantity: 1,
+      ready: false
     }
   }
 }

src/app/modules/touch-up-kit/pages/banner.html

@@ -14,6 +14,7 @@
         </ng-container>
       </p>
       <p>Matériel: {{material}}</p>
+      <b *ngIf="touchUpKit.completed">Complété le {{completionDate}}</b>
     </info-banner-section>
   </info-banner-content>
 </info-banner>

src/app/modules/touch-up-kit/pages/details.html

@@ -1,10 +1,18 @@
 <div *ngIf="touchUpKit">
   <touchupkit-banner [touchUpKit]="touchUpKit"></touchupkit-banner>
 
-  <div class="action-bar backward">
-    <button mat-raised-button color="primary" routerLink="/misc/touch-up-kit">Retour</button>
-    <button mat-raised-button color="accent" (click)="openPdf()">PDF</button>
-  </div>
+  <cre-action-bar>
+    <cre-action-group>
+      <cre-primary-button routerLink="/misc/touch-up-kit">Retour</cre-primary-button>
+      <cre-accent-button (click)="openPdf()">PDF</cre-accent-button>
+    </cre-action-group>
+    <cre-action-group>
+      <cre-accent-button (click)="save()">Enregistrer</cre-accent-button>
+      <cre-warn-button *ngIf="!touchUpKit.completed && canEditTouchUpKits" (click)="completeConfirmBox.show()">
+        Compléter
+      </cre-warn-button>
+    </cre-action-group>
+  </cre-action-bar>
 
   <cre-table class="mx-auto" [dataSource]="touchUpKit.content" [columns]="contentTableCols" [interactive]="false">
     <ng-container matColumnDef="name">
@@ -24,5 +32,18 @@
       <th mat-header-cell *matHeaderCellDef>Quantité</th>
       <td mat-cell *matCellDef="let product">{{product.quantity}}</td>
     </ng-container>
+
+    <ng-container matColumnDef="ready">
+      <th mat-header-cell *matHeaderCellDef>Prêt</th>
+      <td mat-cell *matCellDef="let product">
+        <cre-checkbox-input [(checked)]="product.ready"></cre-checkbox-input>
+      </td>
+    </ng-container>
   </cre-table>
+
+  <cre-confirm-box
+    #completeConfirmBox
+    message="Voulez-vous vraiment compléter le kit de retouche du projet {{touchUpKit.project}} ({{touchUpKit.buggy}})? Cette action est irréversible."
+    (confirm)="complete()">
+  </cre-confirm-box>
 </div>

src/app/modules/touch-up-kit/pages/list.html

@@ -5,7 +5,7 @@
   </cre-action-group>
 </cre-action-bar>
 
-<cre-table class="mx-auto" [dataSource]="touchUpKits$ | async" [columns]="columns">
+<cre-table class="mx-auto" [dataSource]="uncompletedTouchUpKits$ | async" [columns]="columns">
   <ng-container matColumnDef="project">
     <th mat-header-cell *matHeaderCellDef>Project</th>
     <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.project}}</td>
@@ -51,3 +51,58 @@
     </td>
   </ng-container>
 </cre-table>
+
+<mat-card *ngIf="expirationPeriod" class="mx-auto mt-5 named-table">
+  <mat-card-header>
+    <mat-card-title>Kits de retouche complétés</mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <cre-table [dataSource]="completedTouchUpKits$ | async" [columns]="completedColumns">
+      <ng-container matColumnDef="project">
+        <th mat-header-cell *matHeaderCellDef>Project</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.project}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="buggy">
+        <th mat-header-cell *matHeaderCellDef>Chariot</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.buggy}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="company">
+        <th mat-header-cell *matHeaderCellDef>Bannière</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{touchUpKit.company}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="shippingDate">
+        <th mat-header-cell *matHeaderCellDef>Date de livraison</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{shippingDate(touchUpKit)}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="completionDate">
+        <th mat-header-cell *matHeaderCellDef>Date de complétion</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{completionDate(touchUpKit)}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="expirationDate">
+        <th mat-header-cell *matHeaderCellDef>Date d'expiration</th>
+        <td mat-cell *matCellDef="let touchUpKit">{{expirationDate(touchUpKit)}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="pdfButton">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let touchUpKit; let i = index">
+          <cre-accent-button [creInteractiveCell]="i" (click)="openTouchUpKitPdf(touchUpKit)">PDF</cre-accent-button>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="detailsButton">
+        <th mat-header-cell *matHeaderCellDef></th>
+        <td mat-cell *matCellDef="let touchUpKit; let i = index">
+          <cre-accent-button [creInteractiveCell]="i" routerLink="/misc/touch-up-kit/details/{{touchUpKit.id}}">
+            Détails
+          </cre-accent-button>
+        </td>
+      </ng-container>
+    </cre-table>
+  </mat-card-content>
+</mat-card>

src/app/modules/touch-up-kit/pages/touchupkit.ts

@@ -9,6 +9,10 @@ import {ActivatedRoute, Router} from '@angular/router'
 import {Permission} from '../../shared/model/user'
 import {RecipeService} from '../../colors/services/recipe.service'
 import {AppState} from '../../shared/app-state'
+import {map} from 'rxjs/operators'
+import {LocalDate, Period} from 'js-joda'
+import {ConfigService} from '../../shared/service/config.service'
+import {Config} from '../../shared/model/config.model'
 
 @Component({
   selector: 'touchupkit-banner',
@@ -24,6 +28,10 @@ export class TouchUpKitBanner {
     return formatDate(this.touchUpKit.shippingDate)
   }
 
+  get completionDate(): string {
+    return formatDate(this.touchUpKit.completionDate)
+  }
+
   get material(): string {
     return reduceDashes(this.touchUpKit.material)
   }
@@ -35,11 +43,21 @@ export class TouchUpKitBanner {
 })
 export class TouchUpKitList extends ErrorHandlingComponent {
   touchUpKits$ = this.touchUpKitService.all
+  completedTouchUpKits$ = this.touchUpKits$.pipe(
+    map(kits => kits.filter(k => k.completed))
+  )
+  uncompletedTouchUpKits$ = this.touchUpKits$.pipe(
+    map(kits => kits.filter(k => !k.completed))
+  )
+  expirationPeriod: Period | null
+
   columns = ['project', 'buggy', 'company', 'shippingDate', 'pdfButton', 'detailsButton', 'editButton']
+  completedColumns = ['project', 'buggy', 'company', 'shippingDate', 'completionDate', 'expirationDate', 'pdfButton', 'detailsButton']
 
   constructor(
     private touchUpKitService: TouchUpKitService,
     private accountService: AccountService,
+    private configService: ConfigService,
     private appState: AppState,
     errorService: ErrorService,
     router: Router,
@@ -49,10 +67,32 @@ export class TouchUpKitList extends ErrorHandlingComponent {
     this.appState.title = 'Kits de retouche'
   }
 
+  ngOnInit() {
+    super.ngOnInit()
+
+    this.subscribe(
+      this.configService.get(Config.TOUCH_UP_KIT_EXPIRATION),
+      config => this.expirationPeriod = Period.parse(config.content)
+    )
+  }
+
   openTouchUpKitPdf(touchUpKit: TouchUpKit) {
     openTouchUpKit(touchUpKit)
   }
 
+  shippingDate(touchUpKit: TouchUpKit): string {
+    return formatDate(touchUpKit.shippingDate)
+  }
+
+  completionDate(touchUpKit: TouchUpKit): string {
+    return formatDate(touchUpKit.completionDate)
+  }
+
+  expirationDate(touchUpKit: TouchUpKit): string {
+    const completionDate = LocalDate.parse(touchUpKit.completionDate)
+    return formatDate(completionDate.plus(this.expirationPeriod).toString())
+  }
+
   get canEditTouchUpKits(): boolean {
     return this.accountService.hasPermission(Permission.EDIT_TOUCH_UP_KITS)
   }
@@ -64,11 +104,12 @@ export class TouchUpKitList extends ErrorHandlingComponent {
 })
 export class TouchUpKitDetails extends ErrorHandlingComponent {
   touchUpKit: TouchUpKit | null
-  contentTableCols = ['name', 'description', 'quantity']
+  contentTableCols = ['name', 'description', 'quantity', 'ready']
 
   constructor(
     private touchUpKitService: TouchUpKitService,
     private recipeService: RecipeService,
+    private accountService: AccountService,
     private appState: AppState,
     errorService: ErrorService,
     activatedRoute: ActivatedRoute,
@@ -93,6 +134,24 @@ export class TouchUpKitDetails extends ErrorHandlingComponent {
   openPdf() {
     openTouchUpKit(this.touchUpKit)
   }
+
+  save() {
+    this.subscribeAndNavigate(
+      this.touchUpKitService.update(this.touchUpKit),
+      `/misc/touch-up-kit/details/${this.touchUpKit.id}`
+    )
+  }
+
+  complete() {
+    this.subscribeAndNavigate(
+      this.touchUpKitService.complete(this.touchUpKit),
+      '/misc/touch-up-kit'
+    )
+  }
+
+  get canEditTouchUpKits(): boolean {
+    return this.accountService.hasPermission(Permission.EDIT_TOUCH_UP_KITS)
+  }
 }
 
 @Component({

src/app/modules/touch-up-kit/service/touch-up-kit.service.ts

@@ -1,7 +1,7 @@
 import {Injectable} from '@angular/core'
 import {ApiService} from '../../shared/service/api.service'
 import {Observable} from 'rxjs'
-import {TouchUpKit, TouchUpKitProduct} from '../../shared/model/touch-up-kit.model'
+import {TouchUpKit} from '../../shared/model/touch-up-kit.model'
 
 @Injectable({
   providedIn: 'root'
@@ -28,6 +28,10 @@ export class TouchUpKitService {
     return this.api.put<void>('/touchupkit', touchUpKit)
   }
 
+  complete(touchUpKit: TouchUpKit): Observable<void> {
+    return this.api.put<void>(`/touchupkit/${touchUpKit.id}/complete`)
+  }
+
   delete(id: number): Observable<void> {
     return this.api.delete<void>(`/touchupkit/${id}`)
   }

src/styles.sass

@@ -41,6 +41,17 @@ mat-card
       text-transform: uppercase
       letter-spacing: 1.25px
 
+  &.named-table mat-card-content
+    margin: 0
+    padding: 0
+
+    table
+      border: none
+      box-shadow: none
+
+      th
+        border-radius: 0 !important
+
 table
   box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)
   max-width: 90vw