2020-05-14 15:21:57 +02:00
|
|
|
<template>
|
2020-06-06 16:27:42 +02:00
|
|
|
<div v-show="isSelected" class="workspace column columns col-gapless">
|
2020-06-03 20:56:44 +02:00
|
|
|
<WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
|
2020-06-06 16:27:42 +02:00
|
|
|
<div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
|
|
|
|
<ul class="tab tab-block column col-12">
|
2020-06-05 21:00:15 +02:00
|
|
|
<li
|
|
|
|
v-for="(tab, key) of workspace.tabs"
|
|
|
|
:key="tab.uid"
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === tab.uid}"
|
|
|
|
>
|
2020-06-06 16:27:42 +02:00
|
|
|
<a href="#">Query #{{ key }} <span v-if="workspace.tabs.length > 1" class="btn btn-clear" /></a>
|
2020-06-05 21:00:15 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
2020-06-06 16:27:42 +02:00
|
|
|
<WorkspaceQueryTab :connection="connection" />
|
2020-05-14 15:21:57 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-05-15 17:52:59 +02:00
|
|
|
import { mapGetters, mapActions } from 'vuex';
|
2020-05-14 15:21:57 +02:00
|
|
|
import Connection from '@/ipc-api/Connection';
|
2020-06-03 20:56:44 +02:00
|
|
|
import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
|
2020-06-06 16:27:42 +02:00
|
|
|
import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
|
2020-05-14 15:21:57 +02:00
|
|
|
|
|
|
|
export default {
|
2020-06-03 20:56:44 +02:00
|
|
|
name: 'Workspace',
|
2020-05-14 15:21:57 +02:00
|
|
|
components: {
|
2020-06-05 21:00:15 +02:00
|
|
|
WorkspaceExploreBar,
|
2020-06-06 16:27:42 +02:00
|
|
|
WorkspaceQueryTab
|
2020-05-14 15:21:57 +02:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
connection: Object
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
2020-05-17 19:34:56 +02:00
|
|
|
selectedWorkspace: 'workspaces/getSelected',
|
2020-05-20 18:00:14 +02:00
|
|
|
getWorkspace: 'workspaces/getWorkspace'
|
|
|
|
}),
|
|
|
|
workspace () {
|
|
|
|
return this.getWorkspace(this.connection.uid);
|
2020-06-02 19:13:57 +02:00
|
|
|
},
|
|
|
|
isSelected () {
|
|
|
|
return this.selectedWorkspace === this.connection.uid;
|
2020-06-05 21:00:15 +02:00
|
|
|
},
|
|
|
|
selectedTab () {
|
|
|
|
return this.workspace.tabs.filter(tab => tab.selected).uid || this.workspace.tabs[0].uid;
|
2020-05-20 18:00:14 +02:00
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
},
|
|
|
|
async created () {
|
2020-06-05 21:00:15 +02:00
|
|
|
await this.addWorkspace(this.connection.uid);
|
2020-05-17 19:34:56 +02:00
|
|
|
const isInitiated = await Connection.checkConnection(this.connection.uid);
|
2020-05-19 18:06:05 +02:00
|
|
|
if (isInitiated)
|
|
|
|
this.connectWorkspace(this.connection);
|
2020-05-14 15:21:57 +02:00
|
|
|
},
|
|
|
|
methods: {
|
2020-05-15 17:52:59 +02:00
|
|
|
...mapActions({
|
2020-05-17 19:34:56 +02:00
|
|
|
addNotification: 'notifications/addNotification',
|
2020-05-18 18:06:32 +02:00
|
|
|
addWorkspace: 'workspaces/addWorkspace',
|
2020-05-19 18:06:05 +02:00
|
|
|
connectWorkspace: 'workspaces/connectWorkspace',
|
2020-05-17 19:34:56 +02:00
|
|
|
removeConnected: 'workspaces/removeConnected'
|
2020-05-15 17:52:59 +02:00
|
|
|
})
|
2020-05-14 15:21:57 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-06-05 21:00:15 +02:00
|
|
|
.workspace{
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
.workspace-tabs{
|
|
|
|
overflow: auto;
|
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
|
|
|
|
.tab-block{
|
|
|
|
background: $bg-color-light;
|
|
|
|
margin-top: 0;
|
2020-05-20 18:00:14 +02:00
|
|
|
|
2020-06-05 21:00:15 +02:00
|
|
|
.tab-item{
|
|
|
|
max-width: 6rem;
|
|
|
|
}
|
2020-05-20 18:00:14 +02:00
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
}
|
2020-06-05 21:00:15 +02:00
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
</style>
|