From d297d8faf52697a24dc9afe7b7f8092c7241c67d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 11 Jun 2021 23:09:47 +0800
Subject: [PATCH 1/3] feat: add i18n to ProjectTreeView.vue

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../nc-gui/components/ProjectTreeView.vue     | 32 ++++++++++++-------
 packages/nc-gui/static/lang/en.json           | 11 ++++++-
 packages/nc-gui/static/lang/ja.json           | 11 ++++++-
 packages/nc-gui/static/lang/zh.json           | 11 ++++++-
 4 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 88b15b691e..e0435f6b6f 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -325,8 +325,8 @@
 
             <v-list-item>
               <v-list-item-title>
-
-                <span class="body-2 grey--text">Settings</span>
+                <!-- Settings -->
+                <span class="body-2 grey--text">{{ $t('treeview.settings') }}</span>
                 <v-tooltip top>
 
                   <template v-slot:activator="{on}">
@@ -336,7 +336,8 @@
                             icon-class="ml-2" small>mdi-shield-lock-outline
                     </x-icon>
                   </template>
-                  <span class="caption">Only visible to Creator</span>
+                  <!-- Only visible to Creator -->
+                  <span class="caption">{{ $t('treeview.settings.tooltip') }}</span>
                 </v-tooltip>
               </v-list-item-title>
             </v-list-item>
@@ -350,12 +351,14 @@
                     <v-list-item-icon>
                       <v-icon x-small> mdi-storefront-outline</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular caption">App Store</span>
+                    <!-- App Store -->
+                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.app_store') }}</span>
                     </v-list-item-title>
 
                   </v-list-item>
                 </template>
-                App Store
+                <!-- App Store -->
+                {{ $t('treeview.app_store') }}
               </v-tooltip>
 
               <v-tooltip bottom>
@@ -364,11 +367,13 @@
                     <v-list-item-icon>
                       <v-icon x-small> mdi-account-group</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular caption">Team & Auth</span></v-list-item-title>
+                    <!-- Team & Auth -->
+                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.team_n_auth') }}</span></v-list-item-title>
 
                   </v-list-item>
                 </template>
-                Roles & Users Management
+                <!-- Roles & Users Management -->
+                {{ $t('treeview.team_n_auth.tooltip') }}
               </v-tooltip>
               <v-tooltip bottom>
                 <template v-slot:activator="{on}">
@@ -377,12 +382,14 @@
                     <v-list-item-icon>
                       <v-icon x-small>mdi-table-multiple</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular caption">Project Metadata</span>
+                    <!-- Project Metadata -->
+                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.project_metadata') }}</span>
                     </v-list-item-title>
                   </v-list-item>
 
                 </template>
-                Meta Management
+                <!-- Meta Management -->
+                {{ $t('treeview.project_metadata.tooltip') }}
               </v-tooltip>
             </template>
           </v-list>
@@ -442,7 +449,8 @@
 
           <v-list dense>
             <v-list-item>
-              <span class="body-2 grey--text">Preview as</span>
+              <!-- Preview as -->
+              <span class="body-2 grey--text">{{ $t('treeview.preview_as') }}</span>
               <v-icon small class="ml-1">mdi-drama-masks</v-icon>
               <!--                <v-icon small>mdi-menu-down</v-icon>-->
             </v-list-item>
@@ -471,7 +479,8 @@
                 <!--                <v-divider></v-divider>-->
                 <v-list-item @click="setPreviewUSer(null)">
                   <v-icon small class="mr-1">mdi-close</v-icon>
-                  <span class="caption">Reset Preview</span>
+                  <!-- Reset Preview -->
+                  <span class="caption">{{ $t('treeview.reset_review') }}</span>
                 </v-list-item>
               </template>
             </v-list>
@@ -1651,6 +1660,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *
diff --git a/packages/nc-gui/static/lang/en.json b/packages/nc-gui/static/lang/en.json
index 4c30f449a3..d711b7c42e 100644
--- a/packages/nc-gui/static/lang/en.json
+++ b/packages/nc-gui/static/lang/en.json
@@ -78,5 +78,14 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco"
+  "signin.head.meta.content": "Log In To Noco",
+  "treeview.settings": "Settings",
+  "treeview.settings.tooltip": "Only visible to Creator",
+  "treeview.app_store": "App Store",
+  "treeview.team_n_auth": "Team & Auth",
+  "treeview.team_n_auth.tooltip": "Roles & Users Management",
+  "treeview.project_metadata": "Project Metadata",
+  "treeview.project_metadata.tooltip": "Meta Management",
+  "treeview.preview_as": "Preview as",
+  "treeview.reset_review": "Reset Preview"
 }
diff --git a/packages/nc-gui/static/lang/ja.json b/packages/nc-gui/static/lang/ja.json
index 6dad981aa9..60ef6ab5ae 100644
--- a/packages/nc-gui/static/lang/ja.json
+++ b/packages/nc-gui/static/lang/ja.json
@@ -78,5 +78,14 @@
   "signin.head.title": "Log In | Noco",
   "signin.head.meta.hid": "Log In To Noco",
   "signin.head.meta.name": "Log In To Noco",
-  "signin.head.meta.content": "Log In To Noco"
+  "signin.head.meta.content": "Log In To Noco",
+  "treeview.settings": "Settings",
+  "treeview.settings.tooltip": "Only visible to Creator",
+  "treeview.app_store": "App Store",
+  "treeview.team_n_auth": "Team & Auth",
+  "treeview.team_n_auth.tooltip": "Roles & Users Management",
+  "treeview.project_metadata": "Project Metadata",
+  "treeview.project_metadata.tooltip": "Meta Management",
+  "treeview.preview_as": "Preview as",
+  "treeview.reset_review": "Reset Preview"
 }
diff --git a/packages/nc-gui/static/lang/zh.json b/packages/nc-gui/static/lang/zh.json
index 7270e19655..5edf545cbb 100644
--- a/packages/nc-gui/static/lang/zh.json
+++ b/packages/nc-gui/static/lang/zh.json
@@ -78,6 +78,15 @@
     "signin.head.title": "Log In | Noco",
     "signin.head.meta.hid": "Log In To Noco",
     "signin.head.meta.name": "Log In To Noco",
-    "signin.head.meta.content": "Log In To Noco"
+    "signin.head.meta.content": "Log In To Noco",
+    "treeview.settings": "Settings",
+    "treeview.settings.tooltip": "Only visible to Creator",
+    "treeview.app_store": "App Store",
+    "treeview.team_n_auth": "Team & Auth",
+    "treeview.team_n_auth.tooltip": "Roles & Users Management",
+    "treeview.project_metadata": "Project Metadata",
+    "treeview.project_metadata.tooltip": "Meta Management",
+    "treeview.preview_as": "Preview as",
+    "treeview.reset_review": "Reset Preview"
   }
   
\ No newline at end of file

From 6ac90e40c3b537720dd47d0b5960382c9c2a9442 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 11 Jun 2021 23:43:44 +0800
Subject: [PATCH 2/3] feat: add i18n to spreadsheetNAvDrawer.vue

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../components/spreadsheetNavDrawer.vue       | 111 +++++++++++++-----
 packages/nc-gui/static/lang/en.json           |  27 ++++-
 packages/nc-gui/static/lang/ja.json           |  27 ++++-
 packages/nc-gui/static/lang/zh.json           |  27 ++++-
 4 files changed, 162 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index 636a6151c8..8592f29cff 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -13,7 +13,8 @@
 
 
             <v-list-item dense>
-              <span class="body-2 grey--text">Views</span>
+              <!-- Views -->
+              <span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span>
             </v-list-item>
             <v-list-item-group
               v-model="selectedViewIdLocal"
@@ -52,22 +53,25 @@
                 </v-list-item-title>
                 <v-spacer></v-spacer>
                 <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
+                  <!-- Copy view -->
                   <x-icon v-if="view.type === 'vtable' && !view.edit"
-                          tooltip="Copy view"
+                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.copy')"
                           x-small color="primary"
                           @click.stop="copyView(view,i)"
                           iconClass="view-icon">
                     mdi-content-copy
                   </x-icon>
+                  <!-- Rename view -->
                   <x-icon v-if="view.type === 'vtable' && !view.edit"
-                          tooltip="Rename view"
+                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.rename')"
                           x-small color="primary"
                           @click.stop="showRenameTextBox(view,i)"
                           iconClass="view-icon">
                     mdi-pencil
                   </x-icon>
+                  <!-- Delete view" -->
                   <x-icon v-if="view.type === 'vtable'"
-                          tooltip="Delete view"
+                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.delete')"
                           small color="error" @click.stop="deleteView(view)"
                           iconClass="view-icon">
                     mdi-delete-outline
@@ -88,7 +92,10 @@
                   'advanced-border' : overShieldIcon
                 }">
               <v-list-item dense>
-                <span class="body-2 grey--text" @dblclick="enableDummyFeat = true">Create a View</span>
+                <!-- Create a View -->
+                <span class="body-2 grey--text" @dblclick="enableDummyFeat = true">
+                  {{ $t('nav_drawer.virtual_views.title')}}
+                </span>
                 <v-tooltip top>
 
                   <template v-slot:activator="{on}">
@@ -98,7 +105,10 @@
                             icon-class="ml-2" small>mdi-shield-lock-outline
                     </x-icon>
                   </template>
-                  <span class="caption">Only visible to Creator</span>
+                  <!-- Only visible to Creator -->
+                  <span class="caption">
+                    {{ $t('nav_drawer.virtual_views.caption')}}
+                  </span>
                 </v-tooltip>
               </v-list-item>
               <v-tooltip bottom>
@@ -108,13 +118,17 @@
                     <v-list-item-icon class="mr-n1">
                       <v-icon color="blue" x-small>mdi-grid-large</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">Grid</span></v-list-item-title>
+                    <v-list-item-title><span class="font-weight-regular">
+                      <!-- Grid -->
+                      {{ $t('nav_drawer.virtual_views.grid')}}
+                      </span></v-list-item-title>
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
 
                   </v-list-item>
                 </template>
-                Add Grid View
+                <!-- Add Grid View -->
+                {{ $t('nav_drawer.virtual_views.grid.create')}}
               </v-tooltip>
               <v-tooltip bottom>
                 <template v-slot:activator="{on}">
@@ -123,13 +137,18 @@
                     <v-list-item-icon class="mr-n1">
                       <v-icon color="orange" x-small>mdi-camera-image</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">Gallery</span></v-list-item-title>
+                    <v-list-item-title><span class="font-weight-regular">
+                      <!-- Gallery -->
+                      
+                {{ $t('nav_drawer.virtual_views.gallery')}}
+                      </span></v-list-item-title>
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
                   </v-list-item>
                 </template>
-                Add Gallery View
+                <!-- Add Gallery View -->
+                {{ $t('nav_drawer.virtual_views.gallery.create')}}
               </v-tooltip>
 
               <v-tooltip bottom>
@@ -139,14 +158,18 @@
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small>mdi-calendar</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">Calendar</span></v-list-item-title>
+                    <v-list-item-title><span class="font-weight-regular">
+                      <!-- Calendar -->
+                      {{ $t('nav_drawer.virtual_views.calendar')}}
+                      </span></v-list-item-title>
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
 
                   </v-list-item>
                 </template>
-                Add Calendar View
+                <!-- Add Calendar View -->
+                {{ $t('nav_drawer.virtual_views.calendar.create')}}
               </v-tooltip>
               <v-tooltip bottom>
                 <template v-slot:activator="{on}">
@@ -155,14 +178,18 @@
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small>mdi-tablet-dashboard</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">Kanban</span></v-list-item-title>
+                    <v-list-item-title><span class="font-weight-regular">
+                      <!-- Kanban -->
+                      {{ $t('nav_drawer.virtual_views.kanban')}}
+                      </span></v-list-item-title>
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
 
                   </v-list-item>
                 </template>
-                Add Kanban View
+                <!-- Add Kanban View -->
+                {{ $t('nav_drawer.virtual_views.kanban.create')}}
               </v-tooltip>
               <v-tooltip bottom>
                 <template v-slot:activator="{on}">
@@ -171,14 +198,19 @@
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small class="mt-n1">mdi-form-select</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">Form</span></v-list-item-title>
+                    <v-list-item-title><span class="font-weight-regular">
+                      <!-- Form -->
+
+                      {{ $t('nav_drawer.virtual_views.form')}}
+                      </span></v-list-item-title>
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
 
                   </v-list-item>
                 </template>
-                Add Form View
+                <!-- Add Form View -->
+                {{ $t('nav_drawer.virtual_views.form.create')}}
               </v-tooltip>
             </v-list>
           </template>
@@ -218,7 +250,10 @@
                           icon-class="ml-2" small>mdi-shield-lock-outline
                   </x-icon>
                 </template>
-                <span class="caption">Only visible to Creator</span>
+                <span class="caption">
+                  <!-- Only visible to Creator -->
+                  {{$t('nav_drawer.virtual_views.caption')}}
+                  </span>
               </v-tooltip>
             </v-list-item>
             <!--            <v-tooltip bottom>-->
@@ -231,7 +266,10 @@
               @click="genShareLink"
             >
               <v-icon x-small class="mr-2">mdi-open-in-new</v-icon>
-              <span class="caption"> Share View</span>
+              <span class="caption"> 
+                <!-- Share View -->
+                {{ $t('nav_drawer.advanced.title1') }}
+              </span>
               <v-spacer></v-spacer>
               <v-menu offset-y>
                 <template v-slot:activator="{on}">
@@ -240,7 +278,10 @@
                 <v-list dense>
                   <v-list-item dense @click="$emit('showAdditionalFeatOverlay','shared-views')">
                     <v-list-item-title>
-                      <span class="font-weight-regular">Views List</span>
+                      <span class="font-weight-regular">
+                        <!-- Views List -->
+                        {{ $t('nav_drawer.advanced.option1') }}
+                      </span>
                     </v-list-item-title>
                   </v-list-item>
                 </v-list>
@@ -274,10 +315,12 @@
                 <v-list-item v-on="on"
                              @click="copyapiUrlToClipboard">
                   <v-icon x-small class="mr-2">mdi-content-copy</v-icon>
-                  <span class="caption"> Copy API URL</span>
+                  <!-- Copy API URL -->
+                  <span class="caption">{{ $t('nav_drawer.advanced.option1') }}</span>
                 </v-list-item>
               </template>
-              Copy API URL
+              <!-- Copy API URL -->
+              {{ $t('nav_drawer.advanced.option1') }}
             </v-tooltip>
             <template
               v-if="_isUIAllowed('model')">
@@ -313,8 +356,13 @@
     >
       <v-card class="pa-3 backgroundColor">
         <v-container @click.stop>
-          <h3 class="title mb-3">This view is shared via a private link</h3>
-          <p class="grey&#45;&#45;text body-2">People with private link can only see cells visible in this view</p>
+          <h3 class="title mb-3">
+            <!-- This view is shared via a private link -->
+            {{ $t('nav_drawer.share_view.title')}}
+          </h3>
+          <p class="grey&#45;&#45;text body-2">
+            <!-- People with private link can only see cells visible in this view -->
+          </p>
           <div style="border-radius: 4px"
                class="share-link-box body-2  pa-2 d-flex align-center">
             {{ shareLink.url }}
@@ -332,8 +380,14 @@
 
           <v-switch dense v-model="passwordProtect" @change="onPasswordProtectChange">
             <template v-slot:label>
-              <span class="caption" v-show="!passwordProtect">Restrict access with a password</span>
-              <span class="caption" v-show="passwordProtect">Access is password restricted</span>
+              <!-- Restrict access with a password -->
+              <span class="caption" v-show="!passwordProtect">
+                {{ $t('nav_drawer.share_view.toggle.option1')}}
+              </span>
+              <!-- Access is password restricted -->
+              <span class="caption" v-show="passwordProtect">
+                {{ $t('nav_drawer.share_view.toggle.option2')}}
+              </span>
             </template>
           </v-switch>
 
@@ -343,7 +397,7 @@
               class="password-field mr-2 caption"
               style="max-width: 230px"
               :type="showShareLinkPassword ?  'text' : 'password'"
-              hint="Enter the password"
+              v-bind:hint="$t('nav_drawer.share_view.password.caption')"
               persistent-hint
               dense
               v-model="shareLink.password"
@@ -356,7 +410,10 @@
               </template>
 
             </v-text-field>
-            <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">Save password</v-btn>
+            <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">
+              <!-- Save password -->
+                {{ $t('nav_drawer.share_view.password.button')}}
+            </v-btn>
           </div>
         </v-container>
 
diff --git a/packages/nc-gui/static/lang/en.json b/packages/nc-gui/static/lang/en.json
index d711b7c42e..27e41ac0d6 100644
--- a/packages/nc-gui/static/lang/en.json
+++ b/packages/nc-gui/static/lang/en.json
@@ -87,5 +87,30 @@
   "treeview.project_metadata": "Project Metadata",
   "treeview.project_metadata.tooltip": "Meta Management",
   "treeview.preview_as": "Preview as",
-  "treeview.reset_review": "Reset Preview"
+  "treeview.reset_review": "Reset Preview",
+  "nav_drawer.title": "Views",
+  "nav_drawer.virtual_views.action.copy": "Copy view",
+  "nav_drawer.virtual_views.action.rename": "Rename view",
+  "nav_drawer.virtual_views.action.delete": "Delete view",
+  "nav_drawer.virtual_views.title": "Create a View",
+  "nav_drawer.virtual_views.caption": "Only visible to Creator",
+  "nav_drawer.virtual_views.grid": "Grid",
+  "nav_drawer.virtual_views.grid.create": "Add Grid View",
+  "nav_drawer.virtual_views.gallery": "Gallery",
+  "nav_drawer.virtual_views.gallery.create": "Add Gallery View",
+  "nav_drawer.virtual_views.calendar": "Calendar",
+  "nav_drawer.virtual_views.calendar.create": "Add Calendar View",
+  "nav_drawer.virtual_views.kanban": "Kanban",
+  "nav_drawer.virtual_views.kanban.create": "Add Kanban View",
+  "nav_drawer.virtual_views.form": "Form",
+  "nav_drawer.virtual_views.form.create": "Add Form View",
+  "nav_drawer.advanced.title1": "Share View",
+  "nav_drawer.advanced.option1": "Views List",
+  "nav_drawer.advanced.title2": "Copy API URL",
+  "nav_drawer.share_view.title": "This view is shared via a private link",
+  "nav_drawer.share_view.body": "People with private link can only see cells visible in this view",
+  "nav_drawer.share_view.toggle.option1": "Restrict access with a password",
+  "nav_drawer.share_view.toggle.option2": "Access is password restricted",
+  "nav_drawer.share_view.password.caption": "Enter the password",
+  "nav_drawer.share_view.password.button": "Save password"
 }
diff --git a/packages/nc-gui/static/lang/ja.json b/packages/nc-gui/static/lang/ja.json
index 60ef6ab5ae..4795bfee30 100644
--- a/packages/nc-gui/static/lang/ja.json
+++ b/packages/nc-gui/static/lang/ja.json
@@ -87,5 +87,30 @@
   "treeview.project_metadata": "Project Metadata",
   "treeview.project_metadata.tooltip": "Meta Management",
   "treeview.preview_as": "Preview as",
-  "treeview.reset_review": "Reset Preview"
+  "treeview.reset_review": "Reset Preview",
+  "nav_drawer.title": "Views",
+  "nav_drawer.virtual_views.action.copy": "Copy view",
+  "nav_drawer.virtual_views.action.rename": "Rename view",
+  "nav_drawer.virtual_views.action.delete": "Delete view",
+  "nav_drawer.virtual_views.title": "Create a View",
+  "nav_drawer.virtual_views.caption": "Only visible to Creator",
+  "nav_drawer.virtual_views.grid": "Grid",
+  "nav_drawer.virtual_views.grid.create": "Add Grid View",
+  "nav_drawer.virtual_views.gallery": "Gallery",
+  "nav_drawer.virtual_views.gallery.create": "Add Gallery View",
+  "nav_drawer.virtual_views.calendar": "Calendar",
+  "nav_drawer.virtual_views.calendar.create": "Add Calendar View",
+  "nav_drawer.virtual_views.kanban": "Kanban",
+  "nav_drawer.virtual_views.kanban.create": "Add Kanban View",
+  "nav_drawer.virtual_views.form": "Form",
+  "nav_drawer.virtual_views.form.create": "Add Form View",
+  "nav_drawer.advanced.title1": "Share View",
+  "nav_drawer.advanced.option1": "Views List",
+  "nav_drawer.advanced.title2": "Copy API URL",
+  "nav_drawer.share_view.title": "This view is shared via a private link",
+  "nav_drawer.share_view.body": "People with private link can only see cells visible in this view",
+  "nav_drawer.share_view.toggle.option1": "Restrict access with a password",
+  "nav_drawer.share_view.toggle.option2": "Access is password restricted",
+  "nav_drawer.share_view.password.caption": "Enter the password",
+  "nav_drawer.share_view.password.button": "Save password"
 }
diff --git a/packages/nc-gui/static/lang/zh.json b/packages/nc-gui/static/lang/zh.json
index 5edf545cbb..d50f2768fa 100644
--- a/packages/nc-gui/static/lang/zh.json
+++ b/packages/nc-gui/static/lang/zh.json
@@ -87,6 +87,31 @@
     "treeview.project_metadata": "Project Metadata",
     "treeview.project_metadata.tooltip": "Meta Management",
     "treeview.preview_as": "Preview as",
-    "treeview.reset_review": "Reset Preview"
+    "treeview.reset_review": "Reset Preview",
+    "nav_drawer.title": "Views",
+    "nav_drawer.virtual_views.action.copy": "Copy view",
+    "nav_drawer.virtual_views.action.rename": "Rename view",
+    "nav_drawer.virtual_views.action.delete": "Delete view",
+    "nav_drawer.virtual_views.title": "Create a View",
+    "nav_drawer.virtual_views.caption": "Only visible to Creator",
+    "nav_drawer.virtual_views.grid": "Grid",
+    "nav_drawer.virtual_views.grid.create": "Add Grid View",
+    "nav_drawer.virtual_views.gallery": "Gallery",
+    "nav_drawer.virtual_views.gallery.create": "Add Gallery View",
+    "nav_drawer.virtual_views.calendar": "Calendar",
+    "nav_drawer.virtual_views.calendar.create": "Add Calendar View",
+    "nav_drawer.virtual_views.kanban": "Kanban",
+    "nav_drawer.virtual_views.kanban.create": "Add Kanban View",
+    "nav_drawer.virtual_views.form": "Form",
+    "nav_drawer.virtual_views.form.create": "Add Form View",
+    "nav_drawer.advanced.title1": "Share View",
+    "nav_drawer.advanced.option1": "Views List",
+    "nav_drawer.advanced.title2": "Copy API URL",
+    "nav_drawer.share_view.title": "This view is shared via a private link",
+    "nav_drawer.share_view.body": "People with private link can only see cells visible in this view",
+    "nav_drawer.share_view.toggle.option1": "Restrict access with a password",
+    "nav_drawer.share_view.toggle.option2": "Access is password restricted",
+    "nav_drawer.share_view.password.caption": "Enter the password",
+    "nav_drawer.share_view.password.button": "Save password"
   }
   
\ No newline at end of file

From a3f65a095331595a00cd34106d3c7783ddbffc70 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 11 Jun 2021 23:47:47 +0800
Subject: [PATCH 3/3] chore: format code

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>
---
 .../nc-gui/components/ProjectTreeView.vue     | 1001 +++++++++--------
 .../components/spreadsheetNavDrawer.vue       |  483 ++++----
 2 files changed, 797 insertions(+), 687 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index e0435f6b6f..c26b74c7fc 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    style="height:100%;"
-    @mouseenter="onMiniHoverEnter"
-    @mouseleave="onMiniHoverLeave">
+  <div style="height: 100%" @mouseenter="onMiniHoverEnter" @mouseleave="onMiniHoverLeave">
     <!--    :expand-on-hover="mini"-->
     <v-navigation-drawer
       permanent
@@ -11,12 +8,12 @@
       mini
       class="pl-2"
       ref="drawer"
-      style="min-width:100%;height:100%;"
-      v-model="navigation.shown">
+      style="min-width: 100%; height: 100%"
+      v-model="navigation.shown"
+    >
       <div class="h-100 d-flex flex-column">
-        <div class="flex-grow-1" style="overflow-y: auto;min-height:200px">
+        <div class="flex-grow-1" style="overflow-y: auto; min-height: 200px">
           <v-skeleton-loader class="mt-2 ml-2" v-if="!projects || !projects.length" type="button">
-
           </v-skeleton-loader>
           <!--      <v-btn
                   v-else
@@ -41,13 +38,12 @@
           <!--        class="pa-2"-->
           <!--      ></v-text-field>-->
 
-
-          <v-skeleton-loader v-if="!projects || !projects.length "
-                             type="list-item,list-item-three-line@3,list-item@2,list-item-three-line@3">
-
+          <v-skeleton-loader
+            v-if="!projects || !projects.length"
+            type="list-item,list-item-three-line@3,list-item@2,list-item-three-line@3"
+          >
           </v-skeleton-loader>
 
-
           <v-treeview
             class="mt-5 project-tree"
             v-else-if="isTreeView"
@@ -66,43 +62,45 @@
               <v-tooltip
                 :bottom="!!item.tooltip"
                 :right="!item.tooltip"
-                :disabled="!item.tooltip && false">
+                :disabled="!item.tooltip && false"
+              >
                 <template v-slot:activator="{ on }">
-
                   <div
                     v-if="!hideNode[item._nodes.type]"
                     v-on="item.tooltip || true ? on : ''"
                     @contextmenu.prevent="showCTXMenu($event, item, open, leaf)"
                     @click.stop="addTab({ ...item }, open, leaf)"
                   >
-
-
-                    <template v-if="item._nodes.type ==='db'">
+                    <template v-if="item._nodes.type === 'db'">
                       <v-icon size="16">mdi-database</v-icon>
                       <!--                  <img-->
                       <!--                    class="grey lighten-3"-->
                       <!--                    :width="16" :src="`/db-icons/${dbIcons[item._nodes.dbConnection.client]}`"/>-->
-
                     </template>
                     <template v-else>
                       <v-icon
                         small
-                        style="cursor:auto;"
+                        style="cursor: auto"
                         v-if="open && icons[item._nodes.type].openIcon"
                         :color="icons[item._nodes.type].openColor"
-                      >{{ icons[item._nodes.type].openIcon }}
+                        >{{ icons[item._nodes.type].openIcon }}
                       </v-icon>
                       <v-icon
                         small
-                        style="cursor:auto;"
-                        v-else :color="icons[item._nodes.type].color"
-                      >{{ icons[item._nodes.type].icon }}
+                        style="cursor: auto"
+                        v-else
+                        :color="icons[item._nodes.type].color"
+                        >{{ icons[item._nodes.type].icon }}
                       </v-icon>
                     </template>
-                    <span class="v-treeview-node__label body-2"
-                          :class="[icons[item._nodes.type].class, item.active ? 'font-weight-bold' : '']">{{
-                        item.name
-                      }}</span>
+                    <span
+                      class="v-treeview-node__label body-2"
+                      :class="[
+                        icons[item._nodes.type].class,
+                        item.active ? 'font-weight-bold' : '',
+                      ]"
+                      >{{ item.name }}</span
+                    >
                   </div>
                 </template>
                 <span>{{ item.tooltip || item.name }}</span>
@@ -111,18 +109,18 @@
           </v-treeview>
           <v-container v-else fluid class="px-1">
             <v-list dense expand>
-
               <template v-for="item in listViewArr" v-if="showNode(item)">
                 <!--                   v-if="item.children && item.children.length"-->
                 <v-list-group
                   color="textColor"
                   v-if="isNested(item)"
-                  @click="!(item.children && item.children.length) && addTab({ ...item }, false, false)"
-                  @contextmenu.prevent="showCTXMenu($event, item, true,false)"
+                  @click="
+                    !(item.children && item.children.length) && addTab({ ...item }, false, false)
+                  "
+                  @contextmenu.prevent="showCTXMenu($event, item, true, false)"
                   :key="item.type"
                   :value="isActiveList(item)"
                 >
-
                   <template v-slot:appendIcon>
                     <v-icon small color="grey">mdi-chevron-down</v-icon>
                   </template>
@@ -130,53 +128,56 @@
                     <v-list-item-icon>
                       <v-icon
                         x-small
-                        style="cursor:auto;"
+                        style="cursor: auto"
                         v-if="open && icons[item._nodes.type].openIcon"
                         :color="icons[item._nodes.type].openColor"
-                      >{{ icons[item._nodes.type].openIcon }}
+                        >{{ icons[item._nodes.type].openIcon }}
                       </v-icon>
                       <v-icon
                         x-small
-                        style="cursor:auto;"
-                        v-else :color="icons[item._nodes.type].color"
-                      >{{ icons[item._nodes.type].icon }}
+                        style="cursor: auto"
+                        v-else
+                        :color="icons[item._nodes.type].color"
+                        >{{ icons[item._nodes.type].icon }}
                       </v-icon>
                     </v-list-item-icon>
                     <v-list-item-title>
                       <v-tooltip top v-if="!isNonAdminAccessAllowed(item)">
-
-                        <template v-slot:activator="{on}">
-                          <span v-on="on" class="caption font-weight-regular"> {{ item.name }}</span>
-
+                        <template v-slot:activator="{ on }">
+                          <span v-on="on" class="caption font-weight-regular">
+                            {{ item.name }}</span
+                          >
                         </template>
                         <span class="caption">Only visible to Creator</span>
                       </v-tooltip>
-                      <span v-else class="caption font-weight-regular"
-                            @dblclick="showSqlClient = true"> {{ item.name }}</span>
-
+                      <span
+                        v-else
+                        class="caption font-weight-regular"
+                        @dblclick="showSqlClient = true"
+                      >
+                        {{ item.name }}</span
+                      >
                     </v-list-item-title>
 
                     <v-spacer></v-spacer>
 
-
                     <v-tooltip bottom>
-                      <template v-slot:activator="{on}">
+                      <template v-slot:activator="{ on }">
                         <x-icon
                           v-if="_isUIAllowed('treeview-add-button')"
                           v-on="on"
-                          :color="['x-active' ,'grey']"
+                          :color="['x-active', 'grey']"
                           small
-                          @click.prevent.stop="handleCreateBtnClick(item.type,item)">
+                          @click.prevent.stop="handleCreateBtnClick(item.type, item)"
+                        >
                           mdi-plus-circle-outline
                         </x-icon>
                       </template>
-                      <span class="caption">Add new <span class="text-capitalize">{{
-                          item.type.slice(0, -3)
-                        }}</span></span>
-
+                      <span class="caption"
+                        >Add new
+                        <span class="text-capitalize">{{ item.type.slice(0, -3) }}</span></span
+                      >
                     </v-tooltip>
-
-
                   </template>
 
                   <v-list-item-group :value="selectedItem">
@@ -185,33 +186,38 @@
                       active-class="font-weight-bold"
                       :selectable="true"
                       dense
-                      v-for="child in (item.children || [])"
+                      v-for="child in item.children || []"
                       :key="child.key"
-                      :value="`${(child._nodes && child._nodes).type || ''}||${(child._nodes && child._nodes.dbAlias) || ''}||${child.name}`"
-                      class="nested ml-3 "
+                      :value="`${(child._nodes && child._nodes).type || ''}||${
+                        (child._nodes && child._nodes.dbAlias) || ''
+                      }||${child.name}`"
+                      class="nested ml-3"
                       @click.stop="addTab({ ...child }, false, true)"
-                      @contextmenu.prevent.stop="showCTXMenu($event, child, false,true)"
+                      @contextmenu.prevent.stop="showCTXMenu($event, child, false, true)"
                     >
                       <v-list-item-icon>
                         <v-icon
                           x-small
-                          style="cursor:auto;"
-                          v-if=" icons[child._nodes.type].openIcon"
+                          style="cursor: auto"
+                          v-if="icons[child._nodes.type].openIcon"
                           :color="icons[child._nodes.type].openColor"
-                        >{{ icons[child._nodes.type].openIcon }}
+                          >{{ icons[child._nodes.type].openIcon }}
                         </v-icon>
                         <v-icon
                           x-small
-                          style="cursor:auto;"
-                          v-else :color="icons[child._nodes.type].color"
-                        >{{ icons[child._nodes.type].icon }}
+                          style="cursor: auto"
+                          v-else
+                          :color="icons[child._nodes.type].color"
+                          >{{ icons[child._nodes.type].icon }}
                         </v-icon>
                       </v-list-item-icon>
                       <v-list-item-title>
-                        <v-tooltip bottom v-if="_isUIAllowed('creator_tooltip') && child.creator_tooltip">
-                          <template v-slot:activator="{on}">
-                            <span v-on="on" class="caption"
-                                  @dblclick="showSqlClient = true">
+                        <v-tooltip
+                          bottom
+                          v-if="_isUIAllowed('creator_tooltip') && child.creator_tooltip"
+                        >
+                          <template v-slot:activator="{ on }">
+                            <span v-on="on" class="caption" @dblclick="showSqlClient = true">
                               {{ child.name }}
                             </span>
                           </template>
@@ -219,121 +225,126 @@
                         </v-tooltip>
                         <span v-else class="caption">{{ child.name }}</span>
                       </v-list-item-title>
-                      <template v-if="child.type==='table'">
+                      <template v-if="child.type === 'table'">
                         <v-spacer></v-spacer>
                         <div class="action d-flex" @click.stop>
                           <v-menu>
-                            <template v-slot:activator="{on}">
+                            <template v-slot:activator="{ on }">
                               <v-icon small v-on="on">mdi-dots-vertical</v-icon>
                             </template>
 
                             <v-list dense>
-                              <v-list-item dense v-if="_isUIAllowed('treeview-rename-button')"
-                                           @click="
-                          menuItem = child;
-                          dialogRenameTable.cookie = child;
-                          dialogRenameTable.dialogShow = true;
-                          dialogRenameTable.defaultValue = child.name;">
+                              <v-list-item
+                                dense
+                                v-if="_isUIAllowed('treeview-rename-button')"
+                                @click="
+                                  menuItem = child;
+                                  dialogRenameTable.cookie = child;
+                                  dialogRenameTable.dialogShow = true;
+                                  dialogRenameTable.defaultValue = child.name;
+                                "
+                              >
                                 <v-list-item-icon>
-                                  <v-icon
-                                    x-small>
-                                    mdi-pencil-outline
-                                  </v-icon>
+                                  <v-icon x-small> mdi-pencil-outline </v-icon>
                                 </v-list-item-icon>
                                 <v-list-item-title>
                                   <span classs="caption">Rename</span>
                                 </v-list-item-title>
                               </v-list-item>
-                              <v-list-item dense v-if="_isUIAllowed('ui-acl')"
-                                           @click="openUIACL">
+                              <v-list-item dense v-if="_isUIAllowed('ui-acl')" @click="openUIACL">
                                 <v-list-item-icon>
-                                  <v-icon
-                                    x-small>
-                                    mdi-shield-outline
-                                  </v-icon>
+                                  <v-icon x-small> mdi-shield-outline </v-icon>
                                 </v-list-item-icon>
                                 <v-list-item-title>
                                   <span classs="caption">UI ACL</span>
                                 </v-list-item-title>
                               </v-list-item>
                             </v-list>
-
                           </v-menu>
 
-
                           <!--                          <v-icon @click.stop="" x-small>mdi-delete-outline</v-icon>-->
                         </div>
                       </template>
                     </v-list-item>
-
                   </v-list-item-group>
                 </v-list-group>
                 <v-list-item
                   :selectable="false"
                   v-else-if="item.type !== 'sqlClientDir' || showSqlClient"
                   :key="item.key"
-                  :value="`${(item._nodes && item._nodes).type || ''}||${(item._nodes && item._nodes.dbAlias) || ''}||${item.name}`"
+                  :value="`${(item._nodes && item._nodes).type || ''}||${
+                    (item._nodes && item._nodes.dbAlias) || ''
+                  }||${item.name}`"
                   @click.stop="addTab({ ...item }, false, false)"
-                  @contextmenu.prevent="showCTXMenu($event, item, false,false)"
-
+                  @contextmenu.prevent="showCTXMenu($event, item, false, false)"
                 >
                   <v-list-item-icon>
                     <v-icon
                       small
-                      style="cursor:auto;"
+                      style="cursor: auto"
                       v-if="open && icons[item._nodes.type].openIcon"
                       :color="icons[item._nodes.type].openColor"
-                    >{{ icons[item._nodes.type].openIcon }}
+                      >{{ icons[item._nodes.type].openIcon }}
                     </v-icon>
-                    <v-icon
-                      small
-                      style="cursor:auto;"
-                      v-else :color="icons[item._nodes.type].color"
-                    >{{ icons[item._nodes.type].icon }}
+                    <v-icon small style="cursor: auto" v-else :color="icons[item._nodes.type].color"
+                      >{{ icons[item._nodes.type].icon }}
                     </v-icon>
                   </v-list-item-icon>
                   <v-list-item-title>
                     <v-tooltip top v-if="!isNonAdminAccessAllowed(item)">
-
-                      <template v-slot:activator="{on}">
-                        <span v-on="on" class="caption font-weight-regular"
-                              @dblclick="showSqlClient = true">{{ item.name }}</span>
+                      <template v-slot:activator="{ on }">
+                        <span
+                          v-on="on"
+                          class="caption font-weight-regular"
+                          @dblclick="showSqlClient = true"
+                          >{{ item.name }}</span
+                        >
                       </template>
                       <span class="caption">Only visible to Creator</span>
                     </v-tooltip>
-                    <span v-else class="caption font-weight-regular"
-                          @dblclick="showSqlClient = true">{{ item.name }}</span>
+                    <span
+                      v-else
+                      class="caption font-weight-regular"
+                      @dblclick="showSqlClient = true"
+                      >{{ item.name }}</span
+                    >
                   </v-list-item-title>
                 </v-list-item>
               </template>
             </v-list>
           </v-container>
-          <recursive-menu v-model="menuVisible"
-                          @click="handleCTXMenuClick($event.value)"
-                          offset-y :items="ctxMenuOptions()"
-                          :position-x="x" :position-y="y"></recursive-menu>
+          <recursive-menu
+            v-model="menuVisible"
+            @click="handleCTXMenuClick($event.value)"
+            offset-y
+            :items="ctxMenuOptions()"
+            :position-x="x"
+            :position-y="y"
+          ></recursive-menu>
         </div>
-        <div
-          class="pr-3  advance-menu"
-          :class="{'pl-3':!mini}"
-        >
-          <v-divider v-if="_isUIAllowed('treeViewProjectSettings')">
-          </v-divider>
-
-
-          <v-list v-if="_isUIAllowed('treeViewProjectSettings')" dense :class="{ 'advanced-border' : overShieldIcon }">
+        <div class="pr-3 advance-menu" :class="{ 'pl-3': !mini }">
+          <v-divider v-if="_isUIAllowed('treeViewProjectSettings')"> </v-divider>
 
+          <v-list
+            v-if="_isUIAllowed('treeViewProjectSettings')"
+            dense
+            :class="{ 'advanced-border': overShieldIcon }"
+          >
             <v-list-item>
               <v-list-item-title>
                 <!-- Settings -->
                 <span class="body-2 grey--text">{{ $t('treeview.settings') }}</span>
                 <v-tooltip top>
-
-                  <template v-slot:activator="{on}">
-                    <x-icon class="mt-n1" v-on="on" color="pink grey"
-                            @mouseenter="overShieldIcon = true"
-                            @mouseleave="overShieldIcon = false"
-                            icon-class="ml-2" small>mdi-shield-lock-outline
+                  <template v-slot:activator="{ on }">
+                    <x-icon
+                      class="mt-n1"
+                      v-on="on"
+                      color="pink grey"
+                      @mouseenter="overShieldIcon = true"
+                      @mouseleave="overShieldIcon = false"
+                      icon-class="ml-2"
+                      small
+                      >mdi-shield-lock-outline
                     </x-icon>
                   </template>
                   <!-- Only visible to Creator -->
@@ -343,18 +354,18 @@
             </v-list-item>
 
             <template v-if="_isUIAllowed('treeViewProjectSettings')">
-
-
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
+                <template v-slot:activator="{ on }">
                   <v-list-item dense @click="appsTabAdd" class="body-2" v-on="on">
                     <v-list-item-icon>
                       <v-icon x-small> mdi-storefront-outline</v-icon>
                     </v-list-item-icon>
                     <!-- App Store -->
-                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.app_store') }}</span>
+                    <v-list-item-title
+                      ><span class="font-weight-regular caption">{{
+                        $t('treeview.app_store')
+                      }}</span>
                     </v-list-item-title>
-
                   </v-list-item>
                 </template>
                 <!-- App Store -->
@@ -362,31 +373,35 @@
               </v-tooltip>
 
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
+                <template v-slot:activator="{ on }">
                   <v-list-item dense @click="rolesTabAdd" class="body-2" v-on="on">
                     <v-list-item-icon>
                       <v-icon x-small> mdi-account-group</v-icon>
                     </v-list-item-icon>
                     <!-- Team & Auth -->
-                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.team_n_auth') }}</span></v-list-item-title>
-
+                    <v-list-item-title
+                      ><span class="font-weight-regular caption">{{
+                        $t('treeview.team_n_auth')
+                      }}</span></v-list-item-title
+                    >
                   </v-list-item>
                 </template>
                 <!-- Roles & Users Management -->
                 {{ $t('treeview.team_n_auth.tooltip') }}
               </v-tooltip>
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
+                <template v-slot:activator="{ on }">
                   <v-list-item dense @click="disableOrEnableModelTabAdd" class="body-2" v-on="on">
-
                     <v-list-item-icon>
                       <v-icon x-small>mdi-table-multiple</v-icon>
                     </v-list-item-icon>
                     <!-- Project Metadata -->
-                    <v-list-item-title><span class="font-weight-regular caption">{{ $t('treeview.project_metadata') }}</span>
+                    <v-list-item-title
+                      ><span class="font-weight-regular caption">{{
+                        $t('treeview.project_metadata')
+                      }}</span>
                     </v-list-item-title>
                   </v-list-item>
-
                 </template>
                 <!-- Meta Management -->
                 {{ $t('treeview.project_metadata.tooltip') }}
@@ -446,7 +461,6 @@
           <!--          </v-list>-->
           <!--          <v-divider></v-divider>-->
 
-
           <v-list dense>
             <v-list-item>
               <!-- Preview as -->
@@ -462,16 +476,22 @@
               <!--                      :class="{ 'x-active&#45;&#45;text' : role.title === previewAs }">{{ role.title }}</span>-->
               <!--              </v-list-item>-->
               <div class="mx-4 d-flex align-center mb-2">
-                <template v-for="(role,i) in rolesList">
+                <template v-for="(role, i) in rolesList">
                   <!--                  <span v-if="i" vertical :key="i" class="mx-2 caption grey&#45;&#45;text">or</span>-->
                   <v-divider v-if="i" vertical :key="i" class="mx-2 caption grey--text"></v-divider>
-                  <div @click="setPreviewUSer(role.title)" :key="role.title" class="pointer text-center">
-                    <v-icon small class="mr-1" :color="role.title === previewAs ? 'x-active' : ''">{{
-                        roleIcon[role.title]
-                      }}
+                  <div
+                    @click="setPreviewUSer(role.title)"
+                    :key="role.title"
+                    class="pointer text-center"
+                  >
+                    <v-icon small class="mr-1" :color="role.title === previewAs ? 'x-active' : ''"
+                      >{{ roleIcon[role.title] }}
                     </v-icon>
-                    <span class="caption text-capitalize"
-                          :class="{ 'x-active--text' : role.title === previewAs }">{{ role.title }}</span>
+                    <span
+                      class="caption text-capitalize"
+                      :class="{ 'x-active--text': role.title === previewAs }"
+                      >{{ role.title }}</span
+                    >
                   </div>
                 </template>
               </div>
@@ -517,7 +537,6 @@
 
               </v-list-item>
             </v-list>-->
-
         </div>
       </div>
     </v-navigation-drawer>
@@ -534,7 +553,6 @@
       @create="mtdViewCreate($event)"
     ></dlg-view-create>
 
-
     <!--    <textDlgSubmitCancel
           v-if="dialogGetTableName.dialogShow"
           :dialogShow="dialogGetTableName.dialogShow"
@@ -543,7 +561,6 @@
           :mtdDialogCancel="mtdDialogGetTableNameCancel"
         />-->
 
-
     <textDlgSubmitCancel
       v-if="dialogRenameTable.dialogShow"
       :dialogShow="dialogRenameTable.dialogShow"
@@ -594,22 +611,28 @@
 <script>
 /* eslint-disable */
 
-import {mapMutations, mapGetters, mapActions} from "vuex";
+import { mapMutations, mapGetters, mapActions } from 'vuex';
 
-import rightClickOptions from "../helpers/rightClickOptions";
-import icons from "../helpers/treeViewIcons";
+import rightClickOptions from '../helpers/rightClickOptions';
+import icons from '../helpers/treeViewIcons';
 
-import textDlgSubmitCancel from "./utils/dlgTextSubmitCancel";
-import dlgLabelSubmitCancel from "./utils/dlgLabelSubmitCancel";
-import {copyTextToClipboard} from "../helpers/xutils";
-import DlgTableCreate from "@/components/utils/dlgTableCreate";
-import DlgViewCreate from "@/components/utils/dlgViewCreate";
-import SponsorMini from "@/components/sponsorMini";
+import textDlgSubmitCancel from './utils/dlgTextSubmitCancel';
+import dlgLabelSubmitCancel from './utils/dlgLabelSubmitCancel';
+import { copyTextToClipboard } from '../helpers/xutils';
+import DlgTableCreate from '@/components/utils/dlgTableCreate';
+import DlgViewCreate from '@/components/utils/dlgViewCreate';
+import SponsorMini from '@/components/sponsorMini';
 
 // const {clipboard} = require('electron');
 
 export default {
-  components: {SponsorMini, DlgViewCreate, DlgTableCreate, textDlgSubmitCancel, dlgLabelSubmitCancel},
+  components: {
+    SponsorMini,
+    DlgViewCreate,
+    DlgTableCreate,
+    textDlgSubmitCancel,
+    dlgLabelSubmitCancel,
+  },
   data: () => ({
     roleIcon: {
       owner: 'mdi-account-star',
@@ -623,18 +646,18 @@ export default {
     overShieldIcon: false,
     activeListItem: null,
     dbIcons: {
-      oracledb: "oracle_icon@2x.png",
-      pg: "postgresql_icon@2x.png",
-      mysql: "mysql_icon@2x.png",
-      mssql: "mssql_icon@2x.png",
-      sqlite3: "sqlite.png"
+      oracledb: 'oracle_icon@2x.png',
+      pg: 'postgresql_icon@2x.png',
+      mysql: 'mysql_icon@2x.png',
+      mssql: 'mssql_icon@2x.png',
+      sqlite3: 'sqlite.png',
     },
     mini: false,
     miniExpanded: false,
     navigation: {
       shown: true,
       width: 320,
-      borderSize: 3
+      borderSize: 3,
     },
     loadingProjects: true,
     caseInsensitive: true,
@@ -644,66 +667,66 @@ export default {
     x: 0,
     y: 0,
     menuItem: null,
-    menu: [{title: "Execute"}],
+    menu: [{ title: 'Execute' }],
     icons,
     tree: [],
     active: [],
     viewMenu: false,
     dialogGetTableName: {
       dialogShow: false,
-      heading: "Enter New Table Name",
-      field: "Table Name"
+      heading: 'Enter New Table Name',
+      field: 'Table Name',
     },
     dialogGetViewName: {
       dialogShow: false,
-      heading: "Enter New View Name",
-      field: "View Name"
+      heading: 'Enter New View Name',
+      field: 'View Name',
     },
     dialogGetFunctionName: {
       dialogShow: false,
-      heading: "Enter New Function Name",
-      field: "Function Name"
+      heading: 'Enter New Function Name',
+      field: 'Function Name',
     },
     dialogGetProcedureName: {
       dialogShow: false,
-      heading: "Enter New Procedure Name",
-      field: "Procedure Name",
+      heading: 'Enter New Procedure Name',
+      field: 'Procedure Name',
     },
     dialogGetSequenceName: {
       dialogShow: false,
-      heading: "Enter New Sequence Name",
-      field: "Sequence Name",
+      heading: 'Enter New Sequence Name',
+      field: 'Sequence Name',
     },
     dialogRenameTable: {
       dialogShow: false,
-      heading: "Rename Table",
-      field: "Table Name",
+      heading: 'Rename Table',
+      field: 'Table Name',
       cookie: null,
-      defaultValue: null
+      defaultValue: null,
     },
     rolesList: null,
-    selectedNodeForDelete: {dialog: false, item: null, heading: null}
+    selectedNodeForDelete: { dialog: false, item: null, heading: null },
   }),
   computed: {
-
     previewAs: {
       get() {
-        return this.$store.state.users.previewAs
-      }, set(previewAs) {
+        return this.$store.state.users.previewAs;
+      },
+      set(previewAs) {
         this.$store.commit('users/MutPreviewAs', previewAs);
-      }
+      },
     },
     selectedItem() {
-      return [this.$route.query.type, this.$route.query.dbalias, this.$route.query.name].join('||')
+      return [this.$route.query.type, this.$route.query.dbalias, this.$route.query.name].join('||');
     },
     direction() {
-      return this.navigation.shown === false ? "Open" : "Closed";
+      return this.navigation.shown === false ? 'Open' : 'Closed';
     },
     ...mapGetters({
-      projects: "project/list",
-      tabs: "tabs/list",
-      sqlMgr: "sqlMgr/sqlMgr",
-      currentProjectFolder: "project/currentProjectFolder"
+      projects: 'project/list',
+      tabs: 'tabs/list',
+      sqlMgr: 'sqlMgr/sqlMgr',
+      currentProjectFolder: 'project/currentProjectFolder',
     }),
     filter() {
       return (item, search, textKey) => item[textKey].indexOf(search) > -1;
@@ -714,29 +737,32 @@ export default {
         migrationsDir: !this._isUIAllowed('migrationsDir'),
         functionDir: !this._isUIAllowed('functionDir'),
         procedureDir: !this._isUIAllowed('procedureDir'),
-      }
+      };
     },
     isTreeView() {
-      return this.projects && (
-        this.projects.length > 1
-        || (
-          this.projects[0] && this.projects[0].children && (this.projects[0].children.length > 1
-            || (this.projects[0].children[0] && this.projects[0].children[0].children && this.projects[0].children[0].children.length > 1)
-          )
-        )
+      return (
+        this.projects &&
+        (this.projects.length > 1 ||
+          (this.projects[0] &&
+            this.projects[0].children &&
+            (this.projects[0].children.length > 1 ||
+              (this.projects[0].children[0] &&
+                this.projects[0].children[0].children &&
+                this.projects[0].children[0].children.length > 1))))
       );
     },
     listViewArr() {
       return (
-        this.projects
-        && this.projects[0]
-        && this.projects[0].children
-        && this.projects[0].children[0]
-        && this.projects[0].children[0].children
-        && this.projects[0].children[0].children[0]
-        && this.projects[0].children[0].children[0].children
-      ) || []
-    }
+        (this.projects &&
+          this.projects[0] &&
+          this.projects[0].children &&
+          this.projects[0].children[0] &&
+          this.projects[0].children[0].children &&
+          this.projects[0].children[0].children[0] &&
+          this.projects[0].children[0].children[0].children) ||
+        []
+      );
+    },
   },
   methods: {
     openUIACL() {
@@ -745,9 +771,9 @@ export default {
         this.$router.push({
           query: {
             ...this.$route.query,
-            nested_1: 'dbacl'
-          }
-        })
+            nested_1: 'dbacl',
+          },
+        });
       }, 100);
     },
     setPreviewUSer(previewAs) {
@@ -760,15 +786,17 @@ export default {
     },
     async loadRoles() {
       if (this.$store.getters['users/GtrIsAdmin']) {
-        const roles = (await this.$axios.get('/admin/roles', {
-          headers: {
-            'xc-auth': this.$store.state.users.token
-          },
-          params: {
-            project_id: this.$route.params.project_id
-          }
-        })).data;
-        this.rolesList = roles.filter(role => !['owner', 'creator', 'guest'].includes(role.title))
+        const roles = (
+          await this.$axios.get('/admin/roles', {
+            headers: {
+              'xc-auth': this.$store.state.users.token,
+            },
+            params: {
+              project_id: this.$route.params.project_id,
+            },
+          })
+        ).data;
+        this.rolesList = roles.filter(role => !['owner', 'creator', 'guest'].includes(role.title));
       } else {
         this.rolesList = null;
         this.previewAs = null;
@@ -780,10 +808,10 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add app store tab');
-        let item = {name: 'App Store', key: `appStore`}
-        item._nodes = {env: 'dev'};
+        let item = { name: 'App Store', key: `appStore` };
+        item._nodes = { env: 'dev' };
         item._nodes.type = 'appStore';
-        this.$store.dispatch("tabs/ActAddTab", item);
+        this.$store.dispatch('tabs/ActAddTab', item);
       }
     },
     isNonAdminAccessAllowed(item) {
@@ -793,7 +821,7 @@ export default {
       this.$store.dispatch('windows/ActToggleDarkMode', !this.$store.state.windows.darkTheme);
     },
     openLink(link) {
-      window.open(link, '_blank')
+      window.open(link, '_blank');
     },
 
     /*    settingsTabAdd() {
@@ -816,12 +844,11 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add roles tab');
-        let item = {name: 'Team & Auth ', key: `roles`}
-        item._nodes = {env: 'dev'};
+        let item = { name: 'Team & Auth ', key: `roles` };
+        item._nodes = { env: 'dev' };
         item._nodes.type = 'roles';
-        this.$store.dispatch("tabs/ActAddTab", item);
+        this.$store.dispatch('tabs/ActAddTab', item);
       }
-
     },
     disableOrEnableModelTabAdd() {
       const tabIndex = this.tabs.findIndex(el => el.key === `disableOrEnableModel`);
@@ -829,141 +856,143 @@ export default {
         this.changeActiveTab(tabIndex);
       } else {
         console.log('add acl tab');
-        let item = {name: 'Meta Management', key: `disableOrEnableModel`}
-        item._nodes = {env: 'dev'};
+        let item = { name: 'Meta Management', key: `disableOrEnableModel` };
+        item._nodes = { env: 'dev' };
         item._nodes.type = 'disableOrEnableModel';
-        this.$store.dispatch("tabs/ActAddTab", item);
+        this.$store.dispatch('tabs/ActAddTab', item);
       }
     },
     toggleMini() {
       this.$store.commit('panelSize/MutSize', {
         type: 'treeView',
-        size: this.$store.state.panelSize.treeView.size === 18 ? 5 : 18
-      })
+        size: this.$store.state.panelSize.treeView.size === 18 ? 5 : 18,
+      });
       // this.onMiniHoverEnter();
       // this.mini = !this.mini;
     },
     onMiniHoverEnter() {
       if (this.mini && this.$refs.drawer) {
-        const el = this.$refs.drawer.$el
+        const el = this.$refs.drawer.$el;
         this.$refs.drawer.width = el.style.width = '320px';
         this.miniExpanded = true;
       }
     },
     onMiniHoverLeave() {
       if (this.mini && this.$refs.drawer) {
-        const el = this.$refs.drawer.$el
+        const el = this.$refs.drawer.$el;
         this.navigation.width = this.$refs.drawer.width = el.style.width = '50px';
         this.miniExpanded = false;
       }
     },
 
     ...mapMutations({
-      setProject: "project/list",
-      updateProject: "project/update"
+      setProject: 'project/list',
+      updateProject: 'project/update',
     }),
     ...mapActions({
-      loadTables: "project/loadTables",
-      loadProjects: "project/loadProjects",
-      loadViews: "project/loadViews",
-      loadProcedures: "project/loadProcedures",
-      loadSequences: "project/loadSequences",
-      loadFunctions: "project/loadFunctions",
-      changeActiveTab: "tabs/changeActiveTab",
+      loadTables: 'project/loadTables',
+      loadProjects: 'project/loadProjects',
+      loadViews: 'project/loadViews',
+      loadProcedures: 'project/loadProcedures',
+      loadSequences: 'project/loadSequences',
+      loadFunctions: 'project/loadFunctions',
+      changeActiveTab: 'tabs/changeActiveTab',
       // instantiateSqlMgr: "sqlMgr/instantiateSqlMgr",
-      loadDefaultTabs: "tabs/loadDefaultTabs",
-      loadTablesFromParentTreeNode: "project/loadTablesFromParentTreeNode",
-      loadViewsFromParentTreeNode: "project/loadViewsFromParentTreeNode",
-      loadFunctionsFromParentTreeNode:
-        "project/loadFunctionsFromParentTreeNode",
-      loadProceduresFromParentTreeNode:
-        "project/loadProceduresFromParentTreeNode",
-      removeTabsByName: "tabs/removeTabsByName",
-      clearProjects: "project/clearProjects"
+      loadDefaultTabs: 'tabs/loadDefaultTabs',
+      loadTablesFromParentTreeNode: 'project/loadTablesFromParentTreeNode',
+      loadViewsFromParentTreeNode: 'project/loadViewsFromParentTreeNode',
+      loadFunctionsFromParentTreeNode: 'project/loadFunctionsFromParentTreeNode',
+      loadProceduresFromParentTreeNode: 'project/loadProceduresFromParentTreeNode',
+      removeTabsByName: 'tabs/removeTabsByName',
+      clearProjects: 'project/clearProjects',
     }),
     async addTab(item, open, leaf) {
       // console.log("addtab item", item, open, leaf);
       //this.$store.commit('notification/MutToggleProgressBar', true);
       try {
-        if (item._nodes.type === "tableDir" && !open) {
+        if (item._nodes.type === 'tableDir' && !open) {
           //load tables
           await this.loadTables(item);
           const currentlyOpened = JSON.parse(JSON.stringify(this.open));
           currentlyOpened.push(item._nodes.key);
           this.activeListItem = item._nodes.key;
           this.open = currentlyOpened;
-        } else if (item._nodes.type === "viewDir" && !open) {
+        } else if (item._nodes.type === 'viewDir' && !open) {
           await this.loadViews(item);
           const currentlyOpened = JSON.parse(JSON.stringify(this.open));
           currentlyOpened.push(item._nodes.key);
           this.activeListItem = item._nodes.key;
           this.open = currentlyOpened;
-        } else if (item._nodes.type === "functionDir" && !open) {
+        } else if (item._nodes.type === 'functionDir' && !open) {
           await this.loadFunctions(item);
           const currentlyOpened = JSON.parse(JSON.stringify(this.open));
           currentlyOpened.push(item._nodes.key);
           this.activeListItem = item._nodes.key;
           this.open = currentlyOpened;
-        } else if (item._nodes.type === "procedureDir" && !open) {
+        } else if (item._nodes.type === 'procedureDir' && !open) {
           await this.loadProcedures(item);
           const currentlyOpened = JSON.parse(JSON.stringify(this.open));
           currentlyOpened.push(item._nodes.key);
           this.activeListItem = item._nodes.key;
           this.open = currentlyOpened;
-        } else if (item._nodes.type === "sequenceDir" && !open) {
+        } else if (item._nodes.type === 'sequenceDir' && !open) {
           await this.loadSequences(item);
           const currentlyOpened = JSON.parse(JSON.stringify(this.open));
           currentlyOpened.push(item._nodes.key);
           this.activeListItem = item._nodes.key;
           this.open = currentlyOpened;
-        } else if (item._nodes.type === "env") {
+        } else if (item._nodes.type === 'env') {
           return;
         } else {
           // const tabIndex = this.tabs.findIndex(el => el.key === item.key);
           const tabIndex = this.tabs.findIndex(el => {
             return (
-                (!el._nodes && !item._nodes)
-                || (el._nodes && item._nodes && el._nodes.type === item._nodes.type && el._nodes.dbAlias === item._nodes.dbAlias)
-              )
-              && item.name === el.name
+              ((!el._nodes && !item._nodes) ||
+                (el._nodes &&
+                  item._nodes &&
+                  el._nodes.type === item._nodes.type &&
+                  el._nodes.dbAlias === item._nodes.dbAlias)) &&
+              item.name === el.name
+            );
           });
           if (tabIndex !== -1) {
             this.changeActiveTab(tabIndex);
           } else {
             if (
-              item._nodes.type === "tableDir" ||
-              item._nodes.type === "project" ||
-              item._nodes.type === "viewDir" ||
-              item._nodes.type === "procedureDir" ||
-              item._nodes.type === "sequenceDir" ||
-              item._nodes.type === "db" ||
-              item._nodes.type === "functionDir"
+              item._nodes.type === 'tableDir' ||
+              item._nodes.type === 'project' ||
+              item._nodes.type === 'viewDir' ||
+              item._nodes.type === 'procedureDir' ||
+              item._nodes.type === 'sequenceDir' ||
+              item._nodes.type === 'db' ||
+              item._nodes.type === 'functionDir'
             ) {
               return;
             }
             if (item._nodes.type === 'table') {
               let tableIndex = +item._nodes.key.split('.').pop();
-              if (!(await this.$store.dispatch('windows/ActCheckMaxTable', {tableIndex}))) return
+              if (!(await this.$store.dispatch('windows/ActCheckMaxTable', { tableIndex }))) return;
             }
-            this.$store.dispatch("tabs/ActAddTab", item);
+            this.$store.dispatch('tabs/ActAddTab', item);
           }
         }
-
       } catch (e) {
         console.log(e);
       } finally {
         //this.$store.commit('notification/MutToggleProgressBar', false);
       }
-
     },
     isActiveList(item) {
-      return item.type === this.$route.query.type
-        || item.type === `${this.$route.query.type}Dir`;
+      return item.type === this.$route.query.type || item.type === `${this.$route.query.type}Dir`;
     },
     showNode(item) {
-      return !(this.$store.getters['project/GtrProjectPrefix'] && ['functionDir', 'procedureDir'].includes(item.type))
-        && (['tableDir', 'viewDir'].includes(item.type) || this._isUIAllowed('advanced'))
-        ;
+      return (
+        !(
+          this.$store.getters['project/GtrProjectPrefix'] &&
+          ['functionDir', 'procedureDir'].includes(item.type)
+        ) &&
+        (['tableDir', 'viewDir'].includes(item.type) || this._isUIAllowed('advanced'))
+      );
     },
     showCTXMenu(e, item, open, leaf) {
       if (!item) return;
@@ -982,35 +1011,40 @@ export default {
         this.loadingProjects = true;
         await this.loadProjects(id);
 
-
         if ('toast' in this.$route.query) {
-          this.$toast.success(`Successfully generated ${(this.$store.getters['project/GtrProjectType'] || '').toUpperCase()} APIs`, {
-            position: 'top-center'
-          }).goAway(5000);
+          this.$toast
+            .success(
+              `Successfully generated ${(
+                this.$store.getters['project/GtrProjectType'] || ''
+              ).toUpperCase()} APIs`,
+              {
+                position: 'top-center',
+              }
+            )
+            .goAway(5000);
         }
 
         try {
           this.open = [
             this.projects[0].key,
             this.projects[0].children[0].key,
-            this.projects[0].children[0].children[0].key
+            this.projects[0].children[0].children[0].key,
           ];
         } catch (error) {
-          console.log("this.open set array error", error);
+          console.log('this.open set array error', error);
         }
         this.loadingProjects = false;
         if (!this.isTreeView) {
           if (this.$route.query.type) {
-            const node = this.listViewArr.find(n => n.type === `${this.$route.query.type}Dir`)
-            await this.addTab({...(node || this.listViewArr[0])}, false, true)
+            const node = this.listViewArr.find(n => n.type === `${this.$route.query.type}Dir`);
+            await this.addTab({ ...(node || this.listViewArr[0]) }, false, true);
           } else {
-            await this.addTab({...this.listViewArr[0]}, false, true)
+            await this.addTab({ ...this.listViewArr[0] }, false, true);
           }
         }
       } catch (error) {
-        console.error("loadProjectsData", error);
+        console.error('loadProjectsData', error);
       }
-
     },
     ctxMenuOptions() {
       if (!this.menuItem || !this.menuItem._nodes.type) return;
@@ -1022,11 +1056,10 @@ export default {
       // return [];
     },
     isNested(item) {
-      return (item.children && item.children.length) || ['tableDir',
-        'viewDir',
-        'functionDir',
-        'procedureDir',
-        'sequenceDir'].includes(item.type)
+      return (
+        (item.children && item.children.length) ||
+        ['tableDir', 'viewDir', 'functionDir', 'procedureDir', 'sequenceDir'].includes(item.type)
+      );
     },
     async handleCreateBtnClick(type, item) {
       this.menuItem = item;
@@ -1049,81 +1082,99 @@ export default {
       }
     },
 
-
     async handleCTXMenuClick(actionStr) {
       ///this.$store.commit('notification/MutToggleProgressBar', true);
 
       try {
         const item = this.menuItem;
         // const options = rightClickOptions[this.menuItem._nodes.type];
-        const action = actionStr;//options[actionStr];
+        const action = actionStr; //options[actionStr];
         if (action) {
-          console.log("action and context", item, action);
-          if (action === "ENV_DB_TABLES_CREATE") {
+          console.log('action and context', item, action);
+          if (action === 'ENV_DB_TABLES_CREATE') {
             this.dialogGetTableName.dialogShow = true;
-          } else if (action === "ENV_DB_VIEWS_CREATE") {
+          } else if (action === 'ENV_DB_VIEWS_CREATE') {
             this.dialogGetViewName.dialogShow = true;
-          } else if (action === "ENV_DB_PROCEDURES_CREATE") {
+          } else if (action === 'ENV_DB_PROCEDURES_CREATE') {
             this.dialogGetProcedureName.dialogShow = true;
-          } else if (action === "ENV_DB_SEQUENCES_CREATE") {
+          } else if (action === 'ENV_DB_SEQUENCES_CREATE') {
             this.dialogGetSequenceName.dialogShow = true;
-          } else if (action === "ENV_DB_FUNCTIONS_CREATE") {
+          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
             this.dialogGetFunctionName.dialogShow = true;
-          } else if (action === "ENV_DB_FUNCTIONS_CREATE") {
+          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
             this.dialogGetFunctionName.dialogShow = true;
-          } else if (action === "ENV_DB_TABLES_REFRESH") {
+          } else if (action === 'ENV_DB_TABLES_REFRESH') {
             await this.loadTables(this.menuItem);
             this.$toast.success('Tables refreshed').goAway(1000);
-          } else if (action === "ENV_DB_VIEWS_REFRESH") {
+          } else if (action === 'ENV_DB_VIEWS_REFRESH') {
             await this.loadViews(this.menuItem);
             this.$toast.success('Views refreshed').goAway(1000);
-          } else if (action === "ENV_DB_FUNCTIONS_REFRESH") {
+          } else if (action === 'ENV_DB_FUNCTIONS_REFRESH') {
             await this.loadFunctions(this.menuItem);
             this.$toast.success('Functions refreshed').goAway(1000);
-          } else if (action === "ENV_DB_PROCEDURES_REFRESH") {
+          } else if (action === 'ENV_DB_PROCEDURES_REFRESH') {
             await this.loadProcedures(this.menuItem);
             this.$toast.success('Procedures refreshed').goAway(1000);
-          } else if (action === "ENV_DB_SEQUENCES_REFRESH") {
+          } else if (action === 'ENV_DB_SEQUENCES_REFRESH') {
             await this.loadSequences(this.menuItem);
             this.$toast.success('Table refreshed').goAway(1000);
-          } else if (action === "ENV_DB_TABLES_RENAME") {
+          } else if (action === 'ENV_DB_TABLES_RENAME') {
             console.log(`${item._nodes.type} Rename`);
             this.dialogRenameTable.cookie = item;
             this.dialogRenameTable.dialogShow = true;
             this.dialogRenameTable.defaultValue = item.name;
-
-          } else if (action === "ENV_DB_MIGRATION_DOWN") {
+          } else if (action === 'ENV_DB_MIGRATION_DOWN') {
             await this.sqlMgr.migrator().migrationsDown({
               env: item._nodes.env,
               dbAlias: item._nodes.dbAlias,
               migrationSteps: 99999999999,
               folder: this.currentProjectFolder,
-              sqlContentMigrate: 1
+              sqlContentMigrate: 1,
             });
-            console.log("migrations down done");
-          } else if (action === "SHOW_NODES") {
-            console.log("\n_nodes.type = ", item._nodes.type, "\n");
-            console.log("_nodes.key = ", item._nodes.key, "\n");
-            console.log("_nodes = ", item._nodes, "\n");
+            console.log('migrations down done');
+          } else if (action === 'SHOW_NODES') {
+            console.log('\n_nodes.type = ', item._nodes.type, '\n');
+            console.log('_nodes.key = ', item._nodes.key, '\n');
+            console.log('_nodes = ', item._nodes, '\n');
           } else if (
-            action === "ENV_DB_TABLES_DELETE" ||
-            action === "ENV_DB_VIEWS_DELETE" ||
-            action === "ENV_DB_FUNCTIONS_DELETE" ||
-            action === "ENV_DB_PROCEDURES_DELETE" ||
-            action === "ENV_DB_SEQUENCES_DELETE"
+            action === 'ENV_DB_TABLES_DELETE' ||
+            action === 'ENV_DB_VIEWS_DELETE' ||
+            action === 'ENV_DB_FUNCTIONS_DELETE' ||
+            action === 'ENV_DB_PROCEDURES_DELETE' ||
+            action === 'ENV_DB_SEQUENCES_DELETE'
           ) {
             console.log(`${item._nodes.type} delete`);
-            this.deleteSelectedNode("showDialog", item);
-          } else if (action === "ENV_DB_TABLES_CREATE_STATEMENT") {
-            await this.handleSqlStatementGeneration(item, 'tableCreateStatement', `${item.name} Create Statement copied`);
-          } else if (action === "ENV_DB_TABLES_INSERT_STATEMENT") {
-            await this.handleSqlStatementGeneration(item, 'tableInsertStatement', `${item.name} Insert Statement copied`);
-          } else if (action === "ENV_DB_TABLES_UPDATE_STATEMENT") {
-            await this.handleSqlStatementGeneration(item, 'tableUpdateStatement', `${item.name} Update Statement copied`);
-          } else if (action === "ENV_DB_TABLES_DELETE_STATEMENT") {
-            await this.handleSqlStatementGeneration(item, 'tableSelectStatement', `${item.name} Delete Statement copied`);
-          } else if (action === "ENV_DB_TABLES_SELECT_STATEMENT") {
-            await this.handleSqlStatementGeneration(item, 'tableDeleteStatement', `${item.name} Select Statement copied`);
+            this.deleteSelectedNode('showDialog', item);
+          } else if (action === 'ENV_DB_TABLES_CREATE_STATEMENT') {
+            await this.handleSqlStatementGeneration(
+              item,
+              'tableCreateStatement',
+              `${item.name} Create Statement copied`
+            );
+          } else if (action === 'ENV_DB_TABLES_INSERT_STATEMENT') {
+            await this.handleSqlStatementGeneration(
+              item,
+              'tableInsertStatement',
+              `${item.name} Insert Statement copied`
+            );
+          } else if (action === 'ENV_DB_TABLES_UPDATE_STATEMENT') {
+            await this.handleSqlStatementGeneration(
+              item,
+              'tableUpdateStatement',
+              `${item.name} Update Statement copied`
+            );
+          } else if (action === 'ENV_DB_TABLES_DELETE_STATEMENT') {
+            await this.handleSqlStatementGeneration(
+              item,
+              'tableSelectStatement',
+              `${item.name} Delete Statement copied`
+            );
+          } else if (action === 'ENV_DB_TABLES_SELECT_STATEMENT') {
+            await this.handleSqlStatementGeneration(
+              item,
+              'tableDeleteStatement',
+              `${item.name} Select Statement copied`
+            );
           } else {
             console.log(`No Action Fn found for ${action}`);
           }
@@ -1137,14 +1188,13 @@ export default {
 
     async handleSqlStatementGeneration(item, func, msg) {
       try {
-
         let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
           {
             env: item._nodes.env,
-            dbAlias: item._nodes.dbAlias
+            dbAlias: item._nodes.dbAlias,
           },
           func,
-          {tn: item.name}
+          { tn: item.name },
         ]);
         if (result && result.data) {
           copyTextToClipboard(result.data, 'selection');
@@ -1152,33 +1202,30 @@ export default {
           copyTextToClipboard('Example String', 'selection');
         }
 
-        let sqlClientNode = {...item._nodes};
+        let sqlClientNode = { ...item._nodes };
         let newItem = {
-          _nodes: sqlClientNode
+          _nodes: sqlClientNode,
         };
 
         sqlClientNode.type = 'sqlClientDir';
-        sqlClientNode.key = sqlClientNode.tableDirKey.split('.')
+        sqlClientNode.key = sqlClientNode.tableDirKey.split('.');
         sqlClientNode.key.pop();
         sqlClientNode.dbKey = sqlClientNode.key.join('.');
         sqlClientNode.key.push('sqlClient');
         sqlClientNode.key = sqlClientNode.key.join('.');
 
-
         newItem.key = sqlClientNode.dbKey + '.sqlClient';
         newItem.name = 'SQL Client';
-        newItem.tooltip = "SQL Client";
+        newItem.tooltip = 'SQL Client';
         newItem.type = 'sqlClientDir';
 
         console.log('Generated sql client node', sqlClientNode);
 
-
         this.$toast.success(msg).goAway(2000);
 
-        this.addTab(newItem, false, false)
-
-        this.$store.commit('queries/MutSetClipboardQuery', result.data)
+        this.addTab(newItem, false, false);
 
+        this.$store.commit('queries/MutSetClipboardQuery', result.data);
       } catch (e) {
         console.log(e);
         this.$toast.error('Something went wrong').goAway(2000);
@@ -1188,30 +1235,35 @@ export default {
     async mtdDialogRenameTableSubmit(tn, cookie) {
       console.log(tn);
       let item = cookie;
-      await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [{
-        env: item._nodes.env,
-        dbAlias: item._nodes.dbAlias
-      }, "tableRename", {
-        tn: tn, tn_old: item.name
-      }]);
+      await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+        {
+          env: item._nodes.env,
+          dbAlias: item._nodes.dbAlias,
+        },
+        'tableRename',
+        {
+          tn: tn,
+          tn_old: item.name,
+        },
+      ]);
       await this.removeTabsByName(item);
       await this.loadTablesFromParentTreeNode({
         _nodes: {
-          ...item._nodes
-        }
+          ...item._nodes,
+        },
       });
-      this.$store.dispatch("tabs/ActAddTab", {
+      this.$store.dispatch('tabs/ActAddTab', {
         _nodes: {
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           tn: tn,
           dbConnection: this.menuItem._nodes.dbConnection,
 
-          type: "table",
+          type: 'table',
           dbKey: this.menuItem._nodes.dbKey,
           key: this.menuItem._nodes.key,
         },
-        name: tn
+        name: tn,
       });
       this.dialogRenameTable.dialogShow = false;
       this.dialogRenameTable.defaultValue = null;
@@ -1219,13 +1271,13 @@ export default {
       console.log(tn, cookie);
     },
     mtdDialogRenameTableCancel() {
-      console.log("mtdDialogGetTableNameCancel cancelled");
+      console.log('mtdDialogGetTableNameCancel cancelled');
       this.dialogRenameTable.dialogShow = false;
       this.dialogRenameTable.defaultValue = null;
     },
     mtdTableCreate(table) {
       if (!this.menuItem) {
-        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir')
+        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir');
       }
       // const tables = table.name.split(',');
       this.$store.commit('notification/MutToggleProgressBar', true);
@@ -1233,58 +1285,54 @@ export default {
       setTimeout(() => {
         // for (let i = 0; i < tables.length; ++i) {
         if (table.name) {
-          this.$store.dispatch("tabs/ActAddTab", {
+          this.$store.dispatch('tabs/ActAddTab', {
             _nodes: {
               env: this.menuItem._nodes.env,
               dbAlias: this.menuItem._nodes.dbAlias,
               tn: table.name,
               _tn: table.alias,
-              type: "table",
+              type: 'table',
               dbKey: this.menuItem._nodes.dbKey,
               key: this.menuItem._nodes.key,
               dbConnection: this.menuItem._nodes.dbConnection,
-              newTable: table
+              newTable: table,
             },
-            name: table.alias
+            name: table.alias,
           });
         }
       });
       setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);
 
-
-      this.$set(this.dialogGetTableName, 'dialogShow', false)
+      this.$set(this.dialogGetTableName, 'dialogShow', false);
     },
     mtdViewCreate(view) {
-
       // const tables = table.name.split(',');
       this.$store.commit('notification/MutToggleProgressBar', true);
       this.dialogGetViewName.dialogShow = false;
       setTimeout(() => {
         // for (let i = 0; i < tables.length; ++i) {
         if (view.name) {
-          this.$store.dispatch("tabs/ActAddTab", {
+          this.$store.dispatch('tabs/ActAddTab', {
             _nodes: {
               env: this.menuItem._nodes.env,
               dbAlias: this.menuItem._nodes.dbAlias,
               view_name: view.name,
               _tn: view.alias,
-              type: "view",
+              type: 'view',
               dbKey: this.menuItem._nodes.key,
               key: this.menuItem._nodes.key,
               dbConnection: this.menuItem._nodes.dbConnection,
-              newView: true
+              newView: true,
             },
-            name: view.alias
+            name: view.alias,
           });
         }
       });
       setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);
 
-
-      this.$set(this.dialogGetTableName, 'dialogShow', false)
+      this.$set(this.dialogGetTableName, 'dialogShow', false);
     },
     mtdDialogGetTableNameSubmit(tn, cookie) {
-
       console.log(tn);
 
       let tables = tn.split(',');
@@ -1293,246 +1341,257 @@ export default {
       setTimeout(() => {
         for (let i = 0; i < tables.length; ++i) {
           if (tables[i]) {
-            this.$store.dispatch("tabs/ActAddTab", {
+            this.$store.dispatch('tabs/ActAddTab', {
               _nodes: {
                 env: this.menuItem._nodes.env,
                 dbAlias: this.menuItem._nodes.dbAlias,
                 tn: tables[i],
 
-                type: "table",
+                type: 'table',
                 dbKey: this.menuItem._nodes.dbKey,
                 key: this.menuItem._nodes.key,
                 dbConnection: this.menuItem._nodes.dbConnection,
 
-                newTable: true
+                newTable: true,
               },
-              name: tables[i]
+              name: tables[i],
             });
           }
         }
       });
       setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200);
-
     },
     mtdDialogGetTableNameCancel() {
-      console.log("mtdDialogGetTableNameCancel cancelled");
+      console.log('mtdDialogGetTableNameCancel cancelled');
       this.dialogGetTableName.dialogShow = false;
     },
     mtdDialogGetViewNameSubmit(view_name) {
       console.log(view_name);
-      this.$store.dispatch("tabs/ActAddTab", {
+      this.$store.dispatch('tabs/ActAddTab', {
         _nodes: {
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           view_name: view_name,
 
-          type: "view",
+          type: 'view',
           dbKey: this.menuItem._nodes.key,
           key: this.menuItem._nodes.key,
           dbConnection: this.menuItem._nodes.dbConnection,
 
-          newView: true
+          newView: true,
         },
-        name: view_name
+        name: view_name,
       });
       this.dialogGetViewName.dialogShow = false;
     },
     mtdDialogGetViewNameCancel() {
-      console.log("mtdDialogGetTableNameCancel cancelled");
+      console.log('mtdDialogGetTableNameCancel cancelled');
       this.dialogGetViewName.dialogShow = false;
     },
     mtdDialogGetFunctionNameSubmit(function_name) {
       console.log(function_name);
-      this.$store.dispatch("tabs/ActAddTab", {
+      this.$store.dispatch('tabs/ActAddTab', {
         _nodes: {
           dbKey: this.menuItem._nodes.dbKey,
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           function_name: function_name,
           newFunction: true,
-          type: "function",
+          type: 'function',
           key: this.menuItem._nodes.key,
-          dbConnection: this.menuItem._nodes.dbConnection
+          dbConnection: this.menuItem._nodes.dbConnection,
         },
-        name: function_name
+        name: function_name,
       });
       this.dialogGetFunctionName.dialogShow = false;
     },
     mtdDialogGetFunctionNameCancel() {
-      console.log("mtdDialogGetFunctionNameCancel cancelled");
+      console.log('mtdDialogGetFunctionNameCancel cancelled');
       this.dialogGetFunctionName.dialogShow = false;
     },
     mtdDialogGetProcedureNameSubmit(procedure_name) {
       console.log(procedure_name);
-      this.$store.dispatch("tabs/ActAddTab", {
+      this.$store.dispatch('tabs/ActAddTab', {
         _nodes: {
           dbKey: this.menuItem._nodes.dbKey,
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           procedure_name: procedure_name,
           newProcedure: true,
-          type: "procedure",
-          key: this.menuItem._nodes.key
+          type: 'procedure',
+          key: this.menuItem._nodes.key,
         },
-        name: procedure_name
+        name: procedure_name,
       });
       this.dialogGetProcedureName.dialogShow = false;
     },
     mtdDialogGetSequenceNameSubmit(sequence_name) {
       console.log(sequence_name);
-      this.$store.dispatch("tabs/ActAddTab", {
+      this.$store.dispatch('tabs/ActAddTab', {
         _nodes: {
           dbKey: this.menuItem._nodes.dbKey,
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           sequence_name: sequence_name,
           newSequence: true,
-          type: "sequence",
+          type: 'sequence',
           key: this.menuItem._nodes.key,
-          dbConnection: this.menuItem._nodes.dbConnection
+          dbConnection: this.menuItem._nodes.dbConnection,
         },
-        name: sequence_name
+        name: sequence_name,
       });
       this.dialogGetSequenceName.dialogShow = false;
     },
     mtdDialogGetProcedureNameCancel() {
-      console.log("mtdDialogGetProcedureNameCancel cancelled");
+      console.log('mtdDialogGetProcedureNameCancel cancelled');
       this.dialogGetProcedureName.dialogShow = false;
     },
     mtdDialogGetSequenceNameCancel() {
-      console.log("mtdDialogGetSequenceNameCancel cancelled");
+      console.log('mtdDialogGetSequenceNameCancel cancelled');
       this.dialogGetSequenceName.dialogShow = false;
     },
-    async renameSelectedNode(action = "", item) {
-      if (action === "showDialog") {
+    async renameSelectedNode(action = '', item) {
+      if (action === 'showDialog') {
         this.selectedNodeForRename = {
           dialog: true,
           item: item,
-          heading: `Rename ${item._nodes.type}`
+          heading: `Rename ${item._nodes.type}`,
         };
-      } else if (action === "hideDialog") {
+      } else if (action === 'hideDialog') {
         this.selectedNodeForDelete = {
           dialog: false,
           item: null,
-          heading: null
+          heading: null,
         };
       } else {
-
       }
     },
-    async deleteSelectedNode(action = "", item) {
-      if (action === "showDialog") {
+    async deleteSelectedNode(action = '', item) {
+      if (action === 'showDialog') {
         this.selectedNodeForDelete = {
           dialog: true,
           item: item,
-          heading: `Click Submit to Delete The ${item._nodes.type}`
+          heading: `Click Submit to Delete The ${item._nodes.type}`,
         };
-      } else if (action === "hideDialog") {
+      } else if (action === 'hideDialog') {
         this.selectedNodeForDelete = {
           dialog: false,
           item: null,
-          heading: null
+          heading: null,
         };
       } else {
         item = this.selectedNodeForDelete.item;
-        if (item._nodes.type === "table") {
-
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            env: item._nodes.env,
-            dbAlias: item._nodes.dbAlias,
-          }, 'columnList', {
-            tn: item._nodes.tn
-          }]);
+        if (item._nodes.type === 'table') {
+          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            {
+              env: item._nodes.env,
+              dbAlias: item._nodes.dbAlias,
+            },
+            'columnList',
+            {
+              tn: item._nodes.tn,
+            },
+          ]);
 
           await this.sqlMgr.sqlOpPlus(
             {
               env: item._nodes.env,
-              dbAlias: item._nodes.dbAlias
+              dbAlias: item._nodes.dbAlias,
             },
-            "tableDelete",
-            {tn: item._nodes.tn, columns: columns.data.list}
+            'tableDelete',
+            { tn: item._nodes.tn, columns: columns.data.list }
           );
           await this.loadTablesFromParentTreeNode({
             _nodes: {
-              ...item._nodes
-            }
+              ...item._nodes,
+            },
           });
           this.$toast.success('Table deleted successfully').goAway(3000);
-        } else if (item._nodes.type === "view") {
-          const view = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            env: item._nodes.env,
-            dbAlias: item._nodes.dbAlias
-          }, 'viewRead', {view_name: item._nodes.view_name}])
+        } else if (item._nodes.type === 'view') {
+          const view = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            {
+              env: item._nodes.env,
+              dbAlias: item._nodes.dbAlias,
+            },
+            'viewRead',
+            { view_name: item._nodes.view_name },
+          ]);
 
           await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: item._nodes.env,
-              dbAlias: item._nodes.dbAlias
+              dbAlias: item._nodes.dbAlias,
             },
-            "viewDelete",
+            'viewDelete',
             {
               view_name: item._nodes.view_name,
-              oldViewDefination: view.view_definition
-            }]
-          );
+              oldViewDefination: view.view_definition,
+            },
+          ]);
           await this.loadViewsFromParentTreeNode({
             _nodes: {
-              ...item._nodes
-            }
+              ...item._nodes,
+            },
           });
           this.$toast.success('View deleted successfully').goAway(3000);
-        } else if (item._nodes.type === "function") {
-
-          const _function = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            env: item._nodes.env,
-            dbAlias: item._nodes.dbAlias
-          }, 'functionRead', {
-            function_name: item._nodes.function_name
-          }]);
+        } else if (item._nodes.type === 'function') {
+          const _function = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            {
+              env: item._nodes.env,
+              dbAlias: item._nodes.dbAlias,
+            },
+            'functionRead',
+            {
+              function_name: item._nodes.function_name,
+            },
+          ]);
 
           await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: item._nodes.env,
-              dbAlias: item._nodes.dbAlias
+              dbAlias: item._nodes.dbAlias,
             },
-            "functionDelete",
+            'functionDelete',
             {
               function_name: item._nodes.function_name,
-              oldCreateFunction: _function.create_function
-            }
+              oldCreateFunction: _function.create_function,
+            },
           ]);
 
           await this.loadFunctionsFromParentTreeNode({
             _nodes: {
-              ...item._nodes
-            }
+              ...item._nodes,
+            },
           });
           this.$toast.success('Function deleted successfully').goAway(3000);
-        } else if (item._nodes.type === "procedure") {
-
-          const procedure = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
-            env: item._nodes.env,
-            dbAlias: item._nodes.dbAlias
-          }, 'procedureRead', {
-            procedure_name: item._nodes.procedure_name
-          }]);
+        } else if (item._nodes.type === 'procedure') {
+          const procedure = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            {
+              env: item._nodes.env,
+              dbAlias: item._nodes.dbAlias,
+            },
+            'procedureRead',
+            {
+              procedure_name: item._nodes.procedure_name,
+            },
+          ]);
 
           await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
             {
               env: item._nodes.env,
-              dbAlias: item._nodes.dbAlias
+              dbAlias: item._nodes.dbAlias,
             },
-            "procedureDelete",
+            'procedureDelete',
             {
               procedure_name: item._nodes.procedure_name,
-              create_procedure: procedure.create_procedure
-            }
+              create_procedure: procedure.create_procedure,
+            },
           ]);
 
           await this.loadProceduresFromParentTreeNode({
             _nodes: {
-              ...item._nodes
-            }
+              ...item._nodes,
+            },
           });
           this.$toast.success('Procedure deleted successfully').goAway(3000);
         }
@@ -1542,10 +1601,10 @@ export default {
         this.selectedNodeForDelete = {
           dialog: false,
           item: null,
-          heading: null
+          heading: null,
         };
       }
-    }
+    },
   },
   async created() {
     // this.loadDefaultTabs();
@@ -1553,22 +1612,19 @@ export default {
     const _id = this.$route.params.project;
 
     if (_id === 'external') {
-
     }
     await this.loadProjectsData(_id);
     this.loadDefaultTabs(true);
     this.loadRoles();
   },
-  beforeCreate() {
-  },
+  beforeCreate() {},
   mounted() {
-
     // this.setBorderWidth();
     // this.setEvents();
   },
   async destroyed() {
     await this.clearProjects();
-  }
+  },
 };
 </script>
 <style scoped>
@@ -1595,7 +1651,6 @@ export default {
   margin-right: 0;
 }
 
-
 @keyframes pulse {
   0% {
     transform: scale(1);
@@ -1625,11 +1680,13 @@ export default {
   animation-iteration-count: infinite;
 }
 
-/deep/ .advance-menu .v-list-item--dense, /deep/ .advance-menu .v-list--dense .v-list-item {
+/deep/ .advance-menu .v-list-item--dense,
+/deep/ .advance-menu .v-list--dense .v-list-item {
   min-height: 32px;
 }
 
-/deep/ .advance-menu .v-list-item--dense .v-list-item__icon, /deep/ .advance-menu .v-list--dense .v-list-item .v-list-item__icon {
+/deep/ .advance-menu .v-list-item--dense .v-list-item__icon,
+/deep/ .advance-menu .v-list--dense .v-list-item .v-list-item__icon {
   margin-top: 4px;
   margin-bottom: 4px;
 }
@@ -1642,10 +1699,9 @@ export default {
   min-width: auto;
 }
 
-
 .nested .action {
   opacity: 0;
-  transition: .4s opacity;
+  transition: 0.4s opacity;
 }
 
 .nested:hover .action {
@@ -1653,7 +1709,6 @@ export default {
 }
 </style>
 
-
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index 8592f29cff..efa8e4f8f4 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -2,50 +2,55 @@
   <v-navigation-drawer
     class="views-navigation-drawer"
     :style="{
-        maxWidth:toggleDrawer ? '0': '220px',
-        minWidth:toggleDrawer ? '0': '220px'
-      }">
+      maxWidth: toggleDrawer ? '0' : '220px',
+      minWidth: toggleDrawer ? '0' : '220px',
+    }"
+  >
     <v-container fluid class="h-100 py-0">
       <div class="d-flex flex-column h-100">
-
-        <div class="flex-grow-1" style="overflow: auto; min-height:350px">
+        <div class="flex-grow-1" style="overflow: auto; min-height: 350px">
           <v-list dense>
-
-
             <v-list-item dense>
               <!-- Views -->
               <span class="body-2 grey--text">{{ $t('nav_drawer.title') }}</span>
             </v-list-item>
-            <v-list-item-group
-              v-model="selectedViewIdLocal"
-              color="primary"
-            >
-
-              <v-list-item dense v-for="(view,i) in viewsList"
-                           :key="i"
-                           :value="view.id"
-                           active-class="x-active--text"
-                           class="body-2 text-capitalize view">
+            <v-list-item-group v-model="selectedViewIdLocal" color="primary">
+              <v-list-item
+                dense
+                v-for="(view, i) in viewsList"
+                :key="i"
+                :value="view.id"
+                active-class="x-active--text"
+                class="body-2 text-capitalize view"
+              >
                 <v-list-item-icon class="mr-n1">
-                  <v-icon color="primary" x-small v-if="viewIcons[view.show_as]"
-                          :color="viewIcons[view.show_as].color">{{ viewIcons[view.show_as].icon }}
+                  <v-icon
+                    color="primary"
+                    x-small
+                    v-if="viewIcons[view.show_as]"
+                    :color="viewIcons[view.show_as].color"
+                    >{{ viewIcons[view.show_as].icon }}
                   </v-icon>
                   <v-icon color="primary" small v-else>mdi-table</v-icon>
                 </v-list-item-icon>
                 <v-list-item-title>
                   <v-tooltip bottom>
-                    <template v-slot:activator="{on}">
-                      <div class="font-weight-regular" style="overflow: hidden; text-overflow: ellipsis">
+                    <template v-slot:activator="{ on }">
+                      <div
+                        class="font-weight-regular"
+                        style="overflow: hidden; text-overflow: ellipsis"
+                      >
                         <input
                           :ref="`input${i}`"
                           v-model="view.title"
-                          @click.stop v-if="view.edit"
+                          @click.stop
+                          v-if="view.edit"
                           @keydown.enter.stop="updateViewName(view)"
                           @blur="updateViewName(view)"
+                        />
+                        <template v-else
+                          ><span v-on="on">{{ view.alias || view.title }}</span></template
                         >
-                        <template
-                          v-else
-                        ><span v-on="on">{{ view.alias || view.title }}</span></template>
                       </div>
                     </template>
                     {{ view.alias || view.title }}
@@ -54,170 +59,205 @@
                 <v-spacer></v-spacer>
                 <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
                   <!-- Copy view -->
-                  <x-icon v-if="view.type === 'vtable' && !view.edit"
-                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.copy')"
-                          x-small color="primary"
-                          @click.stop="copyView(view,i)"
-                          iconClass="view-icon">
+                  <x-icon
+                    v-if="view.type === 'vtable' && !view.edit"
+                    v-bind:tooltip="$t('nav_drawer.virtual_views.action.copy')"
+                    x-small
+                    color="primary"
+                    @click.stop="copyView(view, i)"
+                    iconClass="view-icon"
+                  >
                     mdi-content-copy
                   </x-icon>
                   <!-- Rename view -->
-                  <x-icon v-if="view.type === 'vtable' && !view.edit"
-                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.rename')"
-                          x-small color="primary"
-                          @click.stop="showRenameTextBox(view,i)"
-                          iconClass="view-icon">
+                  <x-icon
+                    v-if="view.type === 'vtable' && !view.edit"
+                    v-bind:tooltip="$t('nav_drawer.virtual_views.action.rename')"
+                    x-small
+                    color="primary"
+                    @click.stop="showRenameTextBox(view, i)"
+                    iconClass="view-icon"
+                  >
                     mdi-pencil
                   </x-icon>
                   <!-- Delete view" -->
-                  <x-icon v-if="view.type === 'vtable'"
-                          v-bind:tooltip="$t('nav_drawer.virtual_views.action.delete')"
-                          small color="error" @click.stop="deleteView(view)"
-                          iconClass="view-icon">
+                  <x-icon
+                    v-if="view.type === 'vtable'"
+                    v-bind:tooltip="$t('nav_drawer.virtual_views.action.delete')"
+                    small
+                    color="error"
+                    @click.stop="deleteView(view)"
+                    iconClass="view-icon"
+                  >
                     mdi-delete-outline
                   </x-icon>
                 </template>
-                <v-icon v-if="view.id === selectedViewId" small class="check-icon">mdi-check-bold</v-icon>
-
-
+                <v-icon v-if="view.id === selectedViewId" small class="check-icon"
+                  >mdi-check-bold</v-icon
+                >
               </v-list-item>
-
             </v-list-item-group>
           </v-list>
           <template v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')">
-            <v-divider class="advance-menu-divider">
-            </v-divider>
+            <v-divider class="advance-menu-divider"> </v-divider>
 
-            <v-list dense :class="{
-                  'advanced-border' : overShieldIcon
-                }">
+            <v-list
+              dense
+              :class="{
+                'advanced-border': overShieldIcon,
+              }"
+            >
               <v-list-item dense>
                 <!-- Create a View -->
                 <span class="body-2 grey--text" @dblclick="enableDummyFeat = true">
-                  {{ $t('nav_drawer.virtual_views.title')}}
+                  {{ $t('nav_drawer.virtual_views.title') }}
                 </span>
                 <v-tooltip top>
-
-                  <template v-slot:activator="{on}">
-                    <x-icon v-on="on" color="pink grey"
-                            @mouseenter="overShieldIcon = true"
-                            @mouseleave="overShieldIcon = false"
-                            icon-class="ml-2" small>mdi-shield-lock-outline
+                  <template v-slot:activator="{ on }">
+                    <x-icon
+                      v-on="on"
+                      color="pink grey"
+                      @mouseenter="overShieldIcon = true"
+                      @mouseleave="overShieldIcon = false"
+                      icon-class="ml-2"
+                      small
+                      >mdi-shield-lock-outline
                     </x-icon>
                   </template>
                   <!-- Only visible to Creator -->
                   <span class="caption">
-                    {{ $t('nav_drawer.virtual_views.caption')}}
+                    {{ $t('nav_drawer.virtual_views.caption') }}
                   </span>
                 </v-tooltip>
               </v-list-item>
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
-                  <v-list-item v-on="on" dense @click="openCreateViewDlg('grid')"
-                               class="body-2">
+                <template v-slot:activator="{ on }">
+                  <v-list-item v-on="on" dense @click="openCreateViewDlg('grid')" class="body-2">
                     <v-list-item-icon class="mr-n1">
                       <v-icon color="blue" x-small>mdi-grid-large</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">
-                      <!-- Grid -->
-                      {{ $t('nav_drawer.virtual_views.grid')}}
-                      </span></v-list-item-title>
+                    <v-list-item-title
+                      ><span class="font-weight-regular">
+                        <!-- Grid -->
+                        {{ $t('nav_drawer.virtual_views.grid') }}
+                      </span></v-list-item-title
+                    >
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
-
                   </v-list-item>
                 </template>
                 <!-- Add Grid View -->
-                {{ $t('nav_drawer.virtual_views.grid.create')}}
+                {{ $t('nav_drawer.virtual_views.grid.create') }}
               </v-tooltip>
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
-                  <v-list-item v-on="on" dense @click="openCreateViewDlg('gallery')"
-                               class="body-2">
+                <template v-slot:activator="{ on }">
+                  <v-list-item v-on="on" dense @click="openCreateViewDlg('gallery')" class="body-2">
                     <v-list-item-icon class="mr-n1">
                       <v-icon color="orange" x-small>mdi-camera-image</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">
-                      <!-- Gallery -->
-                      
-                {{ $t('nav_drawer.virtual_views.gallery')}}
-                      </span></v-list-item-title>
+                    <v-list-item-title
+                      ><span class="font-weight-regular">
+                        <!-- Gallery -->
+
+                        {{ $t('nav_drawer.virtual_views.gallery') }}
+                      </span></v-list-item-title
+                    >
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
                   </v-list-item>
                 </template>
                 <!-- Add Gallery View -->
-                {{ $t('nav_drawer.virtual_views.gallery.create')}}
+                {{ $t('nav_drawer.virtual_views.gallery.create') }}
               </v-tooltip>
 
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
-                  <v-list-item v-on="on" dense @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"
-                               class="body-2">
+                <template v-slot:activator="{ on }">
+                  <v-list-item
+                    v-on="on"
+                    dense
+                    @click="enableDummyFeat ? openCreateViewDlg('calendar') : comingSoon()"
+                    class="body-2"
+                  >
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small>mdi-calendar</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">
-                      <!-- Calendar -->
-                      {{ $t('nav_drawer.virtual_views.calendar')}}
-                      </span></v-list-item-title>
+                    <v-list-item-title
+                      ><span class="font-weight-regular">
+                        <!-- Calendar -->
+                        {{ $t('nav_drawer.virtual_views.calendar') }}
+                      </span></v-list-item-title
+                    >
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
-
                   </v-list-item>
                 </template>
                 <!-- Add Calendar View -->
-                {{ $t('nav_drawer.virtual_views.calendar.create')}}
+                {{ $t('nav_drawer.virtual_views.calendar.create') }}
               </v-tooltip>
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
-                  <v-list-item v-on="on" dense @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"
-                               openClass="body-2">
+                <template v-slot:activator="{ on }">
+                  <v-list-item
+                    v-on="on"
+                    dense
+                    @click="enableDummyFeat ? openCreateViewDlg('kanban') : comingSoon()"
+                    openClass="body-2"
+                  >
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small>mdi-tablet-dashboard</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">
-                      <!-- Kanban -->
-                      {{ $t('nav_drawer.virtual_views.kanban')}}
-                      </span></v-list-item-title>
+                    <v-list-item-title
+                      ><span class="font-weight-regular">
+                        <!-- Kanban -->
+                        {{ $t('nav_drawer.virtual_views.kanban') }}
+                      </span></v-list-item-title
+                    >
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
-
                   </v-list-item>
                 </template>
                 <!-- Add Kanban View -->
-                {{ $t('nav_drawer.virtual_views.kanban.create')}}
+                {{ $t('nav_drawer.virtual_views.kanban.create') }}
               </v-tooltip>
               <v-tooltip bottom>
-                <template v-slot:activator="{on}">
-                  <v-list-item v-on="on" dense @click="$toast.info('Coming soon').goAway(3000)"
-                               class="body-2">
+                <template v-slot:activator="{ on }">
+                  <v-list-item
+                    v-on="on"
+                    dense
+                    @click="$toast.info('Coming soon').goAway(3000)"
+                    class="body-2"
+                  >
                     <v-list-item-icon class="mr-n1">
                       <v-icon x-small class="mt-n1">mdi-form-select</v-icon>
                     </v-list-item-icon>
-                    <v-list-item-title><span class="font-weight-regular">
-                      <!-- Form -->
+                    <v-list-item-title
+                      ><span class="font-weight-regular">
+                        <!-- Form -->
 
-                      {{ $t('nav_drawer.virtual_views.form')}}
-                      </span></v-list-item-title>
+                        {{ $t('nav_drawer.virtual_views.form') }}
+                      </span></v-list-item-title
+                    >
 
                     <v-spacer></v-spacer>
                     <v-icon class="mr-1" small>mdi-plus</v-icon>
-
                   </v-list-item>
                 </template>
                 <!-- Add Form View -->
-                {{ $t('nav_drawer.virtual_views.form.create')}}
+                {{ $t('nav_drawer.virtual_views.form.create') }}
               </v-tooltip>
             </v-list>
           </template>
         </div>
 
-        <div class="pa-2 sponsor-wrapper" v-if="(time - $store.state.windows.miniSponsorCard) > (15 * 60 * 1000) ">
-          <v-icon small class="close-icon" @click="hideMiniSponsorCard">mdi-close-circle-outline</v-icon>
+        <div
+          class="pa-2 sponsor-wrapper"
+          v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000"
+        >
+          <v-icon small class="close-icon" @click="hideMiniSponsorCard"
+            >mdi-close-circle-outline</v-icon
+          >
           <sponsor-mini :nav="true"></sponsor-mini>
         </div>
         <!--<div class="text-center">
@@ -235,25 +275,34 @@
 -->
         <div v-if="_isUIAllowed('table-advanced')">
           <v-divider></v-divider>
-          <v-list dense :class="{
-                  'advanced-border' : overAdvShieldIcon
-                }">
-
+          <v-list
+            dense
+            :class="{
+              'advanced-border': overAdvShieldIcon,
+            }"
+          >
             <v-list-item dense>
-              <span class="body-2 grey--text" @dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)">Advanced</span>
+              <span
+                class="body-2 grey--text"
+                @dblclick="$emit('update:showAdvanceOptions', !showAdvanceOptions)"
+                >Advanced</span
+              >
               <v-tooltip top>
-
-                <template v-slot:activator="{on}">
-                  <x-icon v-on="on" color="pink grey"
-                          @mouseenter="overAdvShieldIcon = true"
-                          @mouseleave="overAdvShieldIcon = false"
-                          icon-class="ml-2" small>mdi-shield-lock-outline
+                <template v-slot:activator="{ on }">
+                  <x-icon
+                    v-on="on"
+                    color="pink grey"
+                    @mouseenter="overAdvShieldIcon = true"
+                    @mouseleave="overAdvShieldIcon = false"
+                    icon-class="ml-2"
+                    small
+                    >mdi-shield-lock-outline
                   </x-icon>
                 </template>
                 <span class="caption">
                   <!-- Only visible to Creator -->
-                  {{$t('nav_drawer.virtual_views.caption')}}
-                  </span>
+                  {{ $t('nav_drawer.virtual_views.caption') }}
+                </span>
               </v-tooltip>
             </v-list-item>
             <!--            <v-tooltip bottom>-->
@@ -261,22 +310,24 @@
             <!--            <v-menu offset-x left>-->
             <!--              <template v-slot:activator="{on}">-->
             <v-list-item
-              v-show="selectedView && (selectedView.type === 'view' || selectedView.type === 'table')"
+              v-show="
+                selectedView && (selectedView.type === 'view' || selectedView.type === 'table')
+              "
               v-if="_isUIAllowed('shareview')"
               @click="genShareLink"
             >
               <v-icon x-small class="mr-2">mdi-open-in-new</v-icon>
-              <span class="caption"> 
+              <span class="caption">
                 <!-- Share View -->
                 {{ $t('nav_drawer.advanced.title1') }}
               </span>
               <v-spacer></v-spacer>
               <v-menu offset-y>
-                <template v-slot:activator="{on}">
+                <template v-slot:activator="{ on }">
                   <v-icon small @click.stop v-on="on">mdi-dots-vertical</v-icon>
                 </template>
                 <v-list dense>
-                  <v-list-item dense @click="$emit('showAdditionalFeatOverlay','shared-views')">
+                  <v-list-item dense @click="$emit('showAdditionalFeatOverlay', 'shared-views')">
                     <v-list-item-title>
                       <span class="font-weight-regular">
                         <!-- Views List -->
@@ -311,9 +362,8 @@
             <!--            </v-tooltip>-->
 
             <v-tooltip bottom>
-              <template v-slot:activator="{on}">
-                <v-list-item v-on="on"
-                             @click="copyapiUrlToClipboard">
+              <template v-slot:activator="{ on }">
+                <v-list-item v-on="on" @click="copyapiUrlToClipboard">
                   <v-icon x-small class="mr-2">mdi-content-copy</v-icon>
                   <!-- Copy API URL -->
                   <span class="caption">{{ $t('nav_drawer.advanced.option1') }}</span>
@@ -322,20 +372,15 @@
               <!-- Copy API URL -->
               {{ $t('nav_drawer.advanced.option1') }}
             </v-tooltip>
-            <template
-              v-if="_isUIAllowed('model')">
+            <template v-if="_isUIAllowed('model')">
               <v-divider class="advance-menu-divider"></v-divider>
               <slot></slot>
-
             </template>
           </v-list>
-
         </div>
-
       </div>
     </v-container>
 
-
     <create-view-dialog
       v-if="showCreateView"
       :nodes="nodes"
@@ -350,31 +395,24 @@
       :alias="meta._tn"
     ></create-view-dialog>
 
-
-    <v-dialog v-model="showShareModel"
-              max-width="650px"
-    >
+    <v-dialog v-model="showShareModel" max-width="650px">
       <v-card class="pa-3 backgroundColor">
         <v-container @click.stop>
           <h3 class="title mb-3">
             <!-- This view is shared via a private link -->
-            {{ $t('nav_drawer.share_view.title')}}
+            {{ $t('nav_drawer.share_view.title') }}
           </h3>
           <p class="grey&#45;&#45;text body-2">
             <!-- People with private link can only see cells visible in this view -->
           </p>
-          <div style="border-radius: 4px"
-               class="share-link-box body-2  pa-2 d-flex align-center">
+          <div style="border-radius: 4px" class="share-link-box body-2 pa-2 d-flex align-center">
             {{ shareLink.url }}
-            <v-spacer>
-            </v-spacer>
+            <v-spacer> </v-spacer>
             <a :href="shareLink.url" style="text-decoration: none" target="_blank">
               <v-icon small class="mx-2">mdi-open-in-new</v-icon>
             </a>
-            <v-icon small
-                    class="pointer"
-                    @click="copyShareUrlToClipboard"
-            >mdi-content-copy
+            <v-icon small class="pointer" @click="copyShareUrlToClipboard"
+              >mdi-content-copy
             </v-icon>
           </div>
 
@@ -382,11 +420,11 @@
             <template v-slot:label>
               <!-- Restrict access with a password -->
               <span class="caption" v-show="!passwordProtect">
-                {{ $t('nav_drawer.share_view.toggle.option1')}}
+                {{ $t('nav_drawer.share_view.toggle.option1') }}
               </span>
               <!-- Access is password restricted -->
               <span class="caption" v-show="passwordProtect">
-                {{ $t('nav_drawer.share_view.toggle.option2')}}
+                {{ $t('nav_drawer.share_view.toggle.option2') }}
               </span>
             </template>
           </v-switch>
@@ -396,47 +434,45 @@
               browser-autocomplete="new-password"
               class="password-field mr-2 caption"
               style="max-width: 230px"
-              :type="showShareLinkPassword ?  'text' : 'password'"
+              :type="showShareLinkPassword ? 'text' : 'password'"
               v-bind:hint="$t('nav_drawer.share_view.password.caption')"
               persistent-hint
               dense
               v-model="shareLink.password"
               solo
-              flat>
+              flat
+            >
               <template v-slot:append>
                 <v-icon small @click="showShareLinkPassword = !showShareLinkPassword">
                   {{ showShareLinkPassword ? 'visibility_off' : 'visibility' }}
                 </v-icon>
               </template>
-
             </v-text-field>
             <v-btn color="primary" class="caption" small @click="saveShareLinkPassword">
               <!-- Save password -->
-                {{ $t('nav_drawer.share_view.password.button')}}
+              {{ $t('nav_drawer.share_view.password.button') }}
             </v-btn>
           </div>
         </v-container>
-
       </v-card>
     </v-dialog>
-
   </v-navigation-drawer>
 </template>
 
 <script>
-import CreateViewDialog from "@/components/project/spreadsheet/dialog/createViewDialog";
-import SponsorMini from "@/components/sponsorMini";
+import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog';
+import SponsorMini from '@/components/sponsorMini';
 
 export default {
-  name: "spreadsheetNavDrawer",
-  components: {SponsorMini, CreateViewDialog},
+  name: 'spreadsheetNavDrawer',
+  components: { SponsorMini, CreateViewDialog },
   props: {
     showAdvanceOptions: Boolean,
     hideViews: Boolean,
     primaryValueColumn: [Number, String],
     toggleDrawer: {
       type: Boolean,
-      default: false
+      default: false,
     },
     nodes: Object,
     table: String,
@@ -450,7 +486,7 @@ export default {
     sortList: [Object, Array],
     load: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     currentApiUrl: String,
     fieldsOrder: Array,
@@ -469,11 +505,11 @@ export default {
     overShieldIcon: false,
     viewsList: [],
     viewIcons: {
-      grid: {icon: 'mdi-grid-large', color: 'blue'},
-      form: {icon: 'mdi-form-select', color: 'pink'},
-      calendar: {icon: 'mdi-calendar', color: 'purple'},
-      gallery: {icon: 'mdi-camera-image', color: 'orange'},
-      kanban: {icon: 'mdi-tablet-dashboard', color: 'green'},
+      grid: { icon: 'mdi-grid-large', color: 'blue' },
+      form: { icon: 'mdi-form-select', color: 'pink' },
+      calendar: { icon: 'mdi-calendar', color: 'purple' },
+      gallery: { icon: 'mdi-camera-image', color: 'orange' },
+      kanban: { icon: 'mdi-tablet-dashboard', color: 'green' },
     },
     copyViewRef: null,
     shareLink: {},
@@ -489,9 +525,10 @@ export default {
     selectedViewIdLocal: {
       get() {
         return this.selectedViewId;
-      }, set(id) {
+      },
+      set(id) {
         const selectedView = this.viewsList && this.viewsList.find(v => v.id === id);
-        let query_params = {}
+        let query_params = {};
 
         this.$emit('update:selectedViewId', id);
         this.$emit('update:selectedView', selectedView);
@@ -514,15 +551,15 @@ export default {
           this.$emit('mapFieldsAndShowFields');
         }
         this.$emit('loadTableData');
-      }
-    }
+      },
+    },
   },
   watch: {
     async load(v) {
       if (v) {
         await this.loadViews();
       }
-    }
+    },
   },
   methods: {
     hideMiniSponsorCard() {
@@ -533,7 +570,8 @@ export default {
       this.showCreateView = true;
     },
     isCentrallyAligned(col) {
-      return !['SingleLineText',
+      return ![
+        'SingleLineText',
         'LongText',
         'Attachment',
         'Date',
@@ -542,31 +580,40 @@ export default {
         'URL',
         'DateTime',
         'CreateTime',
-        'LastModifiedTime'].includes(col.uidt)
+        'LastModifiedTime',
+      ].includes(col.uidt);
     },
     onPasswordProtectChange() {
       if (!this.passwordProtect) {
         this.shareLink.password = null;
-        this.saveShareLinkPassword()
+        this.saveShareLinkPassword();
       }
     },
     async saveShareLinkPassword() {
       try {
-        await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'updateSharedViewLinkPassword', {
-          id: this.shareLink.id,
-          password: this.shareLink.password
-        }]);
+        await this.$store.dispatch('sqlMgr/ActSqlOp', [
+          { dbAlias: this.nodes.dbAlias },
+          'updateSharedViewLinkPassword',
+          {
+            id: this.shareLink.id,
+            password: this.shareLink.password,
+          },
+        ]);
         this.$toast.success('Successfully updated').goAway(3000);
       } catch (e) {
         this.$toast.error(e.message).goAway(3000);
       }
     },
     async loadViews() {
-      this.viewsList = await this.sqlOp({
-        dbAlias: this.nodes.dbAlias
-      }, 'xcVirtualTableList', {
-        tn: this.table
-      });
+      this.viewsList = await this.sqlOp(
+        {
+          dbAlias: this.nodes.dbAlias,
+        },
+        'xcVirtualTableList',
+        {
+          tn: this.table,
+        }
+      );
       this.selectedViewIdLocal = this.viewsList && this.viewsList[0] && this.viewsList[0].id;
     },
     // async onViewChange() {
@@ -587,15 +634,16 @@ export default {
     //   this.$emit('loadTableData');
     // },
     copyapiUrlToClipboard() {
-      this.$clipboard(this.currentApiUrl)
-      this.clipboardSuccessHandler()
-    }, async updateViewName(view) {
+      this.$clipboard(this.currentApiUrl);
+      this.clipboardSuccessHandler();
+    },
+    async updateViewName(view) {
       try {
-        await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableRename', {
+        await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableRename', {
           id: view.id,
           title: view.title,
           alias: view.alias,
-          parent_model_title: this.meta._tn
+          parent_model_title: this.meta._tn,
         });
         this.$toast.success('View renamed successfully').goAway(3000);
       } catch (e) {
@@ -608,39 +656,48 @@ export default {
       this.$nextTick(() => {
         const input = this.$refs[`input${i}`][0];
         input.focus();
-        input.setSelectionRange(0, input.value.length)
+        input.setSelectionRange(0, input.value.length);
       });
-    }, async deleteView(view) {
+    },
+    async deleteView(view) {
       try {
-        await this.sqlOp({dbAlias: this.nodes.dbAlias}, 'xcVirtualTableDelete', {
+        await this.sqlOp({ dbAlias: this.nodes.dbAlias }, 'xcVirtualTableDelete', {
           id: view.id,
           title: view.alias || view.title,
-          parent_model_title: this.table
+          parent_model_title: this.table,
         });
         this.$toast.success('View deleted successfully').goAway(3000);
         await this.loadViews();
       } catch (e) {
         this.$toast.error(e.message).goAway(3000);
       }
-    }, async genShareLink() {
+    },
+    async genShareLink() {
       this.showShareModel = true;
-      const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: this.nodes.dbAlias}, 'createSharedViewLink', {
-        model_name: this.table,
-        meta: this.meta,
-        query_params: {
-          where: this.concatenatedXWhere,
-          sort: this.sort,
-          fields: Object.keys(this.showFields).filter(f => this.showFields[f]).join(',')
+      const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+        { dbAlias: this.nodes.dbAlias },
+        'createSharedViewLink',
+        {
+          model_name: this.table,
+          meta: this.meta,
+          query_params: {
+            where: this.concatenatedXWhere,
+            sort: this.sort,
+            fields: Object.keys(this.showFields)
+              .filter(f => this.showFields[f])
+              .join(','),
+          },
+          password: this.sharedViewPassword,
         },
-        password: this.sharedViewPassword
-      }])
+      ]);
       this.shareLink = sharedViewUrl;
     },
     copyView(view, i) {
       this.createViewType = view.show_as;
       this.showCreateView = true;
       this.copyViewRef = view;
-    }, async onViewCreate(viewMeta) {
+    },
+    async onViewCreate(viewMeta) {
       this.copyViewRef = null;
       await this.loadViews();
       this.selectedViewIdLocal = viewMeta.id;
@@ -656,26 +713,26 @@ export default {
       document.body.removeChild(el);
     },
     clipboardSuccessHandler() {
-      this.$toast.info('Copied to clipboard').goAway(1000)
+      this.$toast.info('Copied to clipboard').goAway(1000);
     },
     copyShareUrlToClipboard() {
-      this.clipboard(this.shareLink.url)
-      this.clipboardSuccessHandler()
+      this.clipboard(this.shareLink.url);
+      this.clipboardSuccessHandler();
     },
-
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 ::v-deep {
-  .v-list-item--dense .v-list-item__icon, .v-list--dense .v-list-item .v-list-item__icon {
+  .v-list-item--dense .v-list-item__icon,
+  .v-list--dense .v-list-item .v-list-item__icon {
     margin-top: 4px;
     margin-bottom: 4px;
   }
 
-  .v-list-item--dense, .v-list--dense .v-list-item {
+  .v-list-item--dense,
+  .v-list--dense .v-list-item {
     min-height: 32px;
   }
 
@@ -685,12 +742,11 @@ export default {
     border-style: dashed;
     margin-top: 5px;
     margin-bottom: 5px;
-
   }
 
   .view .view-icon {
     display: none;
-    transition: .3s display;
+    transition: 0.3s display;
   }
 
   .view:hover .view-icon {
@@ -707,7 +763,7 @@ export default {
 
       .v-messages__message {
         color: grey;
-        font-size: .65rem;
+        font-size: 0.65rem;
       }
     }
 
@@ -729,8 +785,8 @@ export default {
   bottom: 0;
   right: 0;
   background: var(--v-primary-base);
-  opacity: .2;
-  content: "";
+  opacity: 0.2;
+  content: '';
   z-index: 1;
   pointer-events: none;
 }
@@ -739,7 +795,6 @@ export default {
   border-left: 1px solid #80808033;
 }
 
-
 .sponsor-wrapper {
   position: relative;
 
@@ -749,7 +804,7 @@ export default {
     top: 10px;
     z-index: 9;
     opacity: 0;
-    transition: .4s opacity;
+    transition: 0.4s opacity;
   }
 
   &:hover .close-icon {