From ed6e7fa72d04bd40989bbf0b832cd26e12b2f644 Mon Sep 17 00:00:00 2001 From: Fabio Di Stasio Date: Wed, 14 Jul 2021 16:10:34 +0200 Subject: [PATCH] refactor(UI): improved breadcrumbs and tabs --- src/renderer/components/Workspace.vue | 17 ++++++++++++++++- .../components/WorkspaceExploreBarSchema.vue | 2 +- src/renderer/components/WorkspaceQueryTab.vue | 10 +++++++++- src/renderer/components/WorkspaceQueryTable.vue | 4 +++- .../components/WorkspaceQueryTableRow.vue | 5 ++++- src/renderer/components/WorkspaceTableTab.vue | 17 ++++++++++++----- src/renderer/scss/themes/dark-theme.scss | 6 ++++++ src/renderer/store/modules/workspaces.store.js | 3 ++- 8 files changed, 53 insertions(+), 11 deletions(-) diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue index 03b388bd..47df4f4e 100644 --- a/src/renderer/components/Workspace.vue +++ b/src/renderer/components/Workspace.vue @@ -186,6 +186,7 @@ :is-selected="selectedTab === tab.uid" :table="tab.table" :schema="tab.schema" + :element-type="tab.element" /> @@ -383,15 +384,25 @@ export default { flex: initial; > a { - padding: 0.2rem 0.8rem; + padding: 0.2rem 0.6rem; cursor: pointer; display: flex; align-items: center; opacity: 0.7; transition: opacity 0.2s; + .btn-clear { + margin-left: 0.5rem; + opacity: 0; + transition: opacity 0.2s; + } + &:hover { opacity: 1; + + .btn-clear { + opacity: 1; + } } &.tab-add { @@ -410,6 +421,10 @@ export default { &.active a { opacity: 1; + + .btn-clear { + opacity: 1; + } } &.tools-dropdown { diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue index c52199be..648cdbb5 100644 --- a/src/renderer/components/WorkspaceExploreBarSchema.vue +++ b/src/renderer/components/WorkspaceExploreBarSchema.vue @@ -294,7 +294,7 @@ export default { this.$emit('show-schema-context', { event, schema }); }, showTableContext (event, table) { - this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name }); + // this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name }); this.$emit('show-table-context', { event, table }); }, showMiscContext (event, misc) { diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue index c5388ce4..b9081b89 100644 --- a/src/renderer/components/WorkspaceQueryTab.vue +++ b/src/renderer/components/WorkspaceQueryTab.vue @@ -163,8 +163,15 @@ export default { return this.workspace.uid === this.selectedWorkspace; } }, + watch: { + isSelected (val) { + if (val) + this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` }); + } + }, created () { this.query = this.tab.content; + this.changeBreadcrumbs({ schema: this.schema, query: `Query #${this.tab.index}` }); window.addEventListener('keydown', this.onKey); }, @@ -186,7 +193,8 @@ export default { }, methods: { ...mapActions({ - addNotification: 'notifications/addNotification' + addNotification: 'notifications/addNotification', + changeBreadcrumbs: 'workspaces/changeBreadcrumbs' }), async runQuery (query) { if (!query || this.isQuering) return; diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue index 2e470b85..5bb6c15f 100644 --- a/src/renderer/components/WorkspaceQueryTable.vue +++ b/src/renderer/components/WorkspaceQueryTable.vue @@ -71,6 +71,7 @@ :row="row" :fields="fieldsObj" :key-usage="keyUsage" + :element-type="elementType" :class="{'selected': selectedRows.includes(row._id)}" @select-row="selectRow($event, row._id)" @update-field="updateField($event, row)" @@ -123,7 +124,8 @@ export default { results: Array, connUid: String, mode: String, - isSelected: Boolean + isSelected: Boolean, + elementType: { type: String, default: 'table' } }, data () { return { diff --git a/src/renderer/components/WorkspaceQueryTableRow.vue b/src/renderer/components/WorkspaceQueryTableRow.vue index 03c3b493..111dc388 100644 --- a/src/renderer/components/WorkspaceQueryTableRow.vue +++ b/src/renderer/components/WorkspaceQueryTableRow.vue @@ -260,7 +260,8 @@ export default { props: { row: Object, fields: Object, - keyUsage: Array + keyUsage: Array, + elementType: { type: String, default: 'table' } }, data () { return { @@ -334,6 +335,8 @@ export default { return this.keyUsage.map(key => key.field); }, isEditable () { + if (this.elementType === 'view') return false; + if (this.fields) { const nElements = Object.keys(this.fields).reduce((acc, curr) => { acc.add(this.fields[curr].table); diff --git a/src/renderer/components/WorkspaceTableTab.vue b/src/renderer/components/WorkspaceTableTab.vue index b04c33bb..20913a9a 100644 --- a/src/renderer/components/WorkspaceTableTab.vue +++ b/src/renderer/components/WorkspaceTableTab.vue @@ -131,6 +131,7 @@ :conn-uid="connection.uid" :is-selected="isSelected" mode="table" + :element-type="elementType" @update-field="updateField" @delete-selected="deleteSelected" @hard-sort="hardSort" @@ -183,7 +184,8 @@ export default { connection: Object, isSelected: Boolean, table: String, - schema: String + schema: String, + elementType: String }, data () { return { @@ -261,9 +263,11 @@ export default { } }, isSelected (val) { - if (val && this.lastTable !== this.table) { - this.getTableData(); - this.lastTable = this.table; + if (val) { + this.changeBreadcrumbs({ schema: this.schema, [this.elementType]: this.table }); + + if (this.lastTable !== this.table) + this.getTableData(); } } }, @@ -277,7 +281,8 @@ export default { }, methods: { ...mapActions({ - addNotification: 'notifications/addNotification' + addNotification: 'notifications/addNotification', + changeBreadcrumbs: 'workspaces/changeBreadcrumbs' }), async getTableData (sortParams) { if (!this.table) return; @@ -287,6 +292,8 @@ export default { if (this.lastTable !== this.table) this.results = []; + this.lastTable = this.table; + const params = { uid: this.connection.uid, schema: this.schema, diff --git a/src/renderer/scss/themes/dark-theme.scss b/src/renderer/scss/themes/dark-theme.scss index 839ef854..f48e1582 100644 --- a/src/renderer/scss/themes/dark-theme.scss +++ b/src/renderer/scss/themes/dark-theme.scss @@ -63,6 +63,12 @@ background-color: $primary-color; } } + + &.btn-clear { + &:hover { + background: rgba($light-color, 20%); + } + } } .modal { diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js index ab050f46..b5a720ea 100644 --- a/src/renderer/store/modules/workspaces.store.js +++ b/src/renderer/store/modules/workspaces.store.js @@ -472,7 +472,8 @@ export default { procedure: null, function: null, scheduler: null, - view: null + view: null, + query: null }; const hasLastChildren = Object.keys(lastBreadcrumbs).filter(b => b !== 'schema').some(b => lastBreadcrumbs[b]);