CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: improve edit client form layout and button styling

Browse Source 
- 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
2025-09-16 14:19:20 +05:30
parent 62c49d787d
commit 75f3cd1e7e
2 changed files with 309 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/clients/edit-client/edit-client.component.html
+85 -59
View File
@@ -2,8 +2,9 @@
<mat-card> <mat-card>
<form [formGroup]="editClientForm"> <form [formGroup]="editClientForm">
<mat-card-content> <mat-card-content>
<div class="layout-row-wrap gap-2px responsive-column"> <!-- First Row: Office, Legal Form, Account No, External ID -->
<mat-form-field class="flex-fill flex-23"> <div class="responsive-row">
<mat-form-field class="flex-24">
<mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
<mat-select required formControlName="officeId"> <mat-select required formControlName="officeId">
<mat-option *ngFor="let office of officeOptions" [value]="office.id"> <mat-option *ngFor="let office of officeOptions" [value]="office.id">
@@ -16,7 +17,7 @@
</mat-error> </mat-error>
</mat-form-field> </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-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
<mat-select formControlName="legalFormId"> <mat-select formControlName="legalFormId">
<mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id"> <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
@@ -25,16 +26,19 @@
</mat-select> </mat-select>
</mat-form-field> </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> <mat-label>{{ 'labels.inputs.Account No' | translate }}</mat-label>
<input matInput formControlName="accountNo" /> <input matInput formControlName="accountNo" />
</mat-form-field> </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> <mat-label>{{ 'labels.inputs.External Id' | translate }}</mat-label>
<input matInput formControlName="externalId" /> <input matInput formControlName="externalId" />
</mat-form-field> </mat-form-field>
</div>
<!-- Name fields section -->
<div class="responsive-row">
<mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48"> <mat-form-field *ngIf="editClientForm.contains('fullname')" class="flex-48">
<mat-label>{{ <mat-label>{{
'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate 'labels.inputs.' + getDateLabel(legalFormId, ['Name', 'Entity Name']) | translate
@@ -46,7 +50,7 @@
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
<input matInput required formControlName="firstname" /> <input matInput required formControlName="firstname" />
<mat-error *ngIf="editClientForm.controls.firstname.hasError('required')"> <mat-error *ngIf="editClientForm.controls.firstname.hasError('required')">
@@ -55,12 +59,12 @@
</mat-error> </mat-error>
</mat-form-field> </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> <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
<input matInput formControlName="middlename" /> <input matInput formControlName="middlename" />
</mat-form-field> </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> <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
<input matInput required formControlName="lastname" /> <input matInput required formControlName="lastname" />
<mat-error *ngIf="editClientForm.controls.lastname.hasError('required')"> <mat-error *ngIf="editClientForm.controls.lastname.hasError('required')">
@@ -68,9 +72,12 @@
<strong>{{ 'labels.commons.required' | translate }}</strong> <strong>{{ 'labels.commons.required' | translate }}</strong>
</mat-error> </mat-error>
</mat-form-field> </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-form-field class="flex-48" (click)="dateOfBirthDatePicker.open()">
<mat-label>{{ <mat-label>{{
'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate 'labels.inputs.' + getDateLabel(legalFormId, ['Date of Birth', 'Incorporation Date']) | translate
@@ -88,7 +95,10 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
<!-- Staff and Is Staff Row -->
<div class="responsive-row align-center">
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
<mat-select formControlName="staffId"> <mat-select formControlName="staffId">
@@ -98,53 +108,6 @@
</mat-select> </mat-select>
</mat-form-field> </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 <mat-checkbox
*ngIf="legalFormId === 1" *ngIf="legalFormId === 1"
class="flex-48 margin-v" class="flex-48 margin-v"
@@ -153,7 +116,57 @@
> >
{{ 'labels.inputs.Is staff' | translate }}? {{ 'labels.inputs.Is staff' | translate }}?
</mat-checkbox> </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-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Mobile No' | translate }}</mat-label>
<input matInput type="text" formControlName="mobileNo" /> <input matInput type="text" formControlName="mobileNo" />
@@ -164,7 +177,10 @@
<input matInput formControlName="emailAddress" /> <input matInput formControlName="emailAddress" />
<mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error> <mat-error *ngIf="editClientForm.controls.emailAddress.errors?.email"> Email not valid </mat-error>
</mat-form-field> </mat-form-field>
</div>
<!-- Client Type and Client Classification Row -->
<div class="responsive-row">
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
<mat-select formControlName="clientTypeId"> <mat-select formControlName="clientTypeId">
@@ -185,7 +201,10 @@
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </mat-form-field>
</div>
<!-- Submitted On and Activated On Row -->
<div class="responsive-row">
<mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()"> <mat-form-field class="flex-48" (click)="submittedOnDatePicker.open()">
<mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Submitted On' | translate }}</mat-label>
<input <input
@@ -219,11 +238,18 @@
</div> </div>
</mat-card-content> </mat-card-content>
<mat-card-actions class="layout-row align-center gap-5px responsive-column"> <mat-card-actions class="button-container">
<button type="button" mat-raised-button [routerLink]="['../general']"> <button type="button" mat-raised-button [routerLink]="['../general']" class="custom-button">
{{ 'labels.buttons.Cancel' | translate }} {{ 'labels.buttons.Cancel' | translate }}
</button> </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 }} {{ 'labels.buttons.Submit' | translate }}
</button> </button>
</mat-card-actions> </mat-card-actions>
src/app/clients/edit-client/edit-client.component.scss
+224
View File
@@ -1,3 +1,227 @@
.margin-v { .margin-v {
margin: 2em 0 0; margin: 2em 0 0;
} }
.flex-32 {
flex: 0 1 32%;
max-width: 32%;
}
.gap-2percent {
gap: 2%;
}
.align-center {
align-items: center;
}
// Enhanced layout styles with Material compatibility
.container {
margin: 24px auto;
max-width: 1200px;
width: 100%;
padding: 0 24px;
box-sizing: border-box;
}
// More specific Material overrides
:host ::ng-deep .mat-card {
padding: 32px;
margin: 16px 0;
border-radius: 12px;
box-shadow: 0 4px 12px rgb(0 0 0 / 10%);
}
:host ::ng-deep .mat-card-content {
padding: 0;
}
// Flex utilities with better responsive support
.flex-24 {
flex: 0 1 calc(25% - 15px);
max-width: calc(25% - 15px);
margin-right: 0;
}
.flex-48 {
flex: 0 1 calc(50% - 10px);
max-width: calc(50% - 10px);
margin-right: 0;
}
.responsive-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 24px;
align-items: flex-start;
}
.responsive-row:last-child {
margin-bottom: 0;
}
// Enhanced Material form field styling
:host ::ng-deep .mat-form-field {
margin-bottom: 16px;
width: 100%;
}
:host ::ng-deep .mat-form-field:last-child {
margin-right: 0;
}
// Ensure consistent form field appearance
:host ::ng-deep .responsive-row .mat-form-field {
min-height: 56px;
}
:host ::ng-deep .responsive-row .mat-form-field .mat-form-field-wrapper {
padding-bottom: 1.3438em;
}
// Error state styling and form field appearance consistency
:host ::ng-deep .mat-form-field-appearance-outline {
.mat-form-field-outline {
color: rgb(0 0 0 / 12%);
}
.mat-form-field-outline-thick {
color: #3f51b5;
}
}
:host ::ng-deep .mat-form-field.mat-form-field-invalid {
.mat-form-field-outline-thick {
color: #f44336;
opacity: 1;
}
}
:host ::ng-deep .mat-error {
font-size: 12px;
margin-top: 4px;
}
.section-divider {
margin: 32px 0 24px;
border-color: rgb(0 0 0 / 12%);
}
:host ::ng-deep .mat-checkbox {
margin: 20px 0;
}
// Enhanced button styling with better Material integration
:host ::ng-deep mat-card-actions {
display: flex;
justify-content: center;
gap: 20px;
padding: 24px 0;
margin-top: 32px;
border-top: 1px solid rgb(0 0 0 / 12%);
width: 100%;
}
:host ::ng-deep mat-card-actions button {
min-width: 100px;
height: 36px;
padding: 0 20px;
border-radius: 4px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.3px;
font-size: 13px;
margin: 0;
}
// Enhanced responsive breakpoints
@media (width <= 1024px) {
.flex-24 {
flex: 0 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
.flex-48 {
flex: 0 1 100%;
max-width: 100%;
}
}
@media (width <= 768px) {
.flex-32,
.flex-24,
.flex-48 {
flex: 0 1 100%;
max-width: 100%;
}
.container {
margin: 16px;
padding: 0 16px;
}
:host ::ng-deep .mat-card {
padding: 20px;
}
.responsive-row {
gap: 12px;
margin-bottom: 16px;
}
.responsive-row .mat-form-field {
flex: 1 1 100%;
max-width: 100%;
margin-right: 0;
}
}
@media (width <= 600px) {
:host ::ng-deep mat-card-actions {
flex-direction: column;
gap: 12px;
}
:host ::ng-deep mat-card-actions button {
width: 100%;
margin: 0;
}
}
@media (width <= 480px) {
:host ::ng-deep .mat-card {
padding: 16px;
margin: 8px 0;
}
.responsive-row {
gap: 8px;
margin-bottom: 12px;
}
.container {
padding: 0 12px;
}
}
// Fix for potential Material Design conflicts
:host {
display: block;
width: 100%;
}
// Ensure proper form styling
:host ::ng-deep form {
width: 100%;
}
// DatePicker specific styling
:host ::ng-deep .mat-datepicker-toggle {
color: rgb(0 0 0 / 54%);
}
// Select dropdown styling
:host ::ng-deep .mat-select-panel {
max-height: 256px;
}