Skip to content

Commit e0e9426

Browse files
gkbishnoi07gkbishnoi07
authored
Merge pull request #2735 from devvaansh/WEB-355-alignments-of-buttons-and-input-boxes-blemished-in-create-edit-template-component-html
WEB-355 Alignments of buttons and input boxes blemished in create-edit-template.component.html
2 parents e2a6767 + ed98509 commit e0e9426

File tree

3 files changed

+197
-100
lines changed

3 files changed

+197
-100
lines changed

‎src/app/templates/create-edit-template/create-edit-template.component.html‎

Lines changed: 109 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<mat-form-field class="flex-48">
77
<mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
88
<mat-select required formControlName="entity">
9-
<mat-option *ngFor="let entity of templateData.entities" [value]="entity.id">
9+
<mat-option *ngFor="let entity of templateData.entities; trackBy: trackByEntityId" [value]="entity.id">
1010
{{ entity.name }}
1111
</mat-option>
1212
</mat-select>
@@ -19,7 +19,7 @@
1919
<mat-form-field class="flex-48">
2020
<mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
2121
<mat-select required formControlName="type">
22-
<mat-option *ngFor="let type of templateData.types" [value]="type.id">
22+
<mat-option *ngFor="let type of templateData.types; trackBy: trackByTypeId" [value]="type.id">
2323
{{ type.name }}
2424
</mat-option>
2525
</mat-select>
@@ -41,114 +41,123 @@
4141
</mat-card-content>
4242
</form>
4343

44-
<div role="toggle" class="flex-33">
45-
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
46-
{{ 'labels.buttons.Advanced Options' | translate }}
47-
</button>
48-
</div>
44+
<mat-card-content>
45+
<div role="toggle" class="advanced-options-wrapper">
46+
<button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
47+
{{ 'labels.buttons.Advanced Options' | translate }}
48+
</button>
49+
</div>
50+
51+
<ng-container role="mappers" *ngIf="showAdvanceOptions">
52+
<div
53+
*ngFor="let mapper of mappers; index as i; trackBy: trackByMapperIndex"
54+
class="mapper-row layout-row gap-2percent"
55+
>
56+
<mat-form-field class="flex-48">
57+
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
58+
<input matInput [formControl]="mapper.mapperskey" />
59+
</mat-form-field>
4960

50-
<ng-container role="mappers" *ngIf="showAdvanceOptions">
51-
<div *ngFor="let mapper of mappers; index as i" class="layout-row gap-2percent">
52-
<mat-form-field class="flex-48">
53-
<mat-label>{{ 'labels.inputs.Mapper Key' | translate }}</mat-label>
54-
<input matInput [formControl]="mapper.mapperskey" />
55-
</mat-form-field>
61+
<mat-form-field class="flex-fill flex-38">
62+
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
63+
<input matInput [formControl]="mapper.mappersvalue" />
64+
</mat-form-field>
5665

57-
<mat-form-field class="flex-fill flex-38">
58-
<mat-label>{{ 'labels.inputs.Mapper Value' | translate }}</mat-label>
59-
<input matInput [formControl]="mapper.mappersvalue" />
60-
</mat-form-field>
66+
<button *ngIf="i === 0" class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
67+
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
68+
</button>
69+
<button
70+
*ngIf="!(i === 0)"
71+
class="mapper-button flex-9"
72+
mat-raised-button
73+
color="primary"
74+
(click)="removeMapper(i)"
75+
>
76+
<fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
77+
</button>
78+
</div>
79+
</ng-container>
80+
</mat-card-content>
6181

62-
<button *ngIf="i === 0" class="mapper-button flex-8" mat-raised-button color="primary" (click)="addMapper()">
63-
<fa-icon icon="plus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Add' | translate }}
64-
</button>
65-
<button
66-
*ngIf="!(i === 0)"
67-
class="mapper-button flex-9"
68-
mat-raised-button
69-
color="primary"
70-
(click)="removeMapper(i)"
71-
>
72-
<fa-icon icon="minus" class="m-r-10"></fa-icon>{{ 'labels.buttons.Remove' | translate }}
73-
</button>
82+
<mat-card-content>
83+
<div role="editor" class="editor-wrapper">
84+
<label for="ckeditor" class="required-label required-label-ckeditor">
85+
{{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
86+
</label>
87+
<ckeditor
88+
#ckEditor
89+
[editor]="Editor"
90+
(change)="onEditorChange($event)"
91+
[data]="templateData.template?.text"
92+
></ckeditor>
7493
</div>
75-
</ng-container>
76-
77-
<div role="editor">
78-
<label for="ckeditor" class="required-label required-label-ckeditor">
79-
{{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
80-
</label>
81-
<ckeditor
82-
#ckEditor
83-
[editor]="Editor"
84-
(change)="onEditorChange($event)"
85-
[data]="templateData.template?.text"
86-
></ckeditor>
87-
</div>
94+
</mat-card-content>
8895

89-
<div role="template-parameters">
90-
<mat-accordion>
91-
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
92-
<mat-expansion-panel-header>
93-
<mat-panel-title>
94-
{{ 'labels.inputs.Client Parameters' | translate }}
95-
</mat-panel-title>
96-
</mat-expansion-panel-header>
96+
<mat-card-content>
97+
<div role="template-parameters">
98+
<mat-accordion>
99+
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
100+
<mat-expansion-panel-header>
101+
<mat-panel-title>
102+
{{ 'labels.inputs.Client Parameters' | translate }}
103+
</mat-panel-title>
104+
</mat-expansion-panel-header>
97105

98-
<div class="layout-row-wrap layout-xs-column layout-align-center">
99-
<button
100-
mat-stroked-button
101-
color="primary"
102-
class="parameter"
103-
*ngFor="let label of clientParameterLabels"
104-
(click)="addText(label)"
105-
>
106-
{{ label }}
107-
</button>
108-
</div>
109-
</mat-expansion-panel>
106+
<div class="layout-row-wrap layout-xs-column layout-align-center">
107+
<button
108+
mat-stroked-button
109+
color="primary"
110+
class="parameter"
111+
*ngFor="let label of clientParameterLabels; trackBy: trackByLabel"
112+
(click)="addText(label)"
113+
>
114+
{{ label }}
115+
</button>
116+
</div>
117+
</mat-expansion-panel>
110118

111-
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
112-
<mat-expansion-panel-header>
113-
<mat-panel-title>
114-
{{ 'labels.inputs.Loan Parameters' | translate }}
115-
</mat-panel-title>
116-
</mat-expansion-panel-header>
119+
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
120+
<mat-expansion-panel-header>
121+
<mat-panel-title>
122+
{{ 'labels.inputs.Loan Parameters' | translate }}
123+
</mat-panel-title>
124+
</mat-expansion-panel-header>
117125

118-
<div class="layout-row-wrap layout-xs-column layout-align-center">
119-
<button
120-
mat-stroked-button
121-
color="primary"
122-
class="parameter"
123-
*ngFor="let label of loanParameterLabels"
124-
(click)="addText(label)"
125-
>
126-
{{ label }}
127-
</button>
128-
</div>
129-
</mat-expansion-panel>
126+
<div class="layout-row-wrap layout-xs-column layout-align-center">
127+
<button
128+
mat-stroked-button
129+
color="primary"
130+
class="parameter"
131+
*ngFor="let label of loanParameterLabels; trackBy: trackByLabel"
132+
(click)="addText(label)"
133+
>
134+
{{ label }}
135+
</button>
136+
</div>
137+
</mat-expansion-panel>
130138

131-
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
132-
<mat-expansion-panel-header>
133-
<mat-panel-title>
134-
{{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
135-
</mat-panel-title>
136-
</mat-expansion-panel-header>
139+
<mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
140+
<mat-expansion-panel-header>
141+
<mat-panel-title>
142+
{{ 'labels.inputs.Repayment Schedule Parameters' | translate }}
143+
</mat-panel-title>
144+
</mat-expansion-panel-header>
137145

138-
<div class="layout-row-wrap layout-xs-column layout-align-center">
139-
<button
140-
mat-stroked-button
141-
color="primary"
142-
class="parameter"
143-
*ngFor="let label of repaymentParameterLabels"
144-
(click)="addText(label)"
145-
>
146-
{{ label }}
147-
</button>
148-
</div>
149-
</mat-expansion-panel>
150-
</mat-accordion>
151-
</div>
146+
<div class="layout-row-wrap layout-xs-column layout-align-center">
147+
<button
148+
mat-stroked-button
149+
color="primary"
150+
class="parameter"
151+
*ngFor="let label of repaymentParameterLabels; trackBy: trackByLabel"
152+
(click)="addText(label)"
153+
>
154+
{{ label }}
155+
</button>
156+
</div>
157+
</mat-expansion-panel>
158+
</mat-accordion>
159+
</div>
160+
</mat-card-content>
152161

153162
<mat-card-actions class="m-b-20 layout-row layout-xs-column layout-align-center gap-5px">
154163
<button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>

‎src/app/templates/create-edit-template/create-edit-template.component.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// Advanced Options button wrapper - aligns with Name field above
2+
.advanced-options-wrapper {
3+
margin-bottom: 16px;
4+
}
5+
6+
// Mapper row styling - adds space between Advanced Options button and Mapper Key field
7+
.mapper-row {
8+
margin-top: 16px;
9+
margin-bottom: 8px;
10+
11+
// Ensure buttons don't touch the right border
12+
.mapper-button {
13+
margin-left: 8px;
14+
}
15+
}
16+
17+
// Editor wrapper - prevents CKEditor from touching borders on left and right
18+
.editor-wrapper {
19+
margin-top: 16px;
20+
21+
.required-label {
22+
display: block;
23+
margin-bottom: 8px;
24+
font-size: 14px;
25+
font-weight: 500;
26+
}
27+
28+
.required-asterisk {
29+
color: #f44336;
30+
}
31+
32+
// CKEditor container spacing
33+
::ng-deep {
34+
.ck-editor {
35+
margin: 0;
36+
37+
.ck-editor__main {
38+
.ck-content {
39+
min-height: 200px;
40+
}
41+
}
42+
}
43+
}
44+
}
45+
46+
// Ensure mat-card-content has consistent padding
47+
mat-card-content {
48+
padding: 16px;
49+
}

‎src/app/templates/create-edit-template/create-edit-template.component.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -259,4 +259,43 @@ export class CreateEditComponent implements OnInit {
259259
});
260260
}
261261
}
262+
263+
/**
264+
* TrackBy function for mappers array to improve ngFor performance.
265+
* @param {number} index Index of the item
266+
* @returns {number} Index as unique identifier
267+
*/
268+
trackByMapperIndex(index: number): number {
269+
return index;
270+
}
271+
272+
/**
273+
* TrackBy function for parameter labels to improve ngFor performance.
274+
* @param {number} index Index of the item
275+
* @param {string} label Label string
276+
* @returns {string} Label as unique identifier
277+
*/
278+
trackByLabel(index: number, label: string): string {
279+
return label;
280+
}
281+
282+
/**
283+
* TrackBy function for entities dropdown to improve ngFor performance.
284+
* @param {number} index Index of the item
285+
* @param {any} entity Entity object
286+
* @returns {number} Entity ID as unique identifier
287+
*/
288+
trackByEntityId(index: number, entity: any): number {
289+
return entity.id;
290+
}
291+
292+
/**
293+
* TrackBy function for types dropdown to improve ngFor performance.
294+
* @param {number} index Index of the item
295+
* @param {any} type Type object
296+
* @returns {number} Type ID as unique identifier
297+
*/
298+
trackByTypeId(index: number, type: any): number {
299+
return type.id;
300+
}
262301
}

0 commit comments

Comments
 (0)