Merge dev into demo-backup
Brings in all of dev's latest content not present on demo-backup (Share Withdrawal/Closure feature, TDS reports, KYC exception tracking, client-edit-email-dialog, form121 tab, search-select) while preserving demo-backup's own unique changes (wrapping Approval Center tab nav, Loan Origination/Investment mega-menus). 36 files that a prior "ours wins" conflict resolution had silently dropped were restored explicitly from dev's tip.
This commit is contained in:
@@ -0,0 +1,236 @@
|
||||
/**
|
||||
* 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 { Component, ElementRef, forwardRef, HostListener, Input, ViewChild } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
|
||||
export interface SearchSelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
/** What typed text is matched against — defaults to `label` when omitted, but a caller can
|
||||
* pass a richer string (e.g. account no + customer name + branch) so a search hits fields
|
||||
* that aren't all visible in the collapsed label. */
|
||||
searchText?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Drop-in replacement for a plain `<select>` when the option list is long enough that scanning
|
||||
* it is impractical (e.g. hundreds of accounts) — a text box that filters the option list as you
|
||||
* type, instead of a native dropdown you can only scroll through. Selection only commits on
|
||||
* click; typing without picking an option reverts the box to the last committed selection on
|
||||
* blur, so the bound ngModel value never drifts from an actual, valid option.
|
||||
*
|
||||
* Usage: <mifosx-search-select [options]="opts" [(ngModel)]="selectedValue"></mifosx-search-select>
|
||||
*/
|
||||
@Component({
|
||||
selector: 'mifosx-search-select',
|
||||
standalone: true,
|
||||
imports: [
|
||||
CommonModule,
|
||||
FormsModule
|
||||
],
|
||||
providers: [
|
||||
{
|
||||
provide: NG_VALUE_ACCESSOR,
|
||||
useExisting: forwardRef(() => SearchSelectComponent),
|
||||
multi: true
|
||||
}
|
||||
],
|
||||
template: `
|
||||
<div class="inv-search-select">
|
||||
<input
|
||||
#inputEl
|
||||
type="text"
|
||||
class="inv-search-select__input"
|
||||
[value]="query"
|
||||
[placeholder]="placeholder"
|
||||
[disabled]="disabled"
|
||||
(input)="onInput($event)"
|
||||
(focus)="onFocus()"
|
||||
(blur)="onBlur()"
|
||||
/>
|
||||
@if (open) {
|
||||
<ul
|
||||
class="inv-search-select__list"
|
||||
[style.top.px]="listTop"
|
||||
[style.left.px]="listLeft"
|
||||
[style.width.px]="listWidth"
|
||||
(mousedown)="$event.preventDefault()"
|
||||
>
|
||||
@for (o of filteredOptions; track o.value) {
|
||||
<li
|
||||
class="inv-search-select__option"
|
||||
[class.inv-search-select__option--active]="o.value === value"
|
||||
(click)="selectOption(o)"
|
||||
>
|
||||
{{ o.label }}
|
||||
</li>
|
||||
} @empty {
|
||||
<li class="inv-search-select__empty">No matches</li>
|
||||
}
|
||||
</ul>
|
||||
}
|
||||
</div>
|
||||
`,
|
||||
styles: [
|
||||
`
|
||||
/* Angular view encapsulation stops the host page's shared styles from reaching inside this
|
||||
* component's own template, so its look is re-declared here rather than inherited. */
|
||||
:host {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
.inv-search-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
.inv-search-select__input {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
font-size: 13px;
|
||||
color: #0d1b2a;
|
||||
font-family: inherit;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
/* position: fixed, anchored via JS to the input's own screen coords (see
|
||||
* updateListPosition()) rather than absolute inside this component — most of this app's
|
||||
* cards use overflow: hidden for rounded corners, which would otherwise clip a dropdown
|
||||
* that extends past the card's edge. */
|
||||
.inv-search-select__list {
|
||||
position: fixed;
|
||||
z-index: 2000;
|
||||
max-height: 260px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
list-style: none;
|
||||
background: #fff;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(13, 27, 42, 0.18);
|
||||
}
|
||||
.inv-search-select__option {
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
color: #0d1b2a;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.inv-search-select__option:hover,
|
||||
.inv-search-select__option--active {
|
||||
background: #eef2ff;
|
||||
}
|
||||
.inv-search-select__empty {
|
||||
padding: 8px 10px;
|
||||
font-size: 12px;
|
||||
color: #94a3b8;
|
||||
}
|
||||
`
|
||||
]
|
||||
})
|
||||
export class SearchSelectComponent implements ControlValueAccessor {
|
||||
@Input() options: SearchSelectOption[] = [];
|
||||
@Input() placeholder = 'Search…';
|
||||
|
||||
@ViewChild('inputEl') private inputEl?: ElementRef<HTMLInputElement>;
|
||||
|
||||
value = '';
|
||||
query = '';
|
||||
open = false;
|
||||
disabled = false;
|
||||
|
||||
listTop = 0;
|
||||
listLeft = 0;
|
||||
listWidth = 0;
|
||||
|
||||
private onChangeFn: (v: string) => void = () => {};
|
||||
onTouched: () => void = () => {};
|
||||
|
||||
get filteredOptions(): SearchSelectOption[] {
|
||||
const q = this.query.trim().toLowerCase();
|
||||
if (!q) {
|
||||
return this.options;
|
||||
}
|
||||
return this.options.filter((o) => (o.searchText || o.label).toLowerCase().includes(q));
|
||||
}
|
||||
|
||||
private labelFor(value: string): string {
|
||||
return this.options.find((o) => o.value === value)?.label ?? '';
|
||||
}
|
||||
|
||||
writeValue(v: string): void {
|
||||
this.value = v ?? '';
|
||||
this.query = this.labelFor(this.value);
|
||||
}
|
||||
|
||||
registerOnChange(fn: (v: string) => void): void {
|
||||
this.onChangeFn = fn;
|
||||
}
|
||||
|
||||
registerOnTouched(fn: () => void): void {
|
||||
this.onTouched = fn;
|
||||
}
|
||||
|
||||
setDisabledState(isDisabled: boolean): void {
|
||||
this.disabled = isDisabled;
|
||||
}
|
||||
|
||||
/** Anchors the fixed-position list to the input's current on-screen box. */
|
||||
private updateListPosition(): void {
|
||||
const el = this.inputEl?.nativeElement;
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
const rect = el.getBoundingClientRect();
|
||||
this.listTop = rect.bottom + 4;
|
||||
this.listLeft = rect.left;
|
||||
this.listWidth = rect.width;
|
||||
}
|
||||
|
||||
@HostListener('window:scroll')
|
||||
@HostListener('window:resize')
|
||||
onWindowChange(): void {
|
||||
if (this.open) {
|
||||
this.updateListPosition();
|
||||
}
|
||||
}
|
||||
|
||||
onInput(event: Event): void {
|
||||
this.query = (event.target as HTMLInputElement).value;
|
||||
this.open = true;
|
||||
this.updateListPosition();
|
||||
}
|
||||
|
||||
onFocus(): void {
|
||||
this.open = true;
|
||||
this.updateListPosition();
|
||||
}
|
||||
|
||||
onBlur(): void {
|
||||
this.open = false;
|
||||
this.onTouched();
|
||||
// Discard any uncommitted typed text — only a clicked option ever changes `value`.
|
||||
this.query = this.labelFor(this.value);
|
||||
}
|
||||
|
||||
selectOption(o: SearchSelectOption): void {
|
||||
this.value = o.value;
|
||||
this.query = o.label;
|
||||
this.open = false;
|
||||
this.onChangeFn(this.value);
|
||||
this.onTouched();
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user