Unit Note Panels UX (#1384)

* UN Panels UX * updated test * remove mock data
bcgov · Jun 13, 2023 · 816f5ae · 816f5ae
1 parent f8b37f9
commit 816f5ae
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 21 deletions.
diff --git a/ppr-ui/package-lock.json b/ppr-ui/package-lock.json
diff --git a/ppr-ui/package.json b/ppr-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ppr-ui",
-  "version": "2.0.8",
+  "version": "2.0.9",
   "private": true,
   "appName": "Assets UI",
   "sbcName": "SBC Common Components",

diff --git a/ppr-ui/src/components/unitNotes/UnitNotePanels.vue b/ppr-ui/src/components/unitNotes/UnitNotePanels.vue
@@ -53,7 +53,6 @@
       no-gutters
       justify="center"
       class="unit-note-panel-row"
-      :class="{'cap-panels-height': unitNotes.length > 5}"
     >
       <v-expansion-panels
         v-if="unitNotes.length"
@@ -75,8 +74,8 @@
                 </h3>
               </v-col>
               <v-col>
-                <span class="info-text">
-                  Registered on {{ pacificDate(item.createDateTime) }}
+                <span class="info-text fs-14">
+                  Registered on {{ pacificDate(item.createDateTime, true) }}
                   <v-divider vertical />
                   Document Registration Number {{ item.documentRegistrationNumber }}
                 </span>
@@ -126,7 +125,7 @@
             <!-- Note information -->
             <v-row v-if="item.effectiveDateTime" no-gutters class="pt-3">
               <v-col cols="3">
-                <h3 class="effective-date">Effective Date and Time</h3>
+                <h3 class="fs-14">Effective Date and Time</h3>
               </v-col>
               <v-col cols="9">
                 <span class="info-text fs-14">
@@ -137,7 +136,7 @@
 
             <v-row v-if="item.expiryDateTime" no-gutters class="pt-3">
               <v-col cols="3">
-                <h3>Expiry Date and Time</h3>
+                <h3 class="fs-14">Expiry Date and Time</h3>
               </v-col>
               <v-col cols="9">
                 <span class="info-text fs-14">
@@ -148,15 +147,19 @@
 
             <v-row v-if="item.remarks" no-gutters class="mt-1 py-3">
               <v-col cols="3">
-                <h3>Remarks</h3>
+                <h3 class="fs-14">Remarks</h3>
               </v-col>
               <v-col cols="9">
                 <span class="info-text fs-14">
                   {{ item.remarks }}
                 </span>
               </v-col>
             </v-row>
-            <v-divider class="ml-0 my-4"/>
+
+            <v-divider
+              v-if="item.effectiveDateTime || item.expiryDateTime || item.remarks"
+              class="ml-0 my-4"
+            />
 
             <!-- Person Giving Notice Table -->
             <v-row no-gutters class="pt-2">
@@ -218,7 +221,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs } from 'vue-demi'
+import { defineComponent, reactive, toRefs, watch } from 'vue-demi'
 import { MhApiStatusTypes, MhUIStatusTypes, RouteNames, UnitNoteDocTypes } from '@/enums'
 import { useRouter } from 'vue2-helpers/vue-router'
 import { useStore } from '@/store/store'
@@ -276,6 +279,10 @@ export default defineComponent({
       // Request to delete unit note here
     }
 
+    watch(() => localState.activePanels, () => {
+      localState.activePanels.length > 1 && localState.activePanels.shift()
+    })
+
     return {
       initUnitNote,
       cancelUnitNote,
@@ -303,6 +310,8 @@ h3 {
 }
 .unit-note-panel-row {
   background: $gray1;
+  max-height: 750px;
+  overflow-y: auto;
   .unit-note-panel {
     border-bottom: 2px solid $gray1;
   }
@@ -313,10 +322,6 @@ h3 {
       cursor: pointer;
     }
   }
-.cap-panels-height {
-  max-height: 750px;
-  overflow-y: auto;
-}
 .empty-notes-msg {
   background: white;
 }

diff --git a/ppr-ui/src/utils/date-helper.ts b/ppr-ui/src/utils/date-helper.ts
@@ -3,7 +3,7 @@ import 'moment-timezone'
 import { isDate } from 'lodash'
 
 /** returns timstamp string in 12 hour format */
-export function format12HourTime (date: Date): string {
+export function format12HourTime (date: Date, omitSeconds = false): string {
   // format datetime -- have to put in zeros manually when needed
   let hours = date.getHours()
   const ampm = hours < 12 ? 'am' : 'pm'
@@ -15,7 +15,9 @@ export function format12HourTime (date: Date): string {
   if (min.length > 2) min = min.slice(1)
   if (sec.length > 2) sec = sec.slice(1)
 
-  return `${hours}:${min}:${sec} ${ampm}`
+  return omitSeconds
+    ? `${hours}:${min} ${ampm}`
+    : `${hours}:${min}:${sec} ${ampm}`
 }
 
 export function format12HourTimeMoment (date: Moment): string {
@@ -49,9 +51,9 @@ export function convertDate (date: Date, includeTime: boolean, includeTz: boolea
   else return moment(date).format('MMMM D, Y') + ` ${datetime}`
 }
 
-export function pacificDate (date: Date | string): string {
+export function pacificDate (date: Date | string, omitSeconds = false): string {
   date = new Date(date.toLocaleString('en-US', { timeZone: 'America/Vancouver' }))
-  const datetime = format12HourTime(date)
+  const datetime = format12HourTime(date, omitSeconds)
 
   return moment(date).format('MMMM D, Y') + ` at ${datetime} Pacific time`
 }

diff --git a/ppr-ui/src/views/mhrInformation/MhrInformation.vue b/ppr-ui/src/views/mhrInformation/MhrInformation.vue
@@ -375,7 +375,6 @@ import {
   updateMhrDraft
 } from '@/utils'
 import { clientConfig, staffConfig } from '@/resources/attnRefConfigs'
-import { mockUnitNotes } from '../../../tests/unit/test-data'
 /* eslint-enable no-unused-vars */
 
 export default defineComponent({

diff --git a/ppr-ui/tests/unit/UnitNotePanels.spec.ts b/ppr-ui/tests/unit/UnitNotePanels.spec.ts
@@ -110,7 +110,7 @@ describe('UnitNotePanels', () => {
       // Check the registration number and date
       const registrationInfo = header.find('.info-text')
       expect(registrationInfo.exists()).toBe(true)
-      expect(registrationInfo.text()).toContain(`Registered on ${pacificDate(item.createDateTime)}`)
+      expect(registrationInfo.text()).toContain(`Registered on ${pacificDate(item.createDateTime, true)}`)
       expect(registrationInfo.text()).toContain(`Document Registration Number ${item.documentRegistrationNumber}`)
 
       // Check the panel actions