refactor add new components

src/components/upload-file/index.ts

@@ -4,3 +4,4 @@ export { default as FormCitizen } from './FormCitizen.vue';
 export { default as FormTm6 } from './FormTm6.vue';
 export { default as CorpFormBusinessRegistration } from './CorpFormBusinessRegistration.vue';
 export { default as PersFormBusinessRegistration } from './PersFormBusinessRegistration.vue';
+export { default as noticeJobEmployment } from './noticeJobEmployment.vue';

src/components/upload-file/noticeJobEmployment.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import DatePicker from '../shared/DatePicker.vue';
+
+const permitNumber = defineModel<string>('permitNumber', { default: '' });
+const jobDescription = defineModel<string>('jobDescription', { default: '' });
+const workplace = defineModel<string>('workplace', { default: '' });
+const dateOfHire = defineModel<Date>('dateOfHire');
+
+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.noticeJobEmployment.permitNumber')"
+        for="input-citizen-id"
+        v-model="permitNumber"
+      />
+
+      <q-input
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-6"
+        :label="$t('form.noticeJobEmployment.jobDescription')"
+        for="input-citizen-id"
+        v-model="jobDescription"
+      />
+    </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.noticeJobEmployment.workplace')"
+        for="input-citizen-id"
+        v-model="workplace"
+      />
+    </div>
+
+    <div class="col-12 row q-col-gutter-sm">
+      <DatePicker
+        :label="$t('form.noticeJobEmployment.dateOfHire')"
+        v-model="dateOfHire"
+        class="col-4"
+        :id="`${prefixId}-input-birth-date`"
+        :readonly="readonly"
+        clearable
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>