github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui-v2): context menu, table list reload, css corrections 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2830/head
Pranav C 2 years ago
parent
a82f163041
commit
78bdd3ae2e
2 changed files with 124 additions and 51 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  2. 2
      packages/nc-gui-v2/composables/useProject.ts

173
packages/nc-gui-v2/components/dashboard/TreeView.vue
Unescape View File

@ -1,23 +1,28 @@
<script setup lang="ts">
import { computed } from '@vue/reactivity'
import { onMounted } from '@vue/runtime-core'
import type { TableType } from 'nocodb-sdk'
import Sortable from 'sortablejs'
import { $computed } from 'vue/macros'
import { useNuxtApp } from '#app'
import { useNuxtApp, useRoute } from '#app'
// import Draggable from 'vuedraggable'
import useProject from '~/composables/useProject'
import useTabs from '~/composables/useTabs'
import MdiSettingIcon from '~icons/mdi/cog'
import MdiTable from '~icons/mdi/table'
import MdiView from '~icons/mdi/eye-circle-outline'
import MdiTableLarge from '~icons/mdi/table-large'
import MdiMenuDown from '~icons/mdi/chevron-down'
import MdiPlus from '~icons/mdi/plus-circle-outline'
import MdiDrag from '~icons/mdi/drag-vertical'
import MdiMenuIcon from '~icons/mdi/dots-vertical'
import MdiAPIDocIcon from '~icons/mdi/open-in-new'
const { tables } = useProject()
const { addTab } = useTabs()
const { $api } = useNuxtApp()
const { isUIAllowed } = useUIPermission()
const route = useRoute()
const { tables, loadTables } = useProject(route.params.projectId as string)
const tablesById = $computed<Record<string, TableType>>(() =>
tables?.value?.reduce((acc: Record<string, TableType>, table: TableType) => {
@ -28,11 +33,14 @@ const tablesById = $computed<Record<string, TableType>>(() =>
const settingsDlg = ref(false)
const showTableList = ref(true)
const tableCreateDlg = ref(false)
const tableDeleteDlg = ref(false)
onMounted(() => {
setTimeout(() => {
const el = document.querySelector('.sortable-list') // Must get this DomElement,
Sortable.create(el, {
handle: '.nc-drag-icon',
onChange: async (evt) => {
const { newIndex = 0, oldIndex = 0 } = evt
@ -68,70 +76,125 @@ onMounted(() => {
})
}, 1000)
})
const icon = (table: TableType) => {
if (table.type === 'table') {
return MdiTableLarge
}
if (table.type === 'view') {
return MdiView
}
}
const apiLink = computed(
() =>
// new URL(
`/api/v1/db/meta/projects/${route.params.projectId}/swagger`,
// todo: get siteUrl
// this.$store.state.project.appInfo && this.$store.state.project.appInfo.ncSiteUrl
// ),
)
const filterQuery = $ref('')
const filteredTables = $computed(() => {
return tables?.value?.filter((table) => !filterQuery || table?.title.toLowerCase()?.includes(filterQuery.toLowerCase()))
})
const contextMenuTarget = reactive<{ type: 'table' | 'main'; value?: any }>({})
const setMenuContext = (type: 'table' | 'main', value?: any) => {
contextMenuTarget.type = type
contextMenuTarget.value = value
}
</script>
<template>
<div class="nc-treeview-container flex flex-column">
<div class="p-1">
<a-input-search :placeholder="$t('placeholder.searchProjectTree')" />
<a-input-search
v-model:value="filterQuery"
size="small"
class="nc-filter-input"
:placeholder="$t('placeholder.searchProjectTree')"
/>
</div>
<div class="p-1 flex-1 overflow-y-auto flex flex-column">
<div class="p-1 flex w-full align-center gap-1" @click="showTableList = !showTableList">
<MdiTable class="mr-1 text-gray-500" />
<span class="flex-grow">{{ $t('objects.tables') }}</span>
<MdiPlus />
<MdiMenuDown />
</div>
<div class="flex-1">
<div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
<a-menu class="border-none sortable-list">
<a-menu-item
v-for="table in tables"
:key="table.id"
class="!pl-1 py-1 !h-[28px] !my-0 text-sm pointer group"
:data-order="table.order"
:data-id="table.id"
@click="addTab({ type: 'table', title: table.title, id: table.id })"
>
<div class="flex align-center gap-1">
<MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500" />
<MdiTableLarge class="text-xs text-gray-500" />
<span class="text-sm flex-1">{{ table.title }}</span>
<a-dropdown :trigger="['click']">
<MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
<template #overlay>
<a-menu>
<a-menu-item> Rename</a-menu-item>
<a-menu-item> UI ACL</a-menu-item>
<a-menu-item> Delete</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</a-menu-item>
</a-menu>
<a-dropdown :trigger="['contextmenu']" >
<div class="p-1 flex-1 overflow-y-auto flex flex-column">
<div
class="py-1 px-3 flex w-full align-center gap-1 cursor-pointer"
@click="showTableList = !showTableList"
@contextmenu="setMenuContext('main')"
>
<MdiTable class="mr-1 text-gray-500" />
<span class="flex-grow text-bold">{{ $t('objects.tables') }} <template v-if="tables?.length">({{tables.length}})</template></span>
<MdiPlus class="text-gray-500" @click.stop="tableCreateDlg = true" />
<MdiMenuDown
class="transition-transform !duration-100 text-gray-500"
:class="{ 'transform rotate-180': showTableList }"
/>
</div>
<div class="flex-1">
<div class="transition-height duration-200 overflow-hidden" :class="{ 'h-100': showTableList, 'h-0': !showTableList }">
<a-menu class="border-none sortable-list">
<a-menu-item
v-for="table in filteredTables"
:key="table.id"
class="!pl-1 py-1 !h-[28px] !my-0 text-sm pointer group"
:data-order="table.order"
:data-id="table.id"
@click="addTab({ type: 'table', title: table.title, id: table.id })"
>
<div class="flex align-center gap-1" @contextmenu="setMenuContext('table', table)">
<MdiDrag class="transition-opacity opacity-0 group-hover:opacity-100 text-gray-500 nc-drag-icon cursor-move" />
<component :is="icon(table)" class="text-xs text-gray-500" />
<span class="text-xs flex-1">{{ table.title }}</span>
<a-dropdown :trigger="['click']">
<MdiMenuIcon class="transition-opacity opacity-0 group-hover:opacity-100" />
<template #overlay>
<a-menu>
<a-menu-item class="!text-xs"> Rename</a-menu-item>
<a-menu-item class="!text-xs"> UI ACL</a-menu-item>
<a-menu-item class="!text-xs"> Delete</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</div>
</a-menu-item>
</a-menu>
</div>
</div>
</div>
</div>
<!-- <a-menu class="flex-1 overflow-y-auto">
<a-menu-item
v-for="table in tables"
:key="table.id"
class="p-2 text-sm pointer"
@click="addTab({ type: 'table', title: table.title, id: table.id })"
>
{{ table.title }}
</a-menu-item>
</a-menu> -->
<div class="cursor-pointer nc-team-settings pa-4 flex align-center hover:bg-gray-200/20" @click="settingsDlg = true">
<template #overlay>
<a-menu>
<template v-if="contextMenuTarget.type === 'table'">
<a-menu-item class="!text-xs">Table Rename</a-menu-item>
<a-menu-item class="!text-xs">Table Delete</a-menu-item>
</template>
<template v-else>
<a-menu-item @click="loadTables" class="!text-xs">Tables Refresh</a-menu-item>
</template>
</a-menu>
</template>
</a-dropdown>
<div class="w-full h-[1px] bg-gray-200" />
<a v-if="isUIAllowed('apiDocs')" v-t="['e:api-docs']" class="nc-treeview-footer-item" :href="apiLink" target="_blank">
<MdiAPIDocIcon class="mr-2" />
<span> {{ $t('title.apiDocs') }}</span>
</a>
<div
v-if="isUIAllowed('settings')"
v-t="['c:navdraw:project-settings']"
class="nc-treeview-footer-item nc-team-settings"
@click="settingsDlg = true"
>
<MdiSettingIcon class="mr-2" />
<span> {{ $t('title.teamAndSettings') }}</span>
</div>
<a-modal v-model:visible="settingsDlg" width="max(90vw, 600px)"> Team and settings</a-modal>
<DlgTableCreate v-model="tableCreateDlg"/>
</div>
</template>
@ -143,4 +206,12 @@ onMounted(() => {
.nc-treeview-container {
height: calc(100vh - var(--header-height));
}
.nc-treeview-footer-item {
@apply cursor-pointer px-4 py-2 flex align-center hover:bg-gray-200/20 text-xs text-current;
}
:deep(.nc-filter-input input::placeholder) {
@apply !text-xs;
}
</style>

2
packages/nc-gui-v2/composables/useProject.ts
Unescape View File

@ -1,6 +1,8 @@
import { SqlUiFactory } from 'nocodb-sdk'
import type { ProjectType, TableType } from 'nocodb-sdk'
import type { MaybeRef } from '@vueuse/core'
import { ComputedRef } from 'vue'
import { ComputedVariable } from 'vue/macros'
import { useNuxtApp, useState } from '#app'
import { USER_PROJECT_ROLES } from '~/lib/constants'

Write Preview
Loading…
Cancel
Save