refactor: add new form upload file

src/components/upload-file/FormTm6.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import DatePicker from '../shared/DatePicker.vue';
+import { AddressForm } from 'components/form';
+
+const transportation = defineModel<string>('transportation', { default: '' });
+const travelDate = defineModel<string>('travelDate', { default: '' });
+const entryCheckpoint = defineModel<string>('entryCheckpoint', { default: '' });
+const entryCardNumber = defineModel<string>('entryCardNumber', { default: '' });
+
+const address = defineModel<string>('address');
+const street = defineModel('street', { default: '' });
+const moo = defineModel('moo', { default: '' });
+const soi = defineModel('soi', { default: '' });
+const provinceId = defineModel<string | null | undefined>('provinceId');
+const districtId = defineModel<string | null | undefined>('districtId');
+const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
+const homeCode = defineModel<string | null | undefined>('homeCode');
+const employmentOffice = defineModel<string | null | undefined>(
+  'employmentOffice',
+);
+
+defineProps<{
+  prefixId?: string;
+  outlined?: boolean;
+  readonly?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row q-mb-sm" style="gap: 10px">
+    <div class="col-12 text-subtitle1 text-weight-bold">
+      <p>Document Properties</p>
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.tm6.transportation')"
+        for="input-citizen-id"
+        v-model="transportation"
+      />
+
+      <DatePicker
+        :label="$t('form.tm6.travelDate')"
+        v-model="travelDate"
+        class="col-4"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+    </div>
+
+    <AddressForm
+      prefixId="form-tm6"
+      hide-icon
+      hide-title
+      hide-input-en
+      dense
+      v-model:homeCode="homeCode"
+      v-model:employmentOffice="employmentOffice"
+      v-model:address="address"
+      v-model:street="street"
+      v-model:moo="moo"
+      v-model:soi="soi"
+      v-model:province-id="provinceId"
+      v-model:district-id="districtId"
+      v-model:sub-district-id="subDistrictId"
+    />
+
+    <div class="col-12 row q-col-gutter-sm">
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('form.tm6.entryCheckpoint')"
+        for="input-citizen-id"
+        v-model="entryCheckpoint"
+      />
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('form.tm6.entryCardNumber')"
+        for="input-citizen-id"
+        v-model="entryCardNumber"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>