Browse Source

feat: Fixed issue with loading table and view from sidebar, fixed node click for mobile in sidebar

pull/6474/head
Muhammed Mustafa 1 year ago
parent
commit
f0c9f251d8
  1. 4
      packages/nc-gui/assets/style.scss
  2. 4
      packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue
  3. 18
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  4. 41
      packages/nc-gui/components/dashboard/TreeView/TableNode.vue
  5. 1
      packages/nc-gui/components/dashboard/TreeView/ViewsList.vue
  6. 5
      packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue
  7. 6
      packages/nc-gui/composables/useTableNew.ts
  8. 9
      packages/nc-gui/store/views.ts

4
packages/nc-gui/assets/style.scss

@ -598,7 +598,7 @@ input[type='number'] {
}
.nc-sidebar-node {
@apply !xs:(min-h-8.9 max-h-8.9);
@apply !xs:(min-h-8.9 max-h-8.9 hover:bg-gray-50);
.nc-sidebar-node-btn:not(.nc-sidebar-expand) {
@apply !xs:(hidden)
@ -611,7 +611,7 @@ input[type='number'] {
.nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
@apply xs:(opacity-100);
@apply xs:(opacity-100 hover:bg-gray-50);
.nc-icon {
@apply xs:(visible opacity-100 !text-gray-500)

4
packages/nc-gui/components/dashboard/TreeView/CreateViewBtn.vue

@ -43,7 +43,9 @@ function onOpenModal({
refreshCommandPalette()
await loadViews()
await loadViews({
force: true,
})
navigateToView({
view,

18
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -231,7 +231,7 @@ const addNewProjectChildEntity = async () => {
// todo: temp
const isSharedBase = ref(false)
const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
const onTouchStart = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
if (!project) {
return
}
@ -275,6 +275,12 @@ const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, to
}
}
const onProjectClick = async (project: NcProject, ignoreNavigation?: boolean, toggleIsExpanded?: boolean) => {
if (isMobileMode.value) return
onTouchStart(project, ignoreNavigation, toggleIsExpanded)
}
function openErdView(base: BaseType) {
activeBaseId.value = base.id
isErdModalOpen.value = !isErdModalOpen.value
@ -395,6 +401,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
size="xxsmall"
class="nc-sidebar-node-btn nc-sidebar-expand ml-0.75 !xs:visible"
@click="onProjectClick(project, true, true)"
@touchstart="onTouchStart(project, true, true)"
>
<GeneralIcon
icon="triangleFill"
@ -403,7 +410,7 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
/>
</NcButton>
<div class="flex items-center mr-1" @click="onProjectClick(project)">
<div class="flex items-center mr-1" @click="onProjectClick(project)" @touchstart="onTouchStart(project)">
<div class="flex items-center select-none w-6 h-full">
<a-spin
v-if="project.isLoading"
@ -443,10 +450,15 @@ const DlgProjectDuplicateOnOk = async (jobData: { id: string; project_id: string
:style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
:class="{ 'text-black font-semibold': activeProjectId === project.id && projectViewOpen }"
@click="onProjectClick(project)"
@touchstart="onTouchStart(project)"
>
{{ project.title }}
</span>
<div :class="{ 'flex flex-grow h-full': !editMode }" @click="onProjectClick(project)"></div>
<div
:class="{ 'flex flex-grow h-full': !editMode }"
@click="onProjectClick(project)"
@touchstart="onTouchStart(project)"
></div>
<NcDropdown v-model:visible="isOptionsOpen" :trigger="['click']">
<NcButton

41
packages/nc-gui/components/dashboard/TreeView/TableNode.vue

@ -20,7 +20,7 @@ const project = toRef(props, 'project')
const table = toRef(props, 'table')
const baseIndex = toRef(props, 'baseIndex')
const { openTable } = useTableNew({
const { openTable: _openTable } = useTableNew({
projectId: project.value.id!,
})
@ -28,6 +28,8 @@ const route = useRoute()
const { isUIAllowed } = useRoles()
const { isMobileMode } = useGlobal()
const tabStore = useTabs()
const { updateTab } = tabStore
@ -85,7 +87,7 @@ const canUserEditEmote = computed(() => {
const isExpanded = ref(false)
const isLoading = ref(false)
const onExpand = async () => {
const onTouchExpand = async () => {
if (isExpanded.value) {
isExpanded.value = false
return
@ -102,6 +104,30 @@ const onExpand = async () => {
}
}
const onExpand = async () => {
if (isMobileMode.value) return
onTouchExpand()
}
const onTouchOpenTable = async () => {
isLoading.value = true
try {
await _openTable(table.value)
} catch (e) {
message.error(await extractSdkResponseErrorMsg(e))
} finally {
isLoading.value = false
isExpanded.value = true
}
}
const onOpenTable = async () => {
if (isMobileMode.value) return
onTouchOpenTable()
}
watch(
() => activeView.value?.id,
() => {
@ -145,10 +171,17 @@ const isTableOpened = computed(() => {
class="table-context flex items-center gap-1 h-full"
:data-testid="`nc-tbl-side-node-${table.title}`"
@contextmenu="setMenuContext('table', table)"
@click="openTable(table)"
@click="onOpenTable"
@touchstart="onTouchOpenTable"
>
<div class="flex flex-row h-full items-center">
<NcButton type="text" size="xxsmall" class="nc-sidebar-node-btn nc-sidebar-expand" @click.stop="onExpand">
<NcButton
type="text"
size="xxsmall"
class="nc-sidebar-node-btn nc-sidebar-expand"
@click.stop="onExpand"
@touchstart.stop="onTouchExpand"
>
<GeneralIcon
icon="triangleFill"
class="nc-sidebar-base-node-btns group-hover:visible invisible cursor-pointer transform transition-transform duration-500 h-1.5 w-1.5 !text-gray-600 rotate-90"

1
packages/nc-gui/components/dashboard/TreeView/ViewsList.vue

@ -268,6 +268,7 @@ function openDeleteDialog(view: ViewType) {
await loadViews({
tableId: table.value.id!,
force: true,
})
},
})

5
packages/nc-gui/components/dashboard/TreeView/ViewsNode.vue

@ -78,6 +78,10 @@ const onClick = useDebounceFn(() => {
emits('changeView', vModel.value)
}, 250)
const onTouchClick = () => {
emits('changeView', vModel.value)
}
/** Enable editing view name on dbl click */
function onDblClick() {
if (!isUIAllowed('viewCreateOrEdit')) return
@ -218,6 +222,7 @@ function onRef(el: HTMLElement) {
:data-testid="`view-sidebar-view-${vModel.alias || vModel.title}`"
@dblclick.stop="onDblClick"
@click="onClick"
@touchstart="onTouchClick"
>
<div
:ref="onRef"

6
packages/nc-gui/composables/useTableNew.ts

@ -54,6 +54,8 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
const tables = computed(() => projectTables.value.get(param.projectId) || [])
const project = computed(() => projects.value.get(param.projectId))
const { loadViews } = useViewsStore()
const openTable = async (table: TableType) => {
if (!table.project_id) return
@ -78,6 +80,10 @@ export function useTableNew(param: { onTableCreate?: (tableMeta: TableType) => v
projectIdOrBaseId = route.value.params.projectId as string
}
await loadViews({
tableId: table.id,
})
await navigateTo({
path: `/${workspaceIdOrType}/${projectIdOrBaseId}/${table?.id}`,
query: route.value.query,

9
packages/nc-gui/store/views.ts

@ -81,9 +81,16 @@ export const useViewsStore = defineStore('viewsStore', () => {
// Used for Grid View Pagination
const isPaginationLoading = ref(false)
const loadViews = async ({ tableId, ignoreLoading }: { tableId?: string; ignoreLoading?: boolean } = {}) => {
const loadViews = async ({
tableId,
ignoreLoading,
force,
}: { tableId?: string; ignoreLoading?: boolean; force?: boolean } = {}) => {
tableId = tableId ?? tablesStore.activeTableId
if (tableId) {
if (!force && viewsByTable.value.get(tableId)) return
if (!ignoreLoading) isViewsLoading.value = true
const response = (await $api.dbView.list(tableId)).list as ViewType[]

Loading…
Cancel
Save