mirror of https://github.com/nocodb/nocodb
262 lines
8.0 KiB
262 lines
8.0 KiB
<template> |
|
<v-row justify="center"> |
|
<v-dialog |
|
:value="dialogShow" |
|
persistent |
|
max-width="600" |
|
@keydown.esc="mtdDialogCancel()" |
|
@keydown.enter="mtdDialogSubmit(relation)" |
|
> |
|
<template #activator="{ on }"> |
|
<p class="hidden" v-on="on" /> |
|
</template> |
|
<v-card class="elevation-20"> |
|
<v-card-title class="grey darken-2 subheading" style="height: 30px"> |
|
<!-- {{ this.heading }} for {{ this.column.column_name }} --> |
|
</v-card-title> |
|
<v-form v-model="valid"> |
|
<v-card-text class="pt-4 pl-4"> |
|
<p class="headline">{{ heading }} for {{ column.column_name }}</p> |
|
<v-row justify="space-between"> |
|
<v-col class="pa-1" cols="6"> |
|
<v-autocomplete |
|
v-model="relation.parentTable" |
|
:loading="isRefTablesLoading" |
|
label="Select Reference Table" |
|
:full-width="false" |
|
:items="refTables" |
|
item-text="table_name" |
|
required |
|
dense |
|
/> |
|
</v-col> |
|
<v-col class="pa-1" cols="6"> |
|
<v-autocomplete |
|
ref="parentColumnRef" |
|
v-model="relation.parentColumn" |
|
:loading="isRefColumnsLoading" |
|
label="Select Reference Column" |
|
:full-width="false" |
|
:items="refColumns" |
|
item-text="column_name" |
|
required |
|
dense |
|
/> |
|
</v-col> |
|
</v-row> |
|
|
|
<v-row justify="space-between"> |
|
<v-col class="pa-1" cols="6"> |
|
<v-autocomplete |
|
v-model="relation.onUpdate" |
|
:label="$t('labels.onUpdate')" |
|
:full-width="false" |
|
:items="onUpdateDeleteOptions" |
|
required |
|
dense |
|
:disabled="relation.type !== 'real'" |
|
/> |
|
</v-col> |
|
<v-col class="pa-1" cols="6"> |
|
<v-autocomplete |
|
v-model="relation.onDelete" |
|
:label="$t('labels.onDelete')" |
|
:full-width="false" |
|
:items="onUpdateDeleteOptions" |
|
required |
|
dense |
|
:disabled="relation.type !== 'real'" |
|
/> |
|
</v-col> |
|
</v-row> |
|
|
|
<v-row> |
|
<v-col class="pa-1"> |
|
<v-checkbox |
|
v-model="relation.type" |
|
false-value="real" |
|
true-value="virtual" |
|
label="Virtual Relation" |
|
:full-width="false" |
|
required |
|
class="mt-0" |
|
dense |
|
/> |
|
</v-col> |
|
</v-row> |
|
</v-card-text> |
|
<v-divider /> |
|
|
|
<v-card-actions class="pa-4"> |
|
<v-spacer /> |
|
<v-btn class="" @click="mtdDialogCancel()"> |
|
<!-- Cancel --> |
|
{{ $t('general.cancel') }} |
|
</v-btn> |
|
<v-btn class="primary" :disabled="!valid" @click="mtdDialogSubmit(relation)"> |
|
<u class="shortkey">S</u>ubmit |
|
</v-btn> |
|
</v-card-actions> |
|
</v-form> |
|
</v-card> |
|
</v-dialog> |
|
</v-row> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters } from 'vuex'; |
|
|
|
export default { |
|
data() { |
|
return { |
|
valid: false, |
|
onUpdateDeleteOptions: ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT'], |
|
relation: { |
|
childColumn: this.column.column_name, |
|
childTable: this.nodes.table_name, |
|
parentTable: this.column.rtn || '', |
|
parentColumn: this.column.rcn || '', |
|
onDelete: 'CASCADE', |
|
onUpdate: 'CASCADE', |
|
updateRelation: !!this.column.rtn, |
|
type: 'real', |
|
}, |
|
isRefTablesLoading: false, |
|
isRefColumnsLoading: false, |
|
refColumns: [], |
|
refTables: [], |
|
relationColumnChanged: false, |
|
}; |
|
}, |
|
methods: { |
|
async loadColumnList() { |
|
if (!this.relation.parentTable) { |
|
return; |
|
} |
|
this.isRefColumnsLoading = true; |
|
// const client = await this.sqlMgr.projectGetSqlClient({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }); |
|
// const result = await client.columnList({ |
|
// table_name: this.relation.parentTable |
|
// }); |
|
|
|
// const result = await this.sqlMgr.sqlOp({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }, 'columnList', { table_name: this.relation.parentTable}) |
|
|
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias, |
|
}, |
|
'columnList', |
|
{ table_name: this.relation.parentTable }, |
|
]); |
|
|
|
const columns = result.data.list; |
|
this.refColumns = JSON.parse(JSON.stringify(columns)); |
|
|
|
if (this.relation.updateRelation && !this.relationColumnChanged) { |
|
// only first time when editing add defaault value to this field |
|
this.relation.parentColumn = this.column.rcn; |
|
this.relationColumnChanged = true; |
|
} else { |
|
// find pk column and assign to parentColumn |
|
const pkKeyColumns = this.refColumns.filter(el => el.pk); |
|
this.relation.parentColumn = (pkKeyColumns[0] || {}).column_name || ''; |
|
} |
|
|
|
this.isRefColumnsLoading = false; |
|
}, |
|
async loadTablesList() { |
|
this.isRefTablesLoading = true; |
|
// const client = await this.sqlMgr.projectGetSqlClient({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }); |
|
// const result = await client.tableList(); |
|
|
|
// const result = await this.sqlMgr.sqlOp({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }, 'tableList'); |
|
|
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias, |
|
}, |
|
'tableList', |
|
]); |
|
|
|
const tables = result.data.list; |
|
|
|
this.refTables = JSON.parse(JSON.stringify(tables)); |
|
this.isRefTablesLoading = false; |
|
}, |
|
}, |
|
computed: { ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }) }, |
|
|
|
beforeCreated() {}, |
|
watch: { |
|
'relation.parentTable'() { |
|
this.loadColumnList(); |
|
}, |
|
}, |
|
async created() { |
|
await this.loadTablesList(); |
|
|
|
if (!this.relation.parentTable) { |
|
let table_name = (this.refTables[0] || {}).table_name || ''; |
|
if (table_name === 'nc_evolutions' || table_name === '_evolutions') { |
|
table_name = (this.refTables[1] || {}).table_name || ''; |
|
} |
|
this.relation.parentTable = table_name; |
|
} |
|
if (this.column.rtn) { |
|
this.relation.parentTable = this.column.rtn; |
|
} |
|
}, |
|
mounted() {}, |
|
beforeDestroy() {}, |
|
destroy() {}, |
|
directives: {}, |
|
components: {}, |
|
validate({ params }) { |
|
return true; |
|
}, |
|
head() { |
|
return {}; |
|
}, |
|
props: ['nodes', 'column', 'heading', 'dialogShow', 'mtdDialogCancel', 'mtdDialogSubmit'], |
|
}; |
|
</script> |
|
|
|
<style scoped></style> |
|
<!-- |
|
/** |
|
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
|
* |
|
* @author Naveen MR <oof1lab@gmail.com> |
|
* @author Pranav C Balan <pranavxc@gmail.com> |
|
* |
|
* @license GNU AGPL version 3 or any later version |
|
* |
|
* This program is free software: you can redistribute it and/or modify |
|
* it under the terms of the GNU Affero General Public License as |
|
* published by the Free Software Foundation, either version 3 of the |
|
* License, or (at your option) any later version. |
|
* |
|
* This program is distributed in the hope that it will be useful, |
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
* GNU Affero General Public License for more details. |
|
* |
|
* You should have received a copy of the GNU Affero General Public License |
|
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
|
* |
|
*/ |
|
-->
|
|
|