From 68b128c5504e106bddbe6c9cd349f7ee618997b6 Mon Sep 17 00:00:00 2001 From: Fabio Date: Fri, 12 Jun 2020 18:10:45 +0200 Subject: [PATCH] Added table tab --- package-lock.json | 30 ---- package.json | 2 - src/main/libs/AntaresConnector.js | 25 ++++ src/renderer/components/BaseVirtualScroll.vue | 2 +- src/renderer/components/Workspace.vue | 106 ++++++++++++- .../components/WorkspaceExploreBar.vue | 2 +- src/renderer/components/WorkspaceQueryRow.vue | 43 ------ src/renderer/components/WorkspaceQueryTab.vue | 45 ++---- .../components/WorkspaceQueryTable.vue | 34 +++-- src/renderer/components/WorkspaceTableTab.vue | 140 ++++++++++++++++++ src/renderer/i18n/en-US.js | 3 +- src/renderer/main.js | 1 - .../store/modules/workspaces.store.js | 14 +- 13 files changed, 309 insertions(+), 138 deletions(-) delete mode 100644 src/renderer/components/WorkspaceQueryRow.vue create mode 100644 src/renderer/components/WorkspaceTableTab.vue diff --git a/package-lock.json b/package-lock.json index 2a514d75..b38cd110 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10931,11 +10931,6 @@ "ajv-keywords": "^3.4.1" } }, - "scrollparent": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/scrollparent/-/scrollparent-2.0.1.tgz", - "integrity": "sha1-cV1bnMV3YPsivczDvvtb/gaxoxc=" - }, "scss-tokenizer": { "version": "0.2.3", "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz", @@ -12848,16 +12843,6 @@ "vue-style-loader": "^4.1.0" } }, - "vue-observe-visibility": { - "version": "0.4.6", - "resolved": "https://registry.npmjs.org/vue-observe-visibility/-/vue-observe-visibility-0.4.6.tgz", - "integrity": "sha512-xo0CEVdkjSjhJoDdLSvoZoQrw/H2BlzB5jrCBKGZNXN2zdZgMuZ9BKrxXDjNP2AxlcCoKc8OahI3F3r3JGLv2Q==" - }, - "vue-resize": { - "version": "0.4.5", - "resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-0.4.5.tgz", - "integrity": "sha512-bhP7MlgJQ8TIkZJXAfDf78uJO+mEI3CaLABLjv0WNzr4CcGRGPIAItyWYnP6LsPA4Oq0WE+suidNs6dgpO4RHg==" - }, "vue-style-loader": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", @@ -12884,21 +12869,6 @@ "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", "dev": true }, - "vue-virtual-scroll-list": { - "version": "2.2.9", - "resolved": "https://registry.npmjs.org/vue-virtual-scroll-list/-/vue-virtual-scroll-list-2.2.9.tgz", - "integrity": "sha512-dPlvzIUUtxkaVBVea2/73sWsiTrsIpjWXd+7FWJPUEL+ME1i6LuwWNiMMqu2WVad82ONWeoXSiM5NMSDpMxYGA==" - }, - "vue-virtual-scroller": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/vue-virtual-scroller/-/vue-virtual-scroller-1.0.10.tgz", - "integrity": "sha512-Hn4qSBDhRY4XdngPioYy/ykDjrLX/NMm1fQXm/4UQQ/Xv1x8JbHGFZNftQowTcfICgN7yc31AKnUk1UGLJ2ndA==", - "requires": { - "scrollparent": "^2.0.1", - "vue-observe-visibility": "^0.4.4", - "vue-resize": "^0.4.5" - } - }, "vuedraggable": { "version": "2.23.2", "resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.23.2.tgz", diff --git a/package.json b/package.json index 9f0395d5..0e96e045 100644 --- a/package.json +++ b/package.json @@ -41,8 +41,6 @@ "spectre.css": "^0.5.8", "vue-click-outside": "^1.1.0", "vue-i18n": "^8.18.2", - "vue-virtual-scroll-list": "^2.2.9", - "vue-virtual-scroller": "^1.0.10", "vuedraggable": "^2.23.2", "vuex": "^3.4.0", "vuex-persist": "^2.2.0" diff --git a/src/main/libs/AntaresConnector.js b/src/main/libs/AntaresConnector.js index f9e86836..6c2b40b7 100644 --- a/src/main/libs/AntaresConnector.js +++ b/src/main/libs/AntaresConnector.js @@ -7,6 +7,17 @@ export class AntaresConnector { this.params = args.params; this.poolSize = args.poolSize || false; this.connection = null; + + this.query = { + select: [], + from: '', + where: [], + groupBy: [], + orderBy: [], + join: [], + update: [], + insert: [] + }; } connect () { @@ -28,6 +39,20 @@ export class AntaresConnector { } } + // select (args) { + // const type = typeof args; + + // switch (type) { + // case string: + // case number: + // this.query.select; + // break; + + // default: + // break; + // } + // } + async raw (sql) { switch (this.client) { case 'maria': diff --git a/src/renderer/components/BaseVirtualScroll.vue b/src/renderer/components/BaseVirtualScroll.vue index 9a0de319..2bd1d80c 100644 --- a/src/renderer/components/BaseVirtualScroll.vue +++ b/src/renderer/components/BaseVirtualScroll.vue @@ -47,7 +47,7 @@ export default { }, methods: { checkScrollPosition (e = {}) { - var el = this.$el; + const el = this.$el; // prevent parent scroll if ((el.scrollTop === 0 && e.deltaY < 0) || (Math.abs(el.scrollTop - (el.scrollHeight - el.clientHeight)) <= 1 && e.deltaY > 0)) diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue index f62b06c1..72d65abe 100644 --- a/src/renderer/components/Workspace.vue +++ b/src/renderer/components/Workspace.vue @@ -4,15 +4,37 @@
- + +
@@ -22,12 +44,14 @@ import { mapGetters, mapActions } from 'vuex'; import Connection from '@/ipc-api/Connection'; import WorkspaceExploreBar from '@/components/WorkspaceExploreBar'; import WorkspaceQueryTab from '@/components/WorkspaceQueryTab'; +import WorkspaceTableTab from '@/components/WorkspaceTableTab'; export default { name: 'Workspace', components: { WorkspaceExploreBar, - WorkspaceQueryTab + WorkspaceQueryTab, + WorkspaceTableTab }, props: { connection: Object @@ -44,7 +68,10 @@ export default { return this.selectedWorkspace === this.connection.uid; }, selectedTab () { - return this.workspace.tabs.filter(tab => tab.selected).uid || this.workspace.tabs[0].uid; + return this.workspace.selected_tab || this.queryTabs[0].uid; + }, + queryTabs () { + return this.workspace.tabs.filter(tab => tab.type === 'query'); } }, async created () { @@ -58,7 +85,8 @@ export default { addNotification: 'notifications/addNotification', addWorkspace: 'workspaces/addWorkspace', connectWorkspace: 'workspaces/connectWorkspace', - removeConnected: 'workspaces/removeConnected' + removeConnected: 'workspaces/removeConnected', + selectTab: 'workspaces/selectTab' }) } }; @@ -78,7 +106,71 @@ export default { margin-top: 0; .tab-item{ - max-width: 6rem; + max-width: 12rem; + width: fit-content; + flex: initial; + + &.active a{ + opacity: 1; + } + + > a{ + padding: .2rem .8rem; + color: $body-font-color; + cursor: pointer; + display: flex; + align-items: center; + opacity: .7; + transition: opacity .2s; + + &:hover{ + opacity: 1; + } + + > span { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + } + } + } + } + + .workspace-query-results{ + overflow: auto; + white-space: nowrap; + + .table{ + width: auto; + border-collapse: separate; + + .tr:focus{ + background: rgba($color: #000000, $alpha: .3); + } + + .th{ + position: sticky; + top: 0; + background: $bg-color; + border: 1px solid; + border-left: none; + border-color: $bg-color-light; + padding: .1rem .4rem; + font-weight: 700; + font-size: .7rem; + } + + .td{ + border-right: 1px solid; + border-bottom: 1px solid; + border-color: $bg-color-light; + padding: 0 .4rem; + text-overflow: ellipsis; + max-width: 200px; + white-space: nowrap; + overflow: hidden; + font-size: .7rem; } } } diff --git a/src/renderer/components/WorkspaceExploreBar.vue b/src/renderer/components/WorkspaceExploreBar.vue index 4fb7533b..a92c6332 100644 --- a/src/renderer/components/WorkspaceExploreBar.vue +++ b/src/renderer/components/WorkspaceExploreBar.vue @@ -161,7 +161,7 @@ export default { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - display: flex; + display: block; align-items: center; } diff --git a/src/renderer/components/WorkspaceQueryRow.vue b/src/renderer/components/WorkspaceQueryRow.vue deleted file mode 100644 index 4b71b246..00000000 --- a/src/renderer/components/WorkspaceQueryRow.vue +++ /dev/null @@ -1,43 +0,0 @@ - - - - - diff --git a/src/renderer/components/WorkspaceQueryTab.vue b/src/renderer/components/WorkspaceQueryTab.vue index b88c768d..20465df7 100644 --- a/src/renderer/components/WorkspaceQueryTab.vue +++ b/src/renderer/components/WorkspaceQueryTab.vue @@ -17,8 +17,13 @@ save -
- {{ $t('word.schema') }}: {{ workspace.breadcrumbs.database }} +
+
+ {{ $t('word.results') }}: {{ results.rows.length }} +
+
+ {{ $t('word.schema') }}: {{ workspace.breadcrumbs.database }} +
@@ -112,40 +117,12 @@ export default { margin-right: .4rem; } } - } - } - .workspace-query-results{ - overflow: auto; - white-space: nowrap; + .workspace-query-info{ + display: flex; - .table{ - width: auto; - - .tr:focus{ - background: rgba($color: #000000, $alpha: .3); - } - - .th{ - position: sticky; - top: 0; - background: $bg-color; - border-color: $bg-color-light; - padding: .1rem .4rem; - font-weight: 400; - } - - .td{ - border-left: 1px solid; - border-color: $bg-color-light; - padding: 0 .4rem; - text-overflow: ellipsis; - max-width: 200px; - white-space: nowrap; - overflow: hidden; - - &:first-child{ - border-left: none; + > div + div{ + padding-left: .6rem; } } } diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue index 103cf9a3..87be198b 100644 --- a/src/renderer/components/WorkspaceQueryTable.vue +++ b/src/renderer/components/WorkspaceQueryTable.vue @@ -2,7 +2,7 @@
@@ -32,6 +32,7 @@ :key="cKey" class="td" :class="fieldType(col)" + :style="{'display': cKey === '_id'? 'none' : ''}" > {{ col }}
@@ -43,6 +44,7 @@ + + diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js index 92c6e53f..6fb652ed 100644 --- a/src/renderer/i18n/en-US.js +++ b/src/renderer/i18n/en-US.js @@ -28,7 +28,8 @@ module.exports = { version: 'Version', donate: 'Donate', run: 'Run', - schema: 'Schema' + schema: 'Schema', + results: 'Results' }, message: { appWelcome: 'Welcome to Antares SQL Client!', diff --git a/src/renderer/main.js b/src/renderer/main.js index 277bb42c..25ea026c 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -2,7 +2,6 @@ import Vue from 'vue'; -import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'; import 'material-design-icons/iconfont/material-icons.css'; import '@/scss/main.scss'; diff --git a/src/renderer/store/modules/workspaces.store.js b/src/renderer/store/modules/workspaces.store.js index 206a0388..774e8073 100644 --- a/src/renderer/store/modules/workspaces.store.js +++ b/src/renderer/store/modules/workspaces.store.js @@ -59,7 +59,8 @@ export default { NEW_TAB (state, uid) { const newTab = { uid: uidGen(), - selected: false + selected: false, + type: 'query' }; state.workspaces = state.workspaces.map(workspace => { if (workspace.uid === uid) { @@ -71,6 +72,9 @@ export default { else return workspace; }); + }, + SELECT_TAB (state, { uid, tab }) { + state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace); } }, actions: { @@ -109,14 +113,15 @@ export default { const workspace = { uid, connected: false, - tabs: [], + selectedTab: 0, + tabs: [{ uid: 1, type: 'table' }], structure: {}, breadcrumbs: {} }; commit('ADD_WORKSPACE', workspace); - if (!getters.getWorkspace(uid).tabs.length) + if (getters.getWorkspace(uid).tabs.length < 2) dispatch('newTab', uid); }, changeBreadcrumbs ({ commit, getters }, payload) { @@ -124,6 +129,9 @@ export default { }, newTab ({ commit }, uid) { commit('NEW_TAB', uid); + }, + selectTab ({ commit }, payload) { + commit('SELECT_TAB', payload); } } };