876038: Need to update loan calculator in public branch

2024-03-13 15:40:03 +05:30 · 2024-03-13 15:40:03 +05:30 · 52635902e5
--- a/angular.json
+++ b/angular.json
@ -45,7 +45,7 @@
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
+                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
--- a/package.json
+++ b/package.json
@ -9,7 +9,8 @@
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "ci-publish": "gulp publish-sample"
  },
  "private": true,
  "dependencies": {
@ -27,6 +28,7 @@
    "@syncfusion/ej2-angular-charts": "*",
    "@syncfusion/ej2-angular-grids": "*",
    "@syncfusion/ej2-angular-inputs": "*",
+    "@syncfusion/ej2-angular-treegrid": "*",
    "rxjs": "~7.8.0",
    "tslib": "^2.6.2",
    "zone.js": "~0.12.0"
@ -35,6 +37,7 @@
    "@angular-devkit/build-angular": "^15.2.6",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "^15.2.0",
+    "@syncfusion/ej2-showcase-helper": "*",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@ -7,4 +7,4 @@ const routes: Routes = [];
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule { }
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -6,7 +6,7 @@ import { NumericTextBoxModule, SliderModule } from '@syncfusion/ej2-angular-inpu
 import { RadioButtonModule } from '@syncfusion/ej2-angular-buttons';
 import { AccumulationChartModule, ChartModule } from '@syncfusion/ej2-angular-charts';
 import { DatePickerModule } from '@syncfusion/ej2-angular-calendars';
-import { GridModule } from '@syncfusion/ej2-angular-grids';
+import { TreeGridModule } from '@syncfusion/ej2-angular-treegrid';

 import { AppComponent } from './app.component';
 import { HomeComponent } from './home/home.component';
@ -14,7 +14,7 @@ import { InputComponent } from './home/input/input.component';
 import { DashboardComponent } from './home/dashboard/dashboard.component';
 import { StatementComponent } from './statement/statement.component';
 import { BarChartComponent } from './bar-chart/bar-chart.component';
-import { GridAppComponent } from './grid-app/grid-app.component';
+import { TreeGridAppComponent} from './grid-app/grid-app.component';

 import { DataService } from './data-service';

@ -27,7 +27,7 @@ import { DataService } from './data-service';
    DashboardComponent,
    StatementComponent,
    BarChartComponent,
-    GridAppComponent
+    TreeGridAppComponent
  ],
  imports: [
    BrowserModule,
@ -37,7 +37,7 @@ import { DataService } from './data-service';
    AccumulationChartModule,
    DatePickerModule,
    ChartModule,
-    GridModule,
+    TreeGridModule,
    AppRoutingModule
  ],
  providers: [DataService],
--- a/src/app/data-service.ts
+++ b/src/app/data-service.ts
@ -6,9 +6,9 @@ import {
    AccumulationDataLabel, SeriesModel, Chart, LineSeries, DateTime, Legend, Tooltip, IAccLoadedEventArgs, AccumulationTheme, IAccPointRenderEventArgs,
    StackingColumnSeries, Crosshair, DataLabel, ColumnSeries, IMouseEventArgs, Series
 } from '@syncfusion/ej2-charts';
-import { Grid, DetailRow } from '@syncfusion/ej2-grids';
+import { TreeGrid } from '@syncfusion/ej2-treegrid';

-import { GridAppComponent } from './grid-app/grid-app.component';
+import { TreeGridAppComponent } from './grid-app/grid-app.component';
 import { BarChartComponent } from './bar-chart/bar-chart.component';
 import { DashboardComponent } from './home/dashboard/dashboard.component';

@ -35,7 +35,7 @@ export class DataService {

    public yearTenure: boolean = true;
    public chart!: BarChartComponent;
-    public grid!: GridAppComponent;
+    public treegrid!: TreeGridAppComponent;
    public totalPrincipalYear: number = 0;
    public totalInterestYear: number = 0;
    public inter!: number;
@ -98,23 +98,7 @@ export class DataService {
    }

    public renderControls(): void {
-        this.grid.yearWiseData = this.yearWiseData;
-        this.grid.childGrid = {
-            created: this.grid.childCreated,
-            dataBound: this.grid.childDataBound,
-            queryString: 'year',
-            columns: [
-                { field: 'month', headerText: 'Month', textAlign: 'center', minWidth: '80px' },
-                {
-                    field: 'emi', format: 'C0',
-                    hideAtMedia: '(min-width: 480px)', headerText: 'Payment', minWidth: '80px', textAlign: 'center'
-                },
-                { field: 'pricipalPaid', format: 'C0', headerText: 'Pricipal Paid', minWidth: '80px', textAlign: 'center' },
-                { field: 'interest', format: 'C0', headerText: 'Interest Paid', minWidth: '80px', textAlign: 'center' },
-                { field: 'endingBalance', format: 'C0', headerText: 'Balance', minWidth: '80px', textAlign: 'center' }
-            ],
-            dataSource: this.dataUnits
-        };
+        this.treegrid.yearWiseData = this.yearWiseData;
        this.chart.chartObj.series = [
            // {
            //     type: 'Column',
@ -207,22 +191,28 @@ export class DataService {
            this.totalPrincipalYear += parseFloat((this.emi - this.inter).toFixed(2));
            this.totalInterestYear += this.inter;
            this.dataUnits.push({
-                month: this.monthNames[this.dateObj.getMonth()],
-                index: (i + 1),
-                totalInterest: Math.round(this.totalInterest),
-                totalAmount: this.totalAmount,
-                emi: Math.round(this.emi),
-                year: this.dateObj.getFullYear(),
-                beginningBalance: Math.round(this.princ),
-                interest: Math.round(this.inter),
-                pricipalPaid: Math.round((this.emi - this.inter)),
-                endingBalance: Math.round(this.endBalance)
+              id: i + 1,
+              month: this.monthNames[this.dateObj.getMonth()],
+              index: i + 1,
+              totalInterest: Math.round(this.totalInterest),
+              totalAmount: this.totalAmount,
+              emi: Math.round(this.emi),
+              year: this.monthNames[this.dateObj.getMonth()],
+              beginningBalance: Math.round(this.princ),
+              interest: Math.round(this.inter),
+              pricipalPaid: Math.round(this.emi - this.inter),
+              endingBalance: Math.round(this.endBalance),
+              parentId: this.dateObj.getFullYear(),
+              yearTotal: Math.round(this.yearTotal),
+              yearPrincipal: this.totalPrincipalYear,
+              yearInterest: this.totalInterestYear,
            });
            if (i === 0 || this.dateObj.getMonth() === 0) {
                this.beginBalance = this.princ;
            }
            if (this.dateObj.getMonth() === 11 || (i === this.tent - 1)) {
                this.yearWiseData.push({
+                    id: this.dateObj.getFullYear(),
                    beginningBalance: Math.round(this.beginBalance),
                    totalInterest: Math.round(this.totalInterest),
                    totalPrincipal: Math.round(this.totalPrincipal),
@ -232,11 +222,14 @@ export class DataService {
                    yearN: new Date(this.dateObj.getFullYear(), 0, 1),
                    year: this.dateObj.getFullYear(),
                    yearPrincipal: this.totalPrincipalYear,
-                    yearInterest: this.totalInterestYear
+                    yearInterest: this.totalInterestYear,
+                    childRecord: this.dataUnits,
+                    parentId: null,
                });
                this.yearTotal = 0;
                this.totalPrincipalYear = 0;
                this.totalInterestYear = 0;
+                this.dataUnits = [];
            }
            this.princ = this.endBalance;
            if (i < this.tent - 1) {
--- a/src/app/grid-app/grid-app.component.html
+++ b/src/app/grid-app/grid-app.component.html
@ -1,17 +1,17 @@
 <div class="row top-space loan-content max-content">
    <h6 class="center-heading">Amortization Schedule</h6>
-    <ejs-grid #scheduleGrid id='scheduleGrid' [dataSource]='yearWiseData' [childGrid]='childGrid' width="100%" (click)='onClick($event)'>
+    <ejs-treegrid #scheduleGrid id='scheduleGrid' [dataSource]='yearWiseData'  width="100%" childMapping='childRecord' [enableCollapseAll]="true">
        <e-columns>
-            <e-column field='year' headerText='Year' minWidth='80px' textAlign="center">
+            <e-column field='year' headerText='Year/Month' minWidth='80px' textAlign="center"></e-column>
+            <e-column field='yearTotal' headerText='Payment' minWidth='80px' textAlign="center" [format]="format" [hideAtMedia]="paymentHideAtMedia">
                <ng-template #template let-data>
-                    <div class="e-icons e-icon-grightarrow e-row-toggle"></div>
-                    <span style="padding-left: 12px;">{{data.year}}</span>
+                    <span *ngIf="data.parentItem">{{ data.emi | currency:'':'symbol':'1.0-2' }}</span>
+                    <span *ngIf="!data.parentItem">{{ data.yearTotal | currency:'':'symbol':'1.0-2' }}</span>
                </ng-template>
            </e-column>
-            <e-column field='yearTotal' headerText='Payment' minWidth='80px' textAlign="center" [format]="format" [hideAtMedia]="paymentHideAtMedia"></e-column>
            <e-column field='yearPrincipal' headerText='Principal Paid' minWidth='80px' textAlign="center" [format]="format"></e-column>           
            <e-column field='yearInterest' headerText='Interest Paid' minWidth='80px' textAlign="center" [format]="format"></e-column>
            <e-column field='endingBalance' headerText='Balance' minWidth='80px' textAlign="center" [format]="format"></e-column>
        </e-columns>
-    </ejs-grid>
-</div>
+    </ejs-treegrid>
+</div>
--- a/src/app/grid-app/grid-app.component.ts
+++ b/src/app/grid-app/grid-app.component.ts
@ -1,9 +1,9 @@
 import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
 import { closest } from '@syncfusion/ej2-base';
-import { GridComponent } from '@syncfusion/ej2-angular-grids';
-import { Grid, DetailRow, DetailDataBoundEventArgs } from '@syncfusion/ej2-grids';
+import { TreeGridComponent } from '@syncfusion/ej2-angular-treegrid';
+import { TreeGrid } from '@syncfusion/ej2-treegrid';
 import { DataService } from '../data-service';
-Grid.Inject(DetailRow);
+

@Component({
  selector: 'app-grid',
@ -11,63 +11,20 @@ Grid.Inject(DetailRow);
  encapsulation: ViewEncapsulation.None
 })

-export class GridAppComponent implements OnInit {
+export class TreeGridAppComponent implements OnInit {

    /** Configurations for the Grid page */
    constructor(private data: DataService) {
    }

    @ViewChild('scheduleGrid')
-    public grid!: Grid;
+    public treegrid!: TreeGrid;

    public yearWiseData: Object[] = this.data.yearWiseData;
-    public childGrid: Object = {
-        created: this.childCreated,
-        dataBound: this.childDataBound,
-        queryString: 'year',
-        columns: [
-            { field: 'month', headerText: 'Month', textAlign: 'Center', minWidth: '80px' },
-            {
-                field: 'emi', format: 'C0',
-                hideAtMedia: '(min-width: 480px)', headerText: 'Payment', minWidth: '80px', textAlign: 'Center'
-            },
-            { field: 'pricipalPaid', format: 'C0', headerText: 'Pricipal Paid', minWidth: '80px', textAlign: 'Center' },
-            { field: 'interest', format: 'C0', headerText: 'Interest Paid', minWidth: '80px', textAlign: 'Center' },
-            { field: 'endingBalance', format: 'C0', headerText: 'Balance', minWidth: '80px', textAlign: 'Center' }
-        ],
-        dataSource: this.data.dataUnits
-    };
    public format: string = 'c0';
    public balanceHideAtMedia: string = '(min-width: 750px)';
    public paymentHideAtMedia: string = '(min-width: 480px)';

-    /* tslint:disable */
-    public childCreated(args: Object): void {
-        // (this.getHeaderContent() as HTMLElement).style.display = 'none';
-        // this.element.style.display = 'none';
-    }
-    public childDataBound(args: Object): void {
-        // this.element.style.display = '';
-    }
-    /* tslint:enable */
-    public onClick(args: MouseEvent): void {
-        const target = args.target as HTMLElement;
-        if (target.classList.contains('e-row-toggle') || target.parentElement?.querySelector('.e-row-toggle')) {
-            const rowElement = closest(target, 'tr') as HTMLElement;
-            const rowIndex = parseInt(rowElement.getAttribute('aria-rowindex') || '', 10);
-            if (rowIndex >= 0) {
-                if (target.classList.contains('e-icon-gdownarrow')) {
-                    target.classList.remove('e-icon-gdownarrow');
-                    target.classList.add('e-icon-grightarrow');
-                    this.grid.detailRowModule.collapse(rowIndex - 1);
-                } else {
-                    target.classList.remove('e-icon-grightarrow');
-                    target.classList.add('e-icon-gdownarrow');
-                    this.grid.detailRowModule.expand(rowIndex - 1);
-                }
-            }
-        }    }
-
    public ngOnInit(): void {
    }

--- a/src/assets/index.scss
+++ b/src/assets/index.scss
@ -903,3 +903,9 @@ body {
 .e-grid .e-icon-grightarrow,.e-grid .e-icon-gdownarrow {
  padding: 0px;
 }
+.e-treegrid .e-treegridexpand:hover::before, .e-treegrid .e-treegridcollapse:hover::before {
+  color: #fff;
+}
+.e-grid.e-default .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border) {
+  border-bottom-width: 0px;
+}
--- a/src/assets/styles.scss
+++ b/src/assets/styles.scss
@ -3,4 +3,5 @@
@import 'ej2-popups/styles/bootstrap.scss';
@import 'ej2-inputs/styles/bootstrap.scss';
@import 'ej2-calendars/styles/bootstrap.scss';
-@import 'ej2-grids/styles/bootstrap.scss';
+@import 'ej2-grids/styles/bootstrap.scss';
+@import 'ej2-treegrid/styles/bootstrap.scss';