From ed9850939df7f256bef11bc1936a84bd7e60c2ce Mon Sep 17 00:00:00 2001
From: Devansh Vashisht <devansh.vashisht.ug24@nsut.ac.in>
Date: Thu, 30 Oct 2025 01:46:25 +0530
Subject: [PATCH] git commit -m "WEB-355 Alignments of buttons and input boxes
 blemished in create-edit-template.component.html"

---
 .../create-edit-template.component.html       | 211 +++++++++---------
 .../create-edit-template.component.scss       |  49 ++++
 .../create-edit-template.component.ts         |  39 ++++
 3 files changed, 198 insertions(+), 101 deletions(-)

diff --git a/src/app/templates/create-edit-template/create-edit-template.component.html b/src/app/templates/create-edit-template/create-edit-template.component.html
index 287d3ca9c..a13e811ee 100644
--- a/src/app/templates/create-edit-template/create-edit-template.component.html
+++ b/src/app/templates/create-edit-template/create-edit-template.component.html
@@ -6,7 +6,7 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Entity' | translate }}</mat-label>
             <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 }}
               </mat-option>
             </mat-select>
@@ -19,7 +19,7 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Type' | translate }}</mat-label>
             <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 }}
               </mat-option>
             </mat-select>
@@ -41,114 +41,123 @@
       </mat-card-content>
     </form>
 
-    <div role="toggle" class="flex-33">
-      <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
-        {{ 'labels.buttons.Advanced Options' | translate }}
-      </button>
-    </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 }}
+    <mat-card-content>
+      <div role="toggle" class="advanced-options-wrapper">
+        <button mat-raised-button color="primary" (click)="showAdvanceOptions = !showAdvanceOptions">
+          {{ 'labels.buttons.Advanced Options' | translate }}
         </button>
       </div>
-    </ng-container>
 
-    <div role="editor">
-      <label for="ckeditor" class="required-label required-label-ckeditor">
-        {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
-      </label>
-      <ckeditor
-        #ckEditor
-        [editor]="Editor"
-        (change)="onEditorChange($event)"
-        [data]="templateData.template?.text"
-      ></ckeditor>
-    </div>
+      <ng-container role="mappers" *ngIf="showAdvanceOptions">
+        <div
+          *ngFor="let mapper of mappers; index as i; trackBy: trackByMapperIndex"
+          class="mapper-row 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>
 
-    <div role="template-parameters">
-      <mat-accordion>
-        <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              {{ 'labels.inputs.Client Parameters' | translate }}
-            </mat-panel-title>
-          </mat-expansion-panel-header>
+          <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>
 
-          <div class="layout-row-wrap layout-xs-column layout-align-center">
-            <button
-              mat-stroked-button
-              color="primary"
-              class="parameter"
-              *ngFor="let label of clientParameterLabels"
-              (click)="addText(label)"
-            >
-              {{ label }}
-            </button>
-          </div>
-        </mat-expansion-panel>
+          <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>
+        </div>
+      </ng-container>
+    </mat-card-content>
 
-        <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              {{ 'labels.inputs.Loan Parameters' | translate }}
-            </mat-panel-title>
-          </mat-expansion-panel-header>
+    <mat-card-content>
+      <div role="editor" class="editor-wrapper">
+        <label for="ckeditor" class="required-label required-label-ckeditor">
+          {{ 'labels.inputs.Text' | translate }} <span class="required-asterisk">*</span>
+        </label>
+        <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">
-            <button
-              mat-stroked-button
-              color="primary"
-              class="parameter"
-              *ngFor="let label of loanParameterLabels"
-              (click)="addText(label)"
-            >
-              {{ label }}
-            </button>
-          </div>
-        </mat-expansion-panel>
+    <mat-card-content>
+      <div role="template-parameters">
+        <mat-accordion>
+          <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 0">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ 'labels.inputs.Client Parameters' | translate }}
+              </mat-panel-title>
+            </mat-expansion-panel-header>
 
-        <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 clientParameterLabels; trackBy: trackByLabel"
+                (click)="addText(label)"
+              >
+                {{ label }}
+              </button>
+            </div>
+          </mat-expansion-panel>
 
-          <div class="layout-row-wrap layout-xs-column layout-align-center">
-            <button
-              mat-stroked-button
-              color="primary"
-              class="parameter"
-              *ngFor="let label of repaymentParameterLabels"
-              (click)="addText(label)"
-            >
-              {{ label }}
-            </button>
-          </div>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </div>
+          <mat-expansion-panel *ngIf="templateForm.controls.entity.value === 1">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ 'labels.inputs.Loan 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 loanParameterLabels; trackBy: trackByLabel"
+                (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">
       <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
diff --git a/src/app/templates/create-edit-template/create-edit-template.component.scss b/src/app/templates/create-edit-template/create-edit-template.component.scss
index e69de29bb..506a5d481 100644
--- a/src/app/templates/create-edit-template/create-edit-template.component.scss
+++ b/src/app/templates/create-edit-template/create-edit-template.component.scss
@@ -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;
+}
diff --git a/src/app/templates/create-edit-template/create-edit-template.component.ts b/src/app/templates/create-edit-template/create-edit-template.component.ts
index 59a56c0e2..bfc1b0e80 100644
--- a/src/app/templates/create-edit-template/create-edit-template.component.ts
+++ b/src/app/templates/create-edit-template/create-edit-template.component.ts
@@ -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;
+  }
 }