[US TRTL-389] Add customer internal code edition

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.html

@@ -109,6 +109,16 @@
     </div>
   </ng-container>
 
+  <div class="row">
+    <div class="col-12 form-control">
+      <vitamui-common-editable-input
+        formControlName="internalCode"
+        maxlength="20"
+        label="Code interne" i18n-label="Internal code@@customerPreviewLabelInternalCode"
+      ></vitamui-common-editable-input>
+    </div>
+  </div>
+
   <div class="row">
     <div class="col-12 form-control">
       <vitamui-common-editable-select

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.spec.ts

@@ -71,6 +71,7 @@ let expectedCustomer: Customer = {
         city: 'paris',
         country: 'france'
     },
+    internalCode: '1',
     owners: [],
     themeColors: {}
 };
@@ -149,6 +150,7 @@ describe('Customer InformationTabComponent', () => {
         city: 'paris',
         country: 'france'
       },
+      internalCode: '1',
       owners: [],
       themeColors: {}
     };
@@ -201,6 +203,7 @@ describe('Customer InformationTabComponent', () => {
     expect(testhost.component.form.get('address.zipCode')).not.toBeNull();
     expect(testhost.component.form.get('address.city')).not.toBeNull();
     expect(testhost.component.form.get('address.country')).not.toBeNull();
+    expect(testhost.component.form.get('internalCode')).not.toBeNull();
     expect(testhost.component.form.get('language')).not.toBeNull();
     expect(testhost.component.form.get('emailDomains')).not.toBeNull();
     expect(testhost.component.form.get('defaultEmailDomain')).not.toBeNull();
@@ -221,6 +224,7 @@ describe('Customer InformationTabComponent', () => {
         city: null,
         country: null
       },
+      internalCode: null,
       language: null,
       emailDomains: null,
       defaultEmailDomain: null
@@ -269,6 +273,7 @@ describe('Customer InformationTabComponent', () => {
         city: expectedCustomer.address.city,
         country: expectedCustomer.address.country,
       },
+      internalCode: expectedCustomer.internalCode,
       language: expectedCustomer.language,
       emailDomains: expectedCustomer.emailDomains,
       defaultEmailDomain: expectedCustomer.defaultEmailDomain

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/information-tab/information-tab.component.ts

+import { OnDestroy } from '@angular/core';
 /*
  * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
  * and the signatories of the "VITAM - Accord du Contributeur" agreement.
@@ -36,6 +37,7 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Subscription } from 'rxjs';
 import { merge, of } from 'rxjs';
 import { catchError, debounceTime, filter, map, switchMap } from 'rxjs/operators';
 import { Customer, diff, OtpState } from 'ui-frontend-common';
@@ -51,32 +53,15 @@ const UPDATE_DEBOUNCE_TIME = 200;
   templateUrl: './information-tab.component.html',
   styleUrls: ['./information-tab.component.scss']
 })
-export class InformationTabComponent implements OnInit {
-
-  form: FormGroup;
-  previousValue: {
-    code: string,
-    identifier: string,
-    name: string,
-    companyName: string,
-    passwordRevocationDelay: number,
-    otp: OtpState,
-    address: {
-        street: string,
-        zipCode: string,
-        city: string,
-        country: string,
-      },
-    language: string,
-    emailDomains: string[],
-    defaultEmailDomain: string
-  };
+export class InformationTabComponent implements OnInit, OnDestroy {
+  public readonly form: FormGroup;
 
   @Input()
   set customer(customer: Customer) {
     this._customer = customer;
     this.resetForm(this.customer);
   }
+
   get customer(): Customer { return this._customer; }
   // tslint:disable-next-line:variable-name
   private _customer: Customer;
@@ -91,6 +76,27 @@ export class InformationTabComponent implements OnInit {
     }
   }
 
+  private previousValue: {
+    code: string,
+    identifier: string,
+    name: string,
+    companyName: string,
+    passwordRevocationDelay: number,
+    otp: OtpState,
+    address: {
+        street: string,
+        zipCode: string,
+        city: string,
+        country: string,
+    },
+    internalCode: string,
+    language: string,
+    emailDomains: string[],
+    defaultEmailDomain: string
+  };
+
+  private sub: Subscription;
+
   constructor(
     private formBuilder: FormBuilder,
     private customerService: CustomerService,
@@ -114,24 +120,30 @@ export class InformationTabComponent implements OnInit {
         city: [null, Validators.required],
         country: [null, Validators.required],
       }),
+      internalCode: [null],
       language: [null, Validators.required],
       emailDomains: [null, Validators.required],
       defaultEmailDomain: [null, Validators.required]
     });
-
-    merge(this.form.statusChanges, this.form.valueChanges)
-      .pipe(
-        debounceTime(UPDATE_DEBOUNCE_TIME),
-        filter(() => this.form.valid),
-        map(() => diff(this.form.value, this.previousValue)),
-        filter((formData) => !isEmpty(formData)),
-        map((formData) => extend({ id: this.customer.id }, formData)),
-        switchMap((formData) => this.customerService.patch(formData).pipe(catchError(() => of(null))))
-      )
-      .subscribe((customer: Customer) => this.resetForm(customer));
   }
 
   ngOnInit() {
+    this.sub = merge(this.form.statusChanges, this.form.valueChanges)
+    .pipe(
+      debounceTime(UPDATE_DEBOUNCE_TIME),
+      filter(() => this.form.valid),
+      map(() => diff(this.form.value, this.previousValue)),
+      filter((formData) => !isEmpty(formData)),
+      map((formData) => extend({ id: this.customer.id }, formData)),
+      switchMap((formData) => this.customerService.patch(formData).pipe(catchError(() => of(null))))
+    )
+    .subscribe((customer: Customer) => this.resetForm(customer));
+  }
+
+  ngOnDestroy() {
+    if (this.sub) {
+      this.sub.unsubscribe();
+    }
   }
 
   private resetForm(customer: Customer) {