diff --git a/api/src/migrations/README.md b/api/src/migrations/README.md index 60ee4b1b1..db34ff9f4 100644 --- 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 index 2d0d92953..133d15bfb 100644 --- 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 @@

Geographic Shape Information

FOM Details

-
+ +
+ +
+

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

+ + {{project.workflowState.description}} + +
-
-
- - Status: {{project.workflowState.description | titlecase}} - {{ - (project.workflowState.code === workflowStatus['FINALIZED'].code || - project.workflowState.code === workflowStatus['EXPIRED'].code) ? - ', Commenting Closed': '' - }} - -
+
+ You can comment until: + + {{getCommentingClosingDate(project.commentingClosedDate) | date:'longDate'}} at 11:59pm +
- -
-
- Commenting opened for this FOM on {{project.commentingOpenDate | date:'longDate'}}. -
- Period of operations for this FOM is from {{project.operationStartYear}} to {{project.operationEndYear}}. -
-
- This FOM is currently accepting comments until {{project.commentingClosedDate | date:'longDate'}}. -
-
- Commenting closed for this FOM on {{project.commentingClosedDate | date:'longDate'}}. -
-
- The validity period for this FOM ends on {{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. -
-
-
- +
+ Commenting closed on {{project.commentingClosedDate | date:'longDate'}}. +
+
+ Commenting opened on {{project.commentingOpenDate | date:'longDate'}}
+ +
@@ -142,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 079479150..83d24ec9f 100644 --- 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 index f08cbd159..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 @@ -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({ 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 index 695501e5d..362446fd8 100644 --- 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 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; diff --git a/public/src/core/utils/constants/appUtils.ts b/public/src/core/utils/constants/appUtils.ts index 6ffcd2941..40dddb56c 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 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') +} \ No newline at end of file