mirror of https://github.com/Fabio286/antares.git
595 lines
22 KiB
Vue
595 lines
22 KiB
Vue
<template>
|
|
<details ref="schemaAccordion" class="accordion workspace-explorebar-database">
|
|
<summary
|
|
class="accordion-header database-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name}"
|
|
@click="selectSchema(database.name)"
|
|
@contextmenu.prevent="showSchemaContext($event, database.name)"
|
|
>
|
|
<div v-if="isLoading" class="icon loading" />
|
|
<i v-else class="icon mdi mdi-18px mdi-chevron-right" />
|
|
<i class="database-icon mdi mdi-18px mdi-database mr-1" />
|
|
<div class="">
|
|
<span>{{ database.name }}</span>
|
|
<div
|
|
v-if="database.size"
|
|
class="schema-size tooltip tooltip-left mr-1"
|
|
:data-tooltip="formatBytes(database.size)"
|
|
>
|
|
<i class="mdi mdi-information-outline pr-2" />
|
|
</div>
|
|
</div>
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div class="database-tables">
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="table of filteredTables"
|
|
:ref="breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name) ? 'explorebar-selected' : ''"
|
|
:key="table.name"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
|
|
@mousedown.left="selectTable({schema: database.name, table})"
|
|
@dblclick="openDataTab({schema: database.name, table})"
|
|
@contextmenu.prevent="showTableContext($event, table)"
|
|
>
|
|
<a class="table-name">
|
|
<div v-if="checkLoadingStatus(table.name, 'table')" class="icon loading mr-1" />
|
|
<i
|
|
v-else
|
|
class="table-icon mdi mdi-18px mr-1"
|
|
:class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'"
|
|
/>
|
|
<span v-html="highlightWord(table.name)" />
|
|
</a>
|
|
<div
|
|
v-if="table.type === 'table' && table.size !== false"
|
|
class="table-size tooltip tooltip-left mr-1"
|
|
:data-tooltip="formatBytes(table.size)"
|
|
>
|
|
<div class="pie" :style="piePercentage(table.size)" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div v-if="filteredTriggers.length && customizations.triggers" class="database-misc">
|
|
<details class="accordion">
|
|
<summary
|
|
class="accordion-header misc-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.trigger}"
|
|
@contextmenu.prevent="showMiscFolderContext($event, 'trigger')"
|
|
>
|
|
<i class="misc-icon mdi mdi-18px mdi-folder-cog mr-1" />
|
|
{{ $tc('word.trigger', 2) }}
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div>
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="trigger of filteredTriggers"
|
|
:key="trigger.name"
|
|
:ref="breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name ? 'explorebar-selected' : ''"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
|
|
@mousedown.left="selectMisc({schema: database.name, misc: trigger, type: 'trigger'})"
|
|
@dblclick="openMiscPermanentTab({schema: database.name, misc: trigger, type: 'trigger'})"
|
|
@contextmenu.prevent="showMiscContext($event, {...trigger, type: 'trigger'})"
|
|
>
|
|
<a class="table-name">
|
|
<div v-if="checkLoadingStatus(trigger.name, 'trigger')" class="icon loading mr-1" />
|
|
<i v-else class="table-icon mdi mdi-table-cog mdi-18px mr-1" />
|
|
<span v-html="highlightWord(trigger.name)" />
|
|
</a>
|
|
<div
|
|
v-if="trigger.enabled === false"
|
|
class="tooltip tooltip-left disabled-indicator"
|
|
:data-tooltip="$t('word.disabled')"
|
|
>
|
|
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div v-if="filteredProcedures.length && customizations.routines" class="database-misc">
|
|
<details class="accordion">
|
|
<summary
|
|
class="accordion-header misc-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.routine}"
|
|
@contextmenu.prevent="showMiscFolderContext($event, 'procedure')"
|
|
>
|
|
<i class="misc-icon mdi mdi-18px mdi-folder-sync mr-1" />
|
|
{{ $tc('word.storedRoutine', 2) }}
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div>
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="(procedure, i) of filteredProcedures"
|
|
:key="`${procedure.name}-${i}`"
|
|
:ref="breadcrumbs.schema === database.name && breadcrumbs.routine === procedure.name ? 'explorebar-selected' : ''"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.routine === procedure.name}"
|
|
@mousedown.left="selectMisc({schema: database.name, misc: procedure, type: 'routine'})"
|
|
@dblclick="openMiscPermanentTab({schema: database.name, misc: procedure, type: 'routine'})"
|
|
@contextmenu.prevent="showMiscContext($event, {...procedure, type: 'procedure'})"
|
|
>
|
|
<a class="table-name">
|
|
<i class="table-icon mdi mdi-sync-circle mdi-18px mr-1" />
|
|
<span v-html="highlightWord(procedure.name)" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div v-if="filteredTriggerFunctions.length && customizations.triggerFunctions" class="database-misc">
|
|
<details class="accordion">
|
|
<summary
|
|
class="accordion-header misc-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction}"
|
|
@contextmenu.prevent="showMiscFolderContext($event, 'triggerFunction')"
|
|
>
|
|
<i class="misc-icon mdi mdi-18px mdi-folder-refresh mr-1" />
|
|
{{ $tc('word.triggerFunction', 2) }}
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div>
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="(func, i) of filteredTriggerFunctions"
|
|
:key="`${func.name}-${i}`"
|
|
:ref="breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name ? 'explorebar-selected' : ''"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
|
|
@mousedown.left="selectMisc({schema: database.name, misc: func, type: 'triggerFunction'})"
|
|
@dblclick="openMiscPermanentTab({schema: database.name, misc: func, type: 'triggerFunction'})"
|
|
@contextmenu.prevent="showMiscContext($event, {...func, type: 'triggerFunction'})"
|
|
>
|
|
<a class="table-name">
|
|
<i class="table-icon mdi mdi-cog-clockwise mdi-18px mr-1" />
|
|
<span v-html="highlightWord(func.name)" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div v-if="filteredFunctions.length && customizations.functions" class="database-misc">
|
|
<details class="accordion">
|
|
<summary
|
|
class="accordion-header misc-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.function}"
|
|
@contextmenu.prevent="showMiscFolderContext($event, 'function')"
|
|
>
|
|
<i class="misc-icon mdi mdi-18px mdi-folder-move mr-1" />
|
|
{{ $tc('word.function', 2) }}
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div>
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="(func, i) of filteredFunctions"
|
|
:key="`${func.name}-${i}`"
|
|
:ref="breadcrumbs.schema === database.name && breadcrumbs.function === func.name ? 'explorebar-selected' : ''"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
|
|
@mousedown.left="selectMisc({schema: database.name, misc: func, type: 'function'})"
|
|
@dblclick="openMiscPermanentTab({schema: database.name, misc: func, type: 'function'})"
|
|
@contextmenu.prevent="showMiscContext($event, {...func, type: 'function'})"
|
|
>
|
|
<a class="table-name">
|
|
<i class="table-icon mdi mdi-arrow-right-bold-box mdi-18px mr-1" />
|
|
<span v-html="highlightWord(func.name)" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
|
|
<div v-if="filteredSchedulers.length && customizations.schedulers" class="database-misc">
|
|
<details class="accordion">
|
|
<summary
|
|
class="accordion-header misc-name"
|
|
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.scheduler}"
|
|
@contextmenu.prevent="showMiscFolderContext($event, 'scheduler')"
|
|
>
|
|
<i class="misc-icon mdi mdi-18px mdi-folder-clock mr-1" />
|
|
{{ $tc('word.scheduler', 2) }}
|
|
</summary>
|
|
<div class="accordion-body">
|
|
<div>
|
|
<ul class="menu menu-nav pt-0">
|
|
<li
|
|
v-for="scheduler of filteredSchedulers"
|
|
:key="scheduler.name"
|
|
:ref="breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name ? 'explorebar-selected' : ''"
|
|
class="menu-item"
|
|
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
|
|
@mousedown.left="selectMisc({schema: database.name, misc: scheduler, type: 'scheduler'})"
|
|
@dblclick="openMiscPermanentTab({schema: database.name, misc: scheduler, type: 'scheduler'})"
|
|
@contextmenu.prevent="showMiscContext($event, {...scheduler, type: 'scheduler'})"
|
|
>
|
|
<a class="table-name">
|
|
<div v-if="checkLoadingStatus(scheduler.name, 'scheduler')" class="icon loading mr-1" />
|
|
<i v-else class="table-icon mdi mdi-calendar-clock mdi-18px mr-1" />
|
|
<span v-html="highlightWord(scheduler.name)" />
|
|
</a>
|
|
<div
|
|
v-if="scheduler.enabled === false"
|
|
class="tooltip tooltip-left disabled-indicator"
|
|
:data-tooltip="$t('word.disabled')"
|
|
>
|
|
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</template>
|
|
|
|
<script>
|
|
import { useSettingsStore } from '@/stores/settings';
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
|
import { formatBytes } from 'common/libs/formatBytes';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
// TODO: expose selectSchema & schemaAccordion
|
|
|
|
export default {
|
|
name: 'WorkspaceExploreBarSchema',
|
|
props: {
|
|
database: Object,
|
|
connection: Object
|
|
},
|
|
emits: [
|
|
'show-schema-context',
|
|
'show-table-context',
|
|
'show-misc-context',
|
|
'show-misc-folder-context'
|
|
],
|
|
setup () {
|
|
const settingsStore = useSettingsStore();
|
|
const workspacesStore = useWorkspacesStore();
|
|
|
|
const { applicationTheme } = storeToRefs(settingsStore);
|
|
|
|
const {
|
|
getLoadedSchemas,
|
|
getWorkspace,
|
|
getSearchTerm,
|
|
changeBreadcrumbs,
|
|
addLoadedSchema,
|
|
newTab,
|
|
refreshSchema
|
|
} = workspacesStore;
|
|
|
|
return {
|
|
applicationTheme,
|
|
getLoadedSchemas,
|
|
getWorkspace,
|
|
getSearchTerm,
|
|
changeBreadcrumbs,
|
|
addLoadedSchema,
|
|
newTab,
|
|
refreshSchema
|
|
};
|
|
},
|
|
data () {
|
|
return {
|
|
isLoading: false
|
|
};
|
|
},
|
|
computed: {
|
|
searchTerm () {
|
|
return this.getSearchTerm(this.connection.uid);
|
|
},
|
|
filteredTables () {
|
|
return this.database.tables.filter(table => table.name.search(this.searchTerm) >= 0);
|
|
},
|
|
filteredTriggers () {
|
|
return this.database.triggers.filter(trigger => trigger.name.search(this.searchTerm) >= 0);
|
|
},
|
|
filteredProcedures () {
|
|
return this.database.procedures.filter(procedure => procedure.name.search(this.searchTerm) >= 0);
|
|
},
|
|
filteredFunctions () {
|
|
return this.database.functions.filter(func => func.name.search(this.searchTerm) >= 0);
|
|
},
|
|
filteredTriggerFunctions () {
|
|
return this.database.triggerFunctions
|
|
? this.database.triggerFunctions.filter(func => func.name.search(this.searchTerm) >= 0)
|
|
: [];
|
|
},
|
|
filteredSchedulers () {
|
|
return this.database.schedulers.filter(scheduler => scheduler.name.search(this.searchTerm) >= 0);
|
|
},
|
|
workspace () {
|
|
return this.getWorkspace(this.connection.uid);
|
|
},
|
|
breadcrumbs () {
|
|
return this.workspace.breadcrumbs;
|
|
},
|
|
customizations () {
|
|
return this.workspace.customizations;
|
|
},
|
|
loadedSchemas () {
|
|
return this.getLoadedSchemas(this.connection.uid);
|
|
},
|
|
maxSize () {
|
|
return this.database.tables.reduce((acc, curr) => {
|
|
if (curr.size > acc) acc = curr.size;
|
|
return acc;
|
|
}, 0);
|
|
},
|
|
totalSize () {
|
|
return this.database.tables.reduce((acc, curr) => acc + curr.size, 0);
|
|
}
|
|
},
|
|
watch: {
|
|
breadcrumbs (newVal, oldVal) {
|
|
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
|
setTimeout(() => {
|
|
const element = this.$refs['explorebar-selected'] ? this.$refs['explorebar-selected'][0] : null;
|
|
if (element) {
|
|
const rect = element.getBoundingClientRect();
|
|
const elemTop = rect.top;
|
|
const elemBottom = rect.bottom;
|
|
const isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
|
|
|
|
if (!isVisible) {
|
|
element.setAttribute('tabindex', '-1');
|
|
element.focus();
|
|
element.removeAttribute('tabindex');
|
|
}
|
|
}
|
|
}, 50);
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
formatBytes,
|
|
async selectSchema (schema) {
|
|
if (!this.loadedSchemas.has(schema) && !this.isLoading) {
|
|
this.isLoading = true;
|
|
await this.refreshSchema({ uid: this.connection.uid, schema });
|
|
this.addLoadedSchema(schema);
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
selectTable ({ schema, table }) {
|
|
this.newTab({
|
|
uid: this.connection.uid,
|
|
elementName: table.name,
|
|
schema: this.database.name,
|
|
type: 'temp-data',
|
|
elementType: table.type
|
|
});
|
|
|
|
this.setBreadcrumbs({ schema, [table.type]: table.name });
|
|
},
|
|
selectMisc ({ schema, misc, type }) {
|
|
const miscTempTabs = {
|
|
trigger: 'temp-trigger-props',
|
|
triggerFunction: 'temp-trigger-function-props',
|
|
function: 'temp-function-props',
|
|
routine: 'temp-routine-props',
|
|
scheduler: 'temp-scheduler-props'
|
|
};
|
|
|
|
this.newTab({
|
|
uid: this.connection.uid,
|
|
elementName: misc.name,
|
|
schema: this.database.name,
|
|
type: miscTempTabs[type],
|
|
elementType: type
|
|
});
|
|
|
|
this.setBreadcrumbs({ schema, [type]: misc.name });
|
|
},
|
|
openDataTab ({ schema, table }) {
|
|
this.newTab({ uid: this.connection.uid, elementName: table.name, schema: this.database.name, type: 'data', elementType: table.type });
|
|
this.setBreadcrumbs({ schema, [table.type]: table.name });
|
|
},
|
|
openMiscPermanentTab ({ schema, misc, type }) {
|
|
const miscTabs = {
|
|
trigger: 'trigger-props',
|
|
triggerFunction: 'trigger-function-props',
|
|
function: 'function-props',
|
|
routine: 'routine-props',
|
|
scheduler: 'scheduler-props'
|
|
};
|
|
|
|
this.newTab({
|
|
uid: this.connection.uid,
|
|
elementName: misc.name,
|
|
schema: this.database.name,
|
|
type: miscTabs[type],
|
|
elementType: type
|
|
});
|
|
this.setBreadcrumbs({ schema, [type]: misc.name });
|
|
},
|
|
showSchemaContext (event, schema) {
|
|
this.$emit('show-schema-context', { event, schema });
|
|
},
|
|
showTableContext (event, table) {
|
|
this.$emit('show-table-context', { event, schema: this.database.name, table });
|
|
},
|
|
showMiscContext (event, misc) {
|
|
this.$emit('show-misc-context', { event, schema: this.database.name, misc });
|
|
},
|
|
showMiscFolderContext (event, type) {
|
|
this.$emit('show-misc-folder-context', { event, schema: this.database.name, type });
|
|
},
|
|
piePercentage (val) {
|
|
const perc = val / this.maxSize * 100;
|
|
if (this.applicationTheme === 'dark')
|
|
return { background: `conic-gradient(lime ${perc}%, white 0)` };
|
|
else
|
|
return { background: `conic-gradient(teal ${perc}%, silver 0)` };
|
|
},
|
|
setBreadcrumbs (payload) {
|
|
if (this.breadcrumbs.schema === payload.schema && this.breadcrumbs.table === payload.table) return;
|
|
this.changeBreadcrumbs(payload);
|
|
},
|
|
highlightWord (string) {
|
|
string = string.replaceAll('<', '<').replaceAll('>', '>');
|
|
|
|
if (this.searchTerm) {
|
|
const regexp = new RegExp(`(${this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
|
return string.replace(regexp, '<span class="text-primary">$1</span>');
|
|
}
|
|
else
|
|
return string;
|
|
},
|
|
checkLoadingStatus (name, type) {
|
|
return this.workspace.loadingElements.some(el =>
|
|
el.name === name &&
|
|
el.type === type &&
|
|
el.schema === this.database.name);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.workspace-explorebar-database {
|
|
.selected {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.database-name {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
|
|
.schema-size {
|
|
visibility: hidden;
|
|
width: 22.5px;
|
|
}
|
|
}
|
|
|
|
.database-name,
|
|
.misc-name,
|
|
a.table-name {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.1rem 1rem 0.1rem 0.1rem;
|
|
cursor: pointer;
|
|
font-size: 0.7rem;
|
|
|
|
> span {
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
display: block;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.database-icon,
|
|
.table-icon,
|
|
.misc-icon {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.loading {
|
|
height: 18px;
|
|
width: 18px;
|
|
|
|
&::after {
|
|
height: 0.6rem;
|
|
width: 0.6rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
.misc-name {
|
|
line-height: 1;
|
|
padding: 0.1rem 1rem 0.1rem 0.1rem;
|
|
position: relative;
|
|
}
|
|
|
|
.database-name,
|
|
.misc-name {
|
|
&:hover {
|
|
border-radius: $border-radius;
|
|
|
|
.schema-size {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-item {
|
|
line-height: 1.2;
|
|
position: relative;
|
|
|
|
&:hover,
|
|
&.selected {
|
|
border-radius: $border-radius;
|
|
}
|
|
}
|
|
|
|
.database-tables {
|
|
margin-left: 1.2rem;
|
|
}
|
|
|
|
.database-misc {
|
|
margin-left: 1.6rem;
|
|
|
|
.accordion[open] .accordion-header > .misc-icon:first-child::before {
|
|
content: "\F0770";
|
|
}
|
|
|
|
.accordion-body {
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
}
|
|
|
|
.schema-size,
|
|
.table-size,
|
|
.disabled-indicator {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
opacity: 0.2;
|
|
transition: opacity 0.2s;
|
|
|
|
&:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
&::after {
|
|
font-weight: 400;
|
|
font-size: 0.5rem;
|
|
}
|
|
|
|
.pie {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
</style>
|