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

git commit -m "WEB-355 Alignments of buttons and input boxes blemished in create-edit-template.component.html"

Browse Source
This commit is contained in:
Devansh Vashisht
2025-10-30 03:04:47 +05:30
parent 28c8f7b9c4
commit ed9850939d
3 changed files with 198 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/templates/create-edit-template/create-edit-template.component.html
+110 -101
View File
@@ -6,7 +6,7 @@
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
<mat-select required formControlName="entity"> <mat-select required formControlName="entity">
<mat-option *ngFor="let entity of templateData.entities" [value]="entity.id"> <mat-option *ngFor="let entity of templateData.entities; trackBy: trackByEntityId" [value]="entity.id">
{{ entity.name }} {{ entity.name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
@@ -19,7 +19,7 @@
<mat-form-field class="flex-48"> <mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label> <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
<mat-select required formControlName="type"> <mat-select required formControlName="type">
<mat-option *ngFor="let type of templateData.types" [value]="type.id"> <mat-option *ngFor="let type of templateData.types; trackBy: trackByTypeId" [value]="type.id">
{{ type.name }} {{ type.name }}
</mat-option> </mat-option>
</mat-select> </mat-select>
@@ -41,114 +41,123 @@
</mat-card-content> </mat-card-content>
</form> </form>
<div role="toggle" class="flex-33"> <mat-card-content>
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions"> <div role="toggle" class="advanced-options-wrapper">
{{ 'labels.buttons.Advanced Options' | translate }} <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
</button> {{ 'labels.buttons.Advanced Options' | translate }}
</div>
<ng-container role="mappers" *ngIf="showAdvanceOptions">
<div *ngFor="let mapper of mappers; index as i" class="layout-row gap-2percent">
<mat-form-field class="flex-48">
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
<input matInput [formControl]="mapper.mapperskey" />
</mat-form-field>
<mat-form-field class="flex-fill flex-38">
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
<input matInput [formControl]="mapper.mappersvalue" />
</mat-form-field>
<button *ngIf="i === 0" class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
</button>
<button
*ngIf="!(i === 0)"
class="mapper-button flex-9"
mat-raised-button
color="primary"
(click)="removeMapper(i)"
>
<fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
</button> </button>
</div> </div>
</ng-container>
<div role="editor"> <ng-container role="mappers" *ngIf="showAdvanceOptions">
<label for="ckeditor" class="required-label required-label-ckeditor"> <div
{{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span> *ngFor="let mapper of mappers; index as i; trackBy: trackByMapperIndex"
</label> class="mapper-row layout-row gap-2percent"
<ckeditor >
#ckEditor <mat-form-field class="flex-48">
[editor]="Editor" <mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
(change)="onEditorChange($event)" <input matInput [formControl]="mapper.mapperskey" />
[data]="templateData.template?.text" </mat-form-field>
></ckeditor>
</div>
<div role="template-parameters"> <mat-form-field class="flex-fill flex-38">
<mat-accordion> <mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0"> <input matInput [formControl]="mapper.mappersvalue" />
<mat-expansion-panel-header> </mat-form-field>
<mat-panel-title>
{{ 'labels.inputs.Client Parameters' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="layout-row-wrap layout-xs-column layout-align-center"> <button *ngIf="i === 0" class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
<button <fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
mat-stroked-button </button>
color="primary" <button
class="parameter" *ngIf="!(i === 0)"
*ngFor="let label of clientParameterLabels" class="mapper-button flex-9"
(click)="addText(label)" mat-raised-button
> color="primary"
{{ label }} (click)="removeMapper(i)"
</button> >
</div> <fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
</mat-expansion-panel> </button>
</div>
</ng-container>
</mat-card-content>
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1"> <mat-card-content>
<mat-expansion-panel-header> <div role="editor" class="editor-wrapper">
<mat-panel-title> <label for="ckeditor" class="required-label required-label-ckeditor">
{{ 'labels.inputs.Loan Parameters' | translate }} {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
</mat-panel-title> </label>
</mat-expansion-panel-header> <ckeditor
#ckEditor
[editor]="Editor"
(change)="onEditorChange($event)"
[data]="templateData.template?.text"
></ckeditor>
</div>
</mat-card-content>
<div class="layout-row-wrap layout-xs-column layout-align-center"> <mat-card-content>
<button <div role="template-parameters">
mat-stroked-button <mat-accordion>
color="primary" <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
class="parameter" <mat-expansion-panel-header>
*ngFor="let label of loanParameterLabels" <mat-panel-title>
(click)="addText(label)" {{ 'labels.inputs.Client Parameters' | translate }}
> </mat-panel-title>
{{ label }} </mat-expansion-panel-header>
</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1"> <div class="layout-row-wrap layout-xs-column layout-align-center">
<mat-expansion-panel-header> <button
<mat-panel-title> mat-stroked-button
{{ 'labels.inputs.Repayment Schedule Parameters' | translate }} color="primary"
</mat-panel-title> class="parameter"
</mat-expansion-panel-header> *ngFor="let label of clientParameterLabels; trackBy: trackByLabel"
(click)="addText(label)"
>
{{ label }}
</button>
</div>
</mat-expansion-panel>
<div class="layout-row-wrap layout-xs-column layout-align-center"> <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
<button <mat-expansion-panel-header>
mat-stroked-button <mat-panel-title>
color="primary" {{ 'labels.inputs.Loan Parameters' | translate }}
class="parameter" </mat-panel-title>
*ngFor="let label of repaymentParameterLabels" </mat-expansion-panel-header>
(click)="addText(label)"
> <div class="layout-row-wrap layout-xs-column layout-align-center">
{{ label }} <button
</button> mat-stroked-button
</div> color="primary"
</mat-expansion-panel> class="parameter"
</mat-accordion> *ngFor="let label of loanParameterLabels; trackBy: trackByLabel"
</div> (click)="addText(label)"
>
{{ label }}
</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
<mat-expansion-panel-header>
<mat-panel-title>
{{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="layout-row-wrap layout-xs-column layout-align-center">
<button
mat-stroked-button
color="primary"
class="parameter"
*ngFor="let label of repaymentParameterLabels; trackBy: trackByLabel"
(click)="addText(label)"
>
{{ label }}
</button>
</div>
</mat-expansion-panel>
</mat-accordion>
</div>
</mat-card-content>
<mat-card-actions class="m-b-20 layout-row layout-xs-column layout-align-center gap-5px"> <mat-card-actions class="m-b-20 layout-row layout-xs-column layout-align-center gap-5px">
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button> <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
src/app/templates/create-edit-template/create-edit-template.component.scss
+49
View File
@@ -0,0 +1,49 @@
// Advanced Options button wrapper - aligns with Name field above
.advanced-options-wrapper {
margin-bottom: 16px;
}
// Mapper row styling - adds space between Advanced Options button and Mapper Key field
.mapper-row {
margin-top: 16px;
margin-bottom: 8px;
// Ensure buttons don't touch the right border
.mapper-button {
margin-left: 8px;
}
}
// Editor wrapper - prevents CKEditor from touching borders on left and right
.editor-wrapper {
margin-top: 16px;
.required-label {
display: block;
margin-bottom: 8px;
font-size: 14px;
font-weight: 500;
}
.required-asterisk {
color: #f44336;
}
// CKEditor container spacing
::ng-deep {
.ck-editor {
margin: 0;
.ck-editor__main {
.ck-content {
min-height: 200px;
}
}
}
}
}
// Ensure mat-card-content has consistent padding
mat-card-content {
padding: 16px;
}
src/app/templates/create-edit-template/create-edit-template.component.ts
+39
View File
@@ -259,4 +259,43 @@ export class CreateEditComponent implements OnInit {
}); });
} }
} }
/**
* TrackBy function for mappers array to improve ngFor performance.
* @param {number} index Index of the item
* @returns {number} Index as unique identifier
*/
trackByMapperIndex(index: number): number {
return index;
}
/**
* TrackBy function for parameter labels to improve ngFor performance.
* @param {number} index Index of the item
* @param {string} label Label string
* @returns {string} Label as unique identifier
*/
trackByLabel(index: number, label: string): string {
return label;
}
/**
* TrackBy function for entities dropdown to improve ngFor performance.
* @param {number} index Index of the item
* @param {any} entity Entity object
* @returns {number} Entity ID as unique identifier
*/
trackByEntityId(index: number, entity: any): number {
return entity.id;
}
/**
* TrackBy function for types dropdown to improve ngFor performance.
* @param {number} index Index of the item
* @param {any} type Type object
* @returns {number} Type ID as unique identifier
*/
trackByTypeId(index: number, type: any): number {
return type.id;
}
} }