Chris Chen
87 lines
4.2 KiB
HTML
87 lines
4.2 KiB
HTML
<div class="page">
|
|
<header class="page-header">
|
|
<h2>Givings / 單筆奉獻</h2>
|
|
<button kendoButton themeColor="primary" (click)="openAdd()">+ Add Giving</button>
|
|
</header>
|
|
|
|
<div class="filters">
|
|
<kendo-textbox placeholder="Search name / check # / notes" [(ngModel)]="search" (keydown.enter)="onSearch()"></kendo-textbox>
|
|
<kendo-dropdownlist [data]="categories" textField="label" valueField="id"
|
|
[valuePrimitive]="true" [(ngModel)]="filterCategoryId" (valueChange)="onSearch()"
|
|
[defaultItem]="{ id: null, label: 'All types/全部類型' }"></kendo-dropdownlist>
|
|
<button kendoButton (click)="onSearch()">Search</button>
|
|
</div>
|
|
|
|
<kendo-grid [data]="gridData" [loading]="isLoading"
|
|
[pageable]="true" [skip]="(page-1)*pageSize" [pageSize]="pageSize"
|
|
(pageChange)="onPageChange($event)">
|
|
<kendo-grid-column field="givingDate" title="Date" [width]="110"></kendo-grid-column>
|
|
<kendo-grid-column title="Giver">
|
|
<ng-template kendoGridCellTemplate let-g>{{ g.isAnonymous ? '(Anonymous)' : g.memberName }}</ng-template>
|
|
</kendo-grid-column>
|
|
<kendo-grid-column field="categoryName" title="Type"></kendo-grid-column>
|
|
<kendo-grid-column field="amount" title="Amount" [width]="110" format="c2"></kendo-grid-column>
|
|
<kendo-grid-column field="paymentMethod" title="Method" [width]="100"></kendo-grid-column>
|
|
<kendo-grid-column title="Actions" [width]="120">
|
|
<ng-template kendoGridCellTemplate let-g>
|
|
<button kendoButton fillMode="flat" (click)="delete(g)">Delete</button>
|
|
</ng-template>
|
|
</kendo-grid-column>
|
|
</kendo-grid>
|
|
|
|
<kendo-dialog *ngIf="showDialog" title="Add Giving" (close)="showDialog=false" [width]="520">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-3">
|
|
<label class="flex items-center gap-2 md:col-span-2">
|
|
<input type="checkbox" [ngModel]="form.isAnonymous" (ngModelChange)="toggleAnonymous()" /> Anonymous
|
|
</label>
|
|
|
|
<label *ngIf="!form.isAnonymous" class="flex flex-col gap-1 md:col-span-2">Giver
|
|
<kendo-dropdownlist [data]="memberResults" textField="displayName" valueField="id"
|
|
[valuePrimitive]="true" [filterable]="true"
|
|
(filterChange)="onMemberFilter($event)"
|
|
[(ngModel)]="selectedMemberId"
|
|
(valueChange)="onMemberIdSelected($event)"
|
|
placeholder="Search member by name"></kendo-dropdownlist>
|
|
</label>
|
|
|
|
<label class="flex flex-col gap-1">Type
|
|
<kendo-dropdownlist [data]="categories" textField="label" valueField="id"
|
|
[valuePrimitive]="true" [(ngModel)]="form.givingCategoryId"></kendo-dropdownlist>
|
|
</label>
|
|
|
|
<label class="flex flex-col gap-1">Payment method
|
|
<kendo-dropdownlist [data]="paymentMethods" textField="label" valueField="value" [valuePrimitive]="true"
|
|
[(ngModel)]="form.paymentMethod"></kendo-dropdownlist>
|
|
</label>
|
|
|
|
<label *ngIf="form.paymentMethod === 'Check'" class="flex flex-col gap-1">Check #
|
|
<kendo-textbox [(ngModel)]="form.checkNumber"></kendo-textbox>
|
|
</label>
|
|
<label *ngIf="form.paymentMethod === 'Zelle'" class="flex flex-col gap-1">Zelle ref
|
|
<kendo-textbox [(ngModel)]="form.zelleReferenceCode"></kendo-textbox>
|
|
</label>
|
|
<label *ngIf="form.paymentMethod === 'PayPal'" class="flex flex-col gap-1">PayPal txn
|
|
<kendo-textbox [(ngModel)]="form.payPalTransactionId"></kendo-textbox>
|
|
</label>
|
|
|
|
<label class="flex flex-col gap-1">Amount
|
|
<kendo-numerictextbox [(ngModel)]="form.amount" [min]="0" [format]="'c2'"></kendo-numerictextbox>
|
|
</label>
|
|
|
|
<label class="flex flex-col gap-1">Date
|
|
<kendo-datepicker [(ngModel)]="givingDateValue"></kendo-datepicker>
|
|
</label>
|
|
|
|
<label class="flex flex-col gap-1 md:col-span-2">Notes
|
|
<kendo-textbox [(ngModel)]="form.notes"></kendo-textbox>
|
|
</label>
|
|
</div>
|
|
<kendo-dialog-actions>
|
|
<button kendoButton (click)="showDialog=false">Cancel</button>
|
|
<button kendoButton themeColor="primary"
|
|
[disabled]="form.amount <= 0 || (form.paymentMethod==='Check' && !form.checkNumber)"
|
|
(click)="save()">Save</button>
|
|
</kendo-dialog-actions>
|
|
</kendo-dialog>
|
|
</div>
|