Browse Source

mobile optimisations - work on merging right and left sidebar (WIP)

pull/4898/head
Daniel Spaude 2 years ago
parent
commit
e4f614fa3a
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
  1. 183
      packages/nc-gui/components/smartsheet/sidebar/mobile.vue
  2. 3
      packages/nc-gui/components/tabs/Smartsheet.vue

183
packages/nc-gui/components/smartsheet/sidebar/mobile.vue

@ -0,0 +1,183 @@
<script setup lang="ts">
import type { ViewType, ViewTypes } from 'nocodb-sdk'
import {
ActiveViewInj,
MetaInj,
computed,
inject,
ref,
resolveComponent,
useDialog,
useNuxtApp,
useRoute,
useRouter,
useSidebar,
useUIPermission,
useViews,
watch,
} from '#imports'
const meta = inject(MetaInj, ref())
const activeView = inject(ActiveViewInj, ref())
const { activeTab } = useTabs()
const { views, loadViews, isLoading } = useViews(meta)
const { lastOpenedViewMap } = useProject()
const setLastOpenedViewId = (viewId?: string) => {
if (viewId && activeTab.value?.id) {
lastOpenedViewMap.value[activeTab.value?.id] = viewId
}
}
const { isUIAllowed } = useUIPermission()
const { isMobileMode } = useGlobal()
const router = useRouter()
const route = useRoute()
const { $e } = useNuxtApp()
/** Sidebar visible */
const { isOpen } = useSidebar('nc-right-sidebar')
const sidebarCollapsed = computed(() => !isOpen.value || isMobileMode.value)
/** Sidebar ref */
const sidebar = ref()
/** Watch route param and change active view based on `viewTitle` */
watch(
[views, () => route.params.viewTitle],
([nextViews, viewTitle]) => {
const lastOpenedViewId = activeTab.value?.id && lastOpenedViewMap.value[activeTab.value?.id]
const lastOpenedView = nextViews.find((v) => v.id === lastOpenedViewId)
if (viewTitle) {
let view = nextViews.find((v) => v.title === viewTitle)
if (view) {
activeView.value = view
setLastOpenedViewId(activeView.value?.id)
} else {
/** search with view id and if found replace with title */
view = nextViews.find((v) => v.id === viewTitle)
if (view) {
router.replace({
params: {
viewTitle: view.title,
},
})
}
}
} else if (lastOpenedView) {
/** if active view is not found, set it to last opened view */
router.replace({
params: {
viewTitle: lastOpenedView.title,
},
})
} else {
if (nextViews?.length && activeView.value !== nextViews[0]) {
activeView.value = nextViews[0]
}
}
/** if active view is not found, set it to first view */
if (nextViews?.length && (!activeView.value || !nextViews.includes(activeView.value))) {
activeView.value = nextViews[0]
}
},
{ immediate: true },
)
/** Open delete modal */
function onOpenModal({
title = '',
type,
copyViewId,
groupingFieldColumnId,
}: {
title?: string
type: ViewTypes
copyViewId?: string
groupingFieldColumnId?: string
}) {
const isOpen = ref(true)
const { close } = useDialog(resolveComponent('DlgViewCreate'), {
'modelValue': isOpen,
title,
type,
meta,
'selectedViewId': copyViewId,
groupingFieldColumnId,
'views': views,
'onUpdate:modelValue': closeDialog,
'onCreated': async (view: ViewType) => {
closeDialog()
await loadViews()
router.push({ params: { viewTitle: view.title || '' } })
$e('a:view:create', { view: view.type })
},
})
function closeDialog() {
isOpen.value = false
close(1000)
}
}
</script>
<template>
<div>
FOO MOBILE
<a-layout-sider
ref="sidebar"
:collapsed="sidebarCollapsed"
collapsiple
collapsed-width="0"
width="0"
class="nc-view-sidebar relative shadow h-full w-full !flex-1 !min-w-0 !max-w-[150px] !w-[150px] lg:(!max-w-[250px] !w-[250px])"
theme="light"
>
<LazySmartsheetSidebarToolbar
class="min-h-[var(--toolbar-height)] max-h-[var(--toolbar-height)] flex items-center py-3 px-3 justify-between border-b-1"
/>
<div class="flex-1 flex flex-col min-h-0">
<GeneralOverlay v-if="!views.length" :model-value="isLoading" inline class="bg-gray-300/50">
<div class="w-full h-full flex items-center justify-center">
<a-spin />
</div>
</GeneralOverlay>
<LazySmartsheetSidebarMenuTop :views="views" @open-modal="onOpenModal" @deleted="loadViews" />
<template v-if="isUIAllowed('virtualViewsCreateOrEdit')">
<div class="!my-3 w-full border-b-1" />
<LazySmartsheetSidebarMenuBottom @open-modal="onOpenModal" />
</template>
</div>
</a-layout-sider>
</div>
</template>
<style scoped>
:deep(.ant-menu-title-content) {
@apply w-full;
}
:deep(.ant-layout-sider-children) {
@apply flex flex-col;
}
</style>

3
packages/nc-gui/components/tabs/Smartsheet.vue

@ -69,6 +69,7 @@ provide(
<template>
<div class="nc-container flex h-full">
<SmartsheetSidebarMobile v-if="meta && isMobileMode" class="nc-left-sidebar-mobile" />
<div class="flex flex-col h-full flex-1 min-w-0">
<LazySmartsheetToolbar />
@ -92,7 +93,7 @@ provide(
<LazySmartsheetExpandedFormDetached />
<!-- Lazy loading the sidebar causes issues when deleting elements, i.e. it appears as if multiple elements are removed when they are not -->
<SmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
<SmartsheetSidebar v-if="meta && !isMobileMode" class="nc-right-sidebar" />
</div>
</template>

Loading…
Cancel
Save