mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
refactor: ts and composition api on WorkspaceExplorebar* components
This commit is contained in:
@ -25,7 +25,7 @@
|
||||
<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' : ''"
|
||||
:ref="breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name) ? 'explorebarSelected' : ''"
|
||||
:key="table.name"
|
||||
class="menu-item"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && [breadcrumbs.table, breadcrumbs.view].includes(table.name)}"
|
||||
@ -61,7 +61,7 @@
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'trigger')"
|
||||
>
|
||||
<i class="misc-icon mdi mdi-18px mdi-folder-cog mr-1" />
|
||||
{{ $tc('word.trigger', 2) }}
|
||||
{{ t('word.trigger', 2) }}
|
||||
</summary>
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
@ -69,7 +69,7 @@
|
||||
<li
|
||||
v-for="trigger of filteredTriggers"
|
||||
:key="trigger.name"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name ? 'explorebar-selected' : ''"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name ? 'explorebarSelected' : ''"
|
||||
class="menu-item"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.trigger === trigger.name}"
|
||||
@mousedown.left="selectMisc({schema: database.name, misc: trigger, type: 'trigger'})"
|
||||
@ -84,7 +84,7 @@
|
||||
<div
|
||||
v-if="trigger.enabled === false"
|
||||
class="tooltip tooltip-left disabled-indicator"
|
||||
:data-tooltip="$t('word.disabled')"
|
||||
:data-tooltip="t('word.disabled')"
|
||||
>
|
||||
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
|
||||
</div>
|
||||
@ -100,27 +100,27 @@
|
||||
<summary
|
||||
class="accordion-header misc-name"
|
||||
:class="{'text-bold': breadcrumbs.schema === database.name && breadcrumbs.routine}"
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'procedure')"
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'routine')"
|
||||
>
|
||||
<i class="misc-icon mdi mdi-18px mdi-folder-sync mr-1" />
|
||||
{{ $tc('word.storedRoutine', 2) }}
|
||||
{{ t('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' : ''"
|
||||
v-for="(routine, i) of filteredProcedures"
|
||||
:key="`${routine.name}-${i}`"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.routine === routine.name ? 'explorebarSelected' : ''"
|
||||
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'})"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.routine === routine.name}"
|
||||
@mousedown.left="selectMisc({schema: database.name, misc: routine, type: 'routine'})"
|
||||
@dblclick="openMiscPermanentTab({schema: database.name, misc: routine, type: 'routine'})"
|
||||
@contextmenu.prevent="showMiscContext($event, {...routine, type: 'routine'})"
|
||||
>
|
||||
<a class="table-name">
|
||||
<i class="table-icon mdi mdi-sync-circle mdi-18px mr-1" />
|
||||
<span v-html="highlightWord(procedure.name)" />
|
||||
<span v-html="highlightWord(routine.name)" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
@ -137,7 +137,7 @@
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'triggerFunction')"
|
||||
>
|
||||
<i class="misc-icon mdi mdi-18px mdi-folder-refresh mr-1" />
|
||||
{{ $tc('word.triggerFunction', 2) }}
|
||||
{{ t('word.triggerFunction', 2) }}
|
||||
</summary>
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
@ -145,7 +145,7 @@
|
||||
<li
|
||||
v-for="(func, i) of filteredTriggerFunctions"
|
||||
:key="`${func.name}-${i}`"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name ? 'explorebar-selected' : ''"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name ? 'explorebarSelected' : ''"
|
||||
class="menu-item"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.triggerFunction === func.name}"
|
||||
@mousedown.left="selectMisc({schema: database.name, misc: func, type: 'triggerFunction'})"
|
||||
@ -171,7 +171,7 @@
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'function')"
|
||||
>
|
||||
<i class="misc-icon mdi mdi-18px mdi-folder-move mr-1" />
|
||||
{{ $tc('word.function', 2) }}
|
||||
{{ t('word.function', 2) }}
|
||||
</summary>
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
@ -179,7 +179,7 @@
|
||||
<li
|
||||
v-for="(func, i) of filteredFunctions"
|
||||
:key="`${func.name}-${i}`"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.function === func.name ? 'explorebar-selected' : ''"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.function === func.name ? 'explorebarSelected' : ''"
|
||||
class="menu-item"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.function === func.name}"
|
||||
@mousedown.left="selectMisc({schema: database.name, misc: func, type: 'function'})"
|
||||
@ -205,7 +205,7 @@
|
||||
@contextmenu.prevent="showMiscFolderContext($event, 'scheduler')"
|
||||
>
|
||||
<i class="misc-icon mdi mdi-18px mdi-folder-clock mr-1" />
|
||||
{{ $tc('word.scheduler', 2) }}
|
||||
{{ t('word.scheduler', 2) }}
|
||||
</summary>
|
||||
<div class="accordion-body">
|
||||
<div>
|
||||
@ -213,7 +213,7 @@
|
||||
<li
|
||||
v-for="scheduler of filteredSchedulers"
|
||||
:key="scheduler.name"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name ? 'explorebar-selected' : ''"
|
||||
:ref="breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name ? 'explorebarSelected' : ''"
|
||||
class="menu-item"
|
||||
:class="{'selected': breadcrumbs.schema === database.name && breadcrumbs.scheduler === scheduler.name}"
|
||||
@mousedown.left="selectMisc({schema: database.name, misc: scheduler, type: 'scheduler'})"
|
||||
@ -228,7 +228,7 @@
|
||||
<div
|
||||
v-if="scheduler.enabled === false"
|
||||
class="tooltip tooltip-left disabled-indicator"
|
||||
:data-tooltip="$t('word.disabled')"
|
||||
:data-tooltip="t('word.disabled')"
|
||||
>
|
||||
<i class="table-icon mdi mdi-pause mdi-18px mr-1" />
|
||||
</div>
|
||||
@ -242,228 +242,235 @@
|
||||
</details>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { useWorkspacesStore } from '@/stores/workspaces';
|
||||
import { formatBytes } from 'common/libs/formatBytes';
|
||||
<script setup lang="ts">
|
||||
import { computed, Prop, Ref, ref, watch } from 'vue';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useSettingsStore } from '@/stores/settings';
|
||||
import { Breadcrumb, useWorkspacesStore, WorkspaceStructure } from '@/stores/workspaces';
|
||||
import { formatBytes } from 'common/libs/formatBytes';
|
||||
import { EventInfos, FunctionInfos, RoutineInfos, TableInfos, TriggerFunctionInfos, TriggerInfos } from 'common/interfaces/antares';
|
||||
|
||||
// TODO: expose selectSchema & schemaAccordion
|
||||
const { t } = useI18n();
|
||||
|
||||
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 props = defineProps({
|
||||
database: Object as Prop<WorkspaceStructure>,
|
||||
connection: Object
|
||||
});
|
||||
|
||||
const { applicationTheme } = storeToRefs(settingsStore);
|
||||
const emit = defineEmits([
|
||||
'show-schema-context',
|
||||
'show-table-context',
|
||||
'show-misc-context',
|
||||
'show-misc-folder-context'
|
||||
]);
|
||||
|
||||
const {
|
||||
getLoadedSchemas,
|
||||
getWorkspace,
|
||||
getSearchTerm,
|
||||
changeBreadcrumbs,
|
||||
addLoadedSchema,
|
||||
newTab,
|
||||
refreshSchema
|
||||
} = workspacesStore;
|
||||
const settingsStore = useSettingsStore();
|
||||
const workspacesStore = useWorkspacesStore();
|
||||
|
||||
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);
|
||||
const { applicationTheme } = storeToRefs(settingsStore);
|
||||
|
||||
if (!isVisible) {
|
||||
element.setAttribute('tabindex', '-1');
|
||||
element.focus();
|
||||
element.removeAttribute('tabindex');
|
||||
}
|
||||
}
|
||||
}, 50);
|
||||
const {
|
||||
getLoadedSchemas,
|
||||
getWorkspace,
|
||||
getSearchTerm,
|
||||
changeBreadcrumbs,
|
||||
addLoadedSchema,
|
||||
newTab,
|
||||
refreshSchema
|
||||
} = workspacesStore;
|
||||
|
||||
const schemaAccordion: Ref<HTMLDetailsElement> = ref(null);
|
||||
const explorebarSelected: Ref<HTMLElement[]> = ref(null);
|
||||
const isLoading = ref(false);
|
||||
|
||||
const searchTerm = computed(() => {
|
||||
return getSearchTerm(props.connection.uid);
|
||||
});
|
||||
|
||||
const filteredTables = computed(() => {
|
||||
return props.database.tables.filter(table => table.name.search(searchTerm.value) >= 0);
|
||||
});
|
||||
|
||||
const filteredTriggers = computed(() => {
|
||||
return props.database.triggers.filter(trigger => trigger.name.search(searchTerm.value) >= 0);
|
||||
});
|
||||
|
||||
const filteredProcedures = computed(() => {
|
||||
return props.database.procedures.filter(procedure => procedure.name.search(searchTerm.value) >= 0);
|
||||
});
|
||||
|
||||
const filteredFunctions = computed(() => {
|
||||
return props.database.functions.filter(func => func.name.search(searchTerm.value) >= 0);
|
||||
});
|
||||
|
||||
const filteredTriggerFunctions = computed(() => {
|
||||
return props.database.triggerFunctions
|
||||
? props.database.triggerFunctions.filter(func => func.name.search(searchTerm.value) >= 0)
|
||||
: [];
|
||||
});
|
||||
|
||||
const filteredSchedulers = computed(() => {
|
||||
return props.database.schedulers.filter(scheduler => scheduler.name.search(searchTerm.value) >= 0);
|
||||
});
|
||||
|
||||
const workspace = computed(() => {
|
||||
return getWorkspace(props.connection.uid);
|
||||
});
|
||||
|
||||
const breadcrumbs = computed(() => {
|
||||
return workspace.value.breadcrumbs;
|
||||
});
|
||||
|
||||
const customizations = computed(() => {
|
||||
return workspace.value.customizations;
|
||||
});
|
||||
|
||||
const loadedSchemas = computed(() => {
|
||||
return getLoadedSchemas(props.connection.uid);
|
||||
});
|
||||
|
||||
const maxSize = computed(() => {
|
||||
return props.database.tables.reduce((acc: number, curr) => {
|
||||
if (curr.size && curr.size > acc) acc = curr.size;
|
||||
return acc;
|
||||
}, 0);
|
||||
});
|
||||
|
||||
watch(breadcrumbs, (newVal, oldVal) => {
|
||||
if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
|
||||
setTimeout(() => {
|
||||
const element = explorebarSelected.value ? explorebarSelected.value[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');
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
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
|
||||
});
|
||||
}, 50);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
const selectSchema = async (schema: string) => {
|
||||
if (!loadedSchemas.value.has(schema) && !isLoading.value) {
|
||||
isLoading.value = true;
|
||||
setBreadcrumbs({ schema });
|
||||
await refreshSchema({ uid: props.connection.uid, schema });
|
||||
addLoadedSchema(schema);
|
||||
isLoading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const selectTable = ({ schema, table }: { schema: string; table: TableInfos }) => {
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
elementName: table.name,
|
||||
schema: props.database.name,
|
||||
type: 'temp-data',
|
||||
elementType: table.type
|
||||
});
|
||||
|
||||
setBreadcrumbs({ schema, [table.type]: table.name });
|
||||
};
|
||||
|
||||
const selectMisc = ({ schema, misc, type }: { schema: string; misc: { name: string }; type: 'trigger' | 'triggerFunction' | 'function' | 'routine' | 'scheduler' }) => {
|
||||
const miscTempTabs = {
|
||||
trigger: 'temp-trigger-props',
|
||||
triggerFunction: 'temp-trigger-function-props',
|
||||
function: 'temp-function-props',
|
||||
routine: 'temp-routine-props',
|
||||
scheduler: 'temp-scheduler-props'
|
||||
};
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
elementName: misc.name,
|
||||
schema: props.database.name,
|
||||
type: miscTempTabs[type],
|
||||
elementType: type
|
||||
});
|
||||
|
||||
setBreadcrumbs({ schema, [type]: misc.name });
|
||||
};
|
||||
|
||||
const openDataTab = ({ schema, table }: { schema: string; table: TableInfos }) => {
|
||||
newTab({ uid: props.connection.uid, elementName: table.name, schema: props.database.name, type: 'data', elementType: table.type });
|
||||
setBreadcrumbs({ schema, [table.type]: table.name });
|
||||
};
|
||||
|
||||
const openMiscPermanentTab = ({ schema, misc, type }: { schema: string; misc: { name: string }; type: 'trigger' | 'triggerFunction' | 'function' | 'routine' | 'scheduler' }) => {
|
||||
const miscTabs = {
|
||||
trigger: 'trigger-props',
|
||||
triggerFunction: 'trigger-function-props',
|
||||
function: 'function-props',
|
||||
routine: 'routine-props',
|
||||
scheduler: 'scheduler-props'
|
||||
};
|
||||
|
||||
newTab({
|
||||
uid: props.connection.uid,
|
||||
elementName: misc.name,
|
||||
schema: props.database.name,
|
||||
type: miscTabs[type],
|
||||
elementType: type
|
||||
});
|
||||
setBreadcrumbs({ schema, [type]: misc.name });
|
||||
};
|
||||
|
||||
const showSchemaContext = (event: MouseEvent, schema: string) => {
|
||||
emit('show-schema-context', { event, schema });
|
||||
};
|
||||
|
||||
const showTableContext = (event: MouseEvent, table: TableInfos) => {
|
||||
emit('show-table-context', { event, schema: props.database.name, table });
|
||||
};
|
||||
|
||||
const showMiscContext = (event: MouseEvent, misc: TriggerInfos | TriggerFunctionInfos | RoutineInfos | FunctionInfos | EventInfos) => {
|
||||
emit('show-misc-context', { event, schema: props.database.name, misc });
|
||||
};
|
||||
|
||||
const showMiscFolderContext = (event: MouseEvent, type: string) => {
|
||||
emit('show-misc-folder-context', { event, schema: props.database.name, type });
|
||||
};
|
||||
|
||||
const piePercentage = (val: number) => {
|
||||
const perc = val / maxSize.value * 100;
|
||||
if (applicationTheme.value === 'dark')
|
||||
return { background: `conic-gradient(lime ${perc}%, white 0)` };
|
||||
else
|
||||
return { background: `conic-gradient(teal ${perc}%, silver 0)` };
|
||||
};
|
||||
|
||||
const setBreadcrumbs = (payload: Breadcrumb) => {
|
||||
if (breadcrumbs.value.schema === payload.schema && breadcrumbs.value.table === payload.table) return;
|
||||
changeBreadcrumbs(payload);
|
||||
};
|
||||
|
||||
const highlightWord = (string: string) => {
|
||||
string = string.replaceAll('<', '<').replaceAll('>', '>');
|
||||
|
||||
if (searchTerm.value) {
|
||||
const regexp = new RegExp(`(${searchTerm.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
|
||||
return string.replace(regexp, '<span class="text-primary">$1</span>');
|
||||
}
|
||||
else
|
||||
return string;
|
||||
};
|
||||
|
||||
const checkLoadingStatus = (name: string, type: string) => {
|
||||
return workspace.value.loadingElements.some(el =>
|
||||
el.name === name &&
|
||||
el.type === type &&
|
||||
el.schema === props.database.name);
|
||||
};
|
||||
|
||||
defineExpose({ selectSchema, schemaAccordion });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
Reference in New Issue
Block a user