thainv-dev: sửa lại cấu trúc folder

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

@@ -1,24 +1,94 @@
 <script lang="ts" setup>
-
+import { enumPageComponentTemplates } from "@/definitions/enum";
+import { DEFAULT_QUERY_DROP } from "@/utils/parseSQL";
+import { getInputValue } from "@/utils/parseSQL";
 
 const props = defineProps<{
   dataResult?: any;
   dataType?: any;
   dataQuery?: any;
   layout?: string;
-  design?: string;
+  label?: string;
 }>();
 
+const LAYOUT_PARSE = computed(() => {
+  const parseLayout =
+    props.layout?.split("-")?.map((_layout: any) => {
+      const parseItem = _layout.split(":");
+      return {
+        [parseItem[0]]: parseItem[0] === "HIDE" ? parseItem[1].split(",") : parseItem[1],
+      };
+    }) || [];
+  const designObject = props.label ? getInputValue(props.label, "OBJECT") : {};
+
+  return Object.assign({}, ...parseLayout, designObject);
+});
+
+const emit = defineEmits(["selectComponent", "dropData"]);
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const parseData = computed(() => {
+  if (!props.dataResult) return;
+  const result = getInputValue(props.dataResult, "OBJECT");
+  return result;
+});
+
+const drop = (e: any) => {
+  if (e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`)) {
+    const data = e.dataTransfer.getData(`${enumPageComponentTemplates.ARTICLE}`);
+    const { dataType, dataResult } = JSON.parse(data);
+    const dataQuery = DEFAULT_QUERY_DROP(dataType, dataResult.id);
+    emit("dropData", {
+      dataType,
+      dataResult,
+      dataQuery: dataQuery,
+    });
+  }
+};
 </script>
 
 <template>
-  <div>
-  vào r</div>
+  <article
+    class="basic-article border-custom"
+    @click="selectComponent"
+    @dragover.prevent
+    @drop.stop.prevent="drop"
+    :class="[LAYOUT_PARSE['LAYOUT'] || 'horizontal', !parseData && 'no-data', LAYOUT_PARSE['REVERSE'] ? 'reverse' : '', ...(LAYOUT_PARSE['border']?.length > 0 ? LAYOUT_PARSE['border'] : [])]"
+    :style="[LAYOUT_PARSE['background'] && `background: ${LAYOUT_PARSE['background']}`]"
+  >
+    <div v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('thumbnail')" class="basic-article_thumbnail" :style="[LAYOUT_PARSE['LAYOUT'] === 'horizontal' && LAYOUT_PARSE['WidthImg'] && `width: ${LAYOUT_PARSE['WidthImg']}%`]">
+      <template v-if="parseData">
+      <nuxt-link :to="`bai-viet/${parseData?.slug}`">
+        <img class="object-fit-cover" :src="parseData.thumbnail ? parseData.thumbnail : '/images/default-thumbnail.jpg'" :alt="parseData.title?.replace(/<[^>]+>/g, '')" />
+      </nuxt-link>
+      </template>
+      <span v-else class="empty-block" style="width: 100%; height: 100%; min-height: 50px"></span>
+    </div>
+    <div class="basic-article_content !py-0" :class="[!parseData && 'no-data']">
+      <div>
+        <nuxt-link :to="`bai-viet/${parseData?.slug}`" v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('title')" class="mb-1 text-truncate-two-lines font-bold  line-clamp-2 hover:text-primary-600">
+          <template v-if="parseData">
+            {{ parseData.title?.replace(/<[^>]+>/g, "") }}
+          </template>
+          <span v-else class="empty-block" style="height: 8px"></span>
+        </nuxt-link>
+        <p v-if="!LAYOUT_PARSE['HIDE'] || !LAYOUT_PARSE['HIDE'].includes('paragraph')" class="mb-0 line-clamp-3">
+          <template v-if="parseData">
+            {{ parseData.intro ? parseData.intro?.replace(/<[^>]+>/g, "") : parseData.detail?.replace(/<[^>]+>/g, "") }}
+          </template>
+          <span v-else class="empty-block" style="height: 5px"></span>
+        </p>
+      </div>
+    </div>
+  </article>
 </template>
 
 <style lang="scss" scoped>
 .basic-article {
-  display: grid;
+  display: flex;
   gap: 10px;
   height: 100%;
 
@@ -27,44 +97,45 @@ const props = defineProps<{
   }
 
   &.vertical {
-    grid-template-columns: repeat(1, minmax(0, 1fr));
+    flex-direction: column;
+    .basic-article_thumbnail {
+      width: 100%;
+    }
+    &.reverse {
+      flex-direction: column-reverse;
+      height: 100%;
+    }
   }
   &.border-custom {
     border-color: #e5e5e5 !important;
   }
   &.borderLeft {
-    border-left: 2px solid;
+    border-left: 1px solid;
     padding-left: 10px;
   }
   &.borderRight {
-    border-right: 2px solid;
+    border-right: 1px solid;
     padding-right: 10px;
   }
   &.borderTop {
-    border-top: 2px solid;
+    border-top: 1px solid;
     padding-top: 10px;
   }
   &.borderBottom {
-    border-bottom: 2px solid;
+    border-bottom: 1px solid;
     padding-bottom: 10px;
   }
   &.horizontal {
-    grid-template-columns: 1fr 1fr;
-
+    flex-direction: row;
+    .basic-article_thumbnail {
+      width: 40%;
+    }
     &.reverse {
-      .basic-article_thumbnail {
-        grid-column: 2;
-      }
-
-      .basic-article_content {
-        grid-row: 1;
-      }
+      flex-direction: row-reverse;
     }
   }
 
   &_thumbnail {
-    flex: 1;
-
     img {
       width: 100%;
       border-radius: 6px;
@@ -74,7 +145,7 @@ const props = defineProps<{
 
   &_content {
     padding: 10px 0px;
-
+    flex: 1;
     &.no-data {
       padding: 0px;
     }
@@ -89,10 +160,10 @@ const props = defineProps<{
     }
   }
 
-  .empty-block {
-    background-color: #409eff;
-    height: 100px;
-    display: block;
-  }
+  // .empty-block {
+  //   background-color: #409eff;
+  //   height: 100px;
+  //   display: block;
+  // }
 }
 </style>