Merge pull request #20 from cameron-eyds/22476-Document-Upload

Documents Upload

document-service/documents-ui/src/app.config.ts

@@ -11,7 +11,8 @@ export default defineAppConfig({
       },
       disabled: 'text-red-600',
       description: 'text-gray-700 mt-1',
-      help: 'text-gray-700 text-xs pl-[15px]'
+      help: 'text-gray-700 text-xs pl-[15px]',
+      error: 'pl-[15px] text-xs',
     },
     input: {
       base: 'relative text-gray-900 border-0 border-b-[1px] border-gray-500 ring-0 focus:ring-0 ' +

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

@@ -126,5 +126,9 @@ watch(() => entityId.value, (id: string) => {
   if (id.length >= 1) findCategoryByPrefix(id)
 })
 
+/** Reset Entity Identifier when No Id Checkbox is selected **/
+watch(() => noIdCheckbox.value, (hasNoId: boolean) => {
+  if (hasNoId) entityId.value = ''
+})
 
 </script>

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

@@ -0,0 +1,100 @@
+<template>
+  <FormWrapper name="'document-upload'">
+    <template #label>
+      <h3>Upload Documents</h3>
+    </template>
+
+    <template #form>
+      <UFormGroup
+        :ui="{ help: 'ml-9', error: 'ml-9' }"
+        :description="$t('documentUpload.description')"
+        :help="$t('documentUpload.help')"
+        :error="fileError"
+      >
+        <div class="flex flex-row">
+          <img class="mr-3" src="~/assets/icons/attach.svg" alt="Paperclip icon">
+          <UInput
+            id="inputFile"
+            accept=".pdf"
+            class="mt-3 text-gray-200 w-full"
+            content="text-gray-700"
+            :placeholder="$t('documentUpload.placeholder')"
+            type="file"
+            multiple
+            @change="uploadFile"
+          />
+        </div>
+      </UFormGroup>
+
+      <section v-if="documents.length" class="mt-6 ml-1">
+        <h4 class="text-gray-700 font-bold text-[14px]">Documents:</h4>
+        <div
+          v-for="(supportingDocument, index) in documents"
+          :key="supportingDocument.name"
+        >
+          <div class="flex flex-row items-center mt-2">
+            <img
+              class="mr-1 h-[18px] w-[18px]"
+              src="~/assets/icons/attach_dark.svg"
+              alt="Attach icon"
+            >
+            <span>{{ supportingDocument.name }}</span>
+            <UIcon
+              name="i-mdi-delete"
+              class="h-[18px] w-[18px] ml-1 cursor-pointer"
+              @click="() => removeFile(index)"
+            />
+          </div>
+        </div>
+      </section>
+
+    </template>
+  </FormWrapper>
+</template>
+
+<script setup lang="ts">
+const { documents } = useDocumentIndexing()
+const t = useNuxtApp().$i18n.t
+
+const fileError = ref(null)
+
+/**
+ * Uploads valid PDF files to the documents array.
+ * @param {FileList} files - The list of files to be uploaded.
+ */
+const uploadFile = (files: FileList) => {
+  const validType = ['pdf']
+  const maxFileSizeMiB = 50
+
+  // Convert FileList to Array
+  const allFiles = Array.from(files)
+
+  // Validate each file
+  const invalidFile = allFiles.find(file => {
+    const extension = file.name.slice(-3).toLowerCase()
+    const fileSize = file.size / 1024 / 1024 // in MiB
+    const validFileType = validType.includes(extension)
+    const validFileSize = fileSize <= maxFileSizeMiB
+
+    if (!validFileSize) {
+      fileError.value = t('documentUpload.fileSizeError')
+      return true
+    } else if (!validFileType) {
+      fileError.value = t('documentUpload.fileTypeError')
+      return true
+    }
+    return false
+  })
+
+  // If all files are valid, add them to the documents array
+  if (!invalidFile) {
+    fileError.value = null
+    documents.value.push(...allFiles)
+  }
+}
+
+/** Remove a file from the documents array. */
+const removeFile = (index: number) => {
+  documents.value.splice(index, 1)
+}
+</script>

document-service/documents-ui/src/composables/useDocumentIndexing.ts

@@ -5,13 +5,15 @@ export const useDocumentIndexing = () => {
   const documentCategory = ref('')
   const documentType = ref('')
   const filingDate = ref('')
+  const documents = ref([])
 
   // Return the refs and any computed values or methods
   return {
     entityId,
     noIdCheckbox,
     documentCategory,
     documentType,
-    filingDate
+    filingDate,
+    documents
   }
 }

document-service/documents-ui/src/lang/en.json

@@ -35,5 +35,13 @@
         "description": "Enter date of filling or the registration date which was entered into BC Registries."
       }
     }
+  },
+  "documentUpload": {
+    "title": "Upload Documents",
+    "description": "Upload one or more documents (Optional)",
+    "placeholder": "Select Documents (Optional)",
+    "help": "File must be a PDF. Maximum 50 MB.",
+    "fileSizeError": "Documents exceeds maximum 50 MB file size",
+    "fileTypeError": "Documents must be of PDF file type"
   }
 }

document-service/documents-ui/src/pages/DocumentIndexing.vue

@@ -16,6 +16,12 @@
           <DocumentIndexingForm class="mt-7" />
         </template>
       </BcrosSection>
+
+      <BcrosSection name="documentUpload">
+        <template #default>
+          <DocumentUpload class="mt-7" />
+        </template>
+      </BcrosSection>
     </div>
 
     <div class="col-span-2 pl-6">