thainv-dev

components/dynamic-page/page-component/AssignComponent.vue

@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { useDynamicPageStore } from '~/stores/dynamic-page';
 const { currentPage } = storeToRefs(useDynamicPageStore());
 const props = defineProps<{
-  type?: string; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
+  type?: any; // [TOP_NAVIGATION, BOTTOM_NAVIGATION]
 }>();
 
 const defineTypeRecusive = {

components/dynamic-page/page-component/templates/articles/details/Image.vue

@@ -2,7 +2,7 @@
 import { isEmpty } from "@/utils/lodash";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
 }>();
 const SETTING_OPTIONS = {
   BREADCRUMB_MAX_ELEMENT: 3,

components/dynamic-page/page-component/templates/categories/categories/Default.vue

@@ -3,7 +3,7 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   label?: any;
 }>();

components/dynamic-page/page-component/templates/categories/categories/Vertical.vue

@@ -3,7 +3,7 @@ import { isEmpty } from "@/utils/lodash";
 import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   label?: any;
 }>();

components/dynamic-page/page-component/templates/collections/articles/Audio.vue

@@ -5,7 +5,7 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
   label?: any;

components/dynamic-page/page-component/templates/collections/articles/Default.vue

@@ -5,7 +5,7 @@ import { isEmpty } from "@/utils/lodash";
 import { enumPageComponentTemplates } from "@/definitions/enum";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   layout?: string;
   label?: any;

components/dynamic-page/page-component/templates/collections/categories/index.ts

@@ -0,0 +1 @@
+export { default as Misses_Default } from './misses/Default.vue'

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

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
+import { Misses_Default } from "./index";
+
+const _props = defineProps<{
+  settings: any;
+  component?: any;
+  content?: any;
+}>();
+const definedDynamicComponent: Record<string, any> = {
+  [enumPageComponentLayouts[`${enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]}`]["MISSES_COLLECTION_DEFAULT"]]: Misses_Default,
+};
+
+const getCurrentComponent = computed(() => _props.settings.layout);
+const GET_PROPS = computed(() => {
+  return () => {
+    let props: any = {};
+    if (_props.settings) {
+      for (const [key, value] of Object.entries(_props.settings)) {
+        props = {
+          ...props,
+          [key]: value,
+        };
+      }
+      return props;
+    }
+  };
+});
+</script>
+
+<template>
+  <component 
+    :is="definedDynamicComponent[getCurrentComponent]" 
+    v-bind="{ ...GET_PROPS(), component: _props.component, settings: _props.settings, content: _props.content }" 
+  />
+</template>

components/dynamic-page/page-component/templates/collections/categories/misses/Default.vue

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/parseSQL";
+import { isEmpty, groupBy } from "lodash";
+import { enumPageComponentTemplates } from "@/definitions/enum";
+const emit = defineEmits(["dropComponent", "dropData", "selectComponent"]);
+const _props = defineProps<{
+  dataResult?: any;
+  dataQuery?: string;
+  layout?: string;
+  label?: string;
+  content?: any;
+}>();
+
+const SETTING_OPTIONS = {
+  MAX_ELEMENT: 6,
+  TEMPLATE: "TYPE:Card",
+  LAYOUT: "TYPE:Card_MissHightLight",
+};
+
+const COMPONENT = {
+  taxonomy: enumPageComponentTemplates.ARTICLE,
+};
+
+const LAYOUT_PARSE = computed(() => {
+  // console.log(_props.label);
+  return _props.label ? getInputValue(_props.label, "OBJECT") : {};
+});
+
+const _dataResult = computed(() => {
+  let _components = Array(Number(LAYOUT_PARSE.value.MAX) || SETTING_OPTIONS.MAX_ELEMENT).fill(null);
+  const result = getInputValue(_props.dataResult, "ARRAY");
+  result &&
+    result.length > 0 &&
+    _components.map((_: any, index: any) => {
+      _components[index] = result[index] || null;
+    });
+  return _components;
+});
+
+async function dropData(data: any) {
+  if (data) {
+    const { dataResult, dataType } = data;
+    const checkDataResult = getInputValue(_props.dataResult, "ARRAY");
+    const result = _props.dataResult ? [...checkDataResult, { ...dataResult }] : [{ ...dataResult }];
+    const getDataQuery = _props.dataQuery ? COLLECTION_QUERY_DROP(dataType, getValueStringWithKeyAndColon(_props.dataQuery) + "," + dataResult.id) : COLLECTION_QUERY_DROP(dataType, dataResult.id);
+
+    emit("dropData", {
+      dataResult: result,
+      dataType,
+      dataQuery: getDataQuery,
+    });
+  }
+}
+
+const selectComponent = () => {
+  emit("selectComponent");
+};
+
+const mapActivesToItems = (index: number) => {
+  if (LAYOUT_PARSE.value && LAYOUT_PARSE.value.listCss) {
+    return LAYOUT_PARSE.value.listCss[index] || {};
+  }
+  return {};
+};
+</script>
+
+<template>
+  <section 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"
+        :settings="{
+          template: SETTING_OPTIONS.TEMPLATE,
+          layout: SETTING_OPTIONS.LAYOUT,
+          label: { ...mapActivesToItems(Number(index)) },
+          dataResult: !isEmpty(component) ? { ...component } : null,
+        }"
+        :component="COMPONENT"
+        @drop-data="dropData"
+      />
+    </div>
+  </section>
+  <!-- <conllection
+    class="collection-container border-custom overflow-hidden"
+    :class="[LAYOUT_PARSE['div.collection-container_Class'], LAYOUT_PARSE['collection_Class']]"
+    @click="selectComponent"
+    :style="LAYOUT_PARSE['div.collection-container']"
+  >
+    <DynamicComponent
+      v-for="(component, index) in _dataResult"
+      :key="index"
+      :class="[index === 0 || index === 1 ? 'row-span-3' : index === 2 || index === 3 ? 'row-span-2' : 'row-span-1']"
+      :settings="{
+        template: SETTING_OPTIONS.TEMPLATE,
+        layout: SETTING_OPTIONS.LAYOUT,
+        label: { ...mapActivesToItems(Number(index)) },
+        dataResult: !isEmpty(component) ? { ...component } : null,
+      }"
+      :component="COMPONENT"
+      @drop-data="dropData"
+    />
+  </conllection> -->
+  <div v-if="LAYOUT_PARSE.styleClasses" v-html="LAYOUT_PARSE.styleClasses" style="display: none"></div>
+</template>
+
+<style lang="scss" scoped>
+.gallery {
+  column-count: 4;
+  -webkit-column-count: 4;
+  -moz-column-count: 4;
+  gap: 16px;
+
+  .wrap {
+    position: relative;
+    width: 100%;
+    &:nth-child(1),
+    &:nth-child(2) {
+      padding-top: 615px;
+    }
+    &:nth-child(3),
+    &:nth-child(5) {
+      padding-top: 358px;
+    }
+
+    &:nth-child(4),
+    &:nth-child(6) {
+      margin-top: 16px;
+      padding-top: 241px;
+    }
+
+    & > .abc {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      padding-bottom: 30px;
+      // margin: 10px 0;
+    }
+  }
+  .row-span-3 {
+    // grid-row: span 3 / span 3;
+    // height: 585px;
+
+    // margin: 10px 0;
+    // &:nth-child(1) {
+    //   background-color: red;
+    // }
+    // &:nth-child(2) {
+    //   background-color: yellow;
+    // }
+  }
+  .row-span-2 {
+    // margin: 10px 0;
+    // grid-row: span 2 / span 2;
+    // height: 328px;
+    // background-color: aqua;
+    // .basic-article {
+    // }
+  }
+  .row-span-1 {
+    // grid-row: span 1 / span 1;
+    // height: 211px;
+    // background-color: green;
+
+    // .basic-article {
+    // }
+  }
+}
+
+.image img {
+  height: auto;
+  width: 100%;
+}
+.collection-container {
+  // display: grid;
+  // grid-template-columns: repeat(4, 1fr);
+  // grid-template-rows: repeat(3, 1fr);
+  gap: 20px;
+  column-count: 4;
+}
+</style>

components/dynamic-page/page-component/templates/collections/index.ts

@@ -1 +1,2 @@
 export { default as Article_Collection } from './articles/index.vue'
+export { default as Category_Collection } from './categories/index.vue'

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

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { enumPageComponentTemplate, enumPageComponentKey, enumPageComponentLayouts } from "@/definitions/enum";
-import { Article_Collection } from "./index";
+import { Article_Collection, Category_Collection } from "./index";
 
 const _props = defineProps<{
   settings: any;
@@ -9,6 +9,7 @@ const _props = defineProps<{
 }>();
 const definedDynamicComponent: Record<string, any> = {
   [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["ARTICLE"]]: Article_Collection,
+  [enumPageComponentTemplate[enumPageComponentKey.COLLECTION]["CATEGORY"]]: Category_Collection,
 };
 
 const getCurrentComponent = computed(() => _props.settings.template);

components/dynamic-page/page-component/templates/navigations/bottoms/Default.vue

@@ -6,7 +6,7 @@ import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/
 import { buildTree } from "@/utils/recusive";
 
 const _props = defineProps<{
-  content?: any[];
+  content?: any;
   component?: any;
 }>();
 </script>

components/dynamic-page/page-component/templates/navigations/directions/Default.vue

@@ -4,7 +4,7 @@ import DynamicComponent from "~/components/dynamic-page/page-component/templates
 import { getInputValue } from "@/utils/parseSQL";
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   component?: any;
 }>();

components/dynamic-page/page-component/templates/navigations/tops/Default.vue

@@ -3,7 +3,7 @@ import { buildTree } from "@/utils/recusive";
 import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
 
 const _props = defineProps<{
-  content?: any[];
+  content?: any;
   component?: any;
 }>();
 

components/dynamic-page/page-component/templates/sections/articles/Default.vue

@@ -10,7 +10,7 @@ const store = reactive({
 });
 
 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
   dataQuery?: string;
   component?: any;
   label?: any;

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

@@ -150,7 +150,6 @@ const SETTING_OPTIONS = computed(() => {
   return _setting_options;
 });
 
-
 const CLASS_FOR_SECTION = computed(() => {
   let _classForSection = {};
   switch (props.layout) {
@@ -278,7 +277,7 @@ const mapActivesToItems = (index: number) => {
   <div class="section_layout border-custom" :class="[CLASS_FOR_SECTION.section_layout]" :style="LAYOUT_PARSE['div.section_layout']">
     <div
       class="section_child"
-      v-for="(position, index) in props.content || Array(SETTING_OPTIONS.MAX_ELEMENT).fill({})"
+      v-for="(position, index) in props.content || Array(SETTING_OPTIONS?.MAX_ELEMENT).fill({})"
       :key="index"
       :class="['border-custom', CLASS_FOR_SECTION[index]]"
       :style="mapActivesToItems(index)['div.section_child']"
@@ -298,6 +297,20 @@ const mapActivesToItems = (index: number) => {
 }
 .section_layout {
   display: grid;
+  position: relative;
+
+  .section_child {
+    z-index: 1;
+  }
+  .attributeBackground {
+    position: absolute;
+    height: 100%;
+    z-index: 0;
+    display: none;
+    left: -50vw;
+    width: 150vw;
+  }
+
   &.smartphone_layout {
     grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
   }
@@ -321,6 +334,24 @@ const mapActivesToItems = (index: number) => {
   &.six_col_layout {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }
+  &.seven_col_layout {
+    grid-template-columns: repeat(7, minmax(0, 1fr));
+  }
+  &.eight_col_layout {
+    grid-template-columns: repeat(8, minmax(0, 1fr));
+  }
+  &.nine_col_layout {
+    grid-template-columns: repeat(9, minmax(0, 1fr));
+  }
+  &.ten_col_layout {
+    grid-template-columns: repeat(10, minmax(0, 1fr));
+  }
+  &.eleven_col_layout {
+    grid-template-columns: repeat(11, minmax(0, 1fr));
+  }
+  &.twelve_col_layout {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
   .col-span-2 {
     grid-column: span 2 / span 2;
   }
@@ -330,6 +361,30 @@ const mapActivesToItems = (index: number) => {
   .col-span-4 {
     grid-column: span 4 / span 4;
   }
+  .col-span-5 {
+    grid-column: span 5 / span 5;
+  }
+  .col-span-6 {
+    grid-column: span 6 / span 6;
+  }
+  .col-span-7 {
+    grid-column: span 7 / span 7;
+  }
+  .col-span-8 {
+    grid-column: span 8 / span 8;
+  }
+  .col-span-9 {
+    grid-column: span 9 / span 9;
+  }
+  .col-span-10 {
+    grid-column: span 10 / span 10;
+  }
+  .col-span-11 {
+    grid-column: span 11 / span 11;
+  }
+  .col-span-12 {
+    grid-column: span 12 / span 12;
+  }
   .border-custom {
     border-color: #e5e5e5 !important;
   }