scinote-web/app/javascript/vue/navigation/navigator.vue

104 lines
2.9 KiB
Vue
Raw Normal View History

<template>
2023-05-17 20:18:16 +08:00
<div class="w-[216px] ml-6 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="px-3 py-2 flex items-center relative leading-4">
2023-05-17 17:47:25 +08:00
<i class="sn-icon sn-icon-navigator"></i>
<div class="font-bold text-base pl-2">
{{ i18n.t('navigator.title') }}
</div>
2023-05-17 17:47:25 +08:00
<i @click="$emit('navigator:colapse')" class="sn-icon sn-icon-close ml-auto cursor-pointer absolute right-3 top-2"></i>
</div>
<perfect-scrollbar @ps-scroll-y="onScroll" ref="scrollContainer" class="grow py-4 relative px-3">
<NavigatorItem v-for="item in sortedMenuItems"
:key="item.id"
:currentItemId="currentItemId"
:item="item"
:firstLevel="true"
2023-04-26 16:24:50 +08:00
:reloadCurrentLevel="reloadCurrentLevel"
:reloadChildrenLevel="reloadChildrenLevel"
:archived="archived" />
2023-04-21 21:25:52 +08:00
</perfect-scrollbar>
</div>
</template>
<script>
import NavigatorItem from './navigator_item.vue'
export default {
name : 'NavigatorContainer',
components: {
NavigatorItem
},
data() {
return {
menuItems: [],
2023-04-21 21:25:52 +08:00
navigatorCollapsed: false,
navigatorUrl: null,
navigatorYScroll: 0,
currentItemId: null,
archived: null
}
},
2023-04-26 16:24:50 +08:00
props: {
reloadCurrentLevel: Boolean,
reloadChildrenLevel: Boolean
},
computed: {
sortedMenuItems() {
2023-04-26 16:24:50 +08:00
return this.menuItems.sort((a, b) => {
2023-05-11 18:38:54 +08:00
if (a.name.toLowerCase() < b.name.toLowerCase()) {
2023-04-26 16:24:50 +08:00
return -1;
}
2023-05-11 18:38:54 +08:00
if (a.name.toLowerCase() > b.name.toLowerCase()) {
2023-04-26 16:24:50 +08:00
return 1;
}
return 0;
});
}
},
created() {
2023-04-21 21:25:52 +08:00
this.changePage();
$(document).on('turbolinks:load', () => {
this.$refs.scrollContainer.$el.scrollTop = this.navigatorYScroll;
2023-04-21 21:25:52 +08:00
this.changePage();
if ($(`[navigator-item-id="${this.currentItemId}"]`).length === 0) {
this.loadTree();
}
});
},
watch: {
archived() {
this.loadTree();
2023-04-26 16:24:50 +08:00
},
reloadCurrentLevel: function() {
if (this.reloadCurrentLevel && (
this.currentItemId.length == 0 ||
this.menuItems.filter(item => item.id == this.currentItemId)
)) {
this.loadTree();
}
}
},
2023-04-21 21:25:52 +08:00
methods: {
changePage() {
this.navigatorUrl = $('#active_navigator_url').val();
this.currentItemId = $('#active_navigator_item').val();
this.archived = $('#active_navigator_archived').val() === 'true';
2023-04-21 21:25:52 +08:00
},
loadTree() {
if (!this.navigatorUrl) return;
$.get(this.navigatorUrl, {archived: this.archived}, (data) => {
this.menuItems = [];
this.$nextTick(() => {
this.menuItems = data.items;
});
2023-04-21 21:25:52 +08:00
})
},
onScroll({target}) {
this.navigatorYScroll = target.scrollTop;
},
2023-04-21 21:25:52 +08:00
},
}
</script>