minhnt-dev: navigation
This commit is contained in:
MoreStrive
@@ -27,6 +27,7 @@ const findDataPosition = computed(() => {
|
||||
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
|
||||
return component.settings?.template === enumPageComponentTemplates.NAVIGATION && component.settings?.layout === defineTypeRecusive.TOP_NAVIGATION
|
||||
});
|
||||
console.log(result)
|
||||
break;
|
||||
case defineTypeRecusive.BOTTOM_NAVIGATION:
|
||||
result = currentPage.value.components && currentPage.value.components.find((component: any) => {
|
||||
@@ -37,13 +38,9 @@ const findDataPosition = computed(() => {
|
||||
result = {};
|
||||
break;
|
||||
}
|
||||
console.log(result)
|
||||
return result;
|
||||
});
|
||||
|
||||
// const selectComponent = (data: any) => {
|
||||
// store.page.selectComponent(data)
|
||||
// }
|
||||
console.log(findDataPosition, 'findDataPosition')
|
||||
</script>
|
||||
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
export { default as BasicCategories } from './categories/BasicCategories.vue'
|
||||
export { default as CollectionPaging } from './pageCategories/collection_page.vue'
|
||||
|
||||
|
||||
export { default as Dynamic_Other } from './other/index.vue'
|
||||
export { default as Dynamic_Section } from './sections/index.vue';
|
||||
export { default as Dynamic_Advertising } from './advertising/index.vue'
|
||||
|
||||
@@ -13,7 +13,7 @@ const definedDynamicComponent: Record<string, any> = {
|
||||
[enumPageComponentTemplates.SECTION]: Dynamic_Section,
|
||||
[enumPageComponentTemplates.OTHER]: Dynamic_Other,
|
||||
[enumPageComponentTemplates.ADVERTISING]: Dynamic_Advertising,
|
||||
[enumPageComponentTemplates.NONE]: Dynamic_Navigation,
|
||||
[enumPageComponentTemplates.NAVIGATION]: Dynamic_Navigation,
|
||||
};
|
||||
// console.log(_props.settings.template, 'template')
|
||||
const getCurrentComponent = computed(() => `${_props.settings.template}`);
|
||||
|
||||
+24
-46
@@ -1,44 +1,27 @@
|
||||
<script lang="ts" setup>
|
||||
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
|
||||
// import RecusiveSection from "@/components/cms/page-section/RecusiveSection.vue";
|
||||
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
|
||||
import RecusiveSection from "@/components/dynamic-page/page-section/RecusiveSection.vue";
|
||||
import { enumPageComponentStaticChild, enumPageComponentLayouts } from "@/definitions/enum";
|
||||
|
||||
// const props = defineProps<{
|
||||
// records?: any[]
|
||||
// component: any;
|
||||
// }>();
|
||||
const props = defineProps<{
|
||||
records?: any[]
|
||||
component: any;
|
||||
}>();
|
||||
|
||||
// const store = reactive({
|
||||
// page: useCmsPageStore(),
|
||||
// section: usePageSectionStore(),
|
||||
// component: usePageComponentStore(),
|
||||
// });
|
||||
|
||||
// const globalState = ref({})
|
||||
// const setGlobalState = (id: any) => {
|
||||
// globalState.value[id] = !globalState.value[id];
|
||||
// }
|
||||
|
||||
// const selectNavigationComponent = () => {
|
||||
// store.page.selectComponentNavigation(props.component);
|
||||
// }
|
||||
|
||||
// const dropSection = (event: any, child: any) => {
|
||||
// if (event.dataTransfer.getData("section")) {
|
||||
// const section = JSON.parse(event.dataTransfer.getData("section"));
|
||||
// store.component.updateNavigationItemInfor(props.component, child, { data: section.id });
|
||||
// store.section.updatePublishedSectionInGeneralPage(section.id, 9999999999);
|
||||
// }
|
||||
// };
|
||||
const globalState = ref({})
|
||||
const setGlobalState = (id: any) => {
|
||||
globalState.value[id] = !globalState.value[id];
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
ábsabda
|
||||
<!-- <div class="navigation-container d-flex gap-4 justify-content-center align-items-center">
|
||||
<div class="navigation-container flex gap-4 justify-center items-center">
|
||||
<div v-for="(record) in props.records" :key="record.id" class="navigation-branch cursor-pointer">
|
||||
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="" @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
|
||||
<div class="">{{ record?.title }}</div>
|
||||
</nuxt-link>
|
||||
<div class="navigation-item submenu-container dropdown-container">
|
||||
<RecusiveNavItem :records="record.childs" />
|
||||
</div>
|
||||
@@ -46,37 +29,32 @@
|
||||
</template>
|
||||
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
|
||||
<div class="navigation-submenu">
|
||||
<div class="position-relative ps-3">
|
||||
<span class="position-absolute " style="left: -10px; top: -7px" @click="() => setGlobalState(record.id)">
|
||||
<i v-if="!globalState[record.id]" class="ri-eye-2-line fs-3"></i>
|
||||
<i v-else class="ri-eye-close-line fs-3"></i>
|
||||
</span>
|
||||
<span @click="selectNavigationComponent">{{ record?.title }}</span>
|
||||
</div>
|
||||
<div class="full-layout dropdown-container" :class="[!globalState[record.id] && 'show-menu']">
|
||||
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
|
||||
<div class="">{{ record?.title }}</div>
|
||||
</nuxt-link>
|
||||
<div class="full-layout dropdown-container">
|
||||
<template v-if="record.data">
|
||||
<div class="p-2">
|
||||
<RecusiveSection type="section" :id="record.data" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="Kéo Section vào đây" @dragover.prevent @drop.stop.prevent="dropSection($event, record)" />
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="navigation-item" @click="selectNavigationComponent">{{ record?.title }}</div>
|
||||
<nuxt-link class="hover:text-primary-600 transition-all duration-300" :to="`/${record.slug}`">
|
||||
<div class="navigation-item">{{ record?.title }}</div>
|
||||
</nuxt-link>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.navigation-branch {
|
||||
.navigation-submenu {
|
||||
position: relative;
|
||||
padding: 15px 5px;
|
||||
padding: 12px 5px;
|
||||
&:hover {
|
||||
> .dropdown-container {
|
||||
opacity: 1;
|
||||
|
||||
-160
@@ -1,160 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
// import { nanoid } from "nanoid"
|
||||
// import RecusiveTopChild from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveTopChild.vue";
|
||||
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
|
||||
// const props = defineProps<{
|
||||
// records?: any[]
|
||||
// currentComponent?: any
|
||||
// }>()
|
||||
|
||||
// const store = reactive({
|
||||
// page: useCmsPageStore(),
|
||||
// section: usePageSectionStore(),
|
||||
// component: usePageComponentStore(),
|
||||
// });
|
||||
|
||||
// const showChildItem = ref<boolean>(false)
|
||||
|
||||
// const toggleStatusBar = (type: "section", id?: any) => {
|
||||
// // if (type === "section") {
|
||||
// // store.section.setCurrentSection(id);
|
||||
// // } else {
|
||||
// // store.section.setCurrentSection(null);
|
||||
// // }
|
||||
// // store.section.toggleStatusSectionBar(true);
|
||||
// };
|
||||
|
||||
// const removeStaticRecord = (currentChild: any) => {
|
||||
// store.component.removeChildtNavigation(props.currentComponent, currentChild);
|
||||
// };
|
||||
|
||||
// const addChildRecord = (currentChild: any) => {
|
||||
// const newChildItem = {
|
||||
// id: nanoid(10),
|
||||
// title: 'Mới mới',
|
||||
// slug: '',
|
||||
// childs: [],
|
||||
// parentId: currentChild.id,
|
||||
// data: null,
|
||||
// typeChild: enumPageComponentStaticChild.DEFAULT,
|
||||
// }
|
||||
// store.component.setChildForComponentNavigation(props.currentComponent, newChildItem);
|
||||
// }
|
||||
|
||||
// const setNavigationItem = (currentChild: any) => {
|
||||
// console.log(currentChild)
|
||||
// store.component.setNavigationItem(currentChild);
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
ádasd
|
||||
<!-- <div class="lists-record">
|
||||
<div v-for="(record) in props.records" :key="record.id">
|
||||
<template v-if="record && record.childs && record.childs.length > 0 && record.typeChild === enumPageComponentStaticChild.DEFAULT">
|
||||
<div class="record-item child">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<span @click="() => showChildItem = !showChildItem" class="cursor-pointer">
|
||||
<i :class="[showChildItem ? 'ri-arrow-down-s-line' : 'ri-arrow-right-s-line']"></i>
|
||||
</span>
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ps-4 mt-2" :class="[showChildItem ? 'is-show-item' : 'is-hidden-item']">
|
||||
<RecusiveTopChild :records="record.childs" :currentComponent="props.currentComponent" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="record.typeChild === enumPageComponentStaticChild.LAYOUT">
|
||||
<div class="record-item child">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="record-item">
|
||||
<div class="record-infor d-flex align-items-center gap-2">
|
||||
<h6>{{ record.title || '' }}</h6>
|
||||
</div>
|
||||
<div class="record-action">
|
||||
<span @click="addChildRecord(record)"><i class="ri-add-line"></i></span>
|
||||
<span @click="setNavigationItem(record)"><i class="ri-eye-line"></i></span>
|
||||
<span @click="removeStaticRecord(record)"><i class="ri-delete-bin-7-line"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div> -->
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lists-record {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
gap: 14px;
|
||||
|
||||
.record-item {
|
||||
padding: 3px 15px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: move;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
&.child {
|
||||
padding: 3px 15px 3px 10px;
|
||||
}
|
||||
&:hover {
|
||||
> .record-action {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
> .record-action {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
gap: 10px;
|
||||
font-size: 18px;
|
||||
opacity: 0;
|
||||
transition: 0.3s;
|
||||
color: #7e7e7e;
|
||||
|
||||
> span:hover {
|
||||
color: #409eff;
|
||||
transition: 0.3s all;
|
||||
}
|
||||
}
|
||||
> .record-infor {
|
||||
span i {
|
||||
font-size: 18px;
|
||||
cursor: point;
|
||||
}
|
||||
h6 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.is-show-item {
|
||||
height: auto;
|
||||
}
|
||||
.is-hidden-item {
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,86 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
// import { isEmpty } from "lodash";
|
||||
// import { nanoid } from "nanoid"
|
||||
// import { enumPageComponentTemplates, enumPageComponentStaticChild } from "@/definitions/enum";
|
||||
// import DynamicComponent from "~/components/cms/page-component/templates/index.vue";
|
||||
// import { COLLECTION_QUERY_DROP, getValueStringWithKeyAndColon, getInputValue } from "@/utils/cms/page/parseSQL";
|
||||
// import { buildTree } from "@/utils/cms/page/recusive";
|
||||
// import RecusiveNavItem from "@/components/cms/page-component/templates/navigations/components/RecusiveNavItem.vue";
|
||||
import DynamicComponent from "~/components/dynamic-page/page-component/templates/index.vue";
|
||||
import { buildTree } from "@/utils/recusive";
|
||||
import RecusiveNavItem from "@/components/dynamic-page/page-component/templates/navigations/components/RecusiveNavItem.vue";
|
||||
|
||||
// const emit = defineEmits(["selectComponent"]);
|
||||
|
||||
// const _props = defineProps<{
|
||||
// content?: any[];
|
||||
// component?: any;
|
||||
// }>();
|
||||
|
||||
// const store = reactive({
|
||||
// page: useCmsPageStore(),
|
||||
// section: usePageSectionStore(),
|
||||
// component: usePageComponentStore(),
|
||||
// });
|
||||
|
||||
// const SETTING_OPTIONS = {
|
||||
// MAX_ELEMENT: 10,
|
||||
// };
|
||||
|
||||
// const _dataResult = computed(() => {
|
||||
// let _components = Array(SETTING_OPTIONS.MAX_ELEMENT).fill({});
|
||||
// const result = getInputValue(_props.content, "ARRAY");
|
||||
// result &&
|
||||
// result.length > 0 &&
|
||||
// _components.map((_: any, index: any) => {
|
||||
// _components[index] = result[index] || null;
|
||||
// });
|
||||
// return _components;
|
||||
// });
|
||||
|
||||
// async function dropData(event: any, data: any) {
|
||||
// if (event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`)) {
|
||||
// const data = event.dataTransfer.getData(`${enumPageComponentTemplates.CATEGORY}`);
|
||||
// const { dataResult } = JSON.parse(data);
|
||||
// const dataInsert = {
|
||||
// id: nanoid(10),
|
||||
// title: dataResult.title,
|
||||
// slug: dataResult.code,
|
||||
// childs: [],
|
||||
// parentId: null,
|
||||
// data: null,
|
||||
// typeChild: enumPageComponentStaticChild.DEFAULT,
|
||||
// };
|
||||
// const getJSonContent = JSON.parse(_props.content)
|
||||
// const checkDataResult = getInputValue(getJSonContent, "ARRAY");
|
||||
// const result: any = _props.content ? [...checkDataResult, { ...dataInsert }] : [{ ...dataInsert }];
|
||||
// store.component.setStaticData(result, _props.component.id);
|
||||
// }
|
||||
// }
|
||||
const _props = defineProps<{
|
||||
content?: any[];
|
||||
component?: any;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <nav>
|
||||
<div class="d-flex gap-3 justify-content-center align-items-center">
|
||||
<RecusiveNavItem :records="content && buildTree(content)" :component="_props.component" />
|
||||
|
||||
<div class="empty" @dragover.prevent @drop.stop.prevent="dropData">
|
||||
<i class="ri-add-fill"></i>
|
||||
</div>
|
||||
<nav class="border-y-1px border-y-[#dddddd] border-solid">
|
||||
<div class="">
|
||||
<RecusiveNavItem :records="_props.content && buildTree(_props.content)" :component="_props.component" />
|
||||
</div>
|
||||
</nav> -->
|
||||
ád
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.empty {
|
||||
width: 100px;
|
||||
min-height: 20px;
|
||||
border-radius: 4px;
|
||||
background: #409eff;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
color: white;
|
||||
margin: 5px 0px;
|
||||
}
|
||||
</style>
|
||||
|
||||
+1
-1
@@ -14,7 +14,7 @@ export function buildTree(data: any) {
|
||||
}
|
||||
});
|
||||
|
||||
return _array.filter(item => !item.parentId);
|
||||
return _array.filter((item : any) => !item.parentId);
|
||||
} else {
|
||||
return []
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user