djabsher
/
UIAngular
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update transaction styling

MissionaryForm
dan 2019-07-06 00:49:13 -06:00
parent 7bad3c6045
commit 219120fe71
3 changed files with 96 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

93
Client/src/app/components/add-transaction-page/add-transaction-page.component.css
View File

@ -2,36 +2,40 @@
display: inline-block; 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; font-weight: bold;
} }
.w-5 { .ml-1 {
width: 5%; margin-left: 1rem;
}
.w-15 {
width: 15%;
}
.w-20 {
width: 20%;
}
.w-30 {
width: 30%;
}
.w-75 {
width: 75%;
}
.w-80 {
width: 80%;
}
.m-1 {
margin: 1rem;
} }
.mt-1 { .mt-1 {
@ -42,25 +46,17 @@
margin-top: 2rem; margin-top: 2rem;
} }
.ml-1 {
margin-left: 1rem;
}
.ml-2 {
margin-left: 2rem;
}
.mr-1 {
margin-right: 1rem;
}
.pt-1 { .pt-1 {
padding-top: 1rem; padding-top: 1rem;
} }
.bb-1 { .bb-1 {
border-bottom: 1px solid #ff4081; border-bottom: 1px solid #ff4081;
}
.bb-double {
border-bottom: 1px solid #ff4081;
border-style: double;
} }
table { table {
@ -68,5 +64,22 @@ table {
} }
td, th { td, th {
padding: 5px; 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);
}
}

75
Client/src/app/components/add-transaction-page/add-transaction-page.component.html
View File

@ -5,80 +5,83 @@
<div mainContent> <div mainContent>
<form [formGroup]="form" (ngSubmit)="onSubmit()"> <form [formGroup]="form" (ngSubmit)="onSubmit()">
<div formArrayName="contributions" *ngFor="let item of getContributionsFormArray().controls; let i = index;"> <div formArrayName="contributions" *ngFor="let item of getContributionsFormArray().controls; let i = index;">
<div class="m-1 mt-2 bb-1" [formGroupName]="i"> <div class="mt-2 bb-1" [formGroupName]="i">
<button class="w-5" type="button" mat-icon-button (click)="deleteContributor(i)">
<i ofbicon>delete_forever</i> <mat-form-field class="w-130px">
</button> <input class="fw-bold" matInput placeholder="Date" type="date" formControlName="date" >
<mat-form-field class="w-20"> </mat-form-field>
<input matInput placeholder="Date" type="date" formControlName="date" > <mat-form-field class="w-100less130px">
</mat-form-field> <input class="fw-bold" type="text" placeholder="Contributor" aria-label="Contributor" matInput formControlName="contributorId" (ngModelChange)="onContributorChange($event)" [matAutocomplete]="auto">
<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-autocomplete #auto="matAutocomplete" [displayWith]="contirbutorDisplayFn">
<mat-option *ngFor="let option of filteredContributors" [value]="option"> <mat-option *ngFor="let option of filteredContributors" [value]="option">
{{option.display}} {{option.display}}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
<div formArrayName="transactions" *ngFor="let trans of item.get('transactions').controls; let a = index;"> <div formArrayName="transactions" *ngFor="let trans of item.get('transactions').controls; let a = index;">
<div [formGroupName]="a"> <div [formGroupName]="a">
<button class="w-5" type="button" mat-icon-button (click)="deleteTransaction(i,a)"> <button class="w-40px" type="button" mat-icon-button (click)="deleteTransaction(i,a)">
<i ofbicon>delete_forever</i> <i ofbicon>delete_forever</i>
</button> </button>
<mat-form-field class="w-15"> <mat-form-field class="w-25less10px mw-50less20px">
<mat-select formControlName="typeId"> <mat-select formControlName="typeId">
<mat-option *ngFor="let type of types" [value]="type.value" > <mat-option *ngFor="let type of types" [value]="type.value" >
{{type.display}} {{type.display}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </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" > <input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
</mat-form-field> </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-select formControlName="fundId">
<mat-option *ngFor="let fund of funds" [value]="fund.value"> <mat-option *ngFor="let fund of funds" [value]="fund.value">
{{fund.display}} {{fund.display}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field> </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" > <input matInput placeholder="Amount" type="number" formControlName="amount" >
</mat-form-field> </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" > <input matInput placeholder="Description" type="text" formControlName="description" >
</mat-form-field> </mat-form-field>
</div> </div>
</div> </div>
<button class="w-15" mat-stroked-button type="button" (click)="addTransaction(i)">Add Transaction</button> <button class="w-40px" type="button" mat-icon-button (click)="addTransaction(i)">
<div class="ml-1 w-20 d-inline-block"> <i ofbicon>add</i>
</button>
<div class="w-100less40px d-inline-block">
{{contributorName(i)}} {{contributorName(i)}}
</div> </div>
<div class="ml-1 w-20 d-inline-block"> <div class="w-40px d-inline-block"></div>
General: {{contributorTotal(i, 1)}} <div class="w-33less13px d-inline-block">
General: {{contributorTotal(i, 1) | currency}}
</div> </div>
<div class="w-15 d-inline-block"> <div class="w-33less13px d-inline-block">
Missions: {{contributorTotal(i, 2)}} Missions: {{contributorTotal(i, 2) | currency}}
</div> </div>
<div class="w-15 d-inline-block"> <div class="w-33less13px d-inline-block">
Total: {{contributorTotal(i, 0)}} Total: {{contributorTotal(i, 0) | currency}}
</div> </div>
</div> </div>
</div> </div>
<button mat-stroked-button class="m-1 w-15" type="button" (click)="addContributor()">Add Contributor</button> <div class="mt-2 w-40px d-inline-block">&nbsp;</div>
<div class="ml-1 w-20 d-inline-block"> <div class="w-33less13px d-inline-block">
Combined General: {{combinedTotal(1) | currency}}
</div> </div>
<div class="ml-1 w-20 d-inline-block"> <div class="w-33less13px d-inline-block">
General: {{combinedTotal(1)}} Missions: {{combinedTotal(2) | currency}}
</div> </div>
<div class="w-15 d-inline-block"> <div class="w-33less13px d-inline-block">
Missions: {{combinedTotal(2)}} Total: {{combinedTotal(0) | currency}}
</div> </div>
<div class="w-15 d-inline-block"> <div class="bb-double"></div>
Total: {{combinedTotal(0)}} <button mat-stroked-button class="mt-2" type="button" (click)="addContributor()">Add Contributor</button>
</div> <button mat-raised-button class="mt-2 ml-1" type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
<button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
</form> </form>
</div> </div>
<div sideBar class="side-bar"> <div sideBar class="side-bar">

4
Client/src/app/components/add-transaction-page/add-transaction-page.component.ts
View File

@ -87,7 +87,6 @@ export class AddTransactionPageComponent implements OnInit {
const contributors = this.form.get('contributions') as FormArray; const contributors = this.form.get('contributions') as FormArray;
const transactions = contributors.controls[contributorPosition].get('transactions') as FormArray; const transactions = contributors.controls[contributorPosition].get('transactions') as FormArray;
const lastTransaction = transactions.value.length > 0 ? transactions.value[transactions.value.length-1] : undefined; const lastTransaction = transactions.value.length > 0 ? transactions.value[transactions.value.length-1] : undefined;
console.log(lastTransaction);
const newTransaction = this.getTransaction(); const newTransaction = this.getTransaction();
if (lastTransaction) { if (lastTransaction) {
newTransaction.patchValue({ newTransaction.patchValue({
@ -113,6 +112,9 @@ export class AddTransactionPageComponent implements OnInit {
const contributors = this.form.get('contributions') as FormArray; const contributors = this.form.get('contributions') as FormArray;
const transactions = contributors.controls[contributorIndex].get('transactions') as FormArray; const transactions = contributors.controls[contributorIndex].get('transactions') as FormArray;
transactions.removeAt(transactionIndex); transactions.removeAt(transactionIndex);
if (transactions.length === 0) {
this.deleteContributor(contributorIndex);
}
} }
contributorName(index: number) { contributorName(index: number) {