แก้ไข บัค store , ปรับ component รูปภาพ

src/components/information/Image.vue

@@ -66,9 +66,9 @@
       <div class="row items-center text-dark q-ml-md">
         <div class="column">
           <div class="text-bold q-pb-xs text-name">
-            {{ props.fullName }}
+            {{ fullname }}
           </div>
-          <div>{{ props.position }}</div>
+          <div>{{ position }}</div>
         </div>
       </div>
       <q-space />
@@ -164,22 +164,14 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
-  fullName: {
-    type: String,
-    default: "ชื่อ สกุล",
-    required: true,
-  },
-  position: {
-    type: String,
-    default: "ตำแหน่ง",
-    required: true,
-  },
   fetchData: {
     type: Function,
     default: () => console.log("not function"),
@@ -200,15 +192,33 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 
+const route = useRoute();
 const router = useRouter();
+
+const fullname = ref<string>("");
+const position = ref<string>("");
+
 const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
-const dialogImage = ref<boolean>(false);
-const images = ref<any>([]);
 const activeImage = ref<any | null>(null);
-const profileId = ref<string>("");
+
+const dialogImage = ref<boolean>(false);
+
+const images = ref<any>([]);
+
+onMounted(async () => {
+  await fetchData();
+});
 
 const closeImage = () => {
   dialogImage.value = false;
@@ -218,7 +228,7 @@ const clickImage = async () => {
   // ***************************************************************************************************
   //                  ****************** fetch data รูปภาพทั้งหมด ******************
   // ***************************************************************************************************
-
+  await fetchAvatarHistory();
   dialogImage.value = true;
 };
 
@@ -227,14 +237,18 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    await props.fetchUpload(profileId.value, formData).then(async () => {
-      await props.fetchData();
-      closeImage();
-    });
-    // ***************************************************************************************************
-    //          ****************** ต้องทำ function props รับ formData กลับ ******************
-    //     ****************** finally ทำการ fetch data,dialogImage.value = false ******************
-    // ***************************************************************************************************
+    showLoader();
+    await http
+      .post(config.API.profileAvatarId(route.params.id.toString()), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        dialogImage.value = false;
+      });
+    return;
   }
 };
 
@@ -253,7 +267,20 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  await props.fetchSave(profileId.value);
+  showLoader();
+  await http
+    .put(config.API.profileAvatarId(route.params.id.toString()), {
+      avatar: activeImage.value.avatarId,
+    })
+    .then((res) => {
+      dialogImage.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
   // ***************************************************************************************************
   //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
   // ***************************************************************************************************
@@ -283,14 +310,77 @@ const deletePhoto = async (id: string) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  await props.fetchDelete(id).then(async () => {
-    await props.fetchData();
-    await clickImage();
-  });
-  // ***************************************************************************************************
-  //                  ****************** fetch delete รูปภาพ ******************
-  //          ****************** finally ทำการ fetch data,clickImage() ******************
-  // ***************************************************************************************************
+  showLoader();
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+      //   dialogImage.value = false;
+    });
+};
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      fullname.value = data.fullname;
+      imageUrl.value = data.avatar;
+      position.value = data.position;
+      //   profileType.value = data.profileType;
+      //   employeeClass.value =
+      //     data.employeeClass == null ? "" : data.employeeClass;
+      //   const reason = reasonOptions.value.filter(
+      //     (r: DataOption) => r.id == data.leaveReason
+      //   );
+      //   if (reason.length > 0) {
+      //     leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+      //   } else {
+      //     leaveReason.value = "";
+      //   }
+      //   reasonStatus.value = reason.length > 0 ? true : false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchAvatarHistory = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarHistoryId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      images.value = [];
+      data.map((e: any) => {
+        images.value.push({
+          id: e.id,
+          avatar: e.avatar,
+          avatarId: e.avatarId,
+          createdDate: new Date(e.createdDate),
+          isActive: e.isActive,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const imageClass = (n: any) => {