Strata - UI: Strata doc upload

strr-base-web/app/components/form/ContactInfo.vue

@@ -69,9 +69,9 @@ onMounted(async () => {
       id="completing-party-radio-group"
       v-model="isCompletingPartyRep"
       data-testid="completing-party-radio-group"
-      :class="isComplete && isCompletingPartyRep === undefined ? 'border-red-600 border-2 p-2' : 'p-2'"
+      :class="isComplete && isCompletingPartyRep === undefined ? 'border-red-600 border-2 p-2 pt-3' : 'p-2 pt-3'"
       :options="radioOptions"
-      :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+      :ui="{ legend: 'text-default font-bold text-gray-700' }"
       :ui-radio="{ inner: 'space-y-2' }"
     >
       <template #legend>

strr-base-web/app/locales/en-CA.ts

@@ -114,6 +114,16 @@ export default {
     },
     tos: {
       load: 'Unable to load terms of use, please try again later.'
+    },
+    docUpload: {
+      fileSize: {
+        title: 'Error Uploading Document',
+        description: 'File size too large. Please only upload files less than 10mb.'
+      },
+      generic: {
+        title: 'Error Uploading Document',
+        description: 'Something went wrong when uploading the file, only pdfs and files less than 10mb are accepted.'
+      }
     }
   },
   imageAlt: {

strr-host-pm-web/app/locales/en-CA.ts

@@ -232,16 +232,6 @@ export default {
       title: 'Error creating account',
       description: 'We could not create your account at this time. Please try again or if this issue persists, please contact us.'
     },
-    docUpload: {
-      fileSize: {
-        title: 'Error Uploading Document',
-        description: 'File size too large. Please only upload files less than 10mb.'
-      },
-      generic: {
-        title: 'Error Uploading Document',
-        description: 'Something went wrong when uploading the file, only pdfs and files less than 10mb are accepted.'
-      }
-    },
     reqFetch: {
       unknown: {
         title: 'An unexpected error occurred.',

strr-host-pm-web/app/stores/document.ts

@@ -317,17 +317,24 @@ export const useDocumentStore = defineStore('host/document', () => {
 
   // reset documents when requirements change
   watch([() => reqStore.propertyReqs, () => reqStore.prRequirements], async () => {
-    await $reset()
+    await resetApiDocs()
   }, { deep: true })
 
-  async function $reset () {
+  // use this to remove documents from store and from api
+  async function resetApiDocs () {
     const docsToDelete = [...storedDocuments.value]
     for (const doc of docsToDelete) {
       await removeStoredDocument(doc)
     }
     selectedDocType.value = undefined
   }
 
+  // use this to reset store only
+  function $reset () {
+    storedDocuments.value = []
+    selectedDocType.value = undefined
+  }
+
   return {
     apiDocuments,
     storedDocuments,
@@ -340,6 +347,7 @@ export const useDocumentStore = defineStore('host/document', () => {
     addStoredDocument,
     removeStoredDocument,
     validateRequiredDocuments,
+    resetApiDocs,
     $reset
   }
 })

strr-host-pm-web/package.json

@@ -2,7 +2,7 @@
   "name": "strr-host-pm-web",
   "private": true,
   "type": "module",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "scripts": {
     "build-check": "nuxt build",
     "build": "nuxt generate",

strr-strata-web/app/components/document/list/Item.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+defineProps<{
+  documents: UiDocument[]
+}>()
+
+defineEmits<{
+  remove: [UiDocument]
+}>()
+</script>
+<template>
+  <li
+    v-for="doc in documents"
+    :key="doc.id"
+    class="flex flex-col gap-1"
+  >
+    <div
+      class="flex items-center justify-between rounded bg-gray-100 p-3"
+      :class="{
+        'opacity-90': doc.loading
+      }"
+    >
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon
+            :name="doc.loading
+              ? 'i-heroicons-arrow-path-20-solid'
+              : 'i-mdi-check-circle'
+            "
+            class="size-6"
+            :class="{
+              'animate-spin': doc.loading,
+              'text-green-500': !doc.loading
+            }"
+          />
+          <div class="flex flex-col">
+            <span class="text-sm font-bold">{{ $t(`docType.${doc.type}`) }}</span>
+            <span>{{ doc.name }}</span>
+          </div>
+        </div>
+      </div>
+      <UButton
+        :label="$t('word.Remove')"
+        variant="link"
+        :disabled="doc.loading"
+        @click="$emit('remove', doc)"
+      />
+    </div>
+  </li>
+</template>

strr-strata-web/app/components/document/list/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const docStore = useDocumentStore()
+</script>
+<template>
+  <ul class="flex flex-col gap-1">
+    <DocumentListItem
+      :documents="docStore.storedDocuments"
+      @remove="docStore.removeStoredDocument"
+    />
+  </ul>
+</template>

strr-strata-web/app/components/document/upload/Button.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  isRequired: { type: Boolean, default: false },
+  isInvalid: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  helpId: { type: String, default: undefined },
+  ariaLabel: { type: String, default: undefined },
+  accept: { type: String, default: undefined },
+  multiple: { type: Boolean, default: false },
+  directory: { type: Boolean, default: false }
+})
+
+defineEmits<{
+  change: [files: FileList | null]
+  cancel: [void]
+}>()
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 shrink-0 text-blue-500"
+    />
+    <div
+      class="relative h-[56px] w-full rounded-t border-b border-gray-500 bg-gray-100
+      focus-within:border-b-2 focus-within:border-blue-500 hover:border-gray-600 hover:bg-gray-200"
+      :class="{
+        'border-red-600 bg-red-100 focus-within:border-red-600 hover:border-red-600 hover:bg-red-100': isInvalid
+      }"
+    >
+      <label
+        for="file-input"
+        class="absolute flex size-full items-center px-4 text-left text-bcGovGray-700"
+        :class="{
+          'text-red-600': isInvalid
+        }"
+      >
+        {{ label }}
+      </label>
+      <input
+        id="file-input"
+        type="file"
+        class="absolute size-full cursor-pointer opacity-0 ring-0 focus:outline-none focus:ring-0"
+        :accept
+        :multiple
+        :webkitdirectory="directory"
+        :aria-required="isRequired"
+        :aria-invalid="isInvalid"
+        :aria-label="ariaLabel"
+        :aria-describedby="helpId"
+        :disabled="isDisabled"
+        @cancel="$emit('cancel')"
+        @change="(e) => $emit('change', (e.target as HTMLInputElement).files)"
+      >
+    </div>
+  </div>
+</template>

strr-strata-web/app/components/document/upload/Select.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+const props = defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  isRequired: { type: Boolean, default: false },
+  isInvalid: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  size: { type: String, default: 'lg' },
+  helpId: { type: String, default: undefined },
+  ariaLabel: { type: String, default: undefined },
+  accept: { type: String, default: undefined },
+  error: { type: Boolean, default: false }
+})
+
+const docStore = useDocumentStore()
+
+const emit = defineEmits<{
+  change: [any]
+  cancel: [void]
+}>()
+
+const { open, onChange, onCancel, reset } = useFileDialog({
+  accept: props.accept,
+  multiple: false,
+  directory: false
+})
+
+onCancel(() => {
+  emit('cancel')
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+  reset()
+})
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 text-blue-500"
+    />
+    <USelectMenu
+      v-model="docStore.selectedDocType"
+      size="lg"
+      :color="'gray'"
+      :options="docStore.docTypeOptions"
+      :aria-label="label"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      value-attribute="value"
+      :aria-describedby="helpId"
+      :ui-menu="{
+        label: true ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+      }"
+      class="w-full"
+      @change="open()"
+    >
+      <template #label>
+        <span>{{ label }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>

strr-strata-web/app/components/form/BusinessDetails.vue

@@ -145,9 +145,12 @@ onMounted(async () => {
               <URadioGroup
                 v-model="strataBusiness.hasRegOffAtt"
                 class="p-2"
-                :class="isComplete && strataBusiness.hasRegOffAtt === undefined ? 'border-red-600 border-2' : ''"
+                :class="isComplete && strataBusiness.hasRegOffAtt === undefined
+                  ? 'border-red-600 border-2 pt-4'
+                  : 'pt-4'
+                "
                 :options="getRadioOptions()"
-                :ui="{ legend: 'mb-3 text-default font-bold text-gray-700' }"
+                :ui="{ legend: 'text-default font-bold text-gray-700' }"
                 :ui-radio="{ inner: 'space-y-2' }"
               >
                 <template #legend>

strr-strata-web/app/components/form/ReviewConfirm.vue

@@ -7,6 +7,7 @@ const contactStore = useStrrContactStore()
 const businessStore = useStrrStrataBusinessStore()
 const detailsStore = useStrrStrataDetailsStore()
 const applicationStore = useStrrStrataApplicationStore()
+const documentStore = useDocumentStore()
 
 const strataConfirmationFormRef = ref<Form<z.output<typeof applicationStore.confirmationSchema>>>()
 const sectionErrors = ref<MultiFormValidationResult>([])
@@ -37,7 +38,8 @@ onMounted(async () => {
   const validations = [
     contactStore.validateContact(),
     businessStore.validateStrataBusiness(),
-    detailsStore.validateStrataDetails()
+    detailsStore.validateStrataDetails(),
+    documentStore.validateDocuments()
   ]
 
   const validationResults = await Promise.all(validations)
@@ -247,7 +249,7 @@ onMounted(async () => {
       }"
     >
       <FormCommonReviewSection
-        :error="isSectionInvalid('strata-details-form')"
+        :error="isSectionInvalid('strata-details-form') || isSectionInvalid('strata-documents-form')"
         :items="[
           {
             title: $t('strr.review.brand.name'),
@@ -262,6 +264,10 @@ onMounted(async () => {
             slot: 'buildings',
             contentClass: 'line-clamp-none'
           },
+          {
+            title: 'Supporting Documents',
+            slot: 'documents'
+          }
         ]"
         @edit="$emit('edit', 2)"
       >
@@ -295,6 +301,24 @@ onMounted(async () => {
             </ConnectInfoBox>
           </div>
         </template>
+        <template #documents>
+          <div class="pt-2">
+            <div v-if="!documentStore.storedDocuments.length">
+              <p>{{ $t('text.noDocsUploaded') }}</p>
+            </div>
+            <div v-for="doc in documentStore.storedDocuments" :key="doc.id" class="flex w-full gap-1">
+              <UIcon
+                name="i-mdi-paperclip"
+                class="size-5 shrink-0 text-blue-500"
+              />
+              <div class="flex flex-col">
+                <!-- TODO: can we leave out the name since there is only 1 document type? -->
+                <!-- <span class="text-sm font-bold">{{ $t(`docType.${doc.type}`) }}</span> -->
+                <span>{{ doc.name }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
       </FormCommonReviewSection>
     </ConnectPageSection>