From 644c3547aa05c8d8b73151b96381f9064bd860b0 Mon Sep 17 00:00:00 2001
From: FORESTIER Fabien <fabien.forestier@soprasteria.com>
Date: Fri, 9 Aug 2019 08:54:40 +0200
Subject: [PATCH] Format reuseTypes + format dates

---
 .../detail/changelog-detail.component.html    |  4 ++--
 .../reuses/detail/reuse-detail.component.html |  6 +++---
 .../reuses/detail/reuse-detail.component.ts   |  6 +++++-
 .../reuses/edit/reuse-form.component.html     |  3 ++-
 .../reuses/edit/reuse-form.component.ts       | 20 ++++---------------
 .../reuses/list/reuses.component.html         |  2 +-
 .../reuses/list/reuses.component.scss         |  2 +-
 .../reuses/list/reuses.component.ts           |  6 +++++-
 src/app/models/reuse.model.ts                 |  7 +++++++
 9 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/app/components/changelog/detail/changelog-detail.component.html b/src/app/components/changelog/detail/changelog-detail.component.html
index b57e4e0..4c4fb3f 100644
--- a/src/app/components/changelog/detail/changelog-detail.component.html
+++ b/src/app/components/changelog/detail/changelog-detail.component.html
@@ -17,11 +17,11 @@
             </p>
             <p>
               <span class="has-text-weight-bold">Date de création: </span>
-              <span>{{changelog.createDate}}</span>
+              <span>{{changelog.createDate | date:'dd-LL-yyyy HH:mm:ss'}}</span>
             </p>
             <p>
               <span class="has-text-weight-bold">Date de dernière mise à jour: </span>
-              <span>{{changelog.updateDate}}</span>
+              <span>{{changelog.updateDate | date:'dd-LL-yyyy HH:mm:ss'}}</span>
             </p>
             <p>
               <span class="has-text-weight-bold">Langue: </span>
diff --git a/src/app/components/reuses/detail/reuse-detail.component.html b/src/app/components/reuses/detail/reuse-detail.component.html
index 200cbfc..def3b46 100644
--- a/src/app/components/reuses/detail/reuse-detail.component.html
+++ b/src/app/components/reuses/detail/reuse-detail.component.html
@@ -26,11 +26,11 @@
             </p>
             <p>
               <span class="has-text-weight-bold">Date de création: </span>
-              <span>{{reuse.createDate}}</span>
+              <span>{{reuse.createDate | date:'dd-LL-yyyy HH:mm:ss'}}</span>
             </p>
             <p>
               <span class="has-text-weight-bold">Date de dernière mise à jour: </span>
-              <span>{{reuse.updateDate}}</span>
+              <span>{{reuse.updateDate | date:'dd-LL-yyyy HH:mm:ss'}}</span>
             </p>
 
             <p>
@@ -45,7 +45,7 @@
             <div class="list-container" *ngIf="reuse.reuseTypes && reuse.reuseTypes.length > 0">
               <span class="has-text-weight-bold">Type(s) de réutilisation: </span>
               <ul>
-                <li *ngFor="let reuseType of reuse.reuseTypes">
+                <li *ngFor="let reuseType of reuseTypes">
                   {{ reuseType }}
                 </li>
               </ul>
diff --git a/src/app/components/reuses/detail/reuse-detail.component.ts b/src/app/components/reuses/detail/reuse-detail.component.ts
index ffada58..22d807d 100644
--- a/src/app/components/reuses/detail/reuse-detail.component.ts
+++ b/src/app/components/reuses/detail/reuse-detail.component.ts
@@ -2,7 +2,7 @@
 import { switchMap } from 'rxjs/operators';
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap } from '@angular/router';
-import { Reuse } from '../../../models/reuse.model';
+import { Reuse, ReuseTypes } from '../../../models/reuse.model';
 import { ReuseService } from '../../../services';
 
 @Component({
@@ -27,4 +27,8 @@ export class ReuseDetailComponent implements OnInit {
       switchMap((params: ParamMap) => this._reuseService.findById(params.get('id'))))
       .subscribe((reuse: Reuse) => this.reuse = reuse);
   }
+
+  get reuseTypes() {
+    return this.reuse.reuseTypes.map(e => ReuseTypes[e]);
+  }
 }
diff --git a/src/app/components/reuses/edit/reuse-form.component.html b/src/app/components/reuses/edit/reuse-form.component.html
index b3a448e..331d49d 100644
--- a/src/app/components/reuses/edit/reuse-form.component.html
+++ b/src/app/components/reuses/edit/reuse-form.component.html
@@ -69,7 +69,8 @@
                   <div class="select">
                     <select type="text" [formControlName]="i" required>
                       <option hidden value="" disabled selected>Selectionnez un type</option>
-                      <option *ngFor="let opt of reuseTypesList" [value]="opt.value">{{opt.label}}</option>
+                      <option *ngFor="let key of objectKeys(reuseTypesList)" [value]="key">{{reuseTypesList[key]}}
+                      </option>
                     </select>
                   </div>
                 </div>
diff --git a/src/app/components/reuses/edit/reuse-form.component.ts b/src/app/components/reuses/edit/reuse-form.component.ts
index 5a6b924..d22ba3c 100644
--- a/src/app/components/reuses/edit/reuse-form.component.ts
+++ b/src/app/components/reuses/edit/reuse-form.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { FormBuilder, FormGroup, Validators, FormArray, FormControl, MaxLengthValidator } from '@angular/forms';
 import { filter, switchMap, catchError, mergeMap } from 'rxjs/operators';
 import { NotificationService, ReuseService, MediaService } from 'src/app/services';
-import { Reuse } from '../../../models/reuse.model';
+import { Reuse, ReuseTypes } from '../../../models/reuse.model';
 import { IImageUploadFieldParams } from '../../../models/image-upload.model';
 import { throwError } from 'rxjs';
 
@@ -24,6 +24,7 @@ export class ReuseFormComponent implements OnInit {
     isRequired: true,
   };
   title: string;
+  objectKeys = Object.keys; // User to iterate over the keys of an object in the template html
 
   constructor(
     private _reuseService: ReuseService,
@@ -167,7 +168,7 @@ export class ReuseFormComponent implements OnInit {
   }
 
   addReuseType() {
-    if (this.reuseTypes.length < this.reuseTypesList.length) {
+    if (this.reuseTypes.length < Object.keys(this.reuseTypesList).length) {
       this.reuseTypes.push(new FormControl(''));
     }
   }
@@ -214,20 +215,7 @@ export class ReuseFormComponent implements OnInit {
   }
 
   get reuseTypesList() {
-    return [
-      {
-        value: 'app',
-        label: 'Application',
-      },
-      {
-        value: 'web',
-        label: 'Web',
-      },
-      {
-        value: 'article',
-        label: 'Article',
-      },
-    ];
+    return ReuseTypes;
   }
 
   logoChanged(fileList: FileList) {
diff --git a/src/app/components/reuses/list/reuses.component.html b/src/app/components/reuses/list/reuses.component.html
index 5f1019f..98c61f3 100644
--- a/src/app/components/reuses/list/reuses.component.html
+++ b/src/app/components/reuses/list/reuses.component.html
@@ -89,7 +89,7 @@
           <span>{{ reuse.website }}</span>
         </div>
         <div class="column is-2">
-          <span>{{ reuse.reuseTypes.join(', ') }}</span>
+          <span>{{ formatReuseTypes(reuse.reuseTypes) }}</span>
         </div>
         <div class="column is-offset-1 is-1 has-text-centered actions">
           <app-crud-buttons [id]="reuse._id" (delete)="displayDeletePopup($event)"></app-crud-buttons>
diff --git a/src/app/components/reuses/list/reuses.component.scss b/src/app/components/reuses/list/reuses.component.scss
index 978f6d7..a499549 100644
--- a/src/app/components/reuses/list/reuses.component.scss
+++ b/src/app/components/reuses/list/reuses.component.scss
@@ -1,3 +1,3 @@
-.has-text-centered {
+.has-text-centered .is-sortable {
   justify-content: center;
 }
diff --git a/src/app/components/reuses/list/reuses.component.ts b/src/app/components/reuses/list/reuses.component.ts
index 13b5572..17f361c 100644
--- a/src/app/components/reuses/list/reuses.component.ts
+++ b/src/app/components/reuses/list/reuses.component.ts
@@ -3,7 +3,7 @@ import { PaginatorOptions } from 'src/app/models/paginator-options.model';
 import { IPageHeaderInfo } from '../../../models/page.model';
 import { Subscription } from 'rxjs';
 import { ReuseService, NotificationService } from '../../../services';
-import { Reuse, ReuseRO } from '../../../models/reuse.model';
+import { Reuse, ReuseRO, ReuseTypes } from '../../../models/reuse.model';
 
 @Component({
   selector: 'app-reuses',
@@ -110,6 +110,10 @@ export class ReusesComponent implements OnInit, OnDestroy {
     return this._reuseService.sortOptions;
   }
 
+  formatReuseTypes(types: string[]) {
+    return types.map(e => ReuseTypes[e]).join(', ');
+  }
+
   displayDeletePopup(id) {
     this.objectToBeDeletedId = id;
   }
diff --git a/src/app/models/reuse.model.ts b/src/app/models/reuse.model.ts
index 6b80b23..8c3970e 100644
--- a/src/app/models/reuse.model.ts
+++ b/src/app/models/reuse.model.ts
@@ -51,3 +51,10 @@ export interface IReuse {
   updateDate: Date;
   published: boolean;
 }
+
+// tslint:disable-next-line: variable-name
+export const ReuseTypes = {
+  app: 'Application',
+  web: 'Web',
+  article: 'Article',
+};
-- 
GitLab