pukaad-ui-lib 1.136.0 → 1.138.0

package/dist/module.json

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

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

@@ -1,9 +1,12 @@
 export interface DrawerPostBlogItem {
     title: string;
     content: object[];
-    tags: string[];
+    tags: any[];
     disableComment: boolean;
-    coverImage: File[];
+    coverImage: {
+        file?: File;
+        url: string;
+    }[];
 }
 export interface DrawerPostBlogProps {
     item?: DrawerPostBlogItem;

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

@@ -58,8 +58,13 @@
       <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">
-          เผยแพร่
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="!meta.valid || isLoading"
+        >
+          <span v-if="isLoading">กำลังบันทึก...</span>
+          <span v-else>เผยแพร่</span>
         </Button>
       </div>
     </template>
@@ -68,8 +73,10 @@
 
 <script setup>
 import { ref, watch, computed } from "vue";
-import { useNuxtApp } from "nuxt/app";
-const { $alert } = useNuxtApp();
+import { useNuxtApp, useRuntimeConfig, useCookie } from "nuxt/app";
+import { useApi } from "../../composables/useApi";
+const { $alert, $toast } = useNuxtApp();
+const api = useApi();
 const emit = defineEmits(["submit", "saveDraft"]);
 const props = defineProps({
   item: { type: Object, required: false, default: () => ({
@@ -81,6 +88,7 @@ const props = defineProps({
   }) }
 });
 const form = ref(JSON.parse(JSON.stringify(props.item)));
+const isLoading = ref(false);
 const isOpen = defineModel({ type: Boolean, ...{
   default: false
 } });
@@ -115,9 +123,89 @@ const onSaveDraft = () => {
   emit("saveDraft", form.value);
   console.log("onSaveDraft", form.value);
 };
-const onSubmit = () => {
-  emit("submit", form.value);
-  console.log("onSubmit", form.value);
-  isOpen.value = false;
+const uploadImage = async (file) => {
+  try {
+    const config = useRuntimeConfig();
+    const baseURL = config.public.BASE_URL_API;
+    const res = await $fetch(`${baseURL}/storage/presigned-urls`, {
+      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],
+        state: "blog"
+      }),
+      onRequest({ options }) {
+        const { APP_TYPE } = config.public;
+        const secId = useCookie(
+          APP_TYPE === "OFFICE" ? "OFFICE_SEC_ID" : "SEC_ID"
+        );
+        if (secId.value) {
+          options.headers = new Headers(options.headers);
+          options.headers.set("Authorization", `Bearer ${secId.value}`);
+        }
+      }
+    });
+    if (res.code !== 200 || !res.data?.items?.[0]) {
+      throw new Error(res.message || "Failed to generate upload URL");
+    }
+    const item = res.data.items[0];
+    console.log("Uploading to S3:", item.upload_url);
+    await fetch(item.upload_url, {
+      method: "PUT",
+      body: file,
+      headers: {
+        "Content-Type": file.type
+      }
+    });
+    return item.public_url;
+  } catch (error) {
+    console.error("Upload failed:", error);
+    throw error;
+  }
+};
+const onSubmit = async () => {
+  isLoading.value = true;
+  try {
+    let coverImageUrl = "";
+    if (form.value.coverImage && form.value.coverImage.length > 0) {
+      const fileItem = form.value.coverImage[0];
+      if (fileItem && fileItem.file) {
+        console.log("File found:", fileItem.file);
+        console.log("File name:", fileItem.file.name);
+        coverImageUrl = await uploadImage(fileItem.file);
+      }
+    } else {
+      console.log("No cover image selected");
+    }
+    const payload = {
+      title: form.value.title,
+      content: JSON.stringify(form.value.content),
+      tags: form.value.tags.map((t) => t.name || t),
+      cover_image_url: coverImageUrl
+    };
+    console.log("Submitting blog payload:", payload);
+    const res = await api("/blogs", {
+      method: "POST",
+      body: payload
+    });
+    if (res.code === "SUCCESS_CREATED") {
+      $toast.success("\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08");
+      emit("submit", form.value);
+      isOpen.value = false;
+    } else {
+      throw new Error(res.message || "Failed to create blog");
+    }
+  } 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\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E1A\u0E17\u0E04\u0E27\u0E32\u0E21");
+    console.error("Submit error:", error);
+  } finally {
+    isLoading.value = false;
+  }
 };
 </script>

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

@@ -1,9 +1,12 @@
 export interface DrawerPostBlogItem {
     title: string;
     content: object[];
-    tags: string[];
+    tags: any[];
     disableComment: boolean;
-    coverImage: File[];
+    coverImage: {
+        file?: File;
+        url: string;
+    }[];
 }
 export interface DrawerPostBlogProps {
     item?: DrawerPostBlogItem;

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -36,9 +36,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     id: string;
     name: string;
     description: string;
+    limit: number;
     options: AutocompleteOption[] | string[] | number[];
     placeholder: string;
-    limit: number;
     disabledErrorMessage: boolean;
     disabledBorder: boolean;
     showCounter: boolean;

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -20,12 +20,12 @@
             <!-- Selected Tags as Chips -->
             <Chip
               v-for="tag in selectedTags"
-              :key="tag.value"
+              :key="tag.id"
               closable
-              @closable="onRemoveTag(tag.value)"
+              @closable="onRemoveTag(tag.id)"
               class="bg-bright"
             >
-              {{ tag.label }}
+              {{ tag.name }}
             </Chip>
             <!-- Input for search -->
             <InputTextField
@@ -61,7 +61,7 @@
 
           <!-- Popular Tab -->
           <ShadTabsContent value="popular" class="m-0">
-            <ShadCommandList class="max-h-64">
+            <ShadCommandList class="max-h-64 overflow-y-auto">
               <ShadCommandGroup>
                 <ShadCommandItem
                   v-for="tag in filteredPopularTags"
@@ -76,7 +76,13 @@
                   </div>
                 </ShadCommandItem>
               </ShadCommandGroup>
-              <ShadCommandEmpty :force-show="filteredPopularTags.length === 0">
+
+              <!-- Initital Loading / Empty State -->
+              <ShadCommandEmpty
+                :force-show="
+  filteredPopularTags.length === 0 && !popularState.loading
+"
+              >
                 <div
                   class="flex flex-col items-center justify-center h-full gap-2"
                 >
@@ -84,12 +90,23 @@
                   <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
                 </div>
               </ShadCommandEmpty>
+
+              <!-- Loading Indicator -->
+              <div v-if="popularState.loading" class="flex justify-center p-2">
+                <Icon
+                  name="lucide:loader-2"
+                  class="animate-spin h-5 w-5 text-primary"
+                />
+              </div>
+
+              <!-- Sentinel for Infinite Scroll -->
+              <div ref="popularSentinel" class="h-1" />
             </ShadCommandList>
           </ShadTabsContent>
 
           <!-- Latest Tab -->
           <ShadTabsContent value="latest" class="m-0">
-            <ShadCommandList class="max-h-64">
+            <ShadCommandList class="max-h-64 overflow-y-auto">
               <ShadCommandGroup>
                 <ShadCommandItem
                   v-for="tag in filteredLatestTags"
@@ -104,7 +121,13 @@
                   </div>
                 </ShadCommandItem>
               </ShadCommandGroup>
-              <ShadCommandEmpty :force-show="filteredLatestTags.length === 0">
+
+              <!-- Initital Loading / Empty State -->
+              <ShadCommandEmpty
+                :force-show="
+  filteredLatestTags.length === 0 && !latestState.loading
+"
+              >
                 <div
                   class="flex flex-col items-center justify-center h-full gap-2"
                 >
@@ -112,6 +135,17 @@
                   <div class="text-gray font-body-medium">ไม่พบข้อมูล</div>
                 </div>
               </ShadCommandEmpty>
+
+              <!-- Loading Indicator -->
+              <div v-if="latestState.loading" class="flex justify-center p-2">
+                <Icon
+                  name="lucide:loader-2"
+                  class="animate-spin h-5 w-5 text-primary"
+                />
+              </div>
+
+              <!-- Sentinel for Infinite Scroll -->
+              <div ref="latestSentinel" class="h-1" />
             </ShadCommandList>
           </ShadTabsContent>
         </ShadTabs>
@@ -121,9 +155,10 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
+import { ref, computed, onMounted, reactive, watch } from "vue";
 import { useNuxtApp } from "nuxt/app";
 import { useApi } from "../../composables/useApi";
+import { useIntersectionObserver } from "@vueuse/core";
 const { $convert } = useNuxtApp();
 const convertNumber = (val) => $convert?.convertNumber(val) || val;
 const api = useApi();
@@ -146,34 +181,78 @@ const popoverOpen = ref(false);
 const currentTab = ref("popular");
 const searchQuery = ref("");
 const inputRef = ref();
-const isLoading = ref(false);
-const allTags = ref([]);
-const popularTags = ref([]);
-const latestTags = ref([]);
+const popularState = reactive({
+  data: [],
+  page: 1,
+  hasMore: true,
+  loading: false
+});
+const latestState = reactive({
+  data: [],
+  page: 1,
+  hasMore: true,
+  loading: false
+});
 const mapTag = (tag) => ({
   label: tag.name,
   value: tag.id,
   postCount: tag.usage_count
 });
-const fetchTags = async () => {
-  isLoading.value = true;
+const PAGE_SIZE = 20;
+const fetchTags = async (type) => {
+  const state = type === "popular" ? popularState : latestState;
+  if (state.loading || !state.hasMore) return;
+  state.loading = true;
   try {
-    const res = await api("/tags");
-    if (res.code === "SUCCESS_OK" && res.data) {
-      popularTags.value = res.data.popular.map(mapTag);
-      latestTags.value = res.data.last.map(mapTag);
-      allTags.value = [...popularTags.value, ...latestTags.value];
+    const res = await api(
+      `/tags/${type}?page=${state.page}&page_size=${PAGE_SIZE}`
+    );
+    if ((res.code === 200 || res.code === "SUCCESS_OK") && res.data) {
+      const newTags = res.data.map(mapTag);
+      state.data = [...state.data, ...newTags];
+      state.page++;
+      state.hasMore = state.page <= res.meta.total_page;
+    } else {
+      state.hasMore = false;
     }
   } catch (e) {
-    console.error("Failed to fetch tags:", e);
+    console.error(`Failed to fetch ${type} tags:`, e);
+    state.hasMore = false;
   } finally {
-    isLoading.value = false;
+    state.loading = false;
   }
 };
-onMounted(fetchTags);
-const selectedTags = computed(() => {
-  return modelValue.value.map((selected) => allTags.value.find((tag) => tag.value === selected.id)).filter((tag) => tag !== void 0);
+watch(popoverOpen, (isOpen) => {
+  if (isOpen) {
+    if (currentTab.value === "popular" && popularState.data.length === 0) {
+      fetchTags("popular");
+    } else if (currentTab.value === "latest" && latestState.data.length === 0) {
+      fetchTags("latest");
+    }
+  }
+});
+const popularSentinel = ref(null);
+const latestSentinel = ref(null);
+useIntersectionObserver(popularSentinel, (entries) => {
+  const entry = entries[0];
+  if (entry?.isIntersecting && currentTab.value === "popular" && popoverOpen.value) {
+    fetchTags("popular");
+  }
+});
+useIntersectionObserver(latestSentinel, (entries) => {
+  const entry = entries[0];
+  if (entry?.isIntersecting && currentTab.value === "latest" && popoverOpen.value) {
+    fetchTags("latest");
+  }
+});
+watch(currentTab, (newTab) => {
+  if (newTab === "popular" && popularState.data.length === 0) {
+    fetchTags("popular");
+  } else if (newTab === "latest" && latestState.data.length === 0) {
+    fetchTags("latest");
+  }
 });
+const selectedTags = computed(() => modelValue.value);
 const isLimitReached = computed(() => {
   if (props.limit <= 0) return false;
   return modelValue.value.length >= props.limit;
@@ -196,8 +275,8 @@ const handleInteractOutside = (event) => {
     event.preventDefault();
   }
 };
-const filteredPopularTags = computed(() => {
-  const availableTags = popularTags.value.filter(
+const filterTags = (tags) => {
+  const availableTags = tags.filter(
     (tag) => !isSelected(tag.value) && !props.ignore.includes(tag.value) && !props.ignore.includes(tag.label)
   );
   if (!searchQuery.value) return availableTags;
@@ -205,17 +284,9 @@ const filteredPopularTags = computed(() => {
   return availableTags.filter(
     (tag) => tag.label.toLowerCase().includes(query) || tag.value.toLowerCase().includes(query)
   );
-});
-const filteredLatestTags = computed(() => {
-  const availableTags = latestTags.value.filter(
-    (tag) => !isSelected(tag.value) && !props.ignore.includes(tag.value) && !props.ignore.includes(tag.label)
-  );
-  if (!searchQuery.value) return availableTags;
-  const query = searchQuery.value.toLowerCase();
-  return availableTags.filter(
-    (tag) => tag.label.toLowerCase().includes(query) || tag.value.toLowerCase().includes(query)
-  );
-});
+};
+const filteredPopularTags = computed(() => filterTags(popularState.data));
+const filteredLatestTags = computed(() => filterTags(latestState.data));
 const onSelectTag = (tag) => {
   if (isSelected(tag.value)) {
     modelValue.value = modelValue.value.filter((t) => t.id !== tag.value);
@@ -247,7 +318,7 @@ const onAddCustomTag = () => {
     return;
   }
   const newValue = trimmedQuery.toLowerCase().replace(/\s+/g, "-");
-  const existingTag = allTags.value.find(
+  const existingTag = [...popularState.data, ...latestState.data].find(
     (tag) => tag.value === newValue || tag.label === trimmedQuery
   );
   if (existingTag) {
@@ -262,12 +333,6 @@ const onAddCustomTag = () => {
       ];
     }
   } else {
-    const newTag = {
-      label: trimmedQuery,
-      value: newValue,
-      postCount: 0
-    };
-    allTags.value = [...allTags.value, newTag];
     modelValue.value = [
       ...modelValue.value,
       { id: newValue, name: trimmedQuery, usage_count: 0 }

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

@@ -26,8 +26,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
 }>, {
     name: string;
     state: "user" | "admin";
-    placeholder: string;
     limit: number;
+    placeholder: string;
     ignore: string[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/package.json

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