Merge pull request #2693 from shubhamkumar9199/fix/from-structure

WEB-333-improve the design of create client from

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

@@ -1,6 +1,6 @@
 <form [formGroup]="createClientForm">
   <div class="layout-row-wrap gap-2px responsive-column">
-    <mat-form-field class="flex-48">
+    <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
       <mat-select required formControlName="officeId">
         <mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -42,40 +42,49 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('firstname')" class="flex-48">
-      <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
-      <input matInput required formControlName="firstname" />
-      <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-        {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-        {{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-        {{ 'labels.commons.begin with a special character or number' | translate }}
-      </mat-error>
-    </mat-form-field>
+    <div
+      class="name-fields-row"
+      *ngIf="
+        createClientForm.contains('firstname') ||
+        createClientForm.contains('middlename') ||
+        createClientForm.contains('lastname')
+      "
+    >
+      <mat-form-field *ngIf="createClientForm.contains('firstname')" class="name-field first-name">
+        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+        <input matInput required formControlName="firstname" />
+        <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
+          {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+        <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
+          {{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+          {{ 'labels.commons.begin with a special character or number' | translate }}
+        </mat-error>
+      </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('middlename')" class="flex-48">
-      <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
-      <input matInput formControlName="middlename" />
-      <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-        {{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-        {{ 'labels.commons.begin with a special character or number' | translate }}
-      </mat-error>
-    </mat-form-field>
+      <mat-form-field *ngIf="createClientForm.contains('middlename')" class="name-field middle-name">
+        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
+        <input matInput formControlName="middlename" />
+        <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
+          {{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+          {{ 'labels.commons.begin with a special character or number' | translate }}
+        </mat-error>
+      </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('lastname')" class="flex-48">
-      <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
-      <input matInput required formControlName="lastname" />
-      <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-        {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-        {{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-        {{ 'labels.commons.begin with a special character or number' | translate }}
-      </mat-error>
-    </mat-form-field>
+      <mat-form-field *ngIf="createClientForm.contains('lastname')" class="name-field last-name">
+        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+        <input matInput required formControlName="lastname" />
+        <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
+          {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+        <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
+          {{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+          {{ 'labels.commons.begin with a special character or number' | translate }}
+        </mat-error>
+      </mat-form-field>
+    </div>
 
     <mat-divider></mat-divider>
 

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

@@ -1,3 +1,19 @@
+form {
+  padding: 16px 0;
+
+  .layout-row-wrap {
+    gap: 8px !important;
+  }
+}
+
+mat-form-field {
+  margin-bottom: 8px;
+}
+
+mat-divider {
+  margin: 16px 0;
+}
+
 .margin-v {
   margin: 2em 0 0;
 }
@@ -5,3 +21,106 @@
 .margin-t {
   margin-top: 2em;
 }
+
+.name-fields-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  width: 100%;
+  margin-bottom: 8px;
+
+  .name-field {
+    flex: 1;
+    min-width: 200px;
+
+    &.first-name,
+    &.last-name {
+      flex: 1.2;
+    }
+
+    &.middle-name {
+      flex: 1;
+    }
+  }
+}
+
+@media (width <= 768px) {
+  .name-fields-row {
+    flex-direction: column;
+    gap: 4px;
+
+    .name-field {
+      width: 100%;
+      min-width: unset;
+      flex: none;
+    }
+  }
+}
+
+.name-fields-row + mat-form-field,
+.name-fields-row + mat-divider,
+.name-fields-row + div {
+  margin-top: 8px;
+}
+
+.layout-row.align-center {
+  padding-top: 16px;
+  margin-top: 12px;
+
+  button {
+    margin: 0 6px;
+  }
+}
+
+.flex-100 {
+  margin: 16px 0;
+  padding: 8px 0;
+}
+
+mat-checkbox {
+  margin: 8px 0;
+
+  &.margin-v {
+    margin-top: 12px;
+  }
+}
+
+@media (width <= 768px) {
+  form {
+    padding: 12px 0;
+
+    .layout-row-wrap {
+      gap: 6px !important;
+    }
+  }
+
+  mat-form-field {
+    margin-bottom: 6px;
+  }
+
+  mat-divider {
+    margin: 12px 0;
+  }
+
+  .layout-row.align-center {
+    padding-top: 12px;
+    margin-top: 8px;
+    flex-direction: column;
+    gap: 8px;
+
+    button {
+      width: 100%;
+      margin: 2px 0;
+    }
+  }
+}
+
+@media (width <= 480px) {
+  form {
+    padding: 8px 0;
+
+    .layout-row-wrap {
+      gap: 4px !important;
+    }
+  }
+}