refactor: add btn uploand file passport

src/components/03_customer-management/FormEmployeePassport.vue

@@ -9,6 +9,8 @@ import useOptionStore from 'stores/options';
 
 import DatePicker from '../shared/DatePicker.vue';
 
+import { dateFormat } from 'src/utils/datetime';
+
 const optionStore = useOptionStore();
 const { locale } = useI18n();
 
@@ -32,6 +34,8 @@ const firstName = defineModel<string>('firstName');
 const namePrefix = defineModel<string>('namePrefix');
 const passportNumber = defineModel<string>('passportNumber');
 
+const file = defineModel<File>('file');
+
 const passportValidator = /[a-zA-Z]{1}[a-zA-Z0-9]{1}[0-9]{5,7}$/;
 
 const genderOptions = ref<Record<string, unknown>[]>([]);
@@ -177,6 +181,30 @@ watch(
   },
 );
 
+function browse() {
+  inputFile?.click();
+}
+
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/jpeg,image/png';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+async function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    const newFileName = `passport-${dateFormat(new Date().toISOString())}-${_file.name}`;
+    const renamedFile = new File([_file], newFileName, { type: _file.type });
+
+    file.value = renamedFile;
+  }
+}
+
 watch(
   () => namePrefix.value,
   (v) => {
@@ -221,20 +249,14 @@ watch(
     </div>
 
     <div class="q-col-gutter-sm" :class="{ row: $q.screen.gt.sm }">
-      <div
-        class="col row justify-center q-col-gutter-sml"
-        style="max-height: 50%"
-        v-if="!ocr"
-      >
-        <q-avatar
-          style="border: 1px dashed; border-color: black"
-          square
-          size="100px"
-          font-size="50px"
-          color="grey-4"
-          text-color="grey"
-          icon="mdi-image-outline"
-        />
+      <div v-if="!ocr">
+        <q-btn
+          flat
+          color="primary"
+          icon="mdi-upload-box-outline"
+          @click="() => browse()"
+          :disable="readonly"
+        ></q-btn>
       </div>
       <div
         class="row q-col-gutter-sm"