clone/nocodb
1
0
Fork 0
mirror of https://github.com/nocodb/nocodb.git synced 2026-05-03 13:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(gui): add table list filter option (re-submission)

Browse Source 
Signed-off-by: Raju Udava <sivadstala@gmail.com>
This commit is contained in:
Raju Udava
2021-11-25 09:35:38 +05:30
parent 34abf0de30
commit 0f77b86d83
1 changed files with 55 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
packages/nc-gui/components/ProjectTreeView.vue
View File

@@ -26,16 +26,24 @@
&lt;!&ndash; <v-icon v-else>mdi-arrow-expand-horizontal</v-icon>&ndash;&gt;
</v-btn>-->
<!-- <v-text-field-->
<!-- v-model="search"-->
<!-- label="Search Project"-->
<!-- dense-->
<!-- solo-->
<!-- hide-details-->
<!-- clearable-->
<!-- clear-icon="mdi-close-circle-outline"-->
<!-- class="pa-2"-->
<!-- ></v-text-field>-->
<v-text-field
v-model="search"
placeholder="Search tables"
dense
hide-details
class="elevation-0 mr-2 pl-3 pr-1 caption nc-table-list-filter"
>
<template #prepend-inner>
<v-icon small class="mt-2 ml-2 mr-1 ">
mdi-magnify
</v-icon>
</template>
<template #append>
<v-icon v-if="search" class="mt-3 mr-3" color="grey" x-small @click="search=''">
mdi-close
</v-icon>
</template>
</v-text-field>
<v-skeleton-loader
v-if="!projects || !projects.length"
@@ -108,7 +116,7 @@
</v-tooltip>
</template>
</v-treeview>
<v-container v-else fluid class="px-1">
<v-container v-else fluid class="px-1 pt-0">
<v-list dense expand class="nc-project-tree nc-single-env-project-tree">
<template v-for="item in listViewArr">
<!-- v-if="item.children && item.children.length"-->
@@ -116,7 +124,7 @@
v-if="isNested(item) && showNode(item)"
:key="item.type"
color="textColor"
:value="isActiveList(item)"
:value="isActiveList(item) || search"
@click="
!(item.children && item.children.length) && addTab({ ...item }, false, false)
"
@@ -131,7 +139,7 @@
<v-list-item-icon>
<v-icon
v-if="open && icons[item._nodes.type].openIcon"
x-small
small
style="cursor: auto"
:color="icons[item._nodes.type].openColor"
>
@@ -139,7 +147,7 @@
</v-icon>
<v-icon
v-else
x-small
small
style="cursor: auto"
:color="icons[item._nodes.type].color"
>
@@ -149,17 +157,25 @@
<v-list-item-title>
<v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
<template #activator="{ on }">
<span class="caption font-weight-regular" v-on="on">
<span v-if="item.type === 'tableDir'" class="caption font-weight-regular" v-on="on">
Tables<template v-if="item.children && item.children.length"> ({{
item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
}})</template></span>
<span v-else class="caption font-weight-regular" v-on="on">
{{ item.name }}</span>
</template>
<span class="caption">Only visible to Creator</span>
</v-tooltip>
<span
<template
v-else
class="caption font-weight-regular"
@dblclick="showSqlClient = true"
>
{{ item.name }}</span>
<span v-if="item.type === 'tableDir'" class="caption font-weight-regular" v-on="on">
Tables<template v-if="item.children && item.children.length"> ({{
item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
}})</template></span>
<span v-else class="caption font-weight-regular" v-on="on">
{{ item.name }}</span>
</template>
</v-list-item-title>
<v-spacer />
@@ -186,6 +202,7 @@
<v-list-item-group :value="selectedItem">
<v-list-item
v-for="child in item.children || []"
v-show="!search || child.name.toLowerCase().includes(search.toLowerCase())"
:key="child.key"
color="x-active"
active-class="font-weight-bold"
@@ -713,7 +730,7 @@ export default {
open: [],
search: null,
menuVisible: false,
excelImportDialog:false,
excelImportDialog: false,
x: 0,
y: 0,
menuItem: null,
@@ -1768,6 +1785,24 @@ export default {
.nested:hover .action {
opacity: 1;
}
/deep/ .nc-table-list-filter .v-input__slot {
min-height: 30px !important;
}
/deep/ .nc-table-list-filter .v-input__slot label {
top: 6px;
}
/deep/ .nc-table-list-filter.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
border-top-color: rgba(0, 0, 0, 0.12) !important;
}
/deep/ .nc-table-list-filter.theme--dark.v-text-field > .v-input__control > .v-input__slot:before {
border-top-color: rgba(255, 255, 255, 0.12) !important;
}
</style>
<!--