fix: improve edit client form layout and button styling
- Reorganize first row to display 4 fields (Office, Legal Form, Account No, External ID) - Center buttons with proper spacing (20px gap) - Implement responsive design for all screen sizes - Fix CSS lint errors and update to modern color function notation - Remove inline styles following Angular best practices
This commit is contained in:
shubhamsharma9199
@@ -2,8 +2,9 @@
|
||||
<mat-card>
|
||||
<form [formGroup]="editClientForm">
|
||||
<mat-card-content>
|
||||
<div class="layout-row-wrap gap-2px responsive-column">
|
||||
<mat-form-field class="flex-fill flex-23">
|
||||
<!-- First Row: Office, Legal Form, Account No, External ID -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
|
||||
<mat-select required formControlName="officeId">
|
||||
<mat-option *ngFor="let office of officeOptions" [value]="office.id">
|
||||
@@ -16,7 +17,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill flex-23">
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
|
||||
<mat-select formControlName="legalFormId">
|
||||
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
|
||||
@@ -25,16 +26,19 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill flex-23">
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
|
||||
<input matInput formControlName="accountNo" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-fill flex-23">
|
||||
<mat-form-field class="flex-24">
|
||||
<mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
|
||||
<input matInput formControlName="externalId" />
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Name fields section -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
|
||||
<mat-label>{{
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
|
||||
@@ -46,7 +50,7 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-48">
|
||||
<mat-form-field *ngIf="editClientForm.contains('firstname')" class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="firstname" />
|
||||
<mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
|
||||
@@ -55,12 +59,12 @@
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-48">
|
||||
<mat-form-field *ngIf="editClientForm.contains('middlename')" class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
|
||||
<input matInput formControlName="middlename" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-48">
|
||||
<mat-form-field *ngIf="editClientForm.contains('lastname')" class="flex-32">
|
||||
<mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
|
||||
<input matInput required formControlName="lastname" />
|
||||
<mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
|
||||
@@ -68,9 +72,12 @@
|
||||
<strong>{{ 'labels.commons.required' | translate }}</strong>
|
||||
</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
<mat-divider class="section-divider"></mat-divider>
|
||||
|
||||
<!-- Date of Birth and Gender Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
|
||||
<mat-label>{{
|
||||
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
|
||||
@@ -88,7 +95,10 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Staff and Is Staff Row -->
|
||||
<div class="responsive-row align-center">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
|
||||
<mat-select formControlName="staffId">
|
||||
@@ -98,53 +108,6 @@
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<div
|
||||
class="flex-100 layout-row-wrap gap-2percent column-on-small"
|
||||
formGroupName="clientNonPersonDetails"
|
||||
*ngIf="editClientForm.contains('clientNonPersonDetails')"
|
||||
>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
|
||||
<mat-select formControlName="constitutionId" required>
|
||||
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
|
||||
{{ constitution.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
|
||||
<mat-select formControlName="mainBusinessLineId">
|
||||
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
|
||||
{{ business.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="incorpValidityTillDateDatePicker"
|
||||
formControlName="incorpValidityTillDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
|
||||
<input matInput formControlName="incorpNumber" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
|
||||
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<mat-checkbox
|
||||
*ngIf="legalFormId === 1"
|
||||
class="flex-48 margin-v"
|
||||
@@ -153,7 +116,57 @@
|
||||
>
|
||||
{{ 'labels.inputs.Is staff' | translate }}?
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex-100 layout-row-wrap gap-2percent column-on-small"
|
||||
formGroupName="clientNonPersonDetails"
|
||||
*ngIf="editClientForm.contains('clientNonPersonDetails')"
|
||||
>
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
|
||||
<mat-select formControlName="constitutionId" required>
|
||||
<mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
|
||||
{{ constitution.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
|
||||
<mat-select formControlName="mainBusinessLineId">
|
||||
<mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
|
||||
{{ business.name }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[min]="minDate"
|
||||
[max]="maxDate"
|
||||
[matDatepicker]="incorpValidityTillDateDatePicker"
|
||||
formControlName="incorpValidityTillDate"
|
||||
/>
|
||||
<mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
|
||||
<mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Incorporation No' | translate }}</mat-label>
|
||||
<input matInput formControlName="incorpNumber" />
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field class="flex-98">
|
||||
<mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
|
||||
<textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Mobile No and Email Address Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
|
||||
<input matInput type="text" formControlName="mobileNo" />
|
||||
@@ -164,7 +177,10 @@
|
||||
<input matInput formControlName="emailAddress" />
|
||||
<mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Client Type and Client Classification Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48">
|
||||
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
|
||||
<mat-select formControlName="clientTypeId">
|
||||
@@ -185,7 +201,10 @@
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<!-- Submitted On and Activated On Row -->
|
||||
<div class="responsive-row">
|
||||
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
|
||||
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
|
||||
<input
|
||||
@@ -219,11 +238,18 @@
|
||||
</div>
|
||||
</mat-card-content>
|
||||
|
||||
<mat-card-actions class="layout-row align-center gap-5px responsive-column">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']">
|
||||
<mat-card-actions class="button-container">
|
||||
<button type="button" mat-raised-button [routerLink]="['../general']" class="custom-button">
|
||||
{{ 'labels.buttons.Cancel' | translate }}
|
||||
</button>
|
||||
<button mat-raised-button color="primary" [disabled]="!editClientForm.valid" (click)="submit()">
|
||||
<button
|
||||
type="submit"
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
[disabled]="!editClientForm.valid"
|
||||
(click)="submit()"
|
||||
class="custom-button"
|
||||
>
|
||||
{{ 'labels.buttons.Submit' | translate }}
|
||||
</button>
|
||||
</mat-card-actions>
|
||||
|
||||
Reference in New Issue
Block a user