minhnt-dev: article api

2024-05-31 00:46:43 +07:00
parent a7d4781a81
commit 7a92ca829f
11 changed files with 229 additions and 60 deletions
@@ -0,0 +1,81 @@
+/*
+- LayoutType: None=0 | Normal=1 | Short=2 | Long=3 | Page=4 | Other=5
+- ContentType: None=0 | Normal=1 | Photo=2 | Video=3 | Graphic=4 | Document=5 | Reaction=6 (Poll,Quiz) | Other=7
+- Type: None=0 | Editorial=1 | General=2 | Reportage=3 | Interview=4 | Survey=5 | Tutorial=6 | Podcast=7 | Broadcast=8 | TalkShow=9 | LiveStream=10 | Translation=11 | Promotion=12 | Other=13
+*/
+
+<script setup lang="ts">
+import _cloneDeep from 'lodash/cloneDeep';
+
+import DynamicTemplate from "~/components/dynamic-page/page/templates/index.vue";
+import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
+
+const route = useRoute();
+
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+import { useArticleStore } from '~/stores/articles';
+const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
+const { currentArticle } = storeToRefs(useArticleStore());
+
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+  article: useArticleStore(),
+});
+(async () => {
+  try {
+    store.article.getArticleById(route.params.slug);
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+})();
+
+const loadPage = async (contentType: string | number) => {
+  store.dynamicPage.fetchPageByCode('trang-chu');
+  store.dynamicPage.setSectionPublished();
+  store.dynamicPage.setComponentPublished();
+} 
+
+watch(currentArticle, async () => {
+  let isContentType : string = '';
+  switch (currentArticle.value?.contentType) {
+    case 1:
+        isContentType = 'ArticleLayoutDefault'
+    case 2:
+        isContentType = 'ArticleLayoutImage'
+    case 3:
+        isContentType = 'ArticleLayoutPodcast'
+    case 4:
+        isContentType = 'ArticleLayoutVideo'
+    case 5:
+        if (currentArticle.value?.layoutType === 3) isContentType = 'ArticleLayoutInfographics'
+        else isContentType = 'ArticleLayoutFullPage'
+    default:
+        isContentType = 'ArticleLayoutDefault'
+  }
+  await loadPage(isContentType)
+}, { deep: true })
+
+useSeoMeta({
+    title: currentArticle.value?.title,
+    ogTitle: currentArticle.value?.title,
+    description: currentArticle.value?.intro,
+    ogDescription: currentArticle.value?.intro,
+    ogImage: currentArticle.value?.thumbnail,
+})
+</script>
+
+<template>
+  <main class="h-screen" v-if="currentPage">
+    <DynamicTemplate :settings="currentPage.settings">
+      <template v-if="sectionPublished && sectionPublished.length > 0">
+        <DynamicSection
+          v-for="(section, index) in sectionPublished"
+          :key="index"
+          :settings="section.settings"
+          :content="section.content ? JSON.parse(section.content) : null"
+          :section="section"
+        />
+      </template>
+    </DynamicTemplate>
+  </main>
+</template>