Chris Chen
58 lines
2.7 KiB
Markdown
58 lines
2.7 KiB
Markdown
# 今日總計 Dialog — Design
|
|
|
|
**Date:** 2026-06-20
|
|
**Component:** `APP/src/app/features/giving/pages/offering-entry-mobile-page`
|
|
**Scope:** Frontend only. No backend or DTO changes (the bootstrap summary already returns every line with `paymentMethod`, `checkNumber`, `amount`).
|
|
|
|
## Goal
|
|
|
|
When the volunteer taps the **今日總額 · Total** tally item on the mobile offering-entry
|
|
page, open a dialog that breaks down today's giving by **payment method** and lists
|
|
**each check's number and amount**.
|
|
|
|
> Note: the original request also mentioned a per-category total block. The user
|
|
> explicitly chose to omit it; this dialog shows payment-method + check breakdowns only.
|
|
|
|
## Trigger
|
|
|
|
Make the `oe__tally-item` wrapping `systemTotal` clickable → `openTotals()`. Add a
|
|
pointer cursor and a small affordance hint so it reads as tappable.
|
|
|
|
## Data
|
|
|
|
On open, refetch `api.bootstrap(today)` and read `summary.lines` — a fresh
|
|
cross-phone snapshot rather than the page-load list (which only stays live for
|
|
`systemTotal` / `lineCount`, not the lines array). Show a "載入中… · Loading" state
|
|
while in flight; on error, show a toast and close.
|
|
|
|
## Compute (client-side, from the refetched lines)
|
|
|
|
- **methodSubtotals** — group lines by `paymentMethod`, sum `amount`. Render in fixed
|
|
order Cash → Check → Zelle → PayPal → Other, skipping methods with no entries.
|
|
Labels from `PAYMENT_METHOD_OPTIONS` (bilingual).
|
|
- **checkLines** — lines where `paymentMethod === 'Check'`: `{ checkNumber, amount }`.
|
|
`checkTotal` = sum of their amounts.
|
|
- **grandTotal** — sum of all refetched line amounts (the snapshot's system total).
|
|
|
|
## Dialog (new `kendo-dialog *ngIf="showTotals"`, styled like quick-add/paper-proof)
|
|
|
|
- Title: **今日總計 · Today's Totals**
|
|
- Loading state: "載入中… · Loading" while the refetch is pending.
|
|
- Section A — **各付款方式 · By method**: rows of `label … amount` (currency pipe).
|
|
- Section B — **各支票 · Checks**: rows of `# checkNumber … amount`, with a **支票合計**
|
|
footer. Empty → "今日無支票 · No checks". Blank number → "(無號碼 · no #)".
|
|
- Footer: **今日總計 · Total** = grandTotal.
|
|
- Close button.
|
|
|
|
## Files touched
|
|
|
|
- `*.component.html` — clickable trigger + new dialog.
|
|
- `*.component.ts` — `showTotals` / `totalsLoading` / `totalsLines` state, `openTotals()`,
|
|
`closeTotals()`, and `methodSubtotals` / `checkLines` / `checkTotal` / `grandTotal` getters.
|
|
- `*.component.scss` — totals list styles (reuse `oe__qa` body).
|
|
|
|
## Testing
|
|
|
|
Manual: enter a mix of cash + check + Zelle lines, tap 今日總額, confirm method
|
|
subtotals and check list match; confirm empty-checks and blank-check-number cases.
|