mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
refactor: better component names
This commit is contained in:
690
src/renderer/components/WorkspaceTabPropsTable.vue
Normal file
690
src/renderer/components/WorkspaceTabPropsTable.vue
Normal file
@ -0,0 +1,690 @@
|
||||
<template>
|
||||
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
|
||||
<div class="workspace-query-runner column col-12">
|
||||
<div class="workspace-query-runner-footer">
|
||||
<div class="workspace-query-buttons">
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="!isChanged"
|
||||
:class="{'loading':isSaving}"
|
||||
title="CTRL+S"
|
||||
@click="saveChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged || isSaving"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep mr-1" />
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
</button>
|
||||
|
||||
<div class="divider-vert py-3" />
|
||||
|
||||
<button
|
||||
:disabled="isSaving"
|
||||
class="btn btn-dark btn-sm"
|
||||
:title="$t('message.addNewField')"
|
||||
@click="addField"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-playlist-plus mr-1" />
|
||||
<span>{{ $t('word.add') }}</span>
|
||||
</button>
|
||||
<button
|
||||
:disabled="isSaving"
|
||||
class="btn btn-dark btn-sm"
|
||||
:title="$t('message.manageIndexes')"
|
||||
@click="showIntdexesModal"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-key mdi-rotate-45 mr-1" />
|
||||
<span>{{ $t('word.indexes') }}</span>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-dark btn-sm"
|
||||
:disabled="isSaving"
|
||||
@click="showForeignModal"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-key-link mr-1" />
|
||||
<span>{{ $t('word.foreignKeys') }}</span>
|
||||
</button>
|
||||
<!-- <button
|
||||
v-if="workspace.customizations.tableOptions"
|
||||
class="btn btn-dark btn-sm"
|
||||
:disabled="isSaving"
|
||||
@click="showOptionsModal"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-cogs mr-1" />
|
||||
<span>{{ $t('word.options') }}</span>
|
||||
</button> -->
|
||||
</div>
|
||||
<div class="workspace-query-info">
|
||||
<div class="d-flex" :title="$t('word.schema')">
|
||||
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="columns mb-4">
|
||||
<div class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.name') }}</label>
|
||||
<input
|
||||
v-model="localOptions.name"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="workspace.customizations.comment" class="column">
|
||||
<div class="form-group">
|
||||
<label class="form-label">{{ $t('word.comment') }}</label>
|
||||
<input
|
||||
v-model="localOptions.comment"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="workspace.customizations.autoIncrement" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.autoIncrement') }}
|
||||
</label>
|
||||
<input
|
||||
ref="firstInput"
|
||||
v-model="localOptions.autoIncrement"
|
||||
class="form-input"
|
||||
type="number"
|
||||
:disabled="localOptions.autoIncrement === null"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="workspace.customizations.collations" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.collation') }}
|
||||
</label>
|
||||
<select v-model="localOptions.collation" class="form-select">
|
||||
<option
|
||||
v-for="collation in workspace.collations"
|
||||
:key="collation.id"
|
||||
:value="collation.collation"
|
||||
>
|
||||
{{ collation.collation }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="workspace.customizations.engines" class="column col-auto">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
{{ $t('word.engine') }}
|
||||
</label>
|
||||
<select v-model="localOptions.engine" class="form-select">
|
||||
<option
|
||||
v-for="engine in workspace.engines"
|
||||
:key="engine.name"
|
||||
:value="engine.name"
|
||||
>
|
||||
{{ engine.name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="workspace-query-results column col-12 p-relative">
|
||||
<BaseLoader v-if="isLoading" />
|
||||
<WorkspaceTabPropsTableFIelds
|
||||
v-if="localFields"
|
||||
ref="indexTable"
|
||||
:fields="localFields"
|
||||
:indexes="localIndexes"
|
||||
:foreigns="localKeyUsage"
|
||||
:tab-uid="tabUid"
|
||||
:conn-uid="connection.uid"
|
||||
:index-types="workspace.indexTypes"
|
||||
:table="table"
|
||||
:schema="schema"
|
||||
mode="table"
|
||||
@duplicate-field="duplicateField"
|
||||
@remove-field="removeField"
|
||||
@add-new-index="addNewIndex"
|
||||
@add-to-index="addToIndex"
|
||||
@rename-field="renameField"
|
||||
/>
|
||||
</div>
|
||||
<!-- <WorkspaceTabPropsTableOptionsModal
|
||||
v-if="isOptionsModal"
|
||||
:local-options="localOptions"
|
||||
:table="table"
|
||||
:workspace="workspace"
|
||||
@hide="hideOptionsModal"
|
||||
@options-update="optionsUpdate"
|
||||
/> -->
|
||||
<WorkspaceTabPropsTableIndexesModal
|
||||
v-if="isIndexesModal"
|
||||
:local-indexes="localIndexes"
|
||||
:table="table"
|
||||
:fields="localFields"
|
||||
:index-types="workspace.indexTypes"
|
||||
:workspace="workspace"
|
||||
@hide="hideIndexesModal"
|
||||
@indexes-update="indexesUpdate"
|
||||
/>
|
||||
<WorkspaceTabPropsTableForeignModal
|
||||
v-if="isForeignModal"
|
||||
:local-key-usage="localKeyUsage"
|
||||
:connection="connection"
|
||||
:table="table"
|
||||
:schema="schema"
|
||||
:schema-tables="schemaTables"
|
||||
:fields="localFields"
|
||||
:workspace="workspace"
|
||||
@hide="hideForeignModal"
|
||||
@foreigns-update="foreignsUpdate"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
import { uidGen } from 'common/libs/uidGen';
|
||||
import Tables from '@/ipc-api/Tables';
|
||||
import BaseLoader from '@/components/BaseLoader';
|
||||
import WorkspaceTabPropsTableFIelds from '@/components/WorkspaceTabPropsTableFIelds';
|
||||
// import WorkspaceTabPropsTableOptionsModal from '@/components/WorkspaceTabPropsTableOptionsModal';
|
||||
import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
|
||||
import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
|
||||
|
||||
export default {
|
||||
name: 'WorkspaceTabPropsTable',
|
||||
components: {
|
||||
BaseLoader,
|
||||
WorkspaceTabPropsTableFIelds,
|
||||
// WorkspaceTabPropsTableOptionsModal,
|
||||
WorkspaceTabPropsTableIndexesModal,
|
||||
WorkspaceTabPropsTableForeignModal
|
||||
},
|
||||
props: {
|
||||
connection: Object,
|
||||
isSelected: Boolean,
|
||||
table: String,
|
||||
schema: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isLoading: false,
|
||||
isSaving: false,
|
||||
isOptionsModal: false,
|
||||
isIndexesModal: false,
|
||||
isForeignModal: false,
|
||||
isOptionsChanging: false,
|
||||
originalFields: [],
|
||||
localFields: [],
|
||||
originalKeyUsage: [],
|
||||
localKeyUsage: [],
|
||||
originalIndexes: [],
|
||||
localIndexes: [],
|
||||
tableOptions: {},
|
||||
localOptions: {},
|
||||
lastTable: null,
|
||||
newFieldsCounter: 0
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
getWorkspace: 'workspaces/getWorkspace',
|
||||
selectedWorkspace: 'workspaces/getSelected',
|
||||
getDatabaseVariable: 'workspaces/getDatabaseVariable'
|
||||
}),
|
||||
workspace () {
|
||||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
tabUid () {
|
||||
return this.$vnode.key;
|
||||
},
|
||||
defaultEngine () {
|
||||
const engine = this.getDatabaseVariable(this.connection.uid, 'default_storage_engine');
|
||||
return engine ? engine.value : '';
|
||||
},
|
||||
schemaTables () {
|
||||
const schemaTables = this.workspace.structure
|
||||
.filter(schema => schema.name === this.schema)
|
||||
.map(schema => schema.tables);
|
||||
|
||||
return schemaTables.length ? schemaTables[0].filter(table => table.type === 'table') : [];
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) ||
|
||||
JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage) ||
|
||||
JSON.stringify(this.originalIndexes) !== JSON.stringify(this.localIndexes) ||
|
||||
JSON.stringify(this.tableOptions) !== JSON.stringify(this.localOptions);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
schema () {
|
||||
if (this.isSelected) {
|
||||
this.getFieldsData();
|
||||
this.lastTable = this.table;
|
||||
}
|
||||
},
|
||||
table () {
|
||||
if (this.isSelected) {
|
||||
this.getFieldsData();
|
||||
this.lastTable = this.table;
|
||||
}
|
||||
},
|
||||
isSelected (val) {
|
||||
if (val) {
|
||||
this.changeBreadcrumbs({ schema: this.schema, table: this.table });
|
||||
|
||||
if (this.lastTable !== this.table)
|
||||
this.getFieldsData();
|
||||
}
|
||||
},
|
||||
isChanged (val) {
|
||||
this.setUnsavedChanges({ uid: this.connection.uid, tUid: this.tabUid, isChanged: val });
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getFieldsData();
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
beforeDestroy () {
|
||||
window.removeEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addNotification: 'notifications/addNotification',
|
||||
refreshStructure: 'workspaces/refreshStructure',
|
||||
setUnsavedChanges: 'workspaces/setUnsavedChanges',
|
||||
renameTabs: 'workspaces/renameTabs',
|
||||
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
|
||||
}),
|
||||
async getTableOptions (params) {
|
||||
const db = this.workspace.structure.find(db => db.name === this.schema);
|
||||
|
||||
if (db && db.tables.length && this.table)
|
||||
this.tableOptions = db.tables.find(table => table.name === this.table);
|
||||
else {
|
||||
const { status, response } = await Tables.getTableOptions(params);
|
||||
|
||||
if (status === 'success')
|
||||
this.tableOptions = response;
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
},
|
||||
async getFieldsData () {
|
||||
if (!this.table) return;
|
||||
|
||||
this.localFields = [];
|
||||
this.lastTable = this.table;
|
||||
this.newFieldsCounter = 0;
|
||||
this.isLoading = true;
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
table: this.table
|
||||
};
|
||||
|
||||
try {
|
||||
await this.getTableOptions(params);
|
||||
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
|
||||
}
|
||||
catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
|
||||
try { // Columns data
|
||||
const { status, response } = await Tables.getTableColumns(params);
|
||||
if (status === 'success') {
|
||||
this.originalFields = response.map(field => {
|
||||
if (field.autoIncrement)
|
||||
field.defaultType = 'autoincrement';
|
||||
else if (field.default === null)
|
||||
field.defaultType = 'noval';
|
||||
else if (field.default === 'NULL')
|
||||
field.defaultType = 'null';
|
||||
else if (isNaN(+field.default) && field.default.charAt(0) !== '\'')
|
||||
field.defaultType = 'expression';
|
||||
else {
|
||||
field.defaultType = 'custom';
|
||||
if (isNaN(+field.default) && !field.default.includes('\''))
|
||||
field.default = `'${field.default}'`;
|
||||
}
|
||||
|
||||
return { ...field, _id: uidGen() };
|
||||
});
|
||||
this.localFields = JSON.parse(JSON.stringify(this.originalFields));
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
try { // Indexes
|
||||
const { status, response } = await Tables.getTableIndexes(params);
|
||||
|
||||
if (status === 'success') {
|
||||
const indexesObj = response.reduce((acc, curr) => {
|
||||
acc[curr.name] = acc[curr.name] || [];
|
||||
acc[curr.name].push(curr);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
this.originalIndexes = Object.keys(indexesObj).map(index => {
|
||||
return {
|
||||
_id: uidGen(),
|
||||
name: index,
|
||||
fields: indexesObj[index].map(field => field.column),
|
||||
type: indexesObj[index][0].type,
|
||||
comment: indexesObj[index][0].comment,
|
||||
indexType: indexesObj[index][0].indexType,
|
||||
indexComment: indexesObj[index][0].indexComment,
|
||||
cardinality: indexesObj[index][0].cardinality
|
||||
};
|
||||
});
|
||||
|
||||
this.localIndexes = JSON.parse(JSON.stringify(this.originalIndexes));
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
try { // Key usage (foreign keys)
|
||||
const { status, response } = await Tables.getKeyUsage(params);
|
||||
|
||||
if (status === 'success') {
|
||||
this.originalKeyUsage = response.map(foreign => {
|
||||
return {
|
||||
_id: uidGen(),
|
||||
...foreign
|
||||
};
|
||||
});
|
||||
this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isLoading = false;
|
||||
},
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
|
||||
// FIELDS
|
||||
const originalIDs = this.originalFields.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
const localIDs = this.localFields.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
|
||||
// Fields Additions
|
||||
const additions = this.localFields.filter((field, i) => !originalIDs.includes(field._id)).map(field => {
|
||||
const lI = this.localFields.findIndex(localField => localField._id === field._id);
|
||||
const after = lI > 0 ? this.localFields[lI - 1].name : false;
|
||||
return { ...field, after };
|
||||
});
|
||||
|
||||
// Fields Deletions
|
||||
const deletions = this.originalFields.filter(field => !localIDs.includes(field._id));
|
||||
|
||||
// Fields Changes
|
||||
const changes = [];
|
||||
this.originalFields.forEach((originalField, oI) => {
|
||||
const lI = this.localFields.findIndex(localField => localField._id === originalField._id);
|
||||
const originalSibling = oI > 0 ? this.originalFields[oI - 1]._id : false;
|
||||
const localSibling = lI > 0 ? this.localFields[lI - 1]._id : false;
|
||||
const after = lI > 0 ? this.localFields[lI - 1].name : false;
|
||||
const orgName = originalField.name;
|
||||
|
||||
if (JSON.stringify(originalField) !== JSON.stringify(this.localFields[lI]) || originalSibling !== localSibling)
|
||||
if (this.localFields[lI]) changes.push({ ...this.localFields[lI], after, orgName });
|
||||
});
|
||||
|
||||
// OPTIONS
|
||||
const options = Object.keys(this.localOptions).reduce((acc, option) => {
|
||||
if (this.localOptions[option] !== this.tableOptions[option])
|
||||
acc[option] = this.localOptions[option];
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
// INDEXES
|
||||
const indexChanges = {
|
||||
additions: [],
|
||||
changes: [],
|
||||
deletions: []
|
||||
};
|
||||
const originalIndexIDs = this.originalIndexes.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
const localIndexIDs = this.localIndexes.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
|
||||
// Index Additions
|
||||
indexChanges.additions = this.localIndexes.filter(index => !originalIndexIDs.includes(index._id));
|
||||
|
||||
// Index Changes
|
||||
this.originalIndexes.forEach(originalIndex => {
|
||||
const lI = this.localIndexes.findIndex(localIndex => localIndex._id === originalIndex._id);
|
||||
if (JSON.stringify(originalIndex) !== JSON.stringify(this.localIndexes[lI])) {
|
||||
if (this.localIndexes[lI]) {
|
||||
indexChanges.changes.push({
|
||||
...this.localIndexes[lI],
|
||||
oldName: originalIndex.name,
|
||||
oldType: originalIndex.type
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Index Deletions
|
||||
indexChanges.deletions = this.originalIndexes.filter(index => !localIndexIDs.includes(index._id));
|
||||
|
||||
// FOREIGN KEYS
|
||||
const foreignChanges = {
|
||||
additions: [],
|
||||
changes: [],
|
||||
deletions: []
|
||||
};
|
||||
const originalForeignIDs = this.originalKeyUsage.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
const localForeignIDs = this.localKeyUsage.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
|
||||
// Foreigns Additions
|
||||
foreignChanges.additions = this.localKeyUsage.filter(foreign => !originalForeignIDs.includes(foreign._id));
|
||||
|
||||
// Foreigns Changes
|
||||
this.originalKeyUsage.forEach(originalForeign => {
|
||||
const lI = this.localKeyUsage.findIndex(localForeign => localForeign._id === originalForeign._id);
|
||||
if (JSON.stringify(originalForeign) !== JSON.stringify(this.localKeyUsage[lI])) {
|
||||
if (this.localKeyUsage[lI]) {
|
||||
foreignChanges.changes.push({
|
||||
...this.localKeyUsage[lI],
|
||||
oldName: originalForeign.constraintName
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Foreigns Deletions
|
||||
foreignChanges.deletions = this.originalKeyUsage.filter(foreign => !localForeignIDs.includes(foreign._id));
|
||||
|
||||
// ALTER
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
table: this.table,
|
||||
additions,
|
||||
changes,
|
||||
deletions,
|
||||
indexChanges,
|
||||
foreignChanges,
|
||||
options
|
||||
};
|
||||
|
||||
try {
|
||||
const { status, response } = await Tables.alterTable(params);
|
||||
|
||||
if (status === 'success') {
|
||||
const oldName = this.tableOptions.name;
|
||||
|
||||
await this.refreshStructure(this.connection.uid);
|
||||
|
||||
if (oldName !== this.localOptions.name) {
|
||||
this.renameTabs({
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
elementName: oldName,
|
||||
elementNewName: this.localOptions.name,
|
||||
elementType: 'table'
|
||||
});
|
||||
|
||||
this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
|
||||
}
|
||||
else
|
||||
this.getFieldsData();
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
this.newFieldsCounter = 0;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localFields = JSON.parse(JSON.stringify(this.originalFields));
|
||||
this.localIndexes = JSON.parse(JSON.stringify(this.originalIndexes));
|
||||
this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
|
||||
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
|
||||
this.newFieldsCounter = 0;
|
||||
},
|
||||
addField () {
|
||||
this.localFields.push({
|
||||
_id: uidGen(),
|
||||
name: `${this.$tc('word.field', 1)}_${++this.newFieldsCounter}`,
|
||||
key: '',
|
||||
type: this.workspace.dataTypes[0].types[0].name,
|
||||
schema: this.schema,
|
||||
table: this.table,
|
||||
numPrecision: null,
|
||||
numLength: this.workspace.dataTypes[0].types[0].length,
|
||||
datePrecision: null,
|
||||
charLength: null,
|
||||
nullable: false,
|
||||
unsigned: false,
|
||||
zerofill: false,
|
||||
order: this.localFields.length + 1,
|
||||
default: null,
|
||||
charset: null,
|
||||
collation: null,
|
||||
autoIncrement: false,
|
||||
onUpdate: '',
|
||||
comment: ''
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const scrollable = this.$refs.indexTable.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
},
|
||||
renameField (payload) {
|
||||
this.localIndexes = this.localIndexes.map(index => {
|
||||
const fi = index.fields.findIndex(field => field === payload.old);
|
||||
if (fi !== -1)
|
||||
index.fields[fi] = payload.new;
|
||||
return index;
|
||||
});
|
||||
|
||||
this.localKeyUsage = this.localKeyUsage.map(key => {
|
||||
if (key.field === payload.old)
|
||||
key.field = payload.new;
|
||||
return key;
|
||||
});
|
||||
},
|
||||
duplicateField (uid) {
|
||||
const fieldToClone = Object.assign({}, this.localFields.find(field => field._id === uid));
|
||||
fieldToClone._id = uidGen();
|
||||
fieldToClone.name = `${fieldToClone.name}_copy`;
|
||||
fieldToClone.order = this.localFields.length + 1;
|
||||
this.localFields = [...this.localFields, fieldToClone];
|
||||
|
||||
setTimeout(() => {
|
||||
const scrollable = this.$refs.indexTable.$refs.tableWrapper;
|
||||
scrollable.scrollTop = scrollable.scrollHeight + 30;
|
||||
}, 20);
|
||||
},
|
||||
removeField (uid) {
|
||||
this.localFields = this.localFields.filter(field => field._id !== uid);
|
||||
},
|
||||
addNewIndex (payload) {
|
||||
this.localIndexes = [...this.localIndexes, {
|
||||
_id: uidGen(),
|
||||
name: payload.index === 'PRIMARY' ? 'PRIMARY' : payload.field,
|
||||
fields: [payload.field],
|
||||
type: payload.index,
|
||||
comment: '',
|
||||
indexType: 'BTREE',
|
||||
indexComment: '',
|
||||
cardinality: 0
|
||||
}];
|
||||
},
|
||||
addToIndex (payload) {
|
||||
this.localIndexes = this.localIndexes.map(index => {
|
||||
if (index._id === payload.index) index.fields.push(payload.field);
|
||||
return index;
|
||||
});
|
||||
},
|
||||
showOptionsModal () {
|
||||
this.isOptionsModal = true;
|
||||
},
|
||||
hideOptionsModal () {
|
||||
this.isOptionsModal = false;
|
||||
},
|
||||
optionsUpdate (options) {
|
||||
this.localOptions = options;
|
||||
},
|
||||
showIntdexesModal () {
|
||||
this.isIndexesModal = true;
|
||||
},
|
||||
hideIndexesModal () {
|
||||
this.isIndexesModal = false;
|
||||
},
|
||||
indexesUpdate (indexes) {
|
||||
this.localIndexes = indexes;
|
||||
},
|
||||
showForeignModal () {
|
||||
this.isForeignModal = true;
|
||||
},
|
||||
hideForeignModal () {
|
||||
this.isForeignModal = false;
|
||||
},
|
||||
foreignsUpdate (foreigns) {
|
||||
this.localKeyUsage = foreigns;
|
||||
},
|
||||
onKey (e) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.ctrlKey && e.keyCode === 83) { // CTRL + S
|
||||
if (this.isChanged)
|
||||
this.saveChanges();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user