fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat: prev/next buttons to browse the results pages of data tab

This commit is contained in:
Fabio Di Stasio 2021-05-27 22:13:59 +02:00
parent 310cfaa3c2
commit 79f033e524
6 changed files with 62 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/main/ipc-handlers/tables.js
View File

@ -16,13 +16,15 @@ export default (connections) => {
}
});
ipcMain.handle('get-table-data', async (event, { uid, schema, table, sortParams }) => {
ipcMain.handle('get-table-data', async (event, { uid, schema, table, limit, page, sortParams }) => {
try {
const offset = (page - 1) * limit;
const query = connections[uid]
.select('*')
.schema(schema)
.from(table)
.limit(1000);
.limit(limit)
.offset(offset);
if (sortParams && sortParams.field && sortParams.dir)
query.orderBy({ [sortParams.field]: sortParams.dir.toUpperCase() });

6
src/main/libs/AntaresCore.js
View File

@ -26,6 +26,7 @@ export class AntaresCore {
groupBy: [],
orderBy: [],
limit: [],
offset: [],
join: [],
update: [],
insert: [],
@ -109,6 +110,11 @@ export class AntaresCore {
return this;
}
offset (...args) {
this._query.offset = args;
return this;
}
/**
* @param {String | Array} args field = value
* @returns

11
src/main/libs/clients/MySQLClient.js
View File

@ -305,11 +305,11 @@ export class MySQLClient extends AntaresCore {
.select('*')
.schema('information_schema')
.from('COLUMNS')
.where({ TABLE_SCHEMA: `= '${this._schema}'`, TABLE_NAME: `= '${table}'` })
.where({ TABLE_SCHEMA: `= '${this._schema || schema}'`, TABLE_NAME: `= '${table}'` })
.orderBy({ ORDINAL_POSITION: 'ASC' })
.run();
const { rows: fields } = await this.raw(`SHOW CREATE TABLE ${this._schema}.${table}`);
const { rows: fields } = await this.raw(`SHOW CREATE TABLE \`${this._schema || schema}\`.\`${table}\``);
const remappedFields = fields.map(row => {
let n = 0;
@ -1307,7 +1307,10 @@ export class MySQLClient extends AntaresCore {
// LIMIT
const limitRaw = this._query.limit.length ? `LIMIT ${this._query.limit.join(', ')} ` : '';
return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${insertRaw}`;
// OFFSET
const offsetRaw = this._query.limit.length ? `OFFSET ${this._query.offset.join(', ')} ` : '';
return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${offsetRaw}${insertRaw}`;
}
/**
@ -1396,6 +1399,7 @@ export class MySQLClient extends AntaresCore {
});
}
catch (err) {
if (isPool) connection.release();
reject(err);
}
@ -1404,6 +1408,7 @@ export class MySQLClient extends AntaresCore {
keysArr = keysArr ? [...keysArr, ...response] : response;
}
catch (err) {
if (isPool) connection.release();
reject(err);
}
}

5
src/main/libs/clients/PostgreSQLClient.js
View File

@ -1139,7 +1139,10 @@ export class PostgreSQLClient extends AntaresCore {
// LIMIT
const limitRaw = selectArray.length && this._query.limit.length ? `LIMIT ${this._query.limit.join(', ')} ` : '';
return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${insertRaw}`;
// OFFSET
const offsetRaw = selectArray.length && this._query.limit.length ? `OFFSET ${this._query.offset.join(', ')} ` : '';
return `${selectRaw}${updateRaw ? 'UPDATE' : ''}${insertRaw ? 'INSERT ' : ''}${this._query.delete ? 'DELETE ' : ''}${fromRaw}${updateRaw}${whereRaw}${groupByRaw}${orderByRaw}${limitRaw}${offsetRaw}${insertRaw}`;
}
/**

42
src/renderer/components/WorkspaceTableTab.vue
View File

@ -32,6 +32,27 @@
</div>
</div>
</div>
<div class="btn-group">
<button
class="btn btn-dark btn-sm mr-0"
:disabled="isQuering || page === 1"
@click="pageChange('prev')"
>
<i class="mdi mdi-24px mdi-skip-previous" />
</button>
<div class="btn btn-dark btn-sm mr-0 text-bold c-auto px-2">
{{ page }}
</div>
<button
class="btn btn-dark btn-sm mr-0"
:disabled="isQuering || (results.length && results[0].rows.length < limit)"
@click="pageChange('next')"
>
<i class="mdi mdi-24px mdi-skip-next" />
</button>
</div>
<div class="divider-vert py-3" />
<button
v-if="isTable"
@ -74,7 +95,7 @@
<div v-if="results.length && results[0].rows">
{{ $t('word.results') }}: <b>{{ results[0].rows.length.toLocaleString() }}</b>
</div>
<div v-if="hasApproximately">
<div v-if="hasApproximately || page > 1">
{{ $t('word.total') }}: <b>{{ tableInfo.rows.toLocaleString() }}</b> <small>({{ $t('word.approximately') }})</small>
</div>
<div v-if="workspace.breadcrumbs.database">
@ -149,13 +170,15 @@ export default {
isFakerModal: false,
autorefreshTimer: 0,
refreshInterval: null,
sortParams: {}
sortParams: {},
page: 1
};
},
computed: {
...mapGetters({
getWorkspace: 'workspaces/getWorkspace',
selectedWorkspace: 'workspaces/getSelected'
selectedWorkspace: 'workspaces/getSelected',
limit: 'settings/getDataTabLimit'
}),
workspace () {
return this.getWorkspace(this.connection.uid);
@ -184,7 +207,7 @@ export default {
return this.results.length &&
this.results[0].rows &&
this.tableInfo &&
this.results[0].rows.length === 1000 &&
this.results[0].rows.length === this.limit &&
this.results[0].rows.length < this.tableInfo.rows;
}
},
@ -197,6 +220,9 @@ export default {
this.$refs.queryTable.resetSort();
}
},
page () {
this.getTableData();
},
isSelected (val) {
if (val && this.lastTable !== this.table) {
this.getTableData();
@ -228,6 +254,8 @@ export default {
uid: this.connection.uid,
schema: this.schema,
table: this.workspace.breadcrumbs.table || this.workspace.breadcrumbs.view,
limit: this.limit,
page: this.page,
sortParams
};
@ -255,6 +283,12 @@ export default {
this.sortParams = sortParams;
this.getTableData(sortParams);
},
pageChange (direction) {
if (direction === 'next')
this.page++;
else if (this.page > 1)
this.page--;
},
showAddModal () {
this.isAddModal = true;
},

2
src/renderer/store/modules/settings.store.js
View File

@ -11,6 +11,7 @@ export default {
allow_prerelease: persistentStore.get('allow_prerelease', true),
explorebar_size: persistentStore.get('explorebar_size', null),
notifications_timeout: persistentStore.get('notifications_timeout', 5),
data_tab_limit: persistentStore.get('data_tab_limit', 1000),
auto_complete: persistentStore.get('auto_complete', true),
line_wrap: persistentStore.get('line_wrap', true),
application_theme: persistentStore.get('application_theme', 'dark'),
@ -21,6 +22,7 @@ export default {
getAllowPrerelease: state => state.allow_prerelease,
getExplorebarSize: state => state.explorebar_size,
getNotificationsTimeout: state => state.notifications_timeout,
getDataTabLimit: state => state.data_tab_limit,
getAutoComplete: state => state.auto_complete,
getLineWrap: state => state.line_wrap,
getApplicationTheme: state => state.application_theme,