Enhance offering session
This commit is contained in:
Chris Chen
+246
-132
@@ -1,143 +1,257 @@
|
||||
<div class="page">
|
||||
<!-- Card A — Session header -->
|
||||
<section class="card">
|
||||
<header class="page-header">
|
||||
<h2 style="margin:0">Sunday Offering Entry / 主日奉獻錄入</h2>
|
||||
<label class="flex flex-col gap-1">Date
|
||||
<kendo-datepicker [(ngModel)]="sessionDate" (valueChange)="checkDate()"
|
||||
[disabled]="editingSessionId != null"></kendo-datepicker>
|
||||
</label>
|
||||
</header>
|
||||
<div class="off">
|
||||
<!-- Header (always) -->
|
||||
<header class="off__head">
|
||||
<span class="off__eyebrow">River of Life · Offering</span>
|
||||
<h1 class="off__title">Sunday Offering Entry <span>主日奉獻錄入</span></h1>
|
||||
</header>
|
||||
|
||||
<div *ngIf="editingSessionId != null" class="edit-banner">
|
||||
<span class="badge badge--draft">Editing</span>
|
||||
Editing session — make changes and click "Update Session".
|
||||
<button kendoButton fillMode="flat" (click)="cancelEdit()">Cancel edit</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="dateConflict && editingSessionId == null" class="warn">
|
||||
An offering session for this date already exists. Pick another date, or reopen the existing session to edit.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Card B — Add giving -->
|
||||
<section class="card">
|
||||
<h3 class="section-title">Add Giving / 錄入奉獻</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Giver
|
||||
<kendo-dropdownlist *ngIf="!entry.isAnonymous" [data]="memberResults" textField="displayName" valueField="id"
|
||||
[valuePrimitive]="true" [filterable]="true" (filterChange)="onMemberFilter($event)"
|
||||
[(ngModel)]="selectedMemberId" (valueChange)="onMemberSelected($event)"
|
||||
placeholder="Search by name"></kendo-dropdownlist>
|
||||
<span *ngIf="entry.isAnonymous" class="flex items-center gap-2">
|
||||
<span class="anon-chip">Anonymous</span>
|
||||
<button kendoButton fillMode="flat" size="small" (click)="clearAnonymous()">Clear</button>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1">Type
|
||||
<kendo-dropdownlist [data]="categories" textField="label" valueField="id" [valuePrimitive]="true"
|
||||
[(ngModel)]="entry.givingCategoryId"></kendo-dropdownlist>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Method
|
||||
<kendo-dropdownlist [data]="paymentMethods" textField="label" valueField="value" [valuePrimitive]="true"
|
||||
[(ngModel)]="entry.paymentMethod"></kendo-dropdownlist>
|
||||
</label>
|
||||
|
||||
<label *ngIf="entry.paymentMethod === 'Check'" class="flex flex-col gap-1">Check #
|
||||
<kendo-textbox [(ngModel)]="entry.checkNumber"></kendo-textbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Amount
|
||||
<kendo-numerictextbox [(ngModel)]="entry.amount" [min]="0" [format]="'c2'"
|
||||
(keydown.enter)="addLine()"></kendo-numerictextbox>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Notes
|
||||
<kendo-textbox [(ngModel)]="entry.notes" (keydown.enter)="addLine()"></kendo-textbox>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap gap-2 md:col-span-2">
|
||||
<button kendoButton (click)="markAnonymous()">Anonymous</button>
|
||||
<button kendoButton (click)="showQuickAdd = true">+ Quick add member</button>
|
||||
<button kendoButton themeColor="primary" (click)="addLine()">{{ editingIndex !== null ? 'Update line' : '+ Add
|
||||
(Enter)' }}</button>
|
||||
<!-- ============================ LANDING ============================ -->
|
||||
<ng-container *ngIf="mode === 'landing'">
|
||||
<!-- Start card -->
|
||||
<section class="card rise" style="--d: 0ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Start</h2>
|
||||
<span class="card__zh">開始</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Card C — Lines -->
|
||||
<section class="card">
|
||||
<h3 class="section-title">Lines / 已加入明細</h3>
|
||||
<div *ngIf="buffer.length === 0" class="empty">No lines yet — add givings above.</div>
|
||||
<kendo-grid *ngIf="buffer.length > 0" [data]="buffer">
|
||||
<kendo-grid-column title="Giver">
|
||||
<ng-template kendoGridCellTemplate let-l>{{ l.isAnonymous ? '(Anonymous)' : l.memberName }}</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="categoryName" title="Type"></kendo-grid-column>
|
||||
<kendo-grid-column field="paymentMethod" title="Method" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="checkNumber" title="Check #" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column title="" [width]="120">
|
||||
<ng-template kendoGridCellTemplate let-l let-i="rowIndex">
|
||||
<button kendoButton fillMode="flat" (click)="editLine(i)">Edit</button>
|
||||
<button kendoButton fillMode="flat" (click)="removeLine(i)">×</button>
|
||||
<div class="start">
|
||||
<label class="flex flex-col gap-1">
|
||||
<span class="start__label">Session date · 奉獻日期</span>
|
||||
<kendo-datepicker [(ngModel)]="sessionDate" (valueChange)="checkDate()"></kendo-datepicker>
|
||||
</label>
|
||||
|
||||
<div class="start__action">
|
||||
<button *ngIf="!dateConflict" kendoButton themeColor="primary" size="large" (click)="startEntry()">
|
||||
Start entry / 開始錄入
|
||||
</button>
|
||||
|
||||
<div *ngIf="dateConflict" class="start__exists">
|
||||
<span class="start__note">A session already exists for this date · 此日期已有 session</span>
|
||||
<button kendoButton themeColor="primary" size="large" (click)="openViewByDate()">
|
||||
View session / 檢視
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Recent sessions -->
|
||||
<section class="card rise" style="--d: 80ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Recent Sessions</h2>
|
||||
<span class="card__zh">最近的奉獻紀錄</span>
|
||||
</div>
|
||||
|
||||
<kendo-grid class="lined" [data]="sessions">
|
||||
<kendo-grid-column field="sessionDate" title="Date" [width]="120"></kendo-grid-column>
|
||||
<kendo-grid-column title="Status" [width]="130">
|
||||
<ng-template kendoGridCellTemplate let-s>
|
||||
<span class="pill" [ngClass]="'pill--' + s.status.toLowerCase()">{{ s.status }}</span>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="lineCount" title="Lines" [width]="80"></kendo-grid-column>
|
||||
<kendo-grid-column field="systemTotal" title="System" [width]="120" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column field="difference" title="Diff" [width]="110" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column title="" [width]="110">
|
||||
<ng-template kendoGridCellTemplate let-s>
|
||||
<button kendoButton fillMode="flat" themeColor="primary" (click)="openView(s)">View</button>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
<ng-template kendoGridNoRecordsTemplate>
|
||||
<div class="empty">No sessions yet — pick a date above to start.<br><span>尚無紀錄 — 選擇上方日期開始</span></div>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
</kendo-grid>
|
||||
<div *ngIf="buffer.length > 0" class="lines-footer">Lines: {{ buffer.length }} · System total: {{ systemTotal |
|
||||
currency }}</div>
|
||||
</section>
|
||||
</kendo-grid>
|
||||
</section>
|
||||
</ng-container>
|
||||
|
||||
<!-- Card D — Reconcile & submit -->
|
||||
<section class="card">
|
||||
<h3 class="section-title">Reconcile & Submit / 對帳</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
|
||||
<label class="flex flex-col gap-1">Cash counted
|
||||
<kendo-numerictextbox [(ngModel)]="cashTotal" [min]="0" [format]="'c2'"></kendo-numerictextbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Check counted
|
||||
<kendo-numerictextbox [(ngModel)]="checkTotal" [min]="0" [format]="'c2'"></kendo-numerictextbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Session notes
|
||||
<kendo-textarea [(ngModel)]="notes" [rows]="2"></kendo-textarea>
|
||||
</label>
|
||||
<!-- ============================ WORKSPACE (new entry & edit) ============================ -->
|
||||
<ng-container *ngIf="mode === 'workspace'">
|
||||
<!-- Session bar -->
|
||||
<div class="bar rise" style="--d: 0ms">
|
||||
<button kendoButton fillMode="flat" (click)="backToLanding()">← Back / 返回</button>
|
||||
<span class="bar__date">{{ sessionDate | date:'EEE, MMM d, y' }}</span>
|
||||
<span *ngIf="editingSessionId != null" class="pill pill--draft">Editing / 編輯中</span>
|
||||
<span class="bar__spacer"></span>
|
||||
<button *ngIf="editingSessionId != null" kendoButton fillMode="flat" (click)="backToLanding()">Cancel / 取消</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-4 mt-4">
|
||||
<span>System total: {{ systemTotal | currency }}</span>
|
||||
<span [class.ok]="difference === 0" [class.bad]="difference !== 0">Difference: {{ difference | currency }}</span>
|
||||
<button kendoButton themeColor="primary"
|
||||
[disabled]="buffer.length === 0 || (editingSessionId == null && dateConflict) || submitting"
|
||||
(click)="submit()">{{ editingSessionId != null ? 'Update Session' : 'Submit' }}</button>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Two-column working area -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<!-- Add giving -->
|
||||
<section class="card rise" style="--d: 80ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Add Giving</h2>
|
||||
<span class="card__zh">錄入奉獻</span>
|
||||
</div>
|
||||
|
||||
<!-- Card E — Recent sessions -->
|
||||
<section class="card">
|
||||
<h3 class="section-title">Recent Sessions</h3>
|
||||
<kendo-grid [data]="sessions">
|
||||
<kendo-grid-column field="sessionDate" title="Date" [width]="120"></kendo-grid-column>
|
||||
<kendo-grid-column title="Status" [width]="120">
|
||||
<ng-template kendoGridCellTemplate let-s>
|
||||
<span class="badge" [class.badge--draft]="s.status === 'Draft'"
|
||||
[class.badge--submitted]="s.status === 'Submitted'" [class.badge--reconciled]="s.status === 'Reconciled'">{{
|
||||
s.status }}</span>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="lineCount" title="Lines" [width]="80"></kendo-grid-column>
|
||||
<kendo-grid-column field="systemTotal" title="System" [width]="110" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column field="difference" title="Diff" [width]="100" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column title="" [width]="150">
|
||||
<ng-template kendoGridCellTemplate let-s>
|
||||
<button kendoButton fillMode="flat" *ngIf="s.status === 'Submitted'" (click)="reopenAndEdit(s)">Reopen &
|
||||
Edit</button>
|
||||
<button kendoButton fillMode="flat" *ngIf="s.status === 'Draft'" (click)="continueEditDraft(s)">Continue
|
||||
editing</button>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
</kendo-grid>
|
||||
</section>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Giver
|
||||
<kendo-dropdownlist *ngIf="!entry.isAnonymous" [data]="memberResults" textField="displayName" valueField="id"
|
||||
[valuePrimitive]="true" [filterable]="true" (filterChange)="onMemberFilter($event)"
|
||||
[(ngModel)]="selectedMemberId" (valueChange)="onMemberSelected($event)"
|
||||
placeholder="Search by name"></kendo-dropdownlist>
|
||||
<span *ngIf="entry.isAnonymous" class="flex items-center gap-2">
|
||||
<span class="anon-chip">Anonymous · 匿名</span>
|
||||
<button kendoButton fillMode="flat" size="small" (click)="clearAnonymous()">Clear</button>
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1">Type
|
||||
<kendo-dropdownlist [data]="categories" textField="label" valueField="id" [valuePrimitive]="true"
|
||||
[(ngModel)]="entry.givingCategoryId"></kendo-dropdownlist>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Method
|
||||
<kendo-dropdownlist [data]="paymentMethods" textField="label" valueField="value" [valuePrimitive]="true"
|
||||
[(ngModel)]="entry.paymentMethod"></kendo-dropdownlist>
|
||||
</label>
|
||||
|
||||
<label *ngIf="entry.paymentMethod === 'Check'" class="flex flex-col gap-1">Check #
|
||||
<kendo-textbox [(ngModel)]="entry.checkNumber"></kendo-textbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Amount
|
||||
<kendo-numerictextbox [(ngModel)]="entry.amount" [min]="0" [format]="'c2'"
|
||||
(keydown.enter)="addLine()"></kendo-numerictextbox>
|
||||
</label>
|
||||
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Notes
|
||||
<kendo-textbox [(ngModel)]="entry.notes" (keydown.enter)="addLine()"></kendo-textbox>
|
||||
</label>
|
||||
|
||||
<div class="flex flex-wrap gap-2 md:col-span-2">
|
||||
<button kendoButton (click)="markAnonymous()">Anonymous</button>
|
||||
<button kendoButton (click)="showQuickAdd = true">+ Quick add member</button>
|
||||
<button kendoButton themeColor="primary" (click)="addLine()">{{ editingIndex !== null ? 'Update line' : '+ Add (Enter)' }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lines -->
|
||||
<section class="card rise" style="--d: 160ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Lines</h2>
|
||||
<span class="card__zh">已加入明細</span>
|
||||
</div>
|
||||
|
||||
<div *ngIf="buffer.length === 0" class="empty">No lines yet — add givings on the left.<br><span>尚無明細 — 由左側錄入</span></div>
|
||||
<kendo-grid class="lined" *ngIf="buffer.length > 0" [data]="buffer">
|
||||
<kendo-grid-column title="Giver">
|
||||
<ng-template kendoGridCellTemplate let-l>{{ l.isAnonymous ? '(Anonymous)' : l.memberName }}</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="categoryName" title="Type"></kendo-grid-column>
|
||||
<kendo-grid-column field="paymentMethod" title="Method" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="checkNumber" title="Check #" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
|
||||
<kendo-grid-column title="" [width]="110">
|
||||
<ng-template kendoGridCellTemplate let-l let-i="rowIndex">
|
||||
<button kendoButton fillMode="flat" (click)="editLine(i)">Edit</button>
|
||||
<button kendoButton fillMode="flat" (click)="removeLine(i)">×</button>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
</kendo-grid>
|
||||
<div *ngIf="buffer.length > 0" class="lines-footer">Lines: {{ buffer.length }} · System total: {{ systemTotal | currency }}</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Reconcile & submit -->
|
||||
<section class="card rise" style="--d: 240ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Reconcile & Submit</h2>
|
||||
<span class="card__zh">對帳</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
|
||||
<label class="flex flex-col gap-1">Cash counted
|
||||
<kendo-numerictextbox [(ngModel)]="cashTotal" [min]="0" [format]="'c2'"></kendo-numerictextbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1">Check counted
|
||||
<kendo-numerictextbox [(ngModel)]="checkTotal" [min]="0" [format]="'c2'"></kendo-numerictextbox>
|
||||
</label>
|
||||
<label class="flex flex-col gap-1 md:col-span-2">Session notes
|
||||
<kendo-textarea [(ngModel)]="notes" [rows]="2"></kendo-textarea>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="reconcile-bar">
|
||||
<span>System total: <strong>{{ systemTotal | currency }}</strong></span>
|
||||
<span [class.ok]="difference === 0" [class.bad]="difference !== 0">Difference: {{ difference | currency }}</span>
|
||||
<span class="bar__spacer"></span>
|
||||
<button kendoButton themeColor="primary" size="large"
|
||||
[disabled]="buffer.length === 0 || (editingSessionId == null && dateConflict) || submitting"
|
||||
(click)="submit()">{{ editingSessionId != null ? 'Update Session' : 'Submit' }}</button>
|
||||
</div>
|
||||
</section>
|
||||
</ng-container>
|
||||
|
||||
<!-- ============================ VIEW (read-only) ============================ -->
|
||||
<ng-container *ngIf="mode === 'view' && viewSession as v">
|
||||
<!-- Session bar -->
|
||||
<div class="bar rise" style="--d: 0ms">
|
||||
<button kendoButton fillMode="flat" (click)="backToLanding()">← Back / 返回</button>
|
||||
<span class="bar__date">{{ v.sessionDate }}</span>
|
||||
<span class="pill" [ngClass]="'pill--' + v.status.toLowerCase()">{{ v.status }}</span>
|
||||
<span class="bar__spacer"></span>
|
||||
<button *ngIf="v.status !== 'Reconciled'" kendoButton themeColor="primary" (click)="editFromView()">Edit / 修改</button>
|
||||
</div>
|
||||
|
||||
<!-- Summary tiles -->
|
||||
<section class="stats rise" style="--d: 80ms">
|
||||
<div class="stat">
|
||||
<span class="stat__label">System Total · 系統合計</span>
|
||||
<span class="stat__value">{{ v.systemTotal | currency }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat__label">Cash · 現金</span>
|
||||
<span class="stat__value">{{ v.cashTotal | currency }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat__label">Check · 支票</span>
|
||||
<span class="stat__value">{{ v.checkTotal | currency }}</span>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<span class="stat__label">Difference · 差額</span>
|
||||
<span class="stat__value" [class.ok]="v.difference === 0" [class.bad]="v.difference !== 0">{{ v.difference | currency }}</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Lines (read-only) -->
|
||||
<section class="card rise" style="--d: 160ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Lines</h2>
|
||||
<span class="card__zh">奉獻明細</span>
|
||||
</div>
|
||||
<kendo-grid class="lined" [data]="v.givings">
|
||||
<kendo-grid-column title="Giver">
|
||||
<ng-template kendoGridCellTemplate let-l>{{ l.isAnonymous ? '(Anonymous)' : l.memberName }}</ng-template>
|
||||
</kendo-grid-column>
|
||||
<kendo-grid-column field="categoryName" title="Type"></kendo-grid-column>
|
||||
<kendo-grid-column field="paymentMethod" title="Method" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="checkNumber" title="Check #" [width]="90"></kendo-grid-column>
|
||||
<kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
|
||||
</kendo-grid>
|
||||
</section>
|
||||
|
||||
<!-- Session notes -->
|
||||
<section *ngIf="v.notes" class="card rise" style="--d: 240ms">
|
||||
<div class="card__head">
|
||||
<h2 class="card__title">Notes</h2>
|
||||
<span class="card__zh">備註</span>
|
||||
</div>
|
||||
<p class="notes-text">{{ v.notes }}</p>
|
||||
</section>
|
||||
</ng-container>
|
||||
|
||||
<!-- Reopen confirm dialog -->
|
||||
<kendo-dialog *ngIf="confirmReopenOpen" title="Reopen session? / 重新開啟" (close)="confirmReopenOpen = false" [width]="440">
|
||||
<p class="dialog-text">
|
||||
Editing a submitted session will reopen it and set its status back to <strong>Draft</strong> until you submit again.
|
||||
<br><span>編輯已送出的 session 會重新開啟並將狀態改回草稿，直到再次送出。</span>
|
||||
</p>
|
||||
<kendo-dialog-actions>
|
||||
<button kendoButton (click)="confirmReopenOpen = false">Cancel / 取消</button>
|
||||
<button kendoButton themeColor="primary" (click)="confirmReopen()">Reopen & Edit / 確認</button>
|
||||
</kendo-dialog-actions>
|
||||
</kendo-dialog>
|
||||
|
||||
<app-member-quick-add-dialog *ngIf="showQuickAdd" (created)="onMemberQuickCreated($event)"
|
||||
(cancelled)="showQuickAdd = false"></app-member-quick-add-dialog>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+239
-25
@@ -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; }
|
||||
|
||||
+87
-25
@@ -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 = [];
|
||||
|
||||
Reference in New Issue
Block a user