mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-29 13:27:01 +00:00
refactor(gui): linting
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
@@ -2,290 +2,319 @@
|
||||
<v-container fluid class="pa-0 ma-0">
|
||||
<v-toolbar flat height="42" class="toolbar-border-bottom">
|
||||
<v-toolbar-title>
|
||||
<v-breadcrumbs :items="[{
|
||||
text: this.nodes.env,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},{
|
||||
text: this.nodes.dbAlias,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: this.originalNodes.sequence_name + ' (sequence)',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}]" divider=">" small>
|
||||
<template v-slot:divider>
|
||||
<v-icon small color="grey lighten-2">forward</v-icon>
|
||||
<v-breadcrumbs
|
||||
:items="[{
|
||||
text: nodes.env,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},{
|
||||
text: nodes.dbAlias,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: originalNodes.sequence_name + ' (sequence)',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}]"
|
||||
divider=">"
|
||||
small
|
||||
>
|
||||
<template #divider>
|
||||
<v-icon small color="grey lighten-2">
|
||||
forward
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<x-btn outlined tooltip="Reload Sequences" small @click="loadSequences()" color="primary" icon="refresh" :disabled="newSequence">
|
||||
<v-spacer />
|
||||
<x-btn
|
||||
outlined
|
||||
tooltip="Reload Sequences"
|
||||
small
|
||||
color="primary"
|
||||
icon="refresh"
|
||||
:disabled="newSequence"
|
||||
@click="loadSequences()"
|
||||
>
|
||||
Reload
|
||||
</x-btn>
|
||||
<x-btn outlined tooltip="Save Changes" small @click="applyChanges()" color="primary" icon="save" :disabled="!(newSequence || edited)">
|
||||
<x-btn
|
||||
outlined
|
||||
tooltip="Save Changes"
|
||||
small
|
||||
color="primary"
|
||||
icon="save"
|
||||
:disabled="!(newSequence || edited)"
|
||||
@click="applyChanges()"
|
||||
>
|
||||
Save
|
||||
</x-btn>
|
||||
<x-btn outlined tooltip="Delete Sequence" small color="error" @click="deleteSequence('showDialog')" icon="mdi-delete-outline">
|
||||
<x-btn
|
||||
outlined
|
||||
tooltip="Delete Sequence"
|
||||
small
|
||||
color="error"
|
||||
icon="mdi-delete-outline"
|
||||
@click="deleteSequence('showDialog')"
|
||||
>
|
||||
Delete Sequence
|
||||
|
||||
</x-btn>
|
||||
</v-toolbar>
|
||||
<br>
|
||||
<v-row>
|
||||
<v-col cols="8" offset="2">
|
||||
<v-simple-table v-if="newSequence">
|
||||
<template v-slot:default>
|
||||
<template #default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Value</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
Name
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr class="pa-1">
|
||||
<td>sequence_name</td>
|
||||
<td class="pb-2 pt-1 pr-1">
|
||||
<v-row></v-row>
|
||||
<v-text-field @input="sequenceNameChanged()" v-model="sequence.sequence_name"
|
||||
:rules="[v=> !!v || 'Value required']"></v-text-field>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="pa-1">
|
||||
<td>sequence_name</td>
|
||||
<td class="pb-2 pt-1 pr-1">
|
||||
<v-row />
|
||||
<v-text-field
|
||||
v-model="sequence.sequence_name"
|
||||
:rules="[v=> !!v || 'Value required']"
|
||||
@input="sequenceNameChanged()"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
|
||||
<v-simple-table v-else>
|
||||
<template v-slot:default>
|
||||
<template #default>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-left">Name</th>
|
||||
<th class="text-left">Value</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-left">
|
||||
Name
|
||||
</th>
|
||||
<th class="text-left">
|
||||
Value
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<td>sequence_name</td>
|
||||
<td class="pb-2 pt-1 pr-1">
|
||||
<v-text-field :disabled="nodes.dbConnection.client === 'mssql'" @input="sequenceNameChanged()" v-model="sequence.sequence_name"
|
||||
:rules="[v=> !!v || 'Value required']"></v-text-field>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="(item,key,i) in sequence" :style="key ==='sequence_name' ? 'display:none' : ''" class="grey--text"
|
||||
:key="i">
|
||||
<td>{{ key }}</td>
|
||||
<td>
|
||||
{{ item }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>sequence_name</td>
|
||||
<td class="pb-2 pt-1 pr-1">
|
||||
<v-text-field
|
||||
v-model="sequence.sequence_name"
|
||||
:disabled="nodes.dbConnection.client === 'mssql'"
|
||||
:rules="[v=> !!v || 'Value required']"
|
||||
@input="sequenceNameChanged()"
|
||||
/>
|
||||
</td>
|
||||
</tr>
|
||||
<tr
|
||||
v-for="(item,key,i) in sequence"
|
||||
:key="i"
|
||||
:style="key ==='sequence_name' ? 'display:none' : ''"
|
||||
class="grey--text"
|
||||
>
|
||||
<td>{{ key }}</td>
|
||||
<td>
|
||||
{{ item }}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</template>
|
||||
</v-simple-table>
|
||||
|
||||
</v-col>
|
||||
</v-row>
|
||||
<dlgLabelSubmitCancel
|
||||
type="error"
|
||||
v-if="dialogShow"
|
||||
:dialogShow="dialogShow"
|
||||
cssStyle="border:1px solid grey;height:300px"
|
||||
:actionsMtd="deleteSequence"
|
||||
type="error"
|
||||
:dialog-show="dialogShow"
|
||||
css-style="border:1px solid grey;height:300px"
|
||||
:actions-mtd="deleteSequence"
|
||||
heading="Click Submit to Delete the Sequence"
|
||||
/>
|
||||
|
||||
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters, mapActions} from "vuex";
|
||||
import { mapGetters, mapActions } from 'vuex'
|
||||
|
||||
import dlgLabelSubmitCancel from "../utils/dlgLabelSubmitCancel";
|
||||
import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel'
|
||||
|
||||
export default {
|
||||
components: {dlgLabelSubmitCancel},
|
||||
data() {
|
||||
return {
|
||||
edited : false,
|
||||
originalNodes: {},
|
||||
sequence: {},
|
||||
newSequence: this.nodes.newSequence ? true : false,
|
||||
oldCreateSequence: "",
|
||||
dialogShow: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({sqlMgr: "sqlMgr/sqlMgr"})
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
loadSequencesFromChildTreeNode:
|
||||
"project/loadSequencesFromChildTreeNode",
|
||||
loadSequencesFromParentTreeNode:
|
||||
"project/loadSequencesFromParentTreeNode",
|
||||
removeSequenceTab: "tabs/removeSequenceTab"
|
||||
}),
|
||||
async loadSequences() {
|
||||
|
||||
try {
|
||||
this.$store.commit('notification/MutToggleProgressBar', true);
|
||||
if (this.newSequence) {
|
||||
this.sequence = {
|
||||
sequence_name: this.originalNodes.sequence_name,
|
||||
}
|
||||
this.$store.commit('notification/MutToggleProgressBar', false);
|
||||
return;
|
||||
export default {
|
||||
components: { dlgLabelSubmitCancel },
|
||||
data () {
|
||||
return {
|
||||
edited: false,
|
||||
originalNodes: {},
|
||||
sequence: {},
|
||||
newSequence: !!this.nodes.newSequence,
|
||||
oldCreateSequence: '',
|
||||
dialogShow: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' })
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
loadSequencesFromChildTreeNode:
|
||||
'project/loadSequencesFromChildTreeNode',
|
||||
loadSequencesFromParentTreeNode:
|
||||
'project/loadSequencesFromParentTreeNode',
|
||||
removeSequenceTab: 'tabs/removeSequenceTab'
|
||||
}),
|
||||
async loadSequences () {
|
||||
try {
|
||||
this.$store.commit('notification/MutToggleProgressBar', true)
|
||||
if (this.newSequence) {
|
||||
this.sequence = {
|
||||
sequence_name: this.originalNodes.sequence_name
|
||||
}
|
||||
|
||||
// // console.log("env: this.env", this.env, this.dbAlias);
|
||||
// const client = await this.sqlMgr.projectGetSqlClient({
|
||||
// env: this.nodes.env,
|
||||
// dbAlias: this.nodes.dbAlias
|
||||
// });
|
||||
// const result = await client.sequenceList({
|
||||
// sequence_name: this.originalNodes.sequence_name
|
||||
// });
|
||||
|
||||
|
||||
const result = await this.sqlMgr.sqlOp({
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
}, 'sequenceList',{ sequence_name: this.originalNodes.sequence_name});
|
||||
|
||||
// console.log("sequence read", result);
|
||||
this.sequence = {...result.data.list.find(seq => seq.sequence_name === this.originalNodes.sequence_name)};
|
||||
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
this.$toast.error('Loading sequence failed');
|
||||
} finally {
|
||||
this.$store.commit('notification/MutToggleProgressBar', false);
|
||||
this.$store.commit('notification/MutToggleProgressBar', false)
|
||||
return
|
||||
}
|
||||
|
||||
},
|
||||
async applyChanges() {
|
||||
try {
|
||||
if (this.newSequence) {
|
||||
// // console.log("env: this.env", this.env, this.dbAlias);
|
||||
// const client = await this.sqlMgr.projectGetSqlClient({
|
||||
// env: this.nodes.env,
|
||||
// dbAlias: this.nodes.dbAlias
|
||||
// });
|
||||
// const result = await client.sequenceList({
|
||||
// sequence_name: this.originalNodes.sequence_name
|
||||
// });
|
||||
|
||||
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
"sequenceCreate",
|
||||
this.sequence]);
|
||||
const result = await this.sqlMgr.sqlOp({
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
}, 'sequenceList', { sequence_name: this.originalNodes.sequence_name })
|
||||
|
||||
await this.loadSequencesFromChildTreeNode({
|
||||
_nodes: {
|
||||
...this.nodes
|
||||
}
|
||||
});
|
||||
console.log("create sequence result", result);
|
||||
this.originalNodes.sequence_name = this.sequence.sequence_name;
|
||||
this.newSequence = false;
|
||||
await this.loadSequences();
|
||||
this.$toast.success('Sequence created successfully').goAway(3000);
|
||||
} else {
|
||||
|
||||
|
||||
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
"sequenceUpdate",
|
||||
this.sequence
|
||||
]);
|
||||
|
||||
|
||||
console.log("update sequence result", result);
|
||||
this.$toast.success('Sequence updated successfully').goAway(3000);
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast.error('Saving sequence failed').goAway(3000);
|
||||
throw e;
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
async deleteSequence(action = "") {
|
||||
|
||||
try {
|
||||
if (action === "showDialog") {
|
||||
this.dialogShow = true;
|
||||
} else if (action === "hideDialog") {
|
||||
this.dialogShow = false;
|
||||
} else {
|
||||
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
"sequenceDelete",
|
||||
{
|
||||
sequence_name: this.originalNodes.sequence_name,
|
||||
}]);
|
||||
|
||||
this.removeSequenceTab({
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias,
|
||||
sequence_name: this.originalNodes.sequence_name
|
||||
});
|
||||
await this.loadSequencesFromParentTreeNode({
|
||||
_nodes: {
|
||||
...this.nodes
|
||||
}
|
||||
});
|
||||
this.dialogShow = false;
|
||||
this.$toast.success('Sequence deleted successfully').goAway(3000);
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast.error('Deleting sequence failed').goAway(3000)
|
||||
throw e;
|
||||
}
|
||||
|
||||
|
||||
|
||||
},
|
||||
sequenceNameChanged(){
|
||||
console.log('changed',this.sequence.sequence_name.trim())
|
||||
this.edited = this.sequence.sequence_name.trim() !== '';
|
||||
// console.log("sequence read", result);
|
||||
this.sequence = { ...result.data.list.find(seq => seq.sequence_name === this.originalNodes.sequence_name) }
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
this.$toast.error('Loading sequence failed')
|
||||
} finally {
|
||||
this.$store.commit('notification/MutToggleProgressBar', false)
|
||||
}
|
||||
},
|
||||
beforeCreated() {
|
||||
async applyChanges () {
|
||||
try {
|
||||
if (this.newSequence) {
|
||||
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
'sequenceCreate',
|
||||
this.sequence])
|
||||
|
||||
await this.loadSequencesFromChildTreeNode({
|
||||
_nodes: {
|
||||
...this.nodes
|
||||
}
|
||||
})
|
||||
console.log('create sequence result', result)
|
||||
this.originalNodes.sequence_name = this.sequence.sequence_name
|
||||
this.newSequence = false
|
||||
await this.loadSequences()
|
||||
this.$toast.success('Sequence created successfully').goAway(3000)
|
||||
} else {
|
||||
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
'sequenceUpdate',
|
||||
this.sequence
|
||||
])
|
||||
|
||||
console.log('update sequence result', result)
|
||||
this.$toast.success('Sequence updated successfully').goAway(3000)
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast.error('Saving sequence failed').goAway(3000)
|
||||
throw e
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
this.originalNodes = {...this.nodes}
|
||||
await this.loadSequences();
|
||||
async deleteSequence (action = '') {
|
||||
try {
|
||||
if (action === 'showDialog') {
|
||||
this.dialogShow = true
|
||||
} else if (action === 'hideDialog') {
|
||||
this.dialogShow = false
|
||||
} else {
|
||||
await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||||
{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
},
|
||||
'sequenceDelete',
|
||||
{
|
||||
sequence_name: this.originalNodes.sequence_name
|
||||
}])
|
||||
|
||||
this.removeSequenceTab({
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias,
|
||||
sequence_name: this.originalNodes.sequence_name
|
||||
})
|
||||
await this.loadSequencesFromParentTreeNode({
|
||||
_nodes: {
|
||||
...this.nodes
|
||||
}
|
||||
})
|
||||
this.dialogShow = false
|
||||
this.$toast.success('Sequence deleted successfully').goAway(3000)
|
||||
}
|
||||
} catch (e) {
|
||||
this.$toast.error('Deleting sequence failed').goAway(3000)
|
||||
throw e
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
beforeDestroy() {
|
||||
},
|
||||
destroy() {
|
||||
},
|
||||
validate({params}) {
|
||||
return true;
|
||||
},
|
||||
head() {
|
||||
return {};
|
||||
},
|
||||
props: ["nodes"],
|
||||
watch: {
|
||||
// 'sequence' : {
|
||||
// deep:true,
|
||||
// handler(n,o) {
|
||||
// console.log('watch sequence',n,o);
|
||||
// if(o.sequence_name)
|
||||
// this.edited = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
directives: {}
|
||||
};
|
||||
sequenceNameChanged () {
|
||||
console.log('changed', this.sequence.sequence_name.trim())
|
||||
this.edited = this.sequence.sequence_name.trim() !== ''
|
||||
}
|
||||
},
|
||||
beforeCreated () {
|
||||
},
|
||||
watch: {
|
||||
// 'sequence' : {
|
||||
// deep:true,
|
||||
// handler(n,o) {
|
||||
// console.log('watch sequence',n,o);
|
||||
// if(o.sequence_name)
|
||||
// this.edited = true;
|
||||
// }
|
||||
// }
|
||||
},
|
||||
async created () {
|
||||
this.originalNodes = { ...this.nodes }
|
||||
await this.loadSequences()
|
||||
},
|
||||
mounted () {
|
||||
},
|
||||
beforeDestroy () {
|
||||
},
|
||||
destroy () {
|
||||
},
|
||||
directives: {},
|
||||
validate ({ params }) {
|
||||
return true
|
||||
},
|
||||
head () {
|
||||
return {}
|
||||
},
|
||||
props: ['nodes']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
Reference in New Issue
Block a user