From 5f72a107ce8cd4e7d2327164c5d3638fa331eb0f Mon Sep 17 00:00:00 2001
From: Duong Truong Phong <duongtrphong1211@gmail.com>
Date: Tue, 16 Jul 2024 11:19:46 +0700
Subject: [PATCH] phongdt:add id component

---
 .../page-component/templates/articles/cards/Audio.vue          | 3 ++-
 .../page-component/templates/articles/cards/Card.vue           | 2 ++
 .../page-component/templates/articles/cards/MissBackground.vue | 3 ++-
 .../page-component/templates/articles/cards/Video.vue          | 2 ++
 .../page-component/templates/categories/categories/Default.vue | 3 ++-
 .../templates/categories/categories/Vertical.vue               | 3 ++-
 .../page-component/templates/collections/articles/Audio.vue    | 3 ++-
 .../page-component/templates/collections/articles/Default.vue  | 3 ++-
 .../templates/collections/categories/misses/Default.vue        | 3 ++-
 9 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
index 9ba2be3..179fecc 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Audio.vue
@@ -9,6 +9,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -51,7 +52,7 @@ const parseData = computed(() => {
 </script>
 
 <template>
-  <article class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
+  <article :id="`cpn_${props.component.id}`" class="card-audio" :class="LAYOUT_PARSE['article_Class']" :style="LAYOUT_PARSE['article']">
     <img :src="parseData?.thumbnail ? parseData?.thumbnail : 'https://indiaeducationdiary.in/wp-content/uploads/2021/02/SD-default-image.png'" :alt="parseData?.title?.replace(/<[^>]+>/g, '')" />
     <div class="card-audio__content">
       <span class="flex justify-center">
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Card.vue b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
index 7539d27..5a36da2 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Card.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Card.vue
@@ -10,6 +10,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -27,6 +28,7 @@ const parseData = computed(() => {
 <template>
   <article
   v-if="parseData"
+  :id="`cpn_${props.component.id}`"
     class="basic-article border-custom"
     :class="LAYOUT_PARSE['article_Class']"
     :style="LAYOUT_PARSE['article']"
diff --git a/components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue b/components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue
index 3301251..cdb1b90 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/MissBackground.vue
@@ -10,6 +10,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: string;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -44,7 +45,7 @@ const drop = (e: any) => {
 </script>
 
 <template>
-  <article class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
+  <article :id="`cpn_${props.component.id}`" class="basic-article border-custom" :class="LAYOUT_PARSE['article_Class']"  :style="LAYOUT_PARSE['article']">
     <div class="article_miss">
       <template v-if="parseData">
         <div class="article_miss_thumb custom-thumb" :style="{ backgroundImage: `url('${parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'}')` }"></div>
diff --git a/components/dynamic-page/page-component/templates/articles/cards/Video.vue b/components/dynamic-page/page-component/templates/articles/cards/Video.vue
index c051e02..6dbb212 100644
--- a/components/dynamic-page/page-component/templates/articles/cards/Video.vue
+++ b/components/dynamic-page/page-component/templates/articles/cards/Video.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
   dataQuery?: any;
   layout?: string;
   label?: any;
+  component?: any;
 }>();
 
 const LAYOUT_PARSE = computed(() => {
@@ -24,6 +25,7 @@ const parseData = computed(() => {
 
 <template>
   <article
+  :id="`cpn_${props.component.id}`"
     class="basic-article border-custom"
     :class="LAYOUT_PARSE['article_Class']"
     :style="LAYOUT_PARSE['article']"
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Default.vue b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
index 75cdea7..bdb00cb 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Default.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Default.vue
@@ -6,6 +6,7 @@ const _props = defineProps<{
   dataResult?: any;
   dataQuery?: string;
   label?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div>
diff --git a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
index 4760cfa..e28d02e 100644
--- a/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
+++ b/components/dynamic-page/page-component/templates/categories/categories/Vertical.vue
@@ -6,6 +6,7 @@ const _props = defineProps<{
   dataResult?: any;
   dataQuery?: string;
   label?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -37,7 +38,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
+  <div :id="`cpn_${_props.component.id}`" class="categories-container border-custom flex-wrap" :class="designObject['categories_Class']" :style="designObject['div.categories-container']">
     <div v-for="(component, index) in _dataResult" :key="index" :class="['border-custom', isEmpty(component) ? 'empty' : 'category', designObject['category_Class']]" :style="mapActivesToItems(index)['category']">
       <template v-if="!isEmpty(component)">
         <div class="category-content">
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
index 2c31159..b714ae0 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Audio.vue
@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: any;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"
diff --git a/components/dynamic-page/page-component/templates/collections/articles/Default.vue b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
index d6b79dc..753fcfe 100644
--- a/components/dynamic-page/page-component/templates/collections/articles/Default.vue
+++ b/components/dynamic-page/page-component/templates/collections/articles/Default.vue
@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: any;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -46,7 +47,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <div class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
+  <div :id="`cpn_${_props.component.id}`" class="collection-container border-custom overflow-hidden" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" :style="LAYOUT_PARSE['div.collection-container']">
     <DynamicComponent
       v-for="(component, index) in _dataResult"
       :key="index"
diff --git a/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue b/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
index 7301a32..f7f3450 100644
--- a/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
+++ b/components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue
@@ -10,6 +10,7 @@ const _props = defineProps<{
   layout?: string;
   label?: string;
   content?: any;
+  component?: any;
 }>();
 
 const SETTING_OPTIONS = {
@@ -66,7 +67,7 @@ const mapActivesToItems = (index: number) => {
 </script>
 
 <template>
-  <section class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
+  <section :id="`cpn_${_props.component.id}`" class="gallery" :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]" @click="selectComponent" :style="LAYOUT_PARSE['div.collection-container']">
     <div class="wrap" v-for="(component, index) in _dataResult" :key="index">
       <DynamicComponent
         class="abc"