Host/PM - UI: dashboard list (bcgov#325)

* update host pm dashboard list to match strata * update str api composable with reg type param * restore strr api composable * add missing i18n * add todo comments
avni-work · Nov 20, 2024 · 414fdbf · 414fdbf
1 parent 5f001a7
commit 414fdbf
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 37 deletions.
diff --git a/strr-host-pm-web/app/locales/en-CA.ts b/strr-host-pm-web/app/locales/en-CA.ts
@@ -80,7 +80,8 @@ export default {
   btn: {
     addStrataHotel: 'Add a Strata Hotel',
     view: 'View',
-    saveStartApplication: 'Save & Start Application'
+    saveStartApplication: 'Save & Start Application',
+    createNewReg: 'Create New Registration'
   },
   label: {
     hotelName: 'Hotel Name',
@@ -90,7 +91,13 @@ export default {
     date: 'Date',
     accountName: 'Account Name',
     accountInfo: 'Account Information',
-    primaryContactInfo: 'Primary Contact Information'
+    primaryContactInfo: 'Primary Contact Information',
+    expired: 'Expired',
+    expiresToday: 'Expires today',
+    dayCount: '0 days | 1 day | {count} days',
+    lastStatusChange: 'Last Status Change',
+    daysToExpiry: 'Days to Expiry (Pacific Time)',
+    property: 'Property'
   },
   link: {
     strataHotelInfoPage: 'strata hotel information page'
@@ -118,9 +125,9 @@ export default {
     }
   },
   table: {
-    strataHotelList: {
-      title: '{boldStart}My Strata Hotel List{boldEnd} ({count})',
-      emptyText: "You don't have any strata hotels yet. Add a strata hotel above."
+    hostPmList: {
+      title: '{boldStart}My Registration Applications{boldEnd} ({count})',
+      emptyText: "You don't have any properties yet. Add a property above."
     }
   },
   page: {

diff --git a/strr-host-pm-web/app/pages/dashboard/index.vue b/strr-host-pm-web/app/pages/dashboard/index.vue
@@ -3,33 +3,33 @@ const { t } = useI18n()
 const localePath = useLocalePath()
 const accountStore = useConnectAccountStore()
 const strataStore = useStrrStrataStore()
-const strataModal = useStrataModals()
+const strrModal = useStrrModals()
 
 const columns = [
   {
-    key: 'hotelName',
-    label: t('label.hotelName'),
-    sortable: true
+    key: 'property',
+    label: t('label.property')
   },
   {
     key: 'number',
     label: t('label.number'),
     sortable: true
   },
   {
-    key: 'type',
-    label: t('label.type'),
+    key: 'status',
+    label: t('label.status'),
     sortable: true
   },
   {
-    key: 'date',
-    label: t('label.date'),
+    key: 'lastStatusChange',
+    label: t('label.lastStatusChange'),
     sortable: true
   },
   {
-    key: 'status',
-    label: t('label.status'),
-    sortable: true
+    key: 'daysToExpiry',
+    label: t('label.daysToExpiry'),
+    sortable: true,
+    class: 'max-w-28'
   },
   {
     key: 'actions',
@@ -59,9 +59,9 @@ setBreadcrumbs([
 ])
 
 // can use watch param to handle pagination in future
-const { data: strataHotelList, status } = await useAsyncData(
-  'strata-hotel-list',
-  () => strataStore.loadStrataHotelList(),
+const { data: hostPmList, status } = await useAsyncData(
+  'host-pm-list',
+  () => strataStore.loadHostPmList(), // TODO: update store name when/if store name changes
   {
     watch: [() => accountStore.currentAccount.id],
     default: () => []
@@ -78,16 +78,17 @@ async function handleItemSelect (row: any) {
       <ConnectTypographyH1 :text="$t('page.dashboardList.h1')" />
       <p>{{ $t('page.dashboardList.subtitle') }}</p>
       <UButton
-        :label="$t('modal.helpRegisteringStrata.triggerBtn')"
+        :label="$t('modal.help.registerStr.triggerBtn')"
         :padded="false"
+        icon="i-mdi-help-circle-outline"
         variant="link"
-        @click="strataModal.openhelpRegisteringStrataModal()"
+        @click="strrModal.openHelpRegisterModal()"
       />
     </div>
 
     <div class="space-y-4">
       <UButton
-        :label="$t('btn.addStrataHotel')"
+        :label="$t('btn.createNewReg')"
         icon="i-mdi-plus"
         :to="localePath('/application')"
       />
@@ -96,7 +97,7 @@ async function handleItemSelect (row: any) {
         <template #header>
           <div class="flex items-center justify-between">
             <h2 class="font-normal">
-              <ConnectI18nBold translation-path="table.strataHotelList.title" :count="strataHotelList.length" />
+              <ConnectI18nBold translation-path="table.hostPmList.title" :count="hostPmList.length" />
             </h2>
             <!-- TODO: filtering post-mvp ? -->
             <!-- <UInput
@@ -128,9 +129,9 @@ async function handleItemSelect (row: any) {
         <UTable
           ref="tableRef"
           :columns="selectedColumns"
-          :rows="strataHotelList"
+          :rows="hostPmList"
           :loading="status === 'pending'"
-          :empty-state="{ icon: '', label: $t('table.strataHotelList.emptyText') }"
+          :empty-state="{ icon: '', label: $t('table.hostPmList.emptyText') }"
           :sort="{ column: 'date', direction: 'desc' }"
           :ui="{
             wrapper: 'relative overflow-x-auto h-[512px]',
@@ -147,9 +148,27 @@ async function handleItemSelect (row: any) {
             },
           }"
         >
+          <template #property-data="{ row }">
+            <div class="flex flex-col">
+              <span v-if="row.property.nickname">
+                {{ row.property.nickname }}
+              </span>
+              <span>
+                <!-- eslint-disable-next-line max-len-->
+                {{ `${row.property.streetNumber} ${row.property.streetName}${row.property.unitNumber ? ', Unit ' + row.property.unitNumber : ''}` }}
+              </span>
+            </div>
+          </template>
+
           <!-- using a slot for this so the nuxtui sort will still sort by datetime -->
-          <template #date-data="{ row }">
-            {{ dateToStringPacific(row.date, 'MMMM Do, YYYY') }}
+          <template #lastStatusChange-data="{ row }">
+            {{ dateToStringPacific(row.lastStatusChange, 'DDD') }}
+          </template>
+
+          <template #daysToExpiry-data="{ row }">
+            <span :class="{'font-semibold text-red-500': row.daysToExpiry.value <= 0}">
+              {{ row.daysToExpiry.label }}
+            </span>
           </template>
 
           <template #actions-data="{ row }">

diff --git a/strr-host-pm-web/app/stores/strata.ts b/strr-host-pm-web/app/stores/strata.ts
@@ -9,7 +9,6 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
   const { completingParty, primaryRep, secondaryRep } = storeToRefs(contactStore)
   const { strataBusiness } = storeToRefs(businessStore)
   const { strataDetails } = storeToRefs(detailsStore)
-  const { t } = useI18n()
 
   const {
     application,
@@ -39,20 +38,20 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
     }
   }
 
-  const loadStrataHotelList = async () => {
+  const loadHostPmList = async () => {
     // Load the full list of strata hotel applications
-    return await getAccountApplications<StrataApplicationResp>(undefined, ApplicationType.STRATA_HOTEL)
+    return await getAccountApplications(undefined, ApplicationType.HOST)
       .catch((e) => {
         logFetchError(e, 'Unable to load account applications')
         return undefined
-      })
-      .then((response) => {
-        if (response) {
-          return (response as StrataApplicationResp[]).map(app => ({
-            hotelName: app.registration.strataHotelDetails.brand.name,
+      }).then((response) => {
+        if (response) { // TODO: update types
+          return (response as Array<any>).map(app => ({
+            property: app.registration.unitAddress,
             number: app.header.registrationNumber || app.header.applicationNumber,
-            type: app.header.registrationNumber ? t('label.registration') : t('label.application'),
             date: app.header.registrationStartDate || app.header.applicationDateTime,
+            lastStatusChange: getLastStatusChangeColumn(app.header),
+            daysToExpiry: getDaysToExpiryColumn(app.header),
             status: app.header.registrationStatus || app.header.hostStatus,
             applicationNumber: app.header.applicationNumber // always used for view action
           }))
@@ -77,7 +76,7 @@ export const useStrrStrataStore = defineStore('strr/strata', () => {
     showPermitDetails,
     downloadApplicationReceipt,
     loadStrata,
-    loadStrataHotelList,
+    loadHostPmList,
     $reset
   }
 })
diff --git a/strr-host-pm-web/app/utils/strata-formating.ts b/strr-host-pm-web/app/utils/strata-formating.ts
@@ -46,3 +46,37 @@ export function formatStrataDetailsUI (details: ApiStrataDetails): StrataDetails
     numberOfUnits: details.numberOfUnits as number
   }
 }
+
+// dashboard list table column formatters
+export function getLastStatusChangeColumn (heading: ApplicationHeader) {
+  if (heading.registrationStatus !== undefined) {
+    return heading.registrationStartDate
+  } else if (heading.decisionDate !== null) {
+    return heading.decisionDate
+  } else {
+    return heading.applicationDateTime
+  }
+}
+
+// value used to apply styling in table cell
+export function getDaysToExpiryColumn (heading: ApplicationHeader): { label: string, value: number } {
+  const t = useNuxtApp().$i18n.t
+  const endDate = heading?.registrationEndDate
+
+  // return '-' if no reg end date
+  if (!endDate) {
+    return { label: '-', value: NaN }
+  }
+
+  const daysTillExpiry = dayCountdown(endDate) // get days till expiry
+
+  if (heading.status === RegistrationStatus.EXPIRED || daysTillExpiry < 0) {
+    return { label: t('label.expired'), value: -1 }
+  }
+
+  if (daysTillExpiry === 0) {
+    return { label: t('label.expiresToday'), value: daysTillExpiry }
+  }
+
+  return { label: t('label.dayCount', daysTillExpiry), value: daysTillExpiry }
+}