Skip to content

Commit 9f39ab0

Browse files
gkbishnoi07gkbishnoi07
authored
Merge pull request #2657 from shubhamkumar9199/fix/layout-regression-angular18
Fix layout regression: Reorganize first row and update styling
2 parents 622a738 + 75f3cd1 commit 9f39ab0

File tree

2 files changed

+309
-59
lines changed

2 files changed

+309
-59
lines changed

‎src/app/clients/edit-client/edit-client.component.html‎

Lines changed: 85 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22
<mat-card>
33
<form [formGroup]="editClientForm">
44
<mat-card-content>
5-
<div class="layout-row-wrap gap-2px responsive-column">
6-
<mat-form-field class="flex-fill flex-23">
5+
<!-- First Row: Office, Legal Form, Account No, External ID -->
6+
<div class="responsive-row">
7+
<mat-form-field class="flex-24">
78
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
89
<mat-select required formControlName="officeId">
910
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -16,7 +17,7 @@
1617
</mat-error>
1718
</mat-form-field>
1819

19-
<mat-form-field class="flex-fill flex-23">
20+
<mat-form-field class="flex-24">
2021
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
2122
<mat-select formControlName="legalFormId">
2223
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -25,16 +26,19 @@
2526
</mat-select>
2627
</mat-form-field>
2728

28-
<mat-form-field class="flex-fill flex-23">
29+
<mat-form-field class="flex-24">
2930
<mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
3031
<input matInput formControlName="accountNo" />
3132
</mat-form-field>
3233

33-
<mat-form-field class="flex-fill flex-23">
34+
<mat-form-field class="flex-24">
3435
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
3536
<input matInput formControlName="externalId" />
3637
</mat-form-field>
38+
</div>
3739

40+
<!-- Name fields section -->
41+
<div class="responsive-row">
3842
<mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
3943
<mat-label>{{
4044
'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
@@ -46,7 +50,7 @@
4650
</mat-error>
4751
</mat-form-field>
4852

49-
<mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-48">
53+
<mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-32">
5054
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
5155
<input matInput required formControlName="firstname" />
5256
<mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
@@ -55,22 +59,25 @@
5559
</mat-error>
5660
</mat-form-field>
5761

58-
<mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-48">
62+
<mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-32">
5963
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
6064
<input matInput formControlName="middlename" />
6165
</mat-form-field>
6266

63-
<mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-48">
67+
<mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-32">
6468
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
6569
<input matInput required formControlName="lastname" />
6670
<mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
6771
{{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
6872
<strong>{{ 'labels.commons.required' | translate }}</strong>
6973
</mat-error>
7074
</mat-form-field>
75+
</div>
7176

72-
<mat-divider></mat-divider>
77+
<mat-divider class="section-divider"></mat-divider>
7378

79+
<!-- Date of Birth and Gender Row -->
80+
<div class="responsive-row">
7481
<mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
7582
<mat-label>{{
7683
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
@@ -88,7 +95,10 @@
8895
</mat-option>
8996
</mat-select>
9097
</mat-form-field>
98+
</div>
9199

100+
<!-- Staff and Is Staff Row -->
101+
<div class="responsive-row align-center">
92102
<mat-form-field class="flex-48">
93103
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
94104
<mat-select formControlName="staffId">
@@ -98,53 +108,6 @@
98108
</mat-select>
99109
</mat-form-field>
100110

101-
<div
102-
class="flex-100 layout-row-wrap gap-2percent column-on-small"
103-
formGroupName="clientNonPersonDetails"
104-
*ngIf="editClientForm.contains('clientNonPersonDetails')"
105-
>
106-
<mat-form-field class="flex-48">
107-
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
108-
<mat-select formControlName="constitutionId" required>
109-
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
110-
{{ constitution.name }}
111-
</mat-option>
112-
</mat-select>
113-
</mat-form-field>
114-
115-
<mat-form-field class="flex-48">
116-
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
117-
<mat-select formControlName="mainBusinessLineId">
118-
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
119-
{{ business.name }}
120-
</mat-option>
121-
</mat-select>
122-
</mat-form-field>
123-
124-
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
125-
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
126-
<input
127-
matInput
128-
[min]="minDate"
129-
[max]="maxDate"
130-
[matDatepicker]="incorpValidityTillDateDatePicker"
131-
formControlName="incorpValidityTillDate"
132-
/>
133-
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
134-
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
135-
</mat-form-field>
136-
137-
<mat-form-field class="flex-48">
138-
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
139-
<input matInput formControlName="incorpNumber" />
140-
</mat-form-field>
141-
142-
<mat-form-field class="flex-98">
143-
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
144-
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
145-
</mat-form-field>
146-
</div>
147-
148111
<mat-checkbox
149112
*ngIf="legalFormId === 1"
150113
class="flex-48 margin-v"
@@ -153,7 +116,57 @@
153116
>
154117
{{ 'labels.inputs.Is staff' | translate }}?
155118
</mat-checkbox>
119+
</div>
120+
121+
<div
122+
class="flex-100 layout-row-wrap gap-2percent column-on-small"
123+
formGroupName="clientNonPersonDetails"
124+
*ngIf="editClientForm.contains('clientNonPersonDetails')"
125+
>
126+
<mat-form-field class="flex-48">
127+
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
128+
<mat-select formControlName="constitutionId" required>
129+
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
130+
{{ constitution.name }}
131+
</mat-option>
132+
</mat-select>
133+
</mat-form-field>
156134

135+
<mat-form-field class="flex-48">
136+
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
137+
<mat-select formControlName="mainBusinessLineId">
138+
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
139+
{{ business.name }}
140+
</mat-option>
141+
</mat-select>
142+
</mat-form-field>
143+
144+
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
145+
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
146+
<input
147+
matInput
148+
[min]="minDate"
149+
[max]="maxDate"
150+
[matDatepicker]="incorpValidityTillDateDatePicker"
151+
formControlName="incorpValidityTillDate"
152+
/>
153+
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
154+
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
155+
</mat-form-field>
156+
157+
<mat-form-field class="flex-48">
158+
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
159+
<input matInput formControlName="incorpNumber" />
160+
</mat-form-field>
161+
162+
<mat-form-field class="flex-98">
163+
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
164+
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
165+
</mat-form-field>
166+
</div>
167+
168+
<!-- Mobile No and Email Address Row -->
169+
<div class="responsive-row">
157170
<mat-form-field class="flex-48">
158171
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
159172
<input matInput type="text" formControlName="mobileNo" />
@@ -164,7 +177,10 @@
164177
<input matInput formControlName="emailAddress" />
165178
<mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
166179
</mat-form-field>
180+
</div>
167181

182+
<!-- Client Type and Client Classification Row -->
183+
<div class="responsive-row">
168184
<mat-form-field class="flex-48">
169185
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
170186
<mat-select formControlName="clientTypeId">
@@ -185,7 +201,10 @@
185201
</mat-option>
186202
</mat-select>
187203
</mat-form-field>
204+
</div>
188205

206+
<!-- Submitted On and Activated On Row -->
207+
<div class="responsive-row">
189208
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
190209
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
191210
<input
@@ -219,11 +238,18 @@
219238
</div>
220239
</mat-card-content>
221240

222-
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
223-
<button type="button" mat-raised-button [routerLink]="['../general']">
241+
<mat-card-actions class="button-container">
242+
<button type="button" mat-raised-button [routerLink]="['../general']" class="custom-button">
224243
{{ 'labels.buttons.Cancel' | translate }}
225244
</button>
226-
<button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
245+
<button
246+
type="submit"
247+
mat-raised-button
248+
color="primary"
249+
[disabled]="!editClientForm.valid"
250+
(click)="submit()"
251+
class="custom-button"
252+
>
227253
{{ 'labels.buttons.Submit' | translate }}
228254
</button>
229255
</mat-card-actions>

0 commit comments

Comments
 (0)