From 969df55dbaae338dc8865e43f0144b72d2b09911 Mon Sep 17 00:00:00 2001 From: Ian Liu Date: Mon, 3 Jun 2024 16:31:06 -0700 Subject: [PATCH 1/9] Add "getCommentingClosingDate" getter function --- public/src/core/utils/constants/appUtils.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/public/src/core/utils/constants/appUtils.ts b/public/src/core/utils/constants/appUtils.ts index 6ffcd2941..8b35e6652 100644 --- 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 + // 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') +} \ No newline at end of file From aeadc95d5c3865ce3effe0b259e1adc4e26552d4 Mon Sep 17 00:00:00 2001 From: Ian Liu Date: Mon, 3 Jun 2024 16:32:58 -0700 Subject: [PATCH 2/9] Adjust public details page information reorganized and styling change. --- .../details-panel.component.html | 69 +++++++++++++++---- .../details-panel.component.scss | 31 +++++++++ .../details-panel/details-panel.component.ts | 9 ++- public/src/assets/styles/layout/layout.scss | 4 +- 4 files changed, 95 insertions(+), 18 deletions(-) diff --git a/public/src/app/applications/details-panel/details-panel.component.html b/public/src/app/applications/details-panel/details-panel.component.html index 2d0d92953..cfce64e0e 100644 --- a/public/src/app/applications/details-panel/details-panel.component.html +++ b/public/src/app/applications/details-panel/details-panel.component.html @@ -65,18 +65,61 @@

Geographic Shape Information

FOM Details

-
+ +
+ +
+

+ Status: + + {{workflowStatus['COMMENT_OPEN'].description}} + +

+ + {{project.workflowState.description}} + +
-
+ You can comment until: + + {{getCommentingClosingDate(project.commentingClosedDate) | date:'longDate'}} at 11:59pm + +
+
+ Commenting closed on {{project.commentingClosedDate | date:'longDate'}}. +
+
+ Commenting opened on {{project.commentingOpenDate | date:'longDate'}} +
+ +
-
- Commenting opened for this FOM on {{project.commentingOpenDate | date:'longDate'}}. -
+ + + + +
- - -
- - - - - - -
+
diff --git a/public/src/core/utils/constants/appUtils.ts b/public/src/core/utils/constants/appUtils.ts index 8b35e6652..40dddb56c 100644 --- a/public/src/core/utils/constants/appUtils.ts +++ b/public/src/core/utils/constants/appUtils.ts @@ -34,7 +34,7 @@ export class AppUtils { } export const getCommentingClosingDate = (commentingClosedDate: string) => { - // Note: commenting_closingDate (inclusive) = commenting_closedDate (exclusive) - 1 + // 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') From 225c5368fb5699b3fdebcaf314b5c2d7cd364f77 Mon Sep 17 00:00:00 2001 From: Ian Liu Date: Tue, 4 Jun 2024 15:47:57 -0700 Subject: [PATCH 7/9] Use darkgrey for muted text for them. --- public/src/assets/styles/themes/default.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/assets/styles/themes/default.scss b/public/src/assets/styles/themes/default.scss index 7d367f449..9171170fc 100644 --- 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; From aa670018c793c4dbe3de4272e4bdf02160a05a39 Mon Sep 17 00:00:00 2001 From: Ian Liu Date: Tue, 4 Jun 2024 16:29:29 -0700 Subject: [PATCH 8/9] Adjust commenting-opened-on logic --- .../app/applications/details-panel/details-panel.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/src/app/applications/details-panel/details-panel.component.html b/public/src/app/applications/details-panel/details-panel.component.html index 00cdc7667..72399cc3e 100644 --- a/public/src/app/applications/details-panel/details-panel.component.html +++ b/public/src/app/applications/details-panel/details-panel.component.html @@ -117,7 +117,7 @@

Commenting closed on {{project.commentingClosedDate | date:'longDate'}}.
-
+
Commenting opened on {{project.commentingOpenDate | date:'longDate'}}
From 12e9cffb4c1ef429981230f0654a28a04c962a78 Mon Sep 17 00:00:00 2001 From: Ian Liu Date: Thu, 6 Jun 2024 22:12:46 -0700 Subject: [PATCH 9/9] Use matTooltip and some style change. --- .../details-panel.component.html | 21 ++++++------- .../details-panel.component.scss | 30 +++++++++++-------- .../details-panel/details-panel.component.ts | 7 ++++- 3 files changed, 35 insertions(+), 23 deletions(-) diff --git a/public/src/app/applications/details-panel/details-panel.component.html b/public/src/app/applications/details-panel/details-panel.component.html index 72399cc3e..133d15bfb 100644 --- a/public/src/app/applications/details-panel/details-panel.component.html +++ b/public/src/app/applications/details-panel/details-panel.component.html @@ -74,19 +74,20 @@

FOM Details

FSP ID: {{project.fspId}}
  • - Periods of operations: + Period of operations: {{project.operationStartYear}} to {{project.operationEndYear}} N/A
  • - This FOM is valid until: {{project.validityEndDate | date: 'longDate'}} - - -
    - 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. + This FOM is valid until: {{project.validityEndDate | date: 'longDate'}} + +
    + {{periodOperationsTxt}}
    • @@ -148,4 +149,4 @@

    Attachments

    - + \ No newline at end of file diff --git a/public/src/app/applications/details-panel/details-panel.component.scss b/public/src/app/applications/details-panel/details-panel.component.scss index 762fc6c97..83d24ec9f 100644 --- a/public/src/app/applications/details-panel/details-panel.component.scss +++ b/public/src/app/applications/details-panel/details-panel.component.scss @@ -6,9 +6,9 @@ .text-muted { color: $color-muted !important; - &--italic { + &--margin-top { @extend .text-muted; - margin-top: 0.5rem;font-style: italic; + margin-top: 0.5rem; } } @@ -35,17 +35,23 @@ section { } } -// This is ngx-bootstrap tooltip custom style. -// Ngx-bootstrap seems have issue for tooltip custom styling, -// This is probably the best solution. If there is more complex -// style, consider using other tooltip, such as matTooltip. -::ng-deep { - .tooltip-inner { - background-color: $gray8 !important; - color: white !important; +// 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; + } } - .tooltip.top, .tooltip-arrow:before, tooltip.top, .tooltip-arrow { - border-bottom-color: $gray8 !important; +} +@media (max-width:480px) { + ::ng-deep { + .tooltip-info .mdc-tooltip__surface { + max-width: 150px !important; + text-align: left !important; + } } } diff --git a/public/src/app/applications/details-panel/details-panel.component.ts b/public/src/app/applications/details-panel/details-panel.component.ts index 756d1fae0..072515696 100644 --- 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 @@ -35,7 +36,8 @@ import moment = require('moment'); standalone: true, imports: [ FontAwesomeModule, CommonModule, ShapeInfoComponent, - CommentModalComponent, DetailsMapComponent, TooltipModule + CommentModalComponent, DetailsMapComponent, TooltipModule, + MatTooltipModule ], selector: 'app-details-panel', templateUrl: './details-panel.component.html', @@ -57,6 +59,9 @@ export class DetailsPanelComponent implements OnDestroy, OnInit { 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,