mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.9 KiB
71 lines
1.9 KiB
<script setup lang="ts"> |
|
import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'nocodb-sdk' |
|
import MenuTop from './MenuTop.vue' |
|
import MenuBottom from './MenuBottom.vue' |
|
import { inject, provide, ref, useApi, useViews, watch } from '#imports' |
|
import { ActiveViewInj, MetaInj, ViewListInj } from '~/context' |
|
|
|
const meta = inject(MetaInj, ref()) |
|
|
|
const activeView = inject(ActiveViewInj, ref()) |
|
|
|
const { views, loadViews } = useViews(meta) |
|
|
|
const { api } = useApi() |
|
|
|
provide(ViewListInj, views) |
|
|
|
/** Sidebar visible */ |
|
const drawerOpen = inject('navDrawerOpen', ref(false)) |
|
|
|
/** View type to create from modal */ |
|
let viewCreateType = $ref<ViewTypes>() |
|
|
|
/** View title to create from modal (when duplicating) */ |
|
let viewCreateTitle = $ref('') |
|
|
|
/** is view creation modal open */ |
|
let modalOpen = $ref(false) |
|
|
|
/** Watch current views and on change set the next active view */ |
|
watch( |
|
views, |
|
(nextViews) => { |
|
if (nextViews.length) { |
|
activeView.value = nextViews[0] |
|
} |
|
}, |
|
{ immediate: true }, |
|
) |
|
|
|
/** Open view creation modal */ |
|
function openModal({ type, title = '' }: { type: ViewTypes; title: string }) { |
|
modalOpen = true |
|
viewCreateType = type |
|
viewCreateTitle = title |
|
} |
|
|
|
/** Handle view creation */ |
|
function onCreate(view: GridType | FormType | KanbanType | GalleryType) { |
|
views.value.push(view) |
|
activeView.value = view |
|
modalOpen = false |
|
} |
|
</script> |
|
|
|
<template> |
|
<a-layout-sider theme="light" class="shadow" :width="drawerOpen ? 0 : 250"> |
|
<div class="flex flex-col h-full"> |
|
<MenuTop @open-modal="openModal" @deleted="loadViews" @sorted="loadViews" /> |
|
<MenuBottom @open-modal="openModal" /> |
|
</div> |
|
|
|
<dlg-view-create v-if="views" v-model="modalOpen" :title="viewCreateTitle" :type="viewCreateType" @created="onCreate" /> |
|
</a-layout-sider> |
|
</template> |
|
|
|
<style scoped> |
|
:deep(.ant-menu-title-content) { |
|
@apply w-full; |
|
} |
|
</style>
|
|
|