feat: support to multiple queries in the same tab

This commit is contained in:
Fabio 2020-09-06 08:41:57 +02:00
parent 3385744260
commit 48f77bae01
7 changed files with 171 additions and 100 deletions

View File

@ -53,13 +53,13 @@
"monaco-editor": "^0.20.0", "monaco-editor": "^0.20.0",
"mssql": "^6.2.1", "mssql": "^6.2.1",
"mysql": "^2.18.1", "mysql": "^2.18.1",
"pg": "^8.3.2", "pg": "^8.3.3",
"source-map-support": "^0.5.16", "source-map-support": "^0.5.16",
"spectre.css": "^0.5.9", "spectre.css": "^0.5.9",
"vue-click-outside": "^1.1.0", "vue-click-outside": "^1.1.0",
"vue-i18n": "^8.21.0", "vue-i18n": "^8.21.0",
"vue-the-mask": "^0.11.1", "vue-the-mask": "^0.11.1",
"vuedraggable": "^2.24.0", "vuedraggable": "^2.24.1",
"vuex": "^3.5.1", "vuex": "^3.5.1",
"vuex-persist": "^2.2.0" "vuex-persist": "^2.2.0"
}, },
@ -71,7 +71,7 @@
"electron-devtools-installer": "^3.1.1", "electron-devtools-installer": "^3.1.1",
"electron-webpack": "^2.8.2", "electron-webpack": "^2.8.2",
"electron-webpack-vue": "^2.4.0", "electron-webpack-vue": "^2.4.0",
"eslint": "^7.7.0", "eslint": "^7.8.1",
"eslint-config-standard": "^14.1.1", "eslint-config-standard": "^14.1.1",
"eslint-plugin-import": "^2.22.0", "eslint-plugin-import": "^2.22.0",
"eslint-plugin-node": "^11.1.0", "eslint-plugin-node": "^11.1.0",
@ -80,12 +80,12 @@
"eslint-plugin-vue": "^6.2.2", "eslint-plugin-vue": "^6.2.2",
"monaco-editor-webpack-plugin": "^1.9.0", "monaco-editor-webpack-plugin": "^1.9.0",
"node-sass": "^4.14.1", "node-sass": "^4.14.1",
"sass-loader": "^10.0.1", "sass-loader": "^10.0.2",
"standard-version": "^9.0.0", "standard-version": "^9.0.0",
"stylelint": "^13.6.1", "stylelint": "^13.7.0",
"stylelint-config-standard": "^20.0.0", "stylelint-config-standard": "^20.0.0",
"stylelint-scss": "^3.18.0", "stylelint-scss": "^3.18.0",
"vue": "^2.6.11", "vue": "^2.6.12",
"webpack": "^4.44.1" "webpack": "^4.44.1"
} }
} }

View File

@ -280,33 +280,44 @@ export class AntaresConnector {
* @memberof AntaresConnector * @memberof AntaresConnector
*/ */
async raw (sql) { async raw (sql) {
const resultsArr = [];
const queries = sql.split(';');
if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder if (process.env.NODE_ENV === 'development') this._logger(sql);// TODO: replace BLOB content with a placeholder
switch (this._client) { // TODO: uniform fields with every client type, needed table name and fields array for (const query of queries) {
case 'maria': if (!query) continue;
case 'mysql': {
const { rows, report, fields } = await new Promise((resolve, reject) => { switch (this._client) { // TODO: uniform fields with every client type, needed table name and fields array
this._connection.query(sql, (err, response, fields) => { case 'maria':
if (err) case 'mysql': {
reject(err); const { rows, report, fields } = await new Promise((resolve, reject) => {
else { this._connection.query(query, (err, response, fields) => {
resolve({ if (err)
rows: Array.isArray(response) ? response : false, reject(err);
report: !Array.isArray(response) ? response : false, else {
fields resolve({
}); rows: Array.isArray(response) ? response : false,
} report: !Array.isArray(response) ? response : false,
fields
});
}
});
}); });
}); resultsArr.push({ rows, report, fields });
return { rows, report, fields }; break;
}
case 'mssql': {
const results = await this._connection.request().query(query);
resultsArr.push({ rows: results.recordsets[0] });// TODO: fields
break;
}
default:
break;
} }
case 'mssql': {
const results = await this._connection.request().query(sql);
return { rows: results.recordsets[0] };// TODO: fields
}
default:
break;
} }
return resultsArr.length === 1 ? resultsArr[0] : resultsArr;
} }
/** /**

View File

@ -55,6 +55,11 @@
</a> </a>
</li> </li>
</ul> </ul>
<div v-show="selectedTab === 'prop'" class="column col-12">
<p class="px-2">
In future releases
</p>
</div>
<WorkspaceTableTab <WorkspaceTableTab
v-show="selectedTab === 'data'" v-show="selectedTab === 'data'"
:connection="connection" :connection="connection"

View File

@ -15,11 +15,11 @@
</button> </button>
</div> </div>
<div class="workspace-query-info"> <div class="workspace-query-info">
<div v-if="results.rows"> <div v-if="results[selectedResultsset] && results[selectedResultsset].rows">
{{ $t('word.results') }}: <b>{{ results.rows.length }}</b> {{ $t('word.results') }}: <b>{{ resultsCount }}</b>
</div> </div>
<div v-if="results.report"> <div v-if="results[selectedResultsset] && results[selectedResultsset].report">
{{ $t('message.affectedRows') }}: <b>{{ results.report.affectedRows }}</b> {{ $t('message.affectedRows') }}: <b>{{ affectedCount }}</b>
</div> </div>
<div v-if="workspace.breadcrumbs.schema"> <div v-if="workspace.breadcrumbs.schema">
{{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b> {{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b>
@ -66,8 +66,10 @@ export default {
query: '', query: '',
lastQuery: '', lastQuery: '',
isQuering: false, isQuering: false,
results: {}, results: [],
selectedFields: [] resultsCount: 0,
affectedCount: 0,
selectedResultsset: 0
}; };
}, },
computed: { computed: {
@ -77,11 +79,6 @@ export default {
workspace () { workspace () {
return this.getWorkspace(this.connection.uid); return this.getWorkspace(this.connection.uid);
}, },
table () {
if ('fields' in this.results && this.results.fields.length)
return this.results.fields[0].orgTable;
return '';
},
schema () { schema () {
if ('fields' in this.results && this.results.fields.length) if ('fields' in this.results && this.results.fields.length)
return this.results.fields[0].db; return this.results.fields[0].db;
@ -94,6 +91,11 @@ export default {
setTabFields: 'workspaces/setTabFields', setTabFields: 'workspaces/setTabFields',
setTabKeyUsage: 'workspaces/setTabKeyUsage' setTabKeyUsage: 'workspaces/setTabKeyUsage'
}), }),
getTable (index) {
if ('fields' in this.results[index] && this.results[index].fields.length)
return this.results[index].fields[0].orgTable;
return '';
},
async runQuery (query) { async runQuery (query) {
if (!query) return; if (!query) return;
this.isQuering = true; this.isQuering = true;
@ -107,56 +109,69 @@ export default {
}; };
const { status, response } = await Connection.rawQuery(params); const { status, response } = await Connection.rawQuery(params);
if (status === 'success') { if (status === 'success') {
this.results = response; this.results = Array.isArray(response) ? response : [response];
if (response.rows) { // if is a select
this.selectedFields = response.fields.map(field => field.orgName);
try { // Table data let selectedFields = [];
const params = { const fieldsArr = [];
uid: this.connection.uid, const keysArr = [];
schema: this.schema,
table: this.table
};
const { status, response } = await Tables.getTableColumns(params); for (const [index, result] of this.results.entries()) {
if (result.rows) { // if is a select
selectedFields = result.fields.map(field => field.orgName);
this.resultsCount += result.rows.length;
if (status === 'success') { try { // Table data
let fields = response.filter(field => this.selectedFields.includes(field.name)); const params = {
if (this.selectedFields.length) { uid: this.connection.uid,
fields = fields.map((field, index) => { schema: this.schema,
return { ...field, alias: this.results.fields[index].name }; table: this.getTable(index)
}); };
const { status, response } = await Tables.getTableColumns(params);
if (status === 'success') {
let fields = response.filter(field => selectedFields.includes(field.name));
if (selectedFields.length) {
fields = fields.map((field, index) => {
return { ...field, alias: result.fields[index].name };
});
}
fieldsArr.push(fields);
} }
else
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields }); this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
} }
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
try { // Key usage (foreign keys) try { // Key usage (foreign keys)
const params = { const params = {
uid: this.connection.uid, uid: this.connection.uid,
schema: this.schema, schema: this.schema,
table: this.table table: this.getTable(index)
}; };
const { status, response } = await Tables.getKeyUsage(params); const { status, response } = await Tables.getKeyUsage(params);
if (status === 'success') if (status === 'success')
this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: response }); keysArr.push(response);
else else
this.addNotification({ status: 'error', message: response }); this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
} }
catch (err) { else { // if is a query without results
this.addNotification({ status: 'error', message: err.stack }); this.affectedCount += result.report.affectedRows;
} }
} }
else { // if is a query without results console.log(fieldsArr);
} this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: fieldsArr });
this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: keysArr });
} }
else else
this.addNotification({ status: 'error', message: response }); this.addNotification({ status: 'error', message: response });
@ -172,7 +187,9 @@ export default {
this.runQuery(this.lastQuery); this.runQuery(this.lastQuery);
}, },
clearTabData () { clearTabData () {
this.results = {}; this.results = [];
this.resultsCount = 0;
this.affectedCount = 0;
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] }); this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
} }
} }

View File

@ -11,6 +11,17 @@
@delete-selected="deleteSelected" @delete-selected="deleteSelected"
@close-context="isContext = false" @close-context="isContext = false"
/> />
<ul v-if="results.length > 1" class="tab tab-block result-tabs">
<li
v-for="(result, index) in results"
:key="index"
class="tab-item"
:class="{'active': resultsetIndex === index}"
@click="selectResultset(index)"
>
<a>{{ result.fields[0].orgTable }} ({{ result.rows.length }})</a>
</li>
</ul>
<div ref="table" class="table table-hover"> <div ref="table" class="table table-hover">
<div class="thead"> <div class="thead">
<div class="tr"> <div class="tr">
@ -39,7 +50,7 @@
</div> </div>
</div> </div>
<BaseVirtualScroll <BaseVirtualScroll
v-if="results.rows" v-if="results[resultsetIndex] && results[resultsetIndex].rows"
ref="resultTable" ref="resultTable"
:items="sortedResults" :items="sortedResults"
:item-height="22" :item-height="22"
@ -81,7 +92,7 @@ export default {
TableContext TableContext
}, },
props: { props: {
results: Object, results: Array,
tabUid: [String, Number] tabUid: [String, Number]
}, },
data () { data () {
@ -93,7 +104,9 @@ export default {
selectedCell: null, selectedCell: null,
selectedRows: [], selectedRows: [],
currentSort: '', currentSort: '',
currentSortDir: 'asc' currentSortDir: 'asc',
resultsetIndex: 0,
scrollElement: null
}; };
}, },
computed: { computed: {
@ -119,26 +132,27 @@ export default {
return this.localResults; return this.localResults;
}, },
fields () { fields () {
return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).fields : []; return this.getWorkspaceTab(this.tabUid) && this.getWorkspaceTab(this.tabUid).fields[this.resultsetIndex] ? this.getWorkspaceTab(this.tabUid).fields[this.resultsetIndex] : [];
}, },
keyUsage () { keyUsage () {
return this.getWorkspaceTab(this.tabUid) ? this.getWorkspaceTab(this.tabUid).keyUsage : []; return this.getWorkspaceTab(this.tabUid) && this.getWorkspaceTab(this.tabUid).keyUsage[this.resultsetIndex] ? this.getWorkspaceTab(this.tabUid).keyUsage[this.resultsetIndex] : [];
},
scrollElement () {
return this.$refs.tableWrapper;
} }
}, },
watch: { watch: {
results () { results () {
this.resetSort(); this.setLocalResults();
this.localResults = this.results.rows ? this.results.rows.map(item => { this.resultsetIndex = 0;
return { ...item, _id: uidGen() }; },
}) : []; resultsetIndex () {
this.setLocalResults();
} }
}, },
updated () { updated () {
if (this.$refs.table) if (this.$refs.table)
this.refreshScroller(); this.refreshScroller();
if (this.$refs.tableWrapper)
this.scrollElement = this.$refs.tableWrapper;
}, },
mounted () { mounted () {
window.addEventListener('resize', this.resizeResults); window.addEventListener('resize', this.resizeResults);
@ -178,6 +192,12 @@ export default {
return 'UNKNOWN ' + key; return 'UNKNOWN ' + key;
} }
}, },
setLocalResults () {
this.resetSort();
this.localResults = this.results[this.resultsetIndex] && this.results[this.resultsetIndex].rows ? this.results[this.resultsetIndex].rows.map(item => {
return { ...item, _id: uidGen() };
}) : [];
},
resizeResults () { resizeResults () {
if (this.$refs.resultTable) { if (this.$refs.resultTable) {
const el = this.$refs.tableWrapper; const el = this.$refs.tableWrapper;
@ -275,12 +295,15 @@ export default {
resetSort () { resetSort () {
this.currentSort = ''; this.currentSort = '';
this.currentSortDir = 'asc'; this.currentSortDir = 'asc';
},
selectResultset (index) {
this.resultsetIndex = index;
} }
} }
}; };
</script> </script>
<style lang="scss"> <style lang="scss" scoped>
.vscroll { .vscroll {
height: 1000px; height: 1000px;
overflow: auto; overflow: auto;
@ -305,4 +328,9 @@ export default {
line-height: 1; line-height: 1;
margin-left: 0.2rem; margin-left: 0.2rem;
} }
.result-tabs {
background: transparent !important;
margin: 0;
}
</style> </style>

View File

@ -186,7 +186,10 @@ export default {
}, },
props: { props: {
row: Object, row: Object,
fields: Array, fields: {
type: Array,
default: () => []
},
keyUsage: Array keyUsage: Array
}, },
data () { data () {
@ -253,10 +256,12 @@ export default {
return this.keyUsage.map(key => key.column); return this.keyUsage.map(key => key.column);
} }
}, },
created () { watch: {
this.fields.forEach(field => { fields () {
this.isInlineEditor[field.name] = false; this.fields.forEach(field => {
}); this.isInlineEditor[field.name] = false;
});
}
}, },
methods: { methods: {
getFieldType (cKey) { getFieldType (cKey) {

View File

@ -33,8 +33,9 @@
<div class="workspace-query-results column col-12"> <div class="workspace-query-results column col-12">
<WorkspaceQueryTable <WorkspaceQueryTable
v-if="results" v-if="results"
v-show="!isQuering"
ref="queryTable" ref="queryTable"
:results="results" :results="[results]"
:tab-uid="tabUid" :tab-uid="tabUid"
@update-field="updateField" @update-field="updateField"
@delete-selected="deleteSelected" @delete-selected="deleteSelected"
@ -116,6 +117,8 @@ export default {
if (!this.table) return; if (!this.table) return;
this.isQuering = true; this.isQuering = true;
this.results = {}; this.results = {};
const fieldsArr = [];
const keysArr = [];
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] }); this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
const params = { const params = {
@ -128,7 +131,7 @@ export default {
const { status, response } = await Tables.getTableColumns(params); const { status, response } = await Tables.getTableColumns(params);
if (status === 'success') { if (status === 'success') {
this.fields = response;// Needed to add new rows this.fields = response;// Needed to add new rows
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: response }); fieldsArr.push(response);
} }
else else
this.addNotification({ status: 'error', message: response }); this.addNotification({ status: 'error', message: response });
@ -153,7 +156,7 @@ export default {
const { status, response } = await Tables.getKeyUsage(params); const { status, response } = await Tables.getKeyUsage(params);
if (status === 'success') { if (status === 'success') {
this.keyUsage = response;// Needed to add new rows this.keyUsage = response;// Needed to add new rows
this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: response }); keysArr.push(response);
} }
else else
this.addNotification({ status: 'error', message: response }); this.addNotification({ status: 'error', message: response });
@ -162,6 +165,8 @@ export default {
this.addNotification({ status: 'error', message: err.stack }); this.addNotification({ status: 'error', message: err.stack });
} }
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: fieldsArr });
this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: keysArr });
this.isQuering = false; this.isQuering = false;
}, },
reloadTable () { reloadTable () {