antares/src/renderer/components/WorkspaceQueryTab.vue

235 lines
7.5 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"
@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"
@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-06-07 14:38:38 +02:00
import Connection from '@/ipc-api/Connection';
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);
}
},
methods: {
...mapActions({
addNotification: 'notifications/addNotification',
setTabFields: 'workspaces/setTabFields',
setTabKeyUsage: 'workspaces/setTabKeyUsage'
2020-06-06 16:27:42 +02:00
}),
getTable (index) {
const resultsWithRows = this.results.filter(result => result.rows);
if (resultsWithRows[index] && resultsWithRows[index].fields && resultsWithRows[index].fields.length)
return resultsWithRows[index].fields[0].orgTable;
return '';
},
async runQuery (query) {
if (!query) 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-06-07 14:38:38 +02:00
const { status, response } = await Connection.rawQuery(params);
if (status === 'success') {
this.results = Array.isArray(response) ? response : [response];
let selectedFields = [];
const fieldsArr = [];
const keysArr = [];
let index = 0;
for (let i = 0; i < this.results.length; i++) {
if (this.results[i].rows) { // if is a select
const table = this.getTable(index);
selectedFields = this.results[i].fields.map(field => field.orgName);
const selectedSchema = this.results[i].fields[0].db;
this.resultsCount += this.results[i].rows.length;
try { // Table data
const params = {
uid: this.connection.uid,
schema: selectedSchema,
table
};
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: this.results[i].fields[index].name };
});
}
fieldsArr.push(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,
schema: selectedSchema,
table
};
const { status, response } = await Tables.getKeyUsage(params);
if (status === 'success')
keysArr.push(response);
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
}
else if (this.results[i].report) { // if is a query without output
this.affectedCount += this.results[i].report.affectedRows;
}
index++;
}
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: [] });
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>