pukaad-ui-lib 1.234.0 → 1.235.0

package/dist/module.json

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

package/dist/runtime/components/card/card-user-blog.d.vue.ts

@@ -24,9 +24,9 @@ type __VLS_Props = {
     isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-edit": (item: CardUserBlogProps) => any;
+    "blog-updated": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
+    "onBlog-updated"?: (() => any) | undefined;
 }>, {
     isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/card/card-user-blog.vue

@@ -74,20 +74,34 @@
       state="blog"
     />
   </div>
+
+  <!-- Edit Blog Drawer -->
+  <DrawerPostBlog
+    v-if="editBlogItem"
+    v-model="isEditDrawerOpen"
+    :item="editBlogItem"
+    @success="onEditSuccess"
+  />
 </template>
 
 <script setup>
 import { useRouter } from "vue-router";
 import { ref, watch } from "vue";
+import { useNuxtApp } from "nuxt/app";
 import { useConvert } from "@/runtime/composables/useConvert";
+import { useApi } from "../../composables/useApi";
 const { convertNumber, convertDateTorelativeText } = useConvert();
+const { $toast } = useNuxtApp();
+const api = useApi();
 const props = defineProps({
   item: { type: Object, required: true },
   isMyProfile: { type: Boolean, required: false, default: false }
 });
 const router = useRouter();
-const emit = defineEmits(["blog-edit"]);
+const emit = defineEmits(["blog-updated"]);
 const isPinned = ref(props.item.ispinned);
+const isEditDrawerOpen = ref(false);
+const editBlogItem = ref(null);
 watch(
   () => props.item.ispinned,
   (val) => {
@@ -97,16 +111,46 @@ watch(
 const onProfileClick = () => {
   router.push(`/@${props.item.user.path_name}`);
 };
-const onBlogPin = () => {
-  isPinned.value = true;
+const onBlogPin = async () => {
+  try {
+    await api(`/blogs/${props.item.id}/pin`, { method: "POST" });
+    isPinned.value = true;
+    $toast.success("\u0E1B\u0E31\u0E01\u0E2B\u0E21\u0E38\u0E14\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+  } catch (e) {
+    $toast.error(e?.data?.message?.description || "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E1B\u0E31\u0E01\u0E2B\u0E21\u0E38\u0E14\u0E44\u0E14\u0E49");
+  }
 };
-const onBlogUnpin = () => {
-  isPinned.value = false;
+const onBlogUnpin = async () => {
+  try {
+    await api(`/blogs/${props.item.id}/pin`, { method: "DELETE" });
+    isPinned.value = false;
+    $toast.success("\u0E40\u0E2D\u0E32\u0E2B\u0E21\u0E38\u0E14\u0E2D\u0E2D\u0E01\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+  } catch (e) {
+    $toast.error(e?.data?.message?.description || "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E40\u0E2D\u0E32\u0E2B\u0E21\u0E38\u0E14\u0E2D\u0E2D\u0E01\u0E44\u0E14\u0E49");
+  }
 };
 const onBlogClick = () => {
   router.push(`/blog/${props.item.id}`);
 };
-const onBlogEdit = () => {
-  emit("blog-edit", props.item);
+const onBlogEdit = async () => {
+  try {
+    const res = await api(`/blogs/${props.item.id}`, { method: "GET" });
+    const blog = res.data;
+    const content = blog.content?.ops ?? (Array.isArray(blog.content) ? blog.content : []);
+    editBlogItem.value = {
+      id: blog.id,
+      title: blog.title,
+      content,
+      tags: blog.tags ?? [],
+      disableComment: false,
+      coverImage: blog.cover_image_url ? [{ url: blog.cover_image_url }] : []
+    };
+    isEditDrawerOpen.value = true;
+  } catch (e) {
+    $toast.error(e?.data?.message?.description || "\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E42\u0E2B\u0E25\u0E14\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E44\u0E14\u0E49");
+  }
+};
+const onEditSuccess = () => {
+  emit("blog-updated");
 };
 </script>

package/dist/runtime/components/card/card-user-blog.vue.d.ts

@@ -24,9 +24,9 @@ type __VLS_Props = {
     isMyProfile?: boolean;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-edit": (item: CardUserBlogProps) => any;
+    "blog-updated": () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    "onBlog-edit"?: ((item: CardUserBlogProps) => any) | undefined;
+    "onBlog-updated"?: (() => any) | undefined;
 }>, {
     isMyProfile: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,13 +1,37 @@
 <template>
-  <Drawer class="w-[748px]" :title="drawerTitle" @close="onClose" disabled-auto-close @submit="onSubmit"
-    v-model="isOpen">
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
     <div class="flex flex-col gap-[16px]">
-      <InputTextField name="title" label="หัวข้อ" placeholder="ตั้งชื่อบทความให้น่าสนใจ" showCounter :limit="180"
-        v-model="form.title" disabled-border required />
+      <InputTextField
+        name="title"
+        label="หัวข้อ"
+        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+        showCounter
+        :limit="180"
+        v-model="form.title"
+        disabled-border
+        required
+      />
 
-      <InputContent placeholder="อยากเล่าอะไร" :height="288" v-model="form.content" />
+      <InputContent
+        placeholder="อยากเล่าอะไร"
+        :height="288"
+        v-model="form.content"
+      />
 
-      <InputTag v-model="form.tags" name="tags" label="แท็ก" placeholder="เพิ่มแท็ก" :limit="5" />
+      <InputTag
+        v-model="form.tags"
+        name="tags"
+        label="แท็ก"
+        placeholder="เพิ่มแท็ก"
+        :limit="5"
+      />
 
       <!-- <InputCheckbox
         name="disableComment"
@@ -17,8 +41,12 @@
 
       <div class="flex flex-col gap-[8px]">
         <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile :limit="1" name="coverImage" accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.coverImage" />
+        <InputFile
+          :limit="1"
+          name="coverImage"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage"
+        />
         <div class="flex flex-col text-gray font-body-small">
           <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
           <div>ขนาดไม่เกิน 30 mb</div>
@@ -30,7 +58,11 @@
       <div class="flex justify-end gap-[16px] items-center">
         <Button variant="outline" @click="onClose">ยกเลิก</Button>
         <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
-        <Button type="submit" color="primary" :disabled="!meta.valid || isLoading">
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="!meta.valid || isLoading"
+        >
           <span v-if="isLoading">กำลังบันทึก...</span>
           <span v-else>เผยแพร่</span>
         </Button>
@@ -99,10 +131,6 @@ const uploadImage = async (file) => {
       method: "POST",
       headers: {
         "Content-Type": "application/json"
-        // Note: We might need Auth token here if the endpoint requires it,
-        // but user instruction said "ห้าม ส่ง Authorization Header ไปยัง S3"
-        // It didn't say forbid Auth to /storage/presigned-urls.
-        // Let's try adding token manually if useApi was doing it.
       },
       body: JSON.stringify({
         file_name: [file.name],
@@ -119,8 +147,8 @@ const uploadImage = async (file) => {
         }
       }
     });
-    if (res.code !== 200 || !res.data?.items?.[0]) {
-      throw new Error(res.message || "Failed to generate upload URL");
+    if (!res.data?.items?.[0]) {
+      throw new Error("\u0E44\u0E21\u0E48\u0E2A\u0E32\u0E21\u0E32\u0E23\u0E16\u0E2A\u0E23\u0E49\u0E32\u0E07 upload URL \u0E44\u0E14\u0E49");
     }
     const item = res.data.items[0];
     console.log("Uploading to S3:", item.upload_url);
@@ -155,24 +183,19 @@ const onSubmit = async () => {
       tags: form.value.tags.map((t) => t.name || t),
       cover_image_url: coverImageUrl
     };
-    const res = await api(
-      isEditMode.value ? `/blogs/${form.value.id}` : "/profiles/me/blog",
-      {
-        method: isEditMode.value ? "PUT" : "POST",
-        body: payload
-      }
+    const res = await api(isEditMode.value ? `/blogs/${form.value.id}` : "/profiles/me/blog", {
+      method: isEditMode.value ? "PUT" : "POST",
+      body: payload
+    });
+    $toast.success(
+      isEditMode.value ? "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" : "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"
     );
-    const isSuccess = isEditMode.value ? res.code === "SUCCESS_OK" : res.code === "SUCCESS_CREATED";
-    if (isSuccess) {
-      $toast.success(isEditMode.value ? "\u0E2D\u0E31\u0E1B\u0E40\u0E14\u0E15\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" : "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
-      emit("submit", form.value);
-      emit("success", res.data);
-      isOpen.value = false;
-    } else {
-      throw new Error(res.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14");
-    }
+    emit("submit", form.value);
+    emit("success", res.data);
+    isOpen.value = false;
   } catch (error) {
-    $toast.error(error.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21");
+    const msg = error?.data?.message?.description || error?.message || "\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14\u0E43\u0E19\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21";
+    $toast.error(msg);
     console.error("Submit error:", error);
   } finally {
     isLoading.value = false;

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

@@ -207,11 +207,11 @@ const fetchTags = async (type) => {
     const res = await api(
       `/tags/${type}?page=${state.page}&page_size=${PAGE_SIZE}`
     );
-    if ((res.code === 200 || res.code === "SUCCESS_OK") && res.data) {
+    if (res.data && Array.isArray(res.data)) {
       const newTags = res.data.map(mapTag);
       state.data = [...state.data, ...newTags];
       state.page++;
-      state.hasMore = state.page <= res.meta.total_page;
+      state.hasMore = state.page <= (res.meta?.total_page ?? 1);
     } else {
       state.hasMore = false;
     }

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.d.vue.ts

@@ -1,9 +1,9 @@
 import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-edit": () => any;
     "report-announce": () => any;
     "blog-unpin": () => any;
     "blog-pin": () => any;
+    "blog-edit": () => any;
     "profile-name-updated": (name: string) => any;
     "profile-edit": () => any;
     "profile-share": () => any;
@@ -19,10 +19,10 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-delete": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
-    "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
     "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;

package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue.d.ts

@@ -1,9 +1,9 @@
 import type { PickerOptionMenuUserProps } from "@/types/components/picker/picker-option-menu/picker-option-menu-user";
 declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    "blog-edit": () => any;
     "report-announce": () => any;
     "blog-unpin": () => any;
     "blog-pin": () => any;
+    "blog-edit": () => any;
     "profile-name-updated": (name: string) => any;
     "profile-edit": () => any;
     "profile-share": () => any;
@@ -19,10 +19,10 @@ declare const __VLS_export: import("vue").DefineComponent<PickerOptionMenuUserPr
     "review-delete": () => any;
     archive: () => any;
 }, string, import("vue").PublicProps, Readonly<PickerOptionMenuUserProps> & Readonly<{
-    "onBlog-edit"?: (() => any) | undefined;
     "onReport-announce"?: (() => any) | undefined;
     "onBlog-unpin"?: (() => any) | undefined;
     "onBlog-pin"?: (() => any) | undefined;
+    "onBlog-edit"?: (() => any) | undefined;
     "onProfile-name-updated"?: ((name: string) => any) | undefined;
     "onProfile-edit"?: (() => any) | undefined;
     "onProfile-share"?: (() => any) | undefined;

package/package.json

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