From 2f58007af4f32207fe4be9fc15bb43916e8e0abc Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Sat, 20 Feb 2021 11:55:34 +0100 Subject: [PATCH] feat(UI): search filter in explore bar --- .../components/WorkspaceExploreBar.vue | 62 +++++++++++++++++-- .../WorkspaceExploreBarDatabase.vue | 57 ++++++++++++----- src/renderer/i18n/en-US.js | 3 +- .../store/modules/workspaces.store.js | 15 +++++ 4 files changed, 116 insertions(+), 21 deletions(-) diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue index a781b1ef..79491eff 100644 --- a/src/renderer/components/WorkspaceExploreBar.vue +++ b/src/renderer/components/WorkspaceExploreBar.vue @@ -27,6 +27,17 @@ /> +
+
+ + +
+
{ + this.explorebarWidthInterval = setTimeout(() => { this.changeExplorebarSize(val); }, 500); }, isSelected (val) { if (val) this.localWidth = this.explorebarSize; + }, + searchTerm () { + clearTimeout(this.searchTermInterval); + + this.searchTermInterval = setTimeout(() => { + this.setSearchTerm(this.searchTerm); + }, 200); } }, created () { @@ -229,6 +249,7 @@ export default { refreshStructure: 'workspaces/refreshStructure', changeBreadcrumbs: 'workspaces/changeBreadcrumbs', selectTab: 'workspaces/selectTab', + setSearchTerm: 'workspaces/setSearchTerm', addNotification: 'notifications/addNotification', changeExplorebarSize: 'settings/changeExplorebarSize' }), @@ -481,9 +502,40 @@ export default { } } + .workspace-explorebar-search { + width: 100%; + display: flex; + justify-content: space-between; + font-size: 0.6rem; + height: 28px; + + .has-icon-right { + width: 100%; + padding: 0.1rem; + + .form-icon { + opacity: 0.5; + transition: opacity 0.2s; + } + + .form-input { + height: 1.2rem; + padding-left: 0.2rem; + + &:focus + .form-icon { + opacity: 0.9; + } + + &::placeholder { + opacity: 0.6; + } + } + } + } + .workspace-explorebar-body { width: 100%; - height: calc((100vh - 30px) - #{$excluding-size}); + height: calc((100vh - 58px) - #{$excluding-size}); overflow: overlay; padding: 0 0.1rem; } diff --git a/src/renderer/components/WorkspaceExploreBarDatabase.vue b/src/renderer/components/WorkspaceExploreBarDatabase.vue index 82ee3c34..f216c7f9 100644 --- a/src/renderer/components/WorkspaceExploreBarDatabase.vue +++ b/src/renderer/components/WorkspaceExploreBarDatabase.vue @@ -15,7 +15,7 @@
  • - {{ table.name }} +
    -
    +
    @@ -47,7 +47,7 @@
    @@ -65,7 +65,7 @@
    -
    +
    @@ -75,7 +75,7 @@
    @@ -93,7 +93,7 @@
    -
    +
    @@ -103,7 +103,7 @@
    @@ -121,7 +121,7 @@
    -
    +
    @@ -131,7 +131,7 @@
    @@ -170,8 +170,27 @@ export default { computed: { ...mapGetters({ getLoadedSchemas: 'workspaces/getLoadedSchemas', - getWorkspace: 'workspaces/getWorkspace' + getWorkspace: 'workspaces/getWorkspace', + getSearchTerm: 'workspaces/getSearchTerm' }), + searchTerm () { + return this.getSearchTerm(this.connection.uid); + }, + filteredTables () { + return this.database.tables.filter(table => table.name.search(this.searchTerm) >= 0); + }, + filteredTriggers () { + return this.database.triggers.filter(trigger => trigger.name.search(this.searchTerm) >= 0); + }, + filteredProcedures () { + return this.database.procedures.filter(procedure => procedure.name.search(this.searchTerm) >= 0); + }, + filteredFunctions () { + return this.database.functions.filter(func => func.name.search(this.searchTerm) >= 0); + }, + filteredSchedulers () { + return this.database.schedulers.filter(scheduler => scheduler.name.search(this.searchTerm) >= 0); + }, breadcrumbs () { return this.getWorkspace(this.connection.uid).breadcrumbs; }, @@ -222,6 +241,14 @@ export default { setBreadcrumbs (payload) { if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return; this.changeBreadcrumbs(payload); + }, + highlightWord (string) { + if (this.searchTerm) { + const regexp = new RegExp(`(${this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi'); + return string.replace(regexp, '$1'); + } + else + return string; } } }; diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js index 2c3568ac..46cd38cd 100644 --- a/src/renderer/i18n/en-US.js +++ b/src/renderer/i18n/en-US.js @@ -184,7 +184,8 @@ module.exports = { enableSsl: 'Enable SSL', manualValue: 'Manual value', tableFiller: 'Table Filler', - fakeDataLanguage: 'Fake data language' + fakeDataLanguage: 'Fake data language', + searchForElements: 'Search for elements' }, faker: { address: 'Address', diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js index 7af567f8..0a7ec1ac 100644 --- a/src/renderer/store/modules/workspaces.store.js +++ b/src/renderer/store/modules/workspaces.store.js @@ -43,6 +43,9 @@ export default { getLoadedSchemas: state => uid => { return state.workspaces.find(workspace => workspace.uid === uid).loaded_schemas; }, + getSearchTerm: state => uid => { + return state.workspaces.find(workspace => workspace.uid === uid).search_term; + }, isUnsavedDiscardModal: state => { return state.is_unsaved_discard_modal; } @@ -141,6 +144,14 @@ export default { } : workspace); }, + SET_SEARCH_TERM (state, { uid, term }) { + state.workspaces = state.workspaces.map(workspace => workspace.uid === uid + ? { + ...workspace, + search_term: term + } + : workspace); + }, NEW_TAB (state, { uid, tab }) { tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1; const newTab = { @@ -368,6 +379,7 @@ export default { uid, connected: false, selected_tab: 0, + search_term: '', tabs: [], structure: {}, variables: [], @@ -415,6 +427,9 @@ export default { if (payload.schema) commit('ADD_LOADED_SCHEMA', { uid: getters.getSelected, schema: payload.schema }); }, + setSearchTerm ({ commit, getters }, term) { + commit('SET_SEARCH_TERM', { uid: getters.getSelected, term }); + }, newTab ({ commit }, uid) { const tab = uidGen('T');