From caed5091f04030ad42bedf5afad754f6f6bb5212 Mon Sep 17 00:00:00 2001 From: Chris Chen Date: Sat, 30 May 2026 00:15:10 -0700 Subject: [PATCH] Enhance offering session --- .../offering-session-page.component.html | 378 ++++++++++++------ .../offering-session-page.component.scss | 264 ++++++++++-- .../offering-session-page.component.ts | 112 ++++-- .../services/offering-session-api.service.ts | 6 +- 4 files changed, 576 insertions(+), 184 deletions(-) diff --git a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html index 0f14267..3e7f0d4 100644 --- a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html +++ b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.html @@ -1,143 +1,257 @@ -
- -
-
-

Sunday Offering Entry / 主日奉獻錄入

- -
+
+ +
+ River of Life · Offering +

Sunday Offering Entry 主日奉獻錄入

+
-
- Editing - Editing session — make changes and click "Update Session". - -
- -
- An offering session for this date already exists. Pick another date, or reopen the existing session to edit. -
-
- - -
-

Add Giving / 錄入奉獻

-
- - - - - - - - - - -
- - - + + + +
+
+

Start

+ 開始
-
-
- -
-

Lines / 已加入明細

-
No lines yet — add givings above.
- - - {{ l.isAnonymous ? '(Anonymous)' : l.memberName }} - - - - - - - - - +
+ + +
+ + +
+ A session already exists for this date · 此日期已有 session + +
+
+
+
+ + +
+
+

Recent Sessions

+ 最近的奉獻紀錄 +
+ + + + + + {{ s.status }} + + + + + + + + + + + +
No sessions yet — pick a date above to start.
尚無紀錄 — 選擇上方日期開始
 - - -
Lines: {{ buffer.length }} · System total: {{ systemTotal | - currency }}
-
+ + + - -
-

Reconcile & Submit / 對帳

-
- - - + + + +
+ + {{ sessionDate | date:'EEE, MMM d, y' }} + Editing / 編輯中 + +
-
- System total: {{ systemTotal | currency }} - Difference: {{ difference | currency }} - -
-
+ +
+ +
+
+

Add Giving

+ 錄入奉獻 +
- -
-

Recent Sessions

- - - - - {{ - s.status }} - - - - - - - - - - - - -
+
+ + + + + + + + + + +
+ + + +
+
+
+ + +
+
+

Lines

+ 已加入明細 +
+ +
No lines yet — add givings on the left.
尚無明細 — 由左側錄入
+ + + {{ l.isAnonymous ? '(Anonymous)' : l.memberName }} + + + + + + + + + + + + +
Lines: {{ buffer.length }} · System total: {{ systemTotal | currency }}
+
+
+ + +
+
+

Reconcile & Submit

+ 對帳 +
+ +
+ + + +
+ +
+ System total: {{ systemTotal | currency }} + Difference: {{ difference | currency }} + + +
+
+ + + + + +
+ + {{ v.sessionDate }} + {{ v.status }} + + +
+ + +
+
+ System Total · 系統合計 + {{ v.systemTotal | currency }} +
+
+ Cash · 現金 + {{ v.cashTotal | currency }} +
+
+ Check · 支票 + {{ v.checkTotal | currency }} +
+
+ Difference · 差額 + {{ v.difference | currency }} +
+
+ + +
+
+

Lines

+ 奉獻明細 +
+ + + {{ l.isAnonymous ? '(Anonymous)' : l.memberName }} + + + + + + +
+ + +
+
+

Notes

+ 備註 +
+

{{ v.notes }}

+
+ + + + +

+ Editing a submitted session will reopen it and set its status back to Draft until you submit again. +
編輯已送出的 session 會重新開啟並將狀態改回草稿，直到再次送出。 +

+ + + + + -
\ No newline at end of file + diff --git a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.scss b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.scss index 180b1ce..d7551e8 100644 --- a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.scss +++ b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.scss @@ -1,32 +1,246 @@ -.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; } - -.card { - background: #fff; - border: 1px solid #e5e7eb; - border-radius: 8px; - padding: 1rem 1.25rem; - margin-bottom: 1rem; +:host { + --ink: #1c2a38; + --ink-soft: #50647c; + --line: rgba(23, 65, 99, 0.1); + --card-bg: #ffffff; + --ok: #0c8d42; + --bad: #d8443c; + --radius: 18px; + --shadow: 0 1px 2px rgba(16, 38, 58, 0.04), 0 12px 32px -16px rgba(16, 38, 58, 0.22); + display: block; } -.section-title { font-size: 1rem; font-weight: 600; margin: 0 0 0.75rem; } -.warn { background: #fff3cd; padding: 0.5rem 1rem; border-radius: 4px; margin-bottom: 1rem; } -.anon-chip { padding: 0.25rem 0.5rem; background: #eee; border-radius: 4px; } -.edit-banner { display: flex; align-items: center; gap: 1rem; background: #fff3cd; border-left: 4px solid #f0a500; padding: 0.5rem 1rem; border-radius: 4px; margin-bottom: 1rem; font-weight: 500; } +/* ---------- Page shell ---------- */ +.off { + padding: 28px clamp(16px, 3vw, 36px) 48px; + color: var(--ink); + background: + radial-gradient(120% 80% at 100% -10%, rgba(2, 121, 207, 0.08), transparent 55%), + radial-gradient(90% 70% at -10% 0%, rgba(22, 212, 203, 0.07), transparent 50%), + #f2f4f7; + min-height: 100%; +} -.ok { color: green; font-weight: 600; } -.bad { color: #c00; font-weight: 600; } +.off__head { margin-bottom: 22px; } -.empty { color: #6b7280; padding: 1rem 0; } -.lines-footer { margin-top: 0.5rem; color: #374151; font-weight: 500; } - -.badge { +.off__eyebrow { display: inline-block; - padding: 0.125rem 0.5rem; - border-radius: 9999px; - font-size: 0.75rem; + font-size: 11px; font-weight: 600; - line-height: 1.4; + letter-spacing: 0.16em; + text-transform: uppercase; + color: var(--kendo-color-primary, #0279cf); + margin-bottom: 6px; +} + +.off__title { + font-size: clamp(26px, 3.2vw, 36px); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.1; + margin: 0; + + span { + font-weight: 400; + color: var(--ink-soft); + margin-left: 8px; + font-size: 0.62em; + } +} + +/* ---------- Card ---------- */ +.card { + background: var(--card-bg); + border: 1px solid var(--line); + border-radius: var(--radius); + box-shadow: var(--shadow); + padding: 18px 18px 16px; + margin-bottom: 18px; + display: flex; + flex-direction: column; +} + +.card__head { + display: flex; + align-items: baseline; + gap: 8px; + margin-bottom: 12px; +} + +.card__title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin: 0; } +.card__zh { font-size: 12px; color: var(--ink-soft); } + +/* The two-column workspace cards sit in a CSS grid wrapper — drop their own margin. */ +.grid > .card { margin-bottom: 0; } + +/* ---------- Start card ---------- */ +.start { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 18px; +} + +.start__label { + font-size: 12px; + font-weight: 600; + color: var(--ink-soft); +} + +.start__action { display: flex; align-items: flex-end; } + +.start__exists { display: flex; flex-direction: column; gap: 8px; } + +.start__note { + font-size: 12.5px; + font-weight: 600; + color: #92400e; + background: #fef3c7; + padding: 6px 12px; + border-radius: 999px; +} + +/* ---------- Session bar ---------- */ +.bar { + display: flex; + align-items: center; + gap: 12px; + flex-wrap: wrap; + padding: 8px 12px; + margin-bottom: 18px; + border-radius: 14px; + background: rgba(255, 255, 255, 0.7); + border: 1px solid var(--line); + backdrop-filter: blur(6px); +} + +.bar__date { font-weight: 700; letter-spacing: -0.01em; } +.bar__spacer { flex: 1; } + +/* ---------- Status pills ---------- */ +.pill { + display: inline-block; + font-size: 11px; + font-weight: 700; + padding: 3px 11px; + border-radius: 999px; + letter-spacing: 0.02em; + text-transform: uppercase; +} +.pill--draft { background: #fef3c7; color: #92400e; } +.pill--submitted { background: #d9fce8; color: var(--ok); } +.pill--reconciled { background: #e2e8f0; color: #334155; } + +/* ---------- View summary tiles ---------- */ +.stats { + display: grid; + gap: 14px; + grid-template-columns: repeat(2, 1fr); + margin-bottom: 18px; +} + +.stat { + padding: 16px 18px; + border-radius: var(--radius); + background: var(--card-bg); + border: 1px solid var(--line); + box-shadow: var(--shadow); + display: flex; + flex-direction: column; + gap: 6px; +} + +.stat__label { + font-size: 11.5px; + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--ink-soft); +} + +.stat__value { + font-size: clamp(20px, 2.4vw, 26px); + font-weight: 700; + letter-spacing: -0.02em; + font-variant-numeric: tabular-nums; +} + +/* ---------- Reconcile bar ---------- */ +.reconcile-bar { + display: flex; + align-items: center; + gap: 18px; + flex-wrap: wrap; + margin-top: 16px; + font-variant-numeric: tabular-nums; +} + +.ok { color: var(--ok); font-weight: 700; } +.bad { color: var(--bad); font-weight: 700; } + +/* ---------- Footers / misc ---------- */ +.lines-footer { margin-top: 10px; color: var(--ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; } +.anon-chip { padding: 0.25rem 0.6rem; background: var(--kendo-color-base-subtle, #e6eaef); border-radius: 999px; font-size: 12px; font-weight: 600; } +.notes-text { margin: 0; color: var(--ink); line-height: 1.5; white-space: pre-wrap; } +.dialog-text { margin: 0; line-height: 1.55; span { color: var(--ink-soft); font-size: 13px; } } + +.empty { + padding: 28px 0; + text-align: center; + font-size: 13px; + font-weight: 600; + color: var(--ink-soft); + + span { font-weight: 400; font-size: 12px; } +} + +/* ---------- Borderless grid (mirrors the dashboard `.detail` look) ---------- */ +.lined { + border: none; + background: transparent; + font-family: inherit; + font-size: 13px; +} + +:host ::ng-deep .lined { + .k-grid-header, .k-grid-header-wrap { border: none; background: transparent; } + .k-table-th { + border: none; + background: transparent; + color: var(--ink-soft); + font-size: 11px; + font-weight: 700; + letter-spacing: 0.05em; + text-transform: uppercase; + padding-block: 8px; + } + .k-grid-content { background: transparent; } + td.k-table-td { + border: none; + border-top: 1px solid var(--line); + padding-block: 9px; + vertical-align: middle; + } + .k-table-row:hover td.k-table-td { background: var(--kendo-color-primary-subtle, #daecfb); } +} + +/* ---------- Responsive ---------- */ +@media (min-width: 760px) { + .stats { grid-template-columns: repeat(4, 1fr); } +} + +/* ---------- Entrance ---------- */ +.rise { + opacity: 0; + transform: translateY(14px); + animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; + animation-delay: var(--d, 0ms); +} + +@keyframes rise { + to { opacity: 1; transform: translateY(0); } +} + +@media (prefers-reduced-motion: reduce) { + .rise { animation: none; opacity: 1; transform: none; } } -.badge--draft { background: #fef3c7; color: #92400e; } -.badge--submitted { background: #dcfce7; color: #166534; } -.badge--reconciled { background: #e2e8f0; color: #334155; } diff --git a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.ts b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.ts index 80ddc54..7c04f06 100644 --- a/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.ts +++ b/APP/src/app/features/giving/pages/offering-session-page/offering-session-page.component.ts @@ -7,6 +7,7 @@ import { InputsModule } from '@progress/kendo-angular-inputs'; import { ButtonsModule } from '@progress/kendo-angular-buttons'; import { DropDownsModule } from '@progress/kendo-angular-dropdowns'; import { DateInputsModule } from '@progress/kendo-angular-dateinputs'; +import { DialogsModule } from '@progress/kendo-angular-dialog'; import { OfferingSessionApiService } from '../../services/offering-session-api.service'; import { GivingCategoryApiService } from '../../services/giving-category-api.service'; import { MemberApiService } from '../../../members/services/member-api.service'; @@ -20,17 +21,21 @@ import { PAYMENT_METHOD_OPTIONS } from '../../../../shared/i18n/option-lists'; interface MemberOption { id: number; displayName: string; } +type PageMode = 'landing' | 'workspace' | 'view'; + @Component({ selector: 'app-offering-session-page', standalone: true, imports: [ CommonModule, FormsModule, GridModule, InputsModule, ButtonsModule, - DropDownsModule, DateInputsModule, MemberQuickAddDialogComponent, + DropDownsModule, DateInputsModule, DialogsModule, MemberQuickAddDialogComponent, ], templateUrl: './offering-session-page.component.html', styleUrls: ['./offering-session-page.component.scss'], }) export class OfferingSessionPageComponent implements OnInit { + mode: PageMode = 'landing'; + sessionDate: Date = new Date(); dateConflict = false; categories: GivingCategoryDto[] = []; @@ -54,6 +59,10 @@ export class OfferingSessionPageComponent implements OnInit { sessions: OfferingSessionListItemDto[] = []; editingSessionId: number | null = null; + // Read-only session shown in `view` mode, and the confirm dialog for reopening it. + viewSession: OfferingSessionDto | null = null; + confirmReopenOpen = false; + constructor( private api: OfferingSessionApiService, private categoryApi: GivingCategoryApiService, @@ -80,23 +89,77 @@ export class OfferingSessionPageComponent implements OnInit { this.api.getPaged(1, 20).subscribe(r => this.sessions = r.items); } - reopenAndEdit(s: OfferingSessionListItemDto): void { - if (s.status !== 'Submitted') return; - this.api.reopen(s.id).subscribe({ - next: () => this.api.getById(s.id).subscribe(dto => this.loadIntoBuffer(dto)), - error: (err: { error?: { message?: string } }) => alert(err?.error?.message ?? 'Reopen failed.'), + // ── Flow: landing → workspace / view ────────────────────────────────────── + + /** Free date chosen on the landing screen — begin a brand-new session. */ + startEntry(): void { + if (this.dateConflict) return; + this.editingSessionId = null; + this.editingIndex = null; + this.viewSession = null; + this.buffer = []; + this.cashTotal = 0; this.checkTotal = 0; this.notes = null; + this.resetEntry(); + this.mode = 'workspace'; + } + + /** Existing date chosen on the landing screen — resolve it to its session and view it. */ + openViewByDate(): void { + const iso = this.toIso(this.sessionDate); + this.api.getPaged(1, 1, iso, iso).subscribe({ + next: r => { + const item = r.items[0]; + if (!item) { this.checkDate(); return; } // race: it vanished, refresh the flag + this.openView(item); + }, + error: (err: { error?: { message?: string } }) => alert(err?.error?.message ?? 'Load failed.'), }); } - // Already a Draft (e.g. a session reopened then left) — load it straight back in, no reopen. - continueEditDraft(s: OfferingSessionListItemDto): void { - if (s.status !== 'Draft') return; + /** Open a session read-only (from a Recent Sessions row or a resolved date). */ + openView(s: OfferingSessionListItemDto): void { this.api.getById(s.id).subscribe({ - next: dto => this.loadIntoBuffer(dto), + next: dto => { this.viewSession = dto; this.mode = 'view'; }, error: (err: { error?: { message?: string } }) => alert(err?.error?.message ?? 'Load failed.'), }); } + /** Edit button on the read-only view. Draft edits directly; Submitted confirms a reopen first. */ + editFromView(): void { + const dto = this.viewSession; + if (!dto) return; + if (dto.status === 'Draft') { + this.loadIntoBuffer(dto); + this.mode = 'workspace'; + } else if (dto.status === 'Submitted') { + this.confirmReopenOpen = true; + } + } + + /** Confirmed reopen of a Submitted session (status → Draft) then load it for editing. */ + confirmReopen(): void { + const dto = this.viewSession; + if (!dto) { this.confirmReopenOpen = false; return; } + this.api.reopen(dto.id).subscribe({ + next: () => this.api.getById(dto.id).subscribe(fresh => { + this.loadIntoBuffer(fresh); + this.confirmReopenOpen = false; + this.mode = 'workspace'; + }), + error: (err: { error?: { message?: string } }) => { + this.confirmReopenOpen = false; + alert(err?.error?.message ?? 'Reopen failed.'); + }, + }); + } + + /** Leave workspace/view and return to the date-first landing screen. */ + backToLanding(): void { + this.resetSession(); + this.mode = 'landing'; + this.loadSessions(); + } + private loadIntoBuffer(dto: OfferingSessionDto): void { this.editingSessionId = dto.id; this.sessionDate = new Date(dto.sessionDate + 'T00:00:00'); @@ -114,16 +177,6 @@ export class OfferingSessionPageComponent implements OnInit { this.resetEntry(); } - cancelEdit(): void { - this.editingSessionId = null; - this.editingIndex = null; - this.buffer = []; this.cashTotal = 0; this.checkTotal = 0; this.notes = null; - this.sessionDate = new Date(); - this.checkDate(); - // The reopened session is now a server-side Draft — refresh so its "Continue editing" appears. - this.loadSessions(); - } - onMemberFilter(term: string): void { if (!term) { this.memberResults = []; return; } this.memberApi.getPaged({ search: term, pageSize: 10 }).subscribe(r => @@ -208,11 +261,8 @@ export class OfferingSessionPageComponent implements OnInit { next: () => { this.submitting = false; alert(this.editingSessionId != null ? 'Offering session updated.' : 'Offering session submitted.'); - this.editingSessionId = null; - this.editingIndex = null; - this.buffer = []; this.cashTotal = 0; this.checkTotal = 0; this.notes = null; - this.sessionDate = new Date(); - this.checkDate(); + this.resetSession(); + this.mode = 'landing'; this.loadSessions(); }, error: (err: { error?: { message?: string } }) => { @@ -222,6 +272,18 @@ export class OfferingSessionPageComponent implements OnInit { }); } + /** Clear the whole working session back to a fresh state (today, empty buffer). */ + private resetSession(): void { + this.editingSessionId = null; + this.editingIndex = null; + this.viewSession = null; + this.buffer = []; + this.cashTotal = 0; this.checkTotal = 0; this.notes = null; + this.sessionDate = new Date(); + this.resetEntry(); + this.checkDate(); + } + private resetEntry(): void { this.editingIndex = null; this.selectedMemberId = null; this.selectedMemberName = null; this.memberResults = []; diff --git a/APP/src/app/features/giving/services/offering-session-api.service.ts b/APP/src/app/features/giving/services/offering-session-api.service.ts index 8b54a80..2292b8e 100644 --- a/APP/src/app/features/giving/services/offering-session-api.service.ts +++ b/APP/src/app/features/giving/services/offering-session-api.service.ts @@ -14,8 +14,10 @@ export class OfferingSessionApiService { this.endpoint = apiConfig.getApiUrl('offering-sessions'); } - getPaged(page = 1, pageSize = 20): Observable> { - const params = new HttpParams().set('page', page).set('pageSize', pageSize); + getPaged(page = 1, pageSize = 20, from?: string, to?: string): Observable> { + let params = new HttpParams().set('page', page).set('pageSize', pageSize); + if (from) params = params.set('from', from); + if (to) params = params.set('to', to); return this.http.get>(this.endpoint, { params }); } getById(id: number): Observable {