mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
950 lines
27 KiB
950 lines
27 KiB
<template> |
|
<div class=""> |
|
<p>Mock</p> |
|
<v-toolbar flat height="42" class="toolbar-border-bottom"> |
|
<v-toolbar-title> |
|
<v-breadcrumbs |
|
:items="[{ |
|
text: nodes.env, |
|
disabled: true, |
|
href: '#' |
|
},{ |
|
text: nodes.dbAlias, |
|
disabled: true, |
|
href: '#' |
|
}, |
|
{ |
|
text: nodes.tn + ' (table)', |
|
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-btn |
|
color="primary" |
|
small |
|
@click="loadColumnList" |
|
> |
|
<v-icon left> |
|
refresh |
|
</v-icon> |
|
Refresh |
|
</v-btn> |
|
<v-btn |
|
color="primary" |
|
class="primary" |
|
small |
|
@click="addColumn" |
|
> |
|
New Column |
|
</v-btn> |
|
|
|
<v-btn |
|
color="primary" |
|
class="primary" |
|
small |
|
:disabled="!edited && !newTable" |
|
@click="applyChanges" |
|
> |
|
Save |
|
<v-progress-circular |
|
v-if="progress.save" |
|
:indeterminate="progress.save" |
|
:size="20" |
|
color="secondary" |
|
/> |
|
</v-btn> |
|
<v-btn |
|
small |
|
color="error " |
|
class="error text-right" |
|
@click="deleteTable('showDialog')" |
|
> |
|
Delete Table |
|
|
|
<v-progress-circular |
|
v-if="progress.deleteTable" |
|
:indeterminate="progress.deleteTable" |
|
:size="20" |
|
color="secondary" |
|
/> |
|
</v-btn> |
|
<v-btn |
|
icon |
|
class="text-right" |
|
> |
|
<v-icon>mdi-help-circle-outline</v-icon> |
|
</v-btn> |
|
</v-toolbar> |
|
<v-card style=""> |
|
<v-data-table |
|
dense |
|
:headers="headers" |
|
:items="columns" |
|
hide-default-header |
|
footer-props.items-per-page-options="30" |
|
class="elevation-20 column-table" |
|
> |
|
<template #header="{props:{headers}}"> |
|
<th v-for="header in headers" :key="header.title" class="pt-2 pb-0"> |
|
<v-tooltip bottom> |
|
<template #activator="{ on }"> |
|
<span v-on="on">{{ header.text }}</span> |
|
</template> |
|
<span>{{ header.title }}</span> |
|
</v-tooltip> |
|
</th> |
|
</template> |
|
|
|
<template #item="props"> |
|
<tr :disabled="nodes.tn==='_evolutions' || nodes.tn==='nc_evolutions'"> |
|
<td> |
|
<v-edit-dialog |
|
:return-value.sync="props.item.cn" |
|
@save="saveColumnName(props.item)" |
|
@cancel="cancel" |
|
@open="open" |
|
@close="close" |
|
> |
|
{{ props.item.cn }} |
|
<template #input> |
|
<v-text-field |
|
v-model="props.item.cn" |
|
:disabled="props.item.rcn" |
|
:rules="[max25chars]" |
|
label="Edit" |
|
single-line |
|
/> |
|
</template> |
|
</v-edit-dialog> |
|
</td> |
|
<td> |
|
<!-- <v-autocomplete--> |
|
<!-- :full-width="false"--> |
|
<!-- v-model="props.item.dtx"--> |
|
<!-- :items="dataTypes"--> |
|
<!-- @change="onDataTypeChange(props.item,props.index)"--> |
|
<!-- dense--> |
|
<!-- ></v-autocomplete>--> |
|
<v-autocomplete |
|
v-model="props.item.dt" |
|
:full-width="false" |
|
:items="dataTypes" |
|
dense |
|
@change="onDataTypeChange(props.item,props.index)" |
|
/> |
|
</td> |
|
<!-- <td>--> |
|
<!-- <v-edit-dialog--> |
|
<!-- :return-value.sync="props.item.data_type_x_specific"--> |
|
<!-- lazy--> |
|
<!-- @save="save"--> |
|
<!-- @cancel="cancel"--> |
|
<!-- @open="open"--> |
|
<!-- @close="close"--> |
|
<!-- v-if="props.item.dtx==='specificType'"--> |
|
<!-- >--> |
|
<!-- {{ props.item.ct}}--> |
|
<!-- <template v-slot:input>--> |
|
<!-- <v-text-field--> |
|
<!-- v-model="props.item.ct"--> |
|
<!-- :rules="[max25chars]"--> |
|
<!-- label="Edit"--> |
|
<!-- single-line--> |
|
<!-- ></v-text-field>--> |
|
<!-- </template>--> |
|
<!-- </v-edit-dialog>--> |
|
<!-- </td>--> |
|
<td> |
|
<v-edit-dialog |
|
v-if="props.item.dtxp" |
|
:return-value.sync="props.item.dtxp" |
|
lazy |
|
@save="savePrecision(props.item)" |
|
@cancel="cancelPrecision" |
|
@open="openPrecision" |
|
@close="closePrecision" |
|
> |
|
{{ props.item.dtxp }} |
|
<template #input> |
|
<v-text-field |
|
v-model="props.item.dtxp" |
|
:rules="[max25chars]" |
|
label="Edit" |
|
single-line |
|
/> |
|
</template> |
|
</v-edit-dialog> |
|
</td> |
|
<td> |
|
<v-edit-dialog |
|
v-if="props.item.dtxs" |
|
:return-value.sync="props.item.dtxs" |
|
lazy |
|
@save="saveScale(props.item)" |
|
@cancel="cancelScale" |
|
@open="openScale" |
|
@close="closeScale" |
|
> |
|
{{ props.item.dtxs }} |
|
<template #input> |
|
<v-text-field |
|
v-model="props.item.dtxs" |
|
:rules="[max25chars]" |
|
label="Edit" |
|
single-line |
|
/> |
|
</template> |
|
</v-edit-dialog> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
v-model="props.item.pk" |
|
solo |
|
height="44" |
|
color="" |
|
@change="onCheckboxChangePk(props.item)" |
|
/> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
v-model="props.item.rqd" |
|
solo |
|
color="" |
|
@change="onCheckboxChangeNN(props.item)" |
|
/> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
v-model="props.item.un" |
|
:disabled="colPropUNDisabled(props.item)" |
|
solo |
|
color="" |
|
@change="onCheckboxChangeUN(props.item)" |
|
/> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
v-model="props.item.ai" |
|
:disabled="colPropAIDisabled(props.item)" |
|
solo |
|
color="" |
|
@change="onCheckboxChangeAI(props.item)" |
|
/> |
|
</td> |
|
|
|
<td> |
|
<p v-if="props.item.rtn" row wrap> |
|
{{ props.item.rtn }} |
|
<v-icon |
|
small |
|
@click="createNewOrEditRelation(props.item)" |
|
> |
|
mdi-table-edit |
|
</v-icon> |
|
<v-icon |
|
small |
|
color="error" |
|
@click="deleteRelation('showDialog', props.item)" |
|
> |
|
mdi-delete-forever |
|
</v-icon> |
|
</p> |
|
|
|
<v-icon |
|
v-else-if="!props.item.pk" |
|
color="" |
|
@click="createNewOrEditRelation(props.item)" |
|
> |
|
add |
|
</v-icon> |
|
|
|
<v-icon |
|
v-else |
|
disabled |
|
color="grey" |
|
> |
|
add |
|
</v-icon> |
|
</td> |
|
<td> |
|
<v-edit-dialog |
|
:return-value.sync="props.item.cdf" |
|
large |
|
lazy |
|
persistent |
|
@save="saveDefaultValue(props.item)" |
|
@cancel="cancel" |
|
@open="open" |
|
@close="close" |
|
> |
|
<!-- <div v-if="props.item.rqd">{{ props.item.cdf }}</div>--> |
|
<div v-if="props.item.pk" /> |
|
<div v-else-if="!props.item.cdf && !props.item.rqd"> |
|
NULL |
|
</div> |
|
<div v-else> |
|
{{ props.item.cdf }} |
|
</div> |
|
<!-- <template #input>--> |
|
<!-- <div class="mt-3 title">--> |
|
<!-- Update column_default--> |
|
<!-- </div>--> |
|
<!-- </template>--> |
|
<template #input> |
|
<v-text-field |
|
v-model="props.item.cdf" |
|
label="Edit" |
|
single-line |
|
counter |
|
autofocus |
|
/> |
|
</template> |
|
</v-edit-dialog> |
|
</td> |
|
<td> |
|
<v-icon |
|
color="error" |
|
icon |
|
@click="deleteColumn('showDialog', props.index, props.item)" |
|
> |
|
mdi-delete-forever |
|
</v-icon> |
|
</td> |
|
</tr> |
|
</template> |
|
</v-data-table> |
|
</v-card> |
|
<addRelationDlg |
|
v-if="dialogShow" |
|
:nodes="nodes" |
|
:column="selectedColForNewRelation" |
|
heading="Relation Column " |
|
:dialog-show="dialogShow" |
|
:mtd-dialog-submit="mtdNewRelationDlgSubmit" |
|
:mtd-dialog-cancel="mtdNewRelationDlgCancel" |
|
/> |
|
<span v-else /> |
|
<dlgLabelSubmitCancel |
|
v-if="columnDeleteDlg" |
|
type="primary" |
|
:dialog-show="columnDeleteDlg" |
|
:actions-mtd="deleteColumn" |
|
heading="Click Submit to Delete the Column" |
|
/> |
|
<dlgLabelSubmitCancel |
|
v-if="relationDeleteDlg" |
|
type="primary" |
|
:dialog-show="relationDeleteDlg" |
|
:actions-mtd="deleteRelation" |
|
heading="Click Submit to Delete the Relation" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { mapGetters, mapActions } from 'vuex' |
|
import addRelationDlg from '../dlgs/dlgAddRelation.vue' |
|
import dlgLabelSubmitCancel from '../../utils/dlgLabelSubmitCancel.vue' |
|
|
|
export default { |
|
components: { addRelationDlg, dlgLabelSubmitCancel }, |
|
data() { |
|
return { |
|
progress: { |
|
save: false, |
|
deleteTable: false, |
|
refresh: false |
|
}, |
|
edited: false, |
|
columnDeleteDlg: false, |
|
selectedColForDelete: null, |
|
relationDeleteDlg: false, |
|
selectedColForRelationDelete: null, |
|
columns: [], |
|
dataTypes: [], |
|
headers: [ |
|
{ |
|
text: 'Column', |
|
title: 'Column name', |
|
value: 'cn', |
|
sortable: false, |
|
width: '1%' |
|
}, |
|
{ text: 'Data Type', title: 'Data Type', value: 'dt', sortable: false, width: '10%' }, |
|
// {text: "Type",title:', value: "dt", sortable: false, width: "10%"}, |
|
{ text: 'Length/Values', title: 'Length/Values', value: 'dt', sortable: false, width: '10%' }, |
|
{ text: 'Scale', title: 'Scale', value: 'dt', sortable: false, width: '10%' }, |
|
{ text: 'PK', title: 'Primary Key', value: 'pk', sortable: false, width: '1%' }, |
|
{ text: 'NN', title: 'Not NULL', value: 'rqd', sortable: false, width: '1%' }, |
|
{ text: 'UN', title: 'Unsigned', value: 'unsigned', sortable: false, width: '1%' }, |
|
{ text: 'AI', title: 'Auto Increment', value: 'ai', sortable: false, width: '1%' }, |
|
{ text: 'Foreign Key', title: 'Foreign Key', value: '', sortable: false, width: '20%' }, |
|
{ |
|
text: 'Default', |
|
title: 'Default Value', |
|
value: 'cdf', |
|
sortable: false, |
|
width: '10%' |
|
}, |
|
{ text: '', title: 'Action', value: '', sortable: false, width: '1%' } |
|
], |
|
max25chars: v => v.length <= 150 || 'Input too long!', |
|
dialogShow: false, |
|
selectedColForNewRelation: null |
|
} |
|
}, |
|
methods: { |
|
...mapActions({ |
|
loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode' |
|
}), |
|
async onCheckboxChange() { |
|
this.edited = true |
|
}, |
|
|
|
async onCheckboxChangePk(col) { |
|
this.edited = true |
|
col.altered = col.altered || 2 |
|
|
|
col.cdf = null |
|
col.rqd = true |
|
}, |
|
colPropAIDisabled(col) { |
|
// console.log(col); |
|
if (col.dtx === 'integer' || |
|
col.dtx === 'bigInteger' || |
|
col.dtx === 'specificType') { |
|
for (let i = 0; i < this.columns.length; ++i) { |
|
if (this.columns[i].cn !== col.cn && this.columns[i].ai) { |
|
return true |
|
} |
|
} |
|
return false |
|
} else { |
|
return true |
|
} |
|
}, |
|
|
|
colPropUNDisabled(col) { |
|
// console.log(col); |
|
if (col.dtx === 'integer' || |
|
col.dtx === 'bigInteger' || |
|
col.dt.includes('int')) { |
|
return false |
|
} else { |
|
return true |
|
} |
|
}, |
|
|
|
onCheckboxChangeAI(col) { |
|
console.log(col) |
|
if (col.dt === 'int' || col.dt === 'bigint' || col.dt === 'smallint' || col.dt === 'tinyint') { |
|
col.altered = col.altered || 2 |
|
} |
|
|
|
if (!col.ai) { |
|
col.dtx = 'specificType' |
|
} else { |
|
col.dtx = '' |
|
} |
|
|
|
this.edited = true |
|
}, |
|
|
|
onCheckboxChangeNN(col) { |
|
col.altered = col.altered || 2 |
|
this.edited = true |
|
}, |
|
|
|
onCheckboxChangeUN(col) { |
|
col.altered = col.altered || 2 |
|
this.edited = true |
|
}, |
|
|
|
async onDataTypeChange(column, index) { |
|
this.edited = true |
|
column.altered = column.altered || 2 |
|
column.rqd = false |
|
column.pk = false |
|
column.ai = false |
|
column.cdf = null |
|
column.dtxp = ' ' |
|
column.dtxs = ' ' |
|
|
|
column.dtx = 'specificType' |
|
|
|
console.log('data type changed', index, column) |
|
}, |
|
async loadColumnList() { |
|
this.edited = false |
|
if (this.newTable) { |
|
this.columns = [ |
|
{ |
|
cn: 'id', |
|
dt: 'int', |
|
dtx: 'integer', |
|
ct: 'int(11)', |
|
nrqd: false, |
|
rqd: true, |
|
ck: false, |
|
pk: true, |
|
un: true, |
|
ai: true, |
|
cdf: null, |
|
clen: null, |
|
np: 10, |
|
ns: 0, |
|
// dp: null, |
|
// data_type_x_specific: '', |
|
dtxp: '10', |
|
dtxs: '' |
|
}, |
|
{ |
|
cn: 'title', |
|
dt: 'varchar', |
|
dtx: 'specificType', |
|
ct: 'varchar(45)', |
|
nrqd: true, |
|
rqd: false, |
|
ck: false, |
|
pk: false, |
|
un: false, |
|
ai: false, |
|
cdf: null, |
|
clen: 45, |
|
np: null, |
|
ns: null, |
|
// dp: null |
|
// data_type_x_specific: 'specificType', |
|
dtxp: '45', |
|
dtxs: '' |
|
} |
|
] |
|
return |
|
} |
|
// console.log("env: this.nodes.env", this.nodes.env, this.nodes.dbAlias); |
|
// const client = await this.sqlMgr.projectGetSqlClient({ |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }); |
|
// const result = await client.columnList({ |
|
// tn: this.nodes.tn |
|
// }); |
|
|
|
const result = await this.sqlMgr.sqlOp({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'columnList', { |
|
tn: this.nodes.tn |
|
}) |
|
|
|
console.log('table ', result.data.list) |
|
const columns = result.data.list |
|
|
|
// const relationsResult = await client.relationList({ |
|
// tn: this.nodes.tn |
|
// }); |
|
|
|
const relationsResult = await this.sqlMgr.sqlOp({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'relationList', { |
|
tn: this.nodes.tn |
|
}) |
|
|
|
const relations = relationsResult.data.list |
|
console.log('relations: ', relations) |
|
|
|
for (let i = 0; i < relations.length; i++) { |
|
const relation = relations[i] |
|
for (let i = 0; i < columns.length; i++) { |
|
const column = columns[i] |
|
|
|
if (column.cn === relation.cn) { |
|
// column.rcn = relation.rcn; |
|
// column.rtn = relation.rtn; |
|
columns[i] = { ...column, ...relation } |
|
} |
|
} |
|
} |
|
|
|
this.columns = JSON.parse(JSON.stringify(columns)) |
|
this.originalColumns = [...columns] |
|
console.log(this.columns) |
|
}, |
|
async loadDataTypes() { |
|
const client = await this.sqlMgr.projectGetSqlClient({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}) |
|
const result = client.getKnexDataTypes() |
|
this.dataTypes = result.data.list |
|
}, |
|
saveColumnName(col) { |
|
this.edited = true |
|
col.altered = col.altered || 8 |
|
|
|
this.snack = true |
|
this.snackColor = 'success' |
|
this.snackText = 'Data saved' |
|
}, |
|
save(col) { |
|
this.edited = true |
|
col.altered = col.altered || 2 |
|
|
|
this.snack = true |
|
this.snackColor = 'success' |
|
this.snackText = 'Data saved' |
|
}, |
|
cancel() { |
|
this.snack = true |
|
this.snackColor = 'error' |
|
this.snackText = 'Canceled' |
|
}, |
|
open() { |
|
this.snack = true |
|
this.snackColor = 'info' |
|
this.snackText = 'Dialog opened' |
|
}, |
|
close() { |
|
console.log('Dialog closed') |
|
}, |
|
|
|
saveDefaultValue(col) { |
|
this.edited = true |
|
col.altered = col.altered || 2 |
|
// col.rqd = false; |
|
|
|
this.snack = true |
|
this.snackColor = 'success' |
|
this.snackText = 'Data saved' |
|
}, |
|
|
|
savePrecision(col) { |
|
console.log(col) |
|
col.altered = col.altered || 2 |
|
this.edited = true |
|
this.snack = true |
|
this.snackColor = 'success' |
|
this.snackText = 'Data saved' |
|
}, |
|
cancelPrecision() { |
|
this.snack = true |
|
this.snackColor = 'error' |
|
this.snackText = 'Canceled' |
|
}, |
|
openPrecision() { |
|
this.snack = true |
|
this.snackColor = 'info' |
|
this.snackText = 'Dialog opened' |
|
}, |
|
closePrecision() { |
|
console.log('Dialog closed') |
|
}, |
|
|
|
saveScale(col) { |
|
if (col.dtx === 'float' || col.dtx === 'decimal' || col.dtx === 'specifcType') { |
|
col.altered = col.altered || 2 |
|
this.edited = true |
|
this.snack = true |
|
this.snackColor = 'success' |
|
this.snackText = 'Data saved' |
|
} |
|
}, |
|
cancelScale() { |
|
this.snack = true |
|
this.snackColor = 'error' |
|
this.snackText = 'Canceled' |
|
}, |
|
openScale() { |
|
this.snack = true |
|
this.snackColor = 'info' |
|
this.snackText = 'Dialog opened' |
|
}, |
|
closeScale() { |
|
console.log('Dialog closed') |
|
}, |
|
|
|
removeUnsigned(columns) { |
|
for (let i = 0; i < columns.length; ++i) { |
|
if (columns[i].altered === 1 && (!(columns[i].dt === 'int' || columns[i].dt === 'bigint'))) { |
|
columns[i].un = false |
|
console.log('>> resetting unsigned value', columns[i].cn) |
|
} |
|
console.log(columns[i].cn) |
|
} |
|
}, |
|
addColumn() { |
|
this.edited = true |
|
this.columns.push({ |
|
cn: 'title' + this.columns.length, |
|
dt: 'int', |
|
dtx: 'specificType', |
|
ct: 'integer(10)', |
|
nrqd: true, |
|
rqd: false, |
|
ck: false, |
|
pk: false, |
|
un: false, |
|
ai: false, |
|
cdf: null, |
|
clen: 45, |
|
np: null, |
|
ns: null, |
|
// data_type_x_specific: ' ', |
|
dtxp: '10', |
|
dtxs: ' ', |
|
altered: 1 |
|
}) |
|
}, |
|
async deleteColumn(action = '', index, column) { |
|
if (action === 'showDialog') { |
|
this.columnDeleteDlg = true |
|
this.selectedColForDelete = { index, column } |
|
} else if (action === 'hideDialog') { |
|
this.columnDeleteDlg = false |
|
} else { |
|
if (this.columns[this.selectedColForDelete.index].altered === 1) { |
|
// newly added column no need to remove fromd db |
|
this.columns.splice(this.selectedColForDelete.index, 1) |
|
} else { |
|
const columns = JSON.parse(JSON.stringify(this.columns)) |
|
columns[this.selectedColForDelete.index].altered = 4 |
|
await this.sqlMgr.sqlOpPlus( |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
'tableUpdate', |
|
{ |
|
tn: this.nodes.tn, |
|
originalColumns: this.originalColumns, |
|
columns |
|
} |
|
) |
|
this.columns.splice(this.selectedColForDelete.index, 1) |
|
} |
|
this.columnDeleteDlg = false |
|
this.selectedColForDelete = null |
|
} |
|
}, |
|
async applyChanges() { |
|
this.progress.save = true |
|
await this.sqlMgr.projectGetSqlClient({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}) |
|
if (this.newTable) { |
|
this.removeUnsigned(this.columns) |
|
// let result = await this.sqlMgr.sqlOpPlus( |
|
// { |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }, |
|
// "tableCreate", |
|
// { |
|
// tn: this.nodes.tn, |
|
// columns: this.columns |
|
// } |
|
// ); |
|
|
|
await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'tableCreate', |
|
{ |
|
tn: this.nodes.tn, |
|
columns: this.columns |
|
}]) |
|
// const result = await client.tableCreate({ |
|
// tn: this.nodes.tn, |
|
// columns: this.columns |
|
// }); |
|
this.mtdNewTableUpdate(false) |
|
// console.log("result", result, this.nodes); |
|
await this.loadTablesFromChildTreeNode({ |
|
_nodes: { |
|
...this.nodes |
|
} |
|
}) |
|
} else { |
|
console.log('this.columns[index].altered before', this.columns) |
|
// const result = await client.tableUpdate({ |
|
// tn: this.nodes.tn, |
|
// originalColumns: this.originalColumns, |
|
// columns: this.columns |
|
// }); |
|
this.removeUnsigned(this.columns) |
|
// let result = await this.sqlMgr.sqlOpPlus( |
|
// { |
|
// env: this.nodes.env, |
|
// dbAlias: this.nodes.dbAlias |
|
// }, |
|
// "tableUpdate", |
|
// { |
|
// tn: this.nodes.tn, |
|
// originalColumns: this.originalColumns, |
|
// columns: this.columns |
|
// } |
|
// ); |
|
|
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
'tableUpdate', |
|
{ |
|
tn: this.nodes.tn, |
|
originalColumns: this.originalColumns, |
|
columns: this.columns |
|
}]) |
|
console.log('update table result', result) |
|
} |
|
this.progress.save = false |
|
await this.loadColumnList() |
|
}, |
|
createNewOrEditRelation(column) { |
|
console.log(column) |
|
this.selectedColForNewRelation = { ...column } |
|
this.dialogShow = true |
|
}, |
|
async mtdNewRelationDlgSubmit(relationObject) { |
|
try { |
|
await this.sqlMgr.projectGetSqlClient({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}) |
|
|
|
if (relationObject.updateRelation) { |
|
// update existing relation |
|
alert('Not Implemented yet') |
|
} else { |
|
// const result = await client.relationCreate(relationObject); |
|
|
|
const result = await this.sqlMgr.sqlOpPlus( |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
'relationCreate', |
|
relationObject |
|
) |
|
console.log('relationCreate result: ', result) |
|
} |
|
|
|
await this.loadColumnList() |
|
this.selectedColForNewRelation = null |
|
this.dialogShow = false |
|
} catch (error) { |
|
console.error('relationCreate error: ', error) |
|
} |
|
}, |
|
mtdNewRelationDlgCancel() { |
|
this.dialogShow = false |
|
this.selectedColNameForNewRelation = '' |
|
}, |
|
async deleteRelation(action = '', column) { |
|
if (action === 'showDialog') { |
|
this.relationDeleteDlg = true |
|
this.selectedColForRelationDelete = column |
|
} else if (action === 'hideDialog') { |
|
this.relationDeleteDlg = false |
|
this.selectedColForRelationDelete = null |
|
} else { |
|
await this.sqlMgr.projectGetSqlClient({ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}) |
|
|
|
// const result = await client.relationDelete({ |
|
// childColumn: column.cn, |
|
// childTable: this.nodes.tn, |
|
// parentTable: column.rtn, |
|
// parentColumn: column.rcn, |
|
// foreignKeyName: column.cstn |
|
// }); |
|
const result = await this.sqlMgr.sqlOpPlus( |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
'relationDelete', |
|
{ |
|
childColumn: this.selectedColForRelationDelete.cn, |
|
childTable: this.nodes.tn, |
|
parentTable: this.selectedColForRelationDelete |
|
.rtn, |
|
parentColumn: this.selectedColForRelationDelete |
|
.rcn, |
|
foreignKeyName: this.selectedColForRelationDelete.cstn |
|
} |
|
) |
|
console.log('relationDelete result ', result) |
|
await this.loadColumnList() |
|
this.relationDeleteDlg = false |
|
this.selectedColForRelationDelete = null |
|
} |
|
} |
|
}, |
|
computed: { ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }) }, |
|
|
|
beforeCreated() { |
|
}, |
|
watch: {}, |
|
async created() { |
|
await this.loadColumnList() |
|
this.loadDataTypes() |
|
}, |
|
mounted() { |
|
}, |
|
beforeDestroy() { |
|
}, |
|
destroy() { |
|
}, |
|
directives: {}, |
|
validate({ params }) { |
|
return true |
|
}, |
|
head() { |
|
return {} |
|
}, |
|
props: ['nodes', 'newTable', 'mtdNewTableUpdate', 'deleteTable'] |
|
} |
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|