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

99 lines
2.5 KiB
Vue
Raw Normal View History

<template>
2023-05-09 20:53:50 +08:00
<div class="w-[216px] h-full border rounded bg-sn-white flex flex-col right-0 absolute navigator-container">
<div class="p-3 flex items-center">
<i class="fas fa-bars cursor-pointer"></i>
<div class="font-bold text-base p-2">
{{ i18n.t('navigator.title') }}
</div>
<i @click="$emit('navigator:colapse')" class="fas fa-times ml-auto cursor-pointer"></i>
</div>
<perfect-scrollbar class="grow py-4 relative">
<NavigatorItem v-for="item in sortedMenuItems"
:key="item.id"
:currentItemId="currentItemId"
:item="item"
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,
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) => {
if (a.name < b.name) {
return -1;
}
if (a.name > b.name) {
return 1;
}
return 0;
});
}
},
created() {
2023-04-21 21:25:52 +08:00
this.changePage();
$(document).on('turbolinks:load', () => {
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
})
}
},
}
</script>