From dc7f66805683c60161164b363a491839b0983207 Mon Sep 17 00:00:00 2001 From: Nitesh Yadav Date: Fri, 18 Sep 2026 13:57:14 +0530 Subject: [PATCH] feat(shares): move voucher search behind a popup, not an always-visible toolbar The GL Account / Voucher No lookup is for the exception -- a receipt the unattributed list and the member's own list do not already carry -- so it now sits behind a "Search a Voucher Not Listed Below" button in both Apply Collection and Apply Additional Shares, opening the same lookup in a popup (matching the existing receipt-detail popup) instead of occupying screen space whether or not anyone needs it. A successful find closes the popup and the result appears ticked in the list behind it, same as before. --- .../apply-shares/apply-shares.component.html | 148 ++++++++++++------ .../apply-shares/apply-shares.component.scss | 30 ++++ .../apply-shares/apply-shares.component.ts | 22 +++ .../apply-collection-dialog.component.html | 143 +++++++++++------ .../apply-collection-dialog.component.scss | 30 ++++ .../apply-collection-dialog.component.ts | 22 +++ 6 files changed, 294 insertions(+), 101 deletions(-) diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html index e4b31cf58..45cc66466 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.html @@ -178,61 +178,25 @@
- Select the one receipt that covers this payment, or enter a voucher number to search. Click + Select the one receipt that covers this payment. Click visibility on any row to view full details popup.
- -
-
- - -
- -
- -
- - -
-
-
+ + +@if (voucherSearchOpen) { +
+
+
+
+ search + Search a Voucher +
+ +
+ +
+

+ For a receipt not already listed above — one taken on an earlier day, or a slip the member is holding. +

+ +
+
+ + +
+ +
+ +
+ + +
+
+
+ + @if (voucherError) { +
+ error_outline + {{ voucherError }} +
+ } +
+ +
+ +
+
+
+} diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss index fdb52947f..7e7360995 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.scss @@ -335,6 +335,36 @@ mat-form-field { } } +.voucher-search-toggle-btn { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.82rem; + font-weight: 600; + color: $accent-blue; + border-color: $primary-border; + margin-bottom: 1rem; + + mat-icon { + font-size: 17px; + width: 17px; + height: 17px; + } +} + +.voucher-search-hint { + font-size: 0.8rem; + color: $text-muted; + margin: 0 0 0.85rem; +} + +// The shared .lookup-toolbar normally goes two-column above its own breakpoint of BROWSER width, +// which says nothing about how wide this popup itself is -- at the popup's width, two columns crowd +// the GL Account select against the voucher input. Single column reads better at this popup's width. +.voucher-search-dialog .lookup-toolbar { + grid-template-columns: 1fr; +} + /* Lookup Toolbar */ .lookup-toolbar { display: grid; diff --git a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts index 98e09d124..099c1031f 100644 --- a/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts +++ b/src/app/shares/shares-account-actions/apply-shares/apply-shares.component.ts @@ -100,6 +100,25 @@ export class ApplySharesComponent implements OnInit { lookingUpVoucher = false; voucherError = ''; + /** + * Whether the voucher-search popup is open. + * + * The GL Account / Voucher No lookup is for the exception — a receipt the unattributed list and + * this member's own list do not carry — so it sits behind a button rather than on screen whether + * or not anyone needs it, exactly like the receipt-detail popup already does for the same reason. + */ + voucherSearchOpen = false; + + openVoucherSearch(): void { + this.voucherError = ''; + this.voucherSearchOpen = true; + } + + closeVoucherSearch(): void { + this.voucherSearchOpen = false; + this.voucherError = ''; + } + /** Voucher / Receipt No shown in the "Find Specific Voucher" box. Mirrors whichever receipt is * ticked below (see {@link toggleVoucher}) so a tick is visibly confirmed up there too, and * carries whatever the counter has typed in when they search by hand instead. */ @@ -445,6 +464,9 @@ export class ApplySharesComponent implements OnInit { // Once attached it belongs to this member, so it leaves the unattributed list rather than // sitting there inviting a second, conflicting attachment. this.unattributed = this.unattributed.filter((u) => u.voucherNo !== voucherNo); + // Found it -- the popup has done its job, so it closes rather than sitting open over a + // receipt that now already shows, ticked, in the table behind it. + this.voucherSearchOpen = false; }); } diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html index 12a30dadf..9e35e3841 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.html @@ -80,57 +80,21 @@ } - +
-
- search - Share Receipt Lookup -
- -
-
- - -
- -
- -
- - -
-
-
+
@@ -575,3 +539,82 @@ } + + +@if (voucherSearchOpen) { +
+
+
+
+ search + Search a Voucher +
+ +
+ +
+

+ For a receipt not already listed above — one taken on an earlier day, or a slip the member is holding. +

+ +
+
+ + +
+ +
+ +
+ + +
+
+
+ + @if (errorMsg) { +
+ error_outline + {{ errorMsg }} +
+ } +
+ +
+ +
+
+
+} diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss index 361dd3acc..e0ff13114 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.scss @@ -253,6 +253,36 @@ $danger-border: #fecaca; } } +.voucher-search-toggle-btn { + display: inline-flex; + align-items: center; + gap: 6px; + font-size: 0.82rem; + font-weight: 600; + color: $accent-blue; + border-color: $primary-border; + + mat-icon { + font-size: 17px; + width: 17px; + height: 17px; + } +} + +.voucher-search-hint { + font-size: 0.8rem; + color: $text-muted; + margin: 0 0 0.85rem; +} + +// The shared .lookup-toolbar normally goes two-column above 680px of BROWSER width, which says +// nothing about how wide this popup itself is -- at the popup's own ~36rem, two columns crowd the +// GL Account select against the voucher input. Single column reads better at this popup's width, +// full stop, rather than reintroducing a container query for one dialog. +.voucher-search-dialog .lookup-toolbar { + grid-template-columns: 1fr; +} + /* Lookup Toolbar - Wide Layout */ .lookup-toolbar { display: grid; diff --git a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts index 370bc5708..51298aee5 100644 --- a/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts +++ b/src/app/shares/shares-account-view/apply-collection-dialog/apply-collection-dialog.component.ts @@ -72,6 +72,25 @@ export class ApplyCollectionDialogComponent implements OnInit { voucherNo = ''; lookingUp = false; + /** + * Whether the voucher-search popup is open. + * + * The GL Account / Voucher No lookup is for the exception — a receipt the unattributed list and + * the member's own list do not carry — so it sits behind a button rather than on screen whether or + * not anyone needs it, exactly like the receipt-detail popup already does for the same reason. + */ + voucherSearchOpen = false; + + openVoucherSearch(): void { + this.errorMsg = ''; + this.voucherSearchOpen = true; + } + + closeVoucherSearch(): void { + this.voucherSearchOpen = false; + this.errorMsg = ''; + } + /** GL account the deposit was posted to — required, and always picked by hand. Never resolved * from a share product's accounting setup, so a broken or missing product mapping can never * make a genuine voucher unreachable. */ @@ -427,6 +446,9 @@ export class ApplyCollectionDialogComponent implements OnInit { if (res.gl_code) { this.glAccountNo = res.gl_code; } + // Found it -- the popup has done its job, so it closes rather than sitting open over a + // receipt that now already shows, ticked, in the table behind it. + this.voucherSearchOpen = false; }); }