FoodLoop-Web/src/app/dashboard/transaction-log.component.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">&times;</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>
          </ng-template>
        </div>
        <div *ngIf="noRecurringList" class="card-block">
          No Recurring Transactions.
        </div>
      </div>
    </div>
  </div>
</div>