mirror of https://github.com/nocodb/nocodb
263 lines
8.0 KiB
263 lines
8.0 KiB
4 years ago
|
<template>
|
||
|
<v-row justify="center">
|
||
|
<v-dialog
|
||
3 years ago
|
:value="dialogShow"
|
||
4 years ago
|
persistent
|
||
3 years ago
|
max-width="600"
|
||
4 years ago
|
@keydown.esc="mtdDialogCancel()"
|
||
|
@keydown.enter="mtdDialogSubmit(relation)"
|
||
|
>
|
||
3 years ago
|
<template #activator="{ on }">
|
||
|
<p class="hidden" v-on="on" />
|
||
4 years ago
|
</template>
|
||
|
<v-card class="elevation-20">
|
||
3 years ago
|
<v-card-title class="grey darken-2 subheading" style="height: 30px">
|
||
3 years ago
|
<!-- {{ this.heading }} for {{ this.column.column_name }} -->
|
||
4 years ago
|
</v-card-title>
|
||
|
<v-form v-model="valid">
|
||
|
<v-card-text class="pt-4 pl-4">
|
||
3 years ago
|
<p class="headline">{{ heading }} for {{ column.column_name }}</p>
|
||
|
<v-row justify="space-between">
|
||
4 years ago
|
<v-col class="pa-1" cols="6">
|
||
|
<v-autocomplete
|
||
3 years ago
|
v-model="relation.parentTable"
|
||
4 years ago
|
:loading="isRefTablesLoading"
|
||
|
label="Select Reference Table"
|
||
|
:full-width="false"
|
||
|
:items="refTables"
|
||
3 years ago
|
item-text="table_name"
|
||
4 years ago
|
required
|
||
|
dense
|
||
3 years ago
|
/>
|
||
|
</v-col>
|
||
4 years ago
|
<v-col class="pa-1" cols="6">
|
||
|
<v-autocomplete
|
||
3 years ago
|
ref="parentColumnRef"
|
||
|
v-model="relation.parentColumn"
|
||
4 years ago
|
:loading="isRefColumnsLoading"
|
||
|
label="Select Reference Column"
|
||
|
:full-width="false"
|
||
|
:items="refColumns"
|
||
3 years ago
|
item-text="column_name"
|
||
4 years ago
|
required
|
||
|
dense
|
||
3 years ago
|
/>
|
||
|
</v-col>
|
||
4 years ago
|
</v-row>
|
||
|
|
||
3 years ago
|
<v-row justify="space-between">
|
||
4 years ago
|
<v-col class="pa-1" cols="6">
|
||
|
<v-autocomplete
|
||
3 years ago
|
v-model="relation.onUpdate"
|
||
3 years ago
|
:label="$t('labels.onUpdate')"
|
||
4 years ago
|
:full-width="false"
|
||
|
:items="onUpdateDeleteOptions"
|
||
|
required
|
||
|
dense
|
||
|
:disabled="relation.type !== 'real'"
|
||
3 years ago
|
/>
|
||
4 years ago
|
</v-col>
|
||
|
<v-col class="pa-1" cols="6">
|
||
|
<v-autocomplete
|
||
3 years ago
|
v-model="relation.onDelete"
|
||
3 years ago
|
:label="$t('labels.onDelete')"
|
||
4 years ago
|
:full-width="false"
|
||
|
:items="onUpdateDeleteOptions"
|
||
|
required
|
||
|
dense
|
||
|
:disabled="relation.type !== 'real'"
|
||
3 years ago
|
/>
|
||
4 years ago
|
</v-col>
|
||
|
</v-row>
|
||
|
|
||
|
<v-row>
|
||
|
<v-col class="pa-1">
|
||
|
<v-checkbox
|
||
3 years ago
|
v-model="relation.type"
|
||
4 years ago
|
false-value="real"
|
||
|
true-value="virtual"
|
||
|
label="Virtual Relation"
|
||
|
:full-width="false"
|
||
|
required
|
||
|
class="mt-0"
|
||
|
dense
|
||
3 years ago
|
/>
|
||
4 years ago
|
</v-col>
|
||
|
</v-row>
|
||
|
</v-card-text>
|
||
3 years ago
|
<v-divider />
|
||
4 years ago
|
|
||
|
<v-card-actions class="pa-4">
|
||
3 years ago
|
<v-spacer />
|
||
4 years ago
|
<v-btn class="" @click="mtdDialogCancel()">
|
||
3 years ago
|
<!-- Cancel -->
|
||
|
{{ $t('general.cancel') }}
|
||
4 years ago
|
</v-btn>
|
||
3 years ago
|
<v-btn class="primary" :disabled="!valid" @click="mtdDialogSubmit(relation)">
|
||
3 years ago
|
<u class="shortkey">S</u>ubmit
|
||
|
</v-btn>
|
||
4 years ago
|
</v-card-actions>
|
||
3 years ago
|
</v-form>
|
||
4 years ago
|
</v-card>
|
||
|
</v-dialog>
|
||
|
</v-row>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
3 years ago
|
import { mapGetters } from 'vuex';
|
||
4 years ago
|
|
||
|
export default {
|
||
3 years ago
|
data() {
|
||
4 years ago
|
return {
|
||
|
valid: false,
|
||
3 years ago
|
onUpdateDeleteOptions: ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT'],
|
||
4 years ago
|
relation: {
|
||
3 years ago
|
childColumn: this.column.column_name,
|
||
|
childTable: this.nodes.table_name,
|
||
3 years ago
|
parentTable: this.column.rtn || '',
|
||
|
parentColumn: this.column.rcn || '',
|
||
|
onDelete: 'CASCADE',
|
||
|
onUpdate: 'CASCADE',
|
||
|
updateRelation: !!this.column.rtn,
|
||
3 years ago
|
type: 'real',
|
||
4 years ago
|
},
|
||
|
isRefTablesLoading: false,
|
||
|
isRefColumnsLoading: false,
|
||
|
refColumns: [],
|
||
|
refTables: [],
|
||
3 years ago
|
relationColumnChanged: false,
|
||
|
};
|
||
4 years ago
|
},
|
||
|
methods: {
|
||
3 years ago
|
async loadColumnList() {
|
||
3 years ago
|
if (!this.relation.parentTable) {
|
||
|
return;
|
||
|
}
|
||
|
this.isRefColumnsLoading = true;
|
||
4 years ago
|
// const client = await this.sqlMgr.projectGetSqlClient({
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias
|
||
|
// });
|
||
|
// const result = await client.columnList({
|
||
3 years ago
|
// table_name: this.relation.parentTable
|
||
4 years ago
|
// });
|
||
|
|
||
|
// const result = await this.sqlMgr.sqlOp({
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias
|
||
3 years ago
|
// }, 'columnList', { table_name: this.relation.parentTable})
|
||
4 years ago
|
|
||
3 years ago
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
},
|
||
|
'columnList',
|
||
|
{ table_name: this.relation.parentTable },
|
||
|
]);
|
||
4 years ago
|
|
||
3 years ago
|
const columns = result.data.list;
|
||
|
this.refColumns = JSON.parse(JSON.stringify(columns));
|
||
4 years ago
|
|
||
|
if (this.relation.updateRelation && !this.relationColumnChanged) {
|
||
3 years ago
|
// only first time when editing add defaault value to this field
|
||
3 years ago
|
this.relation.parentColumn = this.column.rcn;
|
||
|
this.relationColumnChanged = true;
|
||
4 years ago
|
} else {
|
||
3 years ago
|
// find pk column and assign to parentColumn
|
||
3 years ago
|
const pkKeyColumns = this.refColumns.filter(el => el.pk);
|
||
|
this.relation.parentColumn = (pkKeyColumns[0] || {}).column_name || '';
|
||
4 years ago
|
}
|
||
|
|
||
3 years ago
|
this.isRefColumnsLoading = false;
|
||
4 years ago
|
},
|
||
3 years ago
|
async loadTablesList() {
|
||
3 years ago
|
this.isRefTablesLoading = true;
|
||
4 years ago
|
// 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');
|
||
|
|
||
3 years ago
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
},
|
||
|
'tableList',
|
||
|
]);
|
||
4 years ago
|
|
||
3 years ago
|
const tables = result.data.list;
|
||
4 years ago
|
|
||
3 years ago
|
this.refTables = JSON.parse(JSON.stringify(tables));
|
||
|
this.isRefTablesLoading = false;
|
||
|
},
|
||
4 years ago
|
},
|
||
3 years ago
|
computed: { ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }) },
|
||
4 years ago
|
|
||
3 years ago
|
beforeCreated() {},
|
||
3 years ago
|
watch: {
|
||
3 years ago
|
'relation.parentTable'() {
|
||
3 years ago
|
this.loadColumnList();
|
||
|
},
|
||
3 years ago
|
},
|
||
3 years ago
|
async created() {
|
||
3 years ago
|
await this.loadTablesList();
|
||
4 years ago
|
|
||
|
if (!this.relation.parentTable) {
|
||
3 years ago
|
let table_name = (this.refTables[0] || {}).table_name || '';
|
||
3 years ago
|
if (table_name === 'nc_evolutions' || table_name === '_evolutions') {
|
||
3 years ago
|
table_name = (this.refTables[1] || {}).table_name || '';
|
||
4 years ago
|
}
|
||
3 years ago
|
this.relation.parentTable = table_name;
|
||
4 years ago
|
}
|
||
|
if (this.column.rtn) {
|
||
3 years ago
|
this.relation.parentTable = this.column.rtn;
|
||
4 years ago
|
}
|
||
|
},
|
||
3 years ago
|
mounted() {},
|
||
|
beforeDestroy() {},
|
||
|
destroy() {},
|
||
3 years ago
|
directives: {},
|
||
|
components: {},
|
||
3 years ago
|
validate({ params }) {
|
||
3 years ago
|
return true;
|
||
4 years ago
|
},
|
||
3 years ago
|
head() {
|
||
3 years ago
|
return {};
|
||
4 years ago
|
},
|
||
3 years ago
|
props: ['nodes', 'column', 'heading', 'dialogShow', 'mtdDialogCancel', 'mtdDialogSubmit'],
|
||
|
};
|
||
4 years ago
|
</script>
|
||
|
|
||
3 years ago
|
<style scoped></style>
|
||
4 years ago
|
<!--
|
||
|
/**
|
||
|
* @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/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|