From aad964d6591adfa7e577281b26719383f7cdb548 Mon Sep 17 00:00:00 2001
From: dan <ofbadmin@ofbbutte.com>
Date: Fri, 5 Jul 2019 21:42:39 -0600
Subject: [PATCH] Transaction Summary Grid

---
 .../add-transaction-page.component.css        |  18 +-
 .../add-transaction-page.component.html       | 191 +++++++++++-------
 .../add-transaction-page.component.ts         |  12 +-
 .../secondary-page.component.css              |   9 +
 .../secondary-page.component.html             |   2 +-
 .../secondary-page.component.ts               |   2 +
 6 files changed, 156 insertions(+), 78 deletions(-)

diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.css b/Client/src/app/components/add-transaction-page/add-transaction-page.component.css
index fdb772c..5bb618a 100644
--- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.css
+++ b/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;
 
-}
\ No newline at end of file
+}
+
+table {
+    border-collapse: collapse;
+}
+td, th {
+    padding: 5px;
+    border: 1px solid orange;
+}
diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.html b/Client/src/app/components/add-transaction-page/add-transaction-page.component.html
index e087fe5..33517ff 100644
--- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.html
+++ b/Client/src/app/components/add-transaction-page/add-transaction-page.component.html
@@ -1,79 +1,120 @@
 <div>&nbsp;</div>
 <h2 class="ml-1 mr-1 bb-1">Add Transactions</h2>
-<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">
-          <input matInput placeholder="Date" type="date" formControlName="date" >
-        </mat-form-field>
-        <mat-form-field class="w-80"> 
-          <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">
-              {{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">
-              <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">
-              <input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
-            </mat-form-field>
-            <mat-form-field class="w-20">
-              <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">
-              <input matInput placeholder="Amount" type="number" formControlName="amount"  >
-            </mat-form-field>
-            <mat-form-field class="w-20">
-              <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">
-          {{contributorName(i)}}
-        </div>
-        <div class="ml-1 w-20 d-inline-block">
-          General: {{contributorTotal(i, 1)}}
-        </div>
-        <div class="w-15 d-inline-block">
-          Missions: {{contributorTotal(i, 2)}}
-        </div>
-        <div class="w-15 d-inline-block">
-          Total: {{contributorTotal(i, 0)}}
-        </div>        
-      </div>
+
+<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-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">
+                  <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">
+                      <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">
+                      <input matInput placeholder="Check Number" type="text" formControlName="checkNumber" >
+                    </mat-form-field>
+                    <mat-form-field class="w-20">
+                      <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">
+                      <input matInput placeholder="Amount" type="number" formControlName="amount"  >
+                    </mat-form-field>
+                    <mat-form-field class="w-20">
+                      <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">
+                  {{contributorName(i)}}
+                </div>
+                <div class="ml-1 w-20 d-inline-block">
+                  General: {{contributorTotal(i, 1)}}
+                </div>
+                <div class="w-15 d-inline-block">
+                  Missions: {{contributorTotal(i, 2)}}
+                </div>
+                <div class="w-15 d-inline-block">
+                  Total: {{contributorTotal(i, 0)}}
+                </div>        
+              </div>
+            </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>
+            <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>  
+            <button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
+        </form>
     </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 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>
-    <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>  
-    <button mat-raised-button type="submit" [disabled]="!form.valid || submitButtonDisabled">{{ submitButtonText }}</button>
-</form>
\ No newline at end of file
+</secondary-page-component>
+
+
+
diff --git a/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts b/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts
index 74cca79..51afb54 100644
--- a/Client/src/app/components/add-transaction-page/add-transaction-page.component.ts
+++ b/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() {
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.css b/Client/src/app/components/secondary-page/secondary-page.component.css
index 0d4df67..80b1602 100644
--- a/Client/src/app/components/secondary-page/secondary-page.component.css
+++ b/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;
     }
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.html b/Client/src/app/components/secondary-page/secondary-page.component.html
index db0680f..f21bde6 100644
--- a/Client/src/app/components/secondary-page/secondary-page.component.html
+++ b/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>
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.ts b/Client/src/app/components/secondary-page/secondary-page.component.ts
index 6d4c51c..9f2d400 100644
--- a/Client/src/app/components/secondary-page/secondary-page.component.ts
+++ b/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(){