From 3492d7571d7cb6930d7b7dde4c0f0a84ac8e6b6e Mon Sep 17 00:00:00 2001
From: JustinMacaulay <justinkmacaulay@gmail.com>
Date: Mon, 13 Jan 2025 10:13:25 -0800
Subject: [PATCH] Added thousandth seperator for money value fields

---
 .../dfa-project-amendment.component.html      |   4 +-
 .../invoice/invoice.component.html            |  46 ++++----
 .../recovery-claim.component.html             | 102 +++++++++---------
 .../recovery-plan.component.html              |  18 ++--
 4 files changed, 85 insertions(+), 85 deletions(-)

diff --git a/dfa-public/src/UI/embc-dfa/src/app/feature-components/dfa-project-amendment/dfa-project-amendment.component.html b/dfa-public/src/UI/embc-dfa/src/app/feature-components/dfa-project-amendment/dfa-project-amendment.component.html
index c420d14a0..b96c24987 100644
--- a/dfa-public/src/UI/embc-dfa/src/app/feature-components/dfa-project-amendment/dfa-project-amendment.component.html
+++ b/dfa-public/src/UI/embc-dfa/src/app/feature-components/dfa-project-amendment/dfa-project-amendment.component.html
@@ -269,7 +269,7 @@
                       id="currencyBoxestimatedAdditionalProjectCost"
                       formControlName="estimatedAdditionalProjectCost"
                       matInput
-                      mask="separator.2" thousandSeparator="" decimalMarker="."
+                      mask="separator.2" thousandSeparator="," decimalMarker="."
                       maxlength="100"/>
                     <span class="currencyText">CA$</span>
                   </div>
@@ -300,7 +300,7 @@
                         id="currencyBoxapprovedAdditionalProjectCost"
                         formControlName="approvedAdditionalProjectCost"
                         matInput
-                        mask="separator.2" thousandSeparator="" decimalMarker="."
+                        mask="separator.2" thousandSeparator="," decimalMarker="."
                         maxlength="100"/>
                       <span class="currencyText">CA$</span>
                     </div>
diff --git a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/invoice/invoice.component.html b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/invoice/invoice.component.html
index c6fc9089d..a75887b95 100644
--- a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/invoice/invoice.component.html
+++ b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/invoice/invoice.component.html
@@ -95,7 +95,7 @@
                 </div>
               </div>
             </div>
-            
+
             <hr class="hr-align" *ngIf="isReadOnly === true" />
             <div class="row">
               <div class="col-md-12">
@@ -143,7 +143,7 @@
                   ></mat-datepicker-toggle>
                   <mat-datepicker #invoiceDatePicker [disabled]="isReadOnly === true"
                   ></mat-datepicker>
-                  
+
                 </mat-form-field>
               </div>
               <div class="col-md-1"></div>
@@ -157,10 +157,10 @@
                 <mat-radio-group
                   formControlName="isGoodsReceivedonInvoiceDate"
                   class="primary-radio-group horizontal-radio-group"
-                  
+
                   aria-label="Select an option">
                   <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
-                  
+
                    <mat-error *ngIf="
                                   invoiceForm.get('isGoodsReceivedonInvoiceDate').invalid &&
                                   invoiceForm.get('isGoodsReceivedonInvoiceDate').hasError('required')
@@ -168,18 +168,18 @@
                      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This is required
                    </mat-error>
                   </mat-radio-group>
-                
+
               </div>
             </div>
             <br />
-            
+
             <div class="row" [hidden]="(formCreationService.invoiceForm$ | async)?.value
   .isGoodsReceivedonInvoiceDate != 'false'">
               <p  style="font-size: 15px">
                 Select the date that the goods or services were received<span style="color:red" >*</span>
               </p>
               <div class="col-md-6">
-                
+
                 <mat-form-field appearance="outline" >
                   <input matInput
                     [matDatepicker]="goodsReceivedDatePicker"
@@ -191,10 +191,10 @@
                   ></mat-datepicker-toggle>
                   <mat-datepicker #goodsReceivedDatePicker [disabled]="isReadOnly === true"
                   ></mat-datepicker>
-    
+
                 </mat-form-field>
               </div>
-        
+
             </div>
             <br *ngIf="(formCreationService.invoiceForm$ | async)?.value
                         .isGoodsReceivedonInvoiceDate == 'false'"/>
@@ -206,7 +206,7 @@
                 <mat-form-field appearance="outline">
                   <textarea [disabled]="isReadOnly" matInput
                     formControlName="purposeOfGoodsServiceReceived"
-                    
+
                     required
                     style="resize:none"
                     cdkTextareaAutosize
@@ -215,9 +215,9 @@
                     cdkAutosizeMaxRows="5"
                     maxlength="200"></textarea>
                   <!--<mat-hint>{{ remainingLength }} characters remaining.</mat-hint>-->
-                   
+
                 </mat-form-field>
-                
+
                 <br/>
               </div>
             </div>
@@ -230,7 +230,7 @@
                 <mat-radio-group
                   formControlName="isClaimforPartofTotalInvoice"
                   class="primary-radio-group horizontal-radio-group"
-                  
+
                   (change)="selectDamageDates($event)"
                   aria-label="Select an option">
                   <mat-radio-button value=true>Yes</mat-radio-button>&nbsp;&nbsp;<mat-radio-button value=false>No</mat-radio-button>
@@ -240,7 +240,7 @@
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; This is required
                   </mat-error>
                   </mat-radio-group>
-                   
+
               </div>
             </div>
             <br/>
@@ -275,7 +275,7 @@
                     Net invoiced being claimed (excluding taxes)<span style="color:red" >*</span>
                   </p>
                   <mat-form-field appearance="outline" class="mat-form-round monetary-input">
-    
+
                     <div class="searchDiv">
                       <input
                         (focusin)="setHelpText(3, tooltip)"
@@ -284,13 +284,13 @@
                         [formControl]="invoiceForm.controls['netInvoiceBeingClaimed']"
                         matInput
                              required
-                             mask="separator.2" thousandSeparator="" decimalMarker="."
+                             mask="separator.2" thousandSeparator="," decimalMarker="."
                              (keyup)="CalculateInvoice($event);"
                         maxlength="100"/>
                       <span class="currencyText">CA$</span>
                     </div>
                   </mat-form-field>
-                </div>  
+                </div>
               </div>
 
               <div class="row pst-box">
@@ -298,7 +298,7 @@
                   <p  style="font-size: 15px">
                     PST
                   </p>
-                  
+
                 </div>
                 <div class="col-md-8 inputCurrency">
                   $&nbsp;<mat-form-field class="monetary-input-small" appearance="outline" style="height: 30px !important">
@@ -307,7 +307,7 @@
                       (focusin)="setHelpText(4, tooltip)"
                       [formControl]="invoiceForm.controls['pst']"
                       matInput
-                      mask="separator.2" thousandSeparator="" decimalMarker="."
+                      mask="separator.2" thousandSeparator="," decimalMarker="."
                       (keyup)="CalculateInvoice($event);"
                       maxlength="100"/>
                   </mat-form-field>
@@ -324,7 +324,7 @@
                       (focusin)="setHelpText(5, tooltip)"
                       [formControl]="invoiceForm.controls['grossGST']"
                       matInput
-                      mask="separator.2" thousandSeparator="" decimalMarker="."
+                      mask="separator.2" thousandSeparator="," decimalMarker="."
                       (keyup)="CalculateInvoice($event);"
                       maxlength="100"/>
                   </mat-form-field>
@@ -372,10 +372,10 @@
                     <input
                       (focusin)="setHelpText(6, tooltip)"
                             #eligibleGST
-                    
+
                       [formControl]="invoiceForm.controls['eligibleGST']"
                       matInput
-                      mask="separator.2" thousandSeparator="" decimalMarker="."
+                      mask="separator.2" thousandSeparator="," decimalMarker="."
                       (keyup)="CalculateInvoice($event);"
                       maxlength="100"/>
                   </mat-form-field>
@@ -415,6 +415,6 @@
         </div>
       </div>
     </form>
-    
+
   </mat-card-content>
 </mat-card>
diff --git a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/recovery-claim/recovery-claim.component.html b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/recovery-claim/recovery-claim.component.html
index 15defebf3..f50e62b41 100644
--- a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/recovery-claim/recovery-claim.component.html
+++ b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-claim-main-forms/recovery-claim/recovery-claim.component.html
@@ -1,7 +1,7 @@
 <mat-card class="card-align recoveryPlan" style="border:none;" [class.mat-elevation-z0]="true">
   <mat-card-content>
     <form [formGroup]="recoveryClaimForm">
-      
+
       <button type="button"
           #tooltip="matTooltip" [hidden]="hideHelp"
       (mouseenter)="$event.stopImmediatePropagation()"
@@ -30,7 +30,7 @@
             Please review and complete the form below. You may start a claim, save it, and continue to add to it later. Required fields are marked with a red asterisk <span style="color:red" >*</span>
           </div>
           <div class="col-md-6"></div>
-      
+
           </div>
           <div class="col-md-6"></div>
       </div>
@@ -87,7 +87,7 @@
               First claim approved?
             </p>
             <mat-radio-group
-              (focusin)="setHelpText(3, tooltip)" 
+              (focusin)="setHelpText(3, tooltip)"
               formControlName="isFirstClaimApproved"
               class="primary-radio-group horizontal-radio-group"
               (change)="selectDamageDates($event)"
@@ -111,13 +111,13 @@
         </div>
 
         <div class="row">
-          
+
           <div class="col-md-3 costCurrency">
             <p  style="font-size: 15px; margin-bottom: 10px !important">
               Total Net Invoices being Claimed
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-              
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -125,11 +125,11 @@
                   id="currencyBoxTotalInvoicesBeingClaimed"
                   formControlName="totalInvoicesBeingClaimed"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-              
+
             </mat-form-field>
           </div>
           <div class="col-md-3 costCurrency">
@@ -137,7 +137,7 @@
               Claim PST
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -145,11 +145,11 @@
                   id="currencyBoxClaimPST"
                   formControlName="claimPST"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
           </div>
           <div class="col-md-3 costCurrency">
@@ -157,7 +157,7 @@
               Claim Gross GST
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -165,19 +165,19 @@
                   id="currencyBoxClaimGrossGST"
                   formControlName="claimGrossGST"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
-          </div>  
+          </div>
           <div class="col-md-3 costCurrency">
             <p  style="font-size: 15px; margin-bottom: 10px !important">
               Total Actual Claim
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -185,11 +185,11 @@
                   id="currencyBoxTotalActualClaim"
                   formControlName="totalActualClaim"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
           </div>
 
@@ -198,7 +198,7 @@
               Claim Eligible GST
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -206,11 +206,11 @@
                   id="currencyBoxClaimEligibleGST"
                   formControlName="claimEligibleGST"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
           </div>
 
@@ -219,7 +219,7 @@
               Claim Total
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -227,16 +227,16 @@
                   id="currencyBoxTotalBeingClaimed"
                   formControlName="claimTotal"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
           </div>
-          
-         
-          
+
+
+
         </div>
       </ng-container>
       <br />
@@ -247,13 +247,13 @@
           <b>Decision</b>
         </div>
        <div class="row">
-        
+
         <div class="col-md-3 costCurrency">
           <p  style="font-size: 15px; margin-bottom: 10px !important">
             Claim Eligible GST
           </p>
           <mat-form-field appearance="outline" class="mat-form-round">
-      
+
             <div class="searchDiv">
               <input
                 (focusin)="setHelpText(15, tooltip)"
@@ -261,11 +261,11 @@
                 id="currencyBoxclaimEligibleGST"
                 formControlName="claimEligibleGST"
                 matInput
-                mask="separator.2" thousandSeparator="" decimalMarker="."
+                mask="separator.2" thousandSeparator="," decimalMarker="."
                 maxlength="100"/>
               <span class="currencyText">CA$</span>
             </div>
-      
+
           </mat-form-field>
         </div>
         <div class="col-md-3 costCurrency">
@@ -273,7 +273,7 @@
             Claim Total
           </p>
           <mat-form-field appearance="outline" class="mat-form-round">
-    
+
             <div class="searchDiv">
               <input
                 (focusin)="setHelpText(15, tooltip)"
@@ -281,11 +281,11 @@
                 id="currencyBoxclaimTotal"
                 formControlName="claimTotal"
                 matInput
-                mask="separator.2" thousandSeparator="" decimalMarker="."
+                mask="separator.2" thousandSeparator="," decimalMarker="."
                 maxlength="100"/>
               <span class="currencyText">CA$</span>
             </div>
-    
+
           </mat-form-field>
         </div>
         <div class="col-md-3 costCurrency">
@@ -293,7 +293,7 @@
             Approved Claim Total
           </p>
           <mat-form-field appearance="outline" class="mat-form-round">
-    
+
             <div class="searchDiv">
               <input
                 (focusin)="setHelpText(15, tooltip)"
@@ -301,19 +301,19 @@
                 id="currencyBoxapprovedClaimTotal"
                 formControlName="approvedClaimTotal"
                 matInput
-                mask="separator.2" thousandSeparator="" decimalMarker="."
+                mask="separator.2" thousandSeparator="," decimalMarker="."
                 maxlength="100"/>
               <span class="currencyText">CA$</span>
             </div>
-    
+
           </mat-form-field>
-        </div>  
+        </div>
         <div class="col-md-3 costCurrency">
           <p  style="font-size: 15px; margin-bottom: 10px !important">
             Less First $1,000
           </p>
           <mat-form-field appearance="outline" class="mat-form-round">
-    
+
             <div class="searchDiv">
               <input
                 (focusin)="setHelpText(15, tooltip)"
@@ -321,18 +321,18 @@
                 id="currencyBoxfirstClaimDeductible1000"
                 formControlName="firstClaimDeductible1000"
                 matInput
-                mask="separator.2" thousandSeparator="" decimalMarker="."
+                mask="separator.2" thousandSeparator="," decimalMarker="."
                 maxlength="100"/>
               <span class="currencyText">CA$</span>
             </div>
-    
+
           </mat-form-field>
         </div>
-  
+
       </div>
 
          <div class="row">
-  
+
           <div class="col-md-3 costCurrency">
             <p  style="font-size: 15px; margin-bottom: 10px !important">
               Approved Reimbursement %
@@ -346,7 +346,7 @@
                   id="currencyBoxapprovedReimbursement"
                   formControlName="approvedReimbursement"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
@@ -358,7 +358,7 @@
               Eligible Payable
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -366,11 +366,11 @@
                   id="currencyBoxeligiblePayable"
                   formControlName="eligiblePayable"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
           </div>
           <div class="col-md-3 costCurrency">
@@ -378,7 +378,7 @@
               Paid Claim Amount
             </p>
             <mat-form-field appearance="outline" class="mat-form-round">
-    
+
               <div class="searchDiv">
                 <input
                   (focusin)="setHelpText(15, tooltip)"
@@ -386,13 +386,13 @@
                   id="currencyBoxpaidClaimAmount"
                   formControlName="paidClaimAmount"
                   matInput
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-    
+
             </mat-form-field>
-          </div>  
+          </div>
         </div>
         <div class="row">
           <div class="col-md-3">
@@ -412,6 +412,6 @@
       </ng-container>
     }
     </form>
-    
+
   </mat-card-content>
 </mat-card>
diff --git a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-project-main-forms/recovery-plan/recovery-plan.component.html b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-project-main-forms/recovery-plan/recovery-plan.component.html
index df7b6b501..761f08f29 100644
--- a/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-project-main-forms/recovery-plan/recovery-plan.component.html
+++ b/dfa-public/src/UI/embc-dfa/src/app/sharedModules/forms/dfa-project-main-forms/recovery-plan/recovery-plan.component.html
@@ -1,7 +1,7 @@
 <mat-card class="card-align recoveryPlan" style="border:none;" [class.mat-elevation-z0]="true">
   <mat-card-content>
     <form [formGroup]="recoveryPlanForm">
-      
+
       <button type="button"
           #tooltip="matTooltip" [hidden]="hideHelp"
       (mouseenter)="$event.stopImmediatePropagation()"
@@ -30,7 +30,7 @@
             Please review and complete the form below. Required fields are marked with a red asterisk<span style="color:red" >*</span>
           </div>
           <div class="col-md-6"></div>
-      
+
           </div>
           <div class="col-md-6"></div>
       </div>
@@ -88,7 +88,7 @@
             Are the dates of damage the same dates provided on the application?<span style="color:red" >*</span>
           </p>
           <mat-radio-group
-            (focusin)="setHelpText(3, tooltip)" 
+            (focusin)="setHelpText(3, tooltip)"
             formControlName="isdamagedDateSameAsApplication"
             class="primary-radio-group horizontal-radio-group"
             required
@@ -354,7 +354,7 @@
         </div>
         <br />
         <div class="row">
-          
+
           <div class="col-md-4">
             <p  style="font-size: 15px; margin-bottom: 10px !important">
               Estimated completion date (month/year)
@@ -396,18 +396,18 @@
                   matInput
                        required
                   placeholder="Estimate or actual cost"
-                  mask="separator.2" thousandSeparator="" decimalMarker="."
+                  mask="separator.2" thousandSeparator="," decimalMarker="."
                   maxlength="100"/>
                 <span class="currencyText">CA$</span>
               </div>
-              
+
             </mat-form-field>
           </div>
-          
+
         </div>
       </ng-container>
-      
+
     </form>
-    
+
   </mat-card-content>
 </mat-card>