2020-05-08 18:02:18 +02:00
|
|
|
<template>
|
2020-06-06 16:27:42 +02:00
|
|
|
<div class="column col-auto p-relative">
|
2020-06-02 19:13:57 +02:00
|
|
|
<div ref="resizer" class="workspace-explorebar-resizer" />
|
|
|
|
<div
|
|
|
|
ref="explorebar"
|
|
|
|
class="workspace-explorebar column"
|
|
|
|
:style="{width: localWidth ? localWidth+'px' : ''}"
|
|
|
|
>
|
|
|
|
<div class="workspace-explorebar-header">
|
|
|
|
<span class="workspace-explorebar-title">{{ connectionName }}</span>
|
|
|
|
<span v-if="workspace.connected" class="workspace-explorebar-tools">
|
|
|
|
<i
|
2020-09-25 12:39:58 +02:00
|
|
|
class="mdi mdi-18px mdi-database-plus c-hand mr-2"
|
|
|
|
:title="$t('message.createNewDatabase')"
|
|
|
|
@click="showNewDBModal"
|
|
|
|
/>
|
|
|
|
<i
|
|
|
|
class="mdi mdi-18px mdi-refresh c-hand mr-2"
|
2020-06-02 19:13:57 +02:00
|
|
|
:class="{'rotate':isRefreshing}"
|
|
|
|
:title="$t('word.refresh')"
|
|
|
|
@click="refresh"
|
2020-08-12 10:48:18 +02:00
|
|
|
/>
|
2020-06-02 19:13:57 +02:00
|
|
|
<i
|
2020-09-25 12:39:58 +02:00
|
|
|
class="mdi mdi-18px mdi-power-plug-off c-hand"
|
2020-06-02 19:13:57 +02:00
|
|
|
:title="$t('word.disconnect')"
|
|
|
|
@click="disconnectWorkspace(connection.uid)"
|
2020-08-12 10:48:18 +02:00
|
|
|
/>
|
2020-06-02 19:13:57 +02:00
|
|
|
</span>
|
|
|
|
</div>
|
2020-06-05 21:00:15 +02:00
|
|
|
<WorkspaceConnectPanel
|
|
|
|
v-if="!workspace.connected"
|
|
|
|
class="workspace-explorebar-body"
|
|
|
|
:connection="connection"
|
|
|
|
/>
|
|
|
|
<div v-else class="workspace-explorebar-body">
|
2020-06-03 20:56:44 +02:00
|
|
|
<WorkspaceExploreBarDatabase
|
2020-06-02 19:13:57 +02:00
|
|
|
v-for="db of workspace.structure"
|
2020-06-05 21:00:15 +02:00
|
|
|
:key="db.name"
|
2020-06-03 20:56:44 +02:00
|
|
|
:database="db"
|
2020-06-05 21:00:15 +02:00
|
|
|
:connection="connection"
|
2020-10-01 15:08:35 +02:00
|
|
|
@show-database-context="openDatabaseContext"
|
2020-06-03 20:56:44 +02:00
|
|
|
/>
|
2020-05-31 17:56:33 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-09-25 12:39:58 +02:00
|
|
|
<ModalNewDB
|
|
|
|
v-if="isNewDBModal"
|
|
|
|
@close="hideNewDBModal"
|
|
|
|
@reload="refresh"
|
|
|
|
/>
|
2020-10-01 15:08:35 +02:00
|
|
|
<DatabaseContext
|
|
|
|
v-if="isDatabaseContext"
|
|
|
|
:selected-database="selectedDatabase"
|
|
|
|
:context-event="databaseContextEvent"
|
|
|
|
@close-context="closeDatabaseContext"
|
|
|
|
@reload="refresh"
|
|
|
|
/>
|
2020-05-08 18:02:18 +02:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-05-18 18:06:32 +02:00
|
|
|
import { mapGetters, mapActions } from 'vuex';
|
2020-06-02 19:13:57 +02:00
|
|
|
import _ from 'lodash';
|
2020-06-03 20:56:44 +02:00
|
|
|
import WorkspaceConnectPanel from '@/components/WorkspaceConnectPanel';
|
|
|
|
import WorkspaceExploreBarDatabase from '@/components/WorkspaceExploreBarDatabase';
|
2020-10-01 15:08:35 +02:00
|
|
|
import DatabaseContext from '@/components/WorkspaceExploreBarDatabaseContext';
|
2020-09-25 12:39:58 +02:00
|
|
|
import ModalNewDB from '@/components/ModalNewDB';
|
2020-05-15 17:52:59 +02:00
|
|
|
|
2020-05-08 18:02:18 +02:00
|
|
|
export default {
|
2020-06-03 20:56:44 +02:00
|
|
|
name: 'WorkspaceExploreBar',
|
2020-05-17 19:34:56 +02:00
|
|
|
components: {
|
2020-06-03 20:56:44 +02:00
|
|
|
WorkspaceConnectPanel,
|
2020-09-25 12:39:58 +02:00
|
|
|
WorkspaceExploreBarDatabase,
|
2020-10-01 15:08:35 +02:00
|
|
|
DatabaseContext,
|
2020-09-25 12:39:58 +02:00
|
|
|
ModalNewDB
|
2020-05-17 19:34:56 +02:00
|
|
|
},
|
2020-05-14 15:21:57 +02:00
|
|
|
props: {
|
2020-06-02 19:13:57 +02:00
|
|
|
connection: Object,
|
|
|
|
isSelected: Boolean
|
2020-05-18 18:06:32 +02:00
|
|
|
},
|
2020-05-20 18:00:14 +02:00
|
|
|
data () {
|
|
|
|
return {
|
2020-06-02 19:13:57 +02:00
|
|
|
isRefreshing: false,
|
2020-09-25 12:39:58 +02:00
|
|
|
isNewDBModal: false,
|
2020-10-01 15:08:35 +02:00
|
|
|
localWidth: null,
|
|
|
|
isDatabaseContext: false,
|
|
|
|
isTableContext: false,
|
|
|
|
databaseContextEvent: null,
|
|
|
|
tableContextEvent: null,
|
|
|
|
selectedDatabase: '',
|
|
|
|
selectedTable: ''
|
2020-05-20 18:00:14 +02:00
|
|
|
};
|
|
|
|
},
|
2020-05-18 18:06:32 +02:00
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
2020-05-31 17:56:33 +02:00
|
|
|
getWorkspace: 'workspaces/getWorkspace',
|
2020-06-02 19:13:57 +02:00
|
|
|
explorebarSize: 'settings/getExplorebarSize',
|
2020-05-31 17:56:33 +02:00
|
|
|
getConnectionName: 'connections/getConnectionName'
|
2020-05-18 18:06:32 +02:00
|
|
|
}),
|
2020-05-20 18:00:14 +02:00
|
|
|
workspace () {
|
|
|
|
return this.getWorkspace(this.connection.uid);
|
2020-05-31 17:56:33 +02:00
|
|
|
},
|
|
|
|
connectionName () {
|
|
|
|
return this.getConnectionName(this.connection.uid);
|
2020-05-18 18:06:32 +02:00
|
|
|
}
|
|
|
|
},
|
2020-06-02 19:13:57 +02:00
|
|
|
watch: {
|
|
|
|
localWidth: _.debounce(function (val) {
|
|
|
|
this.changeExplorebarSize(val);
|
|
|
|
}, 500),
|
|
|
|
isSelected (val) {
|
|
|
|
if (val) this.localWidth = this.explorebarSize;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.localWidth = this.explorebarSize;
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
const resizer = this.$refs.resizer;
|
|
|
|
|
|
|
|
resizer.addEventListener('mousedown', (e) => {
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
window.addEventListener('mousemove', this.resize);
|
|
|
|
window.addEventListener('mouseup', this.stopResize);
|
|
|
|
});
|
|
|
|
},
|
2020-05-18 18:06:32 +02:00
|
|
|
methods: {
|
|
|
|
...mapActions({
|
2020-05-20 18:00:14 +02:00
|
|
|
disconnectWorkspace: 'workspaces/removeConnected',
|
2020-06-02 19:13:57 +02:00
|
|
|
refreshStructure: 'workspaces/refreshStructure',
|
|
|
|
changeExplorebarSize: 'settings/changeExplorebarSize'
|
2020-05-20 18:00:14 +02:00
|
|
|
}),
|
|
|
|
async refresh () {
|
2020-10-01 15:08:35 +02:00
|
|
|
console.log('refresh');
|
2020-06-10 19:29:10 +02:00
|
|
|
if (!this.isRefreshing) {
|
|
|
|
this.isRefreshing = true;
|
|
|
|
await this.refreshStructure(this.connection.uid);
|
|
|
|
this.isRefreshing = false;
|
|
|
|
}
|
2020-06-02 19:13:57 +02:00
|
|
|
},
|
|
|
|
resize (e) {
|
|
|
|
const el = this.$refs.explorebar;
|
|
|
|
let explorebarWidth = e.pageX - el.getBoundingClientRect().left;
|
|
|
|
if (explorebarWidth > 500) explorebarWidth = 500;
|
|
|
|
if (explorebarWidth < 150) explorebarWidth = 150;
|
|
|
|
this.localWidth = explorebarWidth;
|
|
|
|
},
|
|
|
|
stopResize () {
|
|
|
|
window.removeEventListener('mousemove', this.resize);
|
2020-09-25 12:39:58 +02:00
|
|
|
},
|
|
|
|
showNewDBModal () {
|
|
|
|
this.isNewDBModal = true;
|
|
|
|
},
|
|
|
|
hideNewDBModal () {
|
|
|
|
this.isNewDBModal = false;
|
2020-10-01 15:08:35 +02:00
|
|
|
},
|
|
|
|
openDatabaseContext (payload) {
|
|
|
|
this.isTableContext = false;
|
|
|
|
this.selectedDatabase = payload.database;
|
|
|
|
this.databaseContextEvent = payload.event;
|
|
|
|
this.isDatabaseContext = true;
|
|
|
|
},
|
|
|
|
closeDatabaseContext () {
|
|
|
|
this.isDatabaseContext = false;
|
|
|
|
this.selectedDatabase = '';
|
2020-05-20 18:00:14 +02:00
|
|
|
}
|
2020-05-14 15:21:57 +02:00
|
|
|
}
|
2020-05-08 18:02:18 +02:00
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar-resizer {
|
|
|
|
position: absolute;
|
|
|
|
width: 4px;
|
|
|
|
right: -2px;
|
|
|
|
top: 0;
|
|
|
|
height: calc(100vh - #{$excluding-size});
|
|
|
|
cursor: ew-resize;
|
|
|
|
z-index: 99;
|
|
|
|
}
|
2020-06-02 19:13:57 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar {
|
|
|
|
width: $explorebar-width;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: flex-start;
|
|
|
|
align-items: center;
|
|
|
|
text-align: left;
|
|
|
|
background: $bg-color-gray;
|
|
|
|
box-shadow: 0 0 1px 0 #000;
|
|
|
|
z-index: 8;
|
|
|
|
flex: initial;
|
|
|
|
position: relative;
|
|
|
|
padding: 0;
|
2020-05-15 17:52:59 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar-header {
|
|
|
|
width: 100%;
|
|
|
|
padding: 0.3rem;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
font-size: 0.6rem;
|
|
|
|
font-weight: 700;
|
|
|
|
text-transform: uppercase;
|
2020-05-18 18:06:32 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar-title {
|
|
|
|
width: 80%;
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
display: block;
|
|
|
|
align-items: center;
|
|
|
|
}
|
2020-05-18 18:06:32 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar-tools {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-05-20 18:00:14 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
> i {
|
|
|
|
opacity: 0.6;
|
|
|
|
transition: opacity 0.2s;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-05-18 18:06:32 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
&:hover {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
2020-05-15 17:52:59 +02:00
|
|
|
}
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
2020-05-31 17:56:33 +02:00
|
|
|
|
2020-07-31 18:16:28 +02:00
|
|
|
.workspace-explorebar-body {
|
|
|
|
width: 100%;
|
|
|
|
height: calc((100vh - 30px) - #{$excluding-size});
|
|
|
|
overflow: overlay;
|
|
|
|
padding: 0 0.1rem;
|
|
|
|
}
|
|
|
|
}
|
2020-05-08 18:02:18 +02:00
|
|
|
</style>
|