Transaction Summary Grid
dan
parent
dae8ca0616
commit
aad964d659
|
|
@ -22,6 +22,10 @@
|
|||
width: 30%;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.w-80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
|
@ -50,7 +54,19 @@
|
|||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.bb-1 {
|
||||
border-bottom: 1px solid #ff4081;
|
||||
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
td, th {
|
||||
padding: 5px;
|
||||
border: 1px solid orange;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,79 +1,120 @@
|
|||
<div> </div>
|
||||
<h2 class="ml-1 mr-1 bb-1">Add Transactions</h2>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div formArrayName="contributions" *ngFor="let item of form.get('contributions').controls; let i = index;">
|
||||
<div class="m-1 mt-2 bb-1" [formGroupName]="i">
|
||||
<button class="w-5" type="button" mat-icon-button (click)="deleteContributor(i)">
|
||||
<i ofbicon>delete_forever</i>
|
||||
</button>
|
||||
<mat-form-field class="w-15">
|
||||
<input matInput placeholder="Date" type="date" formControlName="date" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-80">
|
||||
<input type="text" placeholder="Contributor" aria-label="Contributor" matInput formControlName="contributorId" (ngModelChange)="onContributorChange($event)" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="contirbutorDisplayFn">
|
||||
<mat-option *ngFor="let option of filteredContributors" [value]="option">
|
||||
{{option.display}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div formArrayName="transactions" *ngFor="let trans of item.get('transactions').controls; let a = index;">
|
||||
<div [formGroupName]="a">
|
||||
<button class="w-5" type="button" mat-icon-button (click)="deleteTransaction(i,a)">
|
||||
<i ofbicon>delete_forever</i>
|
||||
</button>
|
||||
<mat-form-field class="w-15">
|
||||
<mat-select formControlName="typeId">
|
||||
<mat-option *ngFor="let type of types" [value]="type.value" >
|
||||
{{type.display}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<mat-select formControlName="fundId">
|
||||
<mat-option *ngFor="let fund of funds" [value]="fund.value">
|
||||
{{fund.display}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Amount" type="number" formControlName="amount" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Description" type="text" formControlName="description" >
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-15" mat-stroked-button type="button" (click)="addTransaction(i)">Add Transaction</button>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
{{contributorName(i)}}
|
||||
</div>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
General: {{contributorTotal(i, 1)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Missions: {{contributorTotal(i, 2)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Total: {{contributorTotal(i, 0)}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<secondary-page-component [fixedSideBar]="true">
|
||||
<div mainContent>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div formArrayName="contributions" *ngFor="let item of form.get('contributions').controls; let i = index;">
|
||||
<div class="m-1 mt-2 bb-1" [formGroupName]="i">
|
||||
<button class="w-5" type="button" mat-icon-button (click)="deleteContributor(i)">
|
||||
<i ofbicon>delete_forever</i>
|
||||
</button>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Date" type="date" formControlName="date" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-75">
|
||||
<input type="text" placeholder="Contributor" aria-label="Contributor" matInput formControlName="contributorId" (ngModelChange)="onContributorChange($event)" [matAutocomplete]="auto">
|
||||
<mat-autocomplete #auto="matAutocomplete" [displayWith]="contirbutorDisplayFn">
|
||||
<mat-option *ngFor="let option of filteredContributors" [value]="option">
|
||||
{{option.display}}
|
||||
</mat-option>
|
||||
</mat-autocomplete>
|
||||
</mat-form-field>
|
||||
<div formArrayName="transactions" *ngFor="let trans of item.get('transactions').controls; let a = index;">
|
||||
<div [formGroupName]="a">
|
||||
<button class="w-5" type="button" mat-icon-button (click)="deleteTransaction(i,a)">
|
||||
<i ofbicon>delete_forever</i>
|
||||
</button>
|
||||
<mat-form-field class="w-15">
|
||||
<mat-select formControlName="typeId">
|
||||
<mat-option *ngFor="let type of types" [value]="type.value" >
|
||||
{{type.display}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<mat-select formControlName="fundId">
|
||||
<mat-option *ngFor="let fund of funds" [value]="fund.value">
|
||||
{{fund.display}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Amount" type="number" formControlName="amount" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<input matInput placeholder="Description" type="text" formControlName="description" >
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<button class="w-15" mat-stroked-button type="button" (click)="addTransaction(i)">Add Transaction</button>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
{{contributorName(i)}}
|
||||
</div>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
General: {{contributorTotal(i, 1)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Missions: {{contributorTotal(i, 2)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Total: {{contributorTotal(i, 0)}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-stroked-button class="m-1 w-15" type="button" (click)="addContributor()">Add Contributor</button>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
Combined
|
||||
</div>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
General: {{combinedTotal(1)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Missions: {{combinedTotal(2)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Total: {{combinedTotal(0)}}
|
||||
</div>
|
||||
<button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<button mat-stroked-button class="m-1 w-15" type="button" (click)="addContributor()">Add Contributor</button>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
Combined
|
||||
<div sideBar class="side-bar">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>General</th>
|
||||
<th>Missions</th>
|
||||
<th>Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<ng-container *ngFor="let c of form.get('contributions').value; let i = index">
|
||||
<tr>
|
||||
<td colspan="3" class="pt-1">{{contributorName(i)}}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{contributorTotal(i, 1) | currency}}</td>
|
||||
<td>{{contributorTotal(i, 2) | currency}}</td>
|
||||
<td>{{contributorTotal(i, 0) | currency}}</td>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<tr>
|
||||
<td colspan="3" class="pt-1">
|
||||
Total
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>{{combinedTotal(1) | currency}}</td>
|
||||
<td>{{combinedTotal(2) | currency}}</td>
|
||||
<td>{{combinedTotal(0) | currency}}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
General: {{combinedTotal(1)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Missions: {{combinedTotal(2)}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Total: {{combinedTotal(0)}}
|
||||
</div>
|
||||
<button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
|
||||
</form>
|
||||
</secondary-page-component>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -82,7 +82,17 @@ export class AddTransactionPageComponent implements OnInit {
|
|||
addTransaction(contributorPosition: number) {
|
||||
const contributors = this.form.get('contributions') as FormArray;
|
||||
const transactions = contributors.controls[contributorPosition].get('transactions') as FormArray;
|
||||
transactions.push(this.getTransaction());
|
||||
const lastTransaction = transactions.value.length > 0 ? transactions.value[transactions.value.length-1] : undefined;
|
||||
console.log(lastTransaction);
|
||||
const newTransaction = this.getTransaction();
|
||||
if (lastTransaction) {
|
||||
newTransaction.patchValue({
|
||||
"typeId": lastTransaction.typeId,
|
||||
"checkNumber": lastTransaction.checkNumber,
|
||||
"fundId": lastTransaction.fundId === 1 ? 2 : 1
|
||||
});
|
||||
}
|
||||
transactions.push(newTransaction);
|
||||
}
|
||||
|
||||
addContributor() {
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
padding: 20px;
|
||||
}
|
||||
|
||||
.fixed-side-bar {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.align-top{
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -28,6 +32,11 @@
|
|||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fixed-side-bar {
|
||||
position: initial;
|
||||
}
|
||||
|
||||
.hide-on-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="main-content align-top">
|
||||
<ng-content select="[mainContent]"></ng-content>
|
||||
</div><!--
|
||||
--><div class="side-bar align-top" [class.hide-on-mobile]="hideSideBarOnMobile">
|
||||
--><div class="side-bar align-top" [class.hide-on-mobile]="hideSideBarOnMobile" [class.fixed-side-bar]="fixedSideBar">
|
||||
<ng-content select="[sideBar]"></ng-content>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import { Component, Input, OnInit } from '@angular/core';
|
|||
export class SecondaryPageComponent implements OnInit {
|
||||
@Input()
|
||||
public hideSideBarOnMobile: boolean;
|
||||
@Input()
|
||||
public fixedSideBar: boolean;
|
||||
|
||||
constructor(){
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue