pukaad-ui-lib 1.212.1 → 1.213.0

package/dist/module.json

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

package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.d.vue.ts

@@ -8,11 +8,12 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
-    "update:data": (value: SuggestPlaceData) => void;
+    "update:modelValue": (value: boolean) => any;
+    "update:data": (value: SuggestPlaceData) => any;
+} & {
+    submit: (data: SuggestPlaceData) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((data: SuggestPlaceData) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onUpdate:data"?: ((value: SuggestPlaceData) => any) | undefined;
 }>, {

package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue

@@ -1,5 +1,5 @@
 <template>
-  <Drawer class="w-[888px]" :title="drawerTitle" v-model="isOpen">
+  <Drawer class="w-[888px]" :title="drawerTitle" :loading="loading" v-model="isOpen">
     <!-- backoffice: แสดงแบบมี tabs -->
     <ShadTabs v-if="props.state === 'backoffice'">
       <ShadTabsList>
@@ -97,12 +97,19 @@
 
 <script setup>
 import { computed, ref } from "vue";
+import { useNuxtApp } from "nuxt/app";
+import { useApi } from "@/runtime/composables/useApi";
+import { usePresignedUpload } from "@/runtime/composables/usePresignedUpload";
 const props = defineProps({
   state: { type: String, required: false, default: "personal" }
 });
 const emit = defineEmits(["submit"]);
+const { $toast } = useNuxtApp();
+const api = useApi();
+const { uploadFiles } = usePresignedUpload();
 const isOpen = defineModel({ type: Boolean, ...{ default: false } });
 const formData = defineModel("data", { type: Object, ...{ default: () => ({}) } });
+const loading = ref(false);
 const photoColumns = ref(false);
 const videoColumns = ref(false);
 if (!formData.value.photos) formData.value.photos = [];
@@ -115,8 +122,63 @@ const isFormValid = computed(() => {
   const hasCategories = !!(d.categories && d.categories.length > 0);
   return addressComplete && hasLatLng && hasBusinessName && hasCategories;
 });
-const onSubmit = () => {
-  emit("submit", formData.value);
+const endpointMap = {
+  personal: "/personal/suggest-places",
+  business: "/business/suggest-places",
+  backoffice: "/office/suggest-places"
+};
+const onSubmit = async () => {
+  loading.value = true;
+  try {
+    const d = formData.value;
+    const [photoUrls, videoUrls, reviewPhotoUrls] = await Promise.all([
+      uploadFiles(d.photos ?? [], "suggest-place-media"),
+      uploadFiles(d.videos ?? [], "suggest-place-media"),
+      uploadFiles(d.reviewPhotos ?? [], "suggest-place-review")
+    ]);
+    const categoryIds = (d.categories ?? []).map(
+      (c) => typeof c === "object" ? String(c.id ?? c.value) : String(c)
+    );
+    const endpoint = endpointMap[props.state] ?? "/personal/suggest-places";
+    const res = await api(endpoint, {
+      method: "POST",
+      body: {
+        business_name: d.businessName ?? "",
+        name_th: d.nameTh ?? "",
+        name_en: d.nameEn ?? "",
+        description: d.description ?? "",
+        address: {
+          province_id: d.address?.province_id,
+          amphur_id: d.address?.amphur_id,
+          tambon_id: d.address?.tambon_id,
+          zipcode: d.address?.zipcode,
+          detail_address: d.address?.detail_address ?? "",
+          full_address: d.address?.full_address ?? ""
+        },
+        latLng: d.latLng ?? null,
+        phone: d.phone ?? "",
+        extra_phones: d.extraPhones ?? [],
+        contact_channels: d.contactChannels ?? [],
+        opening_hours: d.openingHours ?? null,
+        categories: categoryIds,
+        is_review: d.isReview ?? false,
+        rating: d.rating ?? 0,
+        review_description: d.reviewDescription ?? "",
+        review_photos: reviewPhotoUrls,
+        photos: photoUrls,
+        videos: videoUrls
+      }
+    });
+    $toast?.success?.(res?.message || "\u0E41\u0E19\u0E30\u0E19\u0E33\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+    emit("submit", formData.value);
+    isOpen.value = false;
+  } catch (e) {
+    $toast?.error?.(
+      e?.data?.error || e?.data?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E40\u0E0A\u0E37\u0E48\u0E2D\u0E21\u0E15\u0E48\u0E2D"
+    );
+  } finally {
+    loading.value = false;
+  }
 };
 const drawerTitle = computed(() => {
   if (props.state === "personal" || props.state === "business") {

package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue.d.ts

@@ -8,11 +8,12 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    submit: (...args: any[]) => void;
-    "update:modelValue": (value: boolean) => void;
-    "update:data": (value: SuggestPlaceData) => void;
+    "update:modelValue": (value: boolean) => any;
+    "update:data": (value: SuggestPlaceData) => any;
+} & {
+    submit: (data: SuggestPlaceData) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onSubmit?: ((...args: any[]) => any) | undefined;
+    onSubmit?: ((data: SuggestPlaceData) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onUpdate:data"?: ((value: SuggestPlaceData) => any) | undefined;
 }>, {

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.d.vue.ts

@@ -19,6 +19,7 @@ export interface SuggestPlaceData {
     reviewPhotos?: any[];
     photos?: any[];
     videos?: any[];
+    contactChannels?: any[];
 }
 type __VLS_Props = {
     state?: "personal" | "business" | "backoffice";

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue

@@ -15,6 +15,9 @@
             show-counter
             :limit="180"
             free-text
+            :fetch-fn="fetchApprovedPlaces"
+            value-key="business_name"
+            label-key="business_name"
           />
           <InputTextField
             v-if="extraNameCount >= 1"
@@ -52,7 +55,7 @@
           placeholder="เพิ่มหมวดหมู่ที่เกี่ยวข้องกับสถานที่"
           :limit="3"
           show-counter
-          :items="[]"
+          :options="categoryOptions"
           required
           multiple
         />
@@ -64,9 +67,17 @@
           :limit="220"
           show-counter
         />
-        <InputDateOpening name="openingHours" v-model="modelValue.openingHours" />
+        <InputDateOpening
+          name="openingHours"
+          v-model="modelValue.openingHours"
+        />
         <div class="flex flex-col gap-[8px]">
-          <InputPhone name="phone" v-model="modelValue.phone" label="เบอร์โทรศัพท์" placeholder="กรอกเบอร์โทรศัพท์" />
+          <InputPhone
+            name="phone"
+            v-model="modelValue.phone"
+            label="เบอร์โทรศัพท์"
+            placeholder="กรอกเบอร์โทรศัพท์"
+          />
           <InputPhone
             v-for="(item, index) in modelValue.extraPhones"
             :key="index"
@@ -84,12 +95,26 @@
             <Icon name="lucide:plus" />
             เพิ่มเบอร์โทรศัพท์
           </Button>
+          <InputLink
+            name="contactChannels"
+            format="contact_channel"
+            default-first
+            v-model="modelValue.contactChannels"
+          />
         </div>
         <template v-if="props.state === 'personal'">
           <div class="flex flex-col gap-[16px]">
-            <InputCheckbox name="isReview" v-model="modelValue.isReview" label="คุณต้องการรีวิวสถานที่นี้" />
+            <InputCheckbox
+              name="isReview"
+              v-model="modelValue.isReview"
+              label="คุณต้องการรีวิวสถานที่นี้"
+            />
             <template v-if="modelValue.isReview">
-              <InputRating name="rating" v-model="modelValue.rating" class="flex py-4 justify-center" />
+              <InputRating
+                name="rating"
+                v-model="modelValue.rating"
+                class="flex py-4 justify-center"
+              />
               <InputTextarea
                 name="reviewDescription"
                 v-model="modelValue.reviewDescription"
@@ -104,7 +129,12 @@
                   </div>
                   <div class="font-body-small text-gray">สูงสุด 9 รายการ</div>
                 </div>
-                <InputFile name="reviewPhotos" v-model="modelValue.reviewPhotos" accept="image/*" :limit="9" />
+                <InputFile
+                  name="reviewPhotos"
+                  v-model="modelValue.reviewPhotos"
+                  accept="image/*"
+                  :limit="9"
+                />
                 <div class="font-body-small text-gray w-[250px]">
                   รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif
                   ขนาดไฟล์ไม่เกิน 30 mb
@@ -138,11 +168,13 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
+import { useApi } from "@/runtime/composables/useApi";
 import SuggestPlaceMap from "./suggest-place-map.vue";
 const props = defineProps({
   state: { type: String, required: false, default: "personal" }
 });
+const api = useApi();
 const modelValue = defineModel({ type: Object, ...{
   default: () => ({})
 } });
@@ -157,4 +189,48 @@ const isAddressCompleted = computed(() => {
   const v = modelValue.value.address || {};
   return !!(v.province_id && v.amphur_id && v.tambon_id && v.zipcode);
 });
+const listEndpointMap = {
+  personal: "/personal/suggest-places",
+  business: "/business/suggest-places",
+  backoffice: "/office/suggest-places"
+};
+const fetchApprovedPlaces = async (page, pageSize, search) => {
+  const base = listEndpointMap[props.state] ?? "/personal/suggest-places";
+  const res = await api(base, {
+    query: {
+      q: search ?? "",
+      status: "PENDING,APPROVED",
+      page,
+      page_size: pageSize
+    }
+  });
+  const data = (res.data ?? []).map((item) => ({
+    ...item,
+    description: item.address?.full_address ?? ""
+  }));
+  return {
+    data,
+    meta: { total_pages: res.meta?.total_pages ?? 1 }
+  };
+};
+const categoryOptions = ref([]);
+const categoryEndpointMap = {
+  personal: "/personal/suggest-places/categories",
+  business: "/business/suggest-places/categories",
+  backoffice: "/office/suggest-places/categories"
+};
+onMounted(async () => {
+  try {
+    const endpoint = categoryEndpointMap[props.state] ?? "/personal/suggest-places/categories";
+    const res = await api(
+      endpoint
+    );
+    categoryOptions.value = (res.data ?? []).map((c) => ({
+      label: c.category_name,
+      value: c.id
+    }));
+  } catch {
+    categoryOptions.value = [];
+  }
+});
 </script>

package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue.d.ts

@@ -19,6 +19,7 @@ export interface SuggestPlaceData {
     reviewPhotos?: any[];
     photos?: any[];
     videos?: any[];
+    contactChannels?: any[];
 }
 type __VLS_Props = {
     state?: "personal" | "business" | "backoffice";

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

@@ -1,6 +1,7 @@
 import type { InputLinkItem, ContactChannel, InputLinkProps } from "@/types/components/input/input-link";
 type __VLS_Props = InputLinkProps & {
     modelValue?: InputLinkItem[] | ContactChannel[];
+    defaultFirst?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: InputLinkItem[] | ContactChannel[]) => any;
@@ -10,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
     format: "legacy" | "contact_channel";
+    defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/input/input-link.vue

@@ -37,11 +37,12 @@
 </template>
 
 <script setup>
-import { computed, ref, nextTick, watch } from "vue";
+import { computed, ref, nextTick, watch, onMounted } from "vue";
 const props = defineProps({
   name: { type: String, required: false, default: "link" },
   format: { type: String, required: false, default: "legacy" },
-  modelValue: { type: Array, required: false, default: () => [] }
+  modelValue: { type: Array, required: false, default: () => [] },
+  defaultFirst: { type: Boolean, required: false, default: false }
 });
 const emit = defineEmits(["update:modelValue"]);
 const listSocial = [
@@ -208,6 +209,11 @@ const listOption = computed(() => {
   });
   return arr;
 });
+onMounted(() => {
+  if (props.defaultFirst && linkValue.value.length === 0) {
+    addLink();
+  }
+});
 const addLink = () => {
   const link = {
     name: "Email",

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

@@ -1,6 +1,7 @@
 import type { InputLinkItem, ContactChannel, InputLinkProps } from "@/types/components/input/input-link";
 type __VLS_Props = InputLinkProps & {
     modelValue?: InputLinkItem[] | ContactChannel[];
+    defaultFirst?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (value: InputLinkItem[] | ContactChannel[]) => any;
@@ -10,6 +11,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     name: string;
     modelValue: InputLinkItem[] | ContactChannel[];
     format: "legacy" | "contact_channel";
+    defaultFirst: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/usePresignedUpload.d.ts

@@ -0,0 +1,9 @@
+export interface FileItem {
+    file?: File;
+    url: string;
+    description?: string;
+    duration?: string;
+}
+export declare const usePresignedUpload: () => {
+    uploadFiles: (files: FileItem[], state: string) => Promise<string[]>;
+};

package/dist/runtime/composables/usePresignedUpload.js

@@ -0,0 +1,45 @@
+import { $fetch } from "ofetch";
+import { useApi } from "./useApi.js";
+export const usePresignedUpload = () => {
+  const api = useApi();
+  const uploadFiles = async (files, state) => {
+    if (!files || files.length === 0) return [];
+    const newFiles = files.filter((item) => !!item.file);
+    const existingUrls = files.filter((item) => !item.file && item.url && !item.url.startsWith("blob:")).map((item) => item.url);
+    if (newFiles.length === 0) return existingUrls;
+    const res = await api("/storage/presigned-urls", {
+      method: "POST",
+      body: {
+        state,
+        file_name: newFiles.map((item) => item.file.name)
+      }
+    });
+    let presignedItems;
+    const d = res.data;
+    if (d.items) {
+      presignedItems = d.items;
+    } else {
+      presignedItems = [
+        {
+          original_name: d.original_name,
+          upload_url: d.upload_url,
+          public_url: d.public_url,
+          filename: d.filename
+        }
+      ];
+    }
+    await Promise.all(
+      newFiles.map(
+        (item, index) => $fetch(presignedItems[index].upload_url, {
+          method: "PUT",
+          body: item.file,
+          headers: {
+            "Content-Type": item.file.type
+          }
+        })
+      )
+    );
+    return [...existingUrls, ...presignedItems.map((item) => item.public_url)];
+  };
+  return { uploadFiles };
+};

package/package.json

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