Merge pull request bcgov#54 from turb0c0w/sam/examiner-dash

Sam/examiner dash

strr-web/composables/useRegistrations.ts

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { SbcCreationResponseE } from '~/enums/sbc-creation-response-e'
 import { AutoApprovalDataI } from '~/interfaces/auto-approval-data-i'
 import { LtsaDataI } from '~/interfaces/ltsa-data-i'
+import { PaginationI } from '~/interfaces/pagination-i'
 import { RegistrationHistoryEventI } from '~/interfaces/registration-history-event-i'
 
 export const useRegistrations = () => {
@@ -24,9 +25,15 @@ export const useRegistrations = () => {
         )
     })
 
+  const getPaginatedRegistrations = (paginationObject: PaginationI): Promise<PaginatedRegistrationsI | void> => {
+    const params = new URLSearchParams(paginationObject as unknown as Record<string, string>)
+    return axiosInstance.get<PaginatedRegistrationsI>(`${apiURL}/registrations${params.size ? `/?${params}` : ''}`)
+      .then(res => res.data)
+  }
+
   const getRegistration = (id: string): Promise<RegistrationI | void> =>
-    axiosInstance.get(`${apiURL}/registrations`)
-      .then(res => res.data.find((registration: any) => registration.id.toString() === id))
+    axiosInstance.get(`${apiURL}/registration/${id}`)
+      .then(res => res.data)
 
   const getLtsa = (id: string): Promise<LtsaDataI[] | void> =>
     axiosInstance.get(`${apiURL}/registrations/${id}/ltsa`)
@@ -89,6 +96,7 @@ export const useRegistrations = () => {
     createSbcRegistration,
     getDocumentsForRegistration,
     getRegistrations,
+    getPaginatedRegistrations,
     getRegistration,
     getRegistrationHistory,
     getLtsa,

strr-web/interfaces/paginated-registrations-i.ts

@@ -0,0 +1,6 @@
+import { RegistrationI } from './registration-i'
+
+export interface PaginatedRegistrationsI {
+  count: number,
+  results: RegistrationI[]
+}

strr-web/interfaces/pagination-i.ts

@@ -0,0 +1,14 @@
+export interface PaginationI {
+  filter_by_status?: string,
+  offset?: string,
+  limit?: string
+}
+
+export enum RegistrationStatusesE {
+  PENDING,
+  APPROVED,
+  UNDER_REVIEW,
+  MORE_INFO_NEEDED,
+  PROVISIONAL,
+  DENIED
+}

strr-web/pages/application-details/[applicationId]/index.vue

@@ -231,7 +231,6 @@
                 </div>
                 <div>
                   <p class="text-bcGovColor-midGray">
-                    {{ formatTime(new Date(`${event.created_date}`)) }}
                     {{ formatTime(new Date(`${event.created_date}Z`)) }}
                   </p>
                   <p class="font-bold">

strr-web/pages/registry-dashboard.vue

@@ -4,22 +4,105 @@
     <BcrosTypographyH2 text="Owners STR Registration Applications" />
     <div />
     <div class="bg-white">
-      <div class="flex flex-row justify-between">
+      <div class="flex flex-row justify-between px-[16px] py-[14px]">
         <div>
-          <UInput />
+          <UInput
+            icon="i-heroicons-magnifying-glass-20-solid"
+            size="sm"
+            color="white"
+            :trailing="false"
+            :placeholder="tRegistryDashboard('search')"
+            class="w-[333px]"
+          />
         </div>
         <div>
-          <USelect />
+          <USelectMenu
+            v-model="selectedColumns"
+            :options="columns"
+            multiple
+          >
+            <template #label>
+              <span>{{ tRegistryDashboard('columnsToShow') }}</span>
+            </template>
+          </USelectMenu>
         </div>
       </div>
-      <UTable />
+      <UTable :columns="columns" :rows="tableRows" />
+      <div class="flex flex-row justify-between">
+        <span>Showing...</span>
+        <UPagination :model-value="1" :total="10" />
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { PaginatedRegistrationsI } from '~/interfaces/paginated-registrations-i'
+import { PaginationI } from '~/interfaces/pagination-i'
+
+const t = useNuxtApp().$i18n.t
+const tRegistryDashboard = (translationKey: string) => t(`registry-dashboard.${translationKey}`)
+const { getPaginatedRegistrations } = useRegistrations()
+const statusFilter = ref<string>('')
+const limit = ref<string>('10')
+const offset = ref<string>('0')
+const tableRows = ref<Record<string, string>[]>([])
+
+const updateTableRows = async () => {
+  const paginationObject: PaginationI = {
+    limit: limit.value,
+    offset: offset.value
+  }
+  if (statusFilter.value) {
+    paginationObject.filter_by_status = statusFilter.value
+  } else {
+    delete paginationObject.filter_by_status
+  }
+  const registrations = await getPaginatedRegistrations(paginationObject)
+  if (registrations) {
+    tableRows.value = registrationsToTableRows(registrations)
+  }
+}
+
+const registrationsToTableRows = (registrations: PaginatedRegistrationsI): Record<string, string>[] => {
+  const rows: Record<string, string>[] = []
+  registrations.results.forEach((result: RegistrationI) => {
+    rows.push({
+      id: result.id.toString(),
+      status: result.status,
+      nickname: result.unitAddress.nickname,
+      address: result.unitAddress.address,
+      registration: result.id.toString(),
+      owner: result.primaryContact.name.firstName,
+      submission: result.submissionDate
+    })
+  })
+  return rows
+}
 
-// const t = useNuxtApp().$i18n.t
+watch(statusFilter, () => updateTableRows())
+watch(limit, () => updateTableRows())
+watch(offset, () => updateTableRows())
+
+onMounted(() => {
+  updateTableRows()
+})
+
+const selectedColumns = ref<{ key: string; label: string; }[]>([])
+
+const columns = [
+  { key: 'id', label: tRegistryDashboard('applicationNumber') },
+  { key: 'status', label: tRegistryDashboard('status') },
+  { key: 'nickname', label: tRegistryDashboard('nickname') },
+  { key: 'address', label: tRegistryDashboard('address') },
+  { key: 'registration', label: tRegistryDashboard('registrationNumber') },
+  { key: 'owner', label: tRegistryDashboard('owner') },
+  { key: 'submission', label: tRegistryDashboard('submissionDate') }
+]
+
+onMounted(() => {
+  selectedColumns.value = columns
+})
 
 definePageMeta({
   layout: 'wide-no-space'