feat: new view setting tabs

antares-sql · Jul 16, 2021 · 003c02b · 003c02b
1 parent ef21ea7
commit 003c02b
Show file tree

Hide file tree

Showing 6 changed files with 120 additions and 70 deletions.
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
@@ -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;

diff --git a/src/renderer/components/WorkspaceExploreBarSchema.vue b/src/renderer/components/WorkspaceExploreBarSchema.vue
@@ -282,19 +282,18 @@ 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) {
          this.selectSchema(schema);
          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) {

diff --git a/src/renderer/components/WorkspaceExploreBarTableContext.vue b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@@ -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,
+            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,
-            [this.selectedTable.type]: this.selectedTable.name
+            view: this.selectedTable.name
          });
 
          this.closeContext();

diff --git a/src/renderer/components/WorkspacePropsTab.vue b/src/renderer/components/WorkspacePropsTab.vue
@@ -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 });

diff --git a/src/renderer/components/WorkspacePropsTabView.vue b/src/renderer/components/WorkspacePropsTabView.vue
@@ -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 });