Update create/view customer page + add edit colors for customers

Signed-off-by: Makhtar DIAGNE <makhtar.diagne@teamdlab.com>

ui/ui-frontend-common/src/app/modules/components/navbar/navbar.component.html

@@ -28,7 +28,7 @@
     <br/>
     {{currentUser?.lastname}}
     </div>
-    <i class="material-icons vitamui-menu-caret" style="color:#fe4f02">keyboard_arrow_down</i>
+    <i class="material-icons vitamui-menu-caret">keyboard_arrow_down</i>
 
     <div class="account-menu">
       <mat-menu #accountMenu="matMenu" [overlapTrigger]="false" xPosition="before">

ui/ui-frontend-common/src/app/modules/startup.service.ts

@@ -97,7 +97,7 @@ export class StartupService {
         const themeColors = {
           '--vitamui-primary': getColorFromMaps('vitamui-primary', '#fe4f02', applicationColorMap, customerColorMap),
           '--vitamui-primary-light': getColorFromMaps('vitamui-primary-light', '#ff8559', applicationColorMap, customerColorMap),
-          '--vitamui-primary-light-20': getColorFromMaps('vitamui-primary-light', '#ffa789', applicationColorMap, customerColorMap),
+          '--vitamui-primary-light-20': getColorFromMaps('vitamui-primary-light-20', '#ffa789', applicationColorMap, customerColorMap),
           '--vitamui-secondary': getColorFromMaps('vitamui-secondary', '#5cbaa9', applicationColorMap, customerColorMap),
           '--vitamui-secondary-light': getColorFromMaps('vitamui-secondary-light', '#81cabd', applicationColorMap, customerColorMap),
           '--vitamui-secondary-light-8': getColorFromMaps('vitamui-secondary-light-8', '#7ac7b9', applicationColorMap, customerColorMap),

ui/ui-frontend-common/src/sass/_navbar.scss

@@ -72,4 +72,5 @@
 
 .vitamui-menu-caret {
     margin-left: 15px;
+    color: var(--vitamui-primary);
 }

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.html

@@ -16,7 +16,9 @@
 </div>
 <div class="vitamui-chip-list">
   <div *ngFor="let color of colors" class="vitamui-chip">
-    <div class="vitamui-chip-content" [style.background-color]="color.colorValue">{{color.colorName}}</div>
+    <div class="vitamui-chip-content">
+      <i class="openvitamui-icon openvitamui-icon-triangle" [style.color]="color.colorValue"></i>&nbsp;{{color.colorName}}
+    </div>
     <div class="vitamui-remove-chip" (click)="remove(color)">
       <i class="material-icons">clear</i>
     </div>

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.scss

+$field-spacing: 15px;
+
+.field-color-name {
+  width: 300px + $field-spacing / 2;
+  margin-right: $field-spacing;
+}
+
+.field-color-value {
+  width: 150px + $field-spacing / 2;
+  margin-right: $field-spacing;
+}

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.component.ts

 import { ENTER } from '@angular/cdk/keycodes';
-import {Component, forwardRef, Input} from '@angular/core';
-import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
+import { Component, forwardRef, Input } from '@angular/core';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 
 class Color {
   colorName: string;

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-colors-input/customer-colors-input.module.ts

+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+
+import {VitamUICommonModule} from 'ui-frontend-common';
+import {SharedModule} from '../../../shared/shared.module';
+import {OwnerFormModule} from '../../owner-form/owner-form.module';
+import {CustomerColorsInputComponent} from './customer-colors-input.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    MatButtonToggleModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatProgressBarModule,
+    MatSelectModule,
+    MatSnackBarModule,
+    ReactiveFormsModule,
+    OwnerFormModule,
+    VitamUICommonModule
+  ],
+  declarations: [
+    CustomerColorsInputComponent
+  ],
+  exports: [
+    CustomerColorsInputComponent
+  ],
+})
+export class CustomerColorsInputModule { }

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.component.scss

@@ -212,15 +212,6 @@ button > small {
     }
 }
 
-.field-color-name {
-  width: 300px + $field-spacing / 2;
-  margin-right: $field-spacing;
-}
-
-.field-color-value {
-  width: 150px + $field-spacing / 2;
-}
-
 .error-message {
     color: $red;
     font-size: 14px;

ui/ui-frontend/projects/identity/src/app/customer/customer-create/customer-create.module.ts

@@ -47,13 +47,14 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { VitamUICommonModule } from 'ui-frontend-common';
 import { SharedModule } from '../../shared/shared.module';
 import { OwnerFormModule } from '../owner-form/owner-form.module';
+import { CustomerColorsInputModule } from './customer-colors-input/customer-colors-input.module';
 import { CustomerCreateComponent } from './customer-create.component';
 import { CustomerCreateValidators } from './customer-create.validators';
-import { CustomerColorsInputComponent } from './customer-colors-input/customer-colors-input.component';
 
 @NgModule({
   imports: [
     CommonModule,
+    CustomerColorsInputModule,
     SharedModule,
     MatButtonToggleModule,
     MatFormFieldModule,
@@ -66,8 +67,7 @@ import { CustomerColorsInputComponent } from './customer-colors-input/customer-c
     VitamUICommonModule
   ],
   declarations: [
-    CustomerCreateComponent,
-    CustomerColorsInputComponent
+    CustomerCreateComponent
   ],
   entryComponents: [CustomerCreateComponent],
   providers: [CustomerCreateValidators]

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/customer-preview.module.ts

@@ -47,6 +47,7 @@ import { RouterModule } from '@angular/router';
 import { VitamUICommonModule } from 'ui-frontend-common';
 
 import { SharedModule } from '../../shared/shared.module';
+import {CustomerColorsInputModule} from '../customer-create/customer-colors-input/customer-colors-input.module';
 import { CustomerPreviewComponent } from './customer-preview.component';
 import { GraphicIdentityTabComponent } from './graphic-identity-tab/graphic-identity-tab.component';
 import { GraphicIdentityUpdateComponent } from './graphic-identity-tab/graphic-identity-update/graphic-identity-update.component';
@@ -59,6 +60,7 @@ import { SsoTabComponent } from './sso-tab/sso-tab.component';
 @NgModule({
   imports: [
     CommonModule,
+    CustomerColorsInputModule,
     SharedModule,
     RouterModule,
     MatDialogModule,
@@ -77,9 +79,9 @@ import { SsoTabComponent } from './sso-tab/sso-tab.component';
     IdentityProviderDetailsComponent,
     InformationTabComponent,
     GraphicIdentityTabComponent,
-    GraphicIdentityUpdateComponent,
+    GraphicIdentityUpdateComponent
   ],
-  exports: [CustomerPreviewComponent],
+  exports: [ CustomerPreviewComponent ],
   entryComponents: [IdentityProviderCreateComponent, GraphicIdentityUpdateComponent],
   providers: [IdentityProviderService]
 })

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

@@ -16,5 +16,15 @@
     <p i18n="customer graphic identity tab no logo@@customerGraphicIdentityTabNoLogoLabel">Aucun logo n'a été sélectionné</p>
   </div>
 </div>
-<!-- TODO: ADD specific colors -->
+<div class="row">
+  <span>Couleurs de l'organisation</span>
+
+  <div class="vitamui-chip-list">
+    <div *ngFor="let color of customer.themeColors | keyvalue" class="vitamui-chip color-chip">
+      <div class="vitamui-chip-content">
+        <i class="openvitamui-icon openvitamui-icon-triangle" [style.color]="color.value"></i>
+        &nbsp;{{color.key}}</div>
+    </div>
+  </div>
+</div>
 

ui/ui-frontend/projects/identity/src/app/customer/customer-preview/graphic-identity-tab/graphic-identity-tab.component.scss

@@ -4,3 +4,7 @@
    margin-top: 5%;
    margin-left: 5%
 }
+
+.color-chip {
+  border: 2px solid;
+}

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

@@ -34,7 +34,7 @@
       {{ message }}
     </div>
 
-    <!-- TODO: ADD specific colors update -->
+    <app-customer-colors-input formControlName="themeColors"></app-customer-colors-input>
 
     <div class="actions">
       <button type="button" class="btn primary" [disabled]="!isGraphicIdentityFormValid()" i18n="Update customer graphic identity@@updateCustomerGraphicIdentityButton" (click)="updateGraphicIdentity()">Valider</button>

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

@@ -69,18 +69,21 @@ export class GraphicIdentityUpdateComponent implements OnInit {
     @Inject(MAT_DIALOG_DATA) public data: { customer: Customer, logo: SafeUrl },
     private formBuilder: FormBuilder,
     private customerService: CustomerService
-    ) {
-      this.customer = this.data.customer;
-      this.logoUrl = this.data.logo;
-      this.graphicIdentityForm = this.formBuilder.group({
-        hasCustomGraphicIdentity: null
-      });
-    }
+  ) {
+    this.customer = this.data.customer;
+    this.logoUrl = this.data.logo;
+    this.graphicIdentityForm = this.formBuilder.group({
+      hasCustomGraphicIdentity: null,
+      themeColors: null
+    });
+  }
 
   ngOnInit() {
     this.graphicIdentityForm.get('hasCustomGraphicIdentity').setValue(this.customer.hasCustomGraphicIdentity);
     this.hasCustomGraphicIdentity = this.graphicIdentityForm.get('hasCustomGraphicIdentity').value;
 
+    this.graphicIdentityForm.get('themeColors').setValue(this.getThemeColors(this.customer.themeColors));
+
     this.graphicIdentityForm.get('hasCustomGraphicIdentity').valueChanges.subscribe(() => {
       this.hasCustomGraphicIdentity = this.graphicIdentityForm.get('hasCustomGraphicIdentity').value;
       this.message = null;
@@ -93,8 +96,8 @@ export class GraphicIdentityUpdateComponent implements OnInit {
         this.imageToUpload = null;
         this.imageUrl = null;
       }
-  });
-}
+    });
+  }
 
   onCancel() {
     this.dialogRef.close();
@@ -155,23 +158,45 @@ export class GraphicIdentityUpdateComponent implements OnInit {
     if (!this.isGraphicIdentityFormValid) { return; }
     const formData = {
       id : this.customer.id,
-      hasCustomGraphicIdentity: this.graphicIdentityForm.get('hasCustomGraphicIdentity').value
-      // TODO Add themeColors !
+      hasCustomGraphicIdentity: this.graphicIdentityForm.get('hasCustomGraphicIdentity').value,
+      themeColors: this.updateForCustomerModel(this.graphicIdentityForm.get('themeColors').value)
     };
     this.customerService.patch(formData, this.imageToUpload)
       .subscribe(
-      () => {
-        this.dialogRef.close(true);
-      },
-      (error) => {
-        this.dialogRef.close(false);
-        console.error(error);
-      });
+        () => {
+          this.dialogRef.close(true);
+        },
+        (error) => {
+          this.dialogRef.close(false);
+          console.error(error);
+        });
+  }
+
+  getThemeColors(themeColors: any): any[] {
+    const formData: any[] = [];
+
+    for (const color in themeColors) {
+      if (themeColors.hasOwnProperty(color)) {
+        const colorToUpdate = { colorName: color, colorValue: themeColors[color]};
+        formData.push(colorToUpdate);
+      }
+    }
+
+    return formData;
+  }
+
+  updateForCustomerModel(formData: any): any {
+    const themeColors: any = {};
+    for (const color of formData) {
+      themeColors[color.colorName] = color.colorValue;
+    }
+
+    return themeColors;
   }
 
   isGraphicIdentityFormValid() {
     return this.graphicIdentityForm.get('hasCustomGraphicIdentity').value === false ||
-            (this.graphicIdentityForm.get('hasCustomGraphicIdentity').value === true && this.imageUrl);
+      (this.graphicIdentityForm.get('hasCustomGraphicIdentity').value === true && this.imageUrl);
     // TODO: Update me to add themeColors !
     // FIXME: What if we dont want to update imageURL ? Can we test image OR themeColors updates
   }

ui/ui-frontend/projects/identity/src/app/customer/customer.module.ts

@@ -74,12 +74,13 @@ import { TenantService } from './tenant.service';
     OwnerCreateModule,
     TenantCreateModule,
     MatSidenavModule,
-    CustomerRoutingModule,
+    CustomerRoutingModule
   ],
   declarations: [
     CustomerComponent,
     CustomerPopupComponent
   ],
+  exports: [ ],
   providers: [
     CustomerResolver,
     CustomerService,

ui/ui-identity/src/main/config/ui-identity-application-dev.yml

@@ -11,8 +11,10 @@ spring:
 
 ui-identity:
   theme-colors:
-    vitamui-primary: "#82A"
-    vitamui-secondary: "#70F"
+    vitamui-primary: "#702382"
+    vitamui-primary-light: "#992fb1"
+    vitamui-primary-light-20: "#ba52d1"
+    vitamui-secondary: "#7FA1D4"
 
   iam-external-client:
     server-host: localhost

ui/ui-portal/src/main/config/ui-portal-application-dev.yml

@@ -26,8 +26,10 @@ management:
 
 ui-portal:
   theme-colors:
-    vitamui-primary: "#82A"
-    vitamui-secondary: "#70F"
+    vitamui-primary: "#702382"
+    vitamui-primary-light: "#992fb1"
+    vitamui-primary-light-20: "#ba52d1"
+    vitamui-secondary: "#7FA1D4"
 
   iam-external-client:
     server-host: localhost