145 lines
7.3 KiB
HTML
145 lines
7.3 KiB
HTML
<div class="animated fadeIn">
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<strong>Log of Outgoing Transactions</strong>
|
|
<small>This lists all purchases that have been submitted.</small>
|
|
</div>
|
|
<div *ngIf="!noTransactionList" class="card-block">
|
|
<table class="table table-striped table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Seller</th>
|
|
<th>Value</th>
|
|
<th>Purchase Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr transaction-result *ngFor="let transaction of transactionList | paginate: paginateConfig" [transaction]="transaction"></tr>
|
|
</tbody>
|
|
</table>
|
|
<pagination-template #p="paginationApi"
|
|
[id]="paginateConfig.id"
|
|
(pageChange)="loadTransactions($event)">
|
|
<ul class="pagination">
|
|
<li class="page-item" [class.disabled]="p.isFirstPage()">
|
|
<a class="page-link clickable" *ngIf="!p.isFirstPage()" (click)="p.previous()">Prev</a>
|
|
</li>
|
|
<li *ngFor="let page of p.pages" class="page-item" [class.active]="p.getCurrent() === page.value">
|
|
<a class="page-link clickable" (click)="p.setCurrent(page.value)" *ngIf="p.getCurrent() !== page.value">
|
|
<span>{{ page.label }}</span>
|
|
</a>
|
|
<div class="page-link" *ngIf="p.getCurrent() === page.value">
|
|
<span>{{ page.label }}</span>
|
|
</div>
|
|
</li>
|
|
<li class="page-item" [class.disabled]="p.isLastPage()">
|
|
<a class="page-link clickable" *ngIf="!p.isLastPage()" (click)="p.next()">Next</a>
|
|
</li>
|
|
</ul>
|
|
</pagination-template>
|
|
</div>
|
|
<div *ngIf="noTransactionList" class="card-block">
|
|
No Transactions available.
|
|
</div>
|
|
</div>
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<strong>Recurring Transactions</strong>
|
|
<small>Select a Recurring Transaction below to edit it.</small>
|
|
</div>
|
|
<div *ngIf="!noRecurringList" class="card-block">
|
|
<recur-table [recurList]="recurringTransactionList" [categories]="categoryList" (onClick)="recurringTransactionDetails($event, template)"></recur-table>
|
|
<ng-template #template>
|
|
<div class="modal-header d-flex justify-content-between">
|
|
<h4 class="modal-title">Edit Recurring Transaction</h4>
|
|
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Time of Transaction</strong></label>
|
|
<div class="col-md-9">
|
|
<input type="datetime-local" class="form-control" [(ngModel)]="updatedTime">
|
|
<span class="help-block">Enter the date and time the transaction occurred.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Amount</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<span class="input-group-addon"><i class="fa fa-gbp"></i></span>
|
|
<input type="number" min="0.00" step="0.01" class="form-control" placeholder="0.00" [(ngModel)]="clickedRecur.value">
|
|
</div>
|
|
<span class="help-block">Enter the amount spent, such as 5.35 for £5.35.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Essential Purchase</label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<input type="checkbox" class="mr-auto" [(ngModel)]="clickedRecur.essential">
|
|
</div>
|
|
<span class="help-block">Tick if the purchase is deemed an essential purchase for budgeting purposes.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input"><strong>Recurring Period</strong></label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<select type="text" class="form-control" [(ngModel)]="clickedRecur.recurring_period">
|
|
<option value="daily">Daily</option>
|
|
<option value="weekly">Weekly</option>
|
|
<option value="fortnightly">Fortnightly</option>
|
|
<option value="monthly">Monthly</option>
|
|
<option value="quarterly">Quarterly</option>
|
|
</select>
|
|
</div>
|
|
<span class="help-block">Please give the period of time the purchase will recur from "Time of Transaction".</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<label class="col-md-3 form-control-label" for="text-input">Budget Type</label>
|
|
<div class="col-md-9">
|
|
<div class="input-group">
|
|
<select type="text" class="form-control" [compareWith]="byId" [(ngModel)]="clickedRecur.category">
|
|
<option value="0">Uncategorised</option>
|
|
<option *ngFor="let category of categoryIdList" [ngValue]="category">
|
|
{{ categoryList[category] }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
<span class="help-block"><strong>Optional:</strong> Choose the Budget Type for the majority of the purchase.</span>
|
|
</div>
|
|
</div>
|
|
<div class="form-group row">
|
|
<div class="input-group">
|
|
<span class="col-12"><strong>WARNING: Clicking "Delete" will completely remove the Recurring Transaction.</strong></span>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div [ngSwitch]="transactionFormStatus">
|
|
<div *ngSwitchCase="'success'" class="alert alert-success" role="alert">
|
|
{{transactionFormStatusSuccess}}
|
|
</div>
|
|
<div *ngSwitchCase="'send_failed'" class="alert alert-danger" role="alert">
|
|
{{transactionFormStatusError}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer d-flex justify-content-between">
|
|
<button type="submit" (click)="deleteRecurringTransaction()" class="btn btn-sm btn-danger"><i class="fa fa-times"></i> Delete</button>
|
|
<button type="submit" (click)="editRecurringTransaction()" class="btn btn-sm btn-primary"><i class="fa fa-dot-circle-o"></i> Edit</button>
|
|
</div>
|
|
</ng-template>
|
|
</div>
|
|
<div *ngIf="noRecurringList" class="card-block">
|
|
No Recurring Transactions.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|