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

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

@ -19,7 +19,7 @@
:key="table.name"
class="menu-item"
: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)"
>
<a class="table-name">
@ -267,6 +267,7 @@ export default {
methods: {
...mapActions({
changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
newTab: 'workspaces/newTab',
refreshSchema: 'workspaces/refreshSchema'
}),
formatBytes,
@ -279,6 +280,11 @@ export default {
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) {
this.selectSchema(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(',')})`;
}
this.newTab({ uid: this.connection.uid, content: sql, autorun: true });
this.newTab({ uid: this.connection.uid, content: sql, type: 'query', autorun: true });
},
showOptionsModal () {
this.isOptionsModal = true;

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

@ -299,7 +299,7 @@ export default {
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 () {
this.isOptionsModal = true;

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

@ -281,7 +281,7 @@ export default {
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 () {
this.isOptionsModal = true;

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

@ -1,7 +1,7 @@
<template>
<div
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"
@keydown.116="runQuery(query)"
@keydown.ctrl.87="clear"

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

@ -1,5 +1,5 @@
<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-footer">
<div class="workspace-query-buttons">

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

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