Browse Source

feat(nc-gui): add search tables input to tree view

pull/3860/head
braks 2 years ago
parent
commit
02805348d2
  1. 22
      packages/nc-gui/assets/style.scss
  2. 23
      packages/nc-gui/components/dashboard/TreeView.vue
  3. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue

22
packages/nc-gui/assets/style.scss

@ -168,6 +168,28 @@ a {
transform: translate(-100%, 0);
}
.slide-right-enter-active,
.slide-right-leave-active {
transition: all 400ms ease;
}
.slide-right-enter-from,
.slide-right-leave-to {
transform: translate(100%, 0%);
opacity: 0;
}
.slide-left-enter-active,
.slide-left-leave-active {
transition: all 400ms ease;
}
.slide-left-enter-from,
.slide-left-leave-to {
transform: translate(-100%, 0%);
opacity: 0;
}
.glow-enter-active,
.glow-leave-active {
@apply transition-all duration-300 ease-in-out;

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

@ -14,6 +14,7 @@ import {
useProject,
useTable,
useTabs,
useToggle,
useUIPermission,
watchEffect,
} from '#imports'
@ -33,6 +34,8 @@ const { deleteTable } = useTable()
const { isUIAllowed } = useUIPermission()
const [searchActive, toggleSearchActive] = useToggle()
const isLocked = inject('TreeViewIsLockedInj')
let key = $ref(0)
@ -126,8 +129,6 @@ const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
const setMenuContext = (type: 'table' | 'main', value?: any) => {
contextMenuTarget.type = type
contextMenuTarget.value = value
// $e('c:table:create:navdraw:right-click')
}
const reloadTables = async () => {
@ -215,12 +216,26 @@ function openTableCreateDialog() {
<div class="nc-treeview-container flex flex-col">
<a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu">
<div class="pt-2 pl-2 pb-2 flex-1 overflow-y-auto flex flex-col scrollbar-thin-dull" :class="{ 'mb-[20px]': isSharedBase }">
<div class="py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
<span class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
<div class="min-h-[36px] py-1 px-3 flex w-full items-center gap-1 cursor-pointer" @contextmenu="setMenuContext('main')">
<Transition name="slide-left" mode="out-in">
<a-input
v-if="searchActive"
v-model:value="filterQuery"
class="flex-1 rounded"
:placeholder="$t('placeholder.searchProjectTree')"
/>
<span v-else class="flex-1 text-bold uppercase nc-project-tree text-gray-500 font-weight-bold">
{{ $t('objects.tables') }}
<template v-if="tables?.length"> ({{ tables.length }}) </template>
</span>
</Transition>
<Transition name="layout" mode="out-in">
<MdiClose v-if="searchActive" class="text-lg mx-1 mt-0.5" @click="toggleSearchActive(false)" />
<IcRoundSearch v-else class="text-lg text-primary mx-1 mt-0.5" @click="toggleSearchActive(true)" />
</Transition>
</div>
<div class="flex-1">

2
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -186,7 +186,7 @@ onBeforeUnmount(reset)
>
<div
style="height: var(--header-height)"
:class="isOpen ? 'pl-6' : ''"
:class="isOpen ? 'pl-4' : ''"
class="flex items-center !bg-primary text-white px-1 gap-2"
>
<div

Loading…
Cancel
Save