mirror of https://github.com/Fabio286/antares.git
feat: support to multiple query tabs
This commit is contained in:
parent
fd6d5177ef
commit
d7ed00f4a3
|
|
@ -3,20 +3,22 @@
|
|||
<WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
|
||||
<div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
|
||||
<ul class="tab tab-block column col-12">
|
||||
<!-- <li
|
||||
<li
|
||||
v-if="workspace.breadcrumbs.table"
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 'prop'}"
|
||||
@click="selectTab({uid: workspace.uid, tab: 'prop'})"
|
||||
>
|
||||
<a class="tab-link">
|
||||
<i class="mdi mdi-18px mdi-tune mr-1" />
|
||||
<span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
|
||||
</a>
|
||||
</li> -->
|
||||
</li>
|
||||
<li
|
||||
v-if="workspace.breadcrumbs.table"
|
||||
class="tab-item"
|
||||
:class="{'active': selectedTab === 1}"
|
||||
@click="selectTab({uid: workspace.uid, tab: 1})"
|
||||
:class="{'active': selectedTab === 'data'}"
|
||||
@click="selectTab({uid: workspace.uid, tab: 'data'})"
|
||||
>
|
||||
<a class="tab-link">
|
||||
<i class="mdi mdi-18px mdi-table mr-1" />
|
||||
|
|
@ -30,11 +32,30 @@
|
|||
:class="{'active': selectedTab === tab.uid}"
|
||||
@click="selectTab({uid: workspace.uid, tab: tab.uid})"
|
||||
>
|
||||
<a><span>Query #{{ key+1 }} <span v-if="queryTabs.length > 1" class="btn btn-clear" /></span></a>
|
||||
<a>
|
||||
<span>
|
||||
Query #{{ key+1 }}
|
||||
<span
|
||||
v-if="queryTabs.length > 1"
|
||||
class="btn btn-clear"
|
||||
:title="$t('word.close')"
|
||||
@click.stop="closeTab(tab.uid)"
|
||||
/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="tab-item">
|
||||
<a
|
||||
class="tab-add"
|
||||
:title="$t('message.openNewTab')"
|
||||
@click="addTab"
|
||||
>
|
||||
<i class="mdi mdi-24px mdi-plus" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<WorkspaceTableTab
|
||||
v-show="selectedTab === 1"
|
||||
v-show="selectedTab === 'data'"
|
||||
:connection="connection"
|
||||
:table="workspace.breadcrumbs.table"
|
||||
/>
|
||||
|
|
@ -78,7 +99,7 @@ export default {
|
|||
return this.selectedWorkspace === this.connection.uid;
|
||||
},
|
||||
selectedTab () {
|
||||
return 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;
|
||||
},
|
||||
queryTabs () {
|
||||
return this.workspace.tabs.filter(tab => tab.type === 'query');
|
||||
|
|
@ -95,8 +116,16 @@ export default {
|
|||
addWorkspace: 'workspaces/addWorkspace',
|
||||
connectWorkspace: 'workspaces/connectWorkspace',
|
||||
removeConnected: 'workspaces/removeConnected',
|
||||
selectTab: 'workspaces/selectTab'
|
||||
})
|
||||
selectTab: 'workspaces/selectTab',
|
||||
newTab: 'workspaces/newTab',
|
||||
removeTab: 'workspaces/removeTab'
|
||||
}),
|
||||
addTab () {
|
||||
this.newTab(this.connection.uid);
|
||||
},
|
||||
closeTab (tUid) {
|
||||
this.removeTab({ uid: this.connection.uid, tab: tUid });
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -132,10 +161,16 @@ export default {
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
&.tab-add {
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
> span {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
padding: 0 0.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ export default {
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
tabUid: 1,
|
||||
tabUid: 'data',
|
||||
isQuering: false,
|
||||
results: {},
|
||||
fields: [],
|
||||
|
|
@ -86,7 +86,7 @@ export default {
|
|||
return this.getWorkspace(this.connection.uid);
|
||||
},
|
||||
isSelected () {
|
||||
return this.workspace.selected_tab === 1;
|
||||
return this.workspace.selected_tab === 'data';
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,8 @@ module.exports = {
|
|||
notificationsTimeout: 'Notifications timeout',
|
||||
uploadFile: 'Upload file',
|
||||
addNewRow: 'Add new row',
|
||||
numberOfInserts: 'Number of inserts'
|
||||
numberOfInserts: 'Number of inserts',
|
||||
openNewTab: 'Open a new tab'
|
||||
},
|
||||
// Date and Time
|
||||
short: {
|
||||
|
|
|
|||
|
|
@ -81,6 +81,18 @@ export default {
|
|||
return workspace;
|
||||
});
|
||||
},
|
||||
REMOVE_TAB (state, { uid, tab: tUid }) {
|
||||
state.workspaces = state.workspaces.map(workspace => {
|
||||
if (workspace.uid === uid) {
|
||||
return {
|
||||
...workspace,
|
||||
tabs: workspace.tabs.filter(tab => tab.uid !== tUid)
|
||||
};
|
||||
}
|
||||
else
|
||||
return workspace;
|
||||
});
|
||||
},
|
||||
SELECT_TAB (state, { uid, tab }) {
|
||||
state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selected_tab: tab } : workspace);
|
||||
},
|
||||
|
|
@ -158,7 +170,13 @@ export default {
|
|||
connected: false,
|
||||
selected_tab: 0,
|
||||
tabs: [{
|
||||
uid: 1,
|
||||
uid: 'data',
|
||||
type: 'table',
|
||||
fields: [],
|
||||
keyUsage: []
|
||||
},
|
||||
{
|
||||
uid: 'prop',
|
||||
type: 'table',
|
||||
fields: [],
|
||||
keyUsage: []
|
||||
|
|
@ -169,7 +187,7 @@ export default {
|
|||
|
||||
commit('ADD_WORKSPACE', workspace);
|
||||
|
||||
if (getters.getWorkspace(uid).tabs.length < 2)
|
||||
if (getters.getWorkspace(uid).tabs.length < 3)
|
||||
dispatch('newTab', uid);
|
||||
},
|
||||
changeBreadcrumbs ({ commit, getters }, payload) {
|
||||
|
|
@ -178,6 +196,9 @@ export default {
|
|||
newTab ({ commit }, uid) {
|
||||
commit('NEW_TAB', uid);
|
||||
},
|
||||
removeTab ({ commit }, payload) {
|
||||
commit('REMOVE_TAB', payload);
|
||||
},
|
||||
selectTab ({ commit }, payload) {
|
||||
commit('SELECT_TAB', payload);
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue