Transaction Summary Grid

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

@@ -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;
+}

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

@@ -1,15 +1,18 @@
 <div>&nbsp;</div>
 <h2 class="ml-1 mr-1 bb-1">Add Transactions</h2>
+
+<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-15">
+                <mat-form-field class="w-20">
                   <input matInput placeholder="Date" type="date" formControlName="date" >
                 </mat-form-field>
-        <mat-form-field class="w-80"> 
+                <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">
@@ -77,3 +80,41 @@
             </div>  
             <button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
         </form>
+    </div>
+    <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>
+</secondary-page-component>
+
+
+

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

@@ -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() {

Client/src/app/components/secondary-page/secondary-page.component.css

@@ -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;
     }

Client/src/app/components/secondary-page/secondary-page.component.html

@@ -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>

Client/src/app/components/secondary-page/secondary-page.component.ts

@@ -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(){