UI - hosts,strata,examiner applications table updates

Signed-off-by: Kial Jinnah <[email protected]>

strr-base-web/app/composables/useStrrApi.ts

@@ -18,7 +18,7 @@ export const useStrrApi = () => {
       : resp.registrations
   }
 
-  const getAccountApplications = async <T extends ApiApplicationBaseResp>(
+  const getAccountApplication = async <T extends ApiApplicationBaseResp>(
     id?: string,
     type?: ApplicationType
   ) => {
@@ -28,12 +28,26 @@ export const useStrrApi = () => {
         return undefined
       })
     }
-    const resp = await $strrApi<{ applications: T[] }>('/applications', {
-      query: {
-        registrationType: type
+    // No specific ID given so get the most recent application for the account
+    return await getAccountApplications(1, 1, type).then((resp) => {
+      if (resp.applications?.length) {
+        return resp.applications[0]
       }
+    }).catch((e) => {
+      logFetchError(e, 'Unable to get most recent account application details')
+      return undefined
+    })
+  }
+
+  const getAccountApplications = async <T extends ApiApplicationBaseResp>(
+    limit = 50,
+    page = 1,
+    registrationType?: ApplicationType,
+    status?: ApplicationStatus
+  ) => {
+    return await $strrApi<{ applications: T[], total: number }>('/applications', {
+      query: { limit, page, registrationType, status }
     })
-    return resp.applications
   }
 
   const postApplication = async <T extends { registration: any }, R extends T>(
@@ -77,6 +91,7 @@ export const useStrrApi = () => {
   return {
     deleteApplication,
     getAccountRegistrations,
+    getAccountApplication,
     getAccountApplications,
     getApplicationReceipt,
     getRegistrationCert,

strr-base-web/app/composables/useStrrBasePermit.ts

@@ -4,7 +4,7 @@ import { downloadFile } from '~/utils/download-file'
 export const useStrrBasePermit = <R extends ApiRegistrationResp, A extends ApiApplicationBaseResp, B>() => {
   const t = useNuxtApp().$i18n.t // this was casuing an issue when using the composable in route middleware
   const {
-    getAccountApplications,
+    getAccountApplication,
     getAccountRegistrations,
     getApplicationReceipt,
     getRegistrationCert,
@@ -32,17 +32,9 @@ export const useStrrBasePermit = <R extends ApiRegistrationResp, A extends ApiAp
     (!!application.value && !isApplicationStatus([ApplicationStatus.DRAFT])))
 
   const loadPermitData = async (applicationId?: string, applicationType?: ApplicationType) => {
-    if (applicationId) {
-      // Get specific application
-      application.value = await getAccountApplications<A>(applicationId) as A
-    } else {
-      // Get most recent application
-      const applications = await getAccountApplications<A>(undefined, applicationType) as A[]
-      if (applications.length) {
-        // Set active strata to the most recent application (ordered by api: newest to oldest)
-        application.value = applications[0]
-      }
-    }
+    // Get application
+    application.value = await getAccountApplication<A>(applicationId, applicationType) as A
+
     if (application.value?.header.status === ApplicationStatus.PAYMENT_DUE) {
       // there is a lag in the payment Q, trigger the strr api to grab the most current pay details
       application.value = await updatePaymentDetails<A>(application.value.header.applicationNumber)

strr-base-web/app/composables/useStrrBasePermitList.ts

@@ -0,0 +1,28 @@
+import type { ApiApplicationBaseResp } from '~/interfaces/strr-api'
+
+export const useStrrBasePermitList = <A extends ApiApplicationBaseResp>(
+  setType?: ApplicationType, setStatus?: ApplicationStatus
+) => {
+  const { getAccountApplications } = useStrrApi()
+
+  const limit = ref(50)
+  const page = ref(1)
+  const status = ref<ApplicationStatus | undefined>(setStatus)
+  const type = ref<ApplicationType | undefined>(setType)
+
+  const getApplicationList = async () => {
+    return await getAccountApplications<A>(limit.value, page.value, type.value, status.value)
+      .catch((e) => {
+        logFetchError(e, 'Unable to load account applications')
+        return undefined
+      })
+  }
+
+  return {
+    limit,
+    page,
+    status,
+    type,
+    getApplicationList
+  }
+}

strr-base-web/app/interfaces/strr-api.ts

@@ -101,6 +101,13 @@ export interface ApiApplicationResp extends ApiApplicationBaseResp {
   registration: ApiBaseApplication
 }
 
+export interface ApiApplicationsListResp {
+  applications: ApiApplicationResp[]
+  limit: number
+  page: number
+  total: number
+}
+
 export interface ApiDocument {
   documentType: DocumentUploadType
   fileKey: string

strr-examiner-web/app/layouts/examiner.vue

@@ -39,7 +39,7 @@ async function onChange (index: number) {
 
 </script>
 <template>
-  <div>
+  <div class="app-container">
     <ConnectHeaderWrapper>
       <div class="flex items-center justify-between">
         <ConnectHeaderLogoHomeLink />
@@ -74,7 +74,7 @@ async function onChange (index: number) {
 
     <ConnectSystemBanner />
 
-    <main class="app-inner-container app-body">
+    <main class="app-inner-container app-body bg-white">
       <NuxtErrorBoundary>
         <slot />
         <template #error="{ error }">

strr-examiner-web/app/pages/dashboard.vue

@@ -3,11 +3,12 @@ import { RoutesE } from '~/enums/routes'
 import type { HostApplicationResp } from '~/interfaces/host-i'
 import type { ApiBasePlatformApplication, PlatformApplicationResp } from '~/interfaces/platform-i'
 import type { StrataApplicationResp } from '~/interfaces/strata-i'
-import { useExaminerStore } from '~/store/examiner'
 import { displayFullUnitAddress } from '~/utils/format-helper'
+
 const localePath = useLocalePath()
 const { t } = useI18n()
-const { loading } = storeToRefs(useConnectDetailsHeaderStore())
+// TODO: ApplicationStatus.FULL_REVIEW is temporary until we have reqs defined
+const { limit, page, getApplicationList } = useStrrBasePermitList(undefined, ApplicationStatus.FULL_REVIEW)
 
 useHead({
   title: t('page.dashboardList.title')
@@ -23,30 +24,20 @@ const PROPERTY_MANAGER_TYPE = 'Property Manager'
 const STRATA_HOTEL_TYPE = 'Strata Hotel'
 const PLATFORM_TYPE = 'Platform'
 
-const applications = ref()
-const mappedApplications = ref()
+const { data: applicationListResp, status } = await useAsyncData(
+  'application-list-resp',
+  getApplicationList,
+  {
+    watch: [limit, page],
+    default: () => ({ applications: [], total: 0 })
+  }
+)
 
-const columns = [
-  { key: 'applicationNumber', label: 'Application Number', sortable: false },
-  { key: 'registrationNumber', label: 'Registration Number', sortable: false },
-  { key: 'registrationType', label: 'Type', sortable: false },
-  { key: 'propertyAddress', label: 'Address', sortable: false },
-  { key: 'applicantName', label: 'Applicant Name', sortable: false },
-  { key: 'status', label: 'Status', sortable: false },
-  { key: 'submissionDate', label: 'Submission Date', sortable: false },
-  { key: 'actions', label: t('label.actions') }
-]
-
-async function handleItemSelect (row: any) {
-  await navigateTo(localePath(`${RoutesE.EXAMINE}/${row.applicationNumber}`))
-}
-
-onMounted(async () => {
-  loading.value = true
-
-  applications.value = await useExaminerStore().getAllApplications()
-
-  mappedApplications.value = applications.value.map(
+const mapApplicationsList = () => {
+  if (!applicationListResp.value?.applications) {
+    return []
+  }
+  return (applicationListResp.value.applications).map(
     (application: HostApplicationResp | PlatformApplicationResp | StrataApplicationResp) => {
       const {
         header: {
@@ -94,24 +85,87 @@ onMounted(async () => {
         isPaid: status !== 'DRAFT' && status !== 'PAYMENT_DUE',
         submissionDate: dateToString(applicationDateTime, 'MMMM d, yyyy')
       }
-    }
-  )
+    })
+}
+const applications = computed(() => mapApplicationsList())
 
-  loading.value = false
-})
+const columns = [
+  { key: 'applicationNumber', label: 'Application Number', sortable: false },
+  { key: 'registrationNumber', label: 'Registration Number', sortable: false },
+  { key: 'registrationType', label: 'Type', sortable: false },
+  { key: 'propertyAddress', label: 'Address', sortable: false },
+  { key: 'applicantName', label: 'Applicant Name', sortable: false },
+  { key: 'status', label: 'Status', sortable: false },
+  { key: 'submissionDate', label: 'Submission Date', sortable: false },
+  { key: 'actions', label: t('label.actions') }
+]
+
+const selectedColumns = ref([...columns])
+
+async function handleItemSelect (row: any) {
+  await navigateTo(localePath(`${RoutesE.EXAMINE}/${row.applicationNumber}`))
+}
 
 </script>
 <template>
-  <div v-if="loading" class="w-full justify-center p-14">
-    Loading...
-  </div>
-  <div v-else class="space-y-8 py-8 sm:space-y-10 sm:py-10">
-    <div class="bg-white">
-      <UTable :columns="columns" :rows="mappedApplications">
-        <template #actions-data="{ row }">
-          <UButton :label="$t('btn.view')" @click="handleItemSelect(row)" />
-        </template>
-      </UTable>
+  <div class="h-full space-y-8 py-8 sm:space-y-10 sm:py-10">
+    <div class="flex justify-end gap-3">
+      <UPagination
+        v-if="applicationListResp.total > limit"
+        v-model="page"
+        :page-count="limit"
+        size="lg"
+        :total="applicationListResp?.total || 0"
+        :ui="{
+          base: 'h-[42px]',
+          default: {
+            activeButton: { class: 'rounded' }
+          }
+        }"
+      />
+      <USelectMenu
+        v-slot="{ open }"
+        v-model="selectedColumns"
+        :options="columns"
+        multiple
+        :ui="{ trigger: 'flex items-center w-full' }"
+      >
+        <UButton
+          color="white"
+          class="h-[42px] flex-1 justify-between text-gray-700"
+          :aria-label="$t('btn.colsToShow.aria', { count: selectedColumns.length })"
+        >
+          <span>{{ $t('btn.colsToShow.label') }}</span>
+
+          <UIcon
+            name="i-mdi-caret-down"
+            class="size-5 text-gray-700 transition-transform"
+            :class="[open && 'rotate-180']"
+          />
+        </UButton>
+      </USelectMenu>
     </div>
+    <UTable
+      ref="tableRef"
+      :columns="selectedColumns"
+      :rows="applications"
+      :loading="status === 'pending'"
+      :ui="{
+        wrapper: 'relative overflow-x-auto h-[512px]',
+        thead: 'sticky top-0 bg-white z-10',
+        th: { padding: 'px-2 py-4' },
+        td: {
+          base: 'whitespace-normal max-w-96 align-top',
+          padding: 'p-2',
+          color: 'text-bcGovColor-midGray',
+          font: '',
+          size: 'text-sm',
+        }
+      }"
+    >
+      <template #actions-data="{ row }">
+        <UButton :label="$t('btn.view')" @click="handleItemSelect(row)" />
+      </template>
+    </UTable>
   </div>
 </template>

strr-examiner-web/app/pages/examine/[applicationId].vue

@@ -8,8 +8,9 @@ import { useExaminerStore } from '~/store/examiner'
 
 const { t } = useI18n()
 const route = useRoute()
+const { getAccountApplication } = useStrrApi()
 const { loading } = storeToRefs(useConnectDetailsHeaderStore())
-const { getApplication, approveApplication, rejectApplication } = useExaminerStore()
+const { approveApplication, rejectApplication } = useExaminerStore()
 
 useHead({
   title: t('page.dashboardList.title')
@@ -49,7 +50,7 @@ const rejectApplicationHandler = async () => {
 
 const fetchApplication = async (applicationNumber: string): Promise<void> => {
   applicationId = applicationNumber
-  application.value = await getApplication(applicationNumber)
+  application.value = await getAccountApplication(applicationNumber)
 }
 
 onMounted(async () => {

strr-examiner-web/app/store/examiner.ts

@@ -3,19 +3,11 @@ export const useExaminerStore = defineStore('strr/examiner-store', () => {
 
   const { $strrApi } = useNuxtApp()
 
-  const getAllApplications = async () => {
-    return await getAccountApplications()
-  }
-
-  const getApplication = async (applicationNumber: string): Promise<ApiApplicationResp> => {
-    return (await getAccountApplications(applicationNumber)) as ApiApplicationResp
-  }
-
   // Fetch next Application to examiner when navigating to Examiner tab
-  const getNextApplication = async (): Promise<string> => {
-    const applications = await getAccountApplications(undefined, ApplicationType.HOST) as ApiApplicationBaseResp[]
-    // for now just get the first available Host Application
-    return applications[0].header.applicationNumber
+  const getNextApplication = async (): Promise<string | undefined> => {
+    // TODO: update when requirements are flushed out and backend is updated.
+    const resp = await getAccountApplications(undefined, undefined, ApplicationType.HOST, ApplicationStatus.FULL_REVIEW)
+    return resp.applications[0]?.header.applicationNumber
   }
 
   const approveApplication = async (applicationNumber: string): Promise<void> => {
@@ -47,8 +39,6 @@ export const useExaminerStore = defineStore('strr/examiner-store', () => {
   }
 
   return {
-    getAllApplications,
-    getApplication,
     approveApplication,
     rejectApplication,
     getNextApplication,

strr-examiner-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-examiner-web",
   "private": true,
   "type": "module",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",