minhnt-dev: design

app.vue

@@ -44,6 +44,8 @@ useHead({
   </div>
   </a-config-provider> -->
   <NuxtLayout>
-    <NuxtPage />
+    <KeepAlive>
+      <NuxtPage />
+    </KeepAlive>
   </NuxtLayout>
 </template>

assets/styles/style.scss

@@ -2,20 +2,7 @@
     > .section-container {
         > .layout_define {
             > .section_layout {
-                @apply gap-x-14
-
-                > div {
-                    background: red;
-
-                    > div {
-                        article {
-                            background: red;
-                            h3 {
-                                @apply text-xl #{!important}
-                            }
-                        }
-                    }
-                }
+                @apply gap-x-10 #{!important}
             }
         }
     }

components/dynamic-page/page-component/templates/articles/individuals/Card.vue

@@ -49,7 +49,7 @@ const drop = (e: any) => {
     <article class="basic-article gap-x-4" :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '']">
         <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail">
             <template v-if="parseData">
-                <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+                <img class="object-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
             </template>
         </div>
         <div class="basic-article_content" :class="[!parseData && 'no-data']">

components/dynamic-page/page-component/templates/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplates } from "@/definitions/enum";
-import { Article_BasicCard, BasicCategories, Article_BasicCollection, Dynamic_Other } from "./index";
+import { Article_BasicCard, BasicCategories, Article_BasicCollection, CollectionPaging, Dynamic_Other } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -11,6 +11,7 @@ const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplates.ARTICLE]: Article_BasicCard,
   [enumPageComponentTemplates.CATEGORY]: BasicCategories,
   [enumPageComponentTemplates.COLLECTION]: Article_BasicCollection,
+  [enumPageComponentTemplates.SECTION]: CollectionPaging,
   [enumPageComponentTemplates.OTHER]: Dynamic_Other
 };
 

components/dynamic-page/page-component/templates/pageCategories/collection_page.vue

@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import { isEmpty } from "lodash";
 import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
-import { COLLECTION_PAGING_QUERY_DROP } from '@/utils/parseSQL';
+import { COLLECTION_PAGING_QUERY_DROP, getInputValue } from "@/utils/parseSQL";
 const router = useRouter();
 const route = useRoute();
 
-const emit = defineEmits(["dropData", "selectComponent"]);
-
 const _props = defineProps<{
   dataResult?: any[];
   dataQuery?: string;
@@ -21,34 +19,12 @@ const SETTING_OPTIONS = {
 
 // const page = ref(1);
 const limit = ref(1);
-const totals = ref(2);
-const category = ref(0);
-const listArticleByCategory = ref([]);
+const totals = ref(1);
 const type = "Article";
 
-// watch(
-//   () => _props.dataResult,
-//   (newValue) => {
-//     const result = getInputValue(newValue, "ARRAY");
-//     listArticleByCategory.value = result;
-//   }
-// );
-
-
-const dropData = (event: any) => {
-  const queryBy = {
-    Category: "Categories",
-  };
-  const { dataResult, dataType } = JSON.parse(event.dataTransfer.getData("category"));
-  // const getDataQuery = `Get[${type}] Top[20] With[${queryBy[dataType]}:${dataResult.id}]`;
-  const getDataQuery = COLLECTION_PAGING_QUERY_DROP(type, { key: queryBy[dataType], value: dataResult.id })
-  category.value = dataResult.id;
-  emit("dropData", {
-    dataResult: [],
-    dataType,
-    dataQuery: getDataQuery,
-  });
-};
+const listArticleByCategory = computed(() => {
+  return getInputValue(_props.dataResult, "ARRAY");
+});
 
 //?cpn_1=page:2&cpn_2=page:1
 // Get[Article] Top[5] With[Categories:1]
@@ -70,11 +46,9 @@ const handleRouteChange = (query: any) => {
   }
 };
 
-onBeforeMount(()=>{
-  const result = getInputValue( _props.dataResult, "ARRAY");
-  listArticleByCategory.value = result;
-  handleRouteChange(route.query)
-})
+onBeforeMount(() => {
+  if (route.query[`cpn_${_props.component?.id}`]) handleRouteChange(route.query);
+});
 
 const loadPage = (page: string | number) => {
   console.log(`Loading page ${page}`);
@@ -91,27 +65,23 @@ watch(
 
 <template>
   <section>
-    <div class="section-container" @dragover.prevent @drop.stop.prevent="dropData($event)" 
-      :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
+    <div class="section-container" @click="selectComponent" @dragover.prevent @drop.stop.prevent="dropData($event)" :class="[listArticleByCategory && listArticleByCategory?.length > 0 ? '' : 'noData']">
       <div class="collection-container">
-        <template v-if="category">
-          <template v-if="listArticleByCategory?.length > 0">
-            <template v-for="(component, index) in listArticleByCategory" :key="index">
-              <DynamicComponent
-                v-if="!isEmpty(component)"
-                :settings="{
-                  template: SETTING_OPTIONS.TEMPLATE,
-                  layout: SETTING_OPTIONS.LAYOUT,
-                  dataResult: { ...component },
-                }"
-              />
-            </template>
-          </template>
-          <template v-else>
-            <el-result icon="success" title="Success" sub-title="Nội dung danh sách bài viết sẽ ở đây"> </el-result>
+        <template v-if="listArticleByCategory?.length > 0">
+          <template v-for="(component, index) in listArticleByCategory" :key="index">
+            <DynamicComponent
+              v-if="!isEmpty(component)"
+              :settings="{
+                template: SETTING_OPTIONS.TEMPLATE,
+                layout: SETTING_OPTIONS.LAYOUT,
+                dataResult: { ...component },
+              }"
+            />
           </template>
         </template>
-        <template v-else><el-empty image-size="90px" description="Kéo Category vào đây" /></template>
+        <template v-else>
+          <div class="empty"><h6>Nội dung danh sách bài viết của danh mục sẽ ở đây</h6></div>
+        </template>
         <div class="button-page flex">
           <a class="btn-page prev-page">
             <i class="el-icon">
@@ -123,7 +93,7 @@ watch(
               </svg>
             </i>
           </a>
-          <a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals">{{ index + 1 }}</a>
+          <a class="btn-page" @click="() => select(index + 1)" v-for="(_, index) in totals" :key="index">{{ index + 1 }}</a>
           <a class="btn-page next-page">
             <i class="el-icon">
               <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
@@ -142,15 +112,23 @@ watch(
 
 <style lang="scss" scoped>
 .section-container {
-  .empty {
-    min-height: 100px;
-    border-radius: 6px;
-    background: #409eff;
-  }
   .collection-container {
     display: grid;
     gap: 10px;
   }
+  .empty {
+    width: 100%;
+    height: 100%;
+    min-height: 50px;
+    background-color: #409eff;
+    display: flex;
+    white-space: normal;
+    justify-content: center;
+    align-items: center;
+    h6{
+      color: #fff;
+    }
+  }
   .basic-article {
     &.article {
       margin-bottom: 10px;

components/dynamic-page/page-section/layouts/Default.vue

@@ -105,7 +105,7 @@ const CLASS_FOR_SECTION = computed(() => {
   switch (props.layout) {
     case enumPageSectionLayouts.VERTICAL_TWO:
       _classForSection = {
-        section_layout: "section_layout two_col_layout",
+        section_layout: "section_layout two_col_layout mb-5 mt-2",
       };
       break;
     case enumPageSectionLayouts.VERTICAL_LEFT_TWO:
@@ -122,7 +122,7 @@ const CLASS_FOR_SECTION = computed(() => {
       break;
     case enumPageSectionLayouts.VERTICAL_THREE:
       _classForSection = {
-        section_layout: "section_layout three_col_layout",
+        section_layout: "section_layout three_col_layout mt-4",
       };
       break;
     case enumPageSectionLayouts.VERTICAL_FOUR:

components/dynamic-page/page/layouts/Default.vue

@@ -15,13 +15,13 @@ const CLASS_FOR_LAYOUT = computed(() => {
         case 'Center_Page':
             _classForLayout = {
                 page_container: 'page_container w-full px-2',
-                layout_container: 'layout_container container mx-auto',
+                layout_container: 'layout_container container-xxl mx-auto',
             };
             break;
         case 'Background_Page':
             _classForLayout = {
                 page_container: 'page_container w-full background-container',
-                layout_container: 'layout_container container mx-auto',
+                layout_container: 'layout_container container-xxl mx-auto',
             };
             break;
         default: 

pages/[categories]/index.vue

@@ -7,19 +7,27 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
+const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
 
-const loadData = async () => {
-  store.dynamicPage.fetchPageById(7);
+(async () => {
+  try {
+    store.dynamicPage.fetchPageByCode(route.path.replace('/', ''));
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+})();
 
+watch(currentPage, () => {
   store.dynamicPage.setSectionPublished();
-  store.dynamicPage.setComponentPublished()
-}
-await loadData()
-
+  store.dynamicPage.setComponentPublished();
+}, { deep: true })
 
+useHead({
+  title: currentPage.value.title || ''
+})
 </script>
 
 <template>

pages/bai-viet/[slug].vue

@@ -23,7 +23,7 @@ const store = reactive({
 
 (async () => {
   try {
-    store.article.getArticleById(Number(route.params.slug));
+    store.article.getArticleById(route.params.slug);
   } catch (error) {
     console.error("Error fetching data:", error);
   }
@@ -48,16 +48,16 @@ watch(currentArticle, async () => {
     case 4:
         isContentType = 'ArticleLayoutVideo'
     case 5:
-        if (currentArticle.value?.layoutType === 3) isContentType = 'ArticleLayoutInfographics'
-        else isContentType = 'ArticleLayoutFullPage'
+        if (currentArticle.value?.layoutType === 3) isContentType = 'trang-chi-tiet-emagazine'
+        else isContentType = 'trang-chi-tiet-emagazine'
     default:
-        isContentType = 'ArticleLayoutDefault'
+        isContentType = 'trang-chi-tiet-emagazine'
   }
   await loadPage(isContentType)
 }, { deep: true })
 
 useSeoMeta({
-    title: currentArticle.value?.title,
+    title: currentArticle.value?.title?.replace(/<[^>]+>/g, ''),
     ogTitle: currentArticle.value?.title,
     description: currentArticle.value?.intro,
     ogDescription: currentArticle.value?.intro,

pages/index.vue

@@ -7,18 +7,21 @@ import DynamicSection from "~/components/dynamic-page/page-section/templates/ind
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage, sectionPublished, componentPublished } = storeToRefs(useDynamicPageStore());
 
+const route = useRoute();
 const store = reactive({
   dynamicPage: useDynamicPageStore(),
 });
+
 (async () => {
   try {
-    store.dynamicPage.fetchPageByCode('trang-chu');
+    store.dynamicPage.fetchPageByCode(route.path === '/' ? 'trang-chu' : route.path.replace('/', ''));
   } catch (error) {
     console.error("Error fetching data:", error);
   }
 })();
 
 watch(currentPage, () => {
+  console.log(currentPage.value)
   store.dynamicPage.setSectionPublished();
   store.dynamicPage.setComponentPublished()
 }, { deep: true })

server/models/articles/index.ts

@@ -83,6 +83,7 @@ export const getArticleBySlug = async (event : any) => {
                 site: '1' || 1,
             }),
         })
+        console.log(item)
         return item
     } catch (error) {
         handleError(error);

stores/articles.ts

@@ -10,9 +10,18 @@ export const useArticleStore = defineStore("article", () => {
         } catch (error: any) {}
     }
 
+    const getArticleByCode = async (slug: string) => {
+        try {
+            const { data} = await useFetch(`/api/articles/get-by-slug/${slug}`)
+            currentArticle.value = {}
+            currentArticle.value = data.value.item
+        } catch (error: any) {}
+    }
+
     return {
         currentArticle,
-        getArticleById
+        getArticleById,
+        getArticleByCode
     }
 });