PIM-1700: Verified Grain - Yield Summary Grid - Frontend; improved th…

…e look of the page
bcgov · Dec 23, 2024 · 916f8ba · 916f8ba
1 parent 5a53960
commit 916f8ba
Show file tree

Hide file tree

Showing 20 changed files with 131 additions and 70 deletions.
diff --git a/...ain/angular/src/app/components/grower-contract-header/grower-contract-header.component.ts b/...ain/angular/src/app/components/grower-contract-header/grower-contract-header.component.ts
@@ -160,9 +160,9 @@ export class GrowerContractHeaderComponent {
 
     if (routerUrl.indexOf(ResourcesRoutes.VERIFIED_YIELD_GRAIN) > -1 ) {
       styles = {  
-        'border': '1px solid #DEC7DE',
+        'border': '1px solid #C4C4FF',
         'border-radius': '5px',
-        'background': '#FFF5FF'
+        'background': '#F5F5FF'
       }
     }
 

diff --git a/...gular/src/app/components/uw-comments/uw-comments-button/uw-comments-button.component.html b/...gular/src/app/components/uw-comments/uw-comments-button/uw-comments-button.component.html
@@ -1,9 +1,9 @@
-<ng-container [ngSwitch]="underwritingCommentTypeCode">
-    <button *ngSwitchCase="'DOP'" mat-raised-button class="secondary header-button" (click)="onLoadComments()">
+<ng-container>
+    <button *ngIf="underwritingCommentTypeCode == 'DOP'" mat-raised-button class="secondary header-button" (click)="onLoadComments()">
         <mat-icon class="button-mat-icon" [svgIcon]="hasComments() ? 'insert_comment' : 'mode_comment'"></mat-icon>DOP
         Comments
     </button>
-    <span *ngSwitchCase="'INV'">
+    <span *ngIf="underwritingCommentTypeCode == 'INV' || underwritingCommentTypeCode == 'VY' ">
         <mat-icon matTooltip="Comments" (click)="onLoadComments()"
             [svgIcon]="hasComments() ? 'insert_comment' : 'mode_comment'"></mat-icon>
     </span>

diff --git a/...angular/src/app/components/uw-comments/uw-comments-button/uw-comments-button.component.ts b/...angular/src/app/components/uw-comments/uw-comments-button/uw-comments-button.component.ts
@@ -5,15 +5,22 @@ import { UwCommentsDialogComponent } from "../uw-comments-dialog/uw-comments-dia
 
 export interface DialogData {
     underwritingCommentTypeCode: string;
+    // Inventory and DOP field data
     annualFieldDetailId: number;
+    fieldId: number;
+    fieldName: string;
+    legalLocation: string;
+    // DOP policy data
     growerContractYearId: number;
     declaredYieldContractGuid: string;
     policyNumber: string;
     growerName: string;
     growerNumber: string;
-    fieldId: number;
-    fieldName: string;
-    legalLocation: string;
+    // Verified Yield summary data:
+    verifiedYieldSummaryGuid: string;
+    commodityName: string,
+    insuredAcres: string,
+    // common data
     uwComments: UnderwritingComment[];
 }
 
@@ -33,6 +40,9 @@ export class UwCommentsButtonComponent {
     @Input() fieldId: number;
     @Input() fieldName: string;
     @Input() legalLocation: string;
+    @Input() verifiedYieldSummaryGuid: string;
+    @Input() commodityName: string;
+    @Input() insuredAcres: string;
     @Input() uwComments: UnderwritingComment[];
     @Output() onDone = new EventEmitter<UnderwritingComment[]>();
 
@@ -66,6 +76,9 @@ export class UwCommentsButtonComponent {
             fieldId: this.fieldId,
             fieldName: this.fieldName,
             legalLocation: this.legalLocation,
+            verifiedYieldSummaryGuid: this.verifiedYieldSummaryGuid,
+            commodityName: this.commodityName,
+            insuredAcres: this.insuredAcres,
             uwComments: this.uwCommentsForDialog
         };
     }

diff --git a/...gular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.html b/...gular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.html
@@ -4,6 +4,28 @@
         <div class="row-group-left">
             <div class="comments-container comments-info">
 
+                <!-- Verified Yield Summary Comments headers -->
+                <div class="five-columns vys-comments-header" *ngIf="data.underwritingCommentTypeCode === 'VY'">
+                    <div class="justify-left padding-bottom">
+                        Commodity
+                        <span class="header">{{ data.commodityName }}</span>
+                    </div>
+                    <div class="justify-left padding-bottom">
+                        Insured Acres
+                        <span class="header">{{ data.insuredAcres }}</span>
+                    </div>
+                    <div class="justify-left padding-bottom">
+                        <!-- empty div -->
+                    </div>
+                    <div class="justify-left padding-bottom"></div>
+                    <div class="justify-right padding-bottom">
+                        <button *ngIf="securityUtilService.canEditInventory()" mat-raised-button color="secondary"
+                            class="header-button" (click)="onAddNewComment()">
+                            <mat-icon>add</mat-icon> Add Comment
+                        </button>
+                    </div>
+                </div>
+
                 <!-- DOP Comments headers -->
                 <div class="five-columns dop-comments-header" *ngIf="data.underwritingCommentTypeCode === 'DOP'">
                     <div class="justify-left padding-bottom">

diff --git a/...gular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.scss b/...gular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.scss
@@ -19,6 +19,11 @@
         &.comments-info {
           grid-template-columns: 1fr 1fr 1fr 5fr 1fr;
 
+          .vys-comments-header {
+            display: grid;
+            grid-template-columns: 2fr 1fr 1fr 2fr 1fr;
+          }
+
           .dop-comments-header {
             display: grid;
             grid-template-columns: 1fr 1.5fr 1fr 3fr 1fr;

diff --git a/...angular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.ts b/...angular/src/app/components/uw-comments/uw-comments-dialog/uw-comments-dialog.component.ts
@@ -26,6 +26,8 @@ export class UwCommentsDialogComponent {
                 return "Inventory Comments";
             case UW_COMMENT_TYPE_CODE.DOP_GENERAL:
                 return "DOP Comments";
+            case UW_COMMENT_TYPE_CODE.VERIFIED_YIELD_GENERAL:
+                return "Verified Yield Summary Comments"
             default:
                 return "Underwriting Comments";
         }
@@ -44,6 +46,7 @@ export class UwCommentsDialogComponent {
             underwritingComment: '',
             growerContractYearId: this.data.growerContractYearId,
             declaredYieldContractGuid: this.data.declaredYieldContractGuid,
+            verifiedYieldSummaryGuid: this.data.verifiedYieldSummaryGuid,
             createUser: '',
             createDate: '',
             updateUser: '',

diff --git a/...app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.html b/...app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.html
@@ -1,10 +1,10 @@
 <div class="plcy-inv-cmdty-totals-header"
     style="grid-template-columns: 123px 250px 180px 125px 115px 500px 60px; padding-left: 10px;">
 
-    <div class="table-header border-top border-left" style="grid-column-start: 1; grid-column-end: 6; padding-top: 8px;">
+    <div class="table-header border-top border-left" style="text-align: left; padding-left: 6px; grid-column-start: 1; grid-column-end: 6; padding-top: 8px; background-color: #F5F5FF;">
         Amendments
     </div>
-    <div class="table-header border-top border-right" style="grid-column-start: 6; grid-column-end: 8; text-align: right; height:40px; padding-top:2px; padding-right: 2px;">
+    <div class="table-header border-top border-right" style="grid-column-start: 6; grid-column-end: 8; text-align: right; height:40px; padding-top:2px; padding-right: 2px; background-color: #F5F5FF;">
         <button 
             mat-raised-button class="secondary" 
             (click)="addAmendment()">
@@ -34,8 +34,8 @@
         Actions
     </div>
 
-    <div *ngIf="fieldOptions"
-        class="grain-unsdd-inv-tot-cmdty-container"
+    <div *ngIf="fieldOptions && cropCommodityOptions"
+        class="verified-yield-amendments-container"
         style="grid-template-columns: 123px 250px 180px 125px 115px 500px 60px; margin-left: 0px;">
         <verified-yield-amendment *ngFor="let amendment of amendments" [amendment]="amendment"
             [amendmentsFormArray]="amendmentsFormArray" 

diff --git a/...app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.scss b/...app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.scss
@@ -0,0 +1,3 @@
+  ::ng-deep .verified-yield-amendments-container > verified-yield-amendment:nth-child(2n+1) > #divAmendmentContent {
+    background: #F5F5FF;
+}
diff --git a/...c/app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.ts b/...c/app/components/verified-yield/amendment-list/verified-yield-amendment-list.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { UntypedFormArray, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
 import { VerifiedYieldAmendment } from 'src/app/conversion/models-yield';
 import { AnnualField, CropCommodityList } from 'src/app/conversion/models';

diff --git a/...gular/src/app/components/verified-yield/amendment/verified-yield-amendment.component.html b/...gular/src/app/components/verified-yield/amendment/verified-yield-amendment.component.html
@@ -1,5 +1,5 @@
-<div [formGroup]="amendmentFormGroup" style="display: contents;">
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom border-left" style="padding-left: 6px;">
+<div id="divAmendmentContent" [formGroup]="amendmentFormGroup" style="display: contents;">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom border-left" style="padding-left: 6px; background-color: inherit;">
 
         <mat-form-field appearance="fill">
             <mat-select hideSingleSelectionIndicator="true"
@@ -11,7 +11,7 @@
         </mat-form-field>
 
     </div>
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom center">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom center" style="background-color: inherit;">
 
         <mat-form-field appearance="fill" style="width: 100%;">
             <input 
@@ -32,7 +32,7 @@
         <mat-icon style="padding-right:10px; font-size:18px; margin-top:6px;" matTooltip="Editable field">edit</mat-icon>
 
     </div>
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom center">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill border-right border-bottom center" style="background-color: inherit;">
         <mat-form-field appearance="fill">
             <input 
                 type="text" 
@@ -52,7 +52,7 @@
         <mat-icon style="padding-right:10px; font-size:18px; margin-top:6px;" matTooltip="Editable field">edit</mat-icon>
     </div>
 
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill number border-right border-bottom">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill number border-right border-bottom" style="background-color: inherit;">
         <mat-form-field appearance="fill">
             <input matInput matInputCommified formControlName="yieldPerAcre" maxlength="10"
                 (keypress)="numberOnly($event)" (blur)="updateYieldPerAcre()" />
@@ -61,7 +61,7 @@
             matTooltip="Editable field">edit</mat-icon>
     </div>
 
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill number border-right border-bottom">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="inventory-fill number border-right border-bottom" style="background-color: inherit;">
         <mat-form-field appearance="fill">
             <input matInput matInputCommified formControlName="acres" maxlength="10"
                 (keypress)="numberOnly($event)" (blur)="updateAcres()" />
@@ -70,7 +70,7 @@
             matTooltip="Editable field">edit</mat-icon>
     </div> 
 
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="border-right border-bottom center">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="border-right border-bottom center" style="background-color: inherit;">
         <mat-form-field appearance="fill"  style="width: 100%;" class="inventory-fill">
             <textarea matInput formControlName="rationale" 
                 cdkTextareaAutosize #autosize="cdkTextareaAutosize"
@@ -83,7 +83,7 @@
             matTooltip="Editable field">edit</mat-icon>
     </div>
 
-    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="readonly border-right border-bottom center">
+    <div *ngIf="amendmentFormGroup.value.deletedByUserInd != true" class="readonly border-right border-bottom center" style="background-color: inherit;">
         <mat-icon *ngIf="securityUtilService.canEditVerifiedYield()"
             matTooltip="Delete amendment." 
             style="margin-left: 4px; margin-right: 4px;"

diff --git a/...app/components/verified-yield/commodity-list/verified-yield-commodity-list.component.html b/...app/components/verified-yield/commodity-list/verified-yield-commodity-list.component.html
@@ -12,10 +12,10 @@
         </span>
     </div>
 
-    <div class="table-header border-top border-left" style="grid-column-start: 1; grid-column-end: 7; padding-top: 8px;">
+    <div class="table-header border-top border-left" style="text-align: left; padding-left: 6px; padding-top: 8px; background-color: #F5F5FF; grid-column-start: 1; grid-column-end: 7;">
         Commodity Totals
     </div>
-    <div class="table-header border-top border-right" style="grid-column-start: 7; grid-column-end: 10; text-align: right; height:40px; padding-top:2px; padding-right: 1px;">
+    <div class="table-header border-top border-right" style="grid-column-start: 7; grid-column-end: 10; text-align: right; height:40px; padding-top:2px; padding-right: 1px; background-color: #F5F5FF;">
         <button 
             mat-raised-button class="secondary" 
             (click)="goToYieldCalculatorLink()">
@@ -55,10 +55,11 @@
         Actions
     </div>
 
-    <div class="grain-unsdd-inv-tot-cmdty-container"
+    <div class="verified-yield-commodities-container"
         style="grid-template-columns: 140px 100px 115px 115px 115px 115px 130px 125px 60px; margin-left: 0px;">
         <verified-yield-commodity *ngFor="let commodity of commodities" [commodity]="commodity"
             [commoditiesFormArray]="commoditiesFormArray"
+            [isUnsaved]="isUnsaved"
             style="display: contents;"></verified-yield-commodity>
 
     </div>

diff --git a/...app/components/verified-yield/commodity-list/verified-yield-commodity-list.component.scss b/...app/components/verified-yield/commodity-list/verified-yield-commodity-list.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .verified-yield-commodities-container > verified-yield-commodity:nth-child(2n+1) > #divCommodityContent {
+    background: #F5F5FF;
+}
diff --git a/...gular/src/app/components/verified-yield/commodity/verified-yield-commodity.component.html b/...gular/src/app/components/verified-yield/commodity/verified-yield-commodity.component.html
@@ -1,16 +1,16 @@
-<div [formGroup]="commodityFormGroup" style="display: contents;">
-    <div class="readonly border-right border-bottom border-left" style="padding-left: 6px;">
+<div id="divCommodityContent" [formGroup]="commodityFormGroup" style="display: contents;">
+    <div class="readonly border-right border-bottom border-left" style="padding-left: 6px; background-color: inherit;">
         {{ commodityFormGroup.value.cropCommodityName | titlecase }}
         <span *ngIf="commodityFormGroup.value.isPedigreeInd == true" >&nbsp; Pedigreed</span>
     </div>
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         {{ commodityFormGroup.value.totalInsuredAcres | number: '1.0-1' }}
     </div>
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         {{ commodityFormGroup.value.harvestedAcres | number: '1.0-1' }}
     </div>
 
-    <div class="inventory-fill number border-right border-bottom">
+    <div class="inventory-fill number border-right border-bottom" style="background-color: inherit;">
         <mat-form-field appearance="fill">
             <input matInput matInputCommified formControlName="harvestedAcresOverride" maxlength="10"
                 (keypress)="numberOnly($event)" (blur)="updateHarvestedAcresOverride()" />
@@ -19,14 +19,14 @@
             matTooltip="Harvested Acres Override is writeable">edit</mat-icon>
     </div>
 
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         {{ commodityFormGroup.value.productionGuarantee | number: '1.0-1' }}
     </div>
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         {{ commodityFormGroup.value.harvestedYield | number: '1.0-3' }}
     </div>
 
-    <div class="inventory-fill number border-right border-bottom">
+    <div class="inventory-fill number border-right border-bottom" style="background-color: inherit;">
         <mat-form-field appearance="fill">
             <input matInput matInputCommified formControlName="harvestedYieldOverride" maxlength="10"
                 (keypress)="numberOnly($event)" (blur)="updateHarvestedYieldOverride()" />
@@ -35,11 +35,11 @@
             matTooltip="Harvested Yield Override is writeable">edit</mat-icon>
     </div> 
 
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         {{ commodityFormGroup.value.yieldPerAcre | number: '1.0-3' }}
     </div>
 
-    <div class="readonly border-right border-bottom center">
+    <div class="readonly border-right border-bottom center" style="background-color: inherit;">
         <mat-icon *ngIf="securityUtilService.canEditVerifiedYield()"
             matTooltip="Clear editable fields for commodity." 
             style="margin-left: 4px; margin-right: 4px;"

diff --git a/...src/app/components/verified-yield/summary-list/verified-yield-summary-list.component.html b/...src/app/components/verified-yield/summary-list/verified-yield-summary-list.component.html
@@ -1,5 +1,5 @@
 <div class="plcy-inv-cmdty-totals-header"
-    style="grid-template-columns: 140px 100px 115px 115px 115px 115px 130px 125px 60px; padding-left: 10px;">
+    style="grid-template-columns: 140px 100px 115px 115px 115px 115px 130px 125px 100px; padding-left: 10px;">
 
     <div *ngIf="isUnsaved" class="table-header border-top border-left border-right"
         style="grid-column-start: 1; grid-column-end: 10;">
@@ -12,7 +12,7 @@
         </span>
     </div>
 
-    <div class="table-header border-top border-left border-right" style="grid-column-start: 1; grid-column-end: 10; padding-top: 8px;">
+    <div class="table-header border-top border-left border-right" style="text-align: left; padding-left: 6px; grid-column-start: 1; grid-column-end: 10; padding-top: 8px; background-color: #F5F5FF;">
         Yield Summary
     </div>
 
@@ -45,10 +45,12 @@
         Comments
     </div>
 
-    <div class="grain-unsdd-inv-tot-cmdty-container"
-        style="grid-template-columns: 140px 100px 115px 115px 115px 115px 130px 125px 60px; margin-left: 0px;">
-        <verified-yield-summary *ngFor="let summary of summaries" [summary]="summary"
+    <div class="verified-yield-summaries-container"
+        style="grid-template-columns: 140px 100px 115px 115px 115px 115px 130px 125px 100px; margin-left: 0px;">
+        <verified-yield-summary *ngFor="let summary of summaries" 
+            [summary]="summary"
             [summariesFormArray]="summariesFormArray"
+
             style="display: contents;"></verified-yield-summary>
     </div>
 

diff --git a/...src/app/components/verified-yield/summary-list/verified-yield-summary-list.component.scss b/...src/app/components/verified-yield/summary-list/verified-yield-summary-list.component.scss
@@ -0,0 +1,3 @@
+::ng-deep .verified-yield-summaries-container > verified-yield-summary:nth-child(2n+1) > #divSummaryContent {
+    background: #F5F5FF;
+}