nocodb/packages/nc-gui/components/smartsheet/Toolbar.vue

<script lang="ts" setup>
import {
  IsPublicInj,
  inject,
  ref,
  storeToRefs,
  useGlobal,
  useSharedView,
  useSmartsheetStoreOrThrow,
  useViewsStore,
} from '#imports'

const { isGrid, isGallery, isKanban, isMap, isCalendar } = useSmartsheetStoreOrThrow()

const isPublic = inject(IsPublicInj, ref(false))

const { isViewsLoading } = storeToRefs(useViewsStore())

const { isMobileMode } = useGlobal()

const containerRef = ref<HTMLElement>()

const isTab = ref(true)

const handleResize = () => {
  isTab.value = containerRef.value.offsetWidth > 810
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})

const { allowCSVDownload } = useSharedView()
</script>

<template>
  <div
    v-if="!isMobileMode || !isCalendar"
    ref="containerRef"
    class="nc-table-toolbar relative py-1 px-2.25 xs:(px-1) flex gap-2 items-center border-b border-gray-200 overflow-hidden xs:(min-h-14) max-h-[var(--topbar-height)] min-h-[var(--topbar-height)] z-7"
  >
    <template v-if="isViewsLoading">
      <a-skeleton-input :active="true" class="!w-44 !h-4 ml-2 !rounded overflow-hidden" />
    </template>
    <template v-else>
      <LazySmartsheetToolbarMappedBy v-if="isMap" />
      <LazySmartsheetToolbarCalendarRange v-if="isCalendar" />

      <LazySmartsheetToolbarFieldsMenu
        v-if="isGrid || isGallery || isKanban || isMap || isCalendar"
        :show-system-fields="false"
      />

      <LazySmartsheetToolbarStackedBy v-if="isKanban" />

      <LazySmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery || isKanban || isMap || isCalendar" />

      <LazySmartsheetToolbarGroupByMenu v-if="isGrid" />

      <LazySmartsheetToolbarSortListMenu v-if="isGrid || isGallery || isKanban || isCalendar" />

      <div v-if="isCalendar && isTab" class="flex-1" />
      <LazySmartsheetToolbarCalendarMode v-if="isCalendar" v-model:tab="isTab" />

      <template v-if="!isMobileMode">
        <LazySmartsheetToolbarRowHeight v-if="isGrid" />

        <!-- <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" /> -->

        <LazySmartsheetToolbarExport v-if="isPublic && allowCSVDownload" />

        <div class="flex-1" />
      </template>

      <LazySmartsheetToolbarSearchData
        v-if="isGrid || isGallery || isKanban"
        :class="{
          'shrink': !isMobileMode,
          'w-full': isMobileMode,
        }"
      />
    </template>
  </div>
</template>

<style scoped>
.nc-table-toolbar-mobile {
  @apply flex-wrap h-auto py-2;
}
</style>