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

<script setup lang="ts">
import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
import type { Ref } from 'vue'
import { useUIPermission } from '#imports'
import SmartsheetGrid from '../smartsheet/Grid.vue'
import {
  ActiveViewInj,
  FieldsInj,
  IsFormInj,
  IsLockedInj,
  MetaInj,
  OpenNewRecordFormHookInj,
  ReloadViewDataHookInj,
  ReloadViewMetaHookInj,
  TabMetaInj,
  computed,
  createEventHook,
  provide,
  ref,
  toRef,
  useMetas,
  useProvideKanbanViewStore,
  useProvideSmartsheetStore,
} from '#imports'
import type { TabItem } from '~/lib'

const props = defineProps<{
  activeTab: TabItem
}>()

const { metas } = useMetas()

const activeTab = toRef(props, 'activeTab')

const activeView = ref()

const fields = ref<ColumnType[]>([])

const meta = computed<TableType | undefined>(() => activeTab.value && metas.value[activeTab.value.id!])

const reloadEventHook = createEventHook()

const { isGallery, isGrid, isForm, isKanban, isLocked, nestedFilters, sorts } = useProvideSmartsheetStore(activeView, meta)

const openNewRecordFormHook = createEventHook()

const reloadViewMetaEventHook = createEventHook()

useProvideKanbanViewStore(meta, activeView)

const { isUIAllowed } = useUIPermission()

/** keep view level state in tabMeta and restore on view change */
watch(nestedFilters, (newFilters) => {
  activeTab.value.state = activeTab.value.state || new Map()
  if (!activeTab.value.state.has(activeView.value.id)) {
    activeTab.value.state.set(activeView.value.id, new Map())
  }
  activeTab.value.state.get(activeView.value.id)!.set('filters', newFilters)
})

watch(sorts, (newSorts) => {
  activeTab.value.state = activeTab.value.state || new Map()
  if (!activeTab.value.state.has(activeView.value.id)) {
    activeTab.value.state.set(activeView.value.id, new Map())
  }
  activeTab.value.state.get(activeView.value.id)!.set('sorts', newSorts)
})

watch(activeView, (newView: ViewType) => {
  if(!newView || !activeTab.value?.state?.get(newView.id as string)) return

  if (
    activeTab.value?.state?.get(newView.id as string)?.has('filters') &&
    !isUIAllowed('filterSync') &&
    !isUIAllowed('filterChildrenRead')
  ) {
    nestedFilters.value = activeTab.value?.state?.get(newView.id as string)?.get('filters') || []
  }
  if (activeTab.value?.state?.get(newView.id as string)?.has('sorts') && !isUIAllowed('sortSync')) {
    nestedFilters.value = activeTab.value?.state?.get(newView.id as string)?.get('sorts') || []
  }
})

// todo: move to store
provide(MetaInj, meta)
provide(ActiveViewInj, activeView)
provide(IsLockedInj, isLocked)
provide(ReloadViewDataHookInj, reloadEventHook)
provide(ReloadViewMetaHookInj, reloadViewMetaEventHook)
provide(OpenNewRecordFormHookInj, openNewRecordFormHook)
provide(FieldsInj, fields)
provide(IsFormInj, isForm)
provide(TabMetaInj, activeTab)

watch(nestedFilters, (newFilters) => {
  activeTab.value.state = activeTab.value.state || {}
  activeTab.value.state[activeView.value.id] = newFilters
})

watch(activeView, (newView: ViewType) => {
  nestedFilters.value = activeTab.value.state?.[newView.id!]
})
</script>

<template>
  <div class="nc-container flex h-full">
    <div class="flex flex-col h-full flex-1 min-w-0">
      <LazySmartsheetToolbar />

      <Transition name="layout" mode="out-in">
        <template v-if="meta">
          <div class="flex flex-1 min-h-0">
            <div v-if="activeView" class="h-full flex-1 min-w-0 min-h-0 bg-gray-50">
              <LazySmartsheetGrid v-if="isGrid" />

              <LazySmartsheetGallery v-else-if="isGallery" />

              <LazySmartsheetForm v-else-if="isForm && !$route.query.reload" />

              <LazySmartsheetKanban v-else-if="isKanban" />
            </div>
          </div>
        </template>
      </Transition>
    </div>

    <LazySmartsheetSidebar v-if="meta" class="nc-right-sidebar" />
  </div>
</template>

<style scoped>
:deep(.nc-right-sidebar.ant-layout-sider-collapsed) {
  @apply !w-0 !max-w-0 !min-w-0 overflow-x-hidden;
}
</style>