2020-06-03 20:56:44 +02:00
|
|
|
<template>
|
|
|
|
<details class="accordion workspace-explorebar-database">
|
2020-06-05 21:00:15 +02:00
|
|
|
<summary
|
2020-10-18 10:27:02 +02:00
|
|
|
class="accordion-header database-name"
|
2020-06-15 18:23:51 +02:00
|
|
|
:class="{'text-bold': breadcrumbs.schema === database.name}"
|
2020-10-07 20:42:04 +02:00
|
|
|
@click="changeBreadcrumbs({schema: database.name, table: null})"
|
2020-10-01 15:08:35 +02:00
|
|
|
@contextmenu.prevent="showDatabaseContext($event, database.name)"
|
2020-06-05 21:00:15 +02:00
|
|
|
>
|
2020-08-12 10:48:18 +02:00
|
|
|
<i class="icon mdi mdi-18px mdi-chevron-right" />
|
2020-08-12 18:11:48 +02:00
|
|
|
<i class="database-icon mdi mdi-18px mdi-database mr-1" />
|
2020-06-05 21:00:15 +02:00
|
|
|
<span>{{ database.name }}</span>
|
2020-06-03 20:56:44 +02:00
|
|
|
</summary>
|
|
|
|
<div class="accordion-body">
|
2020-06-10 19:29:10 +02:00
|
|
|
<div class="database-tables">
|
2020-06-03 20:56:44 +02:00
|
|
|
<ul class="menu menu-nav pt-0">
|
|
|
|
<li
|
|
|
|
v-for="table of database.tables"
|
2020-10-12 18:45:15 +02:00
|
|
|
:key="table.name"
|
2020-06-03 20:56:44 +02:00
|
|
|
class="menu-item"
|
2020-10-12 18:45:15 +02:00
|
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.table === table.name}"
|
2020-12-04 11:19:16 +01:00
|
|
|
@click="setBreadcrumbs({schema: database.name, table: table.name})"
|
2020-10-12 18:45:15 +02:00
|
|
|
@contextmenu.prevent="showTableContext($event, table.name)"
|
2020-06-03 20:56:44 +02:00
|
|
|
>
|
|
|
|
<a class="table-name">
|
2020-10-12 18:45:15 +02:00
|
|
|
<i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
|
|
|
|
<span>{{ table.name }}</span>
|
2020-06-03 20:56:44 +02:00
|
|
|
</a>
|
2020-10-15 17:22:19 +02:00
|
|
|
<div class="table-size tooltip tooltip-left mr-1" :data-tooltip="formatBytes(table.size)">
|
2020-10-16 17:26:47 +02:00
|
|
|
<div class="pie" :style="piePercentage(table.size)" />
|
2020-10-15 17:22:19 +02:00
|
|
|
</div>
|
2020-06-03 20:56:44 +02:00
|
|
|
</li>
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</details>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2020-06-05 21:00:15 +02:00
|
|
|
import { mapActions, mapGetters } from 'vuex';
|
2020-10-15 17:22:19 +02:00
|
|
|
import { formatBytes } from 'common/libs/formatBytes';
|
2020-06-05 21:00:15 +02:00
|
|
|
|
2020-06-03 20:56:44 +02:00
|
|
|
export default {
|
|
|
|
name: 'WorkspaceExploreBarDatabase',
|
|
|
|
props: {
|
2020-06-05 21:00:15 +02:00
|
|
|
database: Object,
|
|
|
|
connection: Object
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
...mapGetters({
|
|
|
|
getWorkspace: 'workspaces/getWorkspace'
|
|
|
|
}),
|
|
|
|
breadcrumbs () {
|
|
|
|
return this.getWorkspace(this.connection.uid).breadcrumbs;
|
2020-10-15 17:22:19 +02:00
|
|
|
},
|
|
|
|
maxSize () {
|
|
|
|
return this.database.tables.reduce((acc, curr) => {
|
|
|
|
if (curr.size > acc) acc = curr.size;
|
|
|
|
return acc;
|
|
|
|
}, 0);
|
2020-10-18 10:27:02 +02:00
|
|
|
},
|
|
|
|
totalSize () {
|
|
|
|
return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
|
2020-06-05 21:00:15 +02:00
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
...mapActions({
|
|
|
|
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
|
2020-10-01 15:08:35 +02:00
|
|
|
}),
|
2020-10-15 17:22:19 +02:00
|
|
|
formatBytes,
|
2020-10-01 15:08:35 +02:00
|
|
|
showDatabaseContext (event, database) {
|
|
|
|
this.$emit('show-database-context', { event, database });
|
|
|
|
},
|
2020-12-03 13:00:54 +01:00
|
|
|
showTableContext (event, table) {
|
|
|
|
this.$emit('show-table-context', { event, table });
|
2020-10-15 17:22:19 +02:00
|
|
|
},
|
|
|
|
piePercentage (val) {
|
|
|
|
const perc = val / this.maxSize * 100;
|
|
|
|
return { background: `conic-gradient(lime ${perc}%, white 0)` };
|
2020-12-04 11:19:16 +01:00
|
|
|
},
|
|
|
|
setBreadcrumbs (payload) {
|
|
|
|
if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
|
|
|
|
this.changeBreadcrumbs(payload);
|
2020-10-01 15:08:35 +02:00
|
|
|
}
|
2020-06-03 20:56:44 +02:00
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2020-10-15 17:22:19 +02:00
|
|
|
.workspace-explorebar-database {
|
|
|
|
.database-name,
|
|
|
|
a.table-name {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2020-10-16 17:26:47 +02:00
|
|
|
padding: 0.1rem 1rem 0.1rem 0.1rem;
|
2020-10-15 17:22:19 +02:00
|
|
|
cursor: pointer;
|
|
|
|
font-size: 0.7rem;
|
2020-06-03 20:56:44 +02:00
|
|
|
|
2020-10-15 17:22:19 +02:00
|
|
|
> span {
|
|
|
|
overflow: hidden;
|
|
|
|
white-space: nowrap;
|
|
|
|
display: block;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
}
|
2020-06-03 20:56:44 +02:00
|
|
|
|
2020-10-15 17:22:19 +02:00
|
|
|
.database-icon,
|
|
|
|
.table-icon {
|
|
|
|
opacity: 0.7;
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
2020-10-15 17:22:19 +02:00
|
|
|
}
|
|
|
|
|
2020-10-16 17:26:47 +02:00
|
|
|
.database-name {
|
|
|
|
&:hover {
|
|
|
|
color: $body-font-color;
|
|
|
|
background: rgba($color: #fff, $alpha: 0.05);
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
a.table-name {
|
|
|
|
&:hover {
|
|
|
|
color: inherit;
|
|
|
|
background: inherit;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-10-15 17:22:19 +02:00
|
|
|
.menu-item {
|
|
|
|
line-height: 1.2;
|
|
|
|
position: relative;
|
2020-06-10 19:29:10 +02:00
|
|
|
|
2020-10-15 17:22:19 +02:00
|
|
|
&:hover {
|
|
|
|
color: $body-font-color;
|
|
|
|
background: rgba($color: #fff, $alpha: 0.05);
|
|
|
|
border-radius: 2px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.database-tables {
|
|
|
|
margin-left: 1.2rem;
|
|
|
|
}
|
|
|
|
|
|
|
|
.table-size {
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
cursor: pointer;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
height: 100%;
|
2020-10-18 10:27:02 +02:00
|
|
|
opacity: 0.2;
|
2020-10-15 17:22:19 +02:00
|
|
|
transition: opacity 0.2s;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
opacity: 0.8;
|
|
|
|
}
|
|
|
|
|
|
|
|
&::after {
|
|
|
|
font-weight: 400;
|
|
|
|
font-size: 0.5rem;
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
|
2020-10-15 17:22:19 +02:00
|
|
|
.pie {
|
|
|
|
width: 14px;
|
|
|
|
height: 14px;
|
|
|
|
border-radius: 50%;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2020-07-31 18:16:28 +02:00
|
|
|
}
|
|
|
|
}
|
2020-10-15 17:22:19 +02:00
|
|
|
}
|
2020-06-03 20:56:44 +02:00
|
|
|
</style>
|