antares/src/renderer/components/WorkspaceQueryTab.vue

271 lines
8.9 KiB
Vue
Raw Normal View History

2020-06-06 16:27:42 +02:00
<template>
2020-08-20 18:06:02 +02:00
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
2020-06-06 16:27:42 +02:00
<div class="workspace-query-runner column col-12">
2020-08-20 18:06:02 +02:00
<QueryEditor v-if="isSelected" :value.sync="query" />
2020-06-06 16:27:42 +02:00
<div class="workspace-query-runner-footer">
<div class="workspace-query-buttons">
2020-06-10 19:29:10 +02:00
<button
class="btn btn-link btn-sm"
:class="{'loading':isQuering}"
2020-06-13 18:14:32 +02:00
:disabled="!query"
title="F9"
@click="runQuery(query)"
2020-06-10 19:29:10 +02:00
>
<span>{{ $t('word.run') }}</span>
<i class="mdi mdi-24px mdi-play text-success" />
2020-06-10 19:29:10 +02:00
</button>
2020-06-06 16:27:42 +02:00
</div>
2020-06-12 18:10:45 +02:00
<div class="workspace-query-info">
<div v-if="resultsCount !== false">
{{ $t('word.results') }}: <b>{{ resultsCount }}</b>
2020-06-12 18:10:45 +02:00
</div>
<div v-if="affectedCount !== false">
{{ $t('message.affectedRows') }}: <b>{{ affectedCount }}</b>
</div>
2020-06-15 18:23:51 +02:00
<div v-if="workspace.breadcrumbs.schema">
{{ $t('word.schema') }}: <b>{{ workspace.breadcrumbs.schema }}</b>
2020-06-12 18:10:45 +02:00
</div>
2020-06-06 16:27:42 +02:00
</div>
</div>
</div>
2020-06-11 23:34:38 +02:00
<div class="workspace-query-results column col-12">
2020-06-16 18:01:22 +02:00
<WorkspaceQueryTable
v-if="results"
v-show="!isQuering"
2020-06-28 15:31:16 +02:00
ref="queryTable"
2020-06-16 18:01:22 +02:00
:results="results"
:tab-uid="tabUid"
:conn-uid="connection.uid"
mode="query"
@update-field="updateField"
@delete-selected="deleteSelected"
2020-06-16 18:01:22 +02:00
/>
2020-06-06 16:27:42 +02:00
</div>
</div>
</template>
<script>
2020-09-25 12:39:58 +02:00
import Database from '@/ipc-api/Database';
2020-07-24 13:26:56 +02:00
import Tables from '@/ipc-api/Tables';
2020-06-06 16:27:42 +02:00
import QueryEditor from '@/components/QueryEditor';
2020-06-10 19:29:10 +02:00
import WorkspaceQueryTable from '@/components/WorkspaceQueryTable';
2020-06-06 16:27:42 +02:00
import { mapGetters, mapActions } from 'vuex';
2020-07-23 19:10:14 +02:00
import tableTabs from '@/mixins/tableTabs';
2020-06-06 16:27:42 +02:00
export default {
name: 'WorkspaceQueryTab',
components: {
2020-06-10 19:29:10 +02:00
QueryEditor,
WorkspaceQueryTable
2020-06-06 16:27:42 +02:00
},
2020-07-23 19:10:14 +02:00
mixins: [tableTabs],
2020-06-06 16:27:42 +02:00
props: {
connection: Object,
2020-08-20 18:06:02 +02:00
tabUid: String,
isSelected: Boolean
2020-06-06 16:27:42 +02:00
},
data () {
return {
query: '',
lastQuery: '',
2020-06-10 19:29:10 +02:00
isQuering: false,
results: [],
resultsCount: false,
affectedCount: false
2020-06-06 16:27:42 +02:00
};
},
computed: {
...mapGetters({
getWorkspace: 'workspaces/getWorkspace'
}),
workspace () {
return this.getWorkspace(this.connection.uid);
}
},
created () {
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
},
2020-06-06 16:27:42 +02:00
methods: {
...mapActions({
addNotification: 'notifications/addNotification',
setTabFields: 'workspaces/setTabFields',
setTabKeyUsage: 'workspaces/setTabKeyUsage'
2020-06-06 16:27:42 +02:00
}),
getResultParams (index) {
const resultsWithRows = this.results.filter(result => result.rows);
let cachedTable;
if (resultsWithRows[index] && resultsWithRows[index].fields && resultsWithRows[index].fields.length) {
return resultsWithRows[index].fields.map(field => {
if (field.table) cachedTable = field.table;// Needed for some queries on information_schema
return {
table: field.table || cachedTable,
schema: field.db || 'INFORMATION_SCHEMA'
};
}).filter((val, i, arr) => arr.findIndex(el => el.schema === val.schema && el.table === val.table) === i);
}
return [];
},
async runQuery (query) {
if (!query || this.isQuering) return;
2020-06-10 19:29:10 +02:00
this.isQuering = true;
this.clearTabData();
2020-06-06 16:27:42 +02:00
try { // Query Data
2020-06-16 18:01:22 +02:00
const params = {
uid: this.connection.uid,
schema: this.schema,
query
2020-06-16 18:01:22 +02:00
};
2020-09-25 12:39:58 +02:00
const { status, response } = await Database.rawQuery(params);
if (status === 'success') {
this.results = Array.isArray(response) ? response : [response];
let selectedFields = [];
const fieldsArr = [];
const keysArr = [];
let qI = 0;// queries index
for (const result of this.results) { // cycle queries
let fI = 0;// fields index
if (result.rows) { // if is a select
const paramsArr = this.getResultParams(qI);
selectedFields = result.fields.map(field => field.name);
this.resultsCount += result.rows.length;
for (const paramObj of paramsArr) {
try { // Table data
const params = {
uid: this.connection.uid,
...paramObj
};
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 => {
return { ...field, alias: result.fields[fI++].name };
});
}
if (!fields.length) {
fields = response.map(field => {
return { ...field, alias: result.fields[fI++].name };
});
}
fieldsArr[qI] = fieldsArr[qI] ? [...fieldsArr[qI], ...fields] : fields.length ? fields : result.fields;
}
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
try { // Key usage (foreign keys)
const params = {
uid: this.connection.uid,
...paramObj
};
const { status, response } = await Tables.getKeyUsage(params);
if (status === 'success')
keysArr[qI] = keysArr[qI] ? [...keysArr[qI], ...response] : response;
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
}
}
else if (result.report) { // if is a query without output
this.affectedCount += result.report.affectedRows;
}
qI++;
}
this.setTabFields({
cUid: this.connection.uid,
tUid: this.tabUid,
fields: fieldsArr
});
this.setTabKeyUsage({
cUid: this.connection.uid,
tUid: this.tabUid,
keyUsage: keysArr
});
}
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
2020-06-10 19:29:10 +02:00
this.isQuering = false;
this.lastQuery = query;
},
reloadTable () {
this.runQuery(this.lastQuery);
},
clearTabData () {
this.results = [];
this.resultsCount = false;
this.affectedCount = false;
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
},
onKey (e) {
e.stopPropagation();
if (e.key === 'F9')
this.runQuery(this.query);
2020-06-06 16:27:42 +02:00
}
}
};
</script>
<style lang="scss">
2020-07-31 18:16:28 +02:00
.workspace-tabs {
align-content: baseline;
2020-06-06 16:27:42 +02:00
2020-07-31 18:16:28 +02:00
.workspace-query-runner {
.workspace-query-runner-footer {
display: flex;
justify-content: space-between;
padding: 0.3rem 0.6rem 0.4rem;
align-items: center;
2020-06-06 16:27:42 +02:00
2020-07-31 18:16:28 +02:00
.workspace-query-buttons {
display: flex;
2020-06-06 16:27:42 +02:00
2020-07-31 18:16:28 +02:00
.btn {
display: flex;
align-self: center;
color: $body-font-color;
margin-right: 0.4rem;
}
}
2020-06-06 16:27:42 +02:00
2020-07-31 18:16:28 +02:00
.workspace-query-info {
display: flex;
2020-06-10 19:29:10 +02:00
2020-07-31 18:16:28 +02:00
> div + div {
padding-left: 0.6rem;
}
2020-06-06 16:27:42 +02:00
}
2020-07-31 18:16:28 +02:00
}
}
2020-06-06 16:27:42 +02:00
}
</style>