antares/src/renderer/components/WorkspaceTabPropsView.vue

318 lines
11 KiB
Vue
Raw Normal View History

2020-12-26 15:37:34 +01:00
<template>
2021-07-16 18:52:18 +02:00
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
2020-12-26 15:37:34 +01:00
<div class="workspace-query-runner column col-12">
<div class="workspace-query-runner-footer">
<div class="workspace-query-buttons">
<button
class="btn btn-primary btn-sm"
:disabled="!isChanged"
:class="{'loading':isSaving}"
title="CTRL+S"
2020-12-26 15:37:34 +01:00
@click="saveChanges"
>
<i class="mdi mdi-24px mdi-content-save mr-1" />
2020-12-26 15:37:34 +01:00
<span>{{ $t('word.save') }}</span>
</button>
<button
:disabled="!isChanged"
class="btn btn-link btn-sm mr-0"
:title="$t('message.clearChanges')"
@click="clearChanges"
>
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
2020-12-26 15:37:34 +01:00
<span>{{ $t('word.clear') }}</span>
</button>
</div>
2021-07-16 23:24:55 +02:00
<div class="workspace-query-info">
<div class="d-flex" :title="$t('word.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
</div>
</div>
2020-12-26 15:37:34 +01:00
</div>
</div>
<div class="container">
2021-08-12 10:07:31 +02:00
<div class="columns">
2021-01-25 18:28:22 +01:00
<div class="column col-auto">
2020-12-26 15:37:34 +01:00
<div class="form-group">
<label class="form-label">{{ $t('word.name') }}</label>
<input
v-model="localView.name"
class="form-input"
type="text"
>
</div>
</div>
2021-01-25 18:28:22 +01:00
<div class="column col-auto">
2021-03-31 16:54:06 +02:00
<div v-if="workspace.customizations.definer" class="form-group">
2020-12-26 15:37:34 +01:00
<label class="form-label">{{ $t('word.definer') }}</label>
<select
v-if="workspace.users.length"
2020-12-26 15:37:34 +01:00
v-model="localView.definer"
class="form-select"
2020-12-26 15:37:34 +01:00
>
<option value="">
{{ $t('message.currentUser') }}
</option>
2020-12-31 19:55:02 +01:00
<option v-if="!isDefinerInUsers" :value="originalView.definer">
{{ originalView.definer.replaceAll('`', '') }}
</option>
<option
v-for="user in workspace.users"
:key="`${user.name}@${user.host}`"
:value="`\`${user.name}\`@\`${user.host}\``"
>
{{ user.name }}@{{ user.host }}
</option>
</select>
<select v-if="!workspace.users.length" class="form-select">
<option value="">
{{ $t('message.currentUser') }}
</option>
</select>
2020-12-26 15:37:34 +01:00
</div>
</div>
2021-01-25 18:28:22 +01:00
<div class="column col-auto mr-2">
2021-03-31 16:54:06 +02:00
<div v-if="workspace.customizations.viewSqlSecurity" class="form-group">
2020-12-26 15:37:34 +01:00
<label class="form-label">{{ $t('message.sqlSecurity') }}</label>
2021-08-12 10:07:31 +02:00
<select v-model="localView.security" class="form-select">
<option>DEFINER</option>
<option>INVOKER</option>
</select>
2020-12-26 15:37:34 +01:00
</div>
</div>
2021-01-25 18:28:22 +01:00
<div class="column col-auto mr-2">
2021-03-31 16:54:06 +02:00
<div v-if="workspace.customizations.viewAlgorithm" class="form-group">
2020-12-26 15:37:34 +01:00
<label class="form-label">{{ $t('word.algorithm') }}</label>
2021-08-12 10:07:31 +02:00
<select v-model="localView.algorithm" class="form-select">
<option>UNDEFINED</option>
<option>MERGE</option>
<option>TEMPTABLE</option>
</select>
2020-12-26 15:37:34 +01:00
</div>
</div>
2021-03-31 16:54:06 +02:00
<div v-if="workspace.customizations.viewUpdateOption" class="column col-auto mr-2">
2020-12-26 15:37:34 +01:00
<div class="form-group">
<label class="form-label">{{ $t('message.updateOption') }}</label>
2021-08-12 10:07:31 +02:00
<select v-model="localView.updateOption" class="form-select">
<option value="">
None
</option>
<option>CASCADED</option>
<option>LOCAL</option>
</select>
2020-12-26 15:37:34 +01:00
</div>
</div>
</div>
</div>
<div class="workspace-query-results column col-12 mt-2 p-relative">
<BaseLoader v-if="isLoading" />
2020-12-26 15:37:34 +01:00
<label class="form-label ml-2">{{ $t('message.selectStatement') }}</label>
<QueryEditor
v-show="isSelected"
2020-12-26 15:37:34 +01:00
ref="queryEditor"
:value.sync="localView.sql"
:workspace="workspace"
:schema="schema"
:height="editorHeight"
/>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
import BaseLoader from '@/components/BaseLoader';
2020-12-26 15:37:34 +01:00
import QueryEditor from '@/components/QueryEditor';
import Views from '@/ipc-api/Views';
export default {
2021-08-12 09:54:13 +02:00
name: 'WorkspaceTabPropsView',
2020-12-26 15:37:34 +01:00
components: {
BaseLoader,
2020-12-26 15:37:34 +01:00
QueryEditor
},
props: {
connection: Object,
2021-07-16 18:52:18 +02:00
isSelected: Boolean,
schema: String,
2020-12-26 15:37:34 +01:00
view: String
},
data () {
return {
isLoading: false,
2020-12-26 15:37:34 +01:00
isSaving: false,
originalView: null,
localView: { sql: '' },
lastView: null,
sqlProxy: '',
editorHeight: 300
};
},
computed: {
...mapGetters({
selectedWorkspace: 'workspaces/getSelected',
2020-12-26 15:37:34 +01:00
getWorkspace: 'workspaces/getWorkspace'
}),
workspace () {
return this.getWorkspace(this.connection.uid);
},
2021-07-16 23:24:55 +02:00
tabUid () {
return this.$vnode.key;
},
2020-12-26 15:37:34 +01:00
isChanged () {
return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
2020-12-31 19:55:02 +01:00
},
isDefinerInUsers () {
return this.originalView ? this.workspace.users.some(user => this.originalView.definer === `\`${user.name}\`@\`${user.host}\``) : true;
2020-12-26 15:37:34 +01:00
}
},
watch: {
async schema () {
2020-12-26 15:37:34 +01:00
if (this.isSelected) {
await this.getViewData();
2020-12-26 15:37:34 +01:00
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
this.lastView = this.view;
}
},
async view () {
2021-07-16 18:52:18 +02:00
if (this.isSelected) {
await this.getViewData();
2020-12-26 15:37:34 +01:00
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
this.lastView = this.view;
}
},
2021-07-16 18:52:18 +02:00
isSelected (val) {
if (val) {
this.changeBreadcrumbs({ schema: this.schema, view: this.view });
setTimeout(() => {
this.resizeQueryEditor();
}, 200);
2021-07-16 18:52:18 +02:00
if (this.lastView !== this.view)
this.getViewData();
}
},
2020-12-26 15:37:34 +01:00
isChanged (val) {
2021-07-16 23:24:55 +02:00
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
2020-12-26 15:37:34 +01:00
}
},
2021-07-16 18:52:18 +02:00
async created () {
await this.getViewData();
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
window.addEventListener('keydown', this.onKey);
},
2020-12-26 15:37:34 +01:00
mounted () {
window.addEventListener('resize', this.resizeQueryEditor);
},
destroyed () {
window.removeEventListener('resize', this.resizeQueryEditor);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
},
2020-12-26 15:37:34 +01:00
methods: {
...mapActions({
addNotification: 'notifications/addNotification',
refreshStructure: 'workspaces/refreshStructure',
2020-12-27 13:14:41 +01:00
setUnsavedChanges: 'workspaces/setUnsavedChanges',
2021-07-16 18:52:18 +02:00
changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
renameTabs: 'workspaces/renameTabs'
2020-12-26 15:37:34 +01:00
}),
async getViewData () {
if (!this.view) return;
this.isLoading = true;
this.localView = { sql: '' };
2021-07-16 18:52:18 +02:00
this.lastView = this.view;
2020-12-26 15:37:34 +01:00
const params = {
uid: this.connection.uid,
schema: this.schema,
2021-07-16 18:52:18 +02:00
view: this.view
2020-12-26 15:37:34 +01:00
};
try {
const { status, response } = await Views.getViewInformations(params);
if (status === 'success') {
this.originalView = response;
this.localView = JSON.parse(JSON.stringify(this.originalView));
this.sqlProxy = this.localView.sql;
}
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
this.resizeQueryEditor();
this.isLoading = false;
2020-12-26 15:37:34 +01:00
},
async saveChanges () {
if (this.isSaving) return;
this.isSaving = true;
const params = {
uid: this.connection.uid,
2020-12-27 13:14:41 +01:00
view: {
...this.localView,
schema: this.schema,
2020-12-27 13:14:41 +01:00
oldName: this.originalView.name
}
2020-12-26 15:37:34 +01:00
};
try {
const { status, response } = await Views.alterView(params);
if (status === 'success') {
2020-12-27 13:14:41 +01:00
const oldName = this.originalView.name;
2020-12-26 15:37:34 +01:00
await this.refreshStructure(this.connection.uid);
2020-12-27 13:14:41 +01:00
if (oldName !== this.localView.name) {
2021-07-16 18:52:18 +02:00
this.renameTabs({
uid: this.connection.uid,
schema: this.schema,
elementName: oldName,
elementNewName: this.localView.name,
elementType: 'view'
});
2021-07-18 16:10:36 +02:00
2020-12-27 13:14:41 +01:00
this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
}
2021-07-21 18:50:22 +02:00
else
this.getViewData();
2020-12-26 15:37:34 +01:00
}
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
this.isSaving = false;
},
clearChanges () {
this.localView = JSON.parse(JSON.stringify(this.originalView));
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
},
resizeQueryEditor () {
if (this.$refs.queryEditor) {
const footer = document.getElementById('footer');
const size = window.innerHeight - this.$refs.queryEditor.$el.getBoundingClientRect().top - footer.offsetHeight;
this.editorHeight = size;
this.$refs.queryEditor.editor.resize();
}
},
onKey (e) {
if (this.isSelected) {
e.stopPropagation();
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
if (this.isChanged)
this.saveChanges();
}
}
2020-12-26 15:37:34 +01:00
}
}
};
</script>