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. 31
      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); 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-enter-active,
.glow-leave-active { .glow-leave-active {
@apply transition-all duration-300 ease-in-out; @apply transition-all duration-300 ease-in-out;

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

@ -14,6 +14,7 @@ import {
useProject, useProject,
useTable, useTable,
useTabs, useTabs,
useToggle,
useUIPermission, useUIPermission,
watchEffect, watchEffect,
} from '#imports' } from '#imports'
@ -33,6 +34,8 @@ const { deleteTable } = useTable()
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
const [searchActive, toggleSearchActive] = useToggle()
const isLocked = inject('TreeViewIsLockedInj') const isLocked = inject('TreeViewIsLockedInj')
let key = $ref(0) let key = $ref(0)
@ -126,8 +129,6 @@ const contextMenuTarget = reactive<{ type?: 'table' | 'main'; value?: any }>({})
const setMenuContext = (type: 'table' | 'main', value?: any) => { const setMenuContext = (type: 'table' | 'main', value?: any) => {
contextMenuTarget.type = type contextMenuTarget.type = type
contextMenuTarget.value = value contextMenuTarget.value = value
// $e('c:table:create:navdraw:right-click')
} }
const reloadTables = async () => { const reloadTables = async () => {
@ -215,12 +216,26 @@ function openTableCreateDialog() {
<div class="nc-treeview-container flex flex-col"> <div class="nc-treeview-container flex flex-col">
<a-dropdown :trigger="['contextmenu']" overlay-class-name="nc-dropdown-tree-view-context-menu"> <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="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')"> <div class="min-h-[36px] 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"> <Transition name="slide-left" mode="out-in">
{{ $t('objects.tables') }} <a-input
v-if="searchActive"
<template v-if="tables?.length"> ({{ tables.length }}) </template> v-model:value="filterQuery"
</span> 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>
<div class="flex-1"> <div class="flex-1">

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

@ -186,7 +186,7 @@ onBeforeUnmount(reset)
> >
<div <div
style="height: var(--header-height)" 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" class="flex items-center !bg-primary text-white px-1 gap-2"
> >
<div <div

Loading…
Cancel
Save