เพิ่ม ui เปลี่ยนรูป รอ api

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

@@ -34,8 +34,13 @@ const {
   success,
   date2Thai,
   dateToISO,
+  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"
@@ -306,6 +311,66 @@ async function clickSaveDeceased() {
   });
 }
 
+function imageActive(n: any) {
+  activeImage.value = n;
+}
+function onImage() {
+  dialogImage.value = true;
+}
+
+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,
+  };
+}
+
+function imageClass(n: any) {
+  const val = n == activeImage.value;
+  return {
+    "rounded-borders bg-grey-2 image-size-default": val,
+    "rounded-borders bg-grey-2 image-size-full": !val,
+  };
+}
+
+const selectAvatarHistory = async () => {
+  if (activeImage.value == null) {
+    dialogMessageNotify(
+      $q,
+      "ไม่สามารถเปลี่ยนรูปได้ กรุณาเลือกรูปที่ต้องการเปลี่ยน"
+    );
+    return;
+  }
+  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 () => {
+      fileName.value = `profile-${profileId.value}`;
+      await fetchProfile(profileId.value);
+      await fetchDataPersonal();
+    });
+  // ***************************************************************************************************
+  //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
+  // ***************************************************************************************************
+};
+
+const deletePhoto = async (id: string) => {
+  dialogRemove($q, () => {}, "ต้องการทำการลบข้อมูลนี้ใช่หรือไม่");
+};
+
 onMounted(async () => {
   fileName.value = `profile-${profileId.value}`;
   fetchProfile(profileId.value);
@@ -406,9 +471,23 @@ onMounted(async () => {
       </div>
 
       <div class="absolute-center-left q-ml-lg">
-        <q-avatar size="90px" class="bg-grey-2">
-          <q-img :src="profilePicture" />
+        <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>
+
         <q-btn
           round
           text-color="primary"
@@ -564,6 +643,92 @@ onMounted(async () => {
       </q-form>
     </q-card>
   </q-dialog>
+
+  <q-dialog v-model="dialogImage" persistent>
+    <q-card style="width: 100vw; max-width: 60vw">
+      <q-card-section class="q-py-sm row">
+        <div class="text-h6">เลือกรูปภาพ</div>
+        <q-space />
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="closeImage"
+          style="color: #ff8080; background-color: #ffdede"
+        >
+          <q-tooltip>ปิดหน้านี้</q-tooltip>
+        </q-btn>
+      </q-card-section>
+      <q-separator />
+      <q-card-section class="col-12 row">
+        <div
+          class="row wrap items-start col-12 q-col-gutter-sm"
+          style="height: 320px; overflow: auto"
+        >
+          <div class="col-3" @click="selectFile">
+            <div
+              style="
+                height: 160px;
+                max-width: 15vw;
+                display: flex !important;
+                justify-content: center;
+                align-items: center;
+              "
+              class="column rounded-borders cursor-pointer bg-active-image text-white"
+            >
+              <q-icon name="add" size="60px" color="white" />
+              <strong>อัปโหลดรูปภาพ</strong>
+            </div>
+          </div>
+          <div
+            v-for="n in images"
+            :key="n"
+            class="col-3"
+            @click="imageActive(n)"
+          >
+            <div :class="getClass(n)">
+              <q-img
+                v-if="n.avatar != null"
+                :src="n.avatar"
+                :class="imageClass(n)"
+              >
+                <div
+                  class="absolute-bottom col-12 cursor-pointer flex justify-between items-center"
+                  style="padding: 5px"
+                >
+                  {{ date2Thai(n.createdDate) }}
+
+                  <q-btn
+                    v-if="!n.isActive"
+                    icon="delete"
+                    unelevated
+                    dense
+                    @click="deletePhoto(n.id)"
+                    class="bg-white"
+                    style="color: #ff8080"
+                  />
+                </div>
+              </q-img>
+            </div>
+          </div>
+        </div>
+      </q-card-section>
+      <q-separator />
+      <q-card-actions align="right">
+        <q-btn
+          icon="check"
+          dense
+          flat
+          round
+          @click="selectAvatarHistory"
+          color="positive"
+        >
+          <q-tooltip>เลือกรูปภาพ</q-tooltip>
+        </q-btn>
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <style scoped>
@@ -597,4 +762,26 @@ 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;
+}
 </style>