From 89242ec7382ea02a0cd2ac07de177be561a92357 Mon Sep 17 00:00:00 2001 From: Flook Date: Wed, 9 Jul 2025 02:58:14 +0700 Subject: [PATCH] Initial commit of Vue Website Template --- src/components/TabNews.vue | 45 ++-- src/router/index.js | 14 +- src/stores/app.js | 417 ++++++++++++++++++++++----------- src/views/NewsCategoryView.vue | 113 +++++++-- src/views/TabContentView.vue | 168 +++++++++++++ 5 files changed, 581 insertions(+), 176 deletions(-) create mode 100644 src/views/TabContentView.vue diff --git a/src/components/TabNews.vue b/src/components/TabNews.vue index 0bee8d9..4849ed2 100644 --- a/src/components/TabNews.vue +++ b/src/components/TabNews.vue @@ -1,7 +1,6 @@ // src/components/TabNews.vue @@ -57,15 +76,18 @@ import { RouterLink } from 'vue-router'; const appStore = useAppStore(); const route = useRoute(); const newsList = ref([]); +const totalNews = ref(0); +const currentPage = ref(1); +const newsPerPage = 6; +const isLoading = ref(false); // Computed property เพื่อแสดงชื่อหมวดหมู่ตามภาษา const categoryTitleTh = computed(() => { - // เพิ่มการตรวจสอบว่า appStore.tabs มีอยู่จริงหรือไม่ และเป็น Array หรือไม่ if (appStore.tabs && Array.isArray(appStore.tabs) && appStore.tabs.length > 0) { const tab = appStore.tabs.find(t => t.category === route.params.category); return tab ? tab.title : 'ไม่ระบุหมวดหมู่'; } - return 'กำลังโหลด...'; + return appStore.checkLang.isTh ? 'กำลังโหลด...' : 'Loading...'; }); const categoryTitleEn = computed(() => { @@ -73,13 +95,18 @@ const categoryTitleEn = computed(() => { const tab = appStore.tabs.find(t => t.category === route.params.category); return tab ? tab.title_en : 'Unspecified Category'; } - return 'Loading...'; + return appStore.checkLang.isTh ? 'Loading...' : 'Loading...'; }); -const truncateDetail = (text, maxLength) => { - if (!text) return ''; - if (text.length <= maxLength) return text; - return text.substring(0, maxLength) + '...'; +// ** ฟังก์ชันสำหรับลบ HTML tags ออกจาก String ก่อนทำการ truncate ** +const stripHtmlAndTruncate = (htmlText, maxLength) => { + if (!htmlText) return ''; + // 1. สร้าง DOMParser เพื่อ parse HTML string + const doc = new DOMParser().parseFromString(htmlText, 'text/html'); + // 2. ดึง textContent ออกมา ซึ่งจะลบ HTML tags ทั้งหมด + const plainText = doc.body.textContent || ""; + // 3. ทำการ truncate text + return plainText.length <= maxLength ? plainText : plainText.substring(0, maxLength) + '...'; }; const formatDate = (dateString) => { @@ -96,38 +123,74 @@ const formatDate = (dateString) => { return dateString; }; -const fetchNewsForCategory = async (category) => { +const fetchNewsForCategory = async (category, pageToLoad = 1) => { + isLoading.value = true; try { - // เพราะ appStore.find ควรจะมีการกรอง active, active_en, release_date และ feature ให้เรียบร้อยแล้ว - const allNews = await appStore.find('tabNews', ''); // ดึงข่าวทั้งหมดก่อน เพื่อให้ filter ได้ถูกต้อง - - const filteredNews = allNews.filter(item => { - return item.type === category; + const result = await appStore.fetchNewsFromMockData({ + category: category, + limit: newsPerPage, + page: pageToLoad, + // ใส่ภาษาเข้าไปใน parameter ถ้า fetchNewsFromMockData รองรับ + // lang: appStore.isTh ? 'th' : 'en' }); - newsList.value = filteredNews; + if (pageToLoad === 1) { + newsList.value = result.data; + } else { + newsList.value = [...newsList.value, ...result.data]; + } + totalNews.value = result.total; + currentPage.value = pageToLoad; } catch (error) { console.error(`Error fetching news for category ${category}:`, error); newsList.value = []; + totalNews.value = 0; + } finally { + isLoading.value = false; } }; +const loadMoreNews = () => { + if (newsList.value.length < totalNews.value && !isLoading.value) { + fetchNewsForCategory(route.params.category, currentPage.value + 1); + } +}; onMounted(() => { - fetchNewsForCategory(route.params.category); + fetchNewsForCategory(route.params.category, 1); }); +// Watch route params changes to refetch news for new category watch(() => route.params.category, (newCategory) => { - fetchNewsForCategory(newCategory); + newsList.value = []; // Clear current news + currentPage.value = 1; // Reset to first page + totalNews.value = 0; // Reset total + fetchNewsForCategory(newCategory, 1); }); -// Watch for language changes and re-fetch the news list -watch(() => appStore.checkLang.isTh, () => { // **แก้ไขตรงนี้** - fetchNewsForCategory(route.params.category); +// Watch language changes to refetch news list +watch(() => appStore.isTh, () => { + newsList.value = []; // Clear current news + currentPage.value = 1; // Reset to first page + totalNews.value = 0; // Reset total + fetchNewsForCategory(route.params.category, 1); }); \ No newline at end of file diff --git a/src/views/TabContentView.vue b/src/views/TabContentView.vue new file mode 100644 index 0000000..0a65cb2 --- /dev/null +++ b/src/views/TabContentView.vue @@ -0,0 +1,168 @@ +// src/views/TabContentView.vue + + + + + \ No newline at end of file