Document Records

document-service/documents-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bcros-documents-ui",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "private": true,
   "type": "module",
   "scripts": {
@@ -21,6 +21,7 @@
     "@nuxt/ui": "^2.16.0",
     "@nuxtjs/i18n": "^8.3.1",
     "@pinia/nuxt": "^0.5.1",
+    "axios": "^1.7.5",
     "date-fns": "^3.6.0",
     "http-status-codes": "^2.1.4",
     "keycloak-js": "^24.0.4",

document-service/documents-ui/src/app/router.options.ts

@@ -28,7 +28,7 @@ export default <RouterConfig|Ro<unknown>> {
     },
     {
       name: RouteNameE.DOCUMENT_RECORDS,
-      path: '/document-records',
+      path: '/document-records/:identifier',
       component: () => import('~/pages/DocumentRecords.vue').then(r => r.default || r),
       meta: {
         layout: 'default',

document-service/documents-ui/src/components/DatePicker.vue

@@ -6,7 +6,7 @@ import type { PropType } from 'vue'
 
 const props = defineProps({
   modelValue: {
-    type: [String, Date] as PropType<DatePickerDate | DatePickerRangeObject>,
+    type: [String, Date, Object] as PropType<DatePickerDate | DatePickerRangeObject>,
     default: null
   },
   isRangedPicker: {

document-service/documents-ui/src/components/InputDatePicker/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import { format } from 'date-fns'
 import type { PropType } from 'vue'
-import type { DatePickerDate } from 'v-calendar/dist/types/src/use/datePicker'
+import type { DatePickerDate, DatePickerRangeObject } from 'v-calendar/dist/types/src/use/datePicker'
 
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
   modelValue: {
-    type: [String, Date] as PropType<DatePickerDate>,
+    type: [String, Date, Object] as PropType<DatePickerDate | DatePickerRangeObject>,
     default: null
   },
   disabled: {

document-service/documents-ui/src/components/contentWrapper/index.vue

@@ -10,13 +10,13 @@ defineProps({
   <div :data-cy="'content_wrapper_' + name">
     <div
       :data-cy="'header_' + name"
-      class="font-bold text-gray-900 bg-bcGovColor-ltBlue px-6 py-[18px]"
+      class="font-bold text-gray-900 bg-bcGovColor-ltBlue px-8 py-[18px]"
     >
       <slot name="header" />
     </div>
     <div
       :data-cy="'content_' + name"
-      class="bg-white rounded px-6 pt-8 pb-0"
+      class="bg-white rounded px-8 pt-8 pb-0"
     >
       <slot name="content" />
     </div>

document-service/documents-ui/src/components/documentRecord/index.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { formatToReadableDate } from '~/utils/dateHelper'
+import { getScanningRecord } from '~/utils/documentRequests'
+const { documentRecord } = storeToRefs(useBcrosDocuments())
+const { downloadFileFromUrl, getDocumentDescription } = useDocuments()
+const identifier = useRoute()?.params?.identifier as string
+onMounted(async () => {
+  if (!documentRecord.value) {
+    // TODO: Fetch Record if absent (ie coming from another app with identifier) Requires isolated DocumentID Endpoint
+    await navigateTo({ name: RouteNameE.DOCUMENT_MANAGEMENT })
+  }
+
+  if(!documentRecord.value?.accessionNumber) {
+    try {
+      const scanningData = await getScanningRecord(documentRecord.value.documentClass, identifier)
+      documentRecord.value = { ...documentRecord.value, ...scanningData }
+    } catch (error) {
+      console.error('Error fetching document scanning record', error)
+    }
+  }
+})
+</script>
+<template>
+  <ContentWrapper
+    v-if="!!documentRecord"
+    name="document-record"
+    class="mt-7 pb-10"
+    data-cy="document-record"
+  >
+    <template #header>{{ $t('documentRecord.subtitle') }}</template>
+    <template #content>
+      <div class="grid grid-cols-3 auto-rows-max">
+
+        <!-- Document Meta Data -->
+        <span class="font-bold">{{ $t('documentReview.labels.entityId') }} </span>
+        <span class="col-span-2">{{ documentRecord.consumerIdentifier || 'Not Entered' }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentId') }} </span>
+        <span class="col-span-2">{{ documentRecord.consumerDocumentId }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentCategory') }} </span>
+        <span class="col-span-2">{{ getDocumentDescription(documentRecord.documentClass) }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentType') }} </span>
+        <span class="col-span-2">{{ getDocumentDescription(documentRecord.documentType, true) }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.filingDate') }} </span>
+        <span class="col-span-2">
+          {{ formatToReadableDate(documentRecord.consumerFilingDateTime) || 'Not Entered' }}
+        </span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.uploadDate') }} </span>
+        <span class="col-span-2">{{ formatToReadableDate(documentRecord.createDateTime) }}</span>
+
+        <!-- Scanning Information -->
+        <UDivider class="my-6 col-span-3" />
+        <span class="font-bold">{{ $t('documentReview.labels.scanningLabel') }} </span>
+        <span class="col-span-2"/>
+
+        <span class="font-bold">{{ $t('documentReview.labels.accessionNumber') }} </span>
+        <span class="col-span-2">{{ documentRecord.accessionNumber }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.batchId') }} </span>
+        <span class="col-span-2">{{ documentRecord.batchId }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.pagesToScan') }} </span>
+        <span class="col-span-2">{{ documentRecord.pageCount }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.scannedDate') }} </span>
+        <span class="col-span-2">{{ documentRecord.scanDateTime }}</span>
+
+        <span class="font-bold">{{ $t('documentReview.labels.author') }} </span>
+        <span class="col-span-2">{{ documentRecord.author }}</span>
+
+        <!-- Document Files -->
+        <UDivider class="my-6 col-span-3" />
+
+        <span class="font-bold">{{ $t('documentReview.labels.documentListLabel') }}</span>
+        <span class="col-span-2 flex flex-col">
+          <span
+            v-for="(file, i) in documentRecord.consumerFilenames"
+            :key="`file-${i}`"
+            class="spanLink pb-2"
+          >
+             <ULink
+               inactive-class="text-primary underline"
+               @click="downloadFileFromUrl(documentRecord.documentUrls[i], file)"
+             >
+               {{ file }}
+             </ULink>
+          </span>
+        </span>
+      </div>
+    </template>
+  </ContentWrapper>
+</template>
+<style scoped lang="scss">
+span:not(.spanLink) {
+  padding: 0.5rem 0;
+}
+</style>