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

add red border when dates do not match

test
dan 2019-11-23 11:08:15 -07:00
parent b886d79879
commit a471b3121b
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,9 +6,9 @@
<table> <table>
<tbody> <tbody>
<ng-container *ngFor="let c of contributions; let ci = index"> <ng-container *ngFor="let c of contributions; let ci = index">
<tr> <tr [class.bg-red]="contributorDatesMatch(c.contributorId)">
<!-- <td colspan="2" class="fw-bold fs-1-2-5">{{c.date}}</td> --> <td colspan="2" class="fw-bold fs-1-2-5">{{c.date}}</td>
<td colspan="3" class="fw-bold fs-1-2-5">{{contributorName(c.contributorId)}}</td> <td colspan="4" class="fw-bold fs-1-2-5">{{contributorName(c.contributorId)}}</td>
</tr> </tr>
<tr> <tr>
<td></td> <td></td>
@ -23,8 +23,8 @@
<td rowspan="2" style="width: 30px;"> <td rowspan="2" style="width: 30px;">
<button mat-icon-button (click)="deleteTransaction(t.contributorId, ti)"><i ofbicon>delete_forever</i></button> <button mat-icon-button (click)="deleteTransaction(t.contributorId, ti)"><i ofbicon>delete_forever</i></button>
</td> </td>
<td colspan="4" *ngIf="t.description && t.description.length > 0">{{t.description}}</td> <td colspan="5" *ngIf="t.description && t.description.length > 0">{{t.description}}</td>
<td colspan="4" *ngIf="!t.description || t.description.length === 0" class="b-0 p-0"></td> <td colspan="5" *ngIf="!t.description || t.description.length === 0" class="b-0 p-0"></td>
</tr> </tr>
<tr [class.highlight]="ti % 2"> <tr [class.highlight]="ti % 2">
<td [class.remove-top-border]="!t.description || t.description.length === 0">{{t.date}}</td> <td [class.remove-top-border]="!t.description || t.description.length === 0">{{t.date}}</td>
@ -35,6 +35,7 @@
</tr> </tr>
</ng-container> </ng-container>
<tr> <tr>
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td class="fw-bold">General</td> <td class="fw-bold">General</td>
@ -42,6 +43,7 @@
<td class="fw-bold">Total</td> <td class="fw-bold">Total</td>
</tr> </tr>
<tr class="highlight-yellow"> <tr class="highlight-yellow">
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td>{{contributorTotal(c.contributorId, 1) | currency}}</td> <td>{{contributorTotal(c.contributorId, 1) | currency}}</td>
@ -55,9 +57,10 @@
</tr> </tr>
</ng-container> </ng-container>
<tr> <tr>
<td colspan="5" class="fw-bold fs-1-2-5">Grand Totals</td> <td colspan="6" class="fw-bold fs-1-2-5">Grand Totals</td>
</tr> </tr>
<tr> <tr>
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td class="fw-bold">General</td> <td class="fw-bold">General</td>
@ -65,6 +68,7 @@
<td class="fw-bold">Total</td> <td class="fw-bold">Total</td>
</tr> </tr>
<tr class="highlight-yellow"> <tr class="highlight-yellow">
<td></td>
<td></td> <td></td>
<td></td> <td></td>
<td>{{combinedTotal(1) | currency}}</td> <td>{{combinedTotal(1) | currency}}</td>

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

@ -107,6 +107,18 @@ export class AddTransactionPageComponent implements OnInit {
return contributor ? contributor.display : undefined; return contributor ? contributor.display : undefined;
} }
contributorDatesMatch(contributorId: number) {
const contributor = this.contributions.find(c => c.contributorId === contributorId);
if (!contributor) return true;
let match = true;
contributor.transactions.forEach(t => {
if (t.date != contributor.date) {
match = false;
}
});
return match;
}
contributorTotal(contributorId: number, fundId: number) { contributorTotal(contributorId: number, fundId: number) {
const contrib = this.contributions.find(c => c.contributorId === contributorId); const contrib = this.contributions.find(c => c.contributorId === contributorId);
if (!contrib) return 0; if (!contrib) return 0;

4
Client/src/styles.css
View File

@ -19,6 +19,10 @@ body {
color: red; color: red;
} }
.bg-red {
background-color: red;
}
/*MATERIAL FONT FOR ICONS*/ /*MATERIAL FONT FOR ICONS*/
@font-face { @font-face {
font-family: 'Material Icons'; font-family: 'Material Icons';