fabio286/antares
1
1
Fork 0
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00
Code Issues Releases Wiki Activity

feat(ui): display table properties tab

Browse Source
This commit is contained in:
Fabio
2020-10-24 14:47:35 +02:00
parent ee183886f6
commit 2dc16e8ea8
5 changed files with 529 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

202
src/renderer/components/WorkspacePropsTab.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<div 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"
>
<span>{{ $t('word.save') }}</span>
<i class="mdi mdi-24px mdi-content-save ml-1" />
</button>
<button
class="btn btn-link btn-sm mr-0"
:title="$t('message.clearChanges')"
>
<span>{{ $t('word.clear') }}</span>
<i class="mdi mdi-24px mdi-delete-sweep ml-1" />
</button>
<div class="divider-vert py-3" />
<button
class="btn btn-dark btn-sm"
:title="$t('message.addNewField')"
>
<span>{{ $t('word.add') }}</span>
<i class="mdi mdi-24px mdi-playlist-plus ml-1" />
</button>
<button
class="btn btn-dark btn-sm"
>
<span>{{ $t('word.indexes') }}</span>
<i class="mdi mdi-24px mdi-key mdi-rotate-45 ml-1" />
</button>
<button
class="btn btn-dark btn-sm"
>
<span>{{ $t('word.foreignKeys') }}</span>
<i class="mdi mdi-24px mdi-key-link ml-1" />
</button>
<button
class="btn btn-dark btn-sm"
>
<span>{{ $t('word.options') }}</span>
<i class="mdi mdi-24px mdi-cogs ml-1" />
</button>
</div>
</div>
</div>
<div class="workspace-query-results column col-12">
<WorkspacePropsTable
v-if="localFields"
ref="queryTable"
:results="localFields"
:tab-uid="tabUid"
:conn-uid="connection.uid"
:table="table"
:schema="schema"
mode="table"
/>
</div>
</div>
</template>
<script>
import Tables from '@/ipc-api/Tables';
import WorkspacePropsTable from '@/components/WorkspacePropsTable';
import { mapGetters, mapActions } from 'vuex';
export default {
name: 'WorkspacePropsTab',
components: {
WorkspacePropsTable
},
props: {
connection: Object,
table: String
},
data () {
return {
tabUid: 'prop',
isQuering: false,
localFields: [],
localKeyUsage: [],
lastTable: null,
isAddModal: false
};
},
computed: {
...mapGetters({
getWorkspace: 'workspaces/getWorkspace'
}),
workspace () {
return this.getWorkspace(this.connection.uid);
},
isSelected () {
return this.workspace.selected_tab === 'prop';
},
schema () {
return this.workspace.breadcrumbs.schema;
}
},
watch: {
table () {
if (this.isSelected) {
this.getFieldsData();
this.lastTable = this.table;
}
},
isSelected (val) {
if (val && this.lastTable !== this.table) {
this.getFieldsData();
this.lastTable = this.table;
}
}
},
created () {
this.getFieldsData();
window.addEventListener('keydown', this.onKey);
},
methods: {
...mapActions({
addNotification: 'notifications/addNotification',
setTabFields: 'workspaces/setTabFields',
setTabKeyUsage: 'workspaces/setTabKeyUsage'
}),
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,
schema: this.schema,
table: this.workspace.breadcrumbs.table
};
try { // Columns data
const { status, response } = await Tables.getTableColumns(params);
if (status === 'success') {
this.localFields = response;
fieldsArr.push(response);
}
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.localKeyUsage = response;
keysArr.push(response);
}
else
this.addNotification({ status: 'error', message: response });
}
catch (err) {
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();
},
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);
}
}
}
};
</script>