{{ canEdit ? 'Cancel' : 'Back to list' }}
diff --git a/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.scss b/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.scss
index 78c8ccc5b..476337e6e 100644
--- a/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.scss
+++ b/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.scss
@@ -70,6 +70,79 @@
}
}
+ &__gl {
+ margin: 3px 0 0 30px;
+ }
+
+ &__gl-tag {
+ display: inline-block;
+ font-size: 10px;
+ font-weight: 600;
+ color: #475569;
+ background: #f1f5f9;
+ border-radius: 999px;
+ padding: 1px 8px;
+ white-space: nowrap;
+
+ &--unmapped {
+ color: #92400e;
+ background: #fef3c7;
+ }
+
+ &--editable {
+ cursor: pointer;
+
+ &:hover {
+ outline: 1px solid #94a3b8;
+ }
+ }
+ }
+
+ &__gl-select {
+ display: block;
+ margin: 4px 0 0 30px;
+ max-width: 340px;
+ }
+
+ &__gl-warn {
+ color: #b45309;
+ font-weight: 600;
+ }
+
+ &__add-panel {
+ padding: 14px 18px;
+ border-bottom: 1px solid #f1f5f9;
+ background: #f8fafc;
+ }
+
+ &__add-title {
+ font-size: 13px;
+ font-weight: 600;
+ color: #0f172a;
+ margin-bottom: 10px;
+ }
+
+ &__add-fields {
+ display: flex;
+ align-items: flex-end;
+ gap: 12px;
+ flex-wrap: wrap;
+
+ .er__field {
+ min-width: 240px;
+ }
+
+ .er__field--gl {
+ min-width: 320px;
+ }
+ }
+
+ &__add-error {
+ margin-top: 8px;
+ font-size: 12px;
+ color: #b91c1c;
+ }
+
&__readonly-banner {
display: flex;
align-items: center;
diff --git a/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.ts b/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.ts
index 329cdd8f7..95472abde 100644
--- a/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.ts
+++ b/src/app/products/loan-interest-rate-register/edit-register/edit-register.component.ts
@@ -6,7 +6,8 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
*/
-import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, ElementRef, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
import { CommonModule } from '@angular/common';
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
import { FormsModule } from '@angular/forms';
@@ -18,7 +19,8 @@ import { MatIconModule } from '@angular/material/icon';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { RateRegisterService } from '../rate-register.service';
-import { RateCell, RateChartRow, RateRegister, SlabColumn } from '../models/rate-register.model';
+import { GlOption, RateCell, RateChartRow, RateRegister, SlabColumn } from '../models/rate-register.model';
+import { GlPickerComponent } from '../gl-picker/gl-picker.component';
/**
* Grid editor for one Loan Interest Rate Register — Excel-shaped: 34 products as rows and 10
@@ -39,10 +41,13 @@ import { RateCell, RateChartRow, RateRegister, SlabColumn } from '../models/rate
MatSelectModule,
MatIconModule,
MatDatepickerModule,
- MatNativeDateModule
+ MatNativeDateModule,
+ GlPickerComponent
]
})
-export class EditRegisterComponent implements OnInit {
+export class EditRegisterComponent implements OnInit, OnDestroy {
+ private readonly snack = inject(MatSnackBar);
+
private readonly service = inject(RateRegisterService);
private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router);
@@ -58,11 +63,42 @@ export class EditRegisterComponent implements OnInit {
@ViewChild('cellInput') cellInput?: ElementRef;
+ /** Leaving the page keeps the draft: edits are saved so a reload or a trip to Compare does not lose them. */
+ ngOnDestroy(): void {
+ if (this.canEdit) {
+ this.service.saveDrafts();
+ }
+ }
+
+ saveDraft(): void {
+ this.service.saveDrafts();
+ this.snack.open('Draft saved', 'OK', { duration: 2000 });
+ }
+
+ /** Posting GL accounts for the particular → GL mapping. */
+ glOptions: GlOption[] = [];
+
+ /** "Add product" panel state. A new product needs a name and a GL before it can be added. */
+ addingProduct = false;
+ newProductName = '';
+ newProductGl: number | null = null;
+ addProductError = '';
+
+ /** Index of the row whose GL is being changed inline, or null. */
+ glEditRow: number | null = null;
+
ngOnInit(): void {
+ this.service.getGlOptions().subscribe((options) => (this.glOptions = options));
const idParam = this.route.snapshot.queryParamMap.get('id');
const id = idParam ? Number(idParam) : null;
this.service.list().subscribe((all) => {
- this.register = (id ? all.find((r) => r.id === id) : undefined) ?? this.service.getActiveOrFirstDraft();
+ const found = (id ? all.find((r) => r.id === id) : undefined) ?? this.service.getActiveOrFirstDraft();
+ if (!found) {
+ // e.g. a reload on an unsaved local draft: nothing to edit, go back to the list.
+ this.router.navigate(['/products/loan-interest-rate-register']);
+ return;
+ }
+ this.register = found;
this.active = this.service.getActive();
this.slabs = this.register.slabs;
this.rows = this.register.rows;
@@ -173,22 +209,66 @@ export class EditRegisterComponent implements OnInit {
this.editing = null;
}
- /** Append a new empty product row at the bottom of the grid. */
+ glLabel(row: RateChartRow): string | null {
+ return this.service.glLabel(row.glAccountId);
+ }
+
+ unmappedCount(): number {
+ return this.rows.filter((r) => r.glAccountId == null).length;
+ }
+
+ /** Submit is blocked until every product has a GL. */
+ get canSubmit(): boolean {
+ return this.unmappedCount() === 0;
+ }
+
+ /** Opens the Add product panel. */
addProduct(): void {
if (!this.canEdit) {
return;
}
- const name = window.prompt('New product name', 'New product');
+ this.addingProduct = true;
+ this.newProductName = '';
+ this.newProductGl = null;
+ this.addProductError = '';
+ }
+
+ cancelAddProduct(): void {
+ this.addingProduct = false;
+ this.addProductError = '';
+ }
+
+ /** Append the new product row at the bottom of the grid. Name and GL are both mandatory. */
+ confirmAddProduct(): void {
+ const name = this.newProductName.trim();
if (!name) {
+ this.addProductError = 'Enter the product name.';
+ return;
+ }
+ if (this.rows.some((r) => r.particulars.trim().toLowerCase() === name.toLowerCase())) {
+ this.addProductError = 'A product with this name already exists.';
+ return;
+ }
+ if (this.newProductGl == null) {
+ this.addProductError = 'Select the GL account for this product.';
return;
}
const next = this.rows.length > 0 ? Math.max(...this.rows.map((r) => r.srNo)) + 1 : 1;
this.rows.push({
srNo: next,
- particulars: name.trim(),
+ particulars: name,
+ glAccountId: this.newProductGl,
rates: Array(this.slabs.length).fill(null),
isFormula: false
});
+ this.cancelAddProduct();
+ }
+
+ /** Toggle the inline GL selector on an existing row (Draft only). */
+ editGl(rowIdx: number): void {
+ if (this.canEdit) {
+ this.glEditRow = this.glEditRow === rowIdx ? null : rowIdx;
+ }
}
/** Append a new amount slab column; every existing row grows by one blank cell. */
diff --git a/src/app/products/loan-interest-rate-register/gl-picker/gl-picker.component.ts b/src/app/products/loan-interest-rate-register/gl-picker/gl-picker.component.ts
new file mode 100644
index 000000000..c58959fb2
--- /dev/null
+++ b/src/app/products/loan-interest-rate-register/gl-picker/gl-picker.component.ts
@@ -0,0 +1,135 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
+import {
+ AfterViewInit,
+ Component,
+ EventEmitter,
+ Input,
+ OnChanges,
+ OnDestroy,
+ OnInit,
+ Output,
+ SimpleChanges,
+ ViewChild
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatSelect, MatSelectModule } from '@angular/material/select';
+import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
+import { Subject, takeUntil } from 'rxjs';
+import { GlOption } from '../models/rate-register.model';
+
+/**
+ * Compact searchable GL account dropdown. Typing in the search box filters by GL code or name.
+ * Emits the chosen GL id; with allowClear a "GL not mapped" entry emits null.
+ */
+@Component({
+ selector: 'mifosx-gl-picker',
+ imports: [
+ CommonModule,
+ ReactiveFormsModule,
+ MatFormFieldModule,
+ MatSelectModule,
+ NgxMatSelectSearchModule
+ ],
+ template: `
+
+
+
+
+
+ GL not mapped
+ {{ o.label }}
+
+
+ `,
+ styles: [
+ `
+ .gl-picker {
+ width: 100%;
+ min-width: 260px;
+ font-size: 12px;
+ }
+ `
+ ]
+})
+export class GlPickerComponent implements OnInit, OnChanges, AfterViewInit, OnDestroy {
+ @Input() options: GlOption[] = [];
+ @Input() value: number | null = null;
+ @Input() placeholder = 'Select GL account';
+ @Input() allowClear = false;
+ /** Open the dropdown as soon as it is rendered (used for inline row editing). */
+ @Input() openOnInit = false;
+
+ @Output() valueChange = new EventEmitter();
+ /** Fired when the dropdown panel closes, whether or not a value was picked. */
+ @Output() closed = new EventEmitter();
+
+ @ViewChild(MatSelect) private select?: MatSelect;
+
+ filterCtrl = new UntypedFormControl('');
+ filtered: GlOption[] = [];
+
+ private readonly destroy$ = new Subject();
+
+ ngOnInit(): void {
+ this.filterCtrl.valueChanges.pipe(takeUntil(this.destroy$)).subscribe(() => this.applyFilter());
+ }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ if (changes['options'] || changes['value']) {
+ this.applyFilter();
+ }
+ }
+
+ ngAfterViewInit(): void {
+ if (this.openOnInit) {
+ setTimeout(() => this.select?.open());
+ }
+ }
+
+ ngOnDestroy(): void {
+ this.destroy$.next();
+ this.destroy$.complete();
+ }
+
+ onOpenedChange(opened: boolean): void {
+ if (opened) {
+ this.filterCtrl.setValue('');
+ } else {
+ this.closed.emit();
+ }
+ }
+
+ /** Filter by code or name; the currently selected option always stays in the list so its label shows. */
+ private applyFilter(): void {
+ const q = ((this.filterCtrl.value as string) ?? '').trim().toLowerCase();
+ const all = this.options ?? [];
+ if (!q) {
+ this.filtered = all.slice();
+ return;
+ }
+ const matches = all.filter((o) => o.label.toLowerCase().includes(q));
+ const selected = all.find((o) => o.id === this.value);
+ this.filtered = selected && !matches.includes(selected) ? [
+ selected,
+ ...matches
+ ] : matches;
+ }
+}
diff --git a/src/app/products/loan-interest-rate-register/loan-interest-rate-register.component.html b/src/app/products/loan-interest-rate-register/loan-interest-rate-register.component.html
index ab378875c..dd57f3b14 100644
--- a/src/app/products/loan-interest-rate-register/loan-interest-rate-register.component.html
+++ b/src/app/products/loan-interest-rate-register/loan-interest-rate-register.component.html
@@ -54,9 +54,8 @@
No rate register versions yet
- Create the first version to publish rates for all loan products. The template comes pre-filled from the bank's
- approved Excel chart (34 products × 10 amount slabs + 5 CIBIL bands) — you can edit everything before
- submitting for approval.
+ Create the first version to publish rates for all loan products. It starts with the standard loan types (rates
+ blank) and 5 CIBIL bands — fill in the rates, add any bank-specific products, and submit for approval.