no message

src/api/file/api.file.ts

@@ -15,6 +15,9 @@ export default {
 
   file: (name: string, group: string, id: string) =>
     `${url}/file/${name}/${group}/${id}`,
+
+  fileByPath: (name: string) =>
+    `${url}/file/${name}`,
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
 };

src/api/registry/api.profile.ts

@@ -212,5 +212,8 @@ export default {
   /**ปรับรายการเงินเดือนขึ้น-ลง*/
   salarySwap: (dierction: string, id: string) =>
     `${profile}salary/swap/${dierction}/${id}`,
-  listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}`
+  listProfileNew:(id:string,page:number,pageSize:number)=>`${profile}search/new-page/oc/${id}/officer?page=${page}&pageSize=${pageSize}`,
+
+
+  orgProfileAvatar:`${registryNew}avatar`
 };

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

@@ -21,6 +21,8 @@ const dateDeath = ref<Date>(new Date());
 const filePassaway = ref<any>(null);
 const reasonDeath = ref("");
 
+const dialogImage = ref<boolean>(false);
+
 const mixin = useCounterMixin();
 const $q = useQuasar();
 const router = useRouter();
@@ -37,10 +39,6 @@ const {
   dialogMessageNotify,
 } = mixin;
 
-const dialogImage = ref<boolean>(false);
-const images = ref<any>([]);
-const activeImage = ref<any | null>(null);
-
 const profileId = ref<string>(route.params.id.toString());
 const empType = ref<string>(
   route.name === "registryNewByid" ? "" : "-employee"
@@ -79,21 +77,44 @@ const fileName = ref<string>("");
 const profilePicture = ref<string>("");
 const profileFile = ref();
 const input = document.createElement("input");
+const activeImage = ref<any | null>(null);
+const images = ref<any[]>([]);
+
 input.type = "file";
 input.accept = ".jpg,.png,.tif,.pic";
 
 input.addEventListener("change", (e) => {
   profileFile.value = (e.currentTarget as HTMLInputElement).files?.[0];
-  uploadProfile();
+  uploadImg();
 });
 
 function selectFile() {
   input.click();
+  imageActive(null);
 }
 
-async function uploadProfile() {
+function imageActive(n: any){
+  activeImage.value = n;
+};
+
+function uploadImg(){
+  http
+  .post(config.API.orgProfileAvatar,{
+    profileId:profileId.value
+  })
+  .then((res)=>{
+    console.log(res.data)
+    uploadProfile(res.data.result.avatar)
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+
+  })
+}
+
+async function uploadProfile(path:string) {
   await http
-    .post(config.API.file("ทะเบียนประวัติ", "โปรไฟล์", profileId.value), {
+    .post(config.API.fileByPath(path), {
       replace: true,
       fileList: [
         {
@@ -104,6 +125,7 @@ async function uploadProfile() {
     .then(async (res) => {
       uploadUrl.value = res.data[fileName.value].uploadUrl;
       uploadFileURL(uploadUrl.value, profileFile.value);
+      dialogImage.value = false
     })
     .catch((err) => {
       messageError($q, err);
@@ -311,23 +333,42 @@ async function clickSaveDeceased() {
   });
 }
 
-function imageActive(n: any) {
-  activeImage.value = n;
-}
-function onImage() {
+function openDialogImg() {
   dialogImage.value = true;
+  showLoader()
+  http
+  .get(config.API.orgProfileAvatar+`/${profileId.value}`)
+  .then((res)=>{
+    let data = res.data.result;
+    for(let i = 0;i < data.length; i++){
+      getImg(data[i])
+    }
+      // images.value = data
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    hideLoader()
+  })
+}
+
+function getImg(dataList:any){
+  http
+  .get(config.API.fileByPath(`${dataList.avatar}/${dataList.avatarName}`))
+  .then((res)=>{
+    console.log(res)
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+    
+  })
 }
 
 function closeImage() {
   dialogImage.value = false;
 }
 
-function getClass(n: any) {
-  const val = n == activeImage.value;
-  return {
-    "rounded-borders border-green shadow-1": val,
-    "rounded-borders shadow-1": !val,
-  };
+async function deletePhoto(id: string) {
+  dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่");
 }
 
 function imageClass(n: any) {
@@ -338,38 +379,37 @@ function imageClass(n: any) {
   };
 }
 
-const selectAvatarHistory = async () => {
+function getClass(n: any) {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders border-green shadow-1": val,
+    "rounded-borders shadow-1": !val,
+  };
+}
+
+async function selectAvatarHistory() {
   if (activeImage.value == null) {
-    dialogMessageNotify(
-      $q,
-      "ไม่สามารถเปลี่ยนรูปได้ กรุณาเลือกรูปที่ต้องการเปลี่ยน"
-    );
+    dialogMessageNotify($q, "กรุณาเลือกรูปที่ต้องการเปลี่ยน");
     return;
   }
   showLoader();
   await http
-    .put(config.API.profileAvatarId(route.params.id.toString()), {
+    .put(config.API.profileAvatarId(profileId.value), {
       avatar: activeImage.value.avatarId,
     })
     .then((res) => {
       dialogImage.value = false;
+      fileName.value = `profile-${profileId.value}`;
+      fetchProfile(profileId.value);
+      fetchDataPersonal();
     })
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
-      fileName.value = `profile-${profileId.value}`;
-      await fetchProfile(profileId.value);
-      await fetchDataPersonal();
+    .finally(() => {
+      hideLoader()
     });
-  // ***************************************************************************************************
-  //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
-  // ***************************************************************************************************
-};
-
-const deletePhoto = async (id: string) => {
-  dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่");
-};
+}
 
 onMounted(async () => {
   fileName.value = `profile-${profileId.value}`;
@@ -471,28 +511,14 @@ onMounted(async () => {
       </div>
 
       <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px">
-          <q-img :src="profilePicture" class="relative-position">
-            <div class="overlay-display vertical-middle">
-              <q-btn
-                round
-                flat
-                icon="mdi-camera"
-                size="md"
-                color="blue"
-                @click="onImage"
-              >
-                <q-tooltip>อัปเดตรูปภาพ</q-tooltip>
-              </q-btn>
-            </div>
-          </q-img>
+        <q-avatar size="90px" class="bg-grey-2">
+          <q-img :src="profilePicture" />
         </q-avatar>
-
         <q-btn
           round
           text-color="primary"
           icon="mdi-pencil-outline"
-          @click="selectFile"
+          @click="openDialogImg"
           size="sm"
           unelevated
           class="bg-white btnEditImg"
@@ -644,6 +670,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
+  <!-- Dialog เลือก Image -->
   <q-dialog v-model="dialogImage" persistent>
     <q-card style="width: 100vw; max-width: 60vw">
       <q-card-section class="q-py-sm row">
@@ -693,6 +720,19 @@ onMounted(async () => {
                 :src="n.avatar"
                 :class="imageClass(n)"
               >
+                <!-- <div
+                  class="absolute-top bg-transparent cursor-pointer text-right"
+                  style="padding: 5px"
+                >
+                  <q-btn
+                    icon="delete"
+                    unelevated
+                    round
+                    dense
+                    @click="deletePhoto"
+                    style="color: #ff8080"
+                  />
+                </div> -->
                 <div
                   class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
                   style="padding: 5px"
@@ -707,7 +747,9 @@ onMounted(async () => {
                     @click="deletePhoto(n.id)"
                     class="bg-white"
                     style="color: #ff8080"
-                  />
+                  >
+                    <q-tooltip>ลบรูปภาพ</q-tooltip>
+                  </q-btn>
                 </div>
               </q-img>
             </div>
@@ -716,6 +758,15 @@ onMounted(async () => {
       </q-card-section>
       <q-separator />
       <q-card-actions align="right">
+        <!-- <q-btn
+          flat
+          round
+          color="red"
+          @click="() => {}"
+          icon="mdi-delete-outline"
+        >
+          <q-tooltip>ลบรูปภาพ</q-tooltip>
+        </q-btn> -->
         <q-btn
           icon="check"
           dense
@@ -762,26 +813,8 @@ h2.title {
   right: 0;
   border: 1px solid #ededed;
 }
-.hover-img:hover {
-  background-color: red;
-}
 
-.overlay-display {
-  background-color: #000000a0;
-  position: absolute;
-  top: -28px;
-  left: -6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100px;
-  height: 150px;
-  opacity: 0;
-  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.3s ease,
-    box-shadow 0.3s ease;
-}
-
-.overlay-display:hover {
-  opacity: 1;
+.bg-active-image {
+  background-color: #52c688;
 }
 </style>