Browse Source

feat: allow hiding base zero

Signed-off-by: mertmit <mertmit99@gmail.com>
pull/3573/head
mertmit 2 years ago
parent
commit
3e1d2ee9ea
  1. 10
      packages/nc-gui/components/dashboard/TreeView.vue
  2. 53
      packages/nc-gui/components/dashboard/settings/DataSources.vue

10
packages/nc-gui/components/dashboard/TreeView.vue

@ -69,8 +69,6 @@ const filteredTables = $computed(() =>
),
)
const filteredBases = $computed(() => bases.value.filter((base) => base.enabled))
let sortable: Sortable
// todo: replace with vuedraggable
@ -293,7 +291,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<div class="flex-1">
<div
v-if="isUIAllowed('table-create')"
v-if="bases[0].enabled && isUIAllowed('table-create')"
class="group flex items-center gap-2 pl-5 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
@click="openTableCreateDialog(bases[0].id)"
>
@ -403,8 +401,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<div class="transition-height duration-200 overflow-hidden">
<div :key="key" ref="menuRef" class="border-none sortable-list">
<div v-for="[index, base] of Object.entries(filteredBases)" :key="`${base.id}-index`">
<div v-if="index === '0'">
<div v-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
<div v-if="index === '0' && base.enabled">
<div
v-for="table of tables.filter((table) => table.base_id === base.id)"
:key="table.id"
@ -473,7 +471,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</div>
</div>
<a-collapse
v-else
v-else-if="base.enabled"
v-model:activeKey="activeKey"
:class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
expand-icon-position="right"

53
packages/nc-gui/components/dashboard/settings/DataSources.vue

@ -182,17 +182,15 @@ watch(
<div v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
<div class="ds-table-head">
<div class="ds-table-row">
<div class="ds-table-col ds-table-enabled"></div>
<div class="ds-table-col ds-table-name">Name</div>
<div class="ds-table-col ds-table-actions">Actions</div>
<div class="ds-table-col ds-table-enabled">Show / Hide</div>
</div>
</div>
<div class="ds-table-body">
<Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
<template #header>
<div v-if="sources[0]" class="ds-table-row border-gray-200">
<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" />
@ -246,33 +244,33 @@ watch(
</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">
<div class="flex items-center gap-1 cursor-pointer">
<a-tooltip>
<template #title>
<template v-if="base.enabled">Hide in UI</template>
<template v-if="sources[0].enabled">Hide in UI</template>
<template v-else>Show in UI</template>
</template>
<MdiEyeSettings
v-if="base.enabled"
v-if="sources[0].enabled"
class="text-lg text-primary outline-0"
@click="toggleBase(base, false)"
@click="toggleBase(sources[0], false)"
></MdiEyeSettings>
<MdiEyeSettingsOutline
v-else
class="text-lg text-red-500 outline-0"
@click="toggleBase(base, true)"
@click="toggleBase(sources[0], true)"
></MdiEyeSettingsOutline>
</a-tooltip>
</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-name">
<MdiDragVertical small class="ds-table-handle" />
<div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="base.type" />
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
@ -327,6 +325,27 @@ watch(
</a-button>
</div>
</div>
<div class="ds-table-col ds-table-enabled">
<div class="flex items-center gap-1 cursor-pointer">
<a-tooltip>
<template #title>
<template v-if="base.enabled">Hide in UI</template>
<template v-else>Show in UI</template>
</template>
<MdiEyeSettings
v-if="base.enabled"
class="text-lg text-primary outline-0"
@click="toggleBase(base, false)"
></MdiEyeSettings>
<MdiEyeSettingsOutline
v-else
class="text-lg text-red-500 outline-0"
@click="toggleBase(base, true)"
></MdiEyeSettingsOutline>
</a-tooltip>
</div>
</div>
</div>
</template>
</Draggable>
@ -369,7 +388,7 @@ watch(
}
.ds-table-enabled {
@apply col-span-1 w-full flex gap-2;
@apply col-span-2 flex justify-center;
}
.ds-table-name {
@ -377,7 +396,7 @@ watch(
}
.ds-table-actions {
@apply col-span-10;
@apply col-span-9;
}
.ds-table-col:last-child {
@ -385,6 +404,6 @@ watch(
}
.ds-table-handle {
@apply cursor-pointer justify-self-start;
@apply cursor-pointer justify-self-start mr-2;
}
</style>

Loading…
Cancel
Save