refactor: add Upload img

src/pages/02_personnel-management/MainPage.vue

@@ -34,6 +34,7 @@ import PaginationComponent from 'src/components/PaginationComponent.vue';
 import useOptionStore from 'src/stores/options';
 import ProfileBanner from 'src/components/ProfileBanner.vue';
 import SideMenu from 'src/components/SideMenu.vue';
+import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
 
 const { locale, t } = useI18n();
 const $q = useQuasar();
@@ -197,7 +198,7 @@ const formData = ref<UserCreate>({
 });
 
 const isImageEdit = ref<boolean>(false);
-const imageUrl = ref<string | null>('');
+const imageUrl = ref<string>('');
 const profileFileImg = ref<File | null>(null);
 const imageDialog = ref(false);
 
@@ -219,7 +220,7 @@ const inputFileImg = (() => {
   });
 
   element.addEventListener('change', () => {
-    profileFileImg.value = element.files?.[0];
+    profileFileImg.value = element.files?.[0] || null;
     if (profileFileImg.value) {
       reader.readAsDataURL(profileFileImg.value);
     }
@@ -287,7 +288,8 @@ watch(profileFileImg, () => {
 });
 
 inputFileImg.addEventListener('change', (e) => {
-  profileFileImg.value = (e.currentTarget as HTMLInputElement).files?.[0];
+  profileFileImg.value =
+    (e.currentTarget as HTMLInputElement).files?.[0] || null;
 });
 
 const selectorList = computed(() => [
@@ -696,6 +698,25 @@ async function fetchUserList() {
   });
 }
 
+async function handleImageUpload(file: File | null, url: string | null) {
+  if (!infoDrawerEdit.value) {
+    infoDrawerEdit.value = true;
+    await onSubmit();
+    infoDrawerEdit.value = false;
+  }
+  if (infoDrawerEdit.value) {
+    await onSubmit();
+  }
+  imageDialog.value = false;
+}
+
+watch(
+  () => profileFileImg.value,
+  () => {
+    if (profileFileImg.value !== null) isImageEdit.value = true;
+  },
+);
+
 watch(inputSearch, async () => await fetchUserList());
 
 watch(
@@ -1765,6 +1786,31 @@ watch(
       />
     </template>
   </FormDialog>
+
+  <ImageUploadDialog
+    ref="refImageUpload"
+    v-model:dialogState="imageDialog"
+    v-model:file="profileFileImg as File"
+    v-model:image-url="imageUrl"
+    :hiddenFooter="!isImageEdit"
+    clearButton
+    @save="handleImageUpload"
+  >
+    <template #error>
+      <div class="full-height full-width" style="background: white">
+        <div
+          class="full-height full-width flex justify-center items-center"
+          style="background: hsla(var(--pink-6-hsl) / 0.15)"
+        >
+          <q-icon
+            size="15rem"
+            name="mdi-office-building-outline"
+            style="color: hsla(var(--pink-6-hsl) / 1)"
+          ></q-icon>
+        </div>
+      </div>
+    </template>
+  </ImageUploadDialog>
 </template>
 <style scoped>
 .upload-img-preview {