nocodb/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

<script lang="ts" setup>
import type { Ref } from '@vue/reactivity'
import {
  ActiveViewInj,
  IsLockedInj,
  IsPublicInj,
  LockType,
  MetaInj,
  extractSdkResponseErrorMsg,
  iconMap,
  inject,
  message,
  ref,
  useI18n,
  useMenuCloseOnEsc,
  useNuxtApp,
  useProject,
  useSmartsheetStoreOrThrow,
  useUIPermission,
} from '#imports'

const { t } = useI18n()

const sharedViewListDlg = ref(false)

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

const isView = false

const { $api, $e } = useNuxtApp()

const { isSqlView } = useSmartsheetStoreOrThrow()

const selectedView = inject(ActiveViewInj, ref())

const isLocked = inject(IsLockedInj, ref(false))

const showWebhookDrawer = ref(false)

const showApiSnippetDrawer = ref(false)

const showErd = ref(false)

type QuickImportDialogType = 'csv' | 'excel' | 'json'

// TODO: add 'json' when it's ready
const quickImportDialogTypes: QuickImportDialogType[] = ['csv', 'excel']

const quickImportDialogs: Record<(typeof quickImportDialogTypes)[number], Ref<boolean>> = quickImportDialogTypes.reduce(
  (acc: any, curr) => {
    acc[curr] = ref(false)
    return acc
  },
  {},
) as Record<QuickImportDialogType, Ref<boolean>>

const { isUIAllowed } = useUIPermission()

useProject()

const meta = inject(MetaInj, ref())

const currentBaseId = computed(() => meta.value?.base_id)

/*
const Icon = computed(() => {
  switch (selectedView.value?.lock_type) {
    case LockType.Personal:
      return iconMap.account
    case LockType.Locked:
      return iconMap.lock
    case LockType.Collaborative:
    default:
      return iconMap.users
  }
})
*/

const lockType = computed(() => (selectedView.value?.lock_type as LockType) || LockType.Collaborative)

async function changeLockType(type: LockType) {
  $e('a:grid:lockmenu', { lockType: type })

  if (!selectedView.value) return

  if (type === 'personal') {
    // Coming soon
    return message.info(t('msg.toast.futureRelease'))
  }
  try {
    selectedView.value.lock_type = type
    await $api.dbView.update(selectedView.value.id as string, {
      lock_type: type,
    })

    message.success(`Successfully Switched to ${type} view`)
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

const open = ref(false)

useMenuCloseOnEsc(open)
</script>

<template>
  <div>
    <a-dropdown v-model:visible="open" :trigger="['click']" overlay-class-name="nc-dropdown-actions-menu" placement="bottomLeft">
      <a-button v-e="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn !border-0 !rounded-md !py-1 !px-2">
        <MdiDotsHorizontal class="!w-4 !h-4" />
      </a-button>

      <template #overlay>
        <a-menu class="ml-6 !text-sm !px-0 !py-2 !rounded" data-testid="toolbar-actions" @click="open = false">
          <a-menu-item-group>
            <a-sub-menu
              v-if="isUIAllowed('view-type') && false"
              key="lock-type"
              class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
            >
              <template #title>
                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                  <LazySmartsheetToolbarLockType hide-tick :type="lockType" />

                  <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 ) text-gray-400" />
                </div>
              </template>

              <template #expandIcon></template>
              <a-menu-item @click="changeLockType(LockType.Collaborative)">
                <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
              </a-menu-item>

              <a-menu-item @click="changeLockType(LockType.Locked)">
                <LazySmartsheetToolbarLockType :type="LockType.Locked" />
              </a-menu-item>

              <a-menu-item @click="changeLockType(LockType.Personal)">
                <LazySmartsheetToolbarLockType :type="LockType.Personal" />
              </a-menu-item>
            </a-sub-menu>

            <a-menu-divider />

            <a-sub-menu key="download">
              <template #title>
                <!--                Download -->
                <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                  <component :is="iconMap.cloudDownload" class="text-gray-500 group-hover:text-accent" />
                  {{ $t('general.download') }}
                  <div class="flex-1" />

                  <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 ) text-gray-400" />
                </div>
              </template>

              <template #expandIcon></template>

              <LazySmartsheetToolbarExportSubActions />
            </a-sub-menu>

            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView && !isSqlView">
              <a-sub-menu key="upload">
                <!--                Upload -->
                <template #title>
                  <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                    <component :is="iconMap.upload" class="text-gray-500 group-hover:text-accent" />
                    {{ $t('general.upload') }}
                    <div class="flex-1" />

                    <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 ) text-gray-400" />
                  </div>
                </template>

                <template #expandIcon></template>
                <template v-for="(dialog, type) in quickImportDialogs">
                  <a-menu-item v-if="isUIAllowed(`${type}Import`) && !isView && !isPublicView" :key="type">
                    <div
                      v-e="[`a:actions:upload-${type}`]"
                      class="nc-project-menu-item"
                      :class="{ disabled: isLocked }"
                      @click="!isLocked ? (dialog.value = true) : {}"
                    >
                      <component :is="iconMap.upload" class="text-gray-500" />
                      {{ `${$t('general.upload')} ${type.toUpperCase()}` }}
                      <div class="flex items-center text-gray-400"><MdiAlpha />version</div>
                    </div>
                  </a-menu-item>
                </template>
              </a-sub-menu>
            </template>
          </a-menu-item-group>

          <a-sub-menu
            v-if="isUIAllowed('view-type')"
            key="lock-type"
            class="scrollbar-thin-dull min-w-50 max-h-90vh overflow-auto !py-0"
          >
            <template #title>
              <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group px-0 !py-0">
                <LazySmartsheetToolbarLockType hide-tick :type="lockType" />

                <component :is="iconMap.arrowRight" class="transform group-hover:(scale-115 text-accent) text-gray-400" />
              </div>
            </template>

            <template #expandIcon></template>
            <a-menu-item @click="changeLockType(LockType.Collaborative)">
              <LazySmartsheetToolbarLockType :type="LockType.Collaborative" />
            </a-menu-item>

            <a-menu-item @click="changeLockType(LockType.Locked)">
              <LazySmartsheetToolbarLockType :type="LockType.Locked" />
            </a-menu-item>

            <a-menu-item @click="changeLockType(LockType.Personal)">
              <LazySmartsheetToolbarLockType :type="LockType.Personal" />
            </a-menu-item>
          </a-sub-menu>
        </a-menu>
      </template>
    </a-dropdown>

    <template v-if="currentBaseId">
      <LazyDlgQuickImport
        v-for="tp in quickImportDialogTypes"
        :key="tp"
        v-model="quickImportDialogs[tp].value"
        :import-type="tp"
        :base-id="currentBaseId"
        :import-data-only="true"
      />
    </template>

    <LazyWebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />

    <LazySmartsheetToolbarErd v-model="showErd" />

    <a-modal
      v-model:visible="sharedViewListDlg"
      :class="{ active: sharedViewListDlg }"
      :title="$t('activity.listSharedView')"
      width="max(900px,60vw)"
      :footer="null"
      wrap-class-name="nc-modal-shared-view-list"
    >
      <LazySmartsheetToolbarSharedViewList v-if="sharedViewListDlg" />
    </a-modal>

    <LazySmartsheetApiSnippet v-model="showApiSnippetDrawer" />
  </div>
</template>

<style scoped>
:deep(.ant-dropdown-menu-submenu-title) {
  @apply py-0;
}

:deep(.ant-dropdown-menu-item-group-title) {
  @apply hidden;
}
</style>