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.
1320 lines
42 KiB
1320 lines
42 KiB
<template> |
|
<div class=""> |
|
<v-overlay absolute v-if="isMetaTable"> |
|
<v-alert type="info">Meta tables are not editable</v-alert> |
|
</v-overlay> |
|
<v-card class="elevation-0"> |
|
|
|
<v-toolbar height="42" flat 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.nodes._tn + ' (table)', |
|
disabled: true, |
|
href: '#' |
|
}]" divider=">" small class="title"> |
|
<template v-slot:divider> |
|
<v-icon small color="grey lighten-2">forward</v-icon> |
|
</template> |
|
</v-breadcrumbs> |
|
|
|
</v-toolbar-title> |
|
<v-spacer></v-spacer> |
|
|
|
<x-btn tooltip="Reload Columns from database" |
|
outlined |
|
color="primary" |
|
small |
|
@click="reload" |
|
v-ge="['columns','reload']" |
|
> |
|
<v-icon small left>refresh</v-icon> |
|
Re<u>l</u>oad |
|
</x-btn> |
|
<x-btn tooltip="Adds new column" |
|
outlined |
|
color="primary" |
|
small |
|
@click="addColumn" |
|
v-ge="['columns','new']" |
|
> |
|
<v-icon small>mdi-plus</v-icon> <u>N</u>ew Column |
|
</x-btn |
|
> |
|
|
|
<x-btn |
|
v-if="$store.state.windows.scaffoldOnSave && projectIsGraphql && !isNoApis" |
|
tooltip="Save & Scaffold Changes" |
|
outlined |
|
color="primary" |
|
small |
|
:disabled="(!edited && !newTable) || isMetaTable" |
|
@click="applyChangesDirectGql" |
|
v-ge="['columns','save-and-scaffold']" |
|
> |
|
<v-icon small>mdi-content-save</v-icon> |
|
<u>S</u>ave & Scaffold |
|
</x-btn> |
|
|
|
<x-btn |
|
v-else-if="$store.state.windows.scaffoldOnSave && !isNoApis" |
|
tooltip="Save & Scaffold Changes" |
|
outlined |
|
color="primary" |
|
small |
|
:disabled="(!edited && !newTable) || isMetaTable" |
|
@click="applyChangesDirect" |
|
v-ge="['columns','save-and-scaffold']" |
|
> |
|
<v-icon small>mdi-content-save</v-icon> |
|
<u>S</u>ave & Scaffold |
|
</x-btn> |
|
<x-btn |
|
v-else |
|
tooltip="Save Changes" |
|
outlined |
|
color="primary" |
|
small |
|
:disabled="(!edited && !newTable) || isMetaTable" |
|
@click="applyChanges" |
|
v-ge="['columns','save']"> |
|
<v-icon small>mdi-content-save</v-icon> |
|
<u>S</u>ave |
|
</x-btn> |
|
<x-btn tooltip="Deletes Table" |
|
outlined |
|
small |
|
@click="deleteTable('showDialog')" |
|
color="error " |
|
class="text-right" |
|
v-ge="['columns','table-delete']"> |
|
<v-icon small>mdi-delete-outline</v-icon> <u>D</u>elete Table |
|
</x-btn> |
|
<v-menu open-on-hover offset-y primary> |
|
<template v-slot:activator="{ on }"> |
|
<v-btn |
|
outlined |
|
small |
|
color="primary" |
|
dark |
|
v-on="on" |
|
class="font-weight-bold"> |
|
Actions |
|
<v-icon>mdi-menu-down</v-icon> |
|
</v-btn> |
|
</template> |
|
|
|
<v-list dense> |
|
|
|
<template v-if="!isNoApis && isMvc"> |
|
<template |
|
v-if="projectIsGraphql"> |
|
<v-list-item |
|
@click="saveAndScaffoldGql()" |
|
|
|
v-ge="['columns','save-and-scaffold']"> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Save & Scaffold Module |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
@click="saveAndScaffoldGqlModel()" |
|
v-ge="['columns','save-and-scaffold']" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Save & Scaffold GQL Model |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
|
|
<v-list-item |
|
@click="scaffoldGql({model:true})" |
|
v-ge="['columns','scaffold']" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold GQL Model |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
@click="scaffoldGql({resolver:true})" |
|
v-ge="['columns','scaffold']" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold GQL Resolver |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
@click="scaffoldGql({service:true})" |
|
v-ge="['columns','scaffold']" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold GQL Service |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
@click="scaffoldGql({relations:true})" |
|
v-ge="['columns','scaffold']" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold GQL Relations |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
<!-- graphql : end--> |
|
|
|
|
|
</template> |
|
<template v-else> |
|
|
|
|
|
<v-list-item |
|
v-ge="['columns','save-and-scaffold']" |
|
@click="saveAndScaffold()"> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Save & Scaffold Module |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
<v-list-item |
|
v-ge="['columns','save-and-scaffold']" |
|
@click="saveAndScaffoldModel()"> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Save & Scaffold Model |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
<v-list-item |
|
v-ge="['columns','json-to-column']" |
|
@click="scaffold({model:true})"> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold Model |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
v-ge="['columns','scaffold']" |
|
@click="scaffold({router:true})" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold Router |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
v-ge="['columns','scaffold']" |
|
@click="scaffold({service:true})" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold Service |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
<v-list-item |
|
v-ge="['columns','scaffold']" |
|
@click="scaffold({relations:true})" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
Scaffold Relations |
|
|
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
|
|
</template> |
|
|
|
</template> |
|
<v-list-item |
|
@click="showJsonToColumDlg = true" |
|
> |
|
<v-list-item-title class="font-weight-bold pa-1" v-ge="['columns','json-to-columns']"> |
|
<v-icon color="primary" small>mdi-code-json</v-icon> |
|
|
|
JSON To Columns |
|
</v-list-item-title> |
|
</v-list-item> |
|
|
|
|
|
</v-list> |
|
</v-menu> |
|
|
|
</v-toolbar> |
|
|
|
<v-skeleton-loader type="table" v-if="loading"></v-skeleton-loader> |
|
<v-data-table |
|
v-else |
|
dense |
|
:headers="headers" |
|
:items="columns" |
|
hide-default-header |
|
:footer-props="{'items-per-page-options': paginationLength }" |
|
class=" column-table" |
|
> |
|
<template v-slot:header="{props:{headers}}"> |
|
<tr> |
|
<th class="pt-2 pb-0 grey--text caption text-center" v-for="header in headers" :key="header.title" |
|
style="white-space: nowrap;" |
|
:style="{minWidth:header.width,width:header.width}" |
|
> |
|
<v-tooltip bottom> |
|
<template v-slot:activator="{ on }"> |
|
<span v-on="on">{{ header.text }}</span> |
|
</template> |
|
<span>{{ header.title }}</span> |
|
</v-tooltip> |
|
</th> |
|
</tr> |
|
</template> |
|
|
|
<template v-slot:item="props"> |
|
<tr :disabled="nodes.tn==='_evolutions' || nodes.tn==='nc_evolutions'"> |
|
<td |
|
:title="props.item.cn" |
|
ref="column" |
|
style="width:200px" |
|
> |
|
<div class="d-flex"> |
|
|
|
<v-icon small |
|
:class="{ |
|
'green--text' : props.item.pk, |
|
'orange--text text--darken-2':props.item.rcn, |
|
'lime--text text--lighten-4' : !props.item.pk&&!props.item.rcn |
|
}"> |
|
{{ getColumnIcon(props.item) }} |
|
</v-icon> |
|
|
|
<v-edit-dialog |
|
class="flex-shrink-1" |
|
v-if="!props.item.rcn" |
|
@save.native="saveColumnName(props.item)" |
|
@cancel="saveColumnName(props.item)" |
|
@close="saveColumnName(props.item)" |
|
v-ge="['columns','cn']" |
|
> |
|
<div |
|
:title="props.item.cn" |
|
style="width:180px;overflow:hidden;white-space: nowrap;text-overflow:ellipsis"> {{ |
|
props.item.cn |
|
}} |
|
</div> |
|
<template v-slot:input> |
|
<v-text-field |
|
:disabled="props.item.rcn || !sqlUi.columnEditable(props.item)" |
|
v-model="props.item.cn" |
|
:rules="form.validation.required" |
|
label="Edit" |
|
single-line |
|
></v-text-field> |
|
</template> |
|
</v-edit-dialog> |
|
<span v-else @click="onFKShowWarning">{{ props.item.cn }}</span> |
|
</div> |
|
</td> |
|
<td class="pa-0"> |
|
<v-autocomplete |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-if="!props.item.rcn" |
|
class="body-2 mt-n1" |
|
:full-width="false" |
|
v-model="props.item.dt" |
|
:items="dataTypes" |
|
@change="onDataTypeChange(props.item,props.index)" |
|
dense |
|
hide-details |
|
v-ge="['columns','dt']" |
|
></v-autocomplete> |
|
|
|
<span v-else @click="onFKShowWarning">{{ props.item.dt }}</span> |
|
</td> |
|
<td class="pa-0"> |
|
<v-autocomplete |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
class="body-2 mt-n1" |
|
:full-width="false" |
|
v-model="props.item.uidt" |
|
:items="uiDataTypes" |
|
@change="onUiDataTypeChange(props.item)" |
|
dense |
|
hide-details |
|
v-ge="['columns','dt']" |
|
></v-autocomplete> |
|
|
|
</td> |
|
<td> |
|
<v-edit-dialog |
|
v-if="!props.item.rcn" |
|
lazy |
|
@cancel="savePrecision(props.item)" |
|
@close="savePrecision(props.item)"> |
|
{{ props.item.dtxp }} |
|
<template v-slot:input> |
|
<v-text-field |
|
:disabled="sqlUi.getDefaultLengthIsDisabled(props.item.dt) || !sqlUi.columnEditable(props.item)" |
|
v-model="props.item.dtxp" |
|
:rules="[max25chars]" |
|
label="Edit" |
|
single-line |
|
v-ge="['columns','precision']" |
|
></v-text-field> |
|
</template> |
|
</v-edit-dialog> |
|
<span v-else @click="onFKShowWarning">{{ props.item.dtxp }}</span> |
|
</td> |
|
<td :style="props.item.rcn? 'padding:0' : ''"> |
|
|
|
<template v-if="!props.item.rcn"> |
|
<v-edit-dialog |
|
v-if="showScale(props.item)" |
|
lazy |
|
@cancel="saveScale(props.item)" |
|
@close="saveScale(props.item)" |
|
> |
|
{{ props.item.dtxs }} |
|
<template v-slot:input> |
|
<v-text-field |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-model="props.item.dtxs" |
|
:rules="[max25chars]" |
|
label="Edit" |
|
single-line |
|
v-ge="['columns','scale']" |
|
></v-text-field> |
|
</template> |
|
</v-edit-dialog> |
|
</template> |
|
<div style="width: 100%;height:100%" v-else @click="onFKShowWarning">{{ |
|
props.item.dtxs || '' |
|
}} |
|
</div> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
hide-details |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-if="!props.item.rcn" |
|
@change="onCheckboxChangePk(props.item)" |
|
solo |
|
dense |
|
height="44" |
|
color="primary lighten-1" |
|
v-model="props.item.pk" |
|
v-ge="['columns','pk']" |
|
></v-checkbox> |
|
<v-checkbox |
|
hide-details |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-else |
|
@click.stop="onFKShowWarning" |
|
solo |
|
dense |
|
height="44" |
|
color="primary lighten-1" |
|
v-model="props.item.pk" |
|
v-ge="['columns','pk']" |
|
></v-checkbox> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
hide-details |
|
v-if="!props.item.rcn" |
|
@change="onCheckboxChangeNN(props.item)" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
:disabled="props.item.pk || !sqlUi.columnEditable(props.item)" |
|
v-model="props.item.rqd" |
|
v-ge="['columns','nn']" |
|
></v-checkbox> |
|
|
|
<v-checkbox |
|
hide-details |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-else |
|
@click.stop="onFKShowWarning" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.rqd" |
|
v-ge="['columns','nn']" |
|
></v-checkbox> |
|
|
|
</td> |
|
<td> |
|
<v-checkbox |
|
hide-details |
|
v-if="!props.item.rcn" |
|
:disabled="colPropUNDisabled(props.item) || !sqlUi.columnEditable(props.item)" |
|
@change="onCheckboxChangeUN(props.item)" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.un" |
|
v-ge="['columns','un']" |
|
></v-checkbox> |
|
<v-checkbox |
|
hide-details |
|
v-else |
|
:disabled="colPropUNDisabled(props.item) || !sqlUi.columnEditable(props.item)" |
|
@click.stop="onFKShowWarning" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.un" |
|
v-ge="['columns','un']" |
|
></v-checkbox> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
hide-details |
|
v-if="!props.item.rcn" |
|
:disabled="colPropAIDisabled(props.item) || !sqlUi.columnEditable(props.item)" |
|
@change="onCheckboxChangeAI(props.item)" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.ai" |
|
v-ge="['columns','ai']" |
|
></v-checkbox> |
|
<v-checkbox |
|
v-else |
|
:disabled="colPropAIDisabled(props.item) || !sqlUi.columnEditable(props.item)" |
|
@click.stop="onFKShowWarning" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.ai" |
|
v-ge="['columns','ai']" |
|
></v-checkbox> |
|
</td> |
|
<td> |
|
<v-checkbox |
|
hide-details |
|
:disabled=" sqlUi.colPropAuDisabled(props.item) || !sqlUi.columnEditable(props.item)" |
|
@change="onCheckboxChangeAU(props.item)" |
|
solo |
|
dense |
|
color="primary lighten-1" |
|
v-model="props.item.au" |
|
v-ge="['columns','au']" |
|
></v-checkbox> |
|
</td> |
|
|
|
<td> |
|
<p v-if="props.item.rtn" row wrap class="mb-0"> |
|
{{ props.item.rtn }} |
|
<x-icon small @click="createNewOrEditRelation(props.item)" |
|
color="primary" |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-ge="['columns','fk-edit']" |
|
>mdi-table-edit |
|
</x-icon |
|
> |
|
<x-icon small |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
@click="deleteRelation('showDialog', props.item)" |
|
color="error" |
|
v-ge="['columns','fk-delete']" |
|
>mdi-delete-forever |
|
</x-icon |
|
> |
|
<span v-if="props.item.type=== 'virtual'" class="caption">(v)</span> |
|
</p> |
|
|
|
<x-icon |
|
v-else-if="!props.item.pk && props.item.altered!==1" |
|
color="primary grey" |
|
small |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
@click="createNewOrEditRelation(props.item)" |
|
v-ge="['columns','fk-add']" |
|
>add |
|
</x-icon> |
|
|
|
<v-icon |
|
v-else |
|
disabled |
|
small |
|
color="grey" |
|
v-ge="['columns','fk-add']" |
|
>add |
|
</v-icon> |
|
|
|
</td> |
|
<td :style="props.item.rcn? 'padding:0' : ''"> |
|
<v-edit-dialog |
|
v-if="!props.item.rcn" |
|
:return-value.sync="props.item.cdf" |
|
large |
|
lazy |
|
persistent |
|
:value="true" |
|
@save="saveDefaultValue(props.item)" |
|
@cancel="cancel" |
|
@open="open" |
|
@close="close" |
|
class="caption" |
|
> |
|
<!-- <div v-if="props.item.rqd">{{ props.item.cdf }}</div>--> |
|
<div v-if="props.item.pk"></div> |
|
<div v-else-if="!props.item.cdf && !props.item.rqd" class="caption">NULL</div> |
|
<div v-else class="caption">{{ props.item.cdf }}</div> |
|
<template v-slot:input> |
|
<div class="mt-3 title">Update Column Default</div> |
|
</template> |
|
<template v-slot:input> |
|
<v-textarea |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
v-model="props.item.cdf" |
|
label="Edit" |
|
counter |
|
class="caption" |
|
:placeholder="`${sqlUi.getDefaultValueForDatatype(props.item.dt)}`" |
|
autofocus |
|
v-ge="['columns','default']" |
|
></v-textarea> |
|
</template> |
|
</v-edit-dialog> |
|
<div style="width: 100%;height:100%" v-else @click="onFKShowWarning">{{ props.item.cdf }}</div> |
|
</td> |
|
<td> |
|
<v-hover |
|
v-if="!props.item.rcn" v-slot:default="{ hover }"> |
|
<v-icon |
|
:color="hover ? 'error' : 'grey'" |
|
small |
|
:disabled="!sqlUi.columnEditable(props.item)" |
|
@click="deleteColumn('showDialog', props.index, props.item)" |
|
v-ge="['columns','delete']" |
|
>mdi-delete-forever |
|
</v-icon |
|
> |
|
</v-hover> |
|
</td> |
|
</tr> |
|
</template> |
|
</v-data-table> |
|
</v-card> |
|
|
|
<addRelationDlg |
|
v-if="dialogShow" |
|
:nodes="nodes" |
|
:column="selectedColForNewRelation" |
|
heading="Relation Column " |
|
:dialogShow="dialogShow" |
|
:mtdDialogSubmit="mtdNewRelationDlgSubmit" |
|
:mtdDialogCancel="mtdNewRelationDlgCancel" |
|
/> |
|
|
|
<span v-else></span> |
|
<dlgLabelSubmitCancel |
|
type="primary" |
|
v-if="columnDeleteDlg" |
|
:dialogShow="columnDeleteDlg" |
|
:actionsMtd="deleteColumn" |
|
heading="Click Submit to Delete the Column" |
|
/> |
|
<dlgLabelSubmitCancel |
|
type="primary" |
|
v-if="relationDeleteDlg" |
|
:dialogShow="relationDeleteDlg" |
|
:actionsMtd="deleteRelation" |
|
heading="Click Submit to Delete the Relation" |
|
/> |
|
<jsonToColumn |
|
:show.sync="showJsonToColumDlg" |
|
@load="loadJsonColumn" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import {mapGetters, mapActions} from "vuex"; |
|
import addRelationDlg from "../dlgs/dlgAddRelation.vue"; |
|
import dlgLabelSubmitCancel from "../../utils/dlgLabelSubmitCancel.vue"; |
|
|
|
import {SqlUI} from '../../../helpers/SqlUiFactory'; |
|
import jsonToColumn from "./columnActions/jsonToColumn"; |
|
import JSON5 from 'json5'; |
|
import uiTypes from "@/components/project/spreadsheet/helpers/uiTypes"; |
|
|
|
// const {path} = require("electron").remote.require( |
|
// "./libs" |
|
// ); |
|
|
|
export default { |
|
components: {addRelationDlg, dlgLabelSubmitCancel, jsonToColumn}, |
|
data() { |
|
return { |
|
showJsonToColumDlg: false, |
|
paginationLength: [20, 50, -1], |
|
form: { |
|
validation: { |
|
required: [v => !!v || 'Required'] |
|
} |
|
}, |
|
progress: { |
|
save: false, |
|
deleteTable: false, |
|
refresh: false |
|
}, |
|
edited: false, |
|
columnDeleteDlg: false, |
|
selectedColForDelete: null, |
|
relationDeleteDlg: false, |
|
selectedColForRelationDelete: null, |
|
columns: [], |
|
dataTypes: [], |
|
uiDataTypes: [], |
|
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: "UI Type", title: 'UI Type', value: "uidt", sortable: false, width: "10%"}, |
|
// {text: "Type",title:', value: "dt", sortable: false, width: "10%"}, |
|
{text: "Length/Values", title: 'Length/Values', value: "dt", sortable: false, width: "5%"}, |
|
{text: "Scale", title: 'Scale', value: "dt", sortable: false, width: "5%"}, |
|
{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: "AU", title: 'Auto Update Timestamp', value: "", sortable: false, width: "1%"}, |
|
{text: "FK", 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, |
|
loading: true |
|
}; |
|
}, |
|
methods: { |
|
async saveAndScaffold() { |
|
await this.applyChanges(); |
|
await this.scaffold(); |
|
}, |
|
async saveAndScaffoldModel() { |
|
await this.applyChanges(); |
|
await this.scaffold({model: true}); |
|
}, |
|
async scaffold(scaffold = null) { |
|
try { |
|
await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
null, |
|
"projectGenerateBackend", |
|
{ |
|
env: 'dev', |
|
tn: this.nodes.tn, |
|
scaffold |
|
} |
|
]); |
|
} catch (e) { |
|
console.log(e) |
|
} |
|
}, |
|
async saveAndScaffoldGql() { |
|
await this.applyChanges(); |
|
await this.scaffoldGql(); |
|
}, |
|
async saveAndScaffoldModelGql() { |
|
await this.applyChanges(); |
|
await this.scaffoldGql({model: true}); |
|
}, |
|
async scaffoldGql(scaffold = null) { |
|
try { |
|
await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
null, |
|
"projectGenerateBackendGql", |
|
{ |
|
env: 'dev', |
|
tn: this.nodes.tn, |
|
scaffold |
|
} |
|
]); |
|
} catch (e) { |
|
} |
|
}, |
|
async handleKeyDown({metaKey, key, altKey, shiftKey, ctrlKey}) { |
|
console.log(metaKey, key, altKey, shiftKey, ctrlKey) |
|
// cmd + s -> save |
|
// cmd + l -> reload |
|
// cmd + n -> new |
|
// cmd + d -> delete |
|
// cmd + enter -> send api |
|
|
|
switch ([this._isMac ? metaKey : ctrlKey, key].join('_')) { |
|
case 'true_s' : |
|
await this.applyChanges(); |
|
break; |
|
case 'true_l' : |
|
await this.loadColumnList(); |
|
break; |
|
case 'true_n' : |
|
this.addColumn(); |
|
break; |
|
case 'true_d' : |
|
await this.deleteTable('showDialog'); |
|
break; |
|
|
|
} |
|
}, |
|
loadJsonColumn(jsonString) { |
|
|
|
try { |
|
const columns = this.sqlUi.getColumnsFromJson(JSON5.parse(jsonString), this.nodes.tn); |
|
let dup = columns.find(col => this.columns.some(exCol => exCol.cn === col.cn)); |
|
if (!dup) { |
|
this.columns = [...this.columns, ...columns]; |
|
this.showJsonToColumDlg = false; |
|
this.edited = true; |
|
this.$toast.info(`${columns.length} column${columns.length > 1 ? 's' : ''} added`).goAway(3000) |
|
} else { |
|
this.$toast.error(`Duplicate column found : ${dup.cn}`).goAway(3000) |
|
} |
|
} catch (e) { |
|
console.log(e) |
|
this.$toast.error('Invalid JSON string').goAway(3000) |
|
} |
|
}, |
|
getColumnIcon(column) { |
|
if (column.pk) { |
|
return 'mdi-key' |
|
} else if (column.rcn) { |
|
return 'mdi-link-variant' |
|
} else { |
|
return 'mdi-gate-or' |
|
} |
|
}, |
|
onFKShowWarning() { |
|
this.$toast.error("COLUMN property with foreign key mapped can't be edited. Remove foreign key to edit.").goAway(3000) |
|
}, |
|
|
|
|
|
...mapActions({ |
|
loadTablesFromChildTreeNode: "project/loadTablesFromChildTreeNode" |
|
}), |
|
onCheckboxChange() { |
|
this.edited = true; |
|
}, |
|
|
|
onCheckboxChangePk(col) { |
|
|
|
this.edited = true; |
|
col.altered = col.altered || 2; |
|
|
|
if (!col.pk && col.ai) { |
|
col.ai = false; |
|
} else if (col.pk) { |
|
col.rqd = true; |
|
} |
|
|
|
col.cdf = null; |
|
col.rqd = true; |
|
|
|
}, |
|
colPropAIDisabled(col) { |
|
return this.sqlUi.colPropAIDisabled(col, this.columns); |
|
|
|
}, |
|
|
|
colPropUNDisabled(col) { |
|
return this.sqlUi.colPropUNDisabled(col); |
|
|
|
}, |
|
|
|
|
|
onCheckboxChangeAI(col) { |
|
this.sqlUi.onCheckboxChangeAI(col); |
|
|
|
this.edited = true; |
|
}, |
|
|
|
onCheckboxChangeAU(col) { |
|
this.sqlUi.onCheckboxChangeAU(col); |
|
this.edited = true; |
|
}, |
|
|
|
onCheckboxChangeNN(col) { |
|
col.altered = col.altered || 2; |
|
this.edited = true; |
|
}, |
|
|
|
onCheckboxChangeUN(col) { |
|
col.altered = col.altered || 2; |
|
this.edited = true; |
|
}, |
|
|
|
|
|
onUiDataTypeChange(column) { |
|
this.edited = true; |
|
column.altered = column.altered || 2 |
|
}, |
|
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 = this.sqlUi.getDefaultLengthForDatatype(column.dt); |
|
column.dtxs = this.sqlUi.getDefaultScaleForDatatype(column.dt); |
|
|
|
column.dtx = 'specificType'; |
|
|
|
console.log('data type changed', index, column); |
|
|
|
this.$set(column, 'uidt', this.sqlUi.getUIType(column)); |
|
|
|
}, |
|
async loadColumnList() { |
|
this.loading = true; |
|
this.$store.commit('notification/MutToggleProgressBar', true); |
|
try { |
|
this.edited = false; |
|
if (this.newTable) { |
|
this.columns = this.sqlUi.getNewTableColumns(); |
|
return; |
|
} |
|
|
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'columnList', { |
|
tn: this.nodes.tn |
|
}]); |
|
const columns = result.data.list; |
|
|
|
const relations = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'xcRelationList', { |
|
tn: this.nodes.tn |
|
}]); |
|
|
|
|
|
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) { |
|
columns[i] = {...column, ...relation}; |
|
} |
|
} |
|
} |
|
|
|
this.columns = JSON.parse(JSON.stringify(columns)); |
|
this.originalColumns = [...columns]; |
|
|
|
|
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Error loading columns :' + e).goAway(4000); |
|
throw e; |
|
} finally { |
|
this.$store.commit('notification/MutToggleProgressBar', false); |
|
this.loading = false; |
|
} |
|
|
|
}, |
|
async loadUiDataTypes() { |
|
this.uiDataTypes = uiTypes; |
|
}, |
|
async loadDataTypes() { |
|
try { |
|
const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, 'getKnexDataTypes', {}]) |
|
|
|
this.dataTypes = result.data.list; |
|
} catch (e) { |
|
this.$toast.error('Error loading datatypes :' + e).goAway(4000); |
|
throw e; |
|
} |
|
}, |
|
saveColumnName(col, v) { |
|
this.edited = true; |
|
col.altered = col.altered || 8; |
|
this.snack = true; |
|
}, |
|
save(col) { |
|
this.edited = true; |
|
col.altered = col.altered || 2; |
|
this.snack = true; |
|
}, |
|
cancel() { |
|
this.snack = true; |
|
}, |
|
open() { |
|
this.snack = true; |
|
}, |
|
close() { |
|
console.log("Dialog closed"); |
|
}, |
|
|
|
saveDefaultValue(col) { |
|
this.edited = true; |
|
col.altered = col.altered || 2; |
|
this.snack = true; |
|
}, |
|
savePrecision(col) { |
|
console.log(col); |
|
col.altered = col.altered || 2; |
|
this.edited = true; |
|
this.snack = true; |
|
}, |
|
cancelPrecision() { |
|
this.snack = true; |
|
}, |
|
openPrecision() { |
|
this.snack = true; |
|
}, |
|
closePrecision() { |
|
console.log("Dialog closed"); |
|
}, |
|
showScale(columnObj) { |
|
return this.sqlUi.showScale(columnObj); |
|
}, |
|
saveScale(col) { |
|
col.altered = col.altered || 2; |
|
this.edited = true; |
|
this.snack = true; |
|
}, |
|
cancelScale() { |
|
this.snack = true; |
|
}, |
|
openScale() { |
|
this.snack = true; |
|
}, |
|
closeScale() { |
|
console.log("Dialog closed"); |
|
}, |
|
removeUnsigned(columns) { |
|
this.sqlUi.removeUnsigned(columns); |
|
}, |
|
async reload() { |
|
await this.loadColumnList(); |
|
}, |
|
addColumn() { |
|
this.edited = true; |
|
this.columns.push(this.sqlUi.getNewColumn(this.columns.length)); |
|
this.scrollAndFocusLastRow(); |
|
}, |
|
async deleteColumn(action = "", index, column) { |
|
|
|
try { |
|
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 from 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.$store.dispatch('sqlMgr/ActSqlOpPlus', [{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, "tableUpdate", { |
|
tn: this.nodes.tn, |
|
originalColumns: this.originalColumns, |
|
columns: columns |
|
}]); |
|
this.columns.splice(this.selectedColForDelete.index, 1); |
|
this.$toast.success('Column deleted successfully').goAway(3000); |
|
} |
|
this.columnDeleteDlg = false; |
|
this.selectedColForDelete = null; |
|
} |
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Error while deleting column : ' + e).goAway(3000); |
|
throw e; |
|
} |
|
|
|
}, |
|
|
|
async applyChangesDirect() { |
|
try { |
|
if (this.newTable) { |
|
await this.saveAndScaffold(); |
|
} else if (this.edited) { |
|
await this.saveAndScaffoldModel(); |
|
} |
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Error while saving table : ' + e).goAway(3000); |
|
throw e; |
|
} |
|
}, |
|
async applyChangesDirectGql() { |
|
try { |
|
if (this.newTable) { |
|
await this.saveAndScaffoldGql(); |
|
} else if (this.edited) { |
|
await this.saveAndScaffoldModelGql(); |
|
} |
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Error while saving table : ' + e).goAway(3000); |
|
throw e; |
|
} |
|
}, |
|
async applyChanges() { |
|
|
|
try { |
|
this.progress.save = true; |
|
if (this.newTable) { |
|
this.removeUnsigned(this.columns); |
|
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
"tableCreate", |
|
{ |
|
tn: this.nodes.tn, |
|
columns: this.columns |
|
}]); |
|
this.mtdNewTableUpdate(false); |
|
await this.loadTablesFromChildTreeNode({ |
|
_nodes: { |
|
...this.nodes |
|
} |
|
}); |
|
} else if (this.edited) { |
|
console.log("this.columns[index].altered before", this.columns); |
|
this.removeUnsigned(this.columns); |
|
let 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); |
|
} |
|
await this.loadColumnList(); |
|
|
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Error while saving table : ' + e).goAway(3000); |
|
} |
|
|
|
this.progress.save = false; |
|
|
|
}, |
|
createNewOrEditRelation(column) { |
|
console.log(column); |
|
this.selectedColForNewRelation = {...column}; |
|
this.dialogShow = true; |
|
}, |
|
async mtdNewRelationDlgSubmit(relationObject) { |
|
try { |
|
if (relationObject.updateRelation) { |
|
//update existing relation |
|
alert("Not Implemented yet"); |
|
} else { |
|
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
relationObject.type === 'real' ? "relationCreate" : 'xcVirtualRelationCreate', |
|
relationObject |
|
]); |
|
console.log("relationCreate result: ", result); |
|
} |
|
|
|
// await this.scaffold(); |
|
await this.loadColumnList(); |
|
this.selectedColForNewRelation = null; |
|
this.dialogShow = false; |
|
|
|
this.$toast.success('Foreign Key created successfully').goAway(3000); |
|
|
|
} catch (error) { |
|
console.log(error) |
|
this.$toast.error('Foreign Key relation creation failed ' + error).goAway(4000); |
|
console.error("relationCreate error: ", error); |
|
throw error; |
|
} |
|
}, |
|
mtdNewRelationDlgCancel() { |
|
this.dialogShow = false; |
|
this.selectedColNameForNewRelation = ""; |
|
}, |
|
async deleteRelation(action = "", column) { |
|
|
|
try { |
|
if (action === "showDialog") { |
|
this.relationDeleteDlg = true; |
|
this.selectedColForRelationDelete = column; |
|
} else if (action === "hideDialog") { |
|
this.relationDeleteDlg = false; |
|
this.selectedColForRelationDelete = null; |
|
} else { |
|
let result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [ |
|
{ |
|
env: this.nodes.env, |
|
dbAlias: this.nodes.dbAlias |
|
}, |
|
this.selectedColForRelationDelete.type === 'virtual' ? 'xcVirtualRelationDelete' : "relationDelete", |
|
{ |
|
childColumn: this.selectedColForRelationDelete.cn, |
|
childTable: this.nodes.tn, |
|
parentTable: this.selectedColForRelationDelete |
|
.rtn, |
|
parentColumn: this.selectedColForRelationDelete |
|
.rcn, |
|
} |
|
]); |
|
console.log("relationDelete result ", result); |
|
await this.loadColumnList(); |
|
this.relationDeleteDlg = false; |
|
this.selectedColForRelationDelete = null; |
|
this.$toast.success('Foreign Key deleted successfully').goAway(3000); |
|
} |
|
|
|
} catch (e) { |
|
console.log(e); |
|
this.$toast.error('Foreign key relation delete failed' + e).goAway(3000); |
|
throw e; |
|
} |
|
|
|
}, |
|
scrollAndFocusLastRow() { |
|
this.$nextTick(() => { |
|
document.querySelector('.project-container').scrollTop = 9999; |
|
const menuActivator = this.$refs.column && this.$refs.column.querySelector('.v-small-dialog__activator__content'); |
|
if (menuActivator) { |
|
this.$refs.column.querySelector('.v-small-dialog__activator__content').click(); |
|
this.$nextTick(() => { |
|
const inputField = document.querySelector('.menuable__content__active input'); |
|
inputField && inputField.select() |
|
}) |
|
} |
|
}) |
|
} |
|
}, |
|
computed: { |
|
...mapGetters({ |
|
sqlMgr: "sqlMgr/sqlMgr", |
|
currentProjectFolder: "project/currentProjectFolder", |
|
projectIsGraphql: "project/GtrProjectIsGraphql", |
|
isNoApis: "project/GtrProjectIsNoApis", |
|
isMvc: "project/GtrIsMvc", |
|
}) |
|
}, |
|
|
|
beforeCreated() { |
|
}, |
|
async created() { |
|
|
|
this.sqlUi = SqlUI.create(this.nodes.dbConnection); |
|
|
|
try { |
|
this.loading = true; |
|
this.loadDataTypes(); |
|
this.loadUiDataTypes(); |
|
await this.loadColumnList(); |
|
} catch (e) { |
|
throw e; |
|
} finally { |
|
this.loading = false; |
|
} |
|
|
|
}, |
|
mounted() { |
|
|
|
}, |
|
beforeDestroy() { |
|
}, |
|
destroy() { |
|
}, |
|
validate({params}) { |
|
return true; |
|
}, |
|
head() { |
|
return {}; |
|
}, |
|
props: ["nodes", "newTable", "mtdNewTableUpdate", "deleteTable", "isMetaTable"], |
|
watch: {}, |
|
directives: {} |
|
}; |
|
</script> |
|
|
|
<style scoped> |
|
/* to apply 6-9 columns */ |
|
/deep/ .column-table td:nth-child(n+5):not(:nth-child(n+10)), |
|
/deep/ .column-table th:nth-child(n+5):not(:nth-child(n+10)) { |
|
width: 30px; |
|
padding: 0; |
|
} |
|
|
|
</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/>. |
|
* |
|
*/ |
|
-->
|
|
|