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, ref,
useNuxtApp, useNuxtApp,
useProject, useProject,
useSmartsheetStoreOrThrow,
useUIPermission, useUIPermission,
} from '#imports' } from '#imports'
import { LockType } from '~/lib' import { LockType } from '~/lib'
@ -70,6 +71,8 @@ async function changeLockType(type: LockType) {
message.error(await extractSdkResponseErrorMsg(e)) message.error(await extractSdkResponseErrorMsg(e))
} }
} }
const { isSqlView } = useSmartsheetStoreOrThrow()
</script> </script>
<template> <template>
@ -134,7 +137,7 @@ async function changeLockType(type: LockType) {
<template #expandIcon></template> <template #expandIcon></template>
<SmartsheetToolbarExportSubActions /> <SmartsheetToolbarExportSubActions />
</a-sub-menu> </a-sub-menu>
<template v-if="isUIAllowed('csvImport') && !isView && !isPublicView"> <template v-if="isUIAllowed('csvImport') && !isView && !isPublicView && !isSqlView">
<a-sub-menu key="upload"> <a-sub-menu key="upload">
<template #title> <template #title>
<div v-t="['c:navdraw:preview-as']" class="nc-project-menu-item group"> <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') }} {{ $t('activity.listSharedView') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item> <a-menu-item v-if="!isSqlView">
<div <div
v-if="isUIAllowed('webhook') && !isView && !isPublicView" v-if="isUIAllowed('webhook') && !isView && !isPublicView"
v-t="['c:actions:webhook']" 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) let editEnabled = $ref(false)
const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow() const { xWhere, isPkAvail, cellRefs, isSqlView } = useSmartsheetStoreOrThrow()
const addColumnDropdown = ref(false) 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 expandedFormDlg = ref(false)
const expandedFormRow = ref<Row>() const expandedFormRow = ref<Row>()
const expandedFormRowState = ref<Record<string, any>>() const expandedFormRowState = ref<Record<string, any>>()
@ -149,7 +149,7 @@ defineExpose({
// reset context menu target on hide // reset context menu target on hide
watch(contextMenu, () => { watch(contextMenu, () => {
if (!contextMenu.value) { if (!contextMenu.value) {
contextMenuTarget.value = false contextMenuTarget.value = null
} }
}) })
@ -306,6 +306,14 @@ const onNavigate = (dir: NavigateDir) => {
break break
} }
} }
const showContextMenu = (e: MouseEvent, target?: { row: number; col: number }) => {
if (isSqlView.value) return
e.preventDefault()
if (target) {
contextMenuTarget.value = target
}
}
</script> </script>
<template> <template>
@ -314,11 +322,11 @@ const onNavigate = (dir: NavigateDir) => {
<a-spin size="large" /> <a-spin size="large" />
</div> </div>
<div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull"> <div v-else class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-dull">
<a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']"> <a-dropdown v-model:visible="contextMenu" :trigger="isSqlView ? [] : ['contextmenu']">
<table <tablex
ref="smartTable" ref="smartTable"
class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white" class="xc-row-table nc-grid backgroundColorDefault !h-auto bg-white"
@contextmenu.prevent="contextMenu = true" @contextmenu="showContextMenu"
> >
<thead> <thead>
<tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]"> <tr class="nc-grid-header border-1 bg-gray-100 sticky top[-1px]">
@ -357,7 +365,7 @@ const onNavigate = (dir: NavigateDir) => {
</div> </div>
</th> </th>
<th <th
v-if="!readOnly && !isLocked && isUIAllowed('add-column')" v-if="!readOnly && !isLocked && isUIAllowed('add-column') && !isSqlView"
v-t="['c:column:add']" v-t="['c:column:add']"
class="cursor-pointer" class="cursor-pointer"
@click.stop="addColumnDropdown = true" @click.stop="addColumnDropdown = true"
@ -435,7 +443,7 @@ const onNavigate = (dir: NavigateDir) => {
:data-title="columnObj.title" :data-title="columnObj.title"
@click="selectCell(rowIndex, colIndex)" @click="selectCell(rowIndex, colIndex)"
@dblclick="makeEditable(row, columnObj)" @dblclick="makeEditable(row, columnObj)"
@contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }" @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
> >
<div class="w-full h-full"> <div class="w-full h-full">
<SmartsheetVirtualCell <SmartsheetVirtualCell
@ -474,7 +482,7 @@ const onNavigate = (dir: NavigateDir) => {
TODO: add relationType !== 'bt' ? TODO: add relationType !== 'bt' ?
v1: <tr v-if="!isView && !isLocked && !isPublicView && isEditable && 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 <td
v-t="['c:row:add:grid-bottom']" v-t="['c:row:add:grid-bottom']"
:colspan="visibleColLength + 1" :colspan="visibleColLength + 1"
@ -491,7 +499,7 @@ const onNavigate = (dir: NavigateDir) => {
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </tablex>
<template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay> <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
<a-menu class="shadow !rounded !py-0" @click="contextMenu = false"> <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 { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
import ToggleDrawer from '~/components/smartsheet/sidebar/toolbar/ToggleDrawer.vue' 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 isPublic = inject(IsPublicInj, ref(false))
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -34,7 +34,7 @@ const { isOpen } = useSidebar()
<div class="flex-1" /> <div class="flex-1" />
<SmartsheetToolbarReload v-if="!isPublic && !isForm" class="mx-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" /> <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2 ml-2" />
<template v-if="!isOpen && !isPublic"> <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 emit = defineEmits(['cancel'])
const { meta } = useSmartsheetStoreOrThrow() const { meta, isSqlView } = useSmartsheetStoreOrThrow()
const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow() const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
@ -48,7 +48,7 @@ const iconColor = '#1890ff'
</template> </template>
<mdi-reload class="cursor-pointer select-none text-gray-500" /> <mdi-reload class="cursor-pointer select-none text-gray-500" />
</a-tooltip> </a-tooltip>
<a-tooltip placement="bottom"> <a-tooltip v-if="!isSqlView" placement="bottom">
<template #title> <template #title>
<div class="text-center w-full">Toggle comments draw</div> <div class="text-center w-full">Toggle comments draw</div>
</template> </template>

6
packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ViewTypes } from 'nocodb-sdk' import { ViewTypes } from 'nocodb-sdk'
import { ref, useUIPermission, viewIcons } from '#imports' import { useSmartsheetStoreOrThrow, useUIPermission, viewIcons } from '#imports'
interface Emits { interface Emits {
(event: 'openModal', data: { type: ViewTypes; title?: string }): void (event: 'openModal', data: { type: ViewTypes; title?: string }): void
@ -10,7 +10,7 @@ const emits = defineEmits<Emits>()
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
const isView = ref(false) const { isSqlView } = useSmartsheetStoreOrThrow()
function onOpenModal(type: ViewTypes, title = '') { function onOpenModal(type: ViewTypes, title = '') {
emits('openModal', { type, title }) emits('openModal', { type, title })
@ -69,7 +69,7 @@ function onOpenModal(type: ViewTypes, title = '') {
</a-menu-item> </a-menu-item>
<a-menu-item <a-menu-item
v-if="!isView" v-if="!isSqlView"
key="form" key="form"
class="group !flex !items-center !my-0 !h-[30px] nc-create-form-view" class="group !flex !items-center !my-0 !h-[30px] nc-create-form-view"
@click="onOpenModal(ViewTypes.FORM)" @click="onOpenModal(ViewTypes.FORM)"

4
packages/nc-gui-v2/composables/useSmartsheetStore.ts

@ -43,6 +43,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
} }
return where return where
}) })
const isSqlView = computed(() => meta?.value?.type === 'view')
const sorts = initalSorts ?? ref<SortType[]>([]) const sorts = initalSorts ?? ref<SortType[]>([])
const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([]) const nestedFilters: Ref<FilterType[]> = initialFilters ?? ref<FilterType[]>([])
@ -61,6 +64,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState(
isSharedForm, isSharedForm,
sorts, sorts,
nestedFilters, nestedFilters,
isSqlView,
} }
}, },
'smartsheet-store', 'smartsheet-store',

Loading…
Cancel
Save