feat(UI): empty workspace view

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;

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>

src/renderer/components/WorkspacePropsTab.vue

@@ -444,7 +444,6 @@ 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,
@@ -452,8 +451,11 @@ export default {
                      elementNewName: this.localOptions.name,
                      elementType: 'table'
                   });
+
                   this.changeBreadcrumbs({ schema: this.schema, table: this.localOptions.name });
                }
+
+               this.getFieldsData();
             }
             else
                this.addNotification({ status: 'error', message: response });

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;
 

src/renderer/components/WorkspacePropsTabView.vue

@@ -323,8 +323,6 @@ 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,
@@ -332,8 +330,11 @@ export default {
                      elementNewName: this.localView.name,
                      elementType: 'view'
                   });
+
                   this.changeBreadcrumbs({ schema: this.schema, view: this.localView.name });
                }
+
+               this.getViewData();
             }
             else
                this.addNotification({ status: 'error', message: response });

src/renderer/components/old/TheAppWelcome.vue

@@ -1,37 +0,0 @@
-<template>
-   <div class="columns">
-      <div class="column col-12 empty text-light">
-         <div class="empty-icon">
-            <i class="mdi mdi-48px mdi-emoticon" />
-         </div>
-         <p class="empty-title h5">
-            {{ $t('message.appWelcome') }}
-         </p>
-         <p class="empty-subtitle">
-            {{ $t('message.appFirstStep') }}
-         </p>
-         <div class="empty-action">
-            <button class="btn btn-primary" @click="$emit('new-conn')">
-               {{ $t('message.createConnection') }}
-            </button>
-         </div>
-      </div>
-   </div>
-</template>
-
-<script>
-export default {
-   name: 'TheAppWelcome'
-};
-</script>
-
-<style scoped>
-  .empty {
-    height: 100%;
-    border-radius: 0;
-    background: transparent;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-</style>