UIAngular/Client/src/app/components/add-transaction-page/add-transaction-page.component.html

<div>&nbsp;</div>
<h2 class="ml-1 mr-1 bb-1">Add Transactions</h2>

<secondary-page-component [fixedSideBar]="true" >
    <div mainContent>
      <table>
        <tbody>
          <ng-container *ngFor="let c of contributions; let ci = index">
            <tr [class.bg-red]="contributorDatesMatch(c.contributorId)">
              <td colspan="2" class="fw-bold fs-1-2-5">{{c.date}}</td>
              <td colspan="4" class="fw-bold fs-1-2-5">{{contributorName(c.contributorId)}}</td>
            </tr>
            <tr>
              <td></td>
              <td class="fw-bold">Date</td>
              <td class="fw-bold">Type</td>
              <td class="fw-bold">Check</td>
              <td class="fw-bold">Fund</td>
              <td class="fw-bold">Amount</td>
            </tr>
            <ng-container *ngFor="let t of c.transactions; let ti = index">
              <tr [class.highlight]="ti % 2">
                <td rowspan="2" style="width: 30px;">
                  <button mat-icon-button (click)="deleteTransaction(t.contributorId, ti)"><i ofbicon>delete_forever</i></button>
                </td>              
                <td colspan="5" *ngIf="t.description && t.description.length > 0">{{t.description}}</td>
                <td colspan="5" *ngIf="!t.description || t.description.length === 0" class="b-0 p-0"></td>
              </tr>
              <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">{{transactionType[t.typeId]}}</td>
                <td [class.remove-top-border]="!t.description || t.description.length === 0">{{t.checkNumber}}</td>
                <td [class.remove-top-border]="!t.description || t.description.length === 0">{{fund[t.fundId]}}</td>
                <td [class.remove-top-border]="!t.description || t.description.length === 0">{{t.amount | currency}}</td>
              </tr>              
            </ng-container>  
            <tr>
              <td></td>
              <td></td>
              <td></td>
              <td class="fw-bold">General</td>
              <td class="fw-bold">Missions</td>
              <td class="fw-bold">Total</td>
            </tr>
            <tr class="highlight-yellow">
              <td></td>
              <td></td>
              <td></td>
              <td>{{contributorTotal(c.contributorId, 1) | currency}}</td>
              <td>{{contributorTotal(c.contributorId, 2) | currency}}</td>
              <td>{{contributorTotal(c.contributorId, 0) | currency}}</td>
            </tr>
            <tr>
              <td colspan="5">
                <button mat-raised-button (click)="addTransaction(c.contributorId)" >Add Transaction to {{contributorName(c.contributorId)}}</button>
              </td>
            </tr>          
          </ng-container>
          <tr>
            <td colspan="6" class="fw-bold fs-1-2-5">Grand Totals</td>
          </tr>
          <tr>
            <td></td>
            <td></td>
            <td></td>
            <td class="fw-bold">General</td>
            <td class="fw-bold">Missions</td>
            <td class="fw-bold">Total</td>
          </tr>
          <tr class="highlight-yellow">
            <td></td>
            <td></td>
            <td></td>
            <td>{{combinedTotal(1) | currency}}</td>
            <td>{{combinedTotal(2) | currency}}</td>
            <td>{{combinedTotal(0) | currency}}</td>
          </tr>
        </tbody>
      </table>
      <div class="fab-buttons" >
          <button mat-fab (click)="addTransaction(-1)"><i ofbicon>add</i></button>
      </div> 
    </div>
    <div sideBar class="side-bar">
        <button mat-raised-button (click)="addTransaction(-1)" >Add Transaction</button>
        <button mat-raised-button (click)="submit()" [disabled]="contributions.length === 0 || submitButtonDisabled" >{{submitButtonText}}</button>
    </div>
</secondary-page-component>