feat(UI): new table settings tabs

This commit is contained in:
Fabio Di Stasio 2021-07-15 19:51:18 +02:00
parent 0c29e0d566
commit 7845e3e501
5 changed files with 86 additions and 20 deletions

View File

@ -86,6 +86,18 @@
/>
</span>
</a>
<a v-else-if="tab.type === 'table-props'" class="tab-link">
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${tab.table}`">
{{ tab.table }}
<span
class="btn btn-clear"
:title="$t('word.close')"
@click.stop="closeTab(tab)"
/>
</span>
</a>
</li>
<li slot="header" class="tab-item dropdown tools-dropdown">
<a
@ -134,12 +146,7 @@
</a>
</li>
</Draggable>
<!-- <WorkspacePropsTab
v-show="selectedTab === 'prop' && workspace.breadcrumbs.table"
:is-selected="selectedTab === 'prop'"
:connection="connection"
:table="workspace.breadcrumbs.table"
/>
<!--
<WorkspacePropsTabView
v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
:is-selected="selectedTab === 'prop'"
@ -193,6 +200,14 @@
:schema="tab.schema"
:element-type="tab.element"
/>
<WorkspacePropsTab
v-else-if="tab.type === 'table-props'"
:key="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
:table="tab.table"
:schema="tab.schema"
/>
</template>
</div>
<WorkspaceEditConnectionPanel v-else :connection="connection" />
@ -212,7 +227,7 @@ import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
import WorkspaceTableTab from '@/components/WorkspaceTableTab';
// import WorkspacePropsTab from '@/components/WorkspacePropsTab';
import WorkspacePropsTab from '@/components/WorkspacePropsTab';
// import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
// import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
// import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
@ -229,7 +244,7 @@ export default {
WorkspaceEditConnectionPanel,
WorkspaceQueryTab,
WorkspaceTableTab,
// WorkspacePropsTab,
WorkspacePropsTab,
// WorkspacePropsTabView,
// WorkspacePropsTabTrigger,
// WorkspacePropsTabRoutine,

View File

@ -3,6 +3,13 @@
:context-event="contextEvent"
@close-context="closeContext"
>
<div
v-if="selectedTable.type === 'table' && workspace.customizations.tableSettings"
class="context-element"
@click="openSettingTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-tune-vertical-variant text-light pr-1" /> {{ $t('word.settings') }}</span>
</div>
<div
v-if="selectedTable.type === 'table'"
class="context-element"
@ -93,6 +100,7 @@ export default {
methods: {
...mapActions({
addNotification: 'notifications/addNotification',
newTab: 'workspaces/newTab',
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
}),
showCreateTableModal () {
@ -113,6 +121,22 @@ export default {
closeContext () {
this.$emit('close-context');
},
openSettingTab () {
this.newTab({
uid: this.selectedWorkspace,
table: this.selectedTable.name,
schema: this.selectedSchema,
type: 'table-props',
element: this.selectedTable.type
});
this.changeBreadcrumbs({
schema: this.selectedSchema,
[this.selectedTable.type]: this.selectedTable.name
});
this.closeContext();
},
async duplicateTable () {
try {
const { status, response } = await Tables.duplicateTable({

View File

@ -1,5 +1,5 @@
<template>
<div class="workspace-query-tab column col-12 columns col-gapless">
<div v-show="isSelected" class="workspace-query-tab column col-12 columns col-gapless">
<div class="workspace-query-runner column col-12">
<div class="workspace-query-runner-footer">
<div class="workspace-query-buttons">
@ -50,6 +50,11 @@
<span>{{ $t('word.options') }}</span>
</button>
</div>
<div class="workspace-query-info">
<div class="d-flex" :title="$t('word.schema')">
<i class="mdi mdi-18px mdi-database mr-1" /><b>{{ schema }}</b>
</div>
</div>
</div>
</div>
<div class="workspace-query-results column col-12 p-relative">
@ -126,11 +131,13 @@ export default {
},
props: {
connection: Object,
table: String
isSelected: Boolean,
table: String,
schema: String
},
data () {
return {
tabUid: 'prop',
tabUid: 'prop', // ???
isLoading: false,
isSaving: false,
isOptionsModal: false,
@ -164,12 +171,6 @@ export default {
defaultEngine () {
return this.getDatabaseVariable(this.connection.uid, 'default_storage_engine').value || '';
},
isSelected () {
return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.table;
},
schema () {
return this.workspace.breadcrumbs.schema;
},
schemaTables () {
const schemaTables = this.workspace.structure
.filter(schema => schema.name === this.schema)
@ -198,9 +199,11 @@ export default {
}
},
isSelected (val) {
if (val && this.lastTable !== this.table) {
this.getFieldsData();
this.lastTable = this.table;
if (val) {
this.changeBreadcrumbs({ schema: this.schema, table: this.table });
if (this.lastTable !== this.table)
this.getFieldsData();
}
},
isChanged (val) {
@ -209,6 +212,7 @@ export default {
}
},
created () {
this.getFieldsData();
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
@ -219,12 +223,14 @@ export default {
addNotification: 'notifications/addNotification',
refreshStructure: 'workspaces/refreshStructure',
setUnsavedChanges: 'workspaces/setUnsavedChanges',
newTab: 'workspaces/newTab',
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
}),
async getFieldsData () {
if (!this.table) return;
this.localFields = [];
this.lastTable = this.table;
this.newFieldsCounter = 0;
this.isLoading = true;
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
@ -435,6 +441,7 @@ export default {
if (oldName !== this.localOptions.name) {
this.setUnsavedChanges(false);
this.newTab({ uid: this.connection.uid, schema: this.schema, table: this.localOptions.name, type: 'table-props' });// TODO: rename function that gets new and old name and change it on all opened tables
this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
}

View File

@ -228,6 +228,9 @@ export default {
},
resultsetIndex () {
this.setLocalResults();
},
isSelected (val) {
if (val) this.refreshScroller();
}
},
updated () {

View File

@ -542,6 +542,23 @@ export default {
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
}
}
else if (type === 'table-props') {
const existentTab = workspaceTabs
? workspaceTabs.tabs.find(tab =>
tab.schema === schema &&
tab.table === table &&
tab.type === type)
: false;
if (existentTab) {
commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
tabUid = existentTab.uid;
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
}
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });