perf(UI): loading animation on tables and table context menu improvem…

…ents

src/renderer/components/TheSettingBar.vue

@@ -117,7 +117,7 @@ export default {
       },
       getStatusBadge (uid) {
          if (this.getWorkspace(uid)) {
-            const status = this.getWorkspace(uid).connection_status;
+            const status = this.getWorkspace(uid).connectionStatus;
 
             switch (status) {
                case 'connected':

src/renderer/components/Workspace.vue

@@ -1,11 +1,11 @@
 <template>
    <div v-show="isSelected" class="workspace column columns col-gapless">
       <WorkspaceExploreBar
-         v-if="workspace.connection_status === 'connected'"
+         v-if="workspace.connectionStatus === 'connected'"
          :connection="connection"
          :is-selected="isSelected"
       />
-      <div v-if="workspace.connection_status === 'connected'" class="workspace-tabs column columns col-gapless">
+      <div v-if="workspace.connectionStatus === 'connected'" class="workspace-tabs column columns col-gapless">
          <Draggable
             ref="tabWrap"
             v-model="draggableTabs"
@@ -183,12 +183,6 @@
                </a>
             </li>
          </Draggable>
-         <!--<WorkspacePropsTabScheduler
-            v-show="selectedTab === 'prop' && workspace.breadcrumbs.scheduler"
-            :is-selected="selectedTab === 'prop'"
-            :connection="connection"
-            :scheduler="workspace.breadcrumbs.scheduler"
-         /> -->
          <WorkspaceEmptyState v-if="!workspace.tabs.length" @new-tab="addQueryTab" />
          <template v-for="tab of workspace.tabs">
             <WorkspaceQueryTab
@@ -358,7 +352,7 @@ export default {
          return false;
       },
       selectedTab () {
-         return this.workspace.selected_tab;
+         return this.workspace.selectedTab;
       },
       queryTabs () {
          return this.workspace.tabs.filter(tab => tab.type === 'query');

src/renderer/components/WorkspaceExploreBar.vue

@@ -8,7 +8,7 @@
       >
          <div class="workspace-explorebar-header">
             <span class="workspace-explorebar-title">{{ connectionName }}</span>
-            <span v-if="workspace.connection_status === 'connected'" class="workspace-explorebar-tools">
+            <span v-if="workspace.connectionStatus === 'connected'" class="workspace-explorebar-tools">
                <i
                   class="mdi mdi-18px mdi-database-plus c-hand mr-2"
                   :title="$t('message.createNewSchema')"
@@ -28,7 +28,7 @@
             </span>
          </div>
          <div class="workspace-explorebar-search">
-            <div v-if="workspace.connection_status === 'connected'" class="has-icon-right">
+            <div v-if="workspace.connectionStatus === 'connected'" class="has-icon-right">
                <input
                   v-model="searchTerm"
                   class="form-input input-sm"
@@ -113,7 +113,7 @@
          @reload="refresh"
       />
       <TableContext
-         v-if="isTableContext"
+         v-show="isTableContext"
          :selected-schema="selectedSchema"
          :selected-table="selectedTable"
          :context-event="tableContextEvent"

src/renderer/components/WorkspaceExploreBarSchema.vue

@@ -24,7 +24,12 @@
                   @contextmenu.prevent="showTableContext($event, table)"
                >
                   <a class="table-name">
-                     <i class="table-icon mdi mdi-18px mr-1" :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'" />
+                     <div v-if="checkLoadingStatus(table.name, 'table')" class="icon loading mr-1" />
+                     <i
+                        v-else
+                        class="table-icon mdi mdi-18px mr-1"
+                        :class="table.type === 'view' ? 'mdi-table-eye' : 'mdi-table'"
+                     />
                      <span v-html="highlightWord(table.name)" />
                   </a>
                   <div
@@ -251,11 +256,14 @@ export default {
       filteredSchedulers () {
          return this.database.schedulers.filter(scheduler => scheduler.name.search(this.searchTerm) >= 0);
       },
+      workspace () {
+         return this.getWorkspace(this.connection.uid);
+      },
       breadcrumbs () {
-         return this.getWorkspace(this.connection.uid).breadcrumbs;
+         return this.workspace.breadcrumbs;
       },
       customizations () {
-         return this.getWorkspace(this.connection.uid).customizations;
+         return this.workspace.customizations;
       },
       loadedSchemas () {
          return this.getLoadedSchemas(this.connection.uid);
@@ -365,6 +373,12 @@ export default {
          }
          else
             return string;
+      },
+      checkLoadingStatus (name, type) {
+         return this.workspace.loadingElements.some(el =>
+            el.name === name &&
+            el.type === type &&
+            el.schema === this.database.name);
       }
    }
 };

src/renderer/components/WorkspaceExploreBarTableContext.vue

@@ -4,14 +4,14 @@
       @close-context="closeContext"
    >
       <div
-         v-if="selectedTable.type === 'table' && workspace.customizations.tableSettings"
+         v-if="selectedTable.type === 'table' && customizations.tableSettings"
          class="context-element"
          @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"
+         v-if="selectedTable.type === 'view' && customizations.viewSettings"
          class="context-element"
          @click="openViewSettingTab"
       >
@@ -102,13 +102,18 @@ export default {
       }),
       workspace () {
          return this.getWorkspace(this.selectedWorkspace);
+      },
+      customizations () {
+         return this.workspace ? this.workspace.customizations : {};
       }
    },
    methods: {
       ...mapActions({
          addNotification: 'notifications/addNotification',
          newTab: 'workspaces/newTab',
          removeTabs: 'workspaces/removeTabs',
+         addLoadingElement: 'workspaces/addLoadingElement',
+         removeLoadingElement: 'workspaces/removeLoadingElement',
          changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
       }),
       showCreateTableModal () {
@@ -162,44 +167,76 @@ export default {
          this.closeContext();
       },
       async duplicateTable () {
+         this.closeContext();
+
+         this.addLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
+
          try {
             const { status, response } = await Tables.duplicateTable({
                uid: this.selectedWorkspace,
                table: this.selectedTable.name,
                schema: this.selectedSchema
             });
 
-            if (status === 'success') {
-               this.closeContext();
+            if (status === 'success')
                this.$emit('reload');
-            }
             else
                this.addNotification({ status: 'error', message: response });
          }
          catch (err) {
             this.addNotification({ status: 'error', message: err.stack });
          }
+
+         this.removeLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
       },
       async emptyTable () {
+         this.closeContext();
+
+         this.addLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
+
          try {
             const { status, response } = await Tables.truncateTable({
                uid: this.selectedWorkspace,
                table: this.selectedTable.name,
                schema: this.selectedSchema
             });
 
-            if (status === 'success') {
-               this.closeContext();
+            if (status === 'success')
                this.$emit('reload');
-            }
             else
                this.addNotification({ status: 'error', message: response });
          }
          catch (err) {
             this.addNotification({ status: 'error', message: err.stack });
          }
+
+         this.removeLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
       },
       async deleteTable () {
+         this.closeContext();
+
+         this.addLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
+
          try {
             let res;
 
@@ -228,7 +265,6 @@ export default {
                   schema: this.selectedSchema
                });
 
-               this.closeContext();
                this.$emit('reload');
             }
             else
@@ -237,6 +273,12 @@ export default {
          catch (err) {
             this.addNotification({ status: 'error', message: err.stack });
          }
+
+         this.removeLoadingElement({
+            name: this.selectedTable.name,
+            schema: this.selectedSchema,
+            type: 'table'
+         });
       }
    }
 };