feat: #628 commenting closed date clarification (#636)

* Add "getCommentingClosingDate" getter function * Adjust public details page information reorganized and styling change. * Add custom ngx-bootstrap tooltip style * Minor icon style change. * Dummy change to trigger pipeline for api. * Minor adjustment. * Use darkgrey for muted text for them. * Adjust commenting-opened-on logic * Use matTooltip and some style change.
bcgov · Jun 10, 2024 · a08a7a7 · a08a7a7
1 parent 66e4137
commit a08a7a7
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 51 deletions.
diff --git a/api/src/migrations/README.md b/api/src/migrations/README.md
@@ -11,4 +11,3 @@ On execution, the migration config (in ormconfig-migration-{main|test}.ts loads
 ### To create a new migration empty template
 - npm run typeorm migration:create -- -o ./src/migrations/{main|test}/{name-of-new-migration-file}
   ( -o option: Need to ensure a .js javascript migration is created, not a .ts typescript, to run migrations at startup).
-
diff --git a/public/src/app/applications/details-panel/details-panel.component.html b/public/src/app/applications/details-panel/details-panel.component.html
@@ -65,60 +65,67 @@ <h3>Geographic Shape Information
         <h3>FOM Details</h3>
         <ul class="meta-container">
           <li>
-            FOM Holder:&nbsp;&nbsp;{{project.forestClient.name | titlecase}}
+            FOM Holder: <span class="bold">{{project.forestClient.name | titlecase}}</span>
           </li>
           <li *ngIf="project.bctsMgrName && project.bctsMgrName.length > 0">
-            Timber Sales Manager Name:&nbsp;&nbsp;{{project.bctsMgrName | titlecase}}
+            Timber Sales Manager Name: <span class="bold">{{project.bctsMgrName | titlecase}}</span>
           </li>
           <li>
-            <strong>FSP ID:&nbsp;&nbsp;{{project.fspId}}</strong>
+            FSP ID: <span class="bold">{{project.fspId}}</span>
+          </li>
+          <li>
+            Period of operations: 
+                <span class="bold" *ngIf="project.operationStartYear">{{project.operationStartYear}} to {{project.operationEndYear}}</span>
+                <span class="bold" *ngIf="!project.operationStartYear">N/A</span>
+          </li>
+          <li>
+              This FOM is valid until: <span class="bold">{{project.validityEndDate | date: 'longDate'}}</span>
+              <span class="info-validityEndDate"
+                matTooltip="{{periodOperationsTooltipTxt}}"
+                matTooltipPosition="below"
+                matTooltipClass="tooltip-info"
+                matTooltipShowDelay="300"
+              ></span>             
+            <div class="text-muted--margin-top">
+                {{periodOperationsTxt}}
+            </div>
           </li>
         </ul>
-        <br/>
+
+        <hr/>
+
+        <div style="display: flex;"> <!-- Status div-->
+          <h3 style="margin-right: 0.2rem;">
+            Status: 
+            <span
+              *ngIf="project.workflowState.code === workflowStatus['COMMENT_OPEN'].code" 
+              class="badge text-bg-info rounded-pill commenting-open">
+                {{workflowStatus['COMMENT_OPEN'].description}}
+            </span> <!-- only in commenting open the design is to show it in rouded-green badge-->
+          </h3>
+          <span
+            *ngIf="project.workflowState.code !== workflowStatus['COMMENT_OPEN'].code">
+            {{project.workflowState.description}}
+          </span>
+        </div>
         <div>
-          <div class="status"
-            [ngClass]="{
-              'commenting-open': project.workflowState.code === workflowStatus['COMMENT_OPEN'].code,
-              'commenting-closed': project.workflowState.code === workflowStatus['COMMENT_CLOSED'].code,
-              'finalized': project.workflowState.code === workflowStatus['FINALIZED'].code,
-              'expired': project.workflowState.code === workflowStatus['EXPIRED'].code
-            }">
-            <div>
-              <strong>
-                Status: {{project.workflowState.description | titlecase}}
-                {{
-                  (project.workflowState.code === workflowStatus['FINALIZED'].code ||
-                  project.workflowState.code === workflowStatus['EXPIRED'].code) ?
-                  ', Commenting Closed': ''
-                }}
-              </strong>
-            </div>
+          <div *ngIf="project.workflowState.code === workflowStatus['COMMENT_OPEN'].code">
+            You can comment until: 
+            <span class="bold">
+              {{getCommentingClosingDate(project.commentingClosedDate) | date:'longDate'}} at 11:59pm
+            </span>
           </div>
-
-          <div>
-            <div class="status-msg">
-              Commenting opened for this FOM on {{project.commentingOpenDate | date:'longDate'}}.
-              <div *ngIf="project.operationStartYear && project.operationEndYear">
-                Period of operations for this FOM is from {{project.operationStartYear}} to {{project.operationEndYear}}.
-              </div>
-              <div *ngIf="project.workflowState.code === workflowStatus['COMMENT_OPEN'].code">
-                This FOM is currently accepting comments until {{project.commentingClosedDate | date:'longDate'}}.
-              </div>
-              <div *ngIf="project.workflowState.code !== workflowStatus['COMMENT_OPEN'].code">
-                Commenting closed for this FOM on {{project.commentingClosedDate | date:'longDate'}}.
-              </div>
-              <div>
-                The validity period for this FOM ends on {{project.validityEndDate | date: 'longDate'}}.
-                <div style="margin-top: 12px;">
-                    This FOM can be relied upon by the FOM holder for the purpose of a cutting permit or road permit application, until the date three years after commencement of the public review and commenting period. FOMs published by BC Timber Sales can be relied upon for the purpose of a cutting permit or road permit application, or the issuance of a Timber Sales License until the date three years after conclusion of the public review and commenting period.
-                </div>
-              </div>
-            </div>
-            <button class="submit-comment-btn btn btn-primary" 
-                    (click)="addComment()" 
-                    *ngIf="project.workflowState.code === workflowStatus['COMMENT_OPEN'].code">
-                    Submit a Comment</button>
+          <div class="text-muted" *ngIf="project.workflowState.code !== workflowStatus['COMMENT_OPEN'].code">
+            Commenting closed on {{project.commentingClosedDate | date:'longDate'}}.
+          </div>
+          <div class="text-muted" *ngIf="project.workflowState.code == workflowStatus['COMMENT_OPEN'].code">
+            Commenting opened on {{project.commentingOpenDate | date:'longDate'}}
           </div>
+
+          <button class="submit-comment-btn btn btn-primary" 
+                  (click)="addComment()" 
+                  *ngIf="project.workflowState.code === workflowStatus['COMMENT_OPEN'].code">
+                  Submit a Comment</button>
         </div>
       </section>
       <section *ngIf="attachments.length > 0">
@@ -142,4 +149,4 @@ <h3>Attachments</h3>
       </section>
     </div>
   </div>
-</div>
+</div>
diff --git a/public/src/app/applications/details-panel/details-panel.component.scss b/public/src/app/applications/details-panel/details-panel.component.scss
@@ -4,6 +4,14 @@
   padding: 0;
 }
 
+.text-muted {
+    color: $color-muted  !important;
+    &--margin-top {
+        @extend .text-muted;
+        margin-top: 0.5rem;
+    }
+}
+
 section {
   padding: 1.25rem 1.5rem;
   border-bottom: 1px solid $gray2;
@@ -27,6 +35,26 @@ section {
   }
 }
 
+// It isn't easy to custimize tooltip.
+// Currently use this css selector solution found for Angular 15
+// : https://stackoverflow.com/questions/55973433/mattooltip-how-can-i-make-the-box-fit-the-text
+@media (min-width:480px) {
+  ::ng-deep {
+    .tooltip-info .mdc-tooltip__surface {
+      min-width: 350px !important;
+      text-align: left !important;
+    }
+  }
+}
+@media (max-width:480px) {
+  ::ng-deep {
+    .tooltip-info .mdc-tooltip__surface {
+      max-width: 150px !important;
+      text-align: left !important;
+    }
+  }
+}
+
 .app-detail {
   line-height: normal;
 }
@@ -92,6 +120,16 @@ section {
   }
 }
 
+.info-validityEndDate {
+    padding-top: 3px;
+    padding-left: 1.01rem;
+    margin-left: 3px;
+    background-position: left center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-image: url("../../../assets/images/outline-info-24px.svg");
+}
+
 .commenting-open {
   background-image: url("../../../assets/images/baseline-insert_comment-24px.svg");
 }
@@ -121,6 +159,19 @@ section {
   background-image: url("../../../assets/images/baseline-cancel-24px.svg");
 }
 
+.badge.commenting-open {
+    padding-top: 0.5rem;
+    padding-right: 1.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 2rem;
+    background-color: rgba(104, 247, 74, 0.5) !important;
+    background-image: url("../../../assets/images/baseline-check-24px.svg");
+    background-repeat: no-repeat;
+    background-position: 5% 20%;
+    font-size: 75%;
+    color: $gray7 !important;
+}
+
 // Meta
 .meta-container {
   position: relative;

diff --git a/public/src/app/applications/details-panel/details-panel.component.ts b/public/src/app/applications/details-panel/details-panel.component.ts
@@ -1,5 +1,6 @@
 import { CommonModule } from '@angular/common';
 import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 import {
     AttachmentResponse, AttachmentService, ProjectResponse, ProjectService,
     SpatialFeaturePublicResponse, SpatialFeatureService, WorkflowStateCode
@@ -8,17 +9,20 @@ import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons';
 import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
 import { UrlService } from '@public-core/services/url.service';
+import { getCommentingClosingDate } from '@public-core/utils/constants/appUtils';
 import { ConfigService } from '@utility/services/config.service';
 import { FeatureSelectService } from '@utility/services/featureSelect.service';
 import { DetailsMapComponent } from 'app/applications/details-panel/details-map/details-map.component';
 import { ShapeInfoComponent } from 'app/applications/details-panel/shape-info/shape-info.component';
 import { saveAs } from "file-saver";
 import * as _ from 'lodash';
+import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { Subject, forkJoin } from 'rxjs';
 import { take, takeUntil } from 'rxjs/operators';
 import { CommentModalComponent } from '../../comment-modal/comment-modal.component';
 import { Filter } from '../utils/filter';
 
+
 import moment = require('moment');
 
 /**
@@ -32,7 +36,8 @@ import moment = require('moment');
   standalone: true,
   imports: [
     FontAwesomeModule, CommonModule, ShapeInfoComponent, 
-    CommentModalComponent, DetailsMapComponent
+    CommentModalComponent, DetailsMapComponent, TooltipModule,
+    MatTooltipModule
   ],
   selector: 'app-details-panel',
   templateUrl: './details-panel.component.html',
@@ -53,6 +58,10 @@ export class DetailsPanelComponent implements OnDestroy, OnInit {
   public projectIdFilter = new Filter<string>({ filter: { queryParam: 'id', value: null } });
   public attachments: AttachmentResponse[];
   public faArrowUpRightFromSquare = faArrowUpRightFromSquare;
+  public getCommentingClosingDate = getCommentingClosingDate;
+
+  public periodOperationsTxt = "This FOM can be relied upon by the FOM holder for the purpose of a cutting permit or road permit application, until the date three years after commencement of the public review and commenting period. FOMs published by BC Timber Sales can be relied upon for the purpose of a cutting permit or road permit application, or the issuance of a Timber Sales License until the date three years after conclusion of the public review and commenting period."
+  public periodOperationsTooltipTxt = "An FSP holder has three years to apply for a cutting permit or road permit for cutblocks and roads displayed on a FOM. This is called the validity period, it starts on the day commenting opens on a FOM. For BC Timber Sales the validity period starts on the day commenting closes."
 
   constructor(
     public modalService: NgbModal,

diff --git a/public/src/assets/styles/layout/layout.scss b/public/src/assets/styles/layout/layout.scss
@@ -59,8 +59,8 @@ main {
 }
 
 hr {
-  margin-top: 2.5rem;
-  margin-bottom: 2.25rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
   border-width: 2px;
 }
 

diff --git a/public/src/assets/styles/themes/default.scss b/public/src/assets/styles/themes/default.scss
@@ -32,7 +32,7 @@ $gray0:                         #f8f9fa;
 // Font
 $color:                         $gray9;
 $color-inverted:                #fff;
-$color-muted:                   $gray5;
+$color-muted:                   darkgrey;
 
 // Background Colors
 $bg-dark:                       $primary;

diff --git a/public/src/core/utils/constants/appUtils.ts b/public/src/core/utils/constants/appUtils.ts
@@ -1,4 +1,5 @@
 import { SpatialObjectCodeEnum } from '@api-client';
+import moment = require('moment');
 
 export const DELIMITER = {
   PIPE: '|'
@@ -31,3 +32,10 @@ export class AppUtils {
     return JSON.parse(JSON.stringify(obj));
   } 
 }
+
+export const getCommentingClosingDate = (commentingClosedDate: string) => {
+    // Note: commenting_closingDate (inclusive) = commenting_closedDate (exclusive) - 1 day
+    // The value should only be used for display, not to pass to backend.
+    const commentingClosingDate = moment(commentingClosedDate).add(-1, 'd');
+    return commentingClosingDate.format('YYYY-MM-DD')
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,4 +11,3 @@ On execution, the migration config (in ormconfig-migration-{main\|test}.ts loads
		### To create a new migration empty template
		- npm run typeorm migration:create -- -o ./src/migrations/{main\|test}/{name-of-new-migration-file}
		( -o option: Need to ensure a .js javascript migration is created, not a .ts typescript, to run migrations at startup).