@mundogamernetwork/shared-ui 1.0.0

package/pages/magazine/index.vue

@@ -0,0 +1,267 @@
+<script setup lang="ts">
+import { storeToRefs } from "pinia";
+
+definePageMeta({ layout: "default" });
+
+const institutionalStore = useInstitutionalStore();
+const { magazine } = storeToRefs(institutionalStore);
+const authStore = useAuthStore();
+const { signedIn } = storeToRefs(authStore);
+
+const config = useRuntimeConfig();
+const systemId = config.public.mgSharedUi?.systemId || import.meta.env.VITE_SYSTEM_ID;
+
+const currentPage = ref(1);
+const perPage = 12;
+const selectedLanguage = ref("");
+
+async function fetchMagazines() {
+	try {
+		const params: any = {
+			filter: {
+				status: 1,
+				platform_id: systemId,
+			},
+			sort: "created_at",
+			order: "desc",
+			per_page: perPage,
+			page: currentPage.value,
+		};
+		if (selectedLanguage.value) params.filter.language = selectedLanguage.value;
+
+		await institutionalStore.fetchLatestMagazine(params);
+	} catch {
+		// silent
+	}
+}
+
+function loadMore() {
+	currentPage.value++;
+	const params: any = {
+		filter: {
+			status: 1,
+			platform_id: systemId,
+		},
+		sort: "created_at",
+		order: "desc",
+		per_page: perPage,
+		page: currentPage.value,
+	};
+	if (selectedLanguage.value) params.filter.language = selectedLanguage.value;
+	institutionalStore.fetchMoreLatestMagazine(params);
+}
+
+function changeLanguage() {
+	currentPage.value = 1;
+	fetchMagazines();
+}
+
+onMounted(() => {
+	fetchMagazines();
+	institutionalStore.fetchLanguage({ per_page: "all" });
+});
+
+const locale = useNuxtApp().$i18n.locale;
+</script>
+
+<template>
+	<div id="magazine" class="container magazine">
+		<section>
+			<div class="header">
+				<div>
+					<h1 class="title-4">{{ $t("more.magazine.title") }}</h1>
+					<p>{{ $t("more.magazine.subtitle") }}</p>
+				</div>
+			</div>
+			<div class="container">
+				<div class="row">
+					<div class="col-8 offset-2">
+						<div class="filters">
+							<select v-model="selectedLanguage" @change="changeLanguage">
+								<option value="">{{ $t("more.magazine.all_languages") }}</option>
+								<option
+									v-for="lang in institutionalStore.language.data"
+									:key="lang.id"
+									:value="lang.slug"
+								>
+									{{ lang.name }}
+								</option>
+							</select>
+						</div>
+
+						<div v-if="magazine.status === 'pending' && (!magazine.data || magazine.data.length === 0)" class="loading">
+							<p>{{ $t("components.loading") }}</p>
+						</div>
+
+						<div v-else-if="magazine.data && magazine.data.length > 0">
+							<div class="magazine-grid">
+								<div
+									v-for="item in magazine.data"
+									:key="item.id"
+									class="magazine-card"
+								>
+									<NuxtLink :to="`/${locale}/magazine/${item.slug}`" class="magazine-card__link">
+										<div class="magazine-card__cover">
+											<img
+												:src="item.cover_image_url || '/imgs/default.jpg'"
+												:alt="item.title"
+											/>
+											<span v-if="item.is_premium" class="premium-badge">Premium</span>
+										</div>
+										<div class="magazine-card__info">
+											<h3>{{ item.title }}</h3>
+											<span class="edition" v-if="item.edition_number">
+												{{ $t("more.magazine.edition") }} #{{ item.edition_number }}
+											</span>
+											<span class="date">{{ item.release_date || item.created_at }}</span>
+										</div>
+									</NuxtLink>
+								</div>
+							</div>
+
+							<div
+								v-if="magazine.data.meta && magazine.data.length < magazine.data.meta.total"
+								class="load-more"
+							>
+								<button @click="loadMore" :disabled="magazine.status === 'pending'">
+									{{ $t("components.load_more") }}
+								</button>
+							</div>
+						</div>
+
+						<div v-else class="no-data">
+							{{ $t("more.magazine.no_data") }}
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.magazine {
+	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-magazine.png") no-repeat center center / cover;
+			width: 100%;
+			height: 100%;
+			top: 50%;
+			transform: translateY(-50%);
+			z-index: -1;
+		}
+	}
+
+	.filters {
+		margin-bottom: 24px;
+
+		select {
+			height: 40px;
+			padding: 0 12px;
+			border: 1px solid var(--search-bar-border-color);
+			background: var(--search-bar-bg);
+			color: var(--search-bar-fg);
+			font-size: 14px;
+			min-width: 200px;
+		}
+	}
+
+	.magazine-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+		gap: 24px;
+	}
+
+	.magazine-card {
+		&__link {
+			text-decoration: none;
+			color: inherit;
+		}
+
+		&__cover {
+			position: relative;
+			margin-bottom: 8px;
+
+			img {
+				width: 100%;
+				aspect-ratio: 3/4;
+				object-fit: cover;
+			}
+
+			.premium-badge {
+				position: absolute;
+				top: 8px;
+				right: 8px;
+				padding: 2px 8px;
+				background: var(--chip-text);
+				color: var(--chip-background-2);
+				font-size: 11px;
+				font-weight: 600;
+			}
+		}
+
+		&__info {
+			h3 {
+				font-size: 14px;
+				font-weight: 600;
+				color: var(--card-cover-title);
+				margin-bottom: 4px;
+			}
+
+			.edition {
+				display: block;
+				font-size: 12px;
+				color: var(--chip-text);
+				margin-bottom: 2px;
+			}
+
+			.date {
+				font-size: 12px;
+				color: var(--secondary-info-fg);
+			}
+		}
+	}
+
+	.load-more {
+		text-align: center;
+		margin-top: 24px;
+
+		button {
+			padding: 8px 24px;
+			border: 1px solid var(--chip-text);
+			background: transparent;
+			color: var(--chip-text);
+			cursor: pointer;
+			font-size: 14px;
+
+			&:disabled {
+				opacity: 0.5;
+			}
+		}
+	}
+
+	.no-data {
+		text-align: center;
+		padding: 32px;
+		color: var(--secondary-info-fg);
+	}
+}
+</style>