mirror of https://github.com/Fabio286/antares.git
feat: ability to edit table fields
This commit is contained in:
parent
ae47a978c1
commit
249926b8e0
|
|
@ -0,0 +1 @@
|
|||
* text eol=lf
|
||||
|
|
@ -79,7 +79,7 @@ This is a roadmap with major features will come in near future.
|
|||
#### • ARM
|
||||
|
||||
- [ ] Windows
|
||||
- [ ] Linux
|
||||
- [x] Linux
|
||||
- [ ] MacOS
|
||||
|
||||
## Translations
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -48,14 +48,14 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "^5.8.55",
|
||||
"electron-log": "^4.2.4",
|
||||
"electron-log": "^4.3.0",
|
||||
"electron-updater": "^4.3.5",
|
||||
"lodash": "^4.17.20",
|
||||
"moment": "^2.29.1",
|
||||
"monaco-editor": "^0.20.0",
|
||||
"mssql": "^6.2.3",
|
||||
"mysql": "^2.18.1",
|
||||
"pg": "^8.4.1",
|
||||
"pg": "^8.4.2",
|
||||
"source-map-support": "^0.5.16",
|
||||
"spectre.css": "^0.5.9",
|
||||
"vue-i18n": "^8.22.1",
|
||||
|
|
@ -67,13 +67,13 @@
|
|||
"devDependencies": {
|
||||
"babel-eslint": "^10.1.0",
|
||||
"cross-env": "^7.0.2",
|
||||
"electron": "^10.1.3",
|
||||
"electron": "^10.1.5",
|
||||
"electron-builder": "^22.9.1",
|
||||
"electron-devtools-installer": "^3.1.1",
|
||||
"electron-webpack": "^2.8.2",
|
||||
"electron-webpack-vue": "^2.4.0",
|
||||
"eslint": "^7.12.0",
|
||||
"eslint-config-standard": "^14.1.1",
|
||||
"eslint": "^7.13.0",
|
||||
"eslint-config-standard": "^16.0.1",
|
||||
"eslint-plugin-import": "^2.22.1",
|
||||
"eslint-plugin-node": "^11.1.0",
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,303 @@
|
|||
module.exports = [
|
||||
{
|
||||
group: 'integer',
|
||||
types: [
|
||||
{
|
||||
name: 'TINYINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
},
|
||||
{
|
||||
name: 'SMALLINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
},
|
||||
{
|
||||
name: 'INT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
},
|
||||
{
|
||||
name: 'MEDIUMINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
},
|
||||
{
|
||||
name: 'BIGINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
},
|
||||
{
|
||||
name: 'BIT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: true,
|
||||
zerofill: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'float',
|
||||
types: [
|
||||
{
|
||||
name: 'FLOAT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'DOUBLE',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'DECIMAL',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'string',
|
||||
types: [
|
||||
{
|
||||
name: 'CHAR',
|
||||
length: true,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'VARCHAR',
|
||||
length: true,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'TINYTEXT',
|
||||
length: true,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'MEDIUMTEXT',
|
||||
length: false,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'TEXT',
|
||||
length: false,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'LONGTEXT',
|
||||
length: false,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'JSON',
|
||||
length: true,
|
||||
collation: true,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'binary',
|
||||
types: [
|
||||
{
|
||||
name: 'BINARY',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'VARBINARY',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'TINYBLOB',
|
||||
length: false,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'BLOB',
|
||||
length: false,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'MEDIUMBLOB',
|
||||
length: false,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'LONGBLOB',
|
||||
length: false,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'time',
|
||||
types: [
|
||||
{
|
||||
name: 'DATE',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'TIME',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'YEAR',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'DATETIME',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'TIMESTAMP',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'spatial',
|
||||
types: [
|
||||
{
|
||||
name: 'POINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'LINESTRING',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'POLYGON',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'GEOMETRY',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'MULTIPOINT',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'MULTILINESTRING',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'MULTIPOLYGON',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'GEOMETRYCOLLECTION',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
group: 'other',
|
||||
types: [
|
||||
{
|
||||
name: 'UNKNOWN',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'ENUM',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
},
|
||||
{
|
||||
name: 'SET',
|
||||
length: true,
|
||||
collation: false,
|
||||
unsigned: false,
|
||||
zerofill: false
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
export const TEXT = ['char', 'varchar'];
|
||||
export const LONG_TEXT = ['text', 'mediumtext', 'longtext'];
|
||||
|
||||
export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal'];
|
||||
export const NUMBER = ['int', 'tinyint', 'smallint', 'mediumint', 'bigint', 'float', 'double', 'decimal', 'bool'];
|
||||
|
||||
export const DATE = ['date'];
|
||||
export const TIME = ['time'];
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* eslint-disable no-useless-escape */
|
||||
// eslint-disable-next-line no-control-regex
|
||||
const regex = new RegExp(/[\0\x08\x09\x1a\n\r"'\\\%]/gm);
|
||||
const pattern = /[\0\x08\x09\x1a\n\r"'\\\%]/gm;
|
||||
const regex = new RegExp(pattern);
|
||||
|
||||
/**
|
||||
* Escapes a string
|
||||
|
|
|
|||
|
|
@ -153,4 +153,14 @@ export default (connections) => {
|
|||
return { status: 'error', response: err.toString() };
|
||||
}
|
||||
});
|
||||
|
||||
ipcMain.handle('alter-table', async (event, params) => {
|
||||
try {
|
||||
await connections[params.uid].alterTable(params);
|
||||
return { status: 'success' };
|
||||
}
|
||||
catch (err) {
|
||||
return { status: 'error', response: err.toString() };
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -192,6 +192,7 @@ export class MySQLClient extends AntaresCore {
|
|||
charset: field.CHARACTER_SET_NAME,
|
||||
collation: field.COLLATION_NAME,
|
||||
autoIncrement: field.EXTRA.includes('auto_increment'),
|
||||
onUpdate: field.EXTRA.toLowerCase().includes('on update') ? field.EXTRA.replace('on update', '') : '',
|
||||
comment: field.COLUMN_COMMENT
|
||||
};
|
||||
});
|
||||
|
|
@ -266,6 +267,43 @@ export class MySQLClient extends AntaresCore {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* ALTER TABLE
|
||||
*
|
||||
* @returns {Array.<Object>} parameters
|
||||
* @memberof MySQLClient
|
||||
*/
|
||||
async alterTable (params) {
|
||||
const {
|
||||
table,
|
||||
// additions,
|
||||
// deletions,
|
||||
changes
|
||||
} = params;
|
||||
|
||||
let sql = `ALTER TABLE \`${table}\` `;
|
||||
const alterColumns = [];
|
||||
|
||||
changes.forEach(change => {
|
||||
const length = change.numLength || change.charLength || change.datePrecision;
|
||||
|
||||
alterColumns.push(`CHANGE COLUMN \`${change.orgName}\` \`${change.name}\`
|
||||
${change.type.toUpperCase()}${length ? `(${length})` : ''}
|
||||
${change.unsigned ? 'UNSIGNED' : ''}
|
||||
${change.nullable ? 'NULL' : 'NOT NULL'}
|
||||
${change.autoIncrement ? 'AUTO_INCREMENT' : ''}
|
||||
${change.default ? `DEFAULT ${change.default}` : ''}
|
||||
${change.comment ? `COMMENT '${change.comment}'` : ''}
|
||||
${change.collation ? `COLLATE ${change.collation}` : ''}
|
||||
${change.onUpdate ? `ON UPDATE ${change.onUpdate}` : ''}
|
||||
${change.after ? `AFTER \`${change.after}\`` : 'FIRST'}`);
|
||||
});
|
||||
|
||||
sql += alterColumns.join(', ');
|
||||
|
||||
return await this.raw(sql);
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {String} SQL string
|
||||
* @memberof MySQLClient
|
||||
|
|
@ -361,16 +399,18 @@ export class MySQLClient extends AntaresCore {
|
|||
if (err)
|
||||
reject(err);
|
||||
else {
|
||||
const remappedFields = fields ? fields.map(field => {
|
||||
return {
|
||||
name: field.name,
|
||||
orgName: field.orgName,
|
||||
schema: field.db,
|
||||
table: field.table,
|
||||
orgTable: field.orgTable,
|
||||
type: 'varchar'
|
||||
};
|
||||
}) : [];
|
||||
const remappedFields = fields
|
||||
? fields.map(field => {
|
||||
return {
|
||||
name: field.name,
|
||||
orgName: field.orgName,
|
||||
schema: field.db,
|
||||
table: field.table,
|
||||
orgTable: field.orgTable,
|
||||
type: 'varchar'
|
||||
};
|
||||
})
|
||||
: [];
|
||||
|
||||
if (args.details) {
|
||||
let cachedTable;
|
||||
|
|
@ -395,9 +435,11 @@ export class MySQLClient extends AntaresCore {
|
|||
try { // Table data
|
||||
const response = await this.getTableColumns(paramObj);
|
||||
|
||||
let detailedFields = response.length ? selectedFields.map(selField => {
|
||||
return response.find(field => field.name === selField.name && field.table === selField.table);
|
||||
}).filter(el => !!el) : [];
|
||||
let detailedFields = response.length
|
||||
? selectedFields.map(selField => {
|
||||
return response.find(field => field.name === selField.name && field.table === selField.table);
|
||||
}).filter(el => !!el)
|
||||
: [];
|
||||
|
||||
if (selectedFields.length) {
|
||||
detailedFields = detailedFields.map(field => {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ export default {
|
|||
props: {
|
||||
size: {
|
||||
type: String,
|
||||
validator: prop => ['small', 'medium', 'large'].includes(prop),
|
||||
validator: prop => ['small', 'medium', '400', 'large'].includes(prop),
|
||||
default: 'small'
|
||||
},
|
||||
confirmText: String,
|
||||
|
|
@ -67,6 +67,8 @@ export default {
|
|||
modalSizeClass () {
|
||||
if (this.size === 'small')
|
||||
return 'modal-sm';
|
||||
if (this.size === '400')
|
||||
return 'modal-400';
|
||||
else if (this.size === 'large')
|
||||
return 'modal-lg';
|
||||
else return '';
|
||||
|
|
@ -86,7 +88,12 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal.modal-sm .modal-container {
|
||||
padding: 0;
|
||||
}
|
||||
.modal-400 .modal-container {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.modal.modal-sm .modal-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,13 +3,20 @@
|
|||
<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">
|
||||
<button
|
||||
class="btn btn-primary btn-sm"
|
||||
:disabled="!isChanged"
|
||||
:class="{'loading':isSaving}"
|
||||
@click="saveChanges"
|
||||
>
|
||||
<span>{{ $t('word.save') }}</span>
|
||||
<i class="mdi mdi-24px mdi-content-save ml-1" />
|
||||
</button>
|
||||
<button
|
||||
:disabled="!isChanged"
|
||||
class="btn btn-link btn-sm mr-0"
|
||||
:title="$t('message.clearChanges')"
|
||||
@click="clearChanges"
|
||||
>
|
||||
<span>{{ $t('word.clear') }}</span>
|
||||
<i class="mdi mdi-24px mdi-delete-sweep ml-1" />
|
||||
|
|
@ -40,7 +47,7 @@
|
|||
<WorkspacePropsTable
|
||||
v-if="localFields"
|
||||
ref="queryTable"
|
||||
:results="localFields"
|
||||
:fields="localFields"
|
||||
:tab-uid="tabUid"
|
||||
:conn-uid="connection.uid"
|
||||
:table="table"
|
||||
|
|
@ -52,9 +59,10 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
import { uidGen } from 'common/libs/uidGen';
|
||||
import Tables from '@/ipc-api/Tables';
|
||||
import WorkspacePropsTable from '@/components/WorkspacePropsTable';
|
||||
import { mapGetters, mapActions } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'WorkspacePropsTab',
|
||||
|
|
@ -69,7 +77,10 @@ export default {
|
|||
return {
|
||||
tabUid: 'prop',
|
||||
isQuering: false,
|
||||
isSaving: false,
|
||||
originalFields: [],
|
||||
localFields: [],
|
||||
originalKeyUsage: [],
|
||||
localKeyUsage: [],
|
||||
lastTable: null,
|
||||
isAddModal: false
|
||||
|
|
@ -87,6 +98,9 @@ export default {
|
|||
},
|
||||
schema () {
|
||||
return this.workspace.breadcrumbs.schema;
|
||||
},
|
||||
isChanged () {
|
||||
return JSON.stringify(this.originalFields) !== JSON.stringify(this.localFields) || JSON.stringify(this.originalKeyUsage) !== JSON.stringify(this.localKeyUsage);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -103,25 +117,13 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getFieldsData();
|
||||
window.addEventListener('keydown', this.onKey);
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
addNotification: 'notifications/addNotification',
|
||||
setTabFields: 'workspaces/setTabFields',
|
||||
setTabKeyUsage: 'workspaces/setTabKeyUsage'
|
||||
addNotification: 'notifications/addNotification'
|
||||
}),
|
||||
async getFieldsData () {
|
||||
if (!this.table) return;
|
||||
this.isQuering = true;
|
||||
const fieldsArr = [];
|
||||
const keysArr = [];
|
||||
|
||||
// if table changes clear cached values
|
||||
if (this.lastTable !== this.table)
|
||||
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: [] });
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
|
|
@ -132,8 +134,10 @@ export default {
|
|||
try { // Columns data
|
||||
const { status, response } = await Tables.getTableColumns(params);
|
||||
if (status === 'success') {
|
||||
this.localFields = response;
|
||||
fieldsArr.push(response);
|
||||
this.originalFields = response.map(field => {
|
||||
return { ...field, _id: uidGen() };
|
||||
});
|
||||
this.localFields = JSON.parse(JSON.stringify(this.originalFields));
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
|
|
@ -146,8 +150,8 @@ export default {
|
|||
const { status, response } = await Tables.getKeyUsage(params);
|
||||
|
||||
if (status === 'success') {
|
||||
this.localKeyUsage = response;
|
||||
keysArr.push(response);
|
||||
this.originalKeyUsage = response;
|
||||
this.localKeyUsage = JSON.parse(JSON.stringify(response));
|
||||
}
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
|
|
@ -156,35 +160,62 @@ export default {
|
|||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.setTabFields({ cUid: this.connection.uid, tUid: this.tabUid, fields: fieldsArr });
|
||||
this.setTabKeyUsage({ cUid: this.connection.uid, tUid: this.tabUid, keyUsage: keysArr });
|
||||
|
||||
this.isQuering = false;
|
||||
},
|
||||
reloadFields () {
|
||||
this.getFieldsData();
|
||||
async saveChanges () {
|
||||
if (this.isSaving) return;
|
||||
this.isSaving = true;
|
||||
|
||||
const originalIDs = this.originalFields.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
const localIDs = this.localFields.reduce((acc, curr) => [...acc, curr._id], []);
|
||||
const additions = this.localFields.filter(field => !originalIDs.includes(field._id));
|
||||
const deletions = this.originalFields.filter(field => !localIDs.includes(field._id));
|
||||
|
||||
// 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)
|
||||
changes.push({ ...this.localFields[lI], after, orgName });
|
||||
});
|
||||
|
||||
const params = {
|
||||
uid: this.connection.uid,
|
||||
schema: this.schema,
|
||||
table: this.workspace.breadcrumbs.table,
|
||||
additions,
|
||||
changes,
|
||||
deletions
|
||||
};
|
||||
|
||||
try { // Key usage (foreign keys)
|
||||
const { status, response } = await Tables.alterTable(params);
|
||||
|
||||
if (status === 'success')
|
||||
this.getFieldsData();
|
||||
else
|
||||
this.addNotification({ status: 'error', message: response });
|
||||
}
|
||||
catch (err) {
|
||||
this.addNotification({ status: 'error', message: err.stack });
|
||||
}
|
||||
|
||||
this.isSaving = false;
|
||||
},
|
||||
clearChanges () {
|
||||
this.localFields = JSON.parse(JSON.stringify(this.originalFields));
|
||||
this.localKeyUsage = JSON.parse(JSON.stringify(this.originalKeyUsage));
|
||||
},
|
||||
showAddModal () {
|
||||
this.isAddModal = true;
|
||||
},
|
||||
hideAddModal () {
|
||||
this.isAddModal = false;
|
||||
},
|
||||
onKey (e) {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'F5')
|
||||
this.reloadFields();
|
||||
},
|
||||
setRefreshInterval () {
|
||||
if (this.refreshInterval)
|
||||
clearInterval(this.refreshInterval);
|
||||
|
||||
if (+this.autorefreshTimer) {
|
||||
this.refreshInterval = setInterval(() => {
|
||||
if (!this.isQuering)
|
||||
this.reloadFields();
|
||||
}, this.autorefreshTimer * 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -89,79 +89,36 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div ref="resultTable" class="tbody">
|
||||
<div
|
||||
v-for="row in results"
|
||||
:key="row.name"
|
||||
class="tr"
|
||||
>
|
||||
<div class="td">
|
||||
<div class="row-draggable">
|
||||
<i class="mdi mdi-drag-horizontal row-draggable-icon" />
|
||||
{{ row.order }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="td">
|
||||
<i
|
||||
v-if="row.key"
|
||||
:title="keyName(row.key)"
|
||||
class="mdi mdi-key column-key c-help pl-1"
|
||||
:class="`key-${row.key}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="td">
|
||||
{{ row.name }}
|
||||
</div>
|
||||
<div class="td text-uppercase" :class="`type-${row.type}`">
|
||||
{{ row.type }}
|
||||
</div>
|
||||
<div class="td type-int">
|
||||
{{ row.numLength || row.charLength || row.datePrecision }}
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" :checked="row.unsigned ">
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" :checked="row.nullable ">
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input type="checkbox" :checked="row.zerofill ">
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
{{ (row.autoIncrement ? 'AUTO_INCREMENT' : false) || row.default }}
|
||||
</div>
|
||||
<div class="td type-varchar">
|
||||
{{ row.comment }}
|
||||
</div>
|
||||
<div class="td">
|
||||
{{ row.collation }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<draggable
|
||||
ref="resultTable"
|
||||
:list="fields"
|
||||
class="tbody"
|
||||
handle=".row-draggable"
|
||||
>
|
||||
<TableRow
|
||||
v-for="row in fields"
|
||||
:key="row._id"
|
||||
:row="row"
|
||||
:data-types="dataTypes"
|
||||
/>
|
||||
</draggable>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TableContext from '@/components/WorkspaceQueryTableContext';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
import draggable from 'vuedraggable';
|
||||
import TableRow from '@/components/WorkspacePropsTableRow';
|
||||
|
||||
export default {
|
||||
name: 'WorkspacePropsTable',
|
||||
components: {
|
||||
TableContext
|
||||
TableRow,
|
||||
draggable
|
||||
},
|
||||
props: {
|
||||
results: Array,
|
||||
fields: Array,
|
||||
tabUid: [String, Number],
|
||||
connUid: String,
|
||||
table: String,
|
||||
|
|
@ -187,13 +144,15 @@ export default {
|
|||
workspaceSchema () {
|
||||
return this.getWorkspace(this.connUid).breadcrumbs.schema;
|
||||
},
|
||||
dataTypes () {
|
||||
return this.getWorkspace(this.connUid).dataTypes;
|
||||
},
|
||||
primaryField () {
|
||||
return this.results.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
|
||||
return this.fields.filter(field => ['pri', 'uni'].includes(field.key))[0] || false;
|
||||
},
|
||||
tabProperties () {
|
||||
return this.getWorkspaceTab(this.tabUid);
|
||||
}
|
||||
|
||||
},
|
||||
updated () {
|
||||
if (this.$refs.propTable)
|
||||
|
|
@ -212,18 +171,6 @@ export default {
|
|||
...mapActions({
|
||||
addNotification: 'notifications/addNotification'
|
||||
}),
|
||||
keyName (key) {
|
||||
switch (key) {
|
||||
case 'pri':
|
||||
return 'PRIMARY';
|
||||
case 'uni':
|
||||
return 'UNIQUE';
|
||||
case 'mul':
|
||||
return 'INDEX';
|
||||
default:
|
||||
return 'UNKNOWN ' + key;
|
||||
}
|
||||
},
|
||||
resizeResults () {
|
||||
if (this.$refs.resultTable) {
|
||||
const el = this.$refs.tableWrapper;
|
||||
|
|
@ -258,34 +205,4 @@ export default {
|
|||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.row-draggable {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-left: 28px;
|
||||
cursor: grab;
|
||||
|
||||
.row-draggable-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-column-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
min-height: auto;
|
||||
|
||||
.form-icon {
|
||||
top: 0.15rem;
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,516 @@
|
|||
<template>
|
||||
<div class="tr">
|
||||
<div class="td">
|
||||
<div class="row-draggable">
|
||||
<i class="mdi mdi-drag-horizontal row-draggable-icon" />
|
||||
{{ localRow.order }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="td" tabindex="0">
|
||||
<i
|
||||
v-if="localRow.key"
|
||||
:title="keyName(localRow.key)"
|
||||
class="mdi mdi-key column-key c-help pl-1"
|
||||
:class="`key-${localRow.key}`"
|
||||
/>
|
||||
</div>
|
||||
<div class="td">
|
||||
<span
|
||||
v-if="!isInlineEditor.name"
|
||||
class="cell-content"
|
||||
@dblclick="editON($event, localRow.name , 'name')"
|
||||
>
|
||||
{{ localRow.name }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
ref="editField"
|
||||
v-model="editingContent"
|
||||
type="text"
|
||||
autofocus
|
||||
class="editable-field px-2"
|
||||
@blur="editOFF"
|
||||
>
|
||||
</div>
|
||||
<div class="td text-uppercase text-left" :class="`type-${lowerCase(localRow.type)}`">
|
||||
<span
|
||||
v-if="!isInlineEditor.type"
|
||||
class="cell-content"
|
||||
@dblclick="editON($event, localRow.type.toUpperCase(), 'type')"
|
||||
>
|
||||
{{ localRow.type }}
|
||||
</span>
|
||||
<select
|
||||
v-else
|
||||
ref="editField"
|
||||
v-model="editingContent"
|
||||
class="editable-field px-1 text-uppercase"
|
||||
@blur="editOFF"
|
||||
>
|
||||
<optgroup
|
||||
v-for="group in dataTypes"
|
||||
:key="group.group"
|
||||
:label="group.group"
|
||||
>
|
||||
<option
|
||||
v-for="type in group.types"
|
||||
:key="type.name"
|
||||
:selected="localRow.type.toUpperCase() === type.name"
|
||||
:value="type.name"
|
||||
>
|
||||
{{ type.name }}
|
||||
</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="td type-int">
|
||||
<template v-if="fieldType.length">
|
||||
<span
|
||||
v-if="!isInlineEditor.length"
|
||||
class="cell-content"
|
||||
@dblclick="editON($event, localLength, 'length')"
|
||||
>
|
||||
{{ localLength }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
ref="editField"
|
||||
v-model="editingContent"
|
||||
type="number"
|
||||
autofocus
|
||||
class="editable-field px-2"
|
||||
@blur="editOFF"
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input
|
||||
v-model="localRow.unsigned"
|
||||
type="checkbox"
|
||||
:disabled="!fieldType.unsigned"
|
||||
>
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input
|
||||
v-model="localRow.nullable"
|
||||
type="checkbox"
|
||||
:disabled="localRow.key === 'pri'"
|
||||
>
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
<label class="form-checkbox">
|
||||
<input
|
||||
v-model="localRow.zerofill"
|
||||
type="checkbox"
|
||||
:disabled="!fieldType.zerofill"
|
||||
>
|
||||
<i class="form-icon" />
|
||||
</label>
|
||||
</div>
|
||||
<div class="td">
|
||||
<span class="cell-content" @dblclick="editON($event, localRow.default, 'default')">
|
||||
{{ fieldDefault }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="td type-varchar">
|
||||
<span
|
||||
v-if="!isInlineEditor.comment"
|
||||
class="cell-content"
|
||||
@dblclick="editON($event, localRow.comment , 'comment')"
|
||||
>
|
||||
{{ localRow.comment }}
|
||||
</span>
|
||||
<input
|
||||
v-else
|
||||
ref="editField"
|
||||
v-model="editingContent"
|
||||
type="text"
|
||||
autofocus
|
||||
class="editable-field px-2"
|
||||
@blur="editOFF"
|
||||
>
|
||||
</div>
|
||||
<div class="td">
|
||||
<template v-if="fieldType.collation">
|
||||
<span
|
||||
v-if="!isInlineEditor.collation"
|
||||
class="cell-content"
|
||||
@dblclick="editON($event, localRow.collation, 'collation')"
|
||||
>
|
||||
{{ localRow.collation }}
|
||||
</span>
|
||||
<select
|
||||
v-else
|
||||
ref="editField"
|
||||
v-model="editingContent"
|
||||
class="editable-field px-1"
|
||||
@blur="editOFF"
|
||||
>
|
||||
<option
|
||||
v-for="collation in collations"
|
||||
:key="collation.collation"
|
||||
:selected="localRow.collation === collation.collation"
|
||||
:value="collation.collation"
|
||||
>
|
||||
{{ collation.collation }}
|
||||
</option>
|
||||
</select>
|
||||
</template>
|
||||
</div>
|
||||
<ConfirmModal
|
||||
v-if="isDefaultModal"
|
||||
:confirm-text="$t('word.confirm')"
|
||||
size="400"
|
||||
@confirm="editOFF"
|
||||
@hide="hideDefaultModal"
|
||||
>
|
||||
<template :slot="'header'">
|
||||
<div class="d-flex">
|
||||
<i class="mdi mdi-24px mdi-playlist-edit mr-1" /> {{ $t('word.default') }} "{{ row.name }}"
|
||||
</div>
|
||||
</template>
|
||||
<div :slot="'body'">
|
||||
<form class="form-horizontal">
|
||||
<div class="mb-2">
|
||||
<label class="form-radio form-inline">
|
||||
<input
|
||||
v-model="defaultValue.type"
|
||||
type="radio"
|
||||
name="default"
|
||||
value="noval"
|
||||
><i class="form-icon" /> No value
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-group">
|
||||
<label class="form-radio form-inline col-4">
|
||||
<input
|
||||
v-model="defaultValue.type"
|
||||
value="custom"
|
||||
type="radio"
|
||||
name="default"
|
||||
><i class="form-icon" /> {{ $t('message.customValue') }}
|
||||
</label>
|
||||
<div class="column">
|
||||
<input
|
||||
v-model="defaultValue.custom"
|
||||
:disabled="defaultValue.type !== 'custom'"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-radio form-inline">
|
||||
<input
|
||||
v-model="defaultValue.type"
|
||||
type="radio"
|
||||
name="default"
|
||||
value="null"
|
||||
><i class="form-icon" /> NULL
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-radio form-inline">
|
||||
<input
|
||||
v-model="defaultValue.type"
|
||||
:disabled="localRow.key !== 'pri'"
|
||||
type="radio"
|
||||
name="default"
|
||||
value="autoincrement"
|
||||
><i class="form-icon" /> AUTO_INCREMENT
|
||||
</label>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="form-group">
|
||||
<label class="form-radio form-inline col-4">
|
||||
<input
|
||||
v-model="defaultValue.type"
|
||||
type="radio"
|
||||
name="default"
|
||||
value="expression"
|
||||
><i class="form-icon" /> {{ $t('word.expression') }}
|
||||
</label>
|
||||
<div class="column">
|
||||
<input
|
||||
v-model="defaultValue.expression"
|
||||
:disabled="defaultValue.type !== 'expression'"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="form-group">
|
||||
<label class="form-label col-4">
|
||||
{{ $t('message.onUpdate') }}
|
||||
</label>
|
||||
<div class="column">
|
||||
<input
|
||||
v-model="defaultValue.onUpdate"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ConfirmModal>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex';
|
||||
import ConfirmModal from '@/components/BaseConfirmModal';
|
||||
|
||||
export default {
|
||||
name: 'WorkspacePropsTableRow',
|
||||
components: {
|
||||
ConfirmModal
|
||||
},
|
||||
props: {
|
||||
row: Object,
|
||||
dataTypes: Array
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
localRow: {},
|
||||
isInlineEditor: {},
|
||||
isDefaultModal: false,
|
||||
defaultValue: {
|
||||
type: 'noval',
|
||||
custom: '',
|
||||
expression: '',
|
||||
onUpdate: ''
|
||||
},
|
||||
editingContent: null,
|
||||
editingField: null
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
selectedWorkspace: 'workspaces/getSelected',
|
||||
getWorkspace: 'workspaces/getWorkspace'
|
||||
}),
|
||||
localLength () {
|
||||
return this.localRow.numLength || this.localRow.charLength || this.localRow.datePrecision || 0;
|
||||
},
|
||||
fieldType () {
|
||||
const fieldType = this.dataTypes.reduce((acc, group) => [...acc, ...group.types], []).filter(type =>
|
||||
type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : '')
|
||||
);
|
||||
const group = this.dataTypes.filter(group => group.types.some(type =>
|
||||
type.name === (this.localRow.type ? this.localRow.type.toUpperCase() : ''))
|
||||
);
|
||||
|
||||
return fieldType.length ? { ...fieldType[0], group: group[0].group } : {};
|
||||
},
|
||||
fieldDefault () {
|
||||
if (this.localRow.autoIncrement) return 'AUTO_INCREMENT';
|
||||
if (this.localRow.default === 'NULL') return 'NULL';
|
||||
return this.localRow.default;
|
||||
},
|
||||
collations () {
|
||||
return this.getWorkspace(this.selectedWorkspace).collations;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localRow () {
|
||||
this.initLocalRow();
|
||||
},
|
||||
row () {
|
||||
this.localRow = this.row;
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.localRow = this.row;
|
||||
this.initLocalRow();
|
||||
this.isInlineEditor.length = false;
|
||||
},
|
||||
methods: {
|
||||
keyName (key) {
|
||||
switch (key) {
|
||||
case 'pri':
|
||||
return 'PRIMARY';
|
||||
case 'uni':
|
||||
return 'UNIQUE';
|
||||
case 'mul':
|
||||
return 'INDEX';
|
||||
default:
|
||||
return 'UNKNOWN ' + key;
|
||||
}
|
||||
},
|
||||
lowerCase (val) {
|
||||
if (val)
|
||||
return val.toLowerCase();
|
||||
return val;
|
||||
},
|
||||
initLocalRow () {
|
||||
Object.keys(this.localRow).forEach(key => {
|
||||
this.isInlineEditor[key] = false;
|
||||
});
|
||||
|
||||
this.defaultValue.onUpdate = this.localRow.onUpdate;
|
||||
|
||||
if (this.localRow.autoIncrement)
|
||||
this.defaultValue.type = 'autoincrement';
|
||||
else if (this.localRow.default === null)
|
||||
this.defaultValue.type = 'noval';
|
||||
else if (this.localRow.default === 'NULL')
|
||||
this.defaultValue.type = 'null';
|
||||
else if (this.localRow.default.match(/^'.*'$/g)) {
|
||||
this.defaultValue.type = 'custom';
|
||||
this.defaultValue.custom = this.localRow.default.replace(/(^')|('$)/g, '');
|
||||
}
|
||||
else if (!isNaN(this.localRow.default)) {
|
||||
this.defaultValue.type = 'custom';
|
||||
this.defaultValue.custom = this.localRow.default;
|
||||
}
|
||||
else {
|
||||
this.defaultValue.type = 'expression';
|
||||
this.defaultValue.expression = this.localRow.default;
|
||||
}
|
||||
},
|
||||
updateRow () {
|
||||
this.$emit('input', this.localRow);
|
||||
},
|
||||
editON (event, content, field) {
|
||||
if (field === 'length') {
|
||||
if (['integer', 'float', 'binary', 'spatial', 'other'].includes(this.fieldType.group)) this.editingField = 'numLength';
|
||||
if (['string'].includes(this.fieldType.group)) this.editingField = 'charLength';
|
||||
if (['time'].includes(this.fieldType.group)) this.editingField = 'datePrecision';
|
||||
}
|
||||
else
|
||||
this.editingField = field;
|
||||
|
||||
this.editingContent = content;
|
||||
|
||||
const obj = { [field]: true };
|
||||
this.isInlineEditor = { ...this.isInlineEditor, ...obj };
|
||||
|
||||
if (field === 'default')
|
||||
this.isDefaultModal = true;
|
||||
else {
|
||||
this.$nextTick(() => { // Focus on input
|
||||
event.target.blur();
|
||||
|
||||
this.$nextTick(() => document.querySelector('.editable-field').focus());
|
||||
});
|
||||
}
|
||||
},
|
||||
editOFF () {
|
||||
this.localRow[this.editingField] = this.editingContent;
|
||||
|
||||
if (this.editingField === 'type') {
|
||||
this.localRow.numLength = false;
|
||||
this.localRow.charLength = false;
|
||||
this.localRow.datePrecision = false;
|
||||
|
||||
if (this.fieldType.length) {
|
||||
if (['integer', 'float', 'binary', 'spatial', 'other'].includes(this.fieldType.group)) this.localRow.numLength = 11;
|
||||
if (['string'].includes(this.fieldType.group)) this.localRow.charLength = 15;
|
||||
if (['time'].includes(this.fieldType.group)) this.localRow.datePrecision = 0;
|
||||
}
|
||||
|
||||
if (!this.fieldType.collation)
|
||||
this.localRow.collation = null;
|
||||
}
|
||||
|
||||
if (this.editingField === 'default') {
|
||||
switch (this.defaultValue.type) {
|
||||
case 'autoincrement':
|
||||
this.localRow.autoIncrement = true;
|
||||
break;
|
||||
case 'noval':
|
||||
this.localRow.autoIncrement = false;
|
||||
this.localRow.default = null;
|
||||
break;
|
||||
case 'null':
|
||||
this.localRow.autoIncrement = false;
|
||||
this.localRow.default = 'NULL';
|
||||
break;
|
||||
case 'custom':
|
||||
this.localRow.autoIncrement = false;
|
||||
this.localRow.default = `'${this.defaultValue.custom}'`;
|
||||
break;
|
||||
case 'expression':
|
||||
this.localRow.autoIncrement = false;
|
||||
this.localRow.default = this.defaultValue.expression;
|
||||
break;
|
||||
}
|
||||
|
||||
this.localRow.onUpdate = this.defaultValue.onUpdate;
|
||||
}
|
||||
|
||||
Object.keys(this.isInlineEditor).forEach(key => {
|
||||
this.isInlineEditor = { ...this.isInlineEditor, [key]: false };
|
||||
});
|
||||
|
||||
this.editingContent = null;
|
||||
this.editingField = null;
|
||||
},
|
||||
hideDefaultModal () {
|
||||
this.isDefaultModal = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.editable-field {
|
||||
margin: 0;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.row-draggable {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
padding-left: 28px;
|
||||
cursor: grab;
|
||||
|
||||
.row-draggable-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-column-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-checkbox {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
min-height: auto;
|
||||
|
||||
.form-icon {
|
||||
top: 0.15rem;
|
||||
left: calc(50% - 8px);
|
||||
}
|
||||
}
|
||||
|
||||
.cell-content {
|
||||
display: block;
|
||||
min-height: 0.8rem;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -133,8 +133,8 @@ export default {
|
|||
this.affectedCount = 0;
|
||||
},
|
||||
onKey (e) {
|
||||
e.stopPropagation();
|
||||
if (this.tabUid === this.workspace.selected_tab) {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'F9')
|
||||
this.runQuery(this.query);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -229,9 +229,11 @@ export default {
|
|||
},
|
||||
setLocalResults () {
|
||||
this.resetSort();
|
||||
this.localResults = this.resultsWithRows[this.resultsetIndex] && this.resultsWithRows[this.resultsetIndex].rows ? this.resultsWithRows[this.resultsetIndex].rows.map(item => {
|
||||
return { ...item, _id: uidGen() };
|
||||
}) : [];
|
||||
this.localResults = this.resultsWithRows[this.resultsetIndex] && this.resultsWithRows[this.resultsetIndex].rows
|
||||
? this.resultsWithRows[this.resultsetIndex].rows.map(item => {
|
||||
return { ...item, _id: uidGen() };
|
||||
})
|
||||
: [];
|
||||
},
|
||||
resizeResults () {
|
||||
if (this.$refs.resultTable) {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="editor-field-info">
|
||||
<div><b>{{ $t('word.size') }}</b>: {{ editingContent.length }}</div>
|
||||
<div><b>{{ $t('word.size') }}</b>: {{ editingContent ? editingContent.length : 0 }}</div>
|
||||
<div><b>{{ $t('word.type') }}</b>: {{ editingType.toUpperCase() }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -353,9 +353,7 @@ export default {
|
|||
this.$nextTick(() => document.querySelector('.editable-field').focus());
|
||||
});
|
||||
|
||||
const obj = {
|
||||
[field]: true
|
||||
};
|
||||
const obj = { [field]: true };
|
||||
this.isInlineEditor = { ...this.isInlineEditor, ...obj };
|
||||
},
|
||||
editOFF () {
|
||||
|
|
|
|||
|
|
@ -186,8 +186,8 @@ export default {
|
|||
this.isAddModal = false;
|
||||
},
|
||||
onKey (e) {
|
||||
e.stopPropagation();
|
||||
if (this.workspace.selected_tab === 'data') {
|
||||
if (this.isSelected) {
|
||||
e.stopPropagation();
|
||||
if (e.key === 'F5')
|
||||
this.reloadTable();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,7 +52,8 @@ module.exports = {
|
|||
default: 'Default',
|
||||
comment: 'Comment',
|
||||
key: 'Key | Keys',
|
||||
order: 'Order'
|
||||
order: 'Order',
|
||||
expression: 'Expression'
|
||||
},
|
||||
message: {
|
||||
appWelcome: 'Welcome to Antares SQL Client!',
|
||||
|
|
@ -95,7 +96,9 @@ module.exports = {
|
|||
manageIndexes: 'Manage indexes',
|
||||
manageForeignKeys: 'Manage foreign keys',
|
||||
allowNull: 'Allow NULL',
|
||||
zeroFill: 'Zero fill'
|
||||
zeroFill: 'Zero fill',
|
||||
customValue: 'Custom value',
|
||||
onUpdate: 'On update'
|
||||
},
|
||||
// Date and Time
|
||||
short: {
|
||||
|
|
|
|||
|
|
@ -29,4 +29,8 @@ export default class {
|
|||
static getForeignList (params) {
|
||||
return ipcRenderer.invoke('get-foreign-list', params);
|
||||
}
|
||||
|
||||
static alterTable (params) {
|
||||
return ipcRenderer.invoke('alter-table', params);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
|
||||
@mixin type-colors($types) {
|
||||
$numbers: ('int','tinyint','smallint','mediumint','float','double','decimal');
|
||||
|
||||
@each $type, $color in $types {
|
||||
.type-#{$type} {
|
||||
color: $color;
|
||||
|
||||
@if $type == "number" {
|
||||
@if index($numbers, $type) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
@ -15,8 +18,10 @@
|
|||
"char": $string-color,
|
||||
"varchar": $string-color,
|
||||
"text": $string-color,
|
||||
"tinytext": $string-color,
|
||||
"mediumtext": $string-color,
|
||||
"longtext": $string-color,
|
||||
"json": $string-color,
|
||||
"int": $number-color,
|
||||
"tinyint": $number-color,
|
||||
"smallint": $number-color,
|
||||
|
|
@ -28,9 +33,13 @@
|
|||
"datetime": $date-color,
|
||||
"date": $date-color,
|
||||
"time": $date-color,
|
||||
"year": $date-color,
|
||||
"timestamp": $date-color,
|
||||
"bit": $bit-color,
|
||||
"binary": $blob-color,
|
||||
"varbinary": $blob-color,
|
||||
"blob": $blob-color,
|
||||
"tinyblob": $blob-color,
|
||||
"mediumblob": $blob-color,
|
||||
"longblob": $blob-color,
|
||||
"enum": $enum-color,
|
||||
|
|
|
|||
|
|
@ -41,26 +41,60 @@ export default {
|
|||
SELECT_WORKSPACE (state, uid) {
|
||||
state.selected_workspace = uid;
|
||||
},
|
||||
ADD_CONNECTED (state, { uid, structure }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure, connected: true } : workspace);
|
||||
ADD_CONNECTED (state, { uid, client, dataTypes, structure }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
client,
|
||||
dataTypes,
|
||||
structure,
|
||||
connected: true
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
REMOVE_CONNECTED (state, uid) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure: {}, connected: false } : workspace);
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
structure: {},
|
||||
connected: false
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
REFRESH_STRUCTURE (state, { uid, structure }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, structure } : workspace);
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
structure
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
REFRESH_COLLATIONS (state, { uid, collations }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, collations } : workspace);
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
collations
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
REFRESH_VARIABLES (state, { uid, variables }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, variables } : workspace);
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
variables
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
ADD_WORKSPACE (state, workspace) {
|
||||
state.workspaces.push(workspace);
|
||||
},
|
||||
CHANGE_BREADCRUMBS (state, { uid, breadcrumbs }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, breadcrumbs } : workspace);
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
|
||||
? {
|
||||
...workspace,
|
||||
breadcrumbs
|
||||
}
|
||||
: workspace);
|
||||
},
|
||||
NEW_TAB (state, uid) {
|
||||
tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
|
||||
|
|
@ -135,7 +169,7 @@ export default {
|
|||
}
|
||||
},
|
||||
actions: {
|
||||
selectWorkspace ({ commit, dispatch }, uid) {
|
||||
selectWorkspace ({ commit }, uid) {
|
||||
commit('SELECT_WORKSPACE', uid);
|
||||
},
|
||||
async connectWorkspace ({ dispatch, commit }, connection) {
|
||||
|
|
@ -144,7 +178,20 @@ export default {
|
|||
if (status === 'error')
|
||||
dispatch('notifications/addNotification', { status, message: response }, { root: true });
|
||||
else {
|
||||
commit('ADD_CONNECTED', { uid: connection.uid, structure: response });
|
||||
let dataTypes = [];
|
||||
|
||||
switch (connection.client) {
|
||||
case 'mysql':
|
||||
case 'maria':
|
||||
dataTypes = require('common/data-types/mysql');
|
||||
break;
|
||||
}
|
||||
commit('ADD_CONNECTED', { // TODO: add data types
|
||||
uid: connection.uid,
|
||||
client: connection.client,
|
||||
dataTypes,
|
||||
structure: response
|
||||
});
|
||||
dispatch('refreshCollations', connection.uid);
|
||||
dispatch('refreshVariables', connection.uid);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue