thainv-dev

2024-07-05 10:39:07 +07:00
parent 17036b77af
commit 5889e9af0e
16 changed files with 289 additions and 13 deletions
@@ -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 = {
@@ -2,7 +2,7 @@
 import { isEmpty } from "@/utils/lodash";

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
 }>();
 const SETTING_OPTIONS = {
  BREADCRUMB_MAX_ELEMENT: 3,
@@ -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;
 }>();
@@ -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;
 }>();
@@ -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;
@@ -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;
@@ -0,0 +1 @@
+export { default as Misses_Default } from './misses/Default.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>
@@ -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>
@@ -1 +1,2 @@
 export { default as Article_Collection } from './articles/index.vue'
+export { default as Category_Collection } from './categories/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);
@@ -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>
@@ -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;
 }>();
@@ -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;
 }>();

@@ -10,7 +10,7 @@ const store = reactive({
 });

 const _props = defineProps<{
-  dataResult?: any[];
+  dataResult?: any;
  dataQuery?: string;
  component?: any;
  label?: any;
				`@@ -0,0 +1 @@`
				`export { default as Misses_Default } from './misses/Default.vue'`