github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat(gui): add table list filter option 

re #783

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/764/head
Pranav C 3 years ago
parent
489db05324
commit
6ffdc57b44
1 changed files with 57 additions and 22 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 79
      packages/nc-gui/components/ProjectTreeView.vue

79
packages/nc-gui/components/ProjectTreeView.vue
Unescape 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,
@ -934,7 +951,7 @@ export default {
this.miniExpanded = false;
}
},
onExcelImport(){
onExcelImport() {
if (!this.menuItem || this.menuItem.type !== 'tableDir') {
this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
}
@ -1165,7 +1182,7 @@ export default {
await this.loadViews(this.menuItem);
this.$toast.success('Views refreshed').goAway(1000);
} else if (action === 'IMPORT_EXCEL') {
this.excelImportDialog=true
this.excelImportDialog = true
} else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
await this.loadFunctions(this.menuItem);
this.$toast.success('Functions refreshed').goAway(1000);
@ -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>
<!--

Write Preview
Loading…
Cancel
Save