Host/PM - UI: Principal Residence step draft (bcgov#332)

* initial principal residence step work

* list types

* remove set error

* doc upload checkpoint

strr-base-web/app/utils/sleep.ts

@@ -0,0 +1,8 @@
+/**
+ * Pauses for a specified number of milliseconds.
+ * @param {number} [ms=3000] - The pause duration, in milliseconds. Default of 3000ms.
+ * @returns {Promise<void>} empty promise.
+ */
+export function sleep (ms: number = 3000): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}

strr-base-web/tailwind.config.ts

@@ -4,6 +4,10 @@ module.exports = {
   presets: [require('@daxiom/nuxt-core-layer-test/tailwind.config')],
   theme: {
     extend: {
+      listStyleType: {
+        alpha: 'lower-alpha',
+        upperAlpha: 'upper-alpha'
+      },
       maxWidth: {
         bcGovInput: '600px'
       },

strr-host-pm-web/.eslintrc

@@ -23,7 +23,9 @@
         "app-inner-container",
         "connect-date-picker",
         "connect-date-picker__err",
-        "prose-bcGov"
+        "prose-bcGov",
+        "list-alpha",
+        "list-upperAlpha"
       ]
     }],
     "no-use-before-define": "off"

strr-host-pm-web/app/components/document/list/Item.vue

@@ -0,0 +1,50 @@
+<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">{{ $t(`form.pr.docType.${doc.type}`) }}</span>
+            <span>{{ doc.name }}</span>
+          </div>
+        </div>
+      </div>
+      <UButton
+        :label="'Remove'"
+        variant="link"
+        trailing-icon="i-mdi-close"
+        :disabled="doc.loading"
+        @click="$emit('remove', doc)"
+      />
+    </div>
+  </li>
+</template>

strr-host-pm-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-host-pm-web/app/components/document/upload/Button.vue

@@ -0,0 +1,62 @@
+<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 },
+  multiple: { type: Boolean, default: true }
+})
+
+const emit = defineEmits<{
+  change: [any]
+}>()
+
+const { open, onChange } = useFileDialog({
+  accept: props.accept,
+  multiple: props.multiple,
+  directory: false
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+})
+</script>
+<template>
+  <div
+    :id
+    class="flex w-full items-center gap-2"
+  >
+    <UIcon
+      name="i-mdi-paperclip"
+      class="size-6 text-blue-500"
+    />
+    <button
+      class="h-[56px] w-full rounded-t border-b border-gray-500 bg-gray-100 px-4 text-left ring-0
+       hover:border-gray-600 hover:bg-gray-200 focus:border-b-2 focus:border-blue-500 focus:outline-none focus:ring-0"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      :aria-label="ariaLabel"
+      :disabled="isDisabled"
+      @click="open()"
+    >
+      {{ label }}
+    </button>
+  </div>
+</template>
+<style>
+::-webkit-file-upload-button {
+   display: none;
+}
+
+::file-selector-button {
+  display: none;
+}
+</style>

strr-host-pm-web/app/components/document/upload/Select.vue

@@ -0,0 +1,63 @@
+<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]
+}>()
+
+const { open, onChange } = useFileDialog({
+  accept: props.accept,
+  multiple: false,
+  directory: false
+})
+
+onChange((files) => {
+  const file = files?.[0]
+  if (file) {
+    emit('change', file)
+  }
+})
+</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="'Choose Supporting Documents'"
+      :aria-required="isRequired"
+      :aria-invalid="isInvalid"
+      value-attribute="value"
+      :ui-menu="{
+        label: true ? 'text-gray-900' : !!error? 'text-red-600': 'text-gray-700'
+      }"
+      class="w-full cursor-pointer"
+      @change="open()"
+    >
+      <template #label>
+        <span>{{ label }}</span>
+      </template>
+    </USelectMenu>
+  </div>
+</template>