Update transaction styling
dan
parent
7bad3c6045
commit
219120fe71
|
|
@ -2,36 +2,40 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
.d-none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.w-40px {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.w-25less10px {
|
||||
width: calc(25% - 10px);
|
||||
}
|
||||
|
||||
.w-33less13px {
|
||||
width: calc(33% - 13px);
|
||||
}
|
||||
|
||||
.w-100less40px {
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
.w-130px {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.w-100less130px {
|
||||
width: calc(100% - 130px);
|
||||
}
|
||||
|
||||
.fw-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.w-5 {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.w-15 {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
.w-20 {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.w-30 {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.w-75 {
|
||||
width: 75%;
|
||||
}
|
||||
|
||||
.w-80 {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 1rem;
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
|
|
@ -42,25 +46,17 @@
|
|||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.ml-1 {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.mr-1 {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.bb-1 {
|
||||
border-bottom: 1px solid #ff4081;
|
||||
}
|
||||
|
||||
.bb-double {
|
||||
border-bottom: 1px solid #ff4081;
|
||||
border-style: double;
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -68,5 +64,22 @@ table {
|
|||
}
|
||||
td, th {
|
||||
padding: 5px;
|
||||
border: 1px solid orange;
|
||||
border: 1px solid #ff4081;
|
||||
}
|
||||
|
||||
@media(max-width: 800px) {
|
||||
table {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 600px) {
|
||||
.md-inline-block {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.mw-50less20px {
|
||||
width: calc(50% - 20px);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,80 +5,83 @@
|
|||
<div mainContent>
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
<div formArrayName="contributions" *ngFor="let item of getContributionsFormArray().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">
|
||||
<div class="mt-2 bb-1" [formGroupName]="i">
|
||||
|
||||
<mat-form-field class="w-130px">
|
||||
<input class="fw-bold" matInput placeholder="Date" type="date" formControlName="date" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-100less130px">
|
||||
<input class="fw-bold" 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">
|
||||
<button class="w-40px" type="button" mat-icon-button (click)="deleteTransaction(i,a)">
|
||||
<i ofbicon>delete_forever</i>
|
||||
</button>
|
||||
<mat-form-field class="w-25less10px mw-50less20px">
|
||||
<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">
|
||||
<mat-form-field class="w-25less10px mw-50less20px">
|
||||
<input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<div class="w-40px d-none md-inline-block"></div>
|
||||
<mat-form-field class="w-25less10px mw-50less20px">
|
||||
<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">
|
||||
<mat-form-field class="w-25less10px mw-50less20px">
|
||||
<input matInput placeholder="Amount" type="number" formControlName="amount" >
|
||||
</mat-form-field>
|
||||
<mat-form-field class="w-20">
|
||||
<div class="w-40px d-inline-block"></div>
|
||||
<mat-form-field class="w-100less40px">
|
||||
<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">
|
||||
<button class="w-40px" type="button" mat-icon-button (click)="addTransaction(i)">
|
||||
<i ofbicon>add</i>
|
||||
</button>
|
||||
<div class="w-100less40px d-inline-block">
|
||||
{{contributorName(i)}}
|
||||
</div>
|
||||
<div class="ml-1 w-20 d-inline-block">
|
||||
General: {{contributorTotal(i, 1)}}
|
||||
<div class="w-40px d-inline-block"></div>
|
||||
<div class="w-33less13px d-inline-block">
|
||||
General: {{contributorTotal(i, 1) | currency}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Missions: {{contributorTotal(i, 2)}}
|
||||
<div class="w-33less13px d-inline-block">
|
||||
Missions: {{contributorTotal(i, 2) | currency}}
|
||||
</div>
|
||||
<div class="w-15 d-inline-block">
|
||||
Total: {{contributorTotal(i, 0)}}
|
||||
<div class="w-33less13px d-inline-block">
|
||||
Total: {{contributorTotal(i, 0) | currency}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-2 w-40px d-inline-block"> </div>
|
||||
<div class="w-33less13px d-inline-block">
|
||||
General: {{combinedTotal(1) | currency}}
|
||||
</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 class="w-33less13px d-inline-block">
|
||||
Missions: {{combinedTotal(2) | currency}}
|
||||
</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 class="w-33less13px d-inline-block">
|
||||
Total: {{combinedTotal(0) | currency}}
|
||||
</div>
|
||||
<button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
|
||||
<div class="bb-double"></div>
|
||||
<button mat-stroked-button class="mt-2" type="button" (click)="addContributor()">Add Contributor</button>
|
||||
<button mat-raised-button class="mt-2 ml-1" type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
|
||||
</form>
|
||||
</div>
|
||||
<div sideBar class="side-bar">
|
||||
|
|
|
|||
|
|
@ -87,7 +87,6 @@ export class AddTransactionPageComponent implements OnInit {
|
|||
const contributors = this.form.get('contributions') as FormArray;
|
||||
const transactions = contributors.controls[contributorPosition].get('transactions') as FormArray;
|
||||
const lastTransaction = transactions.value.length > 0 ? transactions.value[transactions.value.length-1] : undefined;
|
||||
console.log(lastTransaction);
|
||||
const newTransaction = this.getTransaction();
|
||||
if (lastTransaction) {
|
||||
newTransaction.patchValue({
|
||||
|
|
@ -113,6 +112,9 @@ export class AddTransactionPageComponent implements OnInit {
|
|||
const contributors = this.form.get('contributions') as FormArray;
|
||||
const transactions = contributors.controls[contributorIndex].get('transactions') as FormArray;
|
||||
transactions.removeAt(transactionIndex);
|
||||
if (transactions.length === 0) {
|
||||
this.deleteContributor(contributorIndex);
|
||||
}
|
||||
}
|
||||
|
||||
contributorName(index: number) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue