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
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 77
      packages/nc-gui/components/ProjectTreeView.vue

77
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; &lt;!&ndash; <v-icon v-else>mdi-arrow-expand-horizontal</v-icon>&ndash;&gt;
</v-btn>--> </v-btn>-->
<!-- <v-text-field--> <v-text-field
<!-- v-model="search"--> v-model="search"
<!-- label="Search Project"--> placeholder="Search tables"
<!-- dense--> dense
<!-- solo--> hide-details
<!-- hide-details--> class="elevation-0 mr-2 pl-3 pr-1 caption nc-table-list-filter"
<!-- clearable--> >
<!-- clear-icon="mdi-close-circle-outline"--> <template #prepend-inner>
<!-- class="pa-2"--> <v-icon small class="mt-2 ml-2 mr-1 ">
<!-- ></v-text-field>--> 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-skeleton-loader
v-if="!projects || !projects.length" v-if="!projects || !projects.length"
@ -108,7 +116,7 @@
</v-tooltip> </v-tooltip>
</template> </template>
</v-treeview> </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"> <v-list dense expand class="nc-project-tree nc-single-env-project-tree">
<template v-for="item in listViewArr"> <template v-for="item in listViewArr">
<!-- v-if="item.children && item.children.length"--> <!-- v-if="item.children && item.children.length"-->
@ -116,7 +124,7 @@
v-if="isNested(item) && showNode(item)" v-if="isNested(item) && showNode(item)"
:key="item.type" :key="item.type"
color="textColor" color="textColor"
:value="isActiveList(item)" :value="isActiveList(item) || search"
@click=" @click="
!(item.children && item.children.length) && addTab({ ...item }, false, false) !(item.children && item.children.length) && addTab({ ...item }, false, false)
" "
@ -131,7 +139,7 @@
<v-list-item-icon> <v-list-item-icon>
<v-icon <v-icon
v-if="open && icons[item._nodes.type].openIcon" v-if="open && icons[item._nodes.type].openIcon"
x-small small
style="cursor: auto" style="cursor: auto"
:color="icons[item._nodes.type].openColor" :color="icons[item._nodes.type].openColor"
> >
@ -139,7 +147,7 @@
</v-icon> </v-icon>
<v-icon <v-icon
v-else v-else
x-small small
style="cursor: auto" style="cursor: auto"
:color="icons[item._nodes.type].color" :color="icons[item._nodes.type].color"
> >
@ -149,17 +157,25 @@
<v-list-item-title> <v-list-item-title>
<v-tooltip v-if="!isNonAdminAccessAllowed(item)" top> <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
<template #activator="{ on }"> <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> {{ item.name }}</span>
</template> </template>
<span class="caption">Only visible to Creator</span> <span class="caption">Only visible to Creator</span>
</v-tooltip> </v-tooltip>
<span <template
v-else v-else
class="caption font-weight-regular"
@dblclick="showSqlClient = true"
> >
<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> {{ item.name }}</span>
</template>
</v-list-item-title> </v-list-item-title>
<v-spacer /> <v-spacer />
@ -186,6 +202,7 @@
<v-list-item-group :value="selectedItem"> <v-list-item-group :value="selectedItem">
<v-list-item <v-list-item
v-for="child in item.children || []" v-for="child in item.children || []"
v-show="!search || child.name.toLowerCase().includes(search.toLowerCase())"
:key="child.key" :key="child.key"
color="x-active" color="x-active"
active-class="font-weight-bold" active-class="font-weight-bold"
@ -713,7 +730,7 @@ export default {
open: [], open: [],
search: null, search: null,
menuVisible: false, menuVisible: false,
excelImportDialog:false, excelImportDialog: false,
x: 0, x: 0,
y: 0, y: 0,
menuItem: null, menuItem: null,
@ -934,7 +951,7 @@ export default {
this.miniExpanded = false; this.miniExpanded = false;
} }
}, },
onExcelImport(){ onExcelImport() {
if (!this.menuItem || this.menuItem.type !== 'tableDir') { if (!this.menuItem || this.menuItem.type !== 'tableDir') {
this.menuItem = this.listViewArr.find(n => n.type === 'tableDir'); this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
} }
@ -1165,7 +1182,7 @@ export default {
await this.loadViews(this.menuItem); await this.loadViews(this.menuItem);
this.$toast.success('Views refreshed').goAway(1000); this.$toast.success('Views refreshed').goAway(1000);
} else if (action === 'IMPORT_EXCEL') { } else if (action === 'IMPORT_EXCEL') {
this.excelImportDialog=true this.excelImportDialog = true
} else if (action === 'ENV_DB_FUNCTIONS_REFRESH') { } else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
await this.loadFunctions(this.menuItem); await this.loadFunctions(this.menuItem);
this.$toast.success('Functions refreshed').goAway(1000); this.$toast.success('Functions refreshed').goAway(1000);
@ -1768,6 +1785,24 @@ export default {
.nested:hover .action { .nested:hover .action {
opacity: 1; 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> </style>
<!-- <!--

Write Preview
Loading…
Cancel
Save