Client views updated

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -14,7 +14,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="23%">
       <mat-label>{{"labels.inputs.Legal Form" | translate}}</mat-label>
       <mat-select required formControlName="legalFormId">
         <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -23,17 +23,13 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
-      <mat-select formControlName="staffId">
-        <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
-          {{ staff.displayName }}
-        </mat-option>
-      </mat-select>
+    <mat-form-field fxFlex="23%">
+      <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
+      <input matInput formControlName="externalId">
     </mat-form-field>
 
     <mat-form-field *ngIf="createClientForm.contains('fullname')" fxFlex="48%">
-      <mat-label>{{ createClientForm.value.legalFormId === 1 ? 'Name' : 'Entity Name' }}</mat-label>
+      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}</mat-label>
       <input matInput required formControlName="fullname">
       <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
         {{"labels.inputs.Client name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
@@ -73,18 +69,15 @@
       </mat-error>
     </mat-form-field>
 
+    <mat-divider></mat-divider>
+
     <mat-form-field fxFlex="48%" (click)="dateOfBirthDatePicker.open()">
-      <mat-label>{{ createClientForm.value.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</mat-label>
+      <mat-label>{{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Date of Birth', 'Incorporation Date']) | translate }}</mat-label>
       <input matInput [max]="maxDate" [matDatepicker]="dateOfBirthDatePicker" formControlName="dateOfBirth">
       <mat-datepicker-toggle matSuffix [for]="dateOfBirthDatePicker"></mat-datepicker-toggle>
       <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.External Id" | translate}}</mat-label>
-      <input matInput formControlName="externalId">
-    </mat-form-field>
-
     <div fxFlex="100%" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" formGroupName="clientNonPersonDetails"
       *ngIf="createClientForm.contains('clientNonPersonDetails')">
 
@@ -134,10 +127,21 @@
       </mat-select>
     </mat-form-field>
 
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{"labels.inputs.Staff" | translate}}</mat-label>
+      <mat-select formControlName="staffId">
+        <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
+          {{ staff.displayName }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+
     <mat-checkbox *ngIf="createClientForm.value.legalFormId === 1" fxFlex="48%" labelPosition="before" formControlName="isStaff" class="margin-v">
       {{"labels.inputs.Is staff" | translate}}?
     </mat-checkbox>
 
+    <mat-divider fxFlex="98%"></mat-divider>
+
     <mat-form-field fxFlex="48%">
       <mat-label>{{"labels.inputs.Mobile No" | translate}}</mat-label>
       <input matInput type="number" formControlName="mobileNo">