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">
|
2020-10-26 09:28:29 +01:00
|
|
|
<ul
|
|
|
|
id="tabWrap"
|
|
|
|
ref="tabWrap"
|
|
|
|
class="tab tab-block column col-12"
|
|
|
|
>
|
2020-11-13 16:19:59 +01:00
|
|
|
<li class="tab-item d-none">
|
2020-10-24 14:47:35 +02:00
|
|
|
<a class="tab-link workspace-tools-link">
|
|
|
|
<i class="mdi mdi-24px mdi-tools" />
|
|
|
|
</a>
|
|
|
|
</li>
|
2020-08-19 18:20:57 +02:00
|
|
|
<li
|
2020-08-10 16:06:11 +02:00
|
|
|
v-if="workspace.breadcrumbs.table"
|
|
|
|
class="tab-item"
|
2020-08-19 18:20:57 +02:00
|
|
|
:class="{'active': selectedTab === 'prop'}"
|
|
|
|
@click="selectTab({uid: workspace.uid, tab: 'prop'})"
|
2020-08-10 16:06:11 +02:00
|
|
|
>
|
|
|
|
<a class="tab-link">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-18px mdi-tune mr-1" />
|
2020-08-10 16:06:11 +02:00
|
|
|
<span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
|
|
|
|
</a>
|
2020-08-19 18:20:57 +02:00
|
|
|
</li>
|
2020-06-05 21:00:15 +02:00
|
|
|
<li
|
2020-06-12 18:10:45 +02:00
|
|
|
v-if="workspace.breadcrumbs.table"
|
|
|
|
class="tab-item"
|
2020-08-19 18:20:57 +02:00
|
|
|
:class="{'active': selectedTab === 'data'}"
|
|
|
|
@click="selectTab({uid: workspace.uid, tab: 'data'})"
|
2020-06-12 18:10:45 +02:00
|
|
|
>
|
|
|
|
<a class="tab-link">
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="mdi mdi-18px mdi-table mr-1" />
|
2020-08-10 16:06:11 +02:00
|
|
|
<span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
|
2020-06-12 18:10:45 +02:00
|
|
|
</a>
|
|
|
|
</li>
|
|
|
|
<li
|
2020-08-20 10:38:18 +02:00
|
|
|
v-for="tab of queryTabs"
|
2020-06-05 21:00:15 +02:00
|
|
|
:key="tab.uid"
|
|
|
|
class="tab-item"
|
|
|
|
:class="{'active': selectedTab === tab.uid}"
|
2020-06-12 18:10:45 +02:00
|
|
|
@click="selectTab({uid: workspace.uid, tab: tab.uid})"
|
2020-10-26 09:28:29 +01:00
|
|
|
@mouseup.middle="closeTab(tab.uid)"
|
2020-06-05 21:00:15 +02:00
|
|
|
>
|
2020-10-17 10:12:40 +02:00
|
|
|
<a class="tab-link">
|
|
|
|
<i class="mdi mdi-18px mdi-code-tags mr-1" />
|
2020-08-19 18:20:57 +02:00
|
|
|
<span>
|
2020-08-20 10:38:18 +02:00
|
|
|
Query #{{ tab.index }}
|
2020-08-19 18:20:57 +02:00
|
|
|
<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>
|
2020-06-05 21:00:15 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
2020-10-24 14:47:35 +02:00
|
|
|
<WorkspacePropsTab
|
|
|
|
v-show="selectedTab === 'prop'"
|
2020-12-04 11:19:16 +01:00
|
|
|
:is-selected="selectedTab === 'prop'"
|
2020-10-24 14:47:35 +02:00
|
|
|
:connection="connection"
|
|
|
|
:table="workspace.breadcrumbs.table"
|
|
|
|
/>
|
2020-06-12 18:10:45 +02:00
|
|
|
<WorkspaceTableTab
|
2020-08-19 18:20:57 +02:00
|
|
|
v-show="selectedTab === 'data'"
|
2020-06-12 18:10:45 +02:00
|
|
|
:connection="connection"
|
|
|
|
:table="workspace.breadcrumbs.table"
|
|
|
|
/>
|
|
|
|
<WorkspaceQueryTab
|
|
|
|
v-for="tab of queryTabs"
|
|
|
|
:key="tab.uid"
|
2020-08-14 18:07:29 +02:00
|
|
|
:tab-uid="tab.uid"
|
2020-08-20 18:06:02 +02:00
|
|
|
:is-selected="selectedTab === tab.uid"
|
2020-06-12 18:10:45 +02:00
|
|
|
: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-06-12 18:10:45 +02:00
|
|
|
import WorkspaceTableTab from '@/components/WorkspaceTableTab';
|
2020-10-24 14:47:35 +02:00
|
|
|
import WorkspacePropsTab from '@/components/WorkspacePropsTab';
|
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-12 18:10:45 +02:00
|
|
|
WorkspaceQueryTab,
|
2020-10-24 14:47:35 +02:00
|
|
|
WorkspaceTableTab,
|
|
|
|
WorkspacePropsTab
|
2020-05-14 15:21:57 +02:00
|
|
|
},
|
|
|
|
props: {
|
|
|
|
connection: Object
|
|
|
|
},
|
2020-10-26 09:28:29 +01:00
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
hasWheelEvent: false
|
|
|
|
};
|
|
|
|
},
|
2020-05-14 15:21:57 +02:00
|
|
|
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 () {
|
2020-11-18 18:21:15 +01:00
|
|
|
if (this.workspace.breadcrumbs.table === null)
|
|
|
|
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;
|
2020-06-12 18:10:45 +02:00
|
|
|
},
|
|
|
|
queryTabs () {
|
|
|
|
return this.workspace.tabs.filter(tab => tab.type === 'query');
|
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
|
|
|
},
|
2020-08-20 10:38:18 +02:00
|
|
|
mounted () {
|
|
|
|
if (this.$refs.tabWrap) {
|
|
|
|
this.$refs.tabWrap.addEventListener('wheel', e => {
|
|
|
|
if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
|
|
|
|
else this.$refs.tabWrap.scrollLeft -= 50;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
2020-05-14 15:21:57 +02:00
|
|
|
methods: {
|
2020-05-15 17:52:59 +02:00
|
|
|
...mapActions({
|
2020-05-18 18:06:32 +02:00
|
|
|
addWorkspace: 'workspaces/addWorkspace',
|
2020-05-19 18:06:05 +02:00
|
|
|
connectWorkspace: 'workspaces/connectWorkspace',
|
2020-06-12 18:10:45 +02:00
|
|
|
removeConnected: 'workspaces/removeConnected',
|
2020-08-19 18:20:57 +02:00
|
|
|
selectTab: 'workspaces/selectTab',
|
|
|
|
newTab: 'workspaces/newTab',
|
|
|
|
removeTab: 'workspaces/removeTab'
|
|
|
|
}),
|
|
|
|
addTab () {
|
|
|
|
this.newTab(this.connection.uid);
|
2020-10-26 09:28:29 +01:00
|
|
|
|
|
|
|
if (!this.hasWheelEvent) {
|
|
|
|
this.$refs.tabWrap.addEventListener('wheel', e => {
|
|
|
|
if (e.deltaY > 0) this.$refs.tabWrap.scrollLeft += 50;
|
|
|
|
else this.$refs.tabWrap.scrollLeft -= 50;
|
|
|
|
});
|
|
|
|
this.hasWheelEvent = true;
|
|
|
|
}
|
2020-08-19 18:20:57 +02:00
|
|
|
},
|
|
|
|
closeTab (tUid) {
|
2020-08-21 10:57:26 +02:00
|
|
|
if (this.queryTabs.length === 1) return;
|
2020-08-19 18:20:57 +02:00
|
|
|
this.removeTab({ uid: this.connection.uid, tab: tUid });
|
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace {
|
|
|
|
padding: 0;
|
|
|
|
margin: 0;
|
|
|
|
|
|
|
|
.workspace-tabs {
|
2020-08-20 10:38:18 +02:00
|
|
|
overflow: hidden;
|
2020-07-31 18:16:28 +02:00
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
|
|
|
|
.tab-block {
|
|
|
|
background: $bg-color-light;
|
|
|
|
margin-top: 0;
|
2020-08-20 10:38:18 +02:00
|
|
|
flex-direction: row;
|
|
|
|
align-items: flex-start;
|
|
|
|
flex-wrap: nowrap;
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
&::-webkit-scrollbar {
|
|
|
|
width: 2px;
|
|
|
|
height: 2px;
|
|
|
|
}
|
2020-07-31 18:16:28 +02:00
|
|
|
|
|
|
|
.tab-item {
|
|
|
|
max-width: 12rem;
|
|
|
|
width: fit-content;
|
|
|
|
flex: initial;
|
|
|
|
|
|
|
|
> a {
|
|
|
|
padding: 0.2rem 0.8rem;
|
|
|
|
color: $body-font-color;
|
|
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
opacity: 0.7;
|
|
|
|
transition: opacity 0.2s;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
|
2020-08-19 18:20:57 +02:00
|
|
|
&.tab-add {
|
|
|
|
padding: 0.2rem 0.4rem;
|
2020-08-20 10:38:18 +02:00
|
|
|
margin-top: 2px;
|
2020-08-19 18:20:57 +02:00
|
|
|
border: 0;
|
|
|
|
}
|
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
> span {
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
text-overflow: ellipsis;
|
2020-08-19 18:20:57 +02:00
|
|
|
padding: 0 0.2rem;
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
}
|
2020-08-10 16:06:11 +02:00
|
|
|
|
|
|
|
&.active a {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
2020-10-24 14:47:35 +02:00
|
|
|
|
|
|
|
.workspace-tools-link {
|
|
|
|
padding-bottom: 0;
|
|
|
|
padding-top: 0.3rem;
|
|
|
|
}
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.workspace-query-results {
|
|
|
|
overflow: auto;
|
|
|
|
white-space: nowrap;
|
|
|
|
|
|
|
|
.table {
|
|
|
|
width: auto;
|
|
|
|
border-collapse: separate;
|
|
|
|
|
|
|
|
.th {
|
|
|
|
position: sticky;
|
|
|
|
top: 0;
|
|
|
|
background: $bg-color;
|
|
|
|
border: 1px solid;
|
|
|
|
border-left: none;
|
|
|
|
border-bottom-width: 2px;
|
|
|
|
border-color: $bg-color-light;
|
|
|
|
padding: 0;
|
|
|
|
font-weight: 700;
|
|
|
|
font-size: 0.7rem;
|
2020-08-10 16:06:11 +02:00
|
|
|
z-index: 1;
|
2020-07-31 18:16:28 +02:00
|
|
|
|
|
|
|
> div {
|
|
|
|
padding: 0.1rem 0.4rem;
|
|
|
|
min-width: -webkit-fill-available;
|
|
|
|
}
|
2020-06-12 18:10:45 +02:00
|
|
|
}
|
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.td {
|
|
|
|
border-right: 1px solid;
|
|
|
|
border-bottom: 1px solid;
|
|
|
|
border-color: $bg-color-light;
|
|
|
|
padding: 0 0.4rem;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
max-width: 200px;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
font-size: 0.7rem;
|
2020-08-10 16:06:11 +02:00
|
|
|
position: relative;
|
2020-07-31 18:16:28 +02:00
|
|
|
|
|
|
|
&:focus {
|
|
|
|
box-shadow: inset 0 0 0 1px $body-font-color;
|
|
|
|
background: rgba($color: #000, $alpha: 0.3);
|
|
|
|
outline: none;
|
|
|
|
}
|
2020-05-20 18:00:14 +02:00
|
|
|
}
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
}
|
2020-06-05 21:00:15 +02:00
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
</style>
|