init

2024-05-30 18:06:50 +07:00
parent 8ca31c6b18
commit 2aa5607c48
147 changed files with 5815 additions and 1 deletions
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
+import DynamicSection from "~/components/dynamic-page/page-section/templates/index.vue";
+
+const props = defineProps<{
+  type: string;
+  id: any;
+}>();
+
+import { useDynamicPageStore } from '~/stores/dynamic-page';
+const store = reactive({
+  dynamicPage: useDynamicPageStore(),
+});
+
+const { currentPage } = storeToRefs(useDynamicPageStore());
+
+const defineTypeRecusive = {
+  COMPONENT: "component",
+  SECTION: "section",
+};
+
+const findDataPosition = computed(() => {
+  let result = {};
+  switch (props.type) {
+    case defineTypeRecusive.COMPONENT:
+      result = currentPage.value.components && currentPage.value.components.find((component: any) => component.id === props.id);
+      break;
+    case defineTypeRecusive.SECTION:
+      result = currentPage.value.sections && currentPage.value.sections.find((section: any) => section.id === props.id);
+      break;
+    default:
+      result = {};
+      break;
+  }
+  return result;
+});
+</script>
+
+<template>
+  <div>
+    <template v-if="props.type === defineTypeRecusive.COMPONENT">
+      <DynamicComponent 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition.settings" 
+        :component="findDataPosition"
+      />
+      <div v-else class="empty"></div>
+    </template>
+    <template v-else-if="props.type === defineTypeRecusive.SECTION">
+      <DynamicSection 
+        v-if="findDataPosition && findDataPosition?.id" 
+        :settings="findDataPosition.settings" 
+        :content="findDataPosition.content ? JSON.parse(findDataPosition.content) : null" 
+        :section="findDataPosition"
+       />
+      <div v-else class="empty"></div>
+    </template>
+    <template v-else>
+      <div class="empty"></div>
+    </template>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.empty {
+  min-height: 100px;
+  border-radius: 6px;
+  background: #409eff;
+}
+</style>