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

feat: draggable data sources 

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/3573/head
mertmit 2 years ago
parent
600d18de22
commit
b0695f5e0e
1 changed files with 204 additions and 107 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. 213
      packages/nc-gui/components/dashboard/settings/DataSources.vue

213
packages/nc-gui/components/dashboard/settings/DataSources.vue
Unescape View File

@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import Draggable from 'vuedraggable'
import { Empty } from 'ant-design-vue' import { Empty } from 'ant-design-vue'
import type { BaseType } from 'nocodb-sdk' import type { BaseType } from 'nocodb-sdk'
import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface' import type { CheckboxChangeEvent } from 'ant-design-vue/lib/checkbox/interface'
@ -64,9 +65,10 @@ async function loadMetaDiff() {
} }
} }
const baseAction = (baseId: string, action: string) => { const baseAction = (baseId?: string, action?: string) => {
if (!baseId) return
activeBaseId = baseId activeBaseId = baseId
vState.value = action vState.value = action || ''
} }
const deleteBase = (base: BaseType) => { const deleteBase = (base: BaseType) => {
@ -107,8 +109,12 @@ const toggleBase = async (base: BaseType, e: CheckboxChangeEvent) => {
} }
} }
const moveBase = async (base: BaseType, direction: 'up' | 'down') => { const moveBase = async (e: any) => {
try { try {
if (e.oldIndex === e.newIndex) return
// sources list is mutated so we have to get the new index and mirror it to backend
const base = sources[e.newIndex]
if (base) {
if (!base.order) { if (!base.order) {
// empty update call to reorder bases (migration) // empty update call to reorder bases (migration)
await $api.base.update(base.project_id as string, base.id as string, { await $api.base.update(base.project_id as string, base.id as string, {
@ -117,13 +123,13 @@ const moveBase = async (base: BaseType, direction: 'up' | 'down') => {
}) })
message.info('Bases are migrated. Please try again.') message.info('Bases are migrated. Please try again.')
} else { } else {
direction === 'up' ? base.order-- : base.order++
await $api.base.update(base.project_id as string, base.id as string, { await $api.base.update(base.project_id as string, base.id as string, {
id: base.id, id: base.id,
project_id: base.project_id, project_id: base.project_id,
order: base.order, order: e.newIndex + 1,
}) })
} }
}
await loadProject() await loadProject()
await loadBases() await loadBases()
} catch (e: any) { } catch (e: any) {
@ -174,65 +180,113 @@ watch(
<template> <template>
<div class="flex flex-row w-full"> <div class="flex flex-row w-full">
<div class="flex flex-col w-full"> <div class="flex flex-col w-full overflow-auto">
<div v-if="vState === ''" class="max-h-600px overflow-y-auto"> <div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
<a-table <div class="ds-table-head">
class="w-full" <div class="ds-table-row">
size="small" <div class="ds-table-col ds-table-enabled"></div>
:custom-row=" <div class="ds-table-col ds-table-name">Name</div>
(record) => ({ <div class="ds-table-col ds-table-actions">Actions</div>
class: `nc-datasource-row nc-datasource-row-${record.table_name}`, </div>
}) </div>
" <div class="ds-table-body">
:data-source="sources ?? []" <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
:pagination="false" <template #header>
:loading="vReload" <div v-if="sources[0]" class="ds-table-row border-gray-200">
bordered <div class="ds-table-col ds-table-enabled"></div>
<div class="ds-table-col ds-table-name">
<div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="sources[0].type" />
BASE
<span class="text-gray-400 text-xs">({{ sources[0].type }})</span>
</div>
</div>
<div class="ds-table-col ds-table-actions">
<div class="flex items-center gap-2">
<a-button
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(sources[0].id, DataSourcesSubTab.Metadata)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(sources[0].id as string)">
<template #title>Out of sync</template>
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
</a-tooltip>
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" />
Sync Metadata
</div>
</a-button>
<a-button
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
UI ACL
</div>
</a-button>
<a-button
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiGraphOutline class="text-lg group-hover:text-accent" />
ERD
</div>
</a-button>
<a-button
v-if="!sources[0].is_meta"
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiEditOutline class="text-lg group-hover:text-accent" />
Edit
</div>
</a-button>
<a-button
v-if="!sources[0].is_meta"
class="nc-action-btn cursor-pointer outline-0"
@click="deleteBase(sources[0])"
> >
<template #emptyText> <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('labels.noData')" /> </template> <div class="flex items-center gap-2 text-red-500 font-light">
<a-table-column key="enabled" data-index="enabled" :width="30"> <MdiDeleteOutline class="text-lg group-hover:text-accent" />
<template #default="{ record }"> Delete
<div v-if="!record.is_meta" class="flex items-center gap-1"> </div>
</a-button>
</div>
</div>
</div>
</template>
<template #item="{ element: base, index }">
<div v-if="index !== 0" class="ds-table-row border-gray-200">
<div class="ds-table-col ds-table-enabled">
<MdiDragVertical small class="ds-table-handle" />
<div v-if="!base.is_meta" class="flex items-center gap-1">
<a-tooltip> <a-tooltip>
<template #title>Show in UI</template> <template #title>Show in UI</template>
<a-checkbox :checked="record.enabled ? true : false" @change="toggleBase(record, $event)"></a-checkbox> <a-checkbox :checked="base.enabled ? true : false" @change="toggleBase(base, $event)"></a-checkbox>
</a-tooltip> </a-tooltip>
</div> </div>
</template>
</a-table-column>
<a-table-column key="order" width="60px">
<template #default="{ record, index }">
<div class="flex items-center gap-1 text-gray-600 font-light">
<MdiArrowUpBox
v-if="!record.is_meta && index !== 1"
class="text-lg group-hover:text-accent"
@click="moveBase(record, 'up')"
/>
<MdiArrowDownBox
v-if="!record.is_meta && index !== sources.length - 1"
class="text-lg group-hover:text-accent"
@click="moveBase(record, 'down')"
/>
</div> </div>
</template>
</a-table-column> <div class="ds-table-col ds-table-name">
<a-table-column key="alias" title="Name" data-index="alias">
<template #default="{ text, record }">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="record.type" /> <GeneralBaseLogo :base-type="base.type" />
{{ record.is_meta ? 'BASE' : text }} <span class="text-gray-400 text-xs">({{ record.type }})</span> {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
</div> </div>
</template> </div>
</a-table-column>
<a-table-column key="action" :title="$t('labels.actions')" :width="180"> <div class="ds-table-col ds-table-actions">
<template #default="{ record }">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<a-button <a-button
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.Metadata)" @click="baseAction(base.id, DataSourcesSubTab.Metadata)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(record.id)"> <a-tooltip v-if="metadiffbases.includes(base.id as string)">
<template #title>Out of sync</template> <template #title>Out of sync</template>
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> <MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" />
</a-tooltip> </a-tooltip>
@ -240,38 +294,43 @@ watch(
Sync Metadata Sync Metadata
</div> </div>
</a-button> </a-button>
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.UIAcl)"> <a-button
class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(base.id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> <MdiDatabaseLockOutline class="text-lg group-hover:text-accent" />
UI ACL UI ACL
</div> </div>
</a-button> </a-button>
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(record.id, DataSourcesSubTab.ERD)"> <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)">
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiGraphOutline class="text-lg group-hover:text-accent" /> <MdiGraphOutline class="text-lg group-hover:text-accent" />
ERD ERD
</div> </div>
</a-button> </a-button>
<a-button <a-button
v-if="!record.is_meta" v-if="!base.is_meta"
class="nc-action-btn cursor-pointer outline-0" class="nc-action-btn cursor-pointer outline-0"
@click="baseAction(record.id, DataSourcesSubTab.Edit)" @click="baseAction(base.id, DataSourcesSubTab.Edit)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiEditOutline class="text-lg group-hover:text-accent" /> <MdiEditOutline class="text-lg group-hover:text-accent" />
Edit Edit
</div> </div>
</a-button> </a-button>
<a-button v-if="!record.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(record)"> <a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)">
<div class="flex items-center gap-2 text-red-500 font-light"> <div class="flex items-center gap-2 text-red-500 font-light">
<MdiDeleteOutline class="text-lg group-hover:text-accent" /> <MdiDeleteOutline class="text-lg group-hover:text-accent" />
Delete Delete
</div> </div>
</a-button> </a-button>
</div> </div>
</div>
</div>
</template> </template>
</a-table-column> </Draggable>
</a-table> </div>
</div> </div>
<div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto"> <div v-else-if="vState === DataSourcesSubTab.New" class="max-h-600px overflow-y-auto">
<CreateBase :connection-type="clientType" @base-created="loadBases" /> <CreateBase :connection-type="clientType" @base-created="loadBases" />
@ -291,3 +350,41 @@ watch(
</div> </div>
</div> </div>
</template> </template>
<style>
.ds-table-head {
@apply flex items-center border-t bg-gray-100 font-bold text-gray-500;
}
.ds-table-body {
@apply flex flex-col;
}
.ds-table-row {
@apply grid grid-cols-20 border-b w-full h-full border-l border-r;
}
.ds-table-col {
@apply flex items-center p-3 border-r-1 mr-2 h-50px;
}
.ds-table-enabled {
@apply col-span-1 w-full flex gap-2;
}
.ds-table-name {
@apply col-span-9;
}
.ds-table-actions {
@apply col-span-10;
}
.ds-table-col:last-child {
@apply border-r-0;
}
.ds-table-handle {
@apply cursor-pointer justify-self-start;
}
</style>

Write Preview
Loading…
Cancel
Save