pukaad-ui-lib 1.292.0 → 1.294.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "pukaad-ui-lib",
   "configKey": "pukaadUI",
-  "version": "1.292.0",
+  "version": "1.294.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/assets/svg/heart-fill.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M12.6666 9.33333C13.66 8.36 14.6666 7.19333 14.6666 5.66667C14.6666 4.69421 14.2803 3.76158 13.5927 3.07394C12.9051 2.38631 11.9724 2 11 2C9.82665 2 8.99998 2.33333 7.99998 3.33333C6.99998 2.33333 6.17331 2 4.99998 2C4.02752 2 3.09489 2.38631 2.40725 3.07394C1.71962 3.76158 1.33331 4.69421 1.33331 5.66667C1.33331 7.2 2.33331 8.36667 3.33331 9.33333L7.99998 14L12.6666 9.33333Z" fill="#1976B8" stroke="#1976B8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/runtime/components/drawer/drawer-post-review.d.vue.ts

@@ -1,10 +1,16 @@
+interface IFileItem {
+    file?: File;
+    url: string;
+    description?: string;
+}
 export interface DrawerPostReviewItem {
+    placeId: string;
     placeName: string;
     address: string;
     coverImage: string;
     rating: number;
     description: string;
-    photos: File[];
+    photos: IFileItem[];
 }
 export interface DrawerPostReviewProps {
     item?: DrawerPostReviewItem;
@@ -17,9 +23,9 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    submit: (data: DrawerPostReviewItem) => any;
+    success: (data: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
+    onSuccess?: ((data: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     item: DrawerPostReviewItem;

package/dist/runtime/components/drawer/drawer-post-review.vue

@@ -1,80 +1,90 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <div class="flex gap-[16px]">
-        <div
-          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
-        >
-          <Image
-            v-if="form.coverImage"
-            :src="form.coverImage"
-            width="auto"
-            height="auto"
-            fit="cover"
-          />
-        </div>
-        <div class="flex flex-col gap-[4px]">
-          <div class="font-body-large-prominent">
-            {{ form.placeName }}
-          </div>
-          <div class="font-body-small text-gray">
-            {{ form.address }}
-          </div>
-        </div>
-      </div>
-      <div class="flex items-center justify-center">
-        <InputRating v-model="form.rating" :size="40" />
-      </div>
-      <InputTextarea
-        name="description"
-        label="คำอธิบาย"
-        placeholder="เขียนรีวิวของคุณ"
-        showCounter
-        v-model="form.description"
-        class="min-h-[120px]"
-      />
-      <div class="flex flex-col gap-[8px]">
-        <div class="flex flex-col gap-[4px]">
-          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
-          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
-        </div>
-        <InputFile
-          :limit="9"
-          name="photos"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.photos"
-        />
-        <div class="flex flex-col text-gray font-body-small">
-          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-          <div>ขนาดไฟล์สูงสุด 30 mb</div>
-        </div>
-      </div>
-    </div>
-    <template #footer="{ meta }">
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose">ยกเลิก</Button>
-        <Button type="submit" color="primary" :disabled="form.rating === 0">
-          ยืนยัน
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <div class="flex gap-[16px]">
+        <div
+          class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
+        >
+          <Image
+            v-if="form.coverImage"
+            :src="form.coverImage"
+            width="auto"
+            height="auto"
+            fit="cover"
+          />
+        </div>
+        <div class="flex flex-col gap-[4px]">
+          <div class="font-body-large-prominent">
+            {{ form.placeName }}
+          </div>
+          <div class="font-body-small text-gray">
+            {{ form.address }}
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center justify-center py-[16px]">
+        <InputRating v-model="form.rating" :size="28" />
+      </div>
+      <InputTextarea
+        name="description"
+        label="คำอธิบาย"
+        placeholder="เขียนรีวิวของคุณ"
+        showCounter
+        v-model="form.description"
+        class="min-h-[120px]"
+      />
+      <div class="flex flex-col gap-[8px]">
+        <div class="flex flex-col gap-[4px]">
+          <div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
+          <div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
+        </div>
+        <InputFile
+          :limit="9"
+          name="photos"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.photos"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไฟล์สูงสุด 30 mb</div>
+        </div>
+      </div>
+    </div>
+    <template #footer="{ meta }">
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose" :disabled="isSubmitting"
+          >ยกเลิก</Button
+        >
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="form.rating === 0 || isSubmitting"
+          :loading="isSubmitting"
+        >
+          ยืนยัน
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>
+import { useApi } from "../../composables/useApi";
 import { ref, watch, computed } from "vue";
 import { useNuxtApp } from "nuxt/app";
 const { $alert } = useNuxtApp();
-const emit = defineEmits(["submit"]);
+const api = useApi();
+const emit = defineEmits(["success"]);
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({
+    placeId: "",
     placeName: "",
     address: "",
     coverImage: "",
@@ -83,22 +93,43 @@ const props = defineProps({
     photos: []
   }) }
 });
-const form = ref(JSON.parse(JSON.stringify(props.item)));
-const isOpen = defineModel({ type: Boolean, ...{
-  default: false
-} });
-const drawerTitle = computed(() => {
-  const hasDescription = props.item?.description?.trim();
-  return hasDescription ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27";
+const isOpen = defineModel({ type: Boolean, ...{ default: false } });
+const isSubmitting = ref(false);
+const form = ref({
+  placeId: props.item.placeId,
+  placeName: props.item.placeName,
+  address: props.item.address,
+  coverImage: props.item.coverImage,
+  rating: props.item.rating,
+  description: props.item.description,
+  photos: props.item.photos ? [...props.item.photos] : []
 });
+const isEdit = computed(() => !!(props.item?.rating && props.item.rating > 0));
+const drawerTitle = computed(
+  () => isEdit.value ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27"
+);
 watch(isOpen, (newVal) => {
   if (newVal) {
-    form.value = JSON.parse(JSON.stringify(props.item));
+    form.value = {
+      placeId: props.item.placeId,
+      placeName: props.item.placeName,
+      address: props.item.address,
+      coverImage: props.item.coverImage,
+      rating: props.item.rating,
+      description: props.item.description,
+      photos: props.item.photos ? [...props.item.photos] : []
+    };
   }
 });
+const hasChanges = () => {
+  const orig = props.item;
+  if (form.value.rating !== orig.rating) return true;
+  if (form.value.description !== orig.description) return true;
+  if (form.value.photos.length !== (orig.photos?.length ?? 0)) return true;
+  return false;
+};
 const onClose = async () => {
-  const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
-  if (isModified) {
+  if (hasChanges()) {
     const { isConfirmed } = await $alert.show({
       type: "warning",
       title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
@@ -107,15 +138,65 @@ const onClose = async () => {
       cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
       showCancelBtn: true
     });
-    if (isConfirmed) {
-      isOpen.value = false;
-    }
+    if (isConfirmed) isOpen.value = false;
   } else {
     isOpen.value = false;
   }
 };
-const onSubmit = () => {
-  emit("submit", form.value);
-  isOpen.value = false;
+const uploadNewPhotos = async (items) => {
+  const newItems = items.filter((it) => it.file);
+  if (newItems.length === 0) return [];
+  const fileNames = newItems.map((it) => it.file.name);
+  const presignedRes = await api("/storage/presigned-urls", {
+    method: "post",
+    body: { state: "suggest-place-review", file_name: fileNames }
+  });
+  const uploadItems = presignedRes?.data?.items ?? [];
+  if (uploadItems.length !== newItems.length) {
+    throw new Error("\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2A\u0E23\u0E49\u0E32\u0E07 upload URL \u0E44\u0E14\u0E49 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07");
+  }
+  await Promise.all(
+    uploadItems.map((slot, i) => {
+      const file = newItems[i]?.file;
+      if (!slot || !file) return Promise.resolve();
+      return $fetch(slot.upload_url, {
+        method: "PUT",
+        body: file,
+        headers: { "Content-Type": file.type }
+      });
+    })
+  );
+  return uploadItems.map((u) => u.public_url);
+};
+const onSubmit = async () => {
+  if (isSubmitting.value) return;
+  isSubmitting.value = true;
+  try {
+    const existingUrls = form.value.photos.filter((it) => !it.file).map((it) => it.url);
+    const newUrls = await uploadNewPhotos(form.value.photos);
+    const allPhotos = [...existingUrls, ...newUrls];
+    const response = await api(
+      `/personal/suggest-places/${form.value.placeId}/review`,
+      {
+        method: "put",
+        body: {
+          rating: form.value.rating,
+          description: form.value.description,
+          photos: allPhotos
+        }
+      }
+    );
+    emit("success", response?.data);
+    isOpen.value = false;
+  } catch (err) {
+    const msg = err?.data?.message || err?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07";
+    await $alert.show({
+      type: "error",
+      title: "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14",
+      description: msg
+    });
+  } finally {
+    isSubmitting.value = false;
+  }
 };
 </script>

package/dist/runtime/components/drawer/drawer-post-review.vue.d.ts

@@ -1,10 +1,16 @@
+interface IFileItem {
+    file?: File;
+    url: string;
+    description?: string;
+}
 export interface DrawerPostReviewItem {
+    placeId: string;
     placeName: string;
     address: string;
     coverImage: string;
     rating: number;
     description: string;
-    photos: File[];
+    photos: IFileItem[];
 }
 export interface DrawerPostReviewProps {
     item?: DrawerPostReviewItem;
@@ -17,9 +23,9 @@ type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => any;
 } & {
-    submit: (data: DrawerPostReviewItem) => any;
+    success: (data: any) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
+    onSuccess?: ((data: any) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }>, {
     item: DrawerPostReviewItem;

package/dist/runtime/components/image/image-cropper.d.vue.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/image/image-cropper.vue.d.ts

@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
     src: string;
     center: boolean;
+    background: boolean;
+    modal: boolean;
     responsive: boolean;
     restore: boolean;
     checkCrossOrigin: boolean;
     checkOrientation: boolean;
     crossorigin: "" | "anonymous" | "use-credentials";
-    modal: boolean;
     guides: boolean;
     highlight: boolean;
-    background: boolean;
     autoCrop: boolean;
     movable: boolean;
     rotatable: boolean;

package/dist/runtime/components/input/input-file.d.vue.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/dist/runtime/components/input/input-file.vue.d.ts

@@ -35,8 +35,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     fullHeight: boolean;
     name: string;
     limit: number;
-    accept: string;
     disabledErrorMessage: boolean;
+    accept: string;
     labelIcon: string;
     disabledDrop: boolean;
     column: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pukaad-ui-lib",
-  "version": "1.292.0",
+  "version": "1.294.0",
   "description": "pukaad-ui for MeMSG",
   "repository": {
     "type": "git",