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

mobile optimisations - put views into the tree view on left sidebar (WIP)

pull/4898/head
Daniel Spaude 2 years ago
parent
6e4936faed
commit
ff58a5823e
No known key found for this signature in database
GPG Key ID: 654A3D1FA4F35FFE
2 changed files with 103 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 20
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 163
      packages/nc-gui/components/dashboard/TreeViewTableEntry.vue

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

@ -579,22 +579,20 @@ const setIcon = async (icon: string, table: TableType) => {
:key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`" :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
:nc-base="bases[0].id" :nc-base="bases[0].id"
> >
<div <LazyDashboardTreeViewTableEntry
v-for="(table, idx) of tables.filter((table) => table.base_id === bases[0].id)" v-for="(table, idx) of tables.filter((table) => table.base_id === bases[0].id)"
:key="table.id" :key="idx"
v-e="['a:table:open']" v-model="tables[idx]"
:class="[ :class="[
{ hidden: !filteredTables?.includes(table), active: activeTable === table.id }, { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
`nc-project-tree-tbl nc-project-tree-tbl-${table.title}`, `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
]" ]"
class="nc-tree-item text-sm cursor-pointer group" :set-menu-context="setMenuContext"
:data-order="table.order" :icon="icon"
:data-id="table.id" :set-icon="setIcon"
:data-testid="`tree-view-table-${table.title}`" :active-table="activeTable"
@click="addTableTab(table)" :open-rename-table-dialog="openRenameTableDialog"
> />
<LazyDashboardTreeViewTableEntry v-model="tables[idx]" :set-menu-context="setMenuContext" :icon="icon" :set-icon="setIcon" :active-table="activeTable" :open-rename-table-dialog="openRenameTableDialog" />
</div>
</div> </div>
</div> </div>
</div> </div>

163
packages/nc-gui/components/dashboard/TreeViewTableEntry.vue
Unescape View File

@ -14,87 +14,112 @@ const props = defineProps<{
openRenameTableDialog: (table: TableType, baseId?: string | undefined, rightClick?: boolean) => void openRenameTableDialog: (table: TableType, baseId?: string | undefined, rightClick?: boolean) => void
}>() }>()
const table = useVModel(props, 'modelValue') // , emits)
const { deleteTable } = useTable() const { deleteTable } = useTable()
// const { views, loadViews, isLoading } = useViews(table)
const { views } = useViews(table)
// const emits = defineEmits(['update:modelValue']) // onMounted(async () => {
// await loadViews()
// loadViews()
// })
const table = useVModel(props, 'modelValue') // , emits) // const emits = defineEmits(['update:modelValue'])
// const { bases, isSharedBase } = useProject() // const { bases, isSharedBase } = useProject()
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
</script> </script>
<template> <template>
<GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt"> <div
<template #title>{{ table.table_name }}</template> :key="table.id"
<div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)"> v-e="['a:table:open']"
<div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`"> :class="[
<component { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
:is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'" `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
trigger="click" ]"
destroy-popup-on-hide class="nc-tree-item text-sm cursor-pointer group"
class="flex items-center" :data-order="table.order"
@click.stop :data-id="table.id"
> :data-testid="`tree-view-table-${table.title}`"
<div class="flex items-center" @click.stop> @click="addTableTab(table)"
<component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'"> >
<span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center"> <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
<Icon <template #title>{{ table.table_name }}</template>
:key="table.meta?.icon" <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
:data-testid="`nc-icon-${table.meta?.icon}`" <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
class="text-xl" <component
:icon="table.meta?.icon" :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
></Icon> trigger="click"
</span> destroy-popup-on-hide
<component class="flex items-center"
:is="icon(table)" @click.stop
v-else >
class="nc-table-icon nc-view-icon w-5" <div class="flex items-center" @click.stop>
:class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }" <!-- <div>views: {{ JSON.stringify(views) }}</div> -->
/> <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
<span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
<Icon
:key="table.meta?.icon"
:data-testid="`nc-icon-${table.meta?.icon}`"
class="text-xl"
:icon="table.meta?.icon"
></Icon>
</span>
<component
:is="icon(table)"
v-else
class="nc-table-icon nc-view-icon w-5"
:class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
/>
<template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template> <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
</component> </component>
</div> </div>
<template v-if="isUIAllowed('tableIconCustomisation')" #overlay> <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
<GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" /> <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
</template> </template>
</component> </component>
</div> </div>
<div class="nc-tbl-title flex-1"> <div class="nc-tbl-title flex-1">
<GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{ <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
table.title table.title
}}</GeneralTruncateText> }}</GeneralTruncateText>
</div> </div>
<a-dropdown <a-dropdown
v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))" v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
:trigger="['click']" :trigger="['click']"
@click.stop @click.stop
> >
<MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" /> <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
<template #overlay> <template #overlay>
<a-menu class="!py-0 rounded text-sm"> <a-menu class="!py-0 rounded text-sm">
<a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)"> <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
<div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`"> <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
{{ $t('general.rename') }} {{ $t('general.rename') }}
</div> </div>
</a-menu-item> </a-menu-item>
<a-menu-item <a-menu-item
v-if="isUIAllowed('table-delete')" v-if="isUIAllowed('table-delete')"
:data-testid="`sidebar-table-delete-${table.title}`" :data-testid="`sidebar-table-delete-${table.title}`"
@click="deleteTable(table)" @click="deleteTable(table)"
> >
<div class="nc-project-menu-item"> <div class="nc-project-menu-item">
{{ $t('general.delete') }} {{ $t('general.delete') }}
</div> </div>
</a-menu-item> </a-menu-item>
</a-menu> </a-menu>
</template> </template>
</a-dropdown> </a-dropdown>
</div> </div>
</GeneralTooltip> </GeneralTooltip>
<ul :style="{ marginLeft: '30px' }">
<li v-for="(view, idx) of views" :key="idx">{{ view.title }}</li>
</ul>
</div>
</template> </template>

Write Preview
Loading…
Cancel
Save