fix(gui-v2): hide options which is not relevant to sql view

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · a8d5861bc8
6 changed files with 37 additions and 22 deletions
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
@ -9,6 +9,7 @@ import {
  ref,
  useNuxtApp,
  useProject,
+  useSmartsheetStoreOrThrow,
  useUIPermission,
 } from '#imports'
 import { LockType } from '~/lib'
@ -70,6 +71,8 @@ async function changeLockType(type: LockType) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
 }
+
+const { isSqlView } = useSmartsheetStoreOrThrow()
 </script>

 <template>
@ -134,7 +137,7 @@ async function changeLockType(type: LockType) {
              <template #expandIcon></template>
              <SmartsheetToolbarExportSubActions />
            </a-sub-menu>
-            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView">
+            <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView && !isSqlView">
              <a-sub-menu key="upload">
                <template #title>
                  <div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group">
@ -177,7 +180,7 @@ async function changeLockType(type: LockType) {
                {{ $t('activity.listSharedView') }}
              </div>
            </a-menu-item>
-            <a-menu-item>
+            <a-menu-item v-if="!isSqlView">
              <div
                v-if="isUIAllowed('webhook') && !isView && !isPublicView"
                v-t="['c:actions:webhook']"
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@ -55,7 +55,7 @@ const selected = reactive<{ row: number | null; col: number | null }>({ row: nul

 let editEnabled = $ref(false)

-const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()

 const addColumnDropdown = ref(false)

@ -69,7 +69,7 @@ const contextMenu = computed({
  },
 })

-const contextMenuTarget = ref(false)
+const contextMenuTarget = ref<{ row: number; col: number } | null>(null)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
 const expandedFormRowState = ref<Record<string, any>>()
@ -149,7 +149,7 @@ defineExpose({
 // reset context menu target on hide
 watch(contextMenu, () => {
  if (!contextMenu.value) {
-    contextMenuTarget.value = false
+    contextMenuTarget.value = null
  }
 })

@ -306,6 +306,14 @@ const onNavigate = (dir: NavigateDir) => {
      break
  }
 }
+
+const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) => {
+  if (isSqlView.value) return
+  e.preventDefault()
+  if (target) {
+    contextMenuTarget.value = target
+  }
+}
 </script>

 <template>
@ -314,11 +322,11 @@ const onNavigate = (dir: NavigateDir) => {
      <a-spin size="large" />
    </div>
    <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
-      <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table
+      <a-dropdown v-model:visible="contextMenu" :trigger="isSqlView ? [] : ['contextmenu']">
+        <tablex
          ref="smartTable"
          class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
-          @contextmenu.prevent="contextMenu = true"
+          @contextmenu="showContextMenu"
        >
          <thead>
            <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
@ -357,7 +365,7 @@ const onNavigate = (dir: NavigateDir) => {
                </div>
              </th>
              <th
-                v-if="!readOnly && !isLocked && isUIAllowed('add-column')"
+                v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
                v-t="['c:column:add']"
                class="cursor-pointer"
                @click.stop="addColumnDropdown = true"
@ -435,7 +443,7 @@ const onNavigate = (dir: NavigateDir) => {
                    :data-title="columnObj.title"
                    @click="selectCell(rowIndex, colIndex)"
                    @dblclick="makeEditable(row, columnObj)"
-                    @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
                  >
                    <div class="w-full h-full">
                      <SmartsheetVirtualCell
@ -471,10 +479,10 @@ const onNavigate = (dir: NavigateDir) => {
            </SmartsheetRow>

            <!--
-          TODO: add relationType !== 'bt' ?
-          v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-        -->
-            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable')">
+      TODO: add relationType !== 'bt' ?
+      v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
+    -->
+            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
              <td
                v-t="['c:row:add:grid-bottom']"
                :colspan="visibleColLength + 1"
@ -491,7 +499,7 @@ const onNavigate = (dir: NavigateDir) => {
              </td>
            </tr>
          </tbody>
-        </table>
+        </tablex>

        <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
          <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@ -2,7 +2,7 @@
 import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
 import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue'

-const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const { isGrid, isForm, isGallery, isSqlView } = useSmartsheetStoreOrThrow()
 const isPublic = inject(IsPublicInj, ref(false))
 const { isUIAllowed } = useUIPermission()

@ -34,7 +34,7 @@ const { isOpen } = useSidebar()
    <div class="flex-1" />

    <SmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-1" />
-    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm" class="mx-1" />
+    <SmartsheetToolbarAddRow v-if="isUIAllowed('dataInsert') && !isPublic && !isForm && !isSqlView" class="mx-1" />

    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
    <template v-if="!isOpen && !isPublic">
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@ -3,7 +3,7 @@ import { useExpandedFormStoreOrThrow, useSmartsheetRowStoreOrThrow, useSmartshee

 const emit = defineEmits(['cancel'])

-const { meta } = useSmartsheetStoreOrThrow()
+const { meta, isSqlView } = useSmartsheetStoreOrThrow()

 const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()

@ -48,7 +48,7 @@ const iconColor = '#1890ff'
      </template>
      <mdi-reload class="cursor-pointer select-none text-gray-500" />
    </a-tooltip>
-    <a-tooltip placement="bottom">
+    <a-tooltip v-if="!isSqlView" placement="bottom">
      <template #title>
        <div class="text-center w-full">Toggle comments draw</div>
      </template>
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { ViewTypes } from 'nocodb-sdk'
-import { ref, useUIPermission, viewIcons } from '#imports'
+import { useSmartsheetStoreOrThrow, useUIPermission, viewIcons } from '#imports'

 interface Emits {
  (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@ -10,7 +10,7 @@ const emits = defineEmits<Emits>()

 const { isUIAllowed } = useUIPermission()

-const isView = ref(false)
+const { isSqlView } = useSmartsheetStoreOrThrow()

 function onOpenModal(type: ViewTypes, title = '') {
  emits('openModal', { type, title })
@ -69,7 +69,7 @@ function onOpenModal(type: ViewTypes, title = '') {
      </a-menu-item>

      <a-menu-item
-        v-if="!isView"
+        v-if="!isSqlView"
        key="form"
        class="group !flex !items-center !my-0 !h-[30px] nc-create-form-view"
        @click="onOpenModal(ViewTypes.FORM)"
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@ -43,6 +43,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
      }
      return where
    })
+
+    const isSqlView = computed(() => meta?.value?.type === 'view')
+
    const sorts = initalSorts ?? ref<SortType[]>([])
    const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])

@ -61,6 +64,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
      isSharedForm,
      sorts,
      nestedFilters,
+      isSqlView,
    }
  },
  'smartsheet-store',