Skip to content

Commit 6c28c74

Browse files
alberto-art3chalberto-art3ch
authored
Merge pull request #2693 from shubhamkumar9199/fix/from-structure
WEB-333-improve the design of create client from
2 parents f763365 + 77a10a0 commit 6c28c74

File tree

2 files changed

+161
-33
lines changed

2 files changed

+161
-33
lines changed

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

Lines changed: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<form [formGroup]="createClientForm">
22
<div class="layout-row-wrap gap-2px responsive-column">
3-
<mat-form-field class="flex-48">
3+
<mat-form-field class="flex-fill flex-23">
44
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
55
<mat-select required formControlName="officeId">
66
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -42,40 +42,49 @@
4242
</mat-error>
4343
</mat-form-field>
4444

45-
<mat-form-field *ngIf="createClientForm.contains('firstname')" class="flex-48">
46-
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
47-
<input matInput required formControlName="firstname" />
48-
<mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
49-
{{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
50-
<strong>{{ 'labels.commons.required' | translate }}</strong>
51-
</mat-error>
52-
<mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
53-
{{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
54-
{{ 'labels.commons.begin with a special character or number' | translate }}
55-
</mat-error>
56-
</mat-form-field>
45+
<div
46+
class="name-fields-row"
47+
*ngIf="
48+
createClientForm.contains('firstname') ||
49+
createClientForm.contains('middlename') ||
50+
createClientForm.contains('lastname')
51+
"
52+
>
53+
<mat-form-field *ngIf="createClientForm.contains('firstname')" class="name-field first-name">
54+
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
55+
<input matInput required formControlName="firstname" />
56+
<mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
57+
{{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
58+
<strong>{{ 'labels.commons.required' | translate }}</strong>
59+
</mat-error>
60+
<mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
61+
{{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
62+
{{ 'labels.commons.begin with a special character or number' | translate }}
63+
</mat-error>
64+
</mat-form-field>
5765

58-
<mat-form-field *ngIf="createClientForm.contains('middlename')" class="flex-48">
59-
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
60-
<input matInput formControlName="middlename" />
61-
<mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
62-
{{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
63-
{{ 'labels.commons.begin with a special character or number' | translate }}
64-
</mat-error>
65-
</mat-form-field>
66+
<mat-form-field *ngIf="createClientForm.contains('middlename')" class="name-field middle-name">
67+
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
68+
<input matInput formControlName="middlename" />
69+
<mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
70+
{{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
71+
{{ 'labels.commons.begin with a special character or number' | translate }}
72+
</mat-error>
73+
</mat-form-field>
6674

67-
<mat-form-field *ngIf="createClientForm.contains('lastname')" class="flex-48">
68-
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
69-
<input matInput required formControlName="lastname" />
70-
<mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
71-
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
72-
<strong>{{ 'labels.commons.required' | translate }}</strong>
73-
</mat-error>
74-
<mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
75-
{{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
76-
{{ 'labels.commons.begin with a special character or number' | translate }}
77-
</mat-error>
78-
</mat-form-field>
75+
<mat-form-field *ngIf="createClientForm.contains('lastname')" class="name-field last-name">
76+
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
77+
<input matInput required formControlName="lastname" />
78+
<mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
79+
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
80+
<strong>{{ 'labels.commons.required' | translate }}</strong>
81+
</mat-error>
82+
<mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
83+
{{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
84+
{{ 'labels.commons.begin with a special character or number' | translate }}
85+
</mat-error>
86+
</mat-form-field>
87+
</div>
7988

8089
<mat-divider></mat-divider>
8190

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

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,126 @@
1+
form {
2+
padding: 16px 0;
3+
4+
.layout-row-wrap {
5+
gap: 8px !important;
6+
}
7+
}
8+
9+
mat-form-field {
10+
margin-bottom: 8px;
11+
}
12+
13+
mat-divider {
14+
margin: 16px 0;
15+
}
16+
117
.margin-v {
218
margin: 2em 0 0;
319
}
420

521
.margin-t {
622
margin-top: 2em;
723
}
24+
25+
.name-fields-row {
26+
display: flex;
27+
gap: 8px;
28+
flex-wrap: wrap;
29+
width: 100%;
30+
margin-bottom: 8px;
31+
32+
.name-field {
33+
flex: 1;
34+
min-width: 200px;
35+
36+
&.first-name,
37+
&.last-name {
38+
flex: 1.2;
39+
}
40+
41+
&.middle-name {
42+
flex: 1;
43+
}
44+
}
45+
}
46+
47+
@media (width <= 768px) {
48+
.name-fields-row {
49+
flex-direction: column;
50+
gap: 4px;
51+
52+
.name-field {
53+
width: 100%;
54+
min-width: unset;
55+
flex: none;
56+
}
57+
}
58+
}
59+
60+
.name-fields-row + mat-form-field,
61+
.name-fields-row + mat-divider,
62+
.name-fields-row + div {
63+
margin-top: 8px;
64+
}
65+
66+
.layout-row.align-center {
67+
padding-top: 16px;
68+
margin-top: 12px;
69+
70+
button {
71+
margin: 0 6px;
72+
}
73+
}
74+
75+
.flex-100 {
76+
margin: 16px 0;
77+
padding: 8px 0;
78+
}
79+
80+
mat-checkbox {
81+
margin: 8px 0;
82+
83+
&.margin-v {
84+
margin-top: 12px;
85+
}
86+
}
87+
88+
@media (width <= 768px) {
89+
form {
90+
padding: 12px 0;
91+
92+
.layout-row-wrap {
93+
gap: 6px !important;
94+
}
95+
}
96+
97+
mat-form-field {
98+
margin-bottom: 6px;
99+
}
100+
101+
mat-divider {
102+
margin: 12px 0;
103+
}
104+
105+
.layout-row.align-center {
106+
padding-top: 12px;
107+
margin-top: 8px;
108+
flex-direction: column;
109+
gap: 8px;
110+
111+
button {
112+
width: 100%;
113+
margin: 2px 0;
114+
}
115+
}
116+
}
117+
118+
@media (width <= 480px) {
119+
form {
120+
padding: 8px 0;
121+
122+
.layout-row-wrap {
123+
gap: 4px !important;
124+
}
125+
}
126+
}

0 commit comments

Comments
 (0)