@mundogamernetwork/shared-ui 1.0.0

package/pages/blog.vue

@@ -0,0 +1,430 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { blog, popularBlog, blogCategory, blogTag } = storeToRefs(institutionalStore);
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const currentPage = ref(1);
+const perPage = 8;
+const selectedPeriod = ref("");
+const selectedCategories = ref<number[]>([]);
+const selectedTags = ref<number[]>([]);
+
+const periodOptions = ["hour", "day", "week", "month", "year"];
+
+async function fetchBlogData() {
+	try {
+		const params: any = {
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "created_at",
+			order: "desc",
+			per_page: perPage,
+			page: currentPage.value,
+		};
+
+		if (selectedPeriod.value) params.filter.period = selectedPeriod.value;
+		if (selectedCategories.value.length > 0) params.filter.category_id = selectedCategories.value;
+		if (selectedTags.value.length > 0) params.filter.tag_id = selectedTags.value;
+
+		await institutionalStore.fetchBlog(params);
+	} catch {
+		// silent
+	}
+}
+
+async function fetchPopular() {
+	try {
+		await institutionalStore.fetchPopularBlog({
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "views",
+			order: "desc",
+			per_page: 5,
+			page: 1,
+		});
+	} catch {
+		// silent
+	}
+}
+
+async function fetchFilters() {
+	try {
+		await Promise.all([
+			institutionalStore.fetchBlogCategory({ per_page: "all" }),
+			institutionalStore.fetchBlogTag({ per_page: "all" }),
+		]);
+	} catch {
+		// silent
+	}
+}
+
+function toggleCategory(id: number) {
+	const idx = selectedCategories.value.indexOf(id);
+	if (idx > -1) selectedCategories.value.splice(idx, 1);
+	else selectedCategories.value.push(id);
+	currentPage.value = 1;
+	fetchBlogData();
+}
+
+function toggleTag(id: number) {
+	const idx = selectedTags.value.indexOf(id);
+	if (idx > -1) selectedTags.value.splice(idx, 1);
+	else selectedTags.value.push(id);
+	currentPage.value = 1;
+	fetchBlogData();
+}
+
+function changePeriod() {
+	currentPage.value = 1;
+	fetchBlogData();
+}
+
+function changePage(page: number) {
+	currentPage.value = page;
+	fetchBlogData();
+}
+
+onMounted(() => {
+	fetchBlogData();
+	fetchPopular();
+	fetchFilters();
+});
+</script>
+
+<template>
+	<div id="blog" class="container blog">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.blog.title") }}</h1>
+					<p>{{ $t("more.blog.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-12 col-md-8">
+						<div v-if="blog.status === 'pending' && (!blog.data || blog.data.length === 0)" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="blog.data && blog.data.length > 0">
+							<div class="blog-grid">
+								<div
+									v-for="post in blog.data"
+									:key="post.id"
+									class="blog-card"
+								>
+									<img
+										v-if="post.cover_image_url"
+										:src="post.cover_image_url"
+										:alt="post.localized_title"
+										class="blog-card__image"
+									/>
+									<div class="blog-card__content">
+										<h3>{{ post.localized_title }}</h3>
+										<p>{{ post.localized_short_description }}</p>
+										<div class="blog-card__meta">
+											<span v-if="post.author">{{ post.author.name }}</span>
+											<span>{{ post.created_at }}</span>
+											<span v-if="post.comments_count">{{ post.comments_count }} {{ $t("more.blog.comments") }}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+
+							<div v-if="blog.data.meta" class="pagination-controls">
+								<button
+									:disabled="currentPage <= 1"
+									@click="changePage(currentPage - 1)"
+								>
+									{{ $t("components.previous") }}
+								</button>
+								<span>{{ currentPage }} / {{ blog.data.meta.last_page || 1 }}</span>
+								<button
+									:disabled="currentPage >= (blog.data.meta.last_page || 1)"
+									@click="changePage(currentPage + 1)"
+								>
+									{{ $t("components.next") }}
+								</button>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.blog.no_data") }}
+						</div>
+					</div>
+
+					<div class="col-12 col-md-4">
+						<div class="sidebar">
+							<div class="sidebar__section">
+								<h4>{{ $t("more.blog.filter_period") }}</h4>
+								<select v-model="selectedPeriod" @change="changePeriod">
+									<option value="">{{ $t("more.blog.all_time") }}</option>
+									<option
+										v-for="p in periodOptions"
+										:key="p"
+										:value="p"
+									>
+										{{ $t(`more.blog.period_${p}`) }}
+									</option>
+								</select>
+							</div>
+
+							<div class="sidebar__section" v-if="blogCategory?.data?.data?.length">
+								<h4>{{ $t("more.blog.categories") }}</h4>
+								<div class="tag-list">
+									<button
+										v-for="cat in blogCategory.data.data"
+										:key="cat.id"
+										class="tag-btn"
+										:class="{ active: selectedCategories.includes(cat.id) }"
+										@click="toggleCategory(cat.id)"
+									>
+										{{ cat.localized_name || cat.name }}
+									</button>
+								</div>
+							</div>
+
+							<div class="sidebar__section" v-if="blogTag?.data?.data?.length">
+								<h4>{{ $t("more.blog.tags") }}</h4>
+								<div class="tag-list">
+									<button
+										v-for="tag in blogTag.data.data"
+										:key="tag.id"
+										class="tag-btn"
+										:class="{ active: selectedTags.includes(tag.id) }"
+										@click="toggleTag(tag.id)"
+									>
+										{{ tag.localized_name || tag.name }}
+									</button>
+								</div>
+							</div>
+
+							<div class="sidebar__section" v-if="popularBlog?.data?.data?.length">
+								<h4>{{ $t("more.blog.most_read") }}</h4>
+								<div class="popular-list">
+									<div
+										v-for="post in popularBlog.data.data"
+										:key="post.id"
+										class="popular-item"
+									>
+										<img
+											v-if="post.cover_image_url"
+											:src="post.cover_image_url"
+											:alt="post.localized_title"
+										/>
+										<div>
+											<h5>{{ post.localized_title }}</h5>
+											<span>{{ post.created_at }}</span>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.blog {
+	color: var(--inactive);
+	font-size: 0.875rem;
+
+	.header {
+		position: relative;
+		height: 200px;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-bottom: 2rem;
+
+		& > div {
+			width: 480px;
+			text-align: center;
+		}
+
+		&:before {
+			content: " ";
+			display: block;
+			position: absolute;
+			background: url("@/assets/images/bg-blog.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.blog-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.blog-card {
+		display: flex;
+		gap: 16px;
+		background-color: var(--chip-background-2);
+		padding: 16px;
+
+		&__image {
+			width: 160px;
+			height: 120px;
+			object-fit: cover;
+			flex-shrink: 0;
+		}
+
+		&__content {
+			flex: 1;
+
+			h3 {
+				font-size: 16px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+				margin-bottom: 8px;
+			}
+
+			p {
+				font-size: 14px;
+				line-height: 20px;
+				margin-bottom: 8px;
+			}
+		}
+
+		&__meta {
+			display: flex;
+			gap: 12px;
+			font-size: 12px;
+			color: var(--secondary-info-fg);
+		}
+	}
+
+	.sidebar {
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+
+		&__section {
+			h4 {
+				font-size: 14px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+				margin-bottom: 12px;
+			}
+
+			select {
+				width: 100%;
+				height: 36px;
+				padding: 0 8px;
+				border: 1px solid var(--search-bar-border-color);
+				background: var(--search-bar-bg);
+				color: var(--search-bar-fg);
+				font-size: 14px;
+			}
+		}
+	}
+
+	.tag-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+
+		.tag-btn {
+			padding: 4px 12px;
+			border: 1px solid var(--search-bar-border-color);
+			background: transparent;
+			color: var(--inactive);
+			font-size: 12px;
+			cursor: pointer;
+
+			&.active {
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+				border-color: var(--chip-text);
+			}
+		}
+	}
+
+	.popular-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		.popular-item {
+			display: flex;
+			gap: 8px;
+
+			img {
+				width: 60px;
+				height: 45px;
+				object-fit: cover;
+				flex-shrink: 0;
+			}
+
+			h5 {
+				font-size: 13px;
+				font-weight: 500;
+				color: var(--card-cover-title);
+				margin-bottom: 4px;
+			}
+
+			span {
+				font-size: 11px;
+				color: var(--secondary-info-fg);
+			}
+		}
+	}
+
+	.pagination-controls {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20px;
+		gap: 16px;
+
+		button {
+			padding: 8px 15px;
+			background-color: var(--chip-background-2);
+			color: var(--card-cover-title);
+			border: 1px solid var(--search-bar-border-color);
+			cursor: pointer;
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: default;
+			}
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+
+@media screen and (max-width: 768px) {
+	.blog .blog-card {
+		flex-direction: column;
+
+		&__image {
+			width: 100%;
+			height: 180px;
+		}
+	}
+}
+</style>