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 let sortable: Sortable
// todo: replace with vuedraggable // todo: replace with vuedraggable
@ -293,7 +291,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<div class="flex-1"> <div class="flex-1">
<div <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" 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)" @click="openTableCreateDialog(bases[0].id)"
> >
@ -403,8 +401,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<div class="transition-height duration-200 overflow-hidden"> <div class="transition-height duration-200 overflow-hidden">
<div :key="key" ref="menuRef" class="border-none sortable-list"> <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-for="[index, base] of Object.entries(bases)" :key="`${base.id}-index`">
<div v-if="index === '0'"> <div v-if="index === '0' && base.enabled">
<div <div
v-for="table of tables.filter((table) => table.base_id === base.id)" v-for="table of tables.filter((table) => table.base_id === base.id)"
:key="table.id" :key="table.id"
@ -473,7 +471,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</div> </div>
</div> </div>
<a-collapse <a-collapse
v-else v-else-if="base.enabled"
v-model:activeKey="activeKey" v-model:activeKey="activeKey"
:class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]" :class="[{ hidden: searchActive && !!filterQuery && !filteredTables?.find((el) => el.base_id === base.id) }]"
expand-icon-position="right" 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 v-if="vState === ''" class="max-h-600px min-w-1200px overflow-y-auto">
<div class="ds-table-head"> <div class="ds-table-head">
<div class="ds-table-row"> <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-name">Name</div>
<div class="ds-table-col ds-table-actions">Actions</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> </div>
<div class="ds-table-body"> <div class="ds-table-body">
<Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase"> <Draggable :list="sources" item-key="id" handle=".ds-table-handle" @end="moveBase">
<template #header> <template #header>
<div v-if="sources[0]" class="ds-table-row border-gray-200"> <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="ds-table-col ds-table-name">
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="sources[0].type" /> <GeneralBaseLogo :base-type="sources[0].type" />
@ -246,33 +244,33 @@ watch(
</a-button> </a-button>
</div> </div>
</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"> <div class="ds-table-col ds-table-enabled">
<MdiDragVertical small class="ds-table-handle" /> <div class="flex items-center gap-1 cursor-pointer">
<div v-if="!base.is_meta" class="flex items-center gap-1">
<a-tooltip> <a-tooltip>
<template #title> <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 v-else>Show in UI</template>
</template> </template>
<MdiEyeSettings <MdiEyeSettings
v-if="base.enabled" v-if="sources[0].enabled"
class="text-lg text-primary outline-0" class="text-lg text-primary outline-0"
@click="toggleBase(base, false)" @click="toggleBase(sources[0], false)"
></MdiEyeSettings> ></MdiEyeSettings>
<MdiEyeSettingsOutline <MdiEyeSettingsOutline
v-else v-else
class="text-lg text-red-500 outline-0" class="text-lg text-red-500 outline-0"
@click="toggleBase(base, true)" @click="toggleBase(sources[0], true)"
></MdiEyeSettingsOutline> ></MdiEyeSettingsOutline>
</a-tooltip> </a-tooltip>
</div> </div>
</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"> <div class="ds-table-col ds-table-name">
<MdiDragVertical small class="ds-table-handle" />
<div class="flex items-center gap-1"> <div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="base.type" /> <GeneralBaseLogo :base-type="base.type" />
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span> {{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
@ -327,6 +325,27 @@ watch(
</a-button> </a-button>
</div> </div>
</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> </div>
</template> </template>
</Draggable> </Draggable>
@ -369,7 +388,7 @@ watch(
} }
.ds-table-enabled { .ds-table-enabled {
@apply col-span-1 w-full flex gap-2; @apply col-span-2 flex justify-center;
} }
.ds-table-name { .ds-table-name {
@ -377,7 +396,7 @@ watch(
} }
.ds-table-actions { .ds-table-actions {
@apply col-span-10; @apply col-span-9;
} }
.ds-table-col:last-child { .ds-table-col:last-child {
@ -385,6 +404,6 @@ watch(
} }
.ds-table-handle { .ds-table-handle {
@apply cursor-pointer justify-self-start; @apply cursor-pointer justify-self-start mr-2;
} }
</style> </style>

Loading…
Cancel
Save