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.
876 lines
27 KiB
876 lines
27 KiB
3 years ago
|
<template>
|
||
|
<div class="">
|
||
|
<p>Mock</p>
|
||
|
<v-toolbar flat height="42" class="toolbar-border-bottom">
|
||
|
<v-toolbar-title>
|
||
3 years ago
|
<v-breadcrumbs
|
||
2 years ago
|
:items="[
|
||
|
{
|
||
|
text: nodes.env,
|
||
|
disabled: true,
|
||
|
href: '#',
|
||
|
},
|
||
|
{
|
||
|
text: nodes.dbAlias,
|
||
|
disabled: true,
|
||
|
href: '#',
|
||
|
},
|
||
|
{
|
||
|
text: nodes.table_name + ' (table)',
|
||
|
disabled: true,
|
||
|
href: '#',
|
||
|
},
|
||
|
]"
|
||
3 years ago
|
divider=">"
|
||
|
small
|
||
|
>
|
||
|
<template #divider>
|
||
2 years ago
|
<v-icon small color="grey lighten-2"> forward </v-icon>
|
||
3 years ago
|
</template>
|
||
|
</v-breadcrumbs>
|
||
|
</v-toolbar-title>
|
||
3 years ago
|
<v-spacer />
|
||
2 years ago
|
<v-btn color="primary" small @click="loadColumnList">
|
||
|
<v-icon left> refresh </v-icon>
|
||
3 years ago
|
Refresh
|
||
|
</v-btn>
|
||
2 years ago
|
<v-btn color="primary" class="primary" small @click="addColumn"> New Column </v-btn>
|
||
3 years ago
|
|
||
2 years ago
|
<v-btn color="primary" class="primary" small :disabled="!edited && !newTable" @click="applyChanges">
|
||
3 years ago
|
<!-- Save -->
|
||
|
{{ $t('general.save') }}
|
||
2 years ago
|
<v-progress-circular v-if="progress.save" :indeterminate="progress.save" :size="20" color="secondary" />
|
||
3 years ago
|
</v-btn>
|
||
2 years ago
|
<v-btn small color="error " class="error text-right" @click="deleteTable('showDialog')">
|
||
3 years ago
|
{{ $t('activity.deleteTable') }}
|
||
3 years ago
|
|
||
|
<v-progress-circular
|
||
|
v-if="progress.deleteTable"
|
||
|
:indeterminate="progress.deleteTable"
|
||
|
:size="20"
|
||
|
color="secondary"
|
||
3 years ago
|
/>
|
||
|
</v-btn>
|
||
2 years ago
|
<v-btn icon class="text-right">
|
||
3 years ago
|
<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"
|
||
|
>
|
||
2 years ago
|
<template #header="{ props: { headers } }">
|
||
3 years ago
|
<th v-for="header in headers" :key="header.title" class="pt-2 pb-0">
|
||
3 years ago
|
<v-tooltip bottom>
|
||
3 years ago
|
<template #activator="{ on }">
|
||
|
<span v-on="on">{{ header.text }}</span>
|
||
3 years ago
|
</template>
|
||
3 years ago
|
<span>{{ header.title }}</span>
|
||
3 years ago
|
</v-tooltip>
|
||
|
</th>
|
||
|
</template>
|
||
|
|
||
3 years ago
|
<template #item="props">
|
||
2 years ago
|
<tr :disabled="nodes.table_name === '_evolutions' || nodes.table_name === 'nc_evolutions'">
|
||
3 years ago
|
<td>
|
||
|
<v-edit-dialog
|
||
3 years ago
|
:return-value.sync="props.item.column_name"
|
||
3 years ago
|
@save="saveColumnName(props.item)"
|
||
|
@cancel="cancel"
|
||
|
@open="open"
|
||
|
@close="close"
|
||
|
>
|
||
3 years ago
|
{{ props.item.column_name }}
|
||
3 years ago
|
<template #input>
|
||
3 years ago
|
<v-text-field
|
||
3 years ago
|
v-model="props.item.column_name"
|
||
3 years ago
|
:disabled="props.item.rcn"
|
||
3 years ago
|
:rules="[max25chars]"
|
||
3 years ago
|
:label="$t('general.edit')"
|
||
3 years ago
|
single-line
|
||
3 years ago
|
/>
|
||
3 years ago
|
</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"
|
||
3 years ago
|
:full-width="false"
|
||
3 years ago
|
:items="dataTypes"
|
||
|
dense
|
||
2 years ago
|
@change="onDataTypeChange(props.item, props.index)"
|
||
3 years ago
|
/>
|
||
3 years ago
|
</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"
|
||
3 years ago
|
@close="closePrecision"
|
||
|
>
|
||
3 years ago
|
{{ props.item.dtxp }}
|
||
3 years ago
|
<template #input>
|
||
3 years ago
|
<v-text-field
|
||
|
v-model="props.item.dtxp"
|
||
|
:rules="[max25chars]"
|
||
3 years ago
|
:label="$t('general.edit')"
|
||
3 years ago
|
single-line
|
||
3 years ago
|
/>
|
||
3 years ago
|
</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 }}
|
||
3 years ago
|
<template #input>
|
||
3 years ago
|
<v-text-field
|
||
|
v-model="props.item.dtxs"
|
||
|
:rules="[max25chars]"
|
||
3 years ago
|
:label="$t('general.edit')"
|
||
3 years ago
|
single-line
|
||
3 years ago
|
/>
|
||
3 years ago
|
</template>
|
||
|
</v-edit-dialog>
|
||
|
</td>
|
||
|
<td>
|
||
2 years ago
|
<v-checkbox v-model="props.item.pk" solo height="44" color="" @change="onCheckboxChangePk(props.item)" />
|
||
3 years ago
|
</td>
|
||
|
<td>
|
||
2 years ago
|
<v-checkbox v-model="props.item.rqd" solo color="" @change="onCheckboxChangeNN(props.item)" />
|
||
3 years ago
|
</td>
|
||
|
<td>
|
||
|
<v-checkbox
|
||
3 years ago
|
v-model="props.item.un"
|
||
3 years ago
|
:disabled="colPropUNDisabled(props.item)"
|
||
|
solo
|
||
|
color=""
|
||
3 years ago
|
@change="onCheckboxChangeUN(props.item)"
|
||
|
/>
|
||
3 years ago
|
</td>
|
||
|
<td>
|
||
|
<v-checkbox
|
||
3 years ago
|
v-model="props.item.ai"
|
||
3 years ago
|
:disabled="colPropAIDisabled(props.item)"
|
||
|
solo
|
||
|
color=""
|
||
3 years ago
|
@change="onCheckboxChangeAI(props.item)"
|
||
|
/>
|
||
3 years ago
|
</td>
|
||
|
|
||
|
<td>
|
||
|
<p v-if="props.item.rtn" row wrap>
|
||
|
{{ props.item.rtn }}
|
||
2 years ago
|
<v-icon small @click="createNewOrEditRelation(props.item)"> mdi-table-edit </v-icon>
|
||
|
<v-icon small color="error" @click="deleteRelation('showDialog', props.item)">
|
||
3 years ago
|
mdi-delete-forever
|
||
|
</v-icon>
|
||
3 years ago
|
</p>
|
||
|
|
||
2 years ago
|
<v-icon v-else-if="!props.item.pk" color="" @click="createNewOrEditRelation(props.item)"> add </v-icon>
|
||
3 years ago
|
|
||
2 years ago
|
<v-icon v-else disabled color="grey"> add </v-icon>
|
||
3 years ago
|
</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>-->
|
||
3 years ago
|
<div v-if="props.item.pk" />
|
||
2 years ago
|
<div v-else-if="!props.item.cdf && !props.item.rqd">NULL</div>
|
||
3 years ago
|
<div v-else>
|
||
|
{{ props.item.cdf }}
|
||
|
</div>
|
||
|
<!-- <template #input>-->
|
||
|
<!-- <div class="mt-3 title">-->
|
||
|
<!-- Update column_default-->
|
||
|
<!-- </div>-->
|
||
|
<!-- </template>-->
|
||
|
<template #input>
|
||
2 years ago
|
<v-text-field v-model="props.item.cdf" :label="$t('general.edit')" single-line counter autofocus />
|
||
3 years ago
|
</template>
|
||
|
</v-edit-dialog>
|
||
|
</td>
|
||
|
<td>
|
||
2 years ago
|
<v-icon color="error" icon @click="deleteColumn('showDialog', props.index, props.item)">
|
||
3 years ago
|
mdi-delete-forever
|
||
|
</v-icon>
|
||
3 years ago
|
</td>
|
||
|
</tr>
|
||
|
</template>
|
||
|
</v-data-table>
|
||
|
</v-card>
|
||
|
<addRelationDlg
|
||
|
v-if="dialogShow"
|
||
|
:nodes="nodes"
|
||
|
:column="selectedColForNewRelation"
|
||
|
heading="Relation Column "
|
||
3 years ago
|
:dialog-show="dialogShow"
|
||
|
:mtd-dialog-submit="mtdNewRelationDlgSubmit"
|
||
|
:mtd-dialog-cancel="mtdNewRelationDlgCancel"
|
||
3 years ago
|
/>
|
||
3 years ago
|
<span v-else />
|
||
3 years ago
|
<dlgLabelSubmitCancel
|
||
|
v-if="columnDeleteDlg"
|
||
3 years ago
|
type="primary"
|
||
|
:dialog-show="columnDeleteDlg"
|
||
|
:actions-mtd="deleteColumn"
|
||
3 years ago
|
heading="Click Submit to Delete the Column"
|
||
|
/>
|
||
|
<dlgLabelSubmitCancel
|
||
|
v-if="relationDeleteDlg"
|
||
3 years ago
|
type="primary"
|
||
|
:dialog-show="relationDeleteDlg"
|
||
|
:actions-mtd="deleteRelation"
|
||
3 years ago
|
heading="Click Submit to Delete the Relation"
|
||
|
/>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
|
<script>
|
||
2 years ago
|
import { mapGetters, mapActions } from 'vuex';
|
||
|
import addRelationDlg from '../dlgs/DlgAddRelation.vue';
|
||
|
import dlgLabelSubmitCancel from '../../utils/DlgLabelSubmitCancel.vue';
|
||
3 years ago
|
|
||
|
export default {
|
||
|
components: { addRelationDlg, dlgLabelSubmitCancel },
|
||
3 years ago
|
data() {
|
||
3 years ago
|
return {
|
||
|
progress: {
|
||
|
save: false,
|
||
|
deleteTable: false,
|
||
2 years ago
|
refresh: false,
|
||
3 years ago
|
},
|
||
|
edited: false,
|
||
|
columnDeleteDlg: false,
|
||
|
selectedColForDelete: null,
|
||
|
relationDeleteDlg: false,
|
||
|
selectedColForRelationDelete: null,
|
||
|
columns: [],
|
||
|
dataTypes: [],
|
||
|
headers: [
|
||
|
{
|
||
|
text: 'Column',
|
||
|
title: 'Column name',
|
||
|
value: 'cn',
|
||
|
sortable: false,
|
||
2 years ago
|
width: '1%',
|
||
3 years ago
|
},
|
||
3 years ago
|
{ 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,
|
||
2 years ago
|
width: '10%',
|
||
3 years ago
|
},
|
||
2 years ago
|
{ text: '', title: 'Action', value: '', sortable: false, width: '1%' },
|
||
3 years ago
|
],
|
||
|
max25chars: v => v.length <= 150 || 'Input too long!',
|
||
|
dialogShow: false,
|
||
2 years ago
|
selectedColForNewRelation: null,
|
||
|
};
|
||
3 years ago
|
},
|
||
|
methods: {
|
||
|
...mapActions({
|
||
2 years ago
|
loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode',
|
||
3 years ago
|
}),
|
||
3 years ago
|
async onCheckboxChange() {
|
||
2 years ago
|
this.edited = true;
|
||
3 years ago
|
},
|
||
|
|
||
3 years ago
|
async onCheckboxChangePk(col) {
|
||
2 years ago
|
this.edited = true;
|
||
|
col.altered = col.altered || 2;
|
||
3 years ago
|
|
||
2 years ago
|
col.cdf = null;
|
||
|
col.rqd = true;
|
||
3 years ago
|
},
|
||
3 years ago
|
colPropAIDisabled(col) {
|
||
2 years ago
|
if (col.dtx === 'integer' || col.dtx === 'bigInteger' || col.dtx === 'specificType') {
|
||
3 years ago
|
for (let i = 0; i < this.columns.length; ++i) {
|
||
3 years ago
|
if (this.columns[i].column_name !== col.column_name && this.columns[i].ai) {
|
||
2 years ago
|
return true;
|
||
3 years ago
|
}
|
||
|
}
|
||
2 years ago
|
return false;
|
||
3 years ago
|
} else {
|
||
2 years ago
|
return true;
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
|
||
3 years ago
|
colPropUNDisabled(col) {
|
||
2 years ago
|
if (col.dtx === 'integer' || col.dtx === 'bigInteger' || col.dt.includes('int')) {
|
||
|
return false;
|
||
3 years ago
|
} else {
|
||
2 years ago
|
return true;
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
|
||
3 years ago
|
onCheckboxChangeAI(col) {
|
||
2 years ago
|
console.log(col);
|
||
3 years ago
|
if (col.dt === 'int' || col.dt === 'bigint' || col.dt === 'smallint' || col.dt === 'tinyint') {
|
||
2 years ago
|
col.altered = col.altered || 2;
|
||
3 years ago
|
}
|
||
3 years ago
|
|
||
3 years ago
|
if (!col.ai) {
|
||
2 years ago
|
col.dtx = 'specificType';
|
||
3 years ago
|
} else {
|
||
2 years ago
|
col.dtx = '';
|
||
3 years ago
|
}
|
||
3 years ago
|
|
||
2 years ago
|
this.edited = true;
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
onCheckboxChangeNN(col) {
|
||
2 years ago
|
col.altered = col.altered || 2;
|
||
|
this.edited = true;
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
onCheckboxChangeUN(col) {
|
||
2 years ago
|
col.altered = col.altered || 2;
|
||
|
this.edited = true;
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
async onDataTypeChange(column, index) {
|
||
2 years ago
|
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);
|
||
3 years ago
|
},
|
||
3 years ago
|
async loadColumnList() {
|
||
2 years ago
|
this.edited = false;
|
||
3 years ago
|
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',
|
||
2 years ago
|
dtxs: '',
|
||
3 years ago
|
},
|
||
|
{
|
||
|
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',
|
||
2 years ago
|
dtxs: '',
|
||
|
},
|
||
|
];
|
||
|
return;
|
||
3 years ago
|
}
|
||
|
// 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({
|
||
3 years ago
|
// tn: this.nodes.table_name
|
||
3 years ago
|
// });
|
||
|
|
||
2 years ago
|
const result = await this.sqlMgr.sqlOp(
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
},
|
||
|
'columnList',
|
||
|
{
|
||
|
tn: this.nodes.table_name,
|
||
|
}
|
||
|
);
|
||
3 years ago
|
|
||
2 years ago
|
console.log('table ', result.data.list);
|
||
|
const columns = result.data.list;
|
||
3 years ago
|
|
||
|
// const relationsResult = await client.relationList({
|
||
3 years ago
|
// tn: this.nodes.table_name
|
||
3 years ago
|
// });
|
||
|
|
||
2 years ago
|
const relationsResult = await this.sqlMgr.sqlOp(
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
},
|
||
|
'relationList',
|
||
|
{
|
||
|
tn: this.nodes.table_name,
|
||
|
}
|
||
|
);
|
||
3 years ago
|
|
||
2 years ago
|
const relations = relationsResult.data.list;
|
||
|
console.log('relations: ', relations);
|
||
3 years ago
|
|
||
|
for (let i = 0; i < relations.length; i++) {
|
||
2 years ago
|
const relation = relations[i];
|
||
3 years ago
|
for (let i = 0; i < columns.length; i++) {
|
||
2 years ago
|
const column = columns[i];
|
||
3 years ago
|
|
||
3 years ago
|
if (column.column_name === relation.column_name) {
|
||
3 years ago
|
// column.rcn = relation.rcn;
|
||
|
// column.rtn = relation.rtn;
|
||
2 years ago
|
columns[i] = { ...column, ...relation };
|
||
3 years ago
|
}
|
||
|
}
|
||
3 years ago
|
}
|
||
3 years ago
|
|
||
2 years ago
|
this.columns = JSON.parse(JSON.stringify(columns));
|
||
|
this.originalColumns = [...columns];
|
||
|
console.log(this.columns);
|
||
3 years ago
|
},
|
||
3 years ago
|
async loadDataTypes() {
|
||
3 years ago
|
const client = await this.sqlMgr.projectGetSqlClient({
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
|
});
|
||
|
const result = client.getKnexDataTypes();
|
||
|
this.dataTypes = result.data.list;
|
||
3 years ago
|
},
|
||
3 years ago
|
saveColumnName(col) {
|
||
2 years ago
|
this.edited = true;
|
||
|
col.altered = col.altered || 8;
|
||
3 years ago
|
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'success';
|
||
|
this.snackText = 'Data saved';
|
||
3 years ago
|
},
|
||
3 years ago
|
save(col) {
|
||
2 years ago
|
this.edited = true;
|
||
|
col.altered = col.altered || 2;
|
||
3 years ago
|
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'success';
|
||
|
this.snackText = 'Data saved';
|
||
3 years ago
|
},
|
||
3 years ago
|
cancel() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'error';
|
||
|
this.snackText = 'Canceled';
|
||
3 years ago
|
},
|
||
3 years ago
|
open() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'info';
|
||
|
this.snackText = 'Dialog opened';
|
||
3 years ago
|
},
|
||
3 years ago
|
close() {
|
||
2 years ago
|
console.log('Dialog closed');
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
saveDefaultValue(col) {
|
||
2 years ago
|
this.edited = true;
|
||
|
col.altered = col.altered || 2;
|
||
3 years ago
|
// col.rqd = false;
|
||
3 years ago
|
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'success';
|
||
|
this.snackText = 'Data saved';
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
savePrecision(col) {
|
||
2 years ago
|
console.log(col);
|
||
|
col.altered = col.altered || 2;
|
||
|
this.edited = true;
|
||
|
this.snack = true;
|
||
|
this.snackColor = 'success';
|
||
|
this.snackText = 'Data saved';
|
||
3 years ago
|
},
|
||
3 years ago
|
cancelPrecision() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'error';
|
||
|
this.snackText = 'Canceled';
|
||
3 years ago
|
},
|
||
3 years ago
|
openPrecision() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'info';
|
||
|
this.snackText = 'Dialog opened';
|
||
3 years ago
|
},
|
||
3 years ago
|
closePrecision() {
|
||
2 years ago
|
console.log('Dialog closed');
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
saveScale(col) {
|
||
3 years ago
|
if (col.dtx === 'float' || col.dtx === 'decimal' || col.dtx === 'specifcType') {
|
||
2 years ago
|
col.altered = col.altered || 2;
|
||
|
this.edited = true;
|
||
|
this.snack = true;
|
||
|
this.snackColor = 'success';
|
||
|
this.snackText = 'Data saved';
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
cancelScale() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'error';
|
||
|
this.snackText = 'Canceled';
|
||
3 years ago
|
},
|
||
3 years ago
|
openScale() {
|
||
2 years ago
|
this.snack = true;
|
||
|
this.snackColor = 'info';
|
||
|
this.snackText = 'Dialog opened';
|
||
3 years ago
|
},
|
||
3 years ago
|
closeScale() {
|
||
2 years ago
|
console.log('Dialog closed');
|
||
3 years ago
|
},
|
||
3 years ago
|
|
||
3 years ago
|
removeUnsigned(columns) {
|
||
3 years ago
|
for (let i = 0; i < columns.length; ++i) {
|
||
2 years ago
|
if (columns[i].altered === 1 && !(columns[i].dt === 'int' || columns[i].dt === 'bigint')) {
|
||
|
columns[i].un = false;
|
||
|
console.log('>> resetting unsigned value', columns[i].column_name);
|
||
3 years ago
|
}
|
||
2 years ago
|
console.log(columns[i].column_name);
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
addColumn() {
|
||
2 years ago
|
this.edited = true;
|
||
3 years ago
|
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: ' ',
|
||
2 years ago
|
altered: 1,
|
||
|
});
|
||
3 years ago
|
},
|
||
3 years ago
|
async deleteColumn(action = '', index, column) {
|
||
3 years ago
|
if (action === 'showDialog') {
|
||
2 years ago
|
this.columnDeleteDlg = true;
|
||
|
this.selectedColForDelete = { index, column };
|
||
3 years ago
|
} else if (action === 'hideDialog') {
|
||
2 years ago
|
this.columnDeleteDlg = false;
|
||
3 years ago
|
} else {
|
||
|
if (this.columns[this.selectedColForDelete.index].altered === 1) {
|
||
|
// newly added column no need to remove fromd db
|
||
2 years ago
|
this.columns.splice(this.selectedColForDelete.index, 1);
|
||
3 years ago
|
} else {
|
||
2 years ago
|
const columns = JSON.parse(JSON.stringify(this.columns));
|
||
|
columns[this.selectedColForDelete.index].altered = 4;
|
||
3 years ago
|
await this.sqlMgr.sqlOpPlus(
|
||
3 years ago
|
{
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
3 years ago
|
},
|
||
3 years ago
|
'tableUpdate',
|
||
3 years ago
|
{
|
||
3 years ago
|
tn: this.nodes.table_name,
|
||
3 years ago
|
originalColumns: this.originalColumns,
|
||
2 years ago
|
columns,
|
||
3 years ago
|
}
|
||
2 years ago
|
);
|
||
|
this.columns.splice(this.selectedColForDelete.index, 1);
|
||
3 years ago
|
}
|
||
2 years ago
|
this.columnDeleteDlg = false;
|
||
|
this.selectedColForDelete = null;
|
||
3 years ago
|
}
|
||
|
},
|
||
3 years ago
|
async applyChanges() {
|
||
2 years ago
|
this.progress.save = true;
|
||
3 years ago
|
await this.sqlMgr.projectGetSqlClient({
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
|
});
|
||
3 years ago
|
if (this.newTable) {
|
||
2 years ago
|
this.removeUnsigned(this.columns);
|
||
3 years ago
|
// let result = await this.sqlMgr.sqlOpPlus(
|
||
|
// {
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias
|
||
|
// },
|
||
|
// "tableCreate",
|
||
|
// {
|
||
3 years ago
|
// tn: this.nodes.table_name,
|
||
3 years ago
|
// columns: this.columns
|
||
|
// }
|
||
|
// );
|
||
|
|
||
2 years ago
|
await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
|
dbAlias: this.nodes.dbAlias,
|
||
|
},
|
||
|
'tableCreate',
|
||
|
{
|
||
|
tn: this.nodes.table_name,
|
||
|
columns: this.columns,
|
||
|
},
|
||
|
]);
|
||
3 years ago
|
// const result = await client.tableCreate({
|
||
3 years ago
|
// tn: this.nodes.table_name,
|
||
3 years ago
|
// columns: this.columns
|
||
|
// });
|
||
2 years ago
|
this.mtdNewTableUpdate(false);
|
||
3 years ago
|
// console.log("result", result, this.nodes);
|
||
|
await this.loadTablesFromChildTreeNode({
|
||
|
_nodes: {
|
||
2 years ago
|
...this.nodes,
|
||
|
},
|
||
|
});
|
||
3 years ago
|
} else {
|
||
2 years ago
|
console.log('this.columns[index].altered before', this.columns);
|
||
3 years ago
|
// const result = await client.tableUpdate({
|
||
3 years ago
|
// tn: this.nodes.table_name,
|
||
3 years ago
|
// originalColumns: this.originalColumns,
|
||
|
// columns: this.columns
|
||
|
// });
|
||
2 years ago
|
this.removeUnsigned(this.columns);
|
||
3 years ago
|
// let result = await this.sqlMgr.sqlOpPlus(
|
||
|
// {
|
||
|
// env: this.nodes.env,
|
||
|
// dbAlias: this.nodes.dbAlias
|
||
|
// },
|
||
|
// "tableUpdate",
|
||
|
// {
|
||
3 years ago
|
// tn: this.nodes.table_name,
|
||
3 years ago
|
// originalColumns: this.originalColumns,
|
||
|
// columns: this.columns
|
||
|
// }
|
||
|
// );
|
||
|
|
||
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
|
||
|
{
|
||
3 years ago
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
3 years ago
|
},
|
||
|
'tableUpdate',
|
||
|
{
|
||
3 years ago
|
tn: this.nodes.table_name,
|
||
3 years ago
|
originalColumns: this.originalColumns,
|
||
2 years ago
|
columns: this.columns,
|
||
|
},
|
||
|
]);
|
||
|
console.log('update table result', result);
|
||
3 years ago
|
}
|
||
2 years ago
|
this.progress.save = false;
|
||
|
await this.loadColumnList();
|
||
3 years ago
|
},
|
||
3 years ago
|
createNewOrEditRelation(column) {
|
||
2 years ago
|
console.log(column);
|
||
|
this.selectedColForNewRelation = { ...column };
|
||
|
this.dialogShow = true;
|
||
3 years ago
|
},
|
||
3 years ago
|
async mtdNewRelationDlgSubmit(relationObject) {
|
||
3 years ago
|
try {
|
||
|
await this.sqlMgr.projectGetSqlClient({
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
|
});
|
||
3 years ago
|
|
||
3 years ago
|
if (relationObject.updateRelation) {
|
||
|
// update existing relation
|
||
2 years ago
|
alert('Not Implemented yet');
|
||
3 years ago
|
} else {
|
||
3 years ago
|
// const result = await client.relationCreate(relationObject);
|
||
|
|
||
|
const result = await this.sqlMgr.sqlOpPlus(
|
||
3 years ago
|
{
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
3 years ago
|
},
|
||
3 years ago
|
'relationCreate',
|
||
|
relationObject
|
||
2 years ago
|
);
|
||
|
console.log('relationCreate result: ', result);
|
||
3 years ago
|
}
|
||
|
|
||
2 years ago
|
await this.loadColumnList();
|
||
|
this.selectedColForNewRelation = null;
|
||
|
this.dialogShow = false;
|
||
3 years ago
|
} catch (error) {
|
||
2 years ago
|
console.error('relationCreate error: ', error);
|
||
3 years ago
|
}
|
||
3 years ago
|
},
|
||
3 years ago
|
mtdNewRelationDlgCancel() {
|
||
2 years ago
|
this.dialogShow = false;
|
||
|
this.selectedColNameForNewRelation = '';
|
||
3 years ago
|
},
|
||
3 years ago
|
async deleteRelation(action = '', column) {
|
||
3 years ago
|
if (action === 'showDialog') {
|
||
2 years ago
|
this.relationDeleteDlg = true;
|
||
|
this.selectedColForRelationDelete = column;
|
||
3 years ago
|
} else if (action === 'hideDialog') {
|
||
2 years ago
|
this.relationDeleteDlg = false;
|
||
|
this.selectedColForRelationDelete = null;
|
||
3 years ago
|
} else {
|
||
|
await this.sqlMgr.projectGetSqlClient({
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
|
});
|
||
3 years ago
|
|
||
|
// const result = await client.relationDelete({
|
||
3 years ago
|
// childColumn: column.column_name,
|
||
|
// childTable: this.nodes.table_name,
|
||
3 years ago
|
// parentTable: column.rtn,
|
||
|
// parentColumn: column.rcn,
|
||
|
// foreignKeyName: column.cstn
|
||
|
// });
|
||
|
const result = await this.sqlMgr.sqlOpPlus(
|
||
|
{
|
||
|
env: this.nodes.env,
|
||
2 years ago
|
dbAlias: this.nodes.dbAlias,
|
||
3 years ago
|
},
|
||
|
'relationDelete',
|
||
|
{
|
||
3 years ago
|
childColumn: this.selectedColForRelationDelete.column_name,
|
||
|
childTable: this.nodes.table_name,
|
||
2 years ago
|
parentTable: this.selectedColForRelationDelete.rtn,
|
||
|
parentColumn: this.selectedColForRelationDelete.rcn,
|
||
|
foreignKeyName: this.selectedColForRelationDelete.cstn,
|
||
3 years ago
|
}
|
||
2 years ago
|
);
|
||
|
console.log('relationDelete result ', result);
|
||
|
await this.loadColumnList();
|
||
|
this.relationDeleteDlg = false;
|
||
|
this.selectedColForRelationDelete = null;
|
||
3 years ago
|
}
|
||
2 years ago
|
},
|
||
3 years ago
|
},
|
||
|
computed: { ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }) },
|
||
|
|
||
2 years ago
|
beforeCreated() {},
|
||
3 years ago
|
watch: {},
|
||
3 years ago
|
async created() {
|
||
2 years ago
|
await this.loadColumnList();
|
||
|
this.loadDataTypes();
|
||
3 years ago
|
},
|
||
2 years ago
|
mounted() {},
|
||
|
beforeDestroy() {},
|
||
|
destroy() {},
|
||
3 years ago
|
directives: {},
|
||
3 years ago
|
validate({ params }) {
|
||
2 years ago
|
return true;
|
||
3 years ago
|
},
|
||
3 years ago
|
head() {
|
||
2 years ago
|
return {};
|
||
3 years ago
|
},
|
||
2 years ago
|
props: ['nodes', 'newTable', 'mtdNewTableUpdate', 'deleteTable'],
|
||
|
};
|
||
3 years ago
|
</script>
|
||
|
|
||
2 years ago
|
<style scoped></style>
|
||
3 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/>.
|
||
|
*
|
||
|
*/
|
||
|
-->
|