feat(UI): empty workspace view

antares-sql · Jul 18, 2021 · e1855a2 · e1855a2
1 parent 6b725b1
commit e1855a2
Show file tree

Hide file tree

Showing 10 changed files with 662 additions and 47 deletions.
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
@@ -51,7 +51,6 @@
                   <span>
                      Query #{{ tab.index }}
                      <span
-                        v-if="queryTabs.length > 1"
                         class="btn btn-clear"
                         :title="$t('word.close')"
                         @click.stop="closeTab(tab)"
@@ -230,6 +229,7 @@
             :connection="connection"
             :scheduler="workspace.breadcrumbs.scheduler"
          /> -->
+         <WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
          <template v-for="tab of workspace.tabs">
             <WorkspaceQueryTab
                v-if="tab.type==='query'"
@@ -292,6 +292,7 @@
 import { mapGetters, mapActions } from 'vuex';
 import Draggable from 'vuedraggable';
 import Connection from '@/ipc-api/Connection';
+import WorkspaceEmptyState from '@/components/WorkspaceEmptyState';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
 import WorkspaceQueryTab from '@/components/WorkspaceQueryTab';
@@ -310,6 +311,7 @@ export default {
    name: 'Workspace',
    components: {
       Draggable,
+      WorkspaceEmptyState,
       WorkspaceExploreBar,
       WorkspaceEditConnectionPanel,
       WorkspaceQueryTab,
@@ -413,7 +415,7 @@ export default {
       },
       closeTab (tab, force) {
          this.unsavedTab = null;
-         if (tab.type === 'query' && this.queryTabs.length === 1) return;
+         // if (tab.type === 'query' && this.queryTabs.length === 1) return;
          if (!force && tab.isChanged) {
             this.unsavedTab = tab;
             return;

diff --git a/src/renderer/components/WorkspaceEmptyState.vue b/src/renderer/components/WorkspaceEmptyState.vue
@@ -0,0 +1,45 @@
+<template>
+   <div class="column col-12 empty">
+      <div class="empty-icon">
+         <img :src="require(`@/images/logo-${applicationTheme}.svg`).default" width="200">
+      </div>
+      <!-- <p class="empty-title h5">
+         {{ $t('message.appWelcome') }}
+      </p> -->
+      <p class="h6 empty-subtitle">
+         {{ $t('message.noOpenTabs') }}
+      </p>
+      <div class="empty-action">
+         <button class="btn btn-gray d-flex" @click="$emit('new-tab')">
+            <i class="mdi mdi-24px mdi-tab-plus mr-2" />
+            {{ $t('message.openNewTab') }}
+         </button>
+      </div>
+   </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+export default {
+   name: 'WorkspaceEmptyState',
+   computed: {
+      ...mapGetters({
+         applicationTheme: 'settings/getApplicationTheme'
+      })
+   }
+};
+</script>
+
+<style scoped>
+  .empty {
+    height: 100%;
+    border-radius: 0;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+</style>
diff --git a/src/renderer/components/WorkspacePropsTab.vue b/src/renderer/components/WorkspacePropsTab.vue
@@ -444,16 +444,18 @@ export default {
                await this.refreshStructure(this.connection.uid);
 
                if (oldName !== this.localOptions.name) {
-                  this.setUnsavedChanges(false);
                   this.renameTabs({
                      uid: this.connection.uid,
                      schema: this.schema,
                      elementName: oldName,
                      elementNewName: this.localOptions.name,
                      elementType: 'table'
                   });
+
                   this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
                }
+
+               this.getFieldsData();
             }
             else
                this.addNotification({ status: 'error', message: response });

diff --git a/src/renderer/components/WorkspacePropsTabTrigger.vue b/src/renderer/components/WorkspacePropsTabTrigger.vue
@@ -321,7 +321,6 @@ export default {
                await this.refreshStructure(this.connection.uid);
 
                if (this.originalTrigger.name !== this.localTrigger.name) {
-                  this.setUnsavedChanges(false);
                   const triggerName = this.customizations.triggerTableInName ? `${this.localTrigger.table}.${this.localTrigger.name}` : this.localTrigger.name;
                   const triggerOldName = this.customizations.triggerTableInName ? `${this.originalTrigger.table}.${this.originalTrigger.name}` : this.originalTrigger.name;
 

diff --git a/src/renderer/components/WorkspacePropsTabView.vue b/src/renderer/components/WorkspacePropsTabView.vue
@@ -323,17 +323,18 @@ export default {
                await this.refreshStructure(this.connection.uid);
 
                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 });

diff --git a/src/renderer/components/old/TheAppWelcome.vue b/src/renderer/components/old/TheAppWelcome.vue
diff --git a/src/renderer/i18n/en-US.js b/src/renderer/i18n/en-US.js
@@ -224,7 +224,8 @@ module.exports = {
       dataTabPageSize: 'DATA tab page size',
       enableSsh: 'Enable SSH',
       pageNumber: 'Page number',
-      duplicateTable: 'Duplicate table'
+      duplicateTable: 'Duplicate table',
+      noOpenTabs: 'There are no open tabs, navigate on the left bar or:'
    },
    faker: {
       address: 'Address',