ทะเบียนประวัติ เปลี่ยนรูป

src/modules/04_registryNew/views/detailView.vue

@@ -79,6 +79,7 @@ const profileFile = ref();
 const input = document.createElement("input");
 const activeImage = ref<any | null>(null);
 const images = ref<any[]>([]);
+const imagesAlldata = ref<any[]>([]);
 
 input.type = "file";
 input.accept = ".jpg,.png,.tif,.pic";
@@ -126,7 +127,7 @@ async function uploadProfile(path: string) {
     .then(async (res) => {
       uploadUrl.value = res.data[fileName.value].uploadUrl;
       uploadFileURL(uploadUrl.value, profileFile.value);
-      dialogImage.value = false;
+      closeImage();
     })
     .catch((err) => {
       messageError($q, err);
@@ -337,15 +338,19 @@ async function clickSaveDeceased() {
 
 function openDialogImg() {
   dialogImage.value = true;
+  getImage();
+}
+function getImage() {
   showLoader();
   http
     .get(config.API.orgProfileAvatar + `/${profileId.value}`)
-    .then((res) => {
+    .then(async (res) => {
       let data = res.data.result;
+      imagesAlldata.value = data;
+
       for (let i = 0; i < data.length; i++) {
-        getImg(data[i]);
+        await getImg(data[i]);
       }
-      // images.value = data
     })
     .catch((e) => {
       messageError($q, e);
@@ -359,7 +364,14 @@ function getImg(dataList: any) {
   http
     .get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`))
     .then((res) => {
-      console.log(res);
+      const data = res.data;
+      const newData = {
+        id: dataList.id,
+        isActive: dataList.isActive,
+        ...data,
+      };
+      images.value = [...images.value, newData];
+      console.log(images.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -369,10 +381,31 @@ function getImg(dataList: any) {
 
 function closeImage() {
   dialogImage.value = false;
+  images.value = [];
+  imagesAlldata.value = [];
 }
 
 async function deletePhoto(id: string) {
-  dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่");
+  dialogRemove(
+    $q,
+    () => {
+      showLoader();
+      http
+        .delete(config.API.orgProfileAvatar + `/${id}`)
+        .then((res) => {
+          images.value = [];
+          imagesAlldata.value = [];
+          getImage();
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่"
+  );
 }
 
 function imageClass(n: any) {
@@ -382,7 +415,6 @@ function imageClass(n: any) {
     "rounded-borders bg-grey-2 image-size-full": !val,
   };
 }
-
 function getClass(n: any) {
   const val = n == activeImage.value;
   return {
@@ -392,20 +424,21 @@ function getClass(n: any) {
 }
 
 async function selectAvatarHistory() {
+  console.log(activeImage.value);
+
   if (activeImage.value == null) {
     dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
     return;
   }
+  const data = activeImage.value;
   showLoader();
   await http
-    .put(config.API.profileAvatarId(profileId.value), {
-      avatar: activeImage.value.avatarId,
-    })
-    .then((res) => {
-      dialogImage.value = false;
-      //   fileName.value = `profile-${profileId.value}`;
-      fetchProfile(profileId.value);
-      fetchDataPersonal();
+    .get(config.API.orgProfileAvatar + `/select/${profileId.value}/${data.id}`)
+    .then(async(res) => {
+      closeImage();
+
+      await fetchDataPersonal();
+      await fetchProfile(profileId.value);
     })
     .catch((e) => {
       messageError($q, e);
@@ -720,8 +753,8 @@ onMounted(async () => {
           >
             <div :class="getClass(n)">
               <q-img
-                v-if="n.avatar != null"
-                :src="n.avatar"
+                v-if="n.downloadUrl != null"
+                :src="n.downloadUrl"
                 :class="imageClass(n)"
               >
                 <!-- <div
@@ -741,7 +774,7 @@ onMounted(async () => {
                   class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
                   style="padding: 5px"
                 >
-                  {{ date2Thai(n.createdDate) }}
+                  {{ date2Thai(n.createdAt) }}
 
                   <q-btn
                     v-if="!n.isActive"
@@ -821,4 +854,18 @@ h2.title {
 .bg-active-image {
   background-color: #52c688;
 }
+
+.image-size-default {
+  height: 150px;
+  max-width: 15vw;
+}
+
+.image-size-full {
+  height: 160px;
+  max-width: 15vw;
+}
+.border-green {
+  border: 5px solid #52c688;
+  border-radius: 8px;
+}
 </style>