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

feat(UI): temporary table data tabs

This commit is contained in:
Fabio Di Stasio 2021-07-12 19:18:29 +02:00
parent 14d5842056
commit a87079cd17
9 changed files with 104 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
src/renderer/components/Workspace.vue
View File

@ -48,7 +48,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li <!-- <li
v-if="schemaChild && isSettingSupported" v-if="schemaChild && isSettingSupported"
class="tab-item" class="tab-item"
:class="{'active': selectedTab === 'prop'}" :class="{'active': selectedTab === 'prop'}"
@ -69,16 +69,16 @@
<i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" /> <i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
<span :title="schemaChild">{{ $t('word.data').toUpperCase() }}: {{ schemaChild }}</span> <span :title="schemaChild">{{ $t('word.data').toUpperCase() }}: {{ schemaChild }}</span>
</a> </a>
</li> </li> -->
<li <li
v-for="tab of queryTabs" v-for="tab of workspace.tabs"
:key="tab.uid" :key="tab.uid"
class="tab-item" class="tab-item"
:class="{'active': selectedTab === tab.uid}" :class="{'active': selectedTab === tab.uid}"
@click="selectTab({uid: workspace.uid, tab: tab.uid})" @click="selectTab({uid: workspace.uid, tab: tab.uid})"
@mouseup.middle="closeTab(tab.uid)" @mouseup.middle="closeTab(tab.uid)"
> >
<a class="tab-link"> <a v-if="tab.type === 'query'" class="tab-link">
<i class="mdi mdi-18px mdi-code-tags mr-1" /> <i class="mdi mdi-18px mdi-code-tags mr-1" />
<span> <span>
Query #{{ tab.index }} Query #{{ tab.index }}
@ -90,18 +90,22 @@
/> />
</span> </span>
</a> </a>
<a v-if="tab.type === 'temp-data'" class="tab-link text-italic">
<i class="mdi mdi-18px mr-1" :class="workspace.breadcrumbs.table ? 'mdi-table' : 'mdi-table-eye'" />
<span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">{{ tab.table }}</span>
</a>
</li> </li>
<li class="tab-item"> <li class="tab-item">
<a <a
class="tab-add" class="tab-add"
:title="$t('message.openNewTab')" :title="$t('message.openNewTab')"
@click="addTab" @click="addQueryTab"
> >
<i class="mdi mdi-24px mdi-plus" /> <i class="mdi mdi-24px mdi-plus" />
</a> </a>
</li> </li>
</ul> </ul>
<WorkspacePropsTab <!-- <WorkspacePropsTab
v-show="selectedTab === 'prop' && workspace.breadcrumbs.table" v-show="selectedTab === 'prop' && workspace.breadcrumbs.table"
:is-selected="selectedTab === 'prop'" :is-selected="selectedTab === 'prop'"
:connection="connection" :connection="connection"
@ -142,19 +146,28 @@
:is-selected="selectedTab === 'prop'" :is-selected="selectedTab === 'prop'"
:connection="connection" :connection="connection"
:scheduler="workspace.breadcrumbs.scheduler" :scheduler="workspace.breadcrumbs.scheduler"
/> /> -->
<WorkspaceTableTab <div
v-show="selectedTab === 'data'" v-for="tab of workspace.tabs"
:connection="connection" :key="tab.uid"
:table="workspace.breadcrumbs.table || workspace.breadcrumbs.view" class="column col-12"
/> >
<WorkspaceQueryTab <WorkspaceQueryTab
v-for="tab of queryTabs" v-if="tab.type==='query'"
:key="tab.uid" :key="tab.uid"
:tab="tab" :tab="tab"
:is-selected="selectedTab === tab.uid" :is-selected="selectedTab === tab.uid"
:connection="connection" :connection="connection"
/> />
<WorkspaceTableTab
v-else-if="tab.type==='temp-data'"
v-show="selectedTab === tab.uid"
:is-selected="selectedTab === tab.uid"
:connection="connection"
:table="tab.table"
:schema="tab.schema"
/>
</div>
</div> </div>
<WorkspaceEditConnectionPanel v-else :connection="connection" /> <WorkspaceEditConnectionPanel v-else :connection="connection" />
<ModalProcessesList <ModalProcessesList
@ -172,13 +185,13 @@ import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel'; import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
import WorkspaceQueryTab from '@/components/WorkspaceQueryTab'; import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
import WorkspaceTableTab from '@/components/WorkspaceTableTab'; import WorkspaceTableTab from '@/components/WorkspaceTableTab';
import WorkspacePropsTab from '@/components/WorkspacePropsTab'; // import WorkspacePropsTab from '@/components/WorkspacePropsTab';
import WorkspacePropsTabView from '@/components/WorkspacePropsTabView'; // import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger'; // import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine'; // import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction'; // import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction'; // import WorkspacePropsTabTriggerFunction from '@/components/WorkspacePropsTabTriggerFunction';
import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler'; // import WorkspacePropsTabScheduler from '@/components/WorkspacePropsTabScheduler';
import ModalProcessesList from '@/components/ModalProcessesList'; import ModalProcessesList from '@/components/ModalProcessesList';
export default { export default {
@ -188,13 +201,13 @@ export default {
WorkspaceEditConnectionPanel, WorkspaceEditConnectionPanel,
WorkspaceQueryTab, WorkspaceQueryTab,
WorkspaceTableTab, WorkspaceTableTab,
WorkspacePropsTab, // WorkspacePropsTab,
WorkspacePropsTabView, // WorkspacePropsTabView,
WorkspacePropsTabTrigger, // WorkspacePropsTabTrigger,
WorkspacePropsTabRoutine, // WorkspacePropsTabRoutine,
WorkspacePropsTabFunction, // WorkspacePropsTabFunction,
WorkspacePropsTabTriggerFunction, // WorkspacePropsTabTriggerFunction,
WorkspacePropsTabScheduler, // WorkspacePropsTabScheduler,
ModalProcessesList ModalProcessesList
}, },
props: { props: {
@ -228,29 +241,31 @@ export default {
return false; return false;
}, },
selectedTab () { selectedTab () {
if ( // if (
( // (
this.workspace.breadcrumbs.table === null && // this.workspace.breadcrumbs.table === null &&
this.workspace.breadcrumbs.view === null && // this.workspace.breadcrumbs.view === null &&
this.workspace.breadcrumbs.trigger === null && // this.workspace.breadcrumbs.trigger === null &&
this.workspace.breadcrumbs.procedure === null && // this.workspace.breadcrumbs.procedure === null &&
this.workspace.breadcrumbs.function === null && // this.workspace.breadcrumbs.function === null &&
this.workspace.breadcrumbs.triggerFunction === null && // this.workspace.breadcrumbs.triggerFunction === null &&
this.workspace.breadcrumbs.scheduler === null && // this.workspace.breadcrumbs.scheduler === null &&
['data', 'prop'].includes(this.workspace.selected_tab) // ['data', 'prop'].includes(this.workspace.selected_tab)
) || // ) ||
( // (
this.workspace.breadcrumbs.table === null && // this.workspace.breadcrumbs.table === null &&
this.workspace.breadcrumbs.view === null && // this.workspace.breadcrumbs.view === null &&
this.workspace.selected_tab === 'data' // this.workspace.selected_tab === 'data'
) // )
) // )
return this.queryTabs[0].uid; // return this.queryTabs[0].uid;
return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) || // return this.queryTabs.find(tab => tab.uid === this.workspace.selected_tab) ||
['data', 'prop'].includes(this.workspace.selected_tab) // ['data', 'prop'].includes(this.workspace.selected_tab)
? this.workspace.selected_tab // ? this.workspace.selected_tab
: this.queryTabs[0].uid; // : this.queryTabs[0].uid;
return this.workspace.selected_tab;
}, },
queryTabs () { queryTabs () {
return this.workspace.tabs.filter(tab => tab.type === 'query'); return this.workspace.tabs.filter(tab => tab.type === 'query');
@ -286,8 +301,8 @@ export default {
newTab: 'workspaces/newTab', newTab: 'workspaces/newTab',
removeTab: 'workspaces/removeTab' removeTab: 'workspaces/removeTab'
}), }),
addTab () { addQueryTab () {
this.newTab({ uid: this.connection.uid }); this.newTab({ uid: this.connection.uid, type: 'query' });
if (!this.hasWheelEvent) { if (!this.hasWheelEvent) {
this.$refs.tabWrap.addEventListener('wheel', e => { this.$refs.tabWrap.addEventListener('wheel', e => {

2
src/renderer/components/WorkspaceExploreBarMiscContext.vue
View File

@ -218,7 +218,7 @@ export default {
sql = `CALL \`${this.localElement.name}\`(${params.join(',')})`; sql = `CALL \`${this.localElement.name}\`(${params.join(',')})`;
} }
this.newTab({ uid: this.workspace.uid, content: sql, autorun: true }); this.newTab({ uid: this.workspace.uid, content: sql, type: 'query', autorun: true });
this.closeContext(); this.closeContext();
}, },
async runFunctionCheck () { async runFunctionCheck () {

8
src/renderer/components/WorkspaceExploreBarSchema.vue
View File

@ -19,7 +19,7 @@
:key="table.name" :key="table.name"
class="menu-item" class="menu-item"
:class="{'text-bold': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}" :class="{'text-bold': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
@click="setBreadcrumbs({schema: database.name, [table.type]: table.name})" @click="selectTable({schema: database.name, table})"
@contextmenu.prevent="showTableContext($event, table)" @contextmenu.prevent="showTableContext($event, table)"
> >
<a class="table-name"> <a class="table-name">
@ -267,6 +267,7 @@ export default {
methods: { methods: {
...mapActions({ ...mapActions({
changeBreadcrumbs: 'workspaces/changeBreadcrumbs', changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
newTab: 'workspaces/newTab',
refreshSchema: 'workspaces/refreshSchema' refreshSchema: 'workspaces/refreshSchema'
}), }),
formatBytes, formatBytes,
@ -279,6 +280,11 @@ export default {
this.changeBreadcrumbs({ schema, table: null }); this.changeBreadcrumbs({ schema, table: null });
}, },
selectTable ({ schema, table }) {
this.setBreadcrumbs({ schema, [table.type]: table.name });
// TODO: open only if not present
this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'temp-data' });
},
showSchemaContext (event, schema) { showSchemaContext (event, schema) {
this.selectSchema(schema); this.selectSchema(schema);
this.$emit('show-schema-context', { event, schema }); this.$emit('show-schema-context', { event, schema });

2
src/renderer/components/WorkspacePropsTabFunction.vue
View File

@ -303,7 +303,7 @@ export default {
sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`; sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
} }
this.newTab({ uid: this.connection.uid, content: sql, autorun: true }); this.newTab({ uid: this.connection.uid, content: sql, type: 'query', autorun: true });
}, },
showOptionsModal () { showOptionsModal () {
this.isOptionsModal = true; this.isOptionsModal = true;

2
src/renderer/components/WorkspacePropsTabRoutine.vue
View File

@ -299,7 +299,7 @@ export default {
sql = `CALL \`${this.originalRoutine.name}\`(${params.join(',')})`; sql = `CALL \`${this.originalRoutine.name}\`(${params.join(',')})`;
} }
this.newTab({ uid: this.connection.uid, content: sql, autorun: true }); this.newTab({ uid: this.connection.uid, content: sql, type: 'query', autorun: true });
}, },
showOptionsModal () { showOptionsModal () {
this.isOptionsModal = true; this.isOptionsModal = true;

2
src/renderer/components/WorkspacePropsTabTriggerFunction.vue
View File

@ -281,7 +281,7 @@ export default {
sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`; sql = `SELECT \`${this.originalFunction.name}\` (${params.join(',')})`;
} }
this.newTab({ uid: this.connection.uid, content: sql, autorun: true }); this.newTab({ uid: this.connection.uid, content: sql, type: 'query', autorun: true });
}, },
showOptionsModal () { showOptionsModal () {
this.isOptionsModal = true; this.isOptionsModal = true;

2
src/renderer/components/WorkspaceQueryTab.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div <div
v-show="isSelected" v-show="isSelected"
class="workspace-query-tab column col-12 columns col-gapless no-outline" class="workspace-query-tab column col-12 columns col-gapless no-outline p-0"
tabindex="0" tabindex="0"
@keydown.116="runQuery(query)" @keydown.116="runQuery(query)"
@keydown.ctrl.87="clear" @keydown.ctrl.87="clear"

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

@ -1,5 +1,5 @@
<template> <template>
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless"> <div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless p-0">
<div class="workspace-query-runner column col-12"> <div class="workspace-query-runner column col-12">
<div class="workspace-query-runner-footer"> <div class="workspace-query-runner-footer">
<div class="workspace-query-buttons"> <div class="workspace-query-buttons">

26
src/renderer/store/modules/workspaces.store.js
View File

@ -178,13 +178,17 @@ export default {
} }
: workspace); : workspace);
}, },
NEW_TAB (state, { uid, tab, content, autorun }) { NEW_TAB (state, { uid, tab, content, type, autorun, schema, table }) {
if (type === 'query')
tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1; tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
const newTab = { const newTab = {
uid: tab, uid: tab,
index: tabIndex[uid], index: type === 'query' ? tabIndex[uid] : null,
selected: false, selected: false,
type: 'query', type,
schema,
table,
fields: [], fields: [],
keyUsage: [], keyUsage: [],
content: content || '', content: content || '',
@ -432,7 +436,7 @@ export default {
commit('ADD_WORKSPACE', workspace); commit('ADD_WORKSPACE', workspace);
if (getters.getWorkspace(uid).tabs.length < 3) if (getters.getWorkspace(uid).tabs.length < 3)
dispatch('newTab', { uid }); dispatch('newTab', { uid, type: 'query' });
dispatch('setUnsavedChanges', false); dispatch('setUnsavedChanges', false);
}, },
@ -470,10 +474,18 @@ export default {
setSearchTerm ({ commit, getters }, term) { setSearchTerm ({ commit, getters }, term) {
commit('SET_SEARCH_TERM', { uid: getters.getSelected, term }); commit('SET_SEARCH_TERM', { uid: getters.getSelected, term });
}, },
newTab ({ commit }, { uid, content, autorun }) { newTab ({ state, commit }, { uid, content, type, autorun, schema, table }) {
const tab = uidGen('T'); if (type === 'temp-data') {
const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-data') : false;
if (tempTabs) {
for (const tab of tempTabs)
commit('REMOVE_TAB', { uid, tab: tab.uid });
}
}
commit('NEW_TAB', { uid, tab, content, autorun }); const tab = uidGen('T');
commit('NEW_TAB', { uid, tab, content, type, autorun, schema, table });
commit('SELECT_TAB', { uid, tab }); commit('SELECT_TAB', { uid, tab });
}, },
removeTab ({ commit }, payload) { removeTab ({ commit }, payload) {