fabio286
/
antares
mirror of https://github.com/Fabio286/antares.git
1
1
Fork 0
Code Issues Releases Wiki Activity

feat: new view setting tabs

This commit is contained in:
Fabio Di Stasio 2021-07-16 18:52:18 +02:00
parent ef21ea7448
commit 003c02b1fb
6 changed files with 120 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
src/renderer/components/Workspace.vue
View File

@ -64,9 +64,9 @@
class="tab-link"
@dblclick="openAsDataTab(tab)"
>
<i class="mdi mdi-18px mr-1" :class="tab.element === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
<span class=" text-italic">{{ tab.table }}</span>
<i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${tab.elementType}`">
<span class=" text-italic">{{ tab.elementName }}</span>
<span
class="btn btn-clear"
:title="$t('word.close')"
@ -76,9 +76,9 @@
</a>
<a v-else-if="tab.type === 'data'" class="tab-link">
<i class="mdi mdi-18px mr-1" :class="tab.element === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${tab.table}`">
{{ tab.table }}
<i class="mdi mdi-18px mr-1" :class="tab.elementType === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
<span :title="`${$t('word.data').toUpperCase()}: ${tab.elementType}`">
{{ tab.elementName }}
<span
class="btn btn-clear"
:title="$t('word.close')"
@ -89,8 +89,20 @@
<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 :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
{{ tab.elementName }}
<span
class="btn btn-clear"
:title="$t('word.close')"
@click.stop="closeTab(tab)"
/>
</span>
</a>
<a v-else-if="tab.type === 'view-props'" class="tab-link">
<i class="mdi mdi-tune-vertical-variant mdi-18px mr-1" />
<span :title="`${$t('word.settings').toUpperCase()}: ${tab.elementType}`">
{{ tab.elementName }}
<span
class="btn btn-clear"
:title="$t('word.close')"
@ -147,12 +159,6 @@
</li>
</Draggable>
<!--
<WorkspacePropsTabView
v-show="selectedTab === 'prop' && workspace.breadcrumbs.view"
:is-selected="selectedTab === 'prop'"
:connection="connection"
:view="workspace.breadcrumbs.view"
/>
<WorkspacePropsTabTrigger
v-show="selectedTab === 'prop' && workspace.breadcrumbs.trigger"
:is-selected="selectedTab === 'prop'"
@ -196,7 +202,7 @@
:key="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
:table="tab.table"
:table="tab.elementName"
:schema="tab.schema"
:element-type="tab.element"
/>
@ -205,7 +211,15 @@
:key="tab.uid"
:connection="connection"
:is-selected="selectedTab === tab.uid"
:table="tab.table"
:table="tab.elementName"
:schema="tab.schema"
/>
<WorkspacePropsTabView
v-else-if="tab.type === 'view-props'"
:key="tab.uid"
:is-selected="selectedTab === tab.uid"
:connection="connection"
:view="tab.elementName"
:schema="tab.schema"
/>
</template>
@ -228,7 +242,7 @@ import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPa
import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
import WorkspaceTableTab from '@/components/WorkspaceTableTab';
import WorkspacePropsTab from '@/components/WorkspacePropsTab';
// import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
import WorkspacePropsTabView from '@/components/WorkspacePropsTabView';
// import WorkspacePropsTabTrigger from '@/components/WorkspacePropsTabTrigger';
// import WorkspacePropsTabRoutine from '@/components/WorkspacePropsTabRoutine';
// import WorkspacePropsTabFunction from '@/components/WorkspacePropsTabFunction';
@ -245,7 +259,7 @@ export default {
WorkspaceQueryTab,
WorkspaceTableTab,
WorkspacePropsTab,
// WorkspacePropsTabView,
WorkspacePropsTabView,
// WorkspacePropsTabTrigger,
// WorkspacePropsTabRoutine,
// WorkspacePropsTabFunction,
@ -349,7 +363,7 @@ export default {
this.newTab({ uid: this.connection.uid, type: 'query' });
},
openAsDataTab (tab) {
this.newTab({ uid: this.connection.uid, schema: tab.schema, table: tab.table, type: 'data', element: tab.element });
this.newTab({ uid: this.connection.uid, schema: tab.schema, elementName: tab.elementName, type: 'data', elementType: tab.elementType });
},
closeTab (tab) {
if (tab.type === 'query' && this.queryTabs.length === 1) return;

5
src/renderer/components/WorkspaceExploreBarSchema.vue
View File

@ -282,11 +282,11 @@ export default {
this.changeBreadcrumbs({ schema, table: null });
},
selectTable ({ schema, table }) {
this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'temp-data', element: table.type });
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 });
},
openDataTab ({ schema, table }) {
this.newTab({ uid: this.connection.uid, table: table.name, schema: this.database.name, type: 'data', element: table.type });
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 });
},
showSchemaContext (event, schema) {
@ -294,7 +294,6 @@ export default {
this.$emit('show-schema-context', { event, schema });
},
showTableContext (event, table) {
// this.setBreadcrumbs({ schema: this.database.name, [table.type]: table.name });
this.$emit('show-table-context', { event, schema: this.database.name, table });
},
showMiscContext (event, misc) {

33
src/renderer/components/WorkspaceExploreBarTableContext.vue
View File

@ -6,7 +6,14 @@
<div
v-if="selectedTable.type === 'table' && workspace.customizations.tableSettings"
class="context-element"
@click="openSettingTab"
@click="openTableSettingTab"
>
<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 === 'view' && workspace.customizations.viewSettings"
class="context-element"
@click="openViewSettingTab"
>
<span class="d-flex"><i class="mdi mdi-18px mdi-tune-vertical-variant text-light pr-1" /> {{ $t('word.settings') }}</span>
</div>
@ -121,18 +128,34 @@ export default {
closeContext () {
this.$emit('close-context');
},
openSettingTab () {
openTableSettingTab () {
this.newTab({
uid: this.selectedWorkspace,
table: this.selectedTable.name,
elementName: this.selectedTable.name,
schema: this.selectedSchema,
type: 'table-props',
element: this.selectedTable.type
elementType: 'table'
});
this.changeBreadcrumbs({
schema: this.selectedSchema,
[this.selectedTable.type]: this.selectedTable.name
table: this.selectedTable.name
});
this.closeContext();
},
openViewSettingTab () {
this.newTab({
uid: this.selectedWorkspace,
elementType: 'table',
elementName: this.selectedTable.name,
schema: this.selectedSchema,
type: 'view-props'
});
this.changeBreadcrumbs({
schema: this.selectedSchema,
view: this.selectedTable.name
});
this.closeContext();

8
src/renderer/components/WorkspacePropsTab.vue
View File

@ -237,12 +237,12 @@ export default {
try {
this.localOptions = JSON.parse(JSON.stringify(this.tableOptions));
}
catch (error) {}
catch (err) {}
const params = {
uid: this.connection.uid,
schema: this.schema,
table: this.workspace.breadcrumbs.table
table: this.table
};
try { // Columns data
@ -426,7 +426,7 @@ export default {
const params = {
uid: this.connection.uid,
schema: this.schema,
table: this.workspace.breadcrumbs.table,
table: this.table,
additions,
changes,
deletions,
@ -454,8 +454,6 @@ export default {
});
this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
}
this.getFieldsData();
}
else
this.addNotification({ status: 'error', message: response });

52
src/renderer/components/WorkspacePropsTabView.vue
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">
@ -186,6 +186,8 @@ export default {
},
props: {
connection: Object,
isSelected: Boolean,
schema: String,
view: String
},
data () {
@ -208,12 +210,6 @@ export default {
workspace () {
return this.getWorkspace(this.connection.uid);
},
isSelected () {
return this.workspace.selected_tab === 'prop' && this.selectedWorkspace === this.workspace.uid && this.view;
},
schema () {
return this.workspace.breadcrumbs.schema;
},
isChanged () {
return JSON.stringify(this.originalView) !== JSON.stringify(this.localView);
},
@ -222,34 +218,44 @@ export default {
}
},
watch: {
async view () {
schema () {
if (this.isSelected) {
await this.getViewData();
this.getViewData();
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
this.lastView = this.view;
}
},
async isSelected (val) {
if (val && this.lastView !== this.view) {
await this.getViewData();
view () {
if (this.isSelected) {
this.getViewData();
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
this.lastView = this.view;
}
},
isSelected (val) {
if (val) {
this.changeBreadcrumbs({ schema: this.schema, view: this.view });
if (this.lastView !== this.view)
this.getViewData();
}
},
isChanged (val) {
if (this.isSelected && this.lastView === this.view && this.view !== null)
this.setUnsavedChanges(val);
}
},
async created () {
await this.getViewData();
this.$refs.queryEditor.editor.session.setValue(this.localView.sql);
window.addEventListener('keydown', this.onKey);
},
mounted () {
window.addEventListener('resize', this.resizeQueryEditor);
},
destroyed () {
window.removeEventListener('resize', this.resizeQueryEditor);
},
created () {
window.addEventListener('keydown', this.onKey);
},
beforeDestroy () {
window.removeEventListener('keydown', this.onKey);
},
@ -258,17 +264,19 @@ export default {
addNotification: 'notifications/addNotification',
refreshStructure: 'workspaces/refreshStructure',
setUnsavedChanges: 'workspaces/setUnsavedChanges',
changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
renameTabs: 'workspaces/renameTabs'
}),
async getViewData () {
if (!this.view) return;
this.isLoading = true;
this.localView = { sql: '' };
this.lastView = this.view;
const params = {
uid: this.connection.uid,
schema: this.schema,
view: this.workspace.breadcrumbs.view
view: this.view
};
try {
@ -310,10 +318,16 @@ export default {
if (oldName !== this.localView.name) {
this.setUnsavedChanges(false);
this.renameTabs({
uid: this.connection.uid,
schema: this.schema,
elementName: oldName,
elementNewName: this.localView.name,
elementType: 'view'
});
this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
}
this.getViewData();
}
else
this.addNotification({ status: 'error', message: response });

40
src/renderer/store/modules/workspaces.store.js
View File

@ -178,7 +178,7 @@ export default {
}
: workspace);
},
NEW_TAB (state, { uid, tab, content, type, autorun, schema, table, element }) {
NEW_TAB (state, { uid, tab, content, type, autorun, schema, elementName, elementType }) {
if (type === 'query')
tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
@ -188,8 +188,8 @@ export default {
selected: false,
type,
schema,
table,
element,
elementName,
elementType,
fields: [],
keyUsage: [],
content: content || '',
@ -218,14 +218,14 @@ export default {
return workspace;
});
},
REPLACE_TAB (state, { uid, tab: tUid, type, schema, table, element }) {
REPLACE_TAB (state, { uid, tab: tUid, type, schema, elementName, elementType }) {
state.workspaces = state.workspaces.map(workspace => {
if (workspace.uid === uid) {
return {
...workspace,
tabs: workspace.tabs.map(tab => {
if (tab.uid === tUid)
return { ...tab, type, schema, table, element };
return { ...tab, type, schema, elementName, elementType };
return tab;
})
@ -241,10 +241,10 @@ export default {
return {
...workspace,
tabs: workspace.tabs.map(tab => {
if (tab[elementType] === elementName && tab.schema === schema) {
if (tab.elementName === elementName && tab.schema === schema) {
return {
...tab,
[elementType]: elementNewName
elementName: elementNewName
};
}
@ -517,7 +517,7 @@ export default {
setSearchTerm ({ commit, getters }, term) {
commit('SET_SEARCH_TERM', { uid: getters.getSelected, term });
},
newTab ({ state, commit }, { uid, content, type, autorun, schema, table, element }) {
newTab ({ state, commit }, { uid, content, type, autorun, schema, elementName, elementType }) {
let tabUid;
const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
@ -525,7 +525,8 @@ export default {
const existentTab = workspaceTabs
? workspaceTabs.tabs.find(tab =>
tab.schema === schema &&
tab.table === table &&
tab.elementName === elementName &&
tab.elementType === elementType &&
['temp-data', 'data'].includes(tab.type))
: false;
@ -536,13 +537,13 @@ export default {
const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type === 'temp-data') : false;
if (tempTabs && tempTabs.length) { // if temp table already opened
for (const tab of tempTabs) {
commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, table, element });
commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, elementName, elementType });
tabUid = tab.uid;
}
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table, element });
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
}
}
}
@ -550,39 +551,40 @@ export default {
const existentTab = workspaceTabs
? workspaceTabs.tabs.find(tab =>
tab.schema === schema &&
tab.table === table &&
tab.elementName === elementName &&
tab.elementType === elementType &&
['temp-data', 'data'].includes(tab.type))
: false;
if (existentTab) {
commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
tabUid = existentTab.uid;
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
}
}
else if (type === 'table-props') {
const existentTab = workspaceTabs
? workspaceTabs.tabs.find(tab =>
tab.schema === schema &&
tab.table === table &&
tab.elementName === elementName &&
tab.elementType === elementType &&
tab.type === type)
: false;
if (existentTab) {
commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, table, element });
commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
tabUid = existentTab.uid;
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
}
}
else {
tabUid = uidGen('T');
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, table });
commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
}
commit('SELECT_TAB', { uid, tab: tabUid });