antares/src/renderer/components/ModalEditSchema.vue

171 lines
5.3 KiB
Vue
Raw Normal View History

2020-09-25 12:39:58 +02:00
<template>
<div class="modal active">
<a class="modal-overlay" @click.stop="closeModal" />
<div class="modal-container p-0">
<div class="modal-header pl-2">
<div class="modal-title h6">
<div class="d-flex">
<i class="mdi mdi-24px mdi-database-edit mr-1" />
<span class="cut-text">{{ $t('message.editSchema') }}</span>
2020-09-25 12:39:58 +02:00
</div>
</div>
<a class="btn btn-clear c-hand" @click.stop="closeModal" />
</div>
<div class="modal-body pb-0">
<div class="content">
<form class="form-horizontal">
<div class="form-group">
<div class="col-3">
2021-01-15 19:18:16 +01:00
<label class="form-label">{{ $t('word.name') }}</label>
2020-09-25 12:39:58 +02:00
</div>
<div class="col-9">
<input
v-model="database.name"
class="form-input"
type="text"
required
:placeholder="$t('message.schemaName')"
2020-10-03 12:11:42 +02:00
readonly
2020-09-25 12:39:58 +02:00
>
</div>
</div>
<div class="form-group">
<div class="col-3">
2021-01-15 19:18:16 +01:00
<label class="form-label">{{ $t('word.collation') }}</label>
2020-09-25 12:39:58 +02:00
</div>
<div class="col-9">
<select
ref="firstInput"
v-model="database.collation"
class="form-select"
>
2020-09-25 12:39:58 +02:00
<option
v-for="collation in collations"
:key="collation.id"
:value="collation.collation"
>
{{ collation.collation }}
</option>
</select>
<small>{{ $t('message.serverDefault') }}: {{ defaultCollation }}</small>
</div>
</div>
</form>
</div>
</div>
2021-07-21 17:56:55 +02:00
<div class="modal-footer">
2021-03-17 11:15:14 +01:00
<button class="btn btn-primary mr-2" @click.stop="updateSchema">
2020-10-03 12:11:42 +02:00
{{ $t('word.update') }}
2020-09-25 12:39:58 +02:00
</button>
<button class="btn btn-link" @click.stop="closeModal">
{{ $t('word.close') }}
</button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex';
2021-03-17 11:15:14 +01:00
import Schema from '@/ipc-api/Schema';
2020-09-25 12:39:58 +02:00
export default {
2021-03-17 11:15:14 +01:00
name: 'ModalEditSchema',
2020-10-03 12:11:42 +02:00
props: {
selectedSchema: String
2020-10-03 12:11:42 +02:00
},
2020-09-25 12:39:58 +02:00
data () {
return {
database: {
name: '',
2020-10-03 12:11:42 +02:00
prevName: '',
2020-09-25 12:39:58 +02:00
collation: ''
}
};
},
computed: {
...mapGetters({
selectedWorkspace: 'workspaces/getSelected',
getWorkspace: 'workspaces/getWorkspace',
getDatabaseVariable: 'workspaces/getDatabaseVariable'
}),
collations () {
return this.getWorkspace(this.selectedWorkspace).collations;
},
defaultCollation () {
return this.getDatabaseVariable(this.selectedWorkspace, 'collation_server').value || '';
}
},
2020-10-03 12:11:42 +02:00
async created () {
let actualCollation;
try {
const { status, response } = await Schema.getDatabaseCollation({ uid: this.selectedWorkspace, database: this.selectedSchema });
2020-10-03 12:11:42 +02:00
if (status === 'success')
actualCollation = response;
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
}
this.database = {
name: this.selectedSchema,
prevName: this.selectedSchema,
2020-10-03 12:11:42 +02:00
collation: actualCollation || this.defaultCollation,
prevCollation: actualCollation || this.defaultCollation
};
2020-10-04 17:21:21 +02:00
window.addEventListener('keydown', this.onKey);
setTimeout(() => {
this.$refs.firstInput.focus();
}, 20);
2020-10-04 17:21:21 +02:00
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
2020-09-25 12:39:58 +02:00
},
methods: {
...mapActions({
addNotification: 'notifications/addNotification'
}),
2021-03-17 11:15:14 +01:00
async updateSchema () {
2020-10-03 12:11:42 +02:00
if (this.database.collation !== this.database.prevCollation) {
try {
2021-03-17 11:15:14 +01:00
const { status, response } = await Schema.updateSchema({
2020-10-03 12:11:42 +02:00
uid: this.selectedWorkspace,
...this.database
});
2020-09-25 12:39:58 +02:00
2020-10-03 12:11:42 +02:00
if (status === 'success')
this.closeModal();
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
this.addNotification({ status: 'error', message: err.stack });
2020-09-25 12:39:58 +02:00
}
}
2020-10-03 12:11:42 +02:00
else
this.closeModal();
2020-09-25 12:39:58 +02:00
},
closeModal () {
this.$emit('close');
2020-10-04 17:21:21 +02:00
},
onKey (e) {
e.stopPropagation();
if (e.key === 'Escape')
this.closeModal();
2020-09-25 12:39:58 +02:00
}
}
};
</script>
<style scoped>
.modal-container {
max-width: 360px;
}
</style>