From b17f683e64227a291a891c70aece56e82f0c33be Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 25 Sep 2024 10:55:56 +0700
Subject: [PATCH] refactor add new components

---
 src/components/RemarkComponent.vue            | 59 +++++++++++++++
 src/components/upload-file/index.ts           |  1 +
 .../upload-file/noticeJobEmployment.vue       | 72 +++++++++++++++++++
 3 files changed, 132 insertions(+)
 create mode 100644 src/components/RemarkComponent.vue
 create mode 100644 src/components/upload-file/noticeJobEmployment.vue

diff --git a/src/components/RemarkComponent.vue b/src/components/RemarkComponent.vue
new file mode 100644
index 00000000..c4445c2e
--- /dev/null
+++ b/src/components/RemarkComponent.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const remark = defineModel<string>('remark', { default: '' });
+
+defineProps<{
+  readonly: boolean;
+}>();
+</script>
+
+<template>
+  <div class="col-12 row">
+    <div class="col-12 q-mb-md text-weight-bold text-body1">
+      <q-icon
+        flat
+        size="xs"
+        class="q-pa-sm rounded q-mr-xs"
+        color="info"
+        name="mdi-asterisk-circle-outline"
+        style="background-color: var(--surface-3)"
+      />
+      {{ $t('general.remark') }}
+    </div>
+
+    <div class="col-12">
+      <q-field
+        class="full-width"
+        outlined
+        for="input-detail"
+        id="input-detail"
+        :readonly="readonly"
+        :borderless="readonly"
+        :label="$t('general.remark')"
+        stack-label
+        dense
+      >
+        <q-editor
+          dense
+          :model-value="readonly ? remark || '-' : remark"
+          @update:model-value="
+            (v) => (typeof v === 'string' ? (remark = v) : '')
+          "
+          min-height="5rem"
+          class="q-mt-sm q-mb-xs"
+          :flat="!readonly"
+          :readonly="readonly"
+          :toolbar-color="
+            readonly ? 'disabled' : $q.dark.isActive ? 'white' : ''
+          "
+          :toolbar-toggle-color="readonly ? 'disabled' : 'primary'"
+          style="
+            cursor: auto;
+            color: var(--foreground);
+            border-color: var(--surface-3);
+          "
+          :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
+        />
+      </q-field>
+    </div>
+  </div>
+</template>
diff --git a/src/components/upload-file/index.ts b/src/components/upload-file/index.ts
index 6e97a6b7..abb06afb 100644
--- a/src/components/upload-file/index.ts
+++ b/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';
diff --git a/src/components/upload-file/noticeJobEmployment.vue b/src/components/upload-file/noticeJobEmployment.vue
new file mode 100644
index 00000000..e2c1eca6
--- /dev/null
+++ b/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>