Browse Source

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

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/3433/head
Pranav C 2 years ago
parent
commit
a8d5861bc8
  1. 7
      packages/nc-gui-v2/components/smartsheet-toolbar/ViewActions.vue
  2. 28
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  3. 4
      packages/nc-gui-v2/components/smartsheet/Toolbar.vue
  4. 4
      packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
  5. 6
      packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
  6. 4
      packages/nc-gui-v2/composables/useSmartsheetStore.ts

7
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']"

28
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
@ -474,7 +482,7 @@ const onNavigate = (dir: NavigateDir) => {
TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-->
<tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable')">
<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">

4
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">

4
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>

6
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)"

4
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',

Loading…
Cancel
Save