From 891e22dc8057cb0ad6de4f0a3b9c4f19075bd5cb Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 20 Apr 2022 18:08:35 +0530
Subject: [PATCH] refactor: product analytics

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui/components/ProjectTreeView.vue     | 1315 ++++++++------
 packages/nc-gui/components/auth/apiTokens.vue |   70 +-
 .../components/auth/shareOrInviteModal.vue    |  219 ++-
 .../nc-gui/components/auth/userManagement.vue |  537 +++---
 packages/nc-gui/components/base/shareBase.vue |  164 +-
 .../nc-gui/components/createOrEditProject.vue | 1548 +++++++++--------
 packages/nc-gui/components/previewAs.vue      |  102 +-
 .../nc-gui/components/project/appStore.vue    |  128 +-
 .../projectMetadata/sync/metaDiffSync.vue     |  130 +-
 .../uiAcl/toggleTableUIAcl.vue                |  142 +-
 .../project/settings/appearance.vue           |    7 +-
 .../components/project/settings/xcMeta.vue    |  264 +--
 .../spreadsheet/components/columnFilter.vue   |  357 ++--
 .../components/columnFilterMenu.vue           |   84 +-
 .../spreadsheet/components/editColumn.vue     |  555 +++---
 .../components/editVirtualColumn.vue          |    2 +-
 .../spreadsheet/components/expandedForm.vue   |  476 +++--
 .../project/spreadsheet/components/extras.vue |   10 +-
 .../spreadsheet/components/fieldsMenu.vue     |  344 ++--
 .../spreadsheet/components/headerCell.vue     |    5 +-
 .../spreadsheet/components/lockMenu.vue       |   99 +-
 .../spreadsheet/components/moreActions.vue    |   18 +-
 .../spreadsheet/components/shareViewMenu.vue  |    2 +-
 .../spreadsheet/components/sortListMenu.vue   |  139 +-
 .../components/spreadsheetNavDrawer.vue       |  459 ++---
 .../components/virtualHeaderCell.vue          |    2 +-
 .../project/spreadsheet/rowsXcDataTable.vue   | 1203 +++++++------
 .../project/spreadsheet/views/formView.vue    |  776 +++++----
 .../project/spreadsheet/views/xcGridView.vue  |  668 ++++---
 packages/nc-gui/components/project/table.vue  |  112 +-
 .../components/project/tableTabs/webhooks.vue |  591 ++++---
 .../projectList/createNewProjectBtn.vue       |   84 +-
 packages/nc-gui/components/projectTabs.vue    |  396 ++---
 .../components/settings/settingsModal.vue     |    8 +-
 .../nc-gui/components/templates/editor.vue    | 1384 +++++++++------
 packages/nc-gui/components/utils/language.vue |  136 +-
 packages/nc-gui/global.d.ts                   |    1 +
 packages/nc-gui/layouts/default.vue           |  552 +++---
 packages/nc-gui/pages/project/xcdb.vue        |    2 +-
 packages/nc-gui/pages/projects/index.vue      |  716 ++++----
 packages/nc-gui/pages/projects/list.vue       |  158 +-
 .../pages/user/authentication/signin.vue      |    2 +-
 .../user/authentication/signup/index.vue      |    2 +-
 packages/nc-gui/plugins/tele.js               |    8 +-
 44 files changed, 7867 insertions(+), 6110 deletions(-)

diff --git a/packages/nc-gui/components/ProjectTreeView.vue b/packages/nc-gui/components/ProjectTreeView.vue
index 118e339d3f..822155ae78 100644
--- a/packages/nc-gui/components/ProjectTreeView.vue
+++ b/packages/nc-gui/components/ProjectTreeView.vue
@@ -1,13 +1,21 @@
 <template>
-  <div style="height: 100%" class="nc-tree-view" @mouseenter="onMiniHoverEnter" @mouseleave="onMiniHoverLeave">
+  <div
+    style="height: 100%"
+    class="nc-tree-view"
+    @mouseenter="onMiniHoverEnter"
+    @mouseleave="onMiniHoverLeave"
+  >
     <!--    :expand-on-hover="mini"-->
     <div
       class="primary nc-project-title theme--dark"
-      :class="{shared:sharedBase}"
+      :class="{ shared: sharedBase }"
     >
-      <img v-if="sharedBase" src="favicon-32.png" height="18" class="ml-2">
-      <h3 v-if="sharedBase" class="nc-project-title white--text text-capitalize">
-        {{ $store.getters['project/GtrProjectName'] }}
+      <img v-if="sharedBase" src="favicon-32.png" height="18" class="ml-2" />
+      <h3
+        v-if="sharedBase"
+        class="nc-project-title white--text text-capitalize"
+      >
+        {{ $store.getters["project/GtrProjectName"] }}
       </h3>
       <github-star-btn v-else />
     </div>
@@ -16,27 +24,35 @@
       v-model="navigation.shown"
       permanent
       mini-variant-width="50"
-      class=" nc-nav-drawer"
+      class="nc-nav-drawer"
       style="min-width: 100%; height: calc(100% - 30px)"
     >
       <div class="h-100 d-flex flex-column">
         <div class="flex-grow-1" style="overflow-y: auto; min-height: 200px">
-          <v-skeleton-loader v-if="!projects || !projects.length" class="mt-2 ml-2" type="button" />
+          <v-skeleton-loader
+            v-if="!projects || !projects.length"
+            class="mt-2 ml-2"
+            type="button"
+          />
           <v-text-field
             v-else
             v-model="search"
             :placeholder="$t('placeholder.searchProjectTree')"
             dense
             hide-details
-            class="elevation-0 mr-2  pl-3 pr-1 caption nc-table-list-filter"
+            class="elevation-0 mr-2 pl-3 pr-1 caption nc-table-list-filter"
           >
             <template #prepend-inner>
-              <v-icon small class="mt-2 ml-2 mr-1 ">
-                mdi-magnify
-              </v-icon>
+              <v-icon small class="mt-2 ml-2 mr-1"> mdi-magnify </v-icon>
             </template>
             <template #append>
-              <v-icon v-if="search" class="mt-3 mr-3" color="grey" x-small @click="search=''">
+              <v-icon
+                v-if="search"
+                class="mt-3 mr-3"
+                color="grey"
+                x-small
+                @click="search = ''"
+              >
                 mdi-close
               </v-icon>
             </template>
@@ -75,9 +91,7 @@
                     @click.stop="addTab({ ...item }, open, leaf)"
                   >
                     <template v-if="item._nodes.type === 'db'">
-                      <v-icon size="16">
-                        mdi-database
-                      </v-icon>
+                      <v-icon size="16"> mdi-database </v-icon>
                       <!--                  <img-->
                       <!--                    class="grey lighten-3"-->
                       <!--                    :width="16" :src="`/db-icons/${dbIcons[item._nodes.dbConnection.client]}`"/>-->
@@ -106,7 +120,8 @@
                         icons[item._nodes.type].class,
                         item.active ? 'font-weight-bold' : '',
                       ]"
-                    >{{ item.name }}</span>
+                      >{{ item.name }}</span
+                    >
                   </div>
                 </template>
                 <span>{{ item.tooltip || item.name }}</span>
@@ -114,7 +129,12 @@
             </template>
           </v-treeview>
           <v-container v-else fluid class="px-1 pt-0">
-            <v-list height="30" dense expand class="nc-project-tree nc-single-env-project-tree pt-1">
+            <v-list
+              height="30"
+              dense
+              expand
+              class="nc-project-tree nc-single-env-project-tree pt-1"
+            >
               <template v-for="item in listViewArr">
                 <!--                   v-if="item.children && item.children.length"-->
                 <v-list-group
@@ -123,14 +143,13 @@
                   color="textColor"
                   :value="isActiveList(item) || search"
                   @click="
-                    !(item.children && item.children.length) && addTab({ ...item }, false, false)
+                    !(item.children && item.children.length) &&
+                      addTab({ ...item }, false, false)
                   "
                   @contextmenu.prevent="showCTXMenu($event, item, true, false)"
                 >
                   <template #appendIcon>
-                    <v-icon small color="grey">
-                      mdi-chevron-down
-                    </v-icon>
+                    <v-icon small color="grey"> mdi-chevron-down </v-icon>
                   </template>
                   <template #activator>
                     <v-list-item-icon>
@@ -154,24 +173,59 @@
                     <v-list-item-title>
                       <v-tooltip v-if="!isNonAdminAccessAllowed(item)" top>
                         <template #activator="{ on }">
-                          <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium" v-on="on">
-                            {{ $t('objects.tables') }}<template v-if="item.children && item.children.length"> ({{
-                              item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
-                            }})</template></span>
-                          <span v-else class="body-2 font-weight-medium" v-on="on">
-                            {{ item.name }}</span>
+                          <span
+                            v-if="item.type === 'tableDir'"
+                            class="body-2 font-weight-medium"
+                            v-on="on"
+                          >
+                            {{ $t("objects.tables")
+                            }}<template
+                              v-if="item.children && item.children.length"
+                            >
+                              ({{
+                                item.children.filter(
+                                  (child) =>
+                                    !search ||
+                                    child.name
+                                      .toLowerCase()
+                                      .includes(search.toLowerCase())
+                                ).length
+                              }})</template
+                            ></span
+                          >
+                          <span
+                            v-else
+                            class="body-2 font-weight-medium"
+                            v-on="on"
+                          >
+                            {{ item.name }}</span
+                          >
                         </template>
                         <span class="caption">Only visible to Creator</span>
                       </v-tooltip>
-                      <template
-                        v-else
-                      >
-                        <span v-if="item.type === 'tableDir'" class="body-2 font-weight-medium">
-                          {{ $t('objects.tables') }}<template v-if="item.children && item.children.length"> ({{
-                            item.children.filter(child => !search || child.name.toLowerCase().includes(search.toLowerCase())).length
-                          }})</template></span>
+                      <template v-else>
+                        <span
+                          v-if="item.type === 'tableDir'"
+                          class="body-2 font-weight-medium"
+                        >
+                          {{ $t("objects.tables")
+                          }}<template
+                            v-if="item.children && item.children.length"
+                          >
+                            ({{
+                              item.children.filter(
+                                (child) =>
+                                  !search ||
+                                  child.name
+                                    .toLowerCase()
+                                    .includes(search.toLowerCase())
+                              ).length
+                            }})</template
+                          ></span
+                        >
                         <span v-else class="caption font-weight-regular">
-                          {{ item.name }}</span>
+                          {{ item.name }}</span
+                        >
                       </template>
                     </v-list-item-title>
 
@@ -180,43 +234,64 @@
                     <v-tooltip bottom>
                       <template #activator="{ on }">
                         <x-icon
-                          v-if="_isUIAllowed('treeview-add-button') && item.type !== 'viewDir'"
+                          v-if="
+                            _isUIAllowed('treeview-add-button') &&
+                            item.type !== 'viewDir'
+                          "
                           :color="['x-active', 'grey']"
                           small
                           v-on="on"
-                          @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">
                     <component
-                      :is="_isUIAllowed('treeview-drag-n-drop') ? 'draggable' : 'div'"
+                      :is="
+                        _isUIAllowed('treeview-drag-n-drop')
+                          ? 'draggable'
+                          : 'div'
+                      "
                       v-model="item.children"
                       draggable="div"
                       v-bind="dragOptions"
                       @change="onMove($event, item.children)"
                     >
-                      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+                      <transition-group
+                        type="transition"
+                        :name="!drag ? 'flip-list' : null"
+                      >
                         <v-list-item
                           v-for="child in item.children || []"
-                          v-show="!search || child.name.toLowerCase().includes(search.toLowerCase())"
+                          v-show="
+                            !search ||
+                            child.name
+                              .toLowerCase()
+                              .includes(search.toLowerCase())
+                          "
                           :key="child.key"
-                          v-t="['table:open']"
+                          v-t="['a:table:open']"
                           color="x-active"
                           active-class="font-weight-bold"
                           :selectable="true"
                           dense
-                          :value="`${(child._nodes && child._nodes).type || ''}||${
-                            (child._nodes && child._nodes.dbAlias) || ''
-                          }||${child.name}`"
+                          :value="`${
+                            (child._nodes && child._nodes).type || ''
+                          }||${(child._nodes && child._nodes.dbAlias) || ''}||${
+                            child.name
+                          }`"
                           class="nested ml-3 nc-draggable-child"
                           style="position: relative"
                           @click.stop="addTab({ ...child }, false, true)"
@@ -250,15 +325,24 @@
                           </v-list-item-icon>
                           <v-list-item-title>
                             <v-tooltip
-                              v-if="_isUIAllowed('creator_tooltip') && child.creator_tooltip"
+                              v-if="
+                                _isUIAllowed('creator_tooltip') &&
+                                child.creator_tooltip
+                              "
                               bottom
                             >
                               <template #activator="{ on }">
-                                <span class="caption" v-on="on" @dblclick="showSqlClient = true">
+                                <span
+                                  class="caption"
+                                  v-on="on"
+                                  @dblclick="showSqlClient = true"
+                                >
                                   {{ child.name }}
                                 </span>
                               </template>
-                              <span class="caption">{{ child.creator_tooltip }}</span>
+                              <span class="caption">{{
+                                child.creator_tooltip
+                              }}</span>
                             </v-tooltip>
                             <span v-else class="caption">{{ child.name }}</span>
                           </v-list-item-title>
@@ -269,7 +353,8 @@
                                 <template #activator="{ on }">
                                   <v-icon
                                     v-if="
-                                      _isUIAllowed('treeview-rename-button')||_isUIAllowed('ui-acl')
+                                      _isUIAllowed('treeview-rename-button') ||
+                                      _isUIAllowed('ui-acl')
                                     "
                                     small
                                     v-on="on"
@@ -280,14 +365,17 @@
 
                                 <v-list dense>
                                   <v-list-item
-                                    v-if="_isUIAllowed('treeview-rename-button')"
-                                    v-t="['table:rename:trigger:3-dot-menu']"
+                                    v-if="
+                                      _isUIAllowed('treeview-rename-button')
+                                    "
+                                    v-t="['c:table:rename:navdraw:options']"
                                     dense
                                     @click="
                                       menuItem = child;
                                       dialogRenameTable.cookie = child;
                                       dialogRenameTable.dialogShow = true;
-                                      dialogRenameTable.defaultValue = child.name;
+                                      dialogRenameTable.defaultValue =
+                                        child.name;
                                     "
                                   >
                                     <v-list-item-icon>
@@ -298,13 +386,13 @@
                                     <v-list-item-title>
                                       <span classs="caption">
                                         <!--Rename-->
-                                        {{ $t('general.rename') }}
+                                        {{ $t("general.rename") }}
                                       </span>
                                     </v-list-item-title>
                                   </v-list-item>
                                   <v-list-item
                                     v-if="_isUIAllowed('ui-acl')"
-                                    v-t="['table:trigger:ui-acl']"
+                                    v-t="['c:table:ui-acl']"
                                     dense
                                     @click="openUIACL(child)"
                                   >
@@ -316,7 +404,7 @@
                                     <v-list-item-title>
                                       <span classs="caption">
                                         <!--UI ACL-->
-                                        {{ $t('labels.uiAcl') }}
+                                        {{ $t("labels.uiAcl") }}
                                       </span>
                                     </v-list-item-title>
                                   </v-list-item>
@@ -332,8 +420,9 @@
                   </v-list-item-group>
                 </v-list-group>
                 <v-list-item
-                  v-else-if="(item.type !== 'sqlClientDir' || showSqlClient) &&
-                    (item.type !=='migrationsDir' || _isUIAllowed('audit'))
+                  v-else-if="
+                    (item.type !== 'sqlClientDir' || showSqlClient) &&
+                    (item.type !== 'migrationsDir' || _isUIAllowed('audit'))
                   "
                   :key="item.key"
                   :selectable="false"
@@ -369,7 +458,8 @@
                           class="caption font-weight-regular"
                           v-on="on"
                           @dblclick="showSqlClient = true"
-                        >{{ item.name }}</span>
+                          >{{ item.name }}</span
+                        >
                       </template>
                       <span class="caption">Only visible to Creator</span>
                     </v-tooltip>
@@ -377,7 +467,8 @@
                       v-else
                       class="caption font-weight-regular"
                       @dblclick="showSqlClient = true"
-                    >{{ item.name }}</span>
+                      >{{ item.name }}</span
+                    >
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -403,7 +494,9 @@
             <v-list-item>
               <v-list-item-title>
                 <!-- Settings -->
-                <span class="body-2 font-weight-medium">{{ $t('activity.settings') }}</span>
+                <span class="body-2 font-weight-medium">{{
+                  $t("activity.settings")
+                }}</span>
                 <v-tooltip top>
                   <template #activator="{ on }">
                     <x-icon
@@ -419,7 +512,7 @@
                     </x-icon>
                   </template>
                   <!-- Only visible to Creator -->
-                  <span class="caption">{{ $t('msg.info.onlyCreator') }}</span>
+                  <span class="caption">{{ $t("msg.info.onlyCreator") }}</span>
                 </v-tooltip>
               </v-list-item-title>
             </v-list-item>
@@ -428,104 +521,96 @@
               <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-list-item
-                    v-t="['settings:appstore']"
+                    v-t="['c:settings:appstore']"
                     dense
                     class="body-2 nc-settings-appstore"
                     @click="appsTabAdd"
                     v-on="on"
                   >
                     <v-list-item-icon>
-                      <v-icon x-small>
-                        mdi-storefront-outline
-                      </v-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('title.appStore')
+                        $t("title.appStore")
                       }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
                 <!-- App Store -->
-                {{ $t('title.appStore') }}
+                {{ $t("title.appStore") }}
               </v-tooltip>
 
               <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-list-item
-                    v-t="['settings:team-auth']"
+                    v-t="['c:settings:team-auth']"
                     dense
                     class="body-2 nc-settings-teamauth"
                     @click="rolesTabAdd"
                     v-on="on"
                   >
                     <v-list-item-icon>
-                      <v-icon x-small>
-                        mdi-account-group
-                      </v-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('title.team&auth')
+                        $t("title.team&auth")
                       }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
                 <!-- Roles & Users Management -->
-                {{ $t('title.rolesUserMgmt') }}
+                {{ $t("title.rolesUserMgmt") }}
               </v-tooltip>
               <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-list-item
-                    v-t="['settings:proj-metadata']"
+                    v-t="['c:settings:proj-metadata']"
                     dense
                     class="body-2 nc-settings-projmeta"
                     @click="disableOrEnableModelTabAdd"
                     v-on="on"
                   >
                     <v-list-item-icon>
-                      <v-icon x-small>
-                        mdi-table-multiple
-                      </v-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('title.projMeta')
+                        $t("title.projMeta")
                       }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
                 <!-- Meta Management -->
-                {{ $t('title.metaMgmt') }}
+                {{ $t("title.metaMgmt") }}
               </v-tooltip>
 
               <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-list-item
-                    v-t="['settings:audit']"
+                    v-t="['c:settings:audit']"
                     dense
                     class="body-2 nc-settings-audit"
                     @click="openAuditTab"
                     v-on="on"
                   >
                     <v-list-item-icon>
-                      <v-icon x-small>
-                        mdi-notebook-outline
-                      </v-icon>
+                      <v-icon x-small> mdi-notebook-outline </v-icon>
                     </v-list-item-icon>
                     <!-- Project Metadata -->
                     <v-list-item-title>
                       <span class="font-weight-regular caption">{{
-                        $t('title.audit')
+                        $t("title.audit")
                       }}</span>
                     </v-list-item-title>
                   </v-list-item>
                 </template>
                 <!-- Meta Management -->
-                {{ $t('title.auditLogs') }}
+                {{ $t("title.auditLogs") }}
               </v-tooltip>
             </template>
           </v-list>
@@ -534,16 +619,21 @@
           <v-list v-if="_isUIAllowed('previewAs') || previewAs" dense>
             <v-list-item>
               <!-- Preview as -->
-              <span class="body-2 font-weight-medium">{{ $t('activity.previewAs') }}</span>
-              <v-icon small class="ml-1">
-                mdi-drama-masks
-              </v-icon>
+              <span class="body-2 font-weight-medium">{{
+                $t("activity.previewAs")
+              }}</span>
+              <v-icon small class="ml-1"> mdi-drama-masks </v-icon>
             </v-list-item>
 
             <v-list dense>
               <div class="mx-4 d-flex align-center mb-2">
                 <template v-for="(role, i) in rolesList">
-                  <v-divider v-if="i" :key="i" vertical class="mx-2 caption grey--text" />
+                  <v-divider
+                    v-if="i"
+                    :key="i"
+                    vertical
+                    class="mx-2 caption grey--text"
+                  />
                   <div
                     :key="role.title"
                     :class="`pointer text-center nc-preview-${role.title}`"
@@ -559,18 +649,19 @@
                     <span
                       class="caption text-capitalize"
                       :class="{ 'x-active--text': role.title === previewAs }"
-                    >{{ role.title }}</span>
+                      >{{ role.title }}</span
+                    >
                   </div>
                 </template>
               </div>
               <template v-if="previewAs">
                 <!--                <v-divider></v-divider>-->
                 <v-list-item @click="setPreviewUSer(null)">
-                  <v-icon small class="mr-1">
-                    mdi-close
-                  </v-icon>
+                  <v-icon small class="mr-1"> mdi-close </v-icon>
                   <!-- Reset Preview -->
-                  <span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
+                  <span class="caption nc-preview-reset">{{
+                    $t("activity.resetReview")
+                  }}</span>
                 </v-list-item>
               </template>
             </v-list>
@@ -582,11 +673,13 @@
 
           <div class="pt-3 pl-5 pr-3 d-flex align-center pb-2">
             <settings-modal>
-              <template #default="{click}">
-                <div v-t="['project-settings']" class="caption pointer nc-team-settings" @click="click">
-                  <v-icon color="brown" small class="mr-1">
-                    mdi-cog
-                  </v-icon>
+              <template #default="{ click }">
+                <div
+                  v-t="['c:navdraw:project-settings']"
+                  class="caption pointer nc-team-settings"
+                  @click="click"
+                >
+                  <v-icon color="brown" small class="mr-1"> mdi-cog </v-icon>
                   Team & Settings
                 </div>
               </template>
@@ -595,17 +688,15 @@
         </template>
 
         <div
-          v-t="['api-docs']"
+          v-t="['e:api-docs']"
           class="caption pointer nc-docs pb-3 pl-5 pr-3 pt-2 d-flex align-center"
           @click="openLink('https://apis.nocodb.com')"
         >
-          <v-icon small class="mr-2">
-            mdi-api
-          </v-icon>
+          <v-icon small class="mr-2"> mdi-api </v-icon>
           API Docs
         </div>
         <v-divider />
-        <extras class="pl-1 " />
+        <extras class="pl-1" />
       </div>
     </v-navigation-drawer>
 
@@ -673,26 +764,26 @@
 <script>
 /* eslint-disable */
 
-import {mapMutations, mapGetters, mapActions} from 'vuex'
+import { mapMutations, mapGetters, mapActions } from "vuex";
 
-import rightClickOptions from '../helpers/rightClickOptions'
-import rightClickOptionsSub from '../helpers/rightClickOptionsSub'
-import icons from '../helpers/treeViewIcons'
+import rightClickOptions from "../helpers/rightClickOptions";
+import rightClickOptionsSub from "../helpers/rightClickOptionsSub";
+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 {validateTableName} from '~/helpers'
-import ExcelImport from '~/components/import/excelImport'
+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 { validateTableName } from "~/helpers";
+import ExcelImport from "~/components/import/excelImport";
 
-import draggable from 'vuedraggable'
-import GithubStarBtn from '~/components/githubStarBtn'
-import SettingsModal from '~/components/settings/settingsModal'
-import Language from '~/components/utils/language'
-import Extras from '~/components/project/spreadsheet/components/extras'
+import draggable from "vuedraggable";
+import GithubStarBtn from "~/components/githubStarBtn";
+import SettingsModal from "~/components/settings/settingsModal";
+import Language from "~/components/utils/language";
+import Extras from "~/components/project/spreadsheet/components/extras";
 
 export default {
   components: {
@@ -709,35 +800,39 @@ export default {
     dlgLabelSubmitCancel,
   },
   props: {
-    sharedBase: Boolean
+    sharedBase: Boolean,
   },
   data: () => ({
     treeViewStatus: {},
     drag: false,
     dragOptions: {
       animation: 200,
-      group: 'description',
+      group: "description",
       disabled: false,
-      ghostClass: 'ghost'
+      ghostClass: "ghost",
     },
     roleIcon: {
-      owner: 'mdi-account-star',
-      creator: 'mdi-account-hard-hat',
-      editor: 'mdi-account-edit',
-      viewer: 'mdi-eye-outline',
-      commenter: 'mdi-comment-account-outline',
+      owner: "mdi-account-star",
+      creator: "mdi-account-hard-hat",
+      editor: "mdi-account-edit",
+      viewer: "mdi-eye-outline",
+      commenter: "mdi-comment-account-outline",
     },
-    rolesList: [{title: 'editor'}, {title: 'commenter'}, {title: 'viewer'}],
+    rolesList: [
+      { title: "editor" },
+      { title: "commenter" },
+      { title: "viewer" },
+    ],
     showSqlClient: false,
     nestedMenu: {},
     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,
@@ -755,80 +850,84 @@ 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,
     },
     selectedNodeForDelete: {
       dialog: false,
       item: null,
-      heading: null
+      heading: null,
     },
   }),
   computed: {
     previewAs: {
       get() {
-        return this.$store.state.users.previewAs
+        return this.$store.state.users.previewAs;
       },
       set(previewAs) {
-        this.$store.commit('users/MutPreviewAs', 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
+      return (item, search, textKey) => item[textKey].indexOf(search) > -1;
     },
     hideNode() {
       return {
-        sqlClientDir: !this._isUIAllowed('sqlClientDir'),
-        migrationsDir: !this._isUIAllowed('migrationsDir'),
-        functionDir: !this._isUIAllowed('functionDir'),
-        procedureDir: !this._isUIAllowed('procedureDir'),
-      }
+        sqlClientDir: !this._isUIAllowed("sqlClientDir"),
+        migrationsDir: !this._isUIAllowed("migrationsDir"),
+        functionDir: !this._isUIAllowed("functionDir"),
+        procedureDir: !this._isUIAllowed("procedureDir"),
+      };
     },
     isTreeView() {
       return (
@@ -840,7 +939,7 @@ export default {
               (this.projects[0].children[0] &&
                 this.projects[0].children[0].children &&
                 this.projects[0].children[0].children.length > 1))))
-      )
+      );
     },
     listViewArr() {
       return (
@@ -852,18 +951,31 @@ export default {
           this.projects[0].children[0].children[0] &&
           this.projects[0].children[0].children[0].children) ||
         []
-      )
+      );
     },
   },
   methods: {
     async onMove(event, children) {
-
       if (children.length - 1 === event.moved.newIndex) {
-        this.$set(children[event.moved.newIndex], 'order', children[event.moved.newIndex - 1].order + 1)
+        this.$set(
+          children[event.moved.newIndex],
+          "order",
+          children[event.moved.newIndex - 1].order + 1
+        );
       } else if (event.moved.newIndex === 0) {
-        this.$set(children[event.moved.newIndex], 'order', children[1].order / 2)
+        this.$set(
+          children[event.moved.newIndex],
+          "order",
+          children[1].order / 2
+        );
       } else {
-        this.$set(children[event.moved.newIndex], 'order', (children[event.moved.newIndex - 1].order + children[event.moved.newIndex + 1].order) / 2)
+        this.$set(
+          children[event.moved.newIndex],
+          "order",
+          (children[event.moved.newIndex - 1].order +
+            children[event.moved.newIndex + 1].order) /
+            2
+        );
       }
 
       // await this.$store.dispatch('sqlMgr/ActSqlOp', [{dbAlias: 'db'}, 'xcModelOrderSet', {
@@ -871,30 +983,32 @@ export default {
       //   order: children[event.moved.newIndex].order,
       // }])
       await this.$api.dbTable.reorder(children[event.moved.newIndex].id, {
-        order: children[event.moved.newIndex].order
-      })
-
+        order: children[event.moved.newIndex].order,
+      });
     },
     openUIACL(child) {
-      this.disableOrEnableModelTabAdd()
+      this.disableOrEnableModelTabAdd();
       setTimeout(() => {
         this.$router.push({
           query: {
             ...this.$route.query,
-            nested_1: (child && child._nodes && child._nodes.dbConnection && child._nodes.dbConnection.id) + 'acl'
+            nested_1:
+              (child &&
+                child._nodes &&
+                child._nodes.dbConnection &&
+                child._nodes.dbConnection.id) + "acl",
           },
-        })
-      }, 100)
-    },/*
+        });
+      }, 100);
+    } /*
     setPreviewUSer(previewAs) {
-      this.$tele.emit(`preview-as:${previewAs}`)
       if (!process.env.EE) {
         this.$toast.info('Available in Enterprise edition').goAway(3000);
       } else {
         this.previewAs = previewAs;
         window.location.reload();
       }
-    },*/
+    },*/,
     async loadRoles() {
       // if (this.$store.getters['users/GtrIsAdmin']) {
       //   const roles = (
@@ -914,27 +1028,30 @@ export default {
       // }
     },
     appsTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === `appStore`)
+      const tabIndex = this.tabs.findIndex((el) => el.key === `appStore`);
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
         let item = {
-          name: 'App Store',
-          key: `appStore`
-        }
-        item._nodes = {env: '_noco'}
-        item._nodes.type = 'appStore'
-        this.$store.dispatch('tabs/ActAddTab', item)
+          name: "App Store",
+          key: `appStore`,
+        };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "appStore";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     isNonAdminAccessAllowed(item) {
-      return ['tableDir', 'viewDir'].includes(item.type)
+      return ["tableDir", "viewDir"].includes(item.type);
     },
     changeTheme() {
-      this.$store.dispatch('windows/ActToggleDarkMode', !this.$store.state.windows.darkTheme)
+      this.$store.dispatch(
+        "windows/ActToggleDarkMode",
+        !this.$store.state.windows.darkTheme
+      );
     },
     openLink(link) {
-      window.open(link, '_blank')
+      window.open(link, "_blank");
     },
 
     /*    settingsTabAdd() {
@@ -952,140 +1069,147 @@ export default {
         },*/
 
     rolesTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === `roles`)
+      const tabIndex = this.tabs.findIndex((el) => el.key === `roles`);
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
         let item = {
-          name: `${this.$t('title.team&auth')} `,
-          key: `roles`
-        }
-        item._nodes = {env: '_noco'}
-        item._nodes.type = 'roles'
-        this.$store.dispatch('tabs/ActAddTab', item)
+          name: `${this.$t("title.team&auth")} `,
+          key: `roles`,
+        };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "roles";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     disableOrEnableModelTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === `disableOrEnableModel`)
+      const tabIndex = this.tabs.findIndex(
+        (el) => el.key === `disableOrEnableModel`
+      );
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
         let item = {
-          name: `${this.$t('title.metaMgmt')}`,
-          key: `disableOrEnableModel`
-        }
-        item._nodes = {env: '_noco'}
-        item._nodes.type = 'disableOrEnableModel'
-        this.$store.dispatch('tabs/ActAddTab', item)
+          name: `${this.$t("title.metaMgmt")}`,
+          key: `disableOrEnableModel`,
+        };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "disableOrEnableModel";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     openAuditTab() {
-      const tabIndex = this.tabs.findIndex(el => el.key === `migrationsDir`)
+      const tabIndex = this.tabs.findIndex((el) => el.key === `migrationsDir`);
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
         let item = {
-          name: `${this.$t('title.audit')}`,
-          key: `migrationsDir`
-        }
+          name: `${this.$t("title.audit")}`,
+          key: `migrationsDir`,
+        };
         item._nodes = {
-          env: '_noco',
-          dbAlias: 'db'
-        }
-        item._nodes.type = 'migrationsDir'
-        item._nodes.dbKey = ''
-        this.$store.dispatch('tabs/ActAddTab', item)
+          env: "_noco",
+          dbAlias: "db",
+        };
+        item._nodes.type = "migrationsDir";
+        item._nodes.dbKey = "";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     toggleMini() {
-      this.$store.commit('panelSize/MutSize', {
-        type: 'treeView',
+      this.$store.commit("panelSize/MutSize", {
+        type: "treeView",
         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
-        this.$refs.drawer.width = el.style.width = '320px'
-        this.miniExpanded = true
+        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
-        this.navigation.width = this.$refs.drawer.width = el.style.width = '50px'
-        this.miniExpanded = false
+        const el = this.$refs.drawer.$el;
+        this.navigation.width =
+          this.$refs.drawer.width =
+          el.style.width =
+            "50px";
+        this.miniExpanded = false;
       }
     },
     onExcelImport() {
-      if (!this.menuItem || this.menuItem.type !== 'tableDir') {
-        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir')
+      if (!this.menuItem || this.menuItem.type !== "tableDir") {
+        this.menuItem = this.listViewArr.find((n) => n.type === "tableDir");
       }
-      this.loadTables(this.menuItem)
+      this.loadTables(this.menuItem);
     },
     ...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) {
-          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) {
-          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) {
-          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) {
-          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') {
-          return
+          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) {
+          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) {
+          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) {
+          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) {
+          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") {
+          return;
         } else {
           // const tabIndex = this.tabs.findIndex(el => el.key === item.key);
-          const tabIndex = this.tabs.findIndex(el => {
+          const tabIndex = this.tabs.findIndex((el) => {
             return (
               ((!el._nodes && !item._nodes) ||
                 (el._nodes &&
@@ -1093,83 +1217,88 @@ export default {
                   el._nodes.type === item._nodes.type &&
                   el._nodes.dbAlias === item._nodes.dbAlias)) &&
               item.name === el.name
-            )
-          })
+            );
+          });
           if (tabIndex !== -1) {
-            this.changeActiveTab(tabIndex)
+            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
+              return;
             }
-            if (item._nodes.type === 'table') {
-              let tableIndex = +item._nodes.key.split('.').pop()
-              if (!(await this.$store.dispatch('windows/ActCheckMaxTable', {tableIndex}))) {
-                return
+            if (item._nodes.type === "table") {
+              let tableIndex = +item._nodes.key.split(".").pop();
+              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)
+        console.log(e);
       } finally {
         //this.$store.commit('notification/MutToggleProgressBar', false);
       }
     },
     isActiveList(item) {
-      return true//this.treeViewStatus[item.type] = this.treeViewStatus[item.type]  || item.type === this.$route.query.type || item.type === `${this.$route.query.type}Dir`;
+      return true; //this.treeViewStatus[item.type] = this.treeViewStatus[item.type]  || 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)
+          this.$store.getters["project/GtrProjectPrefix"] &&
+          ["functionDir", "procedureDir"].includes(item.type)
         ) &&
-        (['tableDir', 'viewDir'].includes(item.type) || this._isUIAllowed('advanced'))
-      )
+        (["tableDir", "viewDir"].includes(item.type) ||
+          this._isUIAllowed("advanced"))
+      );
     },
     showCTXMenu(e, item, open, leaf) {
-      if (!this._isUIAllowed('treeViewContextMenu')) {
-        return
+      if (!this._isUIAllowed("treeViewContextMenu")) {
+        return;
       }
       if (!item) {
-        return
+        return;
       }
-      e.preventDefault()
-      e.stopPropagation()
-      this.x = e.clientX
-      this.y = e.clientY
-      this.menuItem = item
+      e.preventDefault();
+      e.stopPropagation();
+      this.x = e.clientX;
+      this.y = e.clientY;
+      this.menuItem = item;
 
       this.$nextTick(() => {
-        this.menuVisible = true
-      })
+        this.menuVisible = true;
+      });
     },
     async loadProjectsData(id = null) {
       try {
-        this.$store.commit('tabs/clear')
-        this.loadingProjects = true
-        await this.loadProjects(id)
+        this.$store.commit("tabs/clear");
+        this.loadingProjects = true;
+        await this.loadProjects(id);
 
-        if ('toast' in this.$route.query) {
+        if ("toast" in this.$route.query) {
           this.$toast
             .success(
               `Successfully generated ${(
-                this.$store.getters['project/GtrProjectType'] || ''
+                this.$store.getters["project/GtrProjectType"] || ""
               ).toUpperCase()} APIs`,
               {
-                position: 'top-center',
+                position: "top-center",
               }
             )
-            .goAway(5000)
+            .goAway(5000);
         }
 
         try {
@@ -1177,32 +1306,38 @@ export default {
             this.projects[0].key,
             this.projects[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
+        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
+        return;
       }
-      let options = rightClickOptions[this.menuItem._nodes.type]
-      if (!this.$store.getters['users/GtrIsAdmin']) {
-        options = rightClickOptionsSub[this.menuItem._nodes.type]
+      let options = rightClickOptions[this.menuItem._nodes.type];
+      if (!this.$store.getters["users/GtrIsAdmin"]) {
+        options = rightClickOptionsSub[this.menuItem._nodes.type];
       }
-      return options
+      return options;
       // if (options) {
       //   return Object.keys(options).map(k => typeof options[k] === 'object' ? Object.keys(options[k]) : k);
       // }
@@ -1211,136 +1346,147 @@ export default {
     isNested(item) {
       return (
         (item.children && item.children.length) ||
-        ['tableDir', 'viewDir', 'functionDir', 'procedureDir', 'sequenceDir'].includes(item.type)
-      )
+        [
+          "tableDir",
+          "viewDir",
+          "functionDir",
+          "procedureDir",
+          "sequenceDir",
+        ].includes(item.type)
+      );
     },
     validateUniqueAlias(v) {
-      return (this.$store.state.project.tables || []).every(t => this.dialogRenameTable.cookie.id === t.id || t.title !== (v || '')) || 'Duplicate table alias'
+      return (
+        (this.$store.state.project.tables || []).every(
+          (t) =>
+            this.dialogRenameTable.cookie.id === t.id || t.title !== (v || "")
+        ) || "Duplicate table alias"
+      );
     },
     async handleCreateBtnClick(type, item) {
-      this.menuItem = item
+      this.menuItem = item;
       switch (type) {
-        case 'tableDir':
-          this.dialogGetTableName.dialogShow = true
-          break
-        case 'viewDir':
-          this.dialogGetViewName.dialogShow = true
-          break
-        case 'functionDir':
-          this.dialogGetFunctionName.dialogShow = true
-          break
-        case 'procedureDir':
-          this.dialogGetProcedureName.dialogShow = true
-          break
-        case 'sequenceDir':
-          this.dialogGetSequenceName.dialogShow = true
-          break
+        case "tableDir":
+          this.dialogGetTableName.dialogShow = true;
+          break;
+        case "viewDir":
+          this.dialogGetViewName.dialogShow = true;
+          break;
+        case "functionDir":
+          this.dialogGetFunctionName.dialogShow = true;
+          break;
+        case "procedureDir":
+          this.dialogGetProcedureName.dialogShow = true;
+          break;
+        case "sequenceDir":
+          this.dialogGetSequenceName.dialogShow = true;
+          break;
       }
-      this.$tele.emit('table:create:trigger:mdi-plus-circle')
+      this.$e("c:table:create:navdraw");
     },
 
     async handleCTXMenuClick(actionStr) {
       ///this.$store.commit('notification/MutToggleProgressBar', true);
 
       try {
-        const item = this.menuItem
+        const item = this.menuItem;
         // const options = rightClickOptions[this.menuItem._nodes.type];
-        const action = actionStr //options[actionStr];
-        this.$tele.emit(action)
+        const action = actionStr; //options[actionStr];
+        // this.$e(action)
 
         if (action) {
-          if (action === 'ENV_DB_TABLES_CREATE') {
-            this.dialogGetTableName.dialogShow = true
-            this.$tele.emit('table:create:trigger:right-click')
-          } else if (action === 'ENV_DB_VIEWS_CREATE') {
-            this.dialogGetViewName.dialogShow = true
-          } else if (action === 'ENV_DB_PROCEDURES_CREATE') {
-            this.dialogGetProcedureName.dialogShow = true
-          } else if (action === 'ENV_DB_SEQUENCES_CREATE') {
-            this.dialogGetSequenceName.dialogShow = true
-          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
-            this.dialogGetFunctionName.dialogShow = true
-          } else if (action === 'ENV_DB_FUNCTIONS_CREATE') {
-            this.dialogGetFunctionName.dialogShow = true
-          } else if (action === 'ENV_DB_TABLES_REFRESH') {
-            await this.loadTables(this.menuItem)
-            this.$toast.success('Tables refreshed').goAway(1000)
-            this.$tele.emit('table:refresh')
-          } else if (action === 'ENV_DB_VIEWS_REFRESH') {
-            await this.loadViews(this.menuItem)
-            this.$toast.success('Views refreshed').goAway(1000)
-          } else if (action === 'IMPORT_EXCEL') {
-            this.excelImportDialog = true
-          } 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') {
-            await this.loadProcedures(this.menuItem)
-            this.$toast.success('Procedures refreshed').goAway(1000)
-          } 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') {
-            this.dialogRenameTable.cookie = item
-            this.dialogRenameTable.dialogShow = true
-            this.dialogRenameTable.defaultValue = item.name
-            this.$tele.emit('table:rename:trigger:right-click')
-          } else if (action === 'ENV_DB_MIGRATION_DOWN') {
+          if (action === "ENV_DB_TABLES_CREATE") {
+            this.dialogGetTableName.dialogShow = true;
+            this.$e("c:table:create:navdraw:right-click");
+          } else if (action === "ENV_DB_VIEWS_CREATE") {
+            this.dialogGetViewName.dialogShow = true;
+          } else if (action === "ENV_DB_PROCEDURES_CREATE") {
+            this.dialogGetProcedureName.dialogShow = true;
+          } else if (action === "ENV_DB_SEQUENCES_CREATE") {
+            this.dialogGetSequenceName.dialogShow = true;
+          } else if (action === "ENV_DB_FUNCTIONS_CREATE") {
+            this.dialogGetFunctionName.dialogShow = true;
+          } else if (action === "ENV_DB_FUNCTIONS_CREATE") {
+            this.dialogGetFunctionName.dialogShow = true;
+          } else if (action === "ENV_DB_TABLES_REFRESH") {
+            await this.loadTables(this.menuItem);
+            this.$toast.success("Tables refreshed").goAway(1000);
+            this.$e("a:table:refresh:navdraw");
+          } else if (action === "ENV_DB_VIEWS_REFRESH") {
+            await this.loadViews(this.menuItem);
+            this.$toast.success("Views refreshed").goAway(1000);
+          } else if (action === "IMPORT_EXCEL") {
+            this.excelImportDialog = true;
+          } 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") {
+            await this.loadProcedures(this.menuItem);
+            this.$toast.success("Procedures refreshed").goAway(1000);
+          } 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") {
+            this.dialogRenameTable.cookie = item;
+            this.dialogRenameTable.dialogShow = true;
+            this.dialogRenameTable.defaultValue = item.name;
+            this.$e("c:table:rename:navdraw:right-click");
+          } 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,
-            })
-          } 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 === "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"
           ) {
-            this.deleteSelectedNode('showDialog', item)
-          } else if (action === 'ENV_DB_TABLES_CREATE_STATEMENT') {
+            this.deleteSelectedNode("showDialog", item);
+          } else if (action === "ENV_DB_TABLES_CREATE_STATEMENT") {
             await this.handleSqlStatementGeneration(
               item,
-              'tableCreateStatement',
+              "tableCreateStatement",
               `${item.name} Create Statement copied`
-            )
-          } else if (action === 'ENV_DB_TABLES_INSERT_STATEMENT') {
+            );
+          } else if (action === "ENV_DB_TABLES_INSERT_STATEMENT") {
             await this.handleSqlStatementGeneration(
               item,
-              'tableInsertStatement',
+              "tableInsertStatement",
               `${item.name} Insert Statement copied`
-            )
-          } else if (action === 'ENV_DB_TABLES_UPDATE_STATEMENT') {
+            );
+          } else if (action === "ENV_DB_TABLES_UPDATE_STATEMENT") {
             await this.handleSqlStatementGeneration(
               item,
-              'tableUpdateStatement',
+              "tableUpdateStatement",
               `${item.name} Update Statement copied`
-            )
-          } else if (action === 'ENV_DB_TABLES_DELETE_STATEMENT') {
+            );
+          } else if (action === "ENV_DB_TABLES_DELETE_STATEMENT") {
             await this.handleSqlStatementGeneration(
               item,
-              'tableSelectStatement',
+              "tableSelectStatement",
               `${item.name} Delete Statement copied`
-            )
-          } else if (action === 'ENV_DB_TABLES_SELECT_STATEMENT') {
+            );
+          } else if (action === "ENV_DB_TABLES_SELECT_STATEMENT") {
             await this.handleSqlStatementGeneration(
               item,
-              'tableDeleteStatement',
+              "tableDeleteStatement",
               `${item.name} Select Statement copied`
-            )
+            );
           } else {
-            console.log(`No Action Fn found for ${action}`)
+            console.log(`No Action Fn found for ${action}`);
           }
         }
       } catch (e) {
-        console.log(e)
+        console.log(e);
       } finally {
         //this.$store.commit('notification/MutToggleProgressBar', false);
       }
@@ -1348,160 +1494,167 @@ export default {
 
     async handleSqlStatementGeneration(item, func, msg) {
       try {
-        let result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+        let result = await this.$store.dispatch("sqlMgr/ActSqlOp", [
           {
             env: item._nodes.env,
             dbAlias: item._nodes.dbAlias,
           },
           func,
-          {tn: item.name},
-        ])
+          { tn: item.name },
+        ]);
         if (result && result.data) {
-          copyTextToClipboard(result.data, 'selection')
+          copyTextToClipboard(result.data, "selection");
         } else {
-          copyTextToClipboard('Example String', 'selection')
+          copyTextToClipboard("Example String", "selection");
         }
 
-        let sqlClientNode = {...item._nodes}
+        let sqlClientNode = { ...item._nodes };
         let newItem = {
           _nodes: sqlClientNode,
-        }
-
-        sqlClientNode.type = 'sqlClientDir'
-        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.type = 'sqlClientDir'
+        sqlClientNode.type = "sqlClientDir";
+        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.type = "sqlClientDir";
 
-        this.$toast.success(msg).goAway(2000)
+        this.$toast.success(msg).goAway(2000);
 
-        this.addTab(newItem, false, false)
+        this.addTab(newItem, false, false);
 
-        this.$store.commit('queries/MutSetClipboardQuery', result.data)
+        this.$store.commit("queries/MutSetClipboardQuery", result.data);
       } catch (e) {
-        console.log(e)
-        this.$toast.error('Something went wrong').goAway(2000)
+        console.log(e);
+        this.$toast.error("Something went wrong").goAway(2000);
       }
     },
 
     async mtdDialogRenameTableSubmit(title, cookie) {
-      let item = cookie
+      let item = cookie;
       try {
         await this.$api.dbTable.update(item.id, {
-          title
-        })
+          title,
+        });
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
-        return
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
+        return;
       }
-      await this.removeTabsByName(item)
+      await this.removeTabsByName(item);
       await this.loadTablesFromParentTreeNode({
         _nodes: {
           ...item._nodes,
         },
-      })
-      this.$store.dispatch('tabs/ActAddTab', {
+      });
+      this.$store.dispatch("tabs/ActAddTab", {
         _nodes: {
           env: this.menuItem._nodes.env,
           dbAlias: this.menuItem._nodes.dbAlias,
           table_name: this.menuItem._nodes.table_name,
           title: title,
           dbConnection: this.menuItem._nodes.dbConnection,
-          type: 'table',
+          type: "table",
           dbKey: this.menuItem._nodes.dbKey,
           key: this.menuItem._nodes.key,
           tableDirKey: this.menuItem._nodes.tableDirKey,
         },
         name: title,
-      })
-      this.dialogRenameTable.dialogShow = false
-      this.dialogRenameTable.defaultValue = null
-      this.$toast.success('Table renamed successfully').goAway(3000)
-      this.$tele.emit('table:rename:submit')
+      });
+      this.dialogRenameTable.dialogShow = false;
+      this.dialogRenameTable.defaultValue = null;
+      this.$toast.success("Table renamed successfully").goAway(3000);
+      this.$e("a:table:rename");
     },
     mtdDialogRenameTableCancel() {
-      this.dialogRenameTable.dialogShow = false
-      this.dialogRenameTable.defaultValue = null
+      this.dialogRenameTable.dialogShow = false;
+      this.dialogRenameTable.defaultValue = null;
     },
     mtdTableCreate(table) {
-      if (!this.menuItem || this.menuItem.type !== 'tableDir') {
-        this.menuItem = this.listViewArr.find(n => n.type === 'tableDir')
+      if (!this.menuItem || this.menuItem.type !== "tableDir") {
+        this.menuItem = this.listViewArr.find((n) => n.type === "tableDir");
       }
       // const tables = table.name.split(',');
-      this.$store.commit('notification/MutToggleProgressBar', true)
-      this.dialogGetTableName.dialogShow = false
+      this.$store.commit("notification/MutToggleProgressBar", true);
+      this.dialogGetTableName.dialogShow = false;
       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,
               table_name: table.name,
               title: table.alias,
-              type: 'table',
+              type: "table",
               dbKey: this.menuItem._nodes.dbKey,
               key: this.menuItem._nodes.key,
               dbConnection: this.menuItem._nodes.dbConnection,
               newTable: table,
             },
             name: table.alias,
-          })
+          });
         }
-      })
-      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200)
-
-      this.$set(this.dialogGetTableName, 'dialogShow', false)
-      this.$tele.emit('table:create:submit')
+      });
+      setTimeout(
+        () => this.$store.commit("notification/MutToggleProgressBar", false),
+        200
+      );
+
+      this.$set(this.dialogGetTableName, "dialogShow", false);
+      this.$e("a:table:create");
     },
     mtdViewCreate(view) {
       // const tables = table.name.split(',');
-      this.$store.commit('notification/MutToggleProgressBar', true)
-      this.dialogGetViewName.dialogShow = false
+      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,
               title: view.alias,
-              type: 'view',
+              type: "view",
               dbKey: this.menuItem._nodes.key,
               key: this.menuItem._nodes.key,
               dbConnection: this.menuItem._nodes.dbConnection,
               newView: true,
             },
             name: view.alias,
-          })
+          });
         }
-      })
-      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200)
+      });
+      setTimeout(
+        () => this.$store.commit("notification/MutToggleProgressBar", false),
+        200
+      );
 
-      this.$set(this.dialogGetTableName, 'dialogShow', false)
+      this.$set(this.dialogGetTableName, "dialogShow", false);
     },
     mtdDialogGetTableNameSubmit(tn, cookie) {
-      let tables = tn.split(',')
-      this.$store.commit('notification/MutToggleProgressBar', true)
-      this.dialogGetTableName.dialogShow = false
+      let tables = tn.split(",");
+      this.$store.commit("notification/MutToggleProgressBar", true);
+      this.dialogGetTableName.dialogShow = false;
       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,
@@ -1509,23 +1662,26 @@ export default {
                 newTable: true,
               },
               name: tables[i],
-            })
+            });
           }
         }
-      })
-      setTimeout(() => this.$store.commit('notification/MutToggleProgressBar', false), 200)
+      });
+      setTimeout(
+        () => this.$store.commit("notification/MutToggleProgressBar", false),
+        200
+      );
     },
     mtdDialogGetTableNameCancel() {
-      this.dialogGetTableName.dialogShow = false
+      this.dialogGetTableName.dialogShow = false;
     },
     mtdDialogGetViewNameSubmit(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,
@@ -1533,251 +1689,253 @@ export default {
           newView: true,
         },
         name: view_name,
-      })
-      this.dialogGetViewName.dialogShow = false
+      });
+      this.dialogGetViewName.dialogShow = false;
     },
     mtdDialogGetViewNameCancel() {
-      this.dialogGetViewName.dialogShow = false
+      this.dialogGetViewName.dialogShow = false;
     },
     mtdDialogGetFunctionNameSubmit(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,
         },
         name: function_name,
-      })
-      this.dialogGetFunctionName.dialogShow = false
+      });
+      this.dialogGetFunctionName.dialogShow = false;
     },
     mtdDialogGetFunctionNameCancel() {
-      this.dialogGetFunctionName.dialogShow = false
+      this.dialogGetFunctionName.dialogShow = false;
     },
     mtdDialogGetProcedureNameSubmit(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',
+          type: "procedure",
           key: this.menuItem._nodes.key,
         },
         name: procedure_name,
-      })
-      this.dialogGetProcedureName.dialogShow = false
+      });
+      this.dialogGetProcedureName.dialogShow = false;
     },
     mtdDialogGetSequenceNameSubmit(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,
         },
         name: sequence_name,
-      })
-      this.dialogGetSequenceName.dialogShow = false
+      });
+      this.dialogGetSequenceName.dialogShow = false;
     },
     mtdDialogGetProcedureNameCancel() {
-      this.dialogGetProcedureName.dialogShow = false
+      this.dialogGetProcedureName.dialogShow = false;
     },
     mtdDialogGetSequenceNameCancel() {
-      this.dialogGetSequenceName.dialogShow = false
+      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}`,
-        }
-      } else if (action === 'hideDialog') {
+        };
+      } else if (action === "hideDialog") {
         this.selectedNodeForDelete = {
           dialog: false,
           item: 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}`,
-        }
-      } else if (action === 'hideDialog') {
+        };
+      } else if (action === "hideDialog") {
         this.selectedNodeForDelete = {
           dialog: false,
           item: null,
           heading: null,
-        }
+        };
       } else {
-        item = this.selectedNodeForDelete.item
-        if (item._nodes.type === 'table') {
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+        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',
+            "columnList",
             {
               table_name: item._nodes.table_name,
             },
-          ])
+          ]);
 
           await this.sqlMgr.sqlOpPlus(
             {
               env: item._nodes.env,
               dbAlias: item._nodes.dbAlias,
             },
-            'tableDelete',
+            "tableDelete",
             {
               table_name: item._nodes.table_name,
-              columns: columns.data.list
+              columns: columns.data.list,
             }
-          )
+          );
           await this.loadTablesFromParentTreeNode({
             _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', [
+          });
+          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},
-          ])
+            "viewRead",
+            { view_name: item._nodes.view_name },
+          ]);
 
-          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          await this.$store.dispatch("sqlMgr/ActSqlOpPlus", [
             {
               env: item._nodes.env,
               dbAlias: item._nodes.dbAlias,
             },
-            'viewDelete',
+            "viewDelete",
             {
               view_name: item._nodes.view_name,
               oldViewDefination: view.view_definition,
             },
-          ])
+          ]);
           await this.loadViewsFromParentTreeNode({
             _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', [
+          });
+          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',
+            "functionRead",
             {
               function_name: item._nodes.function_name,
             },
-          ])
+          ]);
 
-          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          await this.$store.dispatch("sqlMgr/ActSqlOpPlus", [
             {
               env: item._nodes.env,
               dbAlias: item._nodes.dbAlias,
             },
-            'functionDelete',
+            "functionDelete",
             {
               function_name: item._nodes.function_name,
               oldCreateFunction: _function.create_function,
             },
-          ])
+          ]);
 
           await this.loadFunctionsFromParentTreeNode({
             _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', [
+          });
+          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',
+            "procedureRead",
             {
               procedure_name: item._nodes.procedure_name,
             },
-          ])
+          ]);
 
-          await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          await this.$store.dispatch("sqlMgr/ActSqlOpPlus", [
             {
               env: item._nodes.env,
               dbAlias: item._nodes.dbAlias,
             },
-            'procedureDelete',
+            "procedureDelete",
             {
               procedure_name: item._nodes.procedure_name,
               create_procedure: procedure.create_procedure,
             },
-          ])
+          ]);
 
           await this.loadProceduresFromParentTreeNode({
             _nodes: {
               ...item._nodes,
             },
-          })
-          this.$toast.success('Procedure deleted successfully').goAway(3000)
+          });
+          this.$toast.success("Procedure deleted successfully").goAway(3000);
         }
 
-        await this.removeTabsByName(item)
+        await this.removeTabsByName(item);
 
         this.selectedNodeForDelete = {
           dialog: false,
           item: null,
           heading: null,
-        }
+        };
       }
     },
     validateTableName(v) {
-      return validateTableName(v, this.$store.getters['project/GtrProjectIsGraphql'])
+      return validateTableName(
+        v,
+        this.$store.getters["project/GtrProjectIsGraphql"]
+      );
     },
   },
   async created() {
     // this.loadDefaultTabs();
     // this.instantiateSqlMgr();
-    const _id = this.$route.params.project
+    const _id = this.$route.params.project;
 
-    if (_id === 'external') {
+    if (_id === "external") {
     }
-    await this.loadProjectsData(_id)
-    this.loadDefaultTabs(true)
+    await this.loadProjectsData(_id);
+    this.loadDefaultTabs(true);
     // this.loadRoles();
   },
-  beforeCreate() {
-  },
+  beforeCreate() {},
   mounted() {
     // this.setBorderWidth();
     // this.setEvents();
   },
   async destroyed() {
-    await this.clearProjects()
+    await this.clearProjects();
   },
-}
+};
 </script>
 <style scoped>
 /deep/ .project-tree .v-treeview-node__level {
@@ -1847,7 +2005,10 @@ export default {
   font-weight: 700 !important;
 }
 
-/deep/ .v-list-group .v-list-group__header .v-list-item__icon.v-list-group__header__append-icon {
+/deep/
+  .v-list-group
+  .v-list-group__header
+  .v-list-item__icon.v-list-group__header__append-icon {
   min-width: auto;
 }
 
@@ -1868,19 +2029,23 @@ export default {
   top: 6px;
 }
 
-
-/deep/ .nc-table-list-filter.theme--light.v-text-field > .v-input__control > .v-input__slot:before {
+/deep/
+  .nc-table-list-filter.theme--light.v-text-field
+  > .v-input__control
+  > .v-input__slot:before {
   border-top-color: rgba(0, 0, 0, 0.12) !important;
 }
 
-/deep/ .nc-table-list-filter.theme--dark.v-text-field > .v-input__control > .v-input__slot:before {
+/deep/
+  .nc-table-list-filter.theme--dark.v-text-field
+  > .v-input__control
+  > .v-input__slot:before {
   border-top-color: rgba(255, 255, 255, 0.12) !important;
 }
 
-
 .nc-draggable-child .nc-child-draggable-icon {
   opacity: 0;
-  transition: .3s opacity;
+  transition: 0.3s opacity;
   position: absolute;
   left: 0;
 }
@@ -1889,7 +2054,6 @@ export default {
   opacity: 1;
 }
 
-
 .flip-list-move {
   transition: transform 0.5s;
 }
@@ -1937,7 +2101,6 @@ export default {
     line-height: 20px;
     min-width: calc(100% - 30px);*/
 }
-
 </style>
 
 <!--
diff --git a/packages/nc-gui/components/auth/apiTokens.vue b/packages/nc-gui/components/auth/apiTokens.vue
index 9a39e04c99..5116899a2e 100644
--- a/packages/nc-gui/components/auth/apiTokens.vue
+++ b/packages/nc-gui/components/auth/apiTokens.vue
@@ -4,7 +4,7 @@
       <v-spacer />
 
       <x-btn
-        v-ge="['roles','reload']"
+        v-ge="['roles', 'reload']"
         outlined
         tooltip="Reload API tokens"
         color="primary"
@@ -17,11 +17,11 @@
           refresh
         </v-icon>
         <!-- Reload -->
-        {{ $t('general.reload') }}
+        {{ $t("general.reload") }}
       </x-btn>
       <x-btn
         v-if="_isUIAllowed('newUser')"
-        v-ge="['roles','add new']"
+        v-ge="['roles', 'add new']"
         outlined
         tooltip="Generate new API token"
         color="primary"
@@ -33,40 +33,43 @@
           mdi-plus
         </v-icon>
         <!--New Token-->
-        {{ $t('activity.newToken') }}
+        {{ $t("activity.newToken") }}
       </x-btn>
     </v-toolbar>
 
     <v-container fluid>
-      <v-simple-table v-if="tokens" dense class="mx-auto caption text-center" style="max-width:700px">
+      <v-simple-table
+        v-if="tokens"
+        dense
+        class="mx-auto caption text-center"
+        style="max-width: 700px"
+      >
         <thead>
           <tr class="">
             <th class="caption text-center">
               <!--Description-->
-              {{ $t('labels.description') }}
+              {{ $t("labels.description") }}
             </th>
             <th class="caption text-center">
               <!--Token-->
-              {{ $t('labels.token') }}
+              {{ $t("labels.token") }}
             </th>
             <th class="caption text-center">
               <!--Actions-->
-              {{ $t('labels.action') }}
+              {{ $t("labels.action") }}
             </th>
           </tr>
         </thead>
 
         <tr v-if="!tokens.length">
           <td colspan="3">
-            <div
-              class="text-center caption grey--text"
-            >
+            <div class="text-center caption grey--text">
               No tokens available
             </div>
           </td>
         </tr>
 
-        <tr v-for="(token,i) in tokens" :key="i">
+        <tr v-for="(token, i) in tokens" :key="i">
           <td class="caption text-center">
             {{ token.description }}
           </td>
@@ -80,14 +83,19 @@
             <x-icon
               x-small
               icon.class="ml-2"
-              :tooltip="`${token.show ?'Hide':'Show' } API token`"
-              @click="$set(token,'show' ,!token.show)"
+              :tooltip="`${token.show ? 'Hide' : 'Show'} API token`"
+              @click="$set(token, 'show', !token.show)"
             >
-              {{ token.show ? 'visibility_off' : 'visibility' }}
+              {{ token.show ? "visibility_off" : "visibility" }}
             </x-icon>
 
             <!--              <v-spacer></v-spacer>-->
-            <x-icon x-small icon.class="ml-2" tooltip="Copy token to clipboard" @click="copyToken(token.token)">
+            <x-icon
+              x-small
+              icon.class="ml-2"
+              tooltip="Copy token to clipboard"
+              @click="copyToken(token.token)"
+            >
               mdi-content-copy
             </x-icon>
             <x-icon
@@ -114,7 +122,7 @@
     </v-container>
 
     <v-dialog v-model="newTokenDialog" width="400">
-      <v-card class="px-15 py-5 " style="min-height: 100%">
+      <v-card class="px-15 py-5" style="min-height: 100%">
         <h4 class="text-center text-capitalize mt-2 d-100 display-1">
           <template>Generate Token</template>
         </h4>
@@ -134,7 +142,7 @@
 
         <v-card-actions class="justify-center">
           <x-btn
-            v-ge="['rows','save']"
+            v-ge="['rows', 'save']"
             tooltip="Generate new api token"
             color="primary"
             btn.class="mt-5  mb-3 pr-5"
@@ -165,21 +173,26 @@ export default {
   methods: {
     showNewTokenDlg() {
       this.newTokenDialog = true
-      this.$tele.emit('api-mgmt:token:generate:trigger')
+      this.$e('c:api-token:generate')
     },
     copyToken(token) {
       copyTextToClipboard(token)
       this.$toast.info('Copied to clipboard').goAway(1000)
 
-      this.$tele.emit('api-mgmt:token:copy')
+      this.$e('c:api-token:copy')
     },
     async loadApiTokens() {
-      this.tokens = (await this.$api.apiToken.list(this.$store.state.project.projectId))
+      this.tokens = await this.$api.apiToken.list(
+        this.$store.state.project.projectId
+      )
     },
     async generateToken() {
       try {
         this.newTokenDialog = false
-        await this.$api.apiToken.create(this.$store.state.project.projectId, this.tokenObj)
+        await this.$api.apiToken.create(
+          this.$store.state.project.projectId,
+          this.tokenObj
+        )
         this.$toast.success('Token generated successfully').goAway(3000)
         this.tokenObj = {}
         await this.loadApiTokens()
@@ -188,11 +201,14 @@ export default {
         this.$toast.error(e.message).goAway(3000)
       }
 
-      this.$tele.emit('api-mgmt:token:generate:submit')
+      this.$e('a:api-token:generate')
     },
     async deleteToken(item) {
       try {
-        await this.$api.apiToken.delete(this.$store.state.project.projectId, item.token)
+        await this.$api.apiToken.delete(
+          this.$store.state.project.projectId,
+          item.token
+        )
         // this.tokens = //await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcApiTokenDelete', { id: item.id }])
         this.$toast.success('Token deleted successfully').goAway(3000)
         await this.loadApiTokens()
@@ -201,12 +217,10 @@ export default {
         this.$toast.error(e.message).goAway(3000)
       }
 
-      this.$tele.emit('api-mgmt:token:delete')
+      this.$e('a:api-token:delete')
     }
   }
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui/components/auth/shareOrInviteModal.vue b/packages/nc-gui/components/auth/shareOrInviteModal.vue
index 4a649e7f39..cfea0a8afe 100644
--- a/packages/nc-gui/components/auth/shareOrInviteModal.vue
+++ b/packages/nc-gui/components/auth/shareOrInviteModal.vue
@@ -1,42 +1,41 @@
 <template>
-  <v-dialog v-model="userEditDialog" :width="invite_token ? 700 :700" @close="invite_token = null">
+  <v-dialog
+    v-model="userEditDialog"
+    :width="invite_token ? 700 : 700"
+    @close="invite_token = null"
+  >
     <v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0">
       <v-card-title>
-        {{ $t('activity.share') }} : {{ $store.getters['project/GtrProjectName'] }}
+        {{ $t("activity.share") }} :
+        {{ $store.getters["project/GtrProjectName"] }}
 
         <div class="nc-header-border" />
       </v-card-title>
 
       <v-card-text>
         <div>
-          <v-icon small>
-            mdi-account-outline
-          </v-icon>
-          <template v-if="invite_token">
-            Copy Invite Token
-          </template>
-          <template v-else-if="selectedUser.id">
-            Edit User
-          </template>
+          <v-icon small> mdi-account-outline </v-icon>
+          <template v-if="invite_token"> Copy Invite Token </template>
+          <template v-else-if="selectedUser.id"> Edit User </template>
           <template v-else>
             <!-- Invite Team -->
-            {{ $t('activity.inviteTeam') }}
+            {{ $t("activity.inviteTeam") }}
           </template>
         </div>
         <div class="pa-4 nc-invite-container">
-          <div v-if="invite_token" class="mt-6  align-center">
+          <div v-if="invite_token" class="mt-6 align-center">
             <v-alert
               v-ripple
               type="success"
               outlined
-
               class="pointer"
-              @click="clipboard(inviteUrl); $toast.success('Copied invite url to clipboard').goAway(3000)"
+              @click="
+                clipboard(inviteUrl);
+                $toast.success('Copied invite url to clipboard').goAway(3000);
+              "
             >
               <template #append>
-                <v-icon color="green" class="ml-2">
-                  mdi-content-copy
-                </v-icon>
+                <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
               </template>
               <div class="ellipsis d-100">
                 {{ inviteUrl }}
@@ -44,11 +43,15 @@
             </v-alert>
 
             <p class="caption grey--text mt-3">
-              {{ $t('msg.info.userInviteNoSMTP') }}
+              {{ $t("msg.info.userInviteNoSMTP") }}
               <!-- Looks like you have not configured mailer yet! <br>Please copy above -->
               <!-- invite -->
               <!-- link and send it to -->
-              {{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.
+              {{
+                invite_token &&
+                (invite_token.email ||
+                  (invite_token.emails && invite_token.emails.join(", ")))
+              }}.
             </p>
 
             <div class="text-right">
@@ -64,7 +67,7 @@
                   mdi-account-multiple-plus-outline
                 </v-icon>
                 <!--Invite more-->
-                {{ $t('activity.inviteMore') }}
+                {{ $t("activity.inviteMore") }}
               </x-btn>
             </div>
 
@@ -86,12 +89,12 @@
                     class="caption"
                     :hint="$t('msg.info.addMultipleUsers')"
                     label="Email"
-                    @input="edited=true"
+                    @input="edited = true"
                   >
                     <template #label>
                       <span class="caption">
                         <!-- Email -->
-                        {{ $t('labels.email') }}
+                        {{ $t("labels.email") }}
                       </span>
                     </template>
                   </v-text-field>
@@ -110,12 +113,12 @@
                     deletable-chips
                     @change="edited = true"
                   >
-                    <template #selection="{item}">
+                    <template #selection="{ item }">
                       <v-chip small :color="rolesColors[item]">
                         {{ item }}
                       </v-chip>
                     </template>
-                    <template #item="{item}">
+                    <template #item="{ item }">
                       <div>
                         <div>{{ item }}</div>
                         <div class="mb-2 caption grey--text">
@@ -129,17 +132,18 @@
             </v-form>
             <div class="text-center mt-0">
               <x-btn
-                v-ge="['rows','save']"
+                v-ge="['rows', 'save']"
                 :tooltip="$t('tooltip.saveChanges')"
                 color="primary"
-
                 btn.class="nc-invite-or-save-btn"
                 @click="saveUser"
               >
                 <v-icon small left>
-                  {{ selectedUser.id ? 'save' : 'mdi-send' }}
+                  {{ selectedUser.id ? "save" : "mdi-send" }}
                 </v-icon>
-                {{ selectedUser.id ? $t('general.save') : $t('activity.invite') }}
+                {{
+                  selectedUser.id ? $t("general.save") : $t("activity.invite")
+                }}
               </x-btn>
             </div>
           </template>
@@ -154,132 +158,157 @@
 </template>
 
 <script>
-import { isEmail } from '~/helpers'
-import { enumColor } from '~/components/project/spreadsheet/helpers/colors'
-import ShareBase from '~/components/base/shareBase'
+import { isEmail } from "~/helpers";
+import { enumColor } from "~/components/project/spreadsheet/helpers/colors";
+import ShareBase from "~/components/base/shareBase";
 
 export default {
-  name: 'ShareOrInviteModal',
+  name: "ShareOrInviteModal",
   components: { ShareBase },
   props: {
-    value: Boolean
+    value: Boolean,
   },
   data: () => ({
-    roles: ['creator', 'editor', 'commenter', 'viewer'],
+    roles: ["creator", "editor", "commenter", "viewer"],
     selectedUser: {},
     invite_token: null,
     valid: null,
     emailRules: [
-      v => !!v || 'E-mail is required',
+      (v) => !!v || "E-mail is required",
       (v) => {
-        const invalidEmails = (v || '').split(/\s*,\s*/).filter(e => !isEmail(e))
-        return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`
-      }
+        const invalidEmails = (v || "")
+          .split(/\s*,\s*/)
+          .filter((e) => !isEmail(e));
+        return (
+          !invalidEmails.length ||
+          `"${invalidEmails.join(", ")}" - invalid email`
+        );
+      },
     ],
     roleRules: [
-      v => !!v || 'User Role is required',
-      v => ['creator', 'editor', 'commenter', 'viewer'].includes(v) || 'invalid user role'
+      (v) => !!v || "User Role is required",
+      (v) =>
+        ["creator", "editor", "commenter", "viewer"].includes(v) ||
+        "invalid user role",
     ],
     userList: [],
     roleDescriptions: {},
-    deleteUserType: ''
+    deleteUserType: "",
   }),
   computed: {
     userEditDialog: {
       get() {
-        return this.value
+        return this.value;
       },
       set(v) {
-        this.$emit('input', v)
-      }
+        this.$emit("input", v);
+      },
     },
     inviteUrl() {
-      return this.invite_token ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}` : null
+      return this.invite_token
+        ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
+        : null;
     },
     rolesColors() {
-      const colors = this.$store.state.windows.darkTheme ? enumColor.dark : enumColor.light
+      const colors = this.$store.state.windows.darkTheme
+        ? enumColor.dark
+        : enumColor.light;
       return this.roles.reduce((o, r, i) => {
-        o[r] = colors[i % colors.length]
-        return o
-      }, {})
+        o[r] = colors[i % colors.length];
+        return o;
+      }, {});
     },
 
     selectedRoles: {
       get() {
-        return (this.selectedUser && this.selectedUser.roles ? this.selectedUser.roles.split(',') : []).sort((a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a))[0]
+        return (
+          this.selectedUser && this.selectedUser.roles
+            ? this.selectedUser.roles.split(",")
+            : []
+        ).sort(
+          (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
+        )[0];
       },
       set(roles) {
         if (this.selectedUser) {
-          this.selectedUser.roles = roles // .filter(Boolean).join(',')
+          this.selectedUser.roles = roles; // .filter(Boolean).join(',')
         }
-      }
-    }
+      },
+    },
   },
   methods: {
-
     async saveUser() {
-      this.validate = true
-      await this.$nextTick()
+      this.validate = true;
+      await this.$nextTick();
       if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
-        return
+        return;
       }
-      this.$tele.emit(`user-mgmt:add:${this.selectedUser.roles}`)
+      this.$e("a:user:invite", { role: this.selectedUser.roles });
 
       if (!this.edited) {
-        this.userEditDialog = false
+        this.userEditDialog = false;
       }
 
       try {
-        let data
+        let data;
         if (this.selectedUser.id) {
-          await this.$api.auth.projectUserUpdate(this.$route.params.project_id, this.selectedUser.id, {
-            roles: this.selectedUser.roles,
-            email: this.selectedUser.email,
-            project_id: this.$route.params.project_id,
-            projectName: this.$store.getters['project/GtrProjectName']
-          })
+          await this.$api.auth.projectUserUpdate(
+            this.$route.params.project_id,
+            this.selectedUser.id,
+            {
+              roles: this.selectedUser.roles,
+              email: this.selectedUser.email,
+              project_id: this.$route.params.project_id,
+              projectName: this.$store.getters["project/GtrProjectName"],
+            }
+          );
         } else {
-          data = (await this.$api.auth.projectUserAdd(this.$route.params.project_id, {
-            ...this.selectedUser,
-            project_id: this.$route.params.project_id,
-            projectName: this.$store.getters['project/GtrProjectName']
-          }))
+          data = await this.$api.auth.projectUserAdd(
+            this.$route.params.project_id,
+            {
+              ...this.selectedUser,
+              project_id: this.$route.params.project_id,
+              projectName: this.$store.getters["project/GtrProjectName"],
+            }
+          );
         }
-        this.$toast.success('Successfully updated the user details').goAway(3000)
-        this.$emit('saved')
+        this.$toast
+          .success("Successfully updated the user details")
+          .goAway(3000);
+        this.$emit("saved");
         if (data && data.invite_token) {
-          this.invite_token = data
+          this.invite_token = data;
           // todo: bring anim
           // this.simpleAnim()
-          return
+          return;
         }
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
       }
 
-      this.userEditDialog = false
+      this.userEditDialog = false;
     },
 
     clickInviteMore() {
-      this.$tele.emit('user-mgmt:invite-more')
-      this.invite_token = null
-      this.selectedUser = { roles: 'editor' }
+      this.$e("c:user:invite-more");
+      this.invite_token = null;
+      this.selectedUser = { roles: "editor" };
     },
     clipboard(str) {
-      const el = document.createElement('textarea')
-      el.addEventListener('focusin', e => e.stopPropagation())
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
+      const el = document.createElement("textarea");
+      el.addEventListener("focusin", (e) => e.stopPropagation());
+      el.value = str;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
 
-      this.$tele.emit('user-mgmt:copy-url')
-    }
-  }
-}
+      this.$e("c:user:copy-url");
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui/components/auth/userManagement.vue b/packages/nc-gui/components/auth/userManagement.vue
index efa8fbd42c..4a912ccd4b 100644
--- a/packages/nc-gui/components/auth/userManagement.vue
+++ b/packages/nc-gui/components/auth/userManagement.vue
@@ -13,16 +13,14 @@
         @keypress.enter="loadUsers"
       >
         <template #prepend-inner>
-          <v-icon small class="mt-1">
-            search
-          </v-icon>
+          <v-icon small class="mt-1"> search </v-icon>
         </template>
       </v-text-field>
       <v-spacer />
 
       <!-- tooltip="Reload roles" -->
       <x-btn
-        v-ge="['roles','reload']"
+        v-ge="['roles', 'reload']"
         outlined
         :tooltip="$t('activity.reloadRoles')"
         color="primary"
@@ -31,17 +29,15 @@
         @click="clickReload"
         @click.prevent
       >
-        <v-icon small left>
-          refresh
-        </v-icon>
+        <v-icon small left> refresh </v-icon>
         <!-- Reload -->
-        {{ $t('general.reload') }}
+        {{ $t("general.reload") }}
       </x-btn>
       <!-- tooltip="Add new role" -->
       <x-btn
         v-if="_isUIAllowed('newUser')"
+        v-ge="['roles', 'add new']"
         class="nc-new-user"
-        v-ge="['roles','add new']"
         outlined
         :tooltip="$t('tooltip.addRole')"
         color="primary"
@@ -49,25 +45,28 @@
         :disabled="loading"
         @click="addUser"
       >
-        <v-icon small left>
-          mdi-plus
-        </v-icon>
+        <v-icon small left> mdi-plus </v-icon>
         <!-- New User -->
-        {{ $t('activity.newUser') }}
+        {{ $t("activity.newUser") }}
       </x-btn>
     </v-toolbar>
 
-    <v-card style="height:calc(100% - 38px)" class="elevation-0">
+    <v-card style="height: calc(100% - 38px)" class="elevation-0">
       <v-container style="height: 100%" fluid>
-        <v-row style="height:100%">
+        <v-row style="height: 100%">
           <v-col cols="12" class="h-100">
             <v-card class="h-100 elevation-0">
-              <v-row style="height:100%">
-                <v-col offset="2" :cols="8" class="h-100" style="overflow-y: auto">
+              <v-row style="height: 100%">
+                <v-col
+                  offset="2"
+                  :cols="8"
+                  class="h-100"
+                  style="overflow-y: auto"
+                >
                   <v-data-table
                     v-if="users"
                     dense
-                    :headers="[{},{},{},{}]"
+                    :headers="[{}, {}, {}, {}]"
                     hide-default-header
                     :hide-default-footer="count < limit"
                     :options.sync="options"
@@ -80,29 +79,25 @@
                         <tr class="text-left">
                           <!--                        <th>#</th>-->
                           <th class="font-weight-regular caption">
-                            <v-icon small>
-                              mdi-email-outline
-                            </v-icon>
+                            <v-icon small> mdi-email-outline </v-icon>
                             <!-- Email -->
-                            {{ $t('labels.email') }}
+                            {{ $t("labels.email") }}
                           </th>
                           <th class="font-weight-regular caption">
-                            <v-icon small>
-                              mdi-drama-masks
-                            </v-icon>
+                            <v-icon small> mdi-drama-masks </v-icon>
                             <!-- Roles -->
-                            {{ $t('objects.roles') }}
+                            {{ $t("objects.roles") }}
                           </th>
                           <th class="font-weight-regular caption">
                             <!--                          <v-icon small class="mt-n1">mdi-cursor-default-outline</v-icon>-->
                             <!-- Actions -->
-                            {{ $t('labels.actions') }}
+                            {{ $t("labels.actions") }}
                           </th>
                         </tr>
                       </thead>
                     </template>
 
-                    <template #item="{item}">
+                    <template #item="{ item }">
                       <tr @click="selectedUser = item">
                         <td>{{ item.email }}</td>
                         <td>
@@ -124,7 +119,11 @@
                             icon-class=""
                             color="primary"
                             small
-                            @click.prevent.stop="invite_token = null; selectedUser = item; userEditDialog = true"
+                            @click.prevent.stop="
+                              invite_token = null;
+                              selectedUser = item;
+                              userEditDialog = true;
+                            "
                           >
                             mdi-pencil-outline
                           </x-icon>
@@ -168,7 +167,12 @@
                             icon-class=""
                             color="primary"
                             small
-                            @click.prevent.stop="clipboard(getInviteUrl(item.invite_token)); $toast.success('Invite url copied to clipboard').goAway(3000)"
+                            @click.prevent.stop="
+                              clipboard(getInviteUrl(item.invite_token));
+                              $toast
+                                .success('Invite url copied to clipboard')
+                                .goAway(3000);
+                            "
                           >
                             mdi-content-copy
                           </x-icon>
@@ -203,7 +207,11 @@
           </v-col>
         </v-row>
 
-        <table v-if="false" class="mx-auto users-table" style="min-width:700px">
+        <table
+          v-if="false"
+          class="mx-auto users-table"
+          style="min-width: 700px"
+        >
           <thead>
             <tr>
               <th />
@@ -215,9 +223,7 @@
           <tbody>
             <tr v-for="user in users" :key="user.email">
               <td>
-                <v-icon x-large>
-                  mdi-account-outline
-                </v-icon>
+                <v-icon x-large> mdi-account-outline </v-icon>
               </td>
               <td class="px-1 py-1" align="top">
                 <v-text-field
@@ -233,36 +239,22 @@
                 <set-list-checkbox-cell v-model="user.roles" :values="roles" />
               </td>
               <td align="middle">
-                <v-icon large>
-                  mdi-close
-                </v-icon>
-                <v-icon large>
-                  mdi-save
-                </v-icon>
+                <v-icon large> mdi-close </v-icon>
+                <v-icon large> mdi-save </v-icon>
               </td>
             </tr>
             <tr>
               <td>
-                <v-icon x-large>
-                  mdi-account-outline
-                </v-icon>
+                <v-icon x-large> mdi-account-outline </v-icon>
               </td>
               <td class="px-1 py-1" align="top">
-                <v-text-field
-                  solo
-                  class="elevation-0"
-
-                  hide-details
-                  dense
-                />
+                <v-text-field solo class="elevation-0" hide-details dense />
               </td>
               <td class="px-1 py-1">
                 <set-list-checkbox-cell :values="roles" />
               </td>
               <td align="middle">
-                <v-icon large>
-                  mdi-account-plus
-                </v-icon>
+                <v-icon large> mdi-account-plus </v-icon>
               </td>
             </tr>
           </tbody>
@@ -278,44 +270,43 @@
     />
 
     <!-- todo: move to a separate component-->
-    <v-dialog v-model="userEditDialog" :width="invite_token ? 700 :700" @close="invite_token = null">
+    <v-dialog
+      v-model="userEditDialog"
+      :width="invite_token ? 700 : 700"
+      @close="invite_token = null"
+    >
       <v-card v-if="selectedUser" style="min-height: 100%" class="elevation-0">
         <v-card-title>
-          {{ $t('activity.share') }} : {{ $store.getters['project/GtrProjectName'] }}
+          {{ $t("activity.share") }} :
+          {{ $store.getters["project/GtrProjectName"] }}
 
           <div class="nc-header-border" />
         </v-card-title>
 
         <v-card-text>
           <div>
-            <v-icon small>
-              mdi-account-outline
-            </v-icon>
-            <template v-if="invite_token">
-              Copy Invite Token
-            </template>
-            <template v-else-if="selectedUser.id">
-              Edit User
-            </template>
+            <v-icon small> mdi-account-outline </v-icon>
+            <template v-if="invite_token"> Copy Invite Token </template>
+            <template v-else-if="selectedUser.id"> Edit User </template>
             <template v-else>
               <!-- Invite Team -->
-              {{ $t('activity.inviteTeam') }}
+              {{ $t("activity.inviteTeam") }}
             </template>
           </div>
           <div class="pa-4 nc-invite-container">
-            <div v-if="invite_token" class="mt-6  align-center">
+            <div v-if="invite_token" class="mt-6 align-center">
               <v-alert
                 v-ripple
                 type="success"
                 outlined
-
                 class="pointer"
-                @click="clipboard(inviteUrl); $toast.success('Copied invite url to clipboard').goAway(3000)"
+                @click="
+                  clipboard(inviteUrl);
+                  $toast.success('Copied invite url to clipboard').goAway(3000);
+                "
               >
                 <template #append>
-                  <v-icon color="green" class="ml-2">
-                    mdi-content-copy
-                  </v-icon>
+                  <v-icon color="green" class="ml-2"> mdi-content-copy </v-icon>
                 </template>
                 <div class="ellipsis d-100">
                   {{ inviteUrl }}
@@ -323,11 +314,15 @@
               </v-alert>
 
               <p class="caption grey--text mt-3">
-                {{ $t('msg.info.userInviteNoSMTP') }}
+                {{ $t("msg.info.userInviteNoSMTP") }}
                 <!-- Looks like you have not configured mailer yet! <br>Please copy above -->
                 <!-- invite -->
                 <!-- link and send it to -->
-                {{ invite_token && (invite_token.email || invite_token.emails && invite_token.emails.join(', ')) }}.
+                {{
+                  invite_token &&
+                  (invite_token.email ||
+                    (invite_token.emails && invite_token.emails.join(", ")))
+                }}.
               </p>
 
               <div class="text-right">
@@ -343,7 +338,7 @@
                     mdi-account-multiple-plus-outline
                   </v-icon>
                   <!--Invite more-->
-                  {{ $t('activity.inviteMore') }}
+                  {{ $t("activity.inviteMore") }}
                 </x-btn>
               </div>
 
@@ -365,12 +360,12 @@
                       class="caption"
                       :hint="$t('msg.info.addMultipleUsers')"
                       label="Email"
-                      @input="edited=true"
+                      @input="edited = true"
                     >
                       <template #label>
                         <span class="caption">
                           <!-- Email -->
-                          {{ $t('labels.email') }}
+                          {{ $t("labels.email") }}
                         </span>
                       </template>
                     </v-text-field>
@@ -389,12 +384,12 @@
                       deletable-chips
                       @change="edited = true"
                     >
-                      <template #selection="{item}">
+                      <template #selection="{ item }">
                         <v-chip small :color="rolesColors[item]">
                           {{ item }}
                         </v-chip>
                       </template>
-                      <template #item="{item}">
+                      <template #item="{ item }">
                         <div>
                           <div>{{ item }}</div>
                           <div class="mb-2 caption grey--text">
@@ -408,17 +403,18 @@
               </v-form>
               <div class="text-center mt-0">
                 <x-btn
-                  v-ge="['rows','save']"
+                  v-ge="['rows', 'save']"
                   :tooltip="$t('tooltip.saveChanges')"
                   color="primary"
-
                   btn.class="nc-invite-or-save-btn"
                   @click="saveUser"
                 >
                   <v-icon small left>
-                    {{ selectedUser.id ? 'save' : 'mdi-send' }}
+                    {{ selectedUser.id ? "save" : "mdi-send" }}
                   </v-icon>
-                  {{ selectedUser.id ? $t('general.save') : $t('activity.invite') }}
+                  {{
+                    selectedUser.id ? $t("general.save") : $t("activity.invite")
+                  }}
                 </x-btn>
               </div>
             </template>
@@ -434,17 +430,23 @@
 </template>
 
 <script>
-import FeedbackForm from '@/components/feedbackForm'
-import SetListCheckboxCell from '@/components/project/spreadsheet/components/editableCell/setListCheckboxCell'
-import { enumColor } from '@/components/project/spreadsheet/helpers/colors'
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
-import { isEmail } from '@/helpers'
-import ShareBase from '~/components/base/shareBase'
-import XBtn from '~/components/global/xBtn'
+import FeedbackForm from "@/components/feedbackForm";
+import SetListCheckboxCell from "@/components/project/spreadsheet/components/editableCell/setListCheckboxCell";
+import { enumColor } from "@/components/project/spreadsheet/helpers/colors";
+import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
+import { isEmail } from "@/helpers";
+import ShareBase from "~/components/base/shareBase";
+import XBtn from "~/components/global/xBtn";
 
 export default {
-  name: 'UserManagement',
-  components: { XBtn, ShareBase, FeedbackForm, DlgLabelSubmitCancel, SetListCheckboxCell },
+  name: "UserManagement",
+  components: {
+    XBtn,
+    ShareBase,
+    FeedbackForm,
+    DlgLabelSubmitCancel,
+    SetListCheckboxCell,
+  },
   data: () => ({
     validate: false,
     deleteItem: null,
@@ -458,184 +460,217 @@ export default {
     loading: false,
     selectedUser: null,
     roles: [],
-    query: '',
+    query: "",
     deleteId: null,
     edited: false,
     valid: null,
     emailRules: [
-      v => !!v || 'E-mail is required',
+      (v) => !!v || "E-mail is required",
       (v) => {
-        const invalidEmails = (v || '').split(/\s*,\s*/).filter(e => !isEmail(e))
-        return !invalidEmails.length || `"${invalidEmails.join(', ')}" - invalid email`
-      }
+        const invalidEmails = (v || "")
+          .split(/\s*,\s*/)
+          .filter((e) => !isEmail(e));
+        return (
+          !invalidEmails.length ||
+          `"${invalidEmails.join(", ")}" - invalid email`
+        );
+      },
     ],
     roleRules: [
-      v => !!v || 'User Role is required',
-      v => ['creator', 'editor', 'commenter', 'viewer'].includes(v) || 'invalid user role'
+      (v) => !!v || "User Role is required",
+      (v) =>
+        ["creator", "editor", "commenter", "viewer"].includes(v) ||
+        "invalid user role",
     ],
     userList: [],
     roleDescriptions: {},
-    deleteUserType: '' // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
+    deleteUserType: "", // [DELETE_FROM_PROJECT, DELETE_FROM_NOCODB]
   }),
   computed: {
     roleNames() {
-      return this.roles.map(r => r.title)
+      return this.roles.map((r) => r.title);
     },
     inviteUrl() {
-      return this.invite_token ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}` : null
+      return this.invite_token
+        ? `${location.origin}${location.pathname}#/user/authentication/signup/${this.invite_token.invite_token}`
+        : null;
     },
     rolesColors() {
-      const colors = this.$store.state.windows.darkTheme ? enumColor.dark : enumColor.light
+      const colors = this.$store.state.windows.darkTheme
+        ? enumColor.dark
+        : enumColor.light;
       return this.roles.reduce((o, r, i) => {
-        o[r] = colors[i % colors.length]
-        return o
-      }, {})
+        o[r] = colors[i % colors.length];
+        return o;
+      }, {});
     },
     selectedRoles: {
       get() {
-        return (this.selectedUser && this.selectedUser.roles ? this.selectedUser.roles.split(',') : []).sort((a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a))[0]
+        return (
+          this.selectedUser && this.selectedUser.roles
+            ? this.selectedUser.roles.split(",")
+            : []
+        ).sort(
+          (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
+        )[0];
       },
       set(roles) {
         if (this.selectedUser) {
-          this.selectedUser.roles = roles // .filter(Boolean).join(',')
+          this.selectedUser.roles = roles; // .filter(Boolean).join(',')
         }
-      }
+      },
     },
     selectedUserIndex: {
       get() {
-        return this.users ? this.users.findIndex(u => u.email === this.selectedUser.email) : -1
+        return this.users
+          ? this.users.findIndex((u) => u.email === this.selectedUser.email)
+          : -1;
       },
       set(i) {
-        this.selectedUser = this.users[i]
-      }
+        this.selectedUser = this.users[i];
+      },
     },
     dialogMessage() {
-      let msg = 'Do you want to remove the user'
-      if (this.deleteUserType === 'DELETE_FROM_PROJECT') { msg += ' from Project' } else if (this.deleteUserType === 'DELETE_FROM_NOCODB') { msg += ' from NocoDB' }
-      msg += '?'
-      return msg
-    }
+      let msg = "Do you want to remove the user";
+      if (this.deleteUserType === "DELETE_FROM_PROJECT") {
+        msg += " from Project";
+      } else if (this.deleteUserType === "DELETE_FROM_NOCODB") {
+        msg += " from NocoDB";
+      }
+      msg += "?";
+      return msg;
+    },
   },
   watch: {
     options: {
       async handler() {
-        await this.loadUsers()
+        await this.loadUsers();
       },
-      deep: true
+      deep: true,
     },
     userEditDialog(v) {
       // if (!v) { this.validate = false }
-      if (v && (this.selectedUser && !this.selectedUser.id)) {
+      if (v && this.selectedUser && !this.selectedUser.id) {
         this.$nextTick(() => {
           setTimeout(() => {
-            this.$refs.email.$el.querySelector('input').focus()
-          }, 100)
-        })
+            this.$refs.email.$el.querySelector("input").focus();
+          }, 100);
+        });
       }
-    }
+    },
   },
   async created() {
-    this.$eventBus.$on('show-add-user', this.addUser)
-    await this.loadUsers()
-    await this.loadRoles()
+    this.$eventBus.$on("show-add-user", this.addUser);
+    await this.loadUsers();
+    await this.loadRoles();
   },
   beforeDestroy() {
-    this.$eventBus.$off('show-add-user', this.addUser)
+    this.$eventBus.$off("show-add-user", this.addUser);
   },
   methods: {
     clickReload() {
-      this.loadUsers()
-      this.$tele.emit('user-mgmt:reload')
+      this.loadUsers();
+      this.$e("a:user:reload");
     },
     clickDeleteUser(id) {
-      this.$tele.emit('user-mgmt:delete:trigger')
-      this.deleteId = id
-      this.deleteItem = id
-      this.showConfirmDlg = true
-      this.deleteUserType = 'DELETE_FROM_PROJECT'
+      this.$e("c:user:delete");
+      this.deleteId = id;
+      this.deleteItem = id;
+      this.showConfirmDlg = true;
+      this.deleteUserType = "DELETE_FROM_PROJECT";
     },
     clickInviteMore() {
-      this.$tele.emit('user-mgmt:invite-more')
-      this.invite_token = null
-      this.selectedUser = { roles: 'editor' }
+      this.$e("c:user:invite-more");
+      this.invite_token = null;
+      this.selectedUser = { roles: "editor" };
     },
     getRole(roles) {
-      return (roles ? roles.split(',') : []).sort((a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a))[0]
+      return (roles ? roles.split(",") : []).sort(
+        (a, b) => this.roleNames.indexOf(a) - this.roleNames.indexOf(a)
+      )[0];
     },
     simpleAnim() {
-      const count = 30
+      const count = 30;
       const defaults = {
         origin: { y: 0.7 },
-        zIndex: 9999999
-      }
+        zIndex: 9999999,
+      };
 
       function fire(particleRatio, opts) {
-        window.confetti(Object.assign({}, defaults, opts, {
-          particleCount: Math.floor(count * particleRatio)
-        }))
+        window.confetti(
+          Object.assign({}, defaults, opts, {
+            particleCount: Math.floor(count * particleRatio),
+          })
+        );
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55
-      })
+        startVelocity: 55,
+      });
       fire(0.2, {
-        spread: 60
-      })
+        spread: 60,
+      });
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8
-      })
+        scalar: 0.8,
+      });
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2
-      })
+        scalar: 1.2,
+      });
       fire(0.1, {
         spread: 120,
-        startVelocity: 45
-      })
+        startVelocity: 45,
+      });
     },
     getInviteUrl(token) {
-      return token ? `${location.origin}${location.pathname}#/user/authentication/signup/${token}` : null
+      return token
+        ? `${location.origin}${location.pathname}#/user/authentication/signup/${token}`
+        : null;
     },
 
     clipboard(str) {
-      const el = document.createElement('textarea')
-      el.addEventListener('focusin', e => e.stopPropagation())
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-
-      this.$tele.emit('user-mgmt:copy-url')
+      const el = document.createElement("textarea");
+      el.addEventListener("focusin", (e) => e.stopPropagation());
+      el.value = str;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+
+      this.$e("c:user:copy-url");
     },
     async resendInvite(id) {
       try {
-        await this.$axios.post('/admin/resendInvite/' + id, {
-          projectName: this.$store.getters['project/GtrProjectName']
-        }, {
-          headers: {
-            'xc-auth': this.$store.state.users.token
+        await this.$axios.post(
+          "/admin/resendInvite/" + id,
+          {
+            projectName: this.$store.getters["project/GtrProjectName"],
           },
-          params: {
-            project_id: this.$route.params.project_id
+          {
+            headers: {
+              "xc-auth": this.$store.state.users.token,
+            },
+            params: {
+              project_id: this.$route.params.project_id,
+            },
           }
-        })
-        this.$toast.success('Invite email sent successfully').goAway(3000)
-        await this.loadUsers()
+        );
+        this.$toast.success("Invite email sent successfully").goAway(3000);
+        await this.loadUsers();
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000)
+        this.$toast.error(e.response.data.msg).goAway(3000);
       }
 
-      this.$tele.emit('user-mgmt:resend-invite')
+      this.$e("a:user:resend-invite");
     },
     async loadUsers() {
       try {
-        const { page = 1, itemsPerPage = 20 } = this.options
+        const { page = 1, itemsPerPage = 20 } = this.options;
         // const data = (await this.$axios.get('/admin', {
         //   headers: {
         //     'xc-auth': this.$store.state.users.token
@@ -648,26 +683,29 @@ export default {
         //   }
         // })).data
 
-        const userData = (await this.$api.auth.projectUserList(this.$store.state.project.projectId, {
-          query: {
-            limit: itemsPerPage,
-            offset: (page - 1) * itemsPerPage,
-            query: this.query
+        const userData = await this.$api.auth.projectUserList(
+          this.$store.state.project.projectId,
+          {
+            query: {
+              limit: itemsPerPage,
+              offset: (page - 1) * itemsPerPage,
+              query: this.query,
+            },
           }
-        }))
+        );
 
-        this.count = userData.users.pageInfo.totalRows
-        this.users = userData.users.list
+        this.count = userData.users.pageInfo.totalRows;
+        this.users = userData.users.list;
         if (!this.selectedUser && this.users && this.users[0]) {
-          this.selectedUserIndex = 0
+          this.selectedUserIndex = 0;
         }
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     },
     async loadRoles() {
       try {
-        this.roles = ['creator', 'editor', 'commenter', 'viewer']
+        this.roles = ["creator", "editor", "commenter", "viewer"];
 
         // todo:
         //   (await this.$axios.get('/admin/roles', {
@@ -682,91 +720,112 @@ export default {
         //   return role.title
         // }).filter(role => role !== 'guest')
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     },
     async deleteUser(id, type) {
       try {
-        await this.$api.auth.projectUserRemove(this.$route.params.project_id, id)
-        this.$toast.success(`Successfully removed the user from ${type === 'DELETE_FROM_PROJECT' ? 'project' : 'NocoDB'}`).goAway(3000)
-        await this.loadUsers()
+        await this.$api.auth.projectUserRemove(
+          this.$route.params.project_id,
+          id
+        );
+        this.$toast
+          .success(
+            `Successfully removed the user from ${
+              type === "DELETE_FROM_PROJECT" ? "project" : "NocoDB"
+            }`
+          )
+          .goAway(3000);
+        await this.loadUsers();
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000)
+        this.$toast.error(e.response.data.msg).goAway(3000);
       }
     },
     async confirmDelete(hideDialog) {
       if (hideDialog) {
-        this.showConfirmDlg = false
-        return
+        this.showConfirmDlg = false;
+        return;
       }
-      await this.deleteUser(this.deleteId, this.deleteUserType)
-      this.showConfirmDlg = false
+      await this.deleteUser(this.deleteId, this.deleteUserType);
+      this.showConfirmDlg = false;
 
-      this.$tele.emit('user-mgmt:delete:submit')
+      this.$e("a:user:delete");
     },
     addUser() {
-      this.invite_token = null
+      this.invite_token = null;
       this.selectedUser = {
-        roles: 'editor'
-      }
-      this.userEditDialog = true
+        roles: "editor",
+      };
+      this.userEditDialog = true;
 
-      this.$tele.emit('user-mgmt:add-user:trigger')
+      this.$e("c:user:add");
     },
     async inviteUser(item) {
       try {
-        await this.$api.auth.projectUserAdd(this.$route.params.project_id, item)
-        this.$toast.success('Successfully added user to project').goAway(3000)
-        await this.loadUsers()
+        await this.$api.auth.projectUserAdd(
+          this.$route.params.project_id,
+          item
+        );
+        this.$toast.success("Successfully added user to project").goAway(3000);
+        await this.loadUsers();
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000)
+        this.$toast.error(e.response.data.msg).goAway(3000);
       }
 
-      this.$tele.emit('user-mgmt:invite-user')
+      this.$e("a:user:add");
     },
     async saveUser() {
-      this.validate = true
-      await this.$nextTick()
+      this.validate = true;
+      await this.$nextTick();
       if (this.loading || !this.$refs.form.validate() || !this.selectedUser) {
-        return
+        return;
       }
-      this.$tele.emit(`user-mgmt:add:${this.selectedUser.roles}`)
+      this.$e("a:user:invite", { role: this.selectedUser.roles });
 
       if (!this.edited) {
-        this.userEditDialog = false
+        this.userEditDialog = false;
       }
 
       try {
-        let data
+        let data;
         if (this.selectedUser.id) {
-          await this.$api.auth.projectUserUpdate(this.$route.params.project_id, this.selectedUser.id, {
-            roles: this.selectedUser.roles,
-            email: this.selectedUser.email,
-            project_id: this.$route.params.project_id,
-            projectName: this.$store.getters['project/GtrProjectName']
-          })
+          await this.$api.auth.projectUserUpdate(
+            this.$route.params.project_id,
+            this.selectedUser.id,
+            {
+              roles: this.selectedUser.roles,
+              email: this.selectedUser.email,
+              project_id: this.$route.params.project_id,
+              projectName: this.$store.getters["project/GtrProjectName"],
+            }
+          );
         } else {
-          data = (await this.$api.auth.projectUserAdd(this.$route.params.project_id, {
-            ...this.selectedUser,
-            project_id: this.$route.params.project_id,
-            projectName: this.$store.getters['project/GtrProjectName']
-          }))
+          data = await this.$api.auth.projectUserAdd(
+            this.$route.params.project_id,
+            {
+              ...this.selectedUser,
+              project_id: this.$route.params.project_id,
+              projectName: this.$store.getters["project/GtrProjectName"],
+            }
+          );
         }
-        this.$toast.success('Successfully updated the user details').goAway(3000)
-        await this.loadUsers()
+        this.$toast
+          .success("Successfully updated the user details")
+          .goAway(3000);
+        await this.loadUsers();
         if (data && data.invite_token) {
-          this.invite_token = data
-          this.simpleAnim()
-          return
+          this.invite_token = data;
+          this.simpleAnim();
+          return;
         }
       } catch (e) {
-        this.$toast.error(e.response.data.msg).goAway(3000)
+        this.$toast.error(e.response.data.msg).goAway(3000);
       }
 
-      await this.loadUsers()
-    }
-  }
-}
+      await this.loadUsers();
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -779,7 +838,8 @@ export default {
     background-color: transparent;
   }
 
-  .search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
+  .search-field.v-text-field > .v-input__control,
+  .search-field.v-text-field > .v-input__control > .v-input__slot {
     min-height: auto;
   }
 
@@ -798,11 +858,11 @@ export default {
 
 .users-table {
   td:first-child {
-    width: 50px
+    width: 50px;
   }
 
   td:last-child {
-    width: 50px
+    width: 50px;
   }
 }
 
@@ -812,7 +872,6 @@ export default {
   background: var(--v-backgroundColor-base);
 
   .v-input .v-input__slot {
-
     background: var(--v-backgroundColorDefault-base);
   }
 }
diff --git a/packages/nc-gui/components/base/shareBase.vue b/packages/nc-gui/components/base/shareBase.vue
index 9727dca609..cbd5c5c3b3 100644
--- a/packages/nc-gui/components/base/shareBase.vue
+++ b/packages/nc-gui/components/base/shareBase.vue
@@ -1,32 +1,29 @@
 <template>
   <div>
-    <v-icon color="grey" small>
-      mdi-open-in-new
-    </v-icon>
+    <v-icon color="grey" small> mdi-open-in-new </v-icon>
     <span class="grey--text caption">
       <!-- Shared base link -->
-      {{ $t('activity.shareBase.link') }}
+      {{ $t("activity.shareBase.link") }}
     </span>
     <div class="nc-container">
-      <v-chip v-if="base.uuid" :color="colors[4]" style="" class="rounded pl-1 pr-0 d-100 nc-url-chip pr-3">
+      <v-chip
+        v-if="base.uuid"
+        :color="colors[4]"
+        style=""
+        class="rounded pl-1 pr-0 d-100 nc-url-chip pr-3"
+      >
         <div class="nc-url-wrapper d-flex mx-1 align-center d-100">
-          <span class="nc-url flex-grow-1 caption ">{{ url }}</span>
+          <span class="nc-url flex-grow-1 caption">{{ url }}</span>
           <v-spacer />
           <v-divider vertical />
 
           <!-- tooltip="reload" -->
-          <x-icon
-            :tooltip="$t('general.reload')"
-            @click="recreate"
-          >
+          <x-icon :tooltip="$t('general.reload')" @click="recreate">
             mdi-reload
           </x-icon>
 
           <!-- tooltip="copy URL"  -->
-          <x-icon
-            :tooltip="$t('activity.copyUrl')"
-            @click="copyUrl"
-          >
+          <x-icon :tooltip="$t('activity.copyUrl')" @click="copyUrl">
             mdi-content-copy
           </x-icon>
 
@@ -51,49 +48,47 @@
       <div class="d-flex align-center px-2">
         <div>
           <v-menu offset-x>
-            <template #activator="{on}">
+            <template #activator="{ on }">
               <div class="my-2" v-on="on">
                 <div class="font-weight-bold nc-disable-shared-base">
                   <span v-if="base.uuid">
                     <!-- Anyone with the link -->
-                    {{ $t('activity.shareBase.enable') }}
+                    {{ $t("activity.shareBase.enable") }}
                   </span>
                   <span v-else>
                     <!-- Disable shared base -->
-                    {{ $t('activity.shareBase.disable') }}
+                    {{ $t("activity.shareBase.disable") }}
                   </span>
-                  <v-icon small>
-                    mdi-menu-down-outline
-                  </v-icon>
+                  <v-icon small> mdi-menu-down-outline </v-icon>
                 </div>
               </div>
             </template>
             <v-list dense>
-              <v-list-item v-if="!base.uuid" dense @click="createSharedBase('viewer')">
+              <v-list-item
+                v-if="!base.uuid"
+                dense
+                @click="createSharedBase('viewer')"
+              >
                 <v-list-item-title>
-                  <v-icon small class="mr-1">
-                    mdi-link-variant
-                  </v-icon>
+                  <v-icon small class="mr-1"> mdi-link-variant </v-icon>
                   <span class="caption">
                     <!-- Anyone with the link -->
-                    {{ $t('activity.shareBase.enable') }}
+                    {{ $t("activity.shareBase.enable") }}
                   </span>
                 </v-list-item-title>
               </v-list-item>
               <v-list-item v-if="base.uuid" dense @click="disableSharedBase">
                 <v-list-item-title>
-                  <v-icon small class="mr-1">
-                    mdi-link-variant-off
-                  </v-icon>
+                  <v-icon small class="mr-1"> mdi-link-variant-off </v-icon>
                   <span class="caption">
                     <!-- Disable shared base -->
-                    {{ $t('activity.shareBase.disable') }}
+                    {{ $t("activity.shareBase.disable") }}
                   </span>
                 </v-list-item-title>
               </v-list-item>
             </v-list>
           </v-menu>
-          <div class=" caption">
+          <div class="caption">
             <template v-if="base.enabled">
               <span v-if="base.roles === 'editor'">
                 Anyone on the internet with this link can edit
@@ -101,28 +96,26 @@
               </span>
               <span v-else-if="base.roles === 'viewer'">
                 <!-- Anyone on the internet with this link can view -->
-                {{ $t('msg.info.shareBasePublic') }}
+                {{ $t("msg.info.shareBasePublic") }}
               </span>
             </template>
             <template v-else>
               <!-- Generate publicly shareable readonly base -->
-              {{ $t('msg.info.shareBasePrivate') }}
+              {{ $t("msg.info.shareBasePrivate") }}
             </template>
           </div>
         </div>
         <v-spacer />
-        <div class="d-flex justify-center" style="width:120px">
+        <div class="d-flex justify-center" style="width: 120px">
           <v-menu v-if="base.uuid" offset-y>
-            <template #activator="{on}">
+            <template #activator="{ on }">
               <div
-                class="text-capitalize my-2   font-weight-bold backgroundColorDefault py-2 px-4 rounded nc-shared-base-role"
+                class="text-capitalize my-2 font-weight-bold backgroundColorDefault py-2 px-4 rounded nc-shared-base-role"
                 v-on="on"
               >
-                {{ base.roles || 'Viewer' }}
+                {{ base.roles || "Viewer" }}
 
-                <v-icon small>
-                  mdi-menu-down-outline
-                </v-icon>
+                <v-icon small> mdi-menu-down-outline </v-icon>
               </div>
             </template>
 
@@ -130,13 +123,13 @@
               <v-list-item @click="createSharedBase('editor')">
                 <v-list-item-title>
                   <!-- Editor -->
-                  {{ $t('objects.roleType.editor') }}
+                  {{ $t("objects.roleType.editor") }}
                 </v-list-item-title>
               </v-list-item>
               <v-list-item @click="createSharedBase('viewer')">
                 <v-list-item-title>
                   <!-- Viewer -->
-                  {{ $t('objects.roleType.viewer') }}
+                  {{ $t("objects.roleType.viewer") }}
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -148,79 +141,93 @@
 </template>
 
 <script>
-import colors from '~/mixins/colors'
-import { copyTextToClipboard } from '~/helpers/xutils'
+import colors from "~/mixins/colors";
+import { copyTextToClipboard } from "~/helpers/xutils";
 
 export default {
-  name: 'ShareBase',
+  name: "ShareBase",
   mixins: [colors],
   data: () => ({
     base: {
-      enable: false
-    }
+      enable: false,
+    },
   }),
   computed: {
     url() {
-      return this.base && this.base.uuid ? `${this.dashboardUrl}#/nc/base/${this.base.uuid}` : null
-    }
+      return this.base && this.base.uuid
+        ? `${this.dashboardUrl}#/nc/base/${this.base.uuid}`
+        : null;
+    },
   },
   mounted() {
-    this.loadSharedBase()
+    this.loadSharedBase();
   },
   methods: {
     async loadSharedBase() {
       try {
         // const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [
         //   { dbAlias: 'db' }, 'getSharedBaseLink'])
-        const sharedBase = (await this.$api.project.sharedBaseGet(this.$store.state.project.projectId))
+        const sharedBase = await this.$api.project.sharedBaseGet(
+          this.$store.state.project.projectId
+        );
 
-        this.base = sharedBase || {}
+        this.base = sharedBase || {};
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
     },
-    async createSharedBase(roles = 'viewer') {
+    async createSharedBase(roles = "viewer") {
       try {
         // const sharedBase = await this.$store.dispatch('sqlMgr/ActSqlOp', [{ dbAlias: 'db' }, 'createSharedBaseLink', { roles }])
-        const sharedBase = (await this.$api.project.sharedBaseUpdate(this.$store.state.project.projectId, { roles }))
+        const sharedBase = await this.$api.project.sharedBaseUpdate(
+          this.$store.state.project.projectId,
+          { roles }
+        );
 
-        this.base = sharedBase || {}
+        this.base = sharedBase || {};
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit(`shared-base:enable:${roles}`)
+      this.$e("a:shared-base:enable", { role: roles });
     },
     async disableSharedBase() {
       try {
-        await this.$api.project.sharedBaseDisable(this.$store.state.project.projectId)
-        this.base = {}
+        await this.$api.project.sharedBaseDisable(
+          this.$store.state.project.projectId
+        );
+        this.base = {};
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit('shared-base:disable')
+      this.$e("a:shared-base:disable");
     },
     async recreate() {
       try {
-        const sharedBase = (await this.$api.project.sharedBaseCreate(this.$store.state.project.projectId, { roles: this.base.roles || 'viewer' }))
-        this.base = sharedBase || {}
+        const sharedBase = await this.$api.project.sharedBaseCreate(
+          this.$store.state.project.projectId,
+          { roles: this.base.roles || "viewer" }
+        );
+        this.base = sharedBase || {};
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit('shared-base:recreate')
+      this.$e("a:shared-base:recreate");
     },
     copyUrl() {
-      copyTextToClipboard(this.url)
-      this.$toast.success('Copied shareable base url to clipboard!').goAway(3000)
+      copyTextToClipboard(this.url);
+      this.$toast
+        .success("Copied shareable base url to clipboard!")
+        .goAway(3000);
 
-      this.$tele.emit('shared-base:copy-url')
+      this.$e("c:shared-base:copy-url");
     },
     navigateToSharedBase() {
-      window.open(this.url, '_blank')
+      window.open(this.url, "_blank");
 
-      this.$tele.emit('shared-base:open-url')
+      this.$e("c:shared-base:open-url");
     },
     generateEmbeddableIframe() {
       copyTextToClipboard(`<iframe
@@ -229,20 +236,19 @@ src="${this.url}?embed"
 frameborder="0"
 width="100%"
 height="700"
-style="background: transparent; border: 1px solid #ddd"></iframe>`)
-      this.$toast.success('Copied embeddable html code!').goAway(3000)
-
-      this.$tele.emit('shared-base:copy-embed-frame')
-    }
-  }
+style="background: transparent; border: 1px solid #ddd"></iframe>`);
+      this.$toast.success("Copied embeddable html code!").goAway(3000);
 
-}
+      this.$e("c:shared-base:copy-embed-frame");
+    },
+  },
+};
 </script>
 
 <style scoped>
 .nc-url-wrapper {
   column-gap: 15px;
-  width: 100%
+  width: 100%;
 }
 
 .nc-url {
@@ -259,6 +265,6 @@ style="background: transparent; border: 1px solid #ddd"></iframe>`)
 }
 
 /deep/ .nc-url-chip .v-chip__content {
-  width: 100%
+  width: 100%;
 }
 </style>
diff --git a/packages/nc-gui/components/createOrEditProject.vue b/packages/nc-gui/components/createOrEditProject.vue
index 922843d5a3..fd597d48b0 100644
--- a/packages/nc-gui/components/createOrEditProject.vue
+++ b/packages/nc-gui/components/createOrEditProject.vue
@@ -31,13 +31,16 @@
             flat
             color=""
             class="mb-3"
-            style="width: 100%; border-bottom: 1px solid var(--v-backgroundColor-base)"
+            style="
+              width: 100%;
+              border-bottom: 1px solid var(--v-backgroundColor-base);
+            "
           >
             <v-toolbar-title class="title">
               <!-- Edit Project -->
-              <span v-if="edit">{{ $t('activity.editProject') }}</span>
+              <span v-if="edit">{{ $t("activity.editProject") }}</span>
               <!-- Create Project -->
-              <span v-else>{{ $t('activity.createProject') }}</span>
+              <span v-else>{{ $t("activity.createProject") }}</span>
             </v-toolbar-title>
             <v-spacer />
             <!-- Cancel and Return -->
@@ -48,7 +51,7 @@
               class="elevation-20"
             >
               <!-- Cancel -->
-              {{ $t('general.cancel') }}
+              {{ $t("general.cancel") }}
             </x-btn>
             <x-btn
               v-ge="['project', 'save']"
@@ -57,9 +60,9 @@
               @click="createOrUpdateProject()"
             >
               <!-- Update & Restart -->
-              <span v-if="edit">{{ $t('tooltip.updateRestart') }}</span>
+              <span v-if="edit">{{ $t("tooltip.updateRestart") }}</span>
               <!-- Save Project -->
-              <span v-else>{{ $t('activity.saveProject') }}</span>
+              <span v-else>{{ $t("activity.saveProject") }}</span>
             </x-btn>
             <v-progress-linear
               v-if="projectReloading"
@@ -73,7 +76,10 @@
           </v-toolbar>
 
           <div ref="panelContainer" style="">
-            <api-overlay v-show="projectReloading" :project-created="projectCreated" />
+            <api-overlay
+              v-show="projectReloading"
+              :project-created="projectCreated"
+            />
             <v-container fluid>
               <v-row>
                 <v-col cols="12" class="mb-0 pb-0">
@@ -103,7 +109,7 @@
                       'text-center mb-2 mt-3 grey--text': edit,
                     }"
                   >
-                    {{ $t('title.dbCredentials') }}
+                    {{ $t("title.dbCredentials") }}
                   </p>
                   <v-expansion-panels
                     v-model="panel"
@@ -120,12 +126,18 @@
                     >
                       <v-expansion-panel-header disable-icon-rotate>
                         <p class="pa-0 ma-0">
-                          <v-tooltip v-for="(db, tabIndex) in envData.db" :key="tabIndex" bottom>
+                          <v-tooltip
+                            v-for="(db, tabIndex) in envData.db"
+                            :key="tabIndex"
+                            bottom
+                          >
                             <template #activator="{ on }">
                               <v-icon
                                 small
                                 :color="getDbStatusColor(db)"
-                                @click.native.stop="showDBTabInEnvPanel(panelIndex, tabIndex)"
+                                @click.native.stop="
+                                  showDBTabInEnvPanel(panelIndex, tabIndex)
+                                "
                                 v-on="on"
                               >
                                 mdi-database
@@ -162,7 +174,10 @@
                           </x-btn>
                         </p>
                         <template #actions>
-                          <v-tooltip v-if="getEnvironmentStatusAggregated(envData.db)" bottom>
+                          <v-tooltip
+                            v-if="getEnvironmentStatusAggregated(envData.db)"
+                            bottom
+                          >
                             <template #activator="{ on }">
                               <v-icon color="green" v-on="on">
                                 mdi-check-circle
@@ -183,21 +198,24 @@
                       <v-expansion-panel-content eager>
                         <v-col>
                           <v-card flat="">
-                            <v-tabs v-model="databases[panelIndex]" height="34" background-color="">
+                            <v-tabs
+                              v-model="databases[panelIndex]"
+                              height="34"
+                              background-color=""
+                            >
                               <v-tab
                                 v-for="(db, dbIndex) in project.envs[envKey].db"
                                 :key="dbIndex"
                               >
-                                <v-icon small>
-                                  mdi-database
-                                </v-icon> &nbsp;
+                                <v-icon small> mdi-database </v-icon> &nbsp;
                                 <span class="text-capitalize caption">{{
                                   db.connection.database
                                 }}</span>
                               </v-tab>
                               <v-tabs-items v-model="databases[panelIndex]">
                                 <v-tab-item
-                                  v-for="(db, dbIndex) in project.envs[envKey].db"
+                                  v-for="(db, dbIndex) in project.envs[envKey]
+                                    .db"
                                   :key="dbIndex"
                                 >
                                   <v-card flat>
@@ -210,28 +228,46 @@
                                           class="monaco-overlay"
                                         >
                                           <v-container fluid class="h-100">
-                                            <v-card style="position: relative" class="h-100">
+                                            <v-card
+                                              style="position: relative"
+                                              class="h-100"
+                                            >
                                               <v-icon
                                                 class="monaco-overlay-close pointer"
                                                 color="error"
-                                                @click="$set(showMonaco, dbIndex, false)"
+                                                @click="
+                                                  $set(
+                                                    showMonaco,
+                                                    dbIndex,
+                                                    false
+                                                  )
+                                                "
                                               >
                                                 mdi-close-circle
                                               </v-icon>
 
                                               <span
                                                 class="ml-2 caption grey--text"
-                                              >Refer knex documentation
+                                                >Refer knex documentation
                                                 <a
                                                   href="https://knexjs.org/#Installation-client"
                                                   target="_blank"
                                                   class="grey--text"
-                                                >here</a>
-                                                .</span>
+                                                  >here</a
+                                                >
+                                                .</span
+                                              >
 
                                               <monaco-json-object-editor
-                                                v-model="project.envs[envKey].db[dbIndex]"
-                                                style="height: calc(100% - 20px); width: 100%"
+                                                v-model="
+                                                  project.envs[envKey].db[
+                                                    dbIndex
+                                                  ]
+                                                "
+                                                style="
+                                                  height: calc(100% - 20px);
+                                                  width: 100%;
+                                                "
                                               />
                                             </v-card>
                                           </v-container>
@@ -259,8 +295,10 @@
                                                 small
                                                 :color="
                                                   colors[
-                                                    Object.keys(databaseNames).indexOf(item) %
-                                                    colors.length
+                                                    Object.keys(
+                                                      databaseNames
+                                                    ).indexOf(item) %
+                                                      colors.length
                                                   ]
                                                 "
                                                 class=""
@@ -269,12 +307,17 @@
                                               </v-chip>
                                             </template>
 
-                                            <template slot="item" slot-scope="data">
+                                            <template
+                                              slot="item"
+                                              slot-scope="data"
+                                            >
                                               <v-chip
                                                 :color="
                                                   colors[
-                                                    Object.keys(databaseNames).indexOf(data.item) %
-                                                    colors.length
+                                                    Object.keys(
+                                                      databaseNames
+                                                    ).indexOf(data.item) %
+                                                      colors.length
                                                   ]
                                                 "
                                                 class="caption"
@@ -285,9 +328,14 @@
                                           </v-select>
                                         </v-col>
                                         <!-- SQLite File -->
-                                        <v-col v-if="db.client === 'sqlite3'" class="py-0">
+                                        <v-col
+                                          v-if="db.client === 'sqlite3'"
+                                          class="py-0"
+                                        >
                                           <v-text-field
-                                            v-model="db.connection.connection.filename"
+                                            v-model="
+                                              db.connection.connection.filename
+                                            "
                                             v-ge="['project', 'env-db-file']"
                                             :rules="form.folderRequiredRule"
                                             :label="$t('labels.sqliteFile')"
@@ -299,7 +347,11 @@
                                           </v-text-field>
                                         </v-col>
                                         <!-- Host Address -->
-                                        <v-col v-if="db.client !== 'sqlite3'" cols="4" class="py-0">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          cols="4"
+                                          class="py-0"
+                                        >
                                           <v-text-field
                                             v-model="db.connection.host"
                                             v-ge="['project', 'env-db-host']"
@@ -309,7 +361,11 @@
                                           />
                                         </v-col>
                                         <!-- Port Number -->
-                                        <v-col v-if="db.client !== 'sqlite3'" cols="4" class="py-0">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          cols="4"
+                                          class="py-0"
+                                        >
                                           <v-text-field
                                             v-model="db.connection.port"
                                             v-ge="['project', 'env-db-port']"
@@ -319,7 +375,11 @@
                                           />
                                         </v-col>
                                         <!-- Username -->
-                                        <v-col v-if="db.client !== 'sqlite3'" cols="4" class="py-0">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          cols="4"
+                                          class="py-0"
+                                        >
                                           <v-text-field
                                             v-model="db.connection.user"
                                             v-ge="['project', 'env-db-user']"
@@ -329,14 +389,23 @@
                                           />
                                         </v-col>
                                         <!-- Password -->
-                                        <v-col v-if="db.client !== 'sqlite3'" cols="4" class="py-0">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          cols="4"
+                                          class="py-0"
+                                        >
                                           <v-text-field
                                             :ref="`password${envKey}`"
                                             v-model="db.connection.password"
-                                            v-ge="['project', 'env-db-password']"
+                                            v-ge="[
+                                              'project',
+                                              'env-db-password',
+                                            ]"
                                             class="body-2 db-password"
                                             :type="
-                                              showPass[`${panelIndex}_${dbIndex}`]
+                                              showPass[
+                                                `${panelIndex}_${dbIndex}`
+                                              ]
                                                 ? 'text'
                                                 : 'password'
                                             "
@@ -350,39 +419,59 @@
                                                   $set(
                                                     showPass,
                                                     `${panelIndex}_${dbIndex}`,
-                                                    !showPass[`${panelIndex}_${dbIndex}`]
+                                                    !showPass[
+                                                      `${panelIndex}_${dbIndex}`
+                                                    ]
                                                   )
                                                 "
                                               >
                                                 {{
-                                                  showPass[`${panelIndex}_${dbIndex}`]
-                                                    ? 'visibility_off'
-                                                    : 'visibility'
+                                                  showPass[
+                                                    `${panelIndex}_${dbIndex}`
+                                                  ]
+                                                    ? "visibility_off"
+                                                    : "visibility"
                                                 }}
                                               </v-icon>
                                             </template>
                                           </v-text-field>
                                         </v-col>
                                         <!-- Database : create if not exists -->
-                                        <v-col v-if="db.client !== 'sqlite3'" cols="4" class="py-0">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          cols="4"
+                                          class="py-0"
+                                        >
                                           <v-text-field
                                             v-model="db.connection.database"
                                             v-ge="['project', 'env-db-name']"
                                             :disabled="edit && enableDbEdit < 2"
                                             class="body-2 database-field"
                                             :rules="form.requiredRule"
-                                            :label="$t('labels.dbCreateIfNotExists')"
+                                            :label="
+                                              $t('labels.dbCreateIfNotExists')
+                                            "
                                           />
                                         </v-col>
                                         <!--  todo : ssl & inflection -->
-                                        <v-col v-if="db.client !== 'sqlite3'" class="">
+                                        <v-col
+                                          v-if="db.client !== 'sqlite3'"
+                                          class=""
+                                        >
                                           <v-expansion-panels>
-                                            <v-expansion-panel style="border: 1px solid wheat">
+                                            <v-expansion-panel
+                                              style="border: 1px solid wheat"
+                                            >
                                               <v-expansion-panel-header>
                                                 <!-- SSL & Advanced parameters -->
-                                                <span class="grey--text caption">{{
-                                                  $t('title.advancedParameters')
-                                                }}</span>
+                                                <span
+                                                  class="grey--text caption"
+                                                  >{{
+                                                    $t(
+                                                      "title.advancedParameters"
+                                                    )
+                                                  }}</span
+                                                >
                                               </v-expansion-panel-header>
                                               <v-expansion-panel-content>
                                                 <v-card class="elevation-0">
@@ -390,10 +479,16 @@
                                                     <v-select
                                                       v-model="db.ui.sslUse"
                                                       class="caption"
-                                                      :items="Object.keys(sslUsage)"
+                                                      :items="
+                                                        Object.keys(sslUsage)
+                                                      "
                                                     >
-                                                      <template #item="{ item }">
-                                                        <span class="caption">{{ item }}</span>
+                                                      <template
+                                                        #item="{ item }"
+                                                      >
+                                                        <span class="caption">{{
+                                                          item
+                                                        }}</span>
                                                       </template>
                                                     </v-select>
 
@@ -410,10 +505,13 @@
                                                             dbIndex
                                                           )
                                                         "
-                                                      >
+                                                      />
                                                       <!-- Select .cert file -->
                                                       <x-btn
-                                                        v-ge="['project', 'env-db-cert']"
+                                                        v-ge="[
+                                                          'project',
+                                                          'env-db-cert',
+                                                        ]"
                                                         :tooltip="
                                                           $t(
                                                             'tooltip.clientCert'
@@ -440,11 +538,19 @@
                                                         type="file"
                                                         class="d-none"
                                                         @change="
-                                                          readFileContent(db, 'ssl', 'key', dbIndex)
+                                                          readFileContent(
+                                                            db,
+                                                            'ssl',
+                                                            'key',
+                                                            dbIndex
+                                                          )
                                                         "
-                                                      >
+                                                      />
                                                       <x-btn
-                                                        v-ge="['project', 'env-db-key']"
+                                                        v-ge="[
+                                                          'project',
+                                                          'env-db-key',
+                                                        ]"
                                                         :tooltip="
                                                           $t(
                                                             'tooltip.clientKey'
@@ -471,15 +577,21 @@
                                                         type="file"
                                                         class="d-none"
                                                         @change="
-                                                          readFileContent(db, 'ssl', 'ca', dbIndex)
+                                                          readFileContent(
+                                                            db,
+                                                            'ssl',
+                                                            'ca',
+                                                            dbIndex
+                                                          )
                                                         "
-                                                      >
+                                                      />
                                                       <x-btn
-                                                        v-ge="['project', 'env-db-ca']"
+                                                        v-ge="[
+                                                          'project',
+                                                          'env-db-ca',
+                                                        ]"
                                                         :tooltip="
-                                                          $t(
-                                                            'tooltip.clientCA'
-                                                          )
+                                                          $t('tooltip.clientCA')
                                                         "
                                                         small
                                                         color="primary"
@@ -501,7 +613,10 @@
                                                       <v-col>
                                                         <!-- Inflection - Table name -->
                                                         <v-select
-                                                          v-model="db.meta.inflection.table_name"
+                                                          v-model="
+                                                            db.meta.inflection
+                                                              .table_name
+                                                          "
                                                           :disabled="edit"
                                                           class="caption"
                                                           :label="
@@ -509,17 +624,33 @@
                                                               'labels.inflection.tableName'
                                                             )
                                                           "
-                                                          :items="project.projectType === 'rest' ? ['camelize', 'none'] : ['camelize']"
+                                                          :items="
+                                                            project.projectType ===
+                                                            'rest'
+                                                              ? [
+                                                                  'camelize',
+                                                                  'none',
+                                                                ]
+                                                              : ['camelize']
+                                                          "
                                                         >
-                                                          <template #item="{ item }">
-                                                            <span class="caption">{{ item }}</span>
+                                                          <template
+                                                            #item="{ item }"
+                                                          >
+                                                            <span
+                                                              class="caption"
+                                                              >{{ item }}</span
+                                                            >
                                                           </template>
                                                         </v-select>
                                                       </v-col>
                                                       <v-col>
                                                         <!-- Inflection - Column name -->
                                                         <v-select
-                                                          v-model="db.meta.inflection.column_name"
+                                                          v-model="
+                                                            db.meta.inflection
+                                                              .column_name
+                                                          "
                                                           :disabled="edit"
                                                           class="caption"
                                                           :label="
@@ -527,19 +658,28 @@
                                                               'labels.inflection.columnName'
                                                             )
                                                           "
-                                                          :items="project.projectType === 'rest' ? ['camelize', 'none'] : ['camelize']"
+                                                          :items="
+                                                            project.projectType ===
+                                                            'rest'
+                                                              ? [
+                                                                  'camelize',
+                                                                  'none',
+                                                                ]
+                                                              : ['camelize']
+                                                          "
                                                         >
-                                                          <template #item="{ item }">
-                                                            <span class="caption">{{ item }}</span>
+                                                          <template
+                                                            #item="{ item }"
+                                                          >
+                                                            <span
+                                                              class="caption"
+                                                              >{{ item }}</span
+                                                            >
                                                           </template>
                                                         </v-select>
                                                       </v-col>
                                                       <v-col
-                                                        class="
-                                                          d-flex
-                                                          align-center
-                                                          flex-shrink-1 flex-grow-0
-                                                        "
+                                                        class="d-flex align-center flex-shrink-1 flex-grow-0"
                                                       >
                                                         <x-btn
                                                           small
@@ -554,7 +694,9 @@
                                                             $set(
                                                               showMonaco,
                                                               dbIndex,
-                                                              !showMonaco[dbIndex]
+                                                              !showMonaco[
+                                                                dbIndex
+                                                              ]
                                                             )
                                                           "
                                                         >
@@ -567,7 +709,7 @@
                                                           <!-- Edit connection JSON -->
                                                           {{
                                                             $t(
-                                                              'activity.editConnJson'
+                                                              "activity.editConnJson"
                                                             )
                                                           }}
                                                         </x-btn>
@@ -584,29 +726,41 @@
                                       <v-row class="text-right justify-end">
                                         <!-- Test Database Connection -->
                                         <x-btn
-                                          v-ge="['project', 'env-db-test-connection']"
-                                          :tooltip="
-                                            $t('activity.testDbConn')
-                                          "
+                                          v-ge="[
+                                            'project',
+                                            'env-db-test-connection',
+                                          ]"
+                                          :tooltip="$t('activity.testDbConn')"
                                           outlined
                                           small
-                                          @click="testConnection(db, envKey, panelIndex)"
+                                          @click="
+                                            testConnection(
+                                              db,
+                                              envKey,
+                                              panelIndex
+                                            )
+                                          "
                                         >
                                           <!-- Test Database Connection -->
-                                          {{ $t('activity.testDbConn') }}
+                                          {{ $t("activity.testDbConn") }}
                                         </x-btn>
                                         <!-- Remove Database from environment -->
                                         <x-btn
                                           v-if="dbIndex"
                                           v-ge="['project', 'env-db-delete']"
                                           :tooltip="
-                                            $t(
-                                              'activity.removeDbFromEnv'
-                                            )
+                                            $t('activity.removeDbFromEnv')
                                           "
                                           text
                                           small
-                                          @click="removeDBFromEnv(db, envKey, panelIndex, dbIndex)"
+                                          @click="
+                                            removeDBFromEnv(
+                                              db,
+                                              envKey,
+                                              panelIndex,
+                                              dbIndex
+                                            )
+                                          "
                                         >
                                           <v-hover v-slot="{ hover }">
                                             <v-icon
@@ -685,43 +839,42 @@
   </v-container>
 </template>
 <script>
-import JSON5 from 'json5'
+import JSON5 from "json5";
 
-import { mapGetters, mapActions } from 'vuex'
-import Vue from 'vue'
+import { mapGetters, mapActions } from "vuex";
+import Vue from "vue";
 
-import { v4 as uuidv4 } from 'uuid'
+import { v4 as uuidv4 } from "uuid";
 
-import XBtn from './global/xBtn'
-import dlgOk from './utils/dlgOk.vue'
-import textDlgSubmitCancel from './utils/dlgTextSubmitCancel'
-import MonacoJsonObjectEditor from '@/components/monaco/MonacoJsonObjectEditor'
-import ApiOverlay from '@/components/apiOverlay'
-import colors from '@/mixins/colors'
-import DlgOkNew from '@/components/utils/dlgOkNew'
-import readFile from '@/helpers/fileReader'
+import XBtn from "./global/xBtn";
+import dlgOk from "./utils/dlgOk.vue";
+import textDlgSubmitCancel from "./utils/dlgTextSubmitCancel";
+import MonacoJsonObjectEditor from "@/components/monaco/MonacoJsonObjectEditor";
+import ApiOverlay from "@/components/apiOverlay";
+import colors from "@/mixins/colors";
+import DlgOkNew from "@/components/utils/dlgOkNew";
+import readFile from "@/helpers/fileReader";
 
 const {
   uniqueNamesGenerator,
   starWars,
   adjectives,
-  animals
-} = require('unique-names-generator')
+  animals,
+} = require("unique-names-generator");
 
-const homeDir = ''
+const homeDir = "";
 
 export default {
-
   components: {
     DlgOkNew,
     ApiOverlay,
     MonacoJsonObjectEditor,
     XBtn,
     dlgOk,
-    textDlgSubmitCancel
+    textDlgSubmitCancel,
   },
   mixins: [colors],
-  layout: 'empty',
+  layout: "empty",
   data() {
     return {
       testSuccess: false,
@@ -729,79 +882,79 @@ export default {
       allSchemas: false,
       showMonaco: [],
       smtpConfiguration: {
-        from: '',
-        options: ''
+        from: "",
+        options: "",
       },
       showSecret: false,
       loaderMessages: [
-        'Setting up new database configs',
-        'Inferring database schema',
-        'Generating APIs.',
-        'Generating APIs..',
-        'Generating APIs...',
-        'Generating APIs....',
-        'Please wait',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...',
-        'Please wait..',
-        'Please wait.',
-        'Please wait',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...',
-        'Please wait..',
-        'Please wait.',
-        'Please wait..',
-        'Please wait...'
+        "Setting up new database configs",
+        "Inferring database schema",
+        "Generating APIs.",
+        "Generating APIs..",
+        "Generating APIs...",
+        "Generating APIs....",
+        "Please wait",
+        "Please wait.",
+        "Please wait..",
+        "Please wait...",
+        "Please wait..",
+        "Please wait.",
+        "Please wait",
+        "Please wait.",
+        "Please wait..",
+        "Please wait...",
+        "Please wait..",
+        "Please wait.",
+        "Please wait..",
+        "Please wait...",
       ],
-      loaderMessage: '',
+      loaderMessage: "",
       projectReloading: false,
       enableDbEdit: 0,
       authTypes: [
         {
-          text: 'JWT',
-          value: 'jwt'
+          text: "JWT",
+          value: "jwt",
         },
         {
-          text: 'Master Key',
-          value: 'masterKey'
+          text: "Master Key",
+          value: "masterKey",
         },
         {
-          text: 'Middleware',
-          value: 'middleware'
+          text: "Middleware",
+          value: "middleware",
         },
         {
-          text: 'Disabled',
-          value: 'none'
-        }
+          text: "Disabled",
+          value: "none",
+        },
       ],
       projectTypes: [
         {
-          text: 'REST APIs',
-          value: 'rest',
-          icon: 'mdi-code-json',
-          iconColor: 'green'
+          text: "REST APIs",
+          value: "rest",
+          icon: "mdi-code-json",
+          iconColor: "green",
         },
         {
-          text: 'GRAPHQL APIs',
-          value: 'graphql',
-          icon: 'mdi-graphql',
-          iconColor: 'pink'
-        }
+          text: "GRAPHQL APIs",
+          value: "graphql",
+          icon: "mdi-graphql",
+          iconColor: "pink",
+        },
       ],
 
       showPass: {},
       /** ************** START : form related ****************/
       form: {
-        portValidationRule: [v => /^\d+$/.test(v) || 'Not a valid port'],
-        titleRequiredRule: [v => !!v || 'Title is required'],
-        requiredRule: [v => !!v || 'Field is required'],
-        folderRequiredRule: [v => !!v || 'Folder path is required']
+        portValidationRule: [(v) => /^\d+$/.test(v) || "Not a valid port"],
+        titleRequiredRule: [(v) => !!v || "Title is required"],
+        requiredRule: [(v) => !!v || "Field is required"],
+        folderRequiredRule: [(v) => !!v || "Folder path is required"],
       },
       valid: null,
       panel: 0,
-      client: ['Sqlite'],
+      client: ["Sqlite"],
       baseFolder: homeDir,
 
       tab: null,
@@ -810,244 +963,244 @@ export default {
       /** ************** END : form related ****************/
       auth: {
         authSecret: uuidv4(),
-        authType: 'jwt',
-        webhook: null
+        authType: "jwt",
+        webhook: null,
       },
       project: {},
       defaultProject: {
-        title: '',
-        version: '0.6',
+        title: "",
+        version: "0.6",
         folder: homeDir,
         envs: {
           _noco: {
             db: [
               {
-                client: 'pg',
+                client: "pg",
                 connection: {
-                  host: 'localhost',
-                  port: '5432',
-                  user: 'postgres',
-                  password: 'password',
-                  database: '_dev',
+                  host: "localhost",
+                  port: "5432",
+                  user: "postgres",
+                  password: "password",
+                  database: "_dev",
                   ssl: {
-                    ca: '',
-                    key: '',
-                    cert: ''
-                  }
+                    ca: "",
+                    key: "",
+                    cert: "",
+                  },
                 },
                 meta: {
-                  tn: 'nc_evolutions',
-                  dbAlias: 'db',
+                  tn: "nc_evolutions",
+                  dbAlias: "db",
                   api: {
-                    type: 'rest',
-                    prefix: '',
-                    graphqlDepthLimit: 10
+                    type: "rest",
+                    prefix: "",
+                    graphqlDepthLimit: 10,
                   },
                   inflection: {
-                    table_name: 'camelize',
-                    column_name: 'camelize'
-                  }
+                    table_name: "camelize",
+                    column_name: "camelize",
+                  },
                 },
                 ui: {
                   setup: -1,
                   ssl: {
-                    key: this.$t('labels.clientKey'), // Client Key
-                    cert: this.$t('labels.clientCert'), // Client Cert
-                    ca: this.$t('labels.serverCA') // Server CA
+                    key: this.$t("labels.clientKey"), // Client Key
+                    cert: this.$t("labels.clientCert"), // Client Cert
+                    ca: this.$t("labels.serverCA"), // Server CA
                   },
-                  sslUse: 'Preferred'
-                }
-              }
+                  sslUse: "Preferred",
+                },
+              },
             ],
             apiClient: {
-              data: []
-            }
-          }
+              data: [],
+            },
+          },
         },
-        workingEnv: '_noco',
+        workingEnv: "_noco",
         ui: {
           envs: {
-            _noco: {}
-          }
+            _noco: {},
+          },
         },
         meta: {
-          version: '0.6',
-          seedsFolder: 'seeds',
-          queriesFolder: 'queries',
-          apisFolder: 'apis',
-          projectType: 'rest',
-          type: 'mvc',
-          language: 'ts'
+          version: "0.6",
+          seedsFolder: "seeds",
+          queriesFolder: "queries",
+          apisFolder: "apis",
+          projectType: "rest",
+          type: "mvc",
+          language: "ts",
         },
-        seedsFolder: 'seeds',
-        queriesFolder: 'queries',
-        apisFolder: 'apis',
-        projectType: 'rest',
-        type: 'mvc',
-        language: 'ts',
+        seedsFolder: "seeds",
+        queriesFolder: "queries",
+        apisFolder: "apis",
+        projectType: "rest",
+        type: "mvc",
+        language: "ts",
         apiClient: {
-          data: []
-        }
+          data: [],
+        },
       },
 
       sampleConnectionData: {
         Postgres: {
-          host: 'localhost',
-          port: '5432',
-          user: 'postgres',
-          password: 'password',
-          database: '_test',
+          host: "localhost",
+          port: "5432",
+          user: "postgres",
+          password: "password",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         MySQL: {
-          host: 'localhost',
-          port: '3306',
-          user: 'root',
-          password: 'password',
-          database: '_test',
+          host: "localhost",
+          port: "3306",
+          user: "root",
+          password: "password",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         Vitess: {
-          host: 'localhost',
-          port: '15306',
-          user: 'root',
-          password: 'password',
-          database: '_test',
+          host: "localhost",
+          port: "15306",
+          user: "root",
+          password: "password",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         TiDB: {
-          host: 'localhost',
-          port: '4000',
-          user: 'root',
-          password: '',
-          database: '_test',
+          host: "localhost",
+          port: "4000",
+          user: "root",
+          password: "",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         Yugabyte: {
-          host: 'localhost',
-          port: '5432',
-          user: 'postgres',
-          password: '',
-          database: '_test',
+          host: "localhost",
+          port: "5432",
+          user: "postgres",
+          password: "",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         CitusDB: {
-          host: 'localhost',
-          port: '5432',
-          user: 'postgres',
-          password: '',
-          database: '_test',
+          host: "localhost",
+          port: "5432",
+          user: "postgres",
+          password: "",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         CockroachDB: {
-          host: 'localhost',
-          port: '5432',
-          user: 'postgres',
-          password: '',
-          database: '_test',
+          host: "localhost",
+          port: "5432",
+          user: "postgres",
+          password: "",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         Greenplum: {
-          host: 'localhost',
-          port: '5432',
-          user: 'postgres',
-          password: '',
-          database: '_test',
+          host: "localhost",
+          port: "5432",
+          user: "postgres",
+          password: "",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         MsSQL: {
-          host: 'localhost',
+          host: "localhost",
           port: 1433,
-          user: 'sa',
-          password: 'Password123.',
-          database: '_test',
+          user: "sa",
+          password: "Password123.",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         Oracle: {
-          host: 'localhost',
-          port: '1521',
-          user: 'system',
-          password: 'Oracle18',
-          database: '_test',
+          host: "localhost",
+          port: "1521",
+          user: "system",
+          password: "Oracle18",
+          database: "_test",
           ssl: {
-            ca: '',
-            key: '',
-            cert: ''
-          }
+            ca: "",
+            key: "",
+            cert: "",
+          },
         },
         Sqlite: {
-          client: 'sqlite3',
+          client: "sqlite3",
           database: homeDir,
           connection: {
-            filename: homeDir
+            filename: homeDir,
           },
-          useNullAsDefault: true
-        }
+          useNullAsDefault: true,
+        },
       },
       dialog: {
         show: false,
-        title: '',
-        heading: '',
+        title: "",
+        heading: "",
         mtdOk: this.testConnectionMethodSubmit,
-        type: 'primary'
+        type: "primary",
       },
       // TODO: apply i18n for sslUsage
       // See general.no - 5 in en.json
       sslUsage: {
-        No: 'No',
-        Preferred: 'Preferred',
-        Required: 'pg',
-        'Required-CA': 'Required-CA',
-        'Required-IDENTITY': 'Required-IDENTITY'
+        No: "No",
+        Preferred: "Preferred",
+        Required: "pg",
+        "Required-CA": "Required-CA",
+        "Required-IDENTITY": "Required-IDENTITY",
       },
-      sslUse: this.$t('general.preferred'), // Preferred
+      sslUse: this.$t("general.preferred"), // Preferred
       ssl: {
-        key: this.$t('labels.clientKey'), // Client Key
-        cert: this.$t('labels.clientCert'), // Client Cert
-        ca: this.$t('labels.serverCA') // Server CA
+        key: this.$t("labels.clientKey"), // Client Key
+        cert: this.$t("labels.clientCert"), // Client Cert
+        ca: this.$t("labels.serverCA"), // Server CA
       },
       databaseNames: {
-        MySQL: 'mysql2',
-        Postgres: 'pg',
+        MySQL: "mysql2",
+        Postgres: "pg",
         // Oracle: "oracledb",
-        MsSQL: 'mssql',
-        Sqlite: 'sqlite3'
+        MsSQL: "mssql",
+        Sqlite: "sqlite3",
         // Vitess: "mysql2",
         // TiDB: "mysql2",
         // Yugabyte: "pg",
@@ -1058,80 +1211,87 @@ export default {
       testDatabaseNames: {
         mysql2: null,
         mysql: null,
-        pg: 'postgres',
-        oracledb: 'xe',
+        pg: "postgres",
+        oracledb: "xe",
         mssql: undefined,
-        sqlite3: 'a.sqlite'
+        sqlite3: "a.sqlite",
       },
       dbIcons: {
-        Oracle: 'temp/db/oracle.png',
-        Postgres: 'temp/db/postgre.png',
-        MySQL: 'temp/db/mysql.png',
-        MsSQL: 'temp/db/mssql.png',
-        Sqlite: 'temp/db/sqlite.svg',
-        Salesforce: 'temp/salesforce-3-569548.webp',
-        SAP: 'temp/sap.png',
-        Stripe: 'temp/stripe.svg'
+        Oracle: "temp/db/oracle.png",
+        Postgres: "temp/db/postgre.png",
+        MySQL: "temp/db/mysql.png",
+        MsSQL: "temp/db/mssql.png",
+        Sqlite: "temp/db/sqlite.svg",
+        Salesforce: "temp/salesforce-3-569548.webp",
+        SAP: "temp/sap.png",
+        Stripe: "temp/stripe.svg",
       },
       dialogGetEnvName: {
         dialogShow: false,
-        heading: 'Enter New Environment Name',
-        field: 'Environment Name'
+        heading: "Enter New Environment Name",
+        field: "Environment Name",
       },
 
       compErrorMessages: [
-        this.$t('msg.error.invalidChar'), // Invalid character in folder path
-        this.$t('msg.error.invalidDbCredentials'), // Invalid database credentials
-        this.$t('msg.error.unableToConnectToDb'), // Unable to connect to database, please check your database is up
-        this.$t('msg.error.userDoesntHaveSufficientPermission') // User does not exist or have sufficient permission to create schema
+        this.$t("msg.error.invalidChar"), // Invalid character in folder path
+        this.$t("msg.error.invalidDbCredentials"), // Invalid database credentials
+        this.$t("msg.error.unableToConnectToDb"), // Unable to connect to database, please check your database is up
+        this.$t("msg.error.userDoesntHaveSufficientPermission"), // User does not exist or have sufficient permission to create schema
       ],
-      compErrorMessage: ''
-    }
+      compErrorMessage: "",
+    };
   },
   computed: {
-    ...mapGetters({ sqlMgr: 'sqlMgr/sqlMgr' }),
+    ...mapGetters({ sqlMgr: "sqlMgr/sqlMgr" }),
     isTitle() {
-      return this.project.title && this.project.title.trim().length
+      return this.project.title && this.project.title.trim().length;
     },
     envStatusValid() {
       return (
         this.project.envs &&
-        Object.values(this.project.envs).every(this.getEnvironmentStatusAggregatedNew)
-      )
+        Object.values(this.project.envs).every(
+          this.getEnvironmentStatusAggregatedNew
+        )
+      );
     },
     typeIcon() {
       if (this.project.projectType) {
-        return this.projectTypes.find(({ value }) => value === this.project.projectType)
+        return this.projectTypes.find(
+          ({ value }) => value === this.project.projectType
+        );
       } else {
         return {
-          icon: 'mdi-server',
-          iconColor: 'primary'
-        }
+          icon: "mdi-server",
+          iconColor: "primary",
+        };
       }
     },
     databaseNamesReverse() {
-      return Object.entries(this.databaseNames).reduce((newObj, [value, key]) => {
-        newObj[key] = value
-        return newObj
-      }, {})
-    }
+      return Object.entries(this.databaseNames).reduce(
+        (newObj, [value, key]) => {
+          newObj[key] = value;
+          return newObj;
+        },
+        {}
+      );
+    },
   },
   methods: {
     async enableAllSchemas() {
-      this.$toast.info('Enabled all schemas').goAway(3000)
-      this.allSchemas = true
+      this.$toast.info("Enabled all schemas").goAway(3000);
+      this.allSchemas = true;
       await this.$axios({
-        url: 'demo',
-        baseURL: `${this.$axios.defaults.baseURL}/dashboard`
-      })
+        url: "demo",
+        baseURL: `${this.$axios.defaults.baseURL}/dashboard`,
+      });
     },
 
     ...mapActions({
-      loadProjects: 'project/loadProjects'
+      loadProjects: "project/loadProjects",
     }),
     onAdvancePanelToggle() {
       if (this.$refs.monacoEditor) {
-        setTimeout(() => this.$refs.monacoEditor.resizeLayout(), 400)
+        setTimeout(() => this.$refs.monacoEditor.resizeLayout(), 400);
       }
     },
     getProjectEditTooltip() {
@@ -1142,17 +1302,17 @@ export default {
     },
     readFileContent(db, obj, key, index) {
       readFile(this.$refs[`${key}FilePath`][index], (data) => {
-        Vue.set(db.connection[obj], key, data)
-      })
+        Vue.set(db.connection[obj], key, data);
+      });
     },
     selectFile(db, obj, key, index) {
-      this.$refs[key][index].click()
+      this.$refs[key][index].click();
     },
     onPanelToggle(panelIndex, envKey) {
       this.$nextTick(() => {
         if (this.panel !== undefined) {
-          const panelContainer = this.$refs.panelContainer
-          const panel = this.$refs[`panel${envKey}`][0].$el
+          const panelContainer = this.$refs.panelContainer;
+          const panel = this.$refs[`panel${envKey}`][0].$el;
           setTimeout(
             () =>
               (panelContainer.scrollTop =
@@ -1161,99 +1321,100 @@ export default {
                 panelContainer.getBoundingClientRect().top -
                 50),
             500
-          )
-          setTimeout(() => this.$refs[`password${envKey}`][0].focus())
+          );
+          setTimeout(() => this.$refs[`password${envKey}`][0].focus());
         }
-      })
+      });
     },
     scrollToTop() {
-      document.querySelector('html').scrollTop = 0
+      document.querySelector("html").scrollTop = 0;
     },
     showDBTabInEnvPanel(panelIndex, tabIndex) {
-      this.panel = panelIndex
-      Vue.set(this.databases, panelIndex, tabIndex)
+      this.panel = panelIndex;
+      Vue.set(this.databases, panelIndex, tabIndex);
     },
     getProjectJson() {
       /**
        * remove UI keys within project
        */
-      const xcConfig = JSON.parse(JSON.stringify(this.project))
-      delete xcConfig.ui
+      const xcConfig = JSON.parse(JSON.stringify(this.project));
+      delete xcConfig.ui;
 
       for (const env in xcConfig.envs) {
         for (let i = 0; i < xcConfig.envs[env].db.length; ++i) {
-          xcConfig.envs[env].db[i].meta.api.type = this.project.projectType
+          xcConfig.envs[env].db[i].meta.api.type = this.project.projectType;
           if (
-            xcConfig.envs[env].db[i].client === 'mysql' ||
-            xcConfig.envs[env].db[i].client === 'mysql2'
+            xcConfig.envs[env].db[i].client === "mysql" ||
+            xcConfig.envs[env].db[i].client === "mysql2"
           ) {
-            xcConfig.envs[env].db[i].connection.multipleStatements = true
+            xcConfig.envs[env].db[i].connection.multipleStatements = true;
           }
-          this.handleSSL(xcConfig.envs[env].db[i], false)
-          delete xcConfig.envs[env].db[i].ui
-          if (this.client[i] === 'Vitess') {
-            xcConfig.envs[env].db[i].meta.dbtype = 'vitess'
+          this.handleSSL(xcConfig.envs[env].db[i], false);
+          delete xcConfig.envs[env].db[i].ui;
+          if (this.client[i] === "Vitess") {
+            xcConfig.envs[env].db[i].meta.dbtype = "vitess";
           }
-          if (this.client[i] === 'TiDB') {
-            xcConfig.envs[env].db[i].meta.dbtype = 'tidb'
+          if (this.client[i] === "TiDB") {
+            xcConfig.envs[env].db[i].meta.dbtype = "tidb";
           }
-          if (xcConfig.envs[env].db[i].client === 'oracledb') {
+          if (xcConfig.envs[env].db[i].client === "oracledb") {
             xcConfig.envs[env].db[i].pool = {
               min: 0,
-              max: 50
-            }
+              max: 50,
+            };
 
-            xcConfig.envs[env].db[i].acquireConnectionTimeout = 60000
+            xcConfig.envs[env].db[i].acquireConnectionTimeout = 60000;
           }
 
-          const inflectionObj = xcConfig.envs[env].db[i].meta.inflection
+          const inflectionObj = xcConfig.envs[env].db[i].meta.inflection;
 
           if (inflectionObj) {
             if (Array.isArray(inflectionObj.table_name)) {
-              inflectionObj.table_name = inflectionObj.table_name.join(',')
+              inflectionObj.table_name = inflectionObj.table_name.join(",");
             }
             if (Array.isArray(inflectionObj.column_name)) {
-              inflectionObj.column_name = inflectionObj.column_name.join(',')
+              inflectionObj.column_name = inflectionObj.column_name.join(",");
             }
 
-            inflectionObj.table_name = inflectionObj.table_name || 'none'
-            inflectionObj.column_name = inflectionObj.column_name || 'none'
+            inflectionObj.table_name = inflectionObj.table_name || "none";
+            inflectionObj.column_name = inflectionObj.column_name || "none";
           }
 
           if (this.allSchemas) {
-            delete xcConfig.envs[env].db[i].connection.database
-            xcConfig.envs[env].db[i].meta.allSchemas = true
+            delete xcConfig.envs[env].db[i].connection.database;
+            xcConfig.envs[env].db[i].meta.allSchemas = true;
           }
         }
       }
 
-      xcConfig.auth = {}
+      xcConfig.auth = {};
       switch (this.auth.authType) {
-        case 'jwt':
+        case "jwt":
           xcConfig.auth.jwt = {
             secret: this.auth.authSecret,
-            dbAlias: xcConfig.envs[Object.keys(xcConfig.envs)[0]].db[0].meta.dbAlias
-          }
-          break
-        case 'masterKey':
+            dbAlias:
+              xcConfig.envs[Object.keys(xcConfig.envs)[0]].db[0].meta.dbAlias,
+          };
+          break;
+        case "masterKey":
           xcConfig.auth.masterKey = {
-            secret: this.auth.authSecret
-          }
-          sessionStorage.setItem('masterKey', this.auth.authSecret)
-          break
-        case 'middleware':
+            secret: this.auth.authSecret,
+          };
+          sessionStorage.setItem("masterKey", this.auth.authSecret);
+          break;
+        case "middleware":
           xcConfig.auth.masterKey = {
-            url: this.auth.webhook
-          }
-          break
+            url: this.auth.webhook,
+          };
+          break;
         default:
-          this.auth.disabled = true
-          break
+          this.auth.disabled = true;
+          break;
       }
 
       xcConfig.type = this.$store.state.project.projectInfo
         ? this.$store.state.project.projectInfo.type
-        : 'docker'
+        : "docker";
 
       if (
         this.smtpConfiguration &&
@@ -1263,307 +1424,311 @@ export default {
         try {
           xcConfig.mailer = {
             options: JSON5.parse(this.smtpConfiguration.options),
-            from: this.smtpConfiguration.from
-          }
-        } catch (e) {
-        }
+            from: this.smtpConfiguration.from,
+          };
+        } catch (e) {}
       }
 
-      xcConfig.meta = xcConfig.meta || {}
+      xcConfig.meta = xcConfig.meta || {};
       xcConfig.meta.db = {
-        client: 'sqlite3',
+        client: "sqlite3",
         connection: {
-          filename: 'xc.db'
-        }
-      }
+          filename: "xc.db",
+        },
+      };
 
-      return xcConfig
+      return xcConfig;
     },
 
     constructProjectJsonFromProject(project) {
-      const p = project // JSON.parse(JSON.stringify(project.projectJson));
+      const p = project; // JSON.parse(JSON.stringify(project.projectJson));
 
       p.ui = {
         envs: {
-          _noco: {}
-        }
-      }
+          _noco: {},
+        },
+      };
       for (const env in p.envs) {
-        let i = 0
+        let i = 0;
         for (const db of p.envs[env].db) {
-          Vue.set(this.client, i++, this.databaseNamesReverse[db.client])
+          Vue.set(this.client, i++, this.databaseNamesReverse[db.client]);
 
-          Vue.set(db, 'ui', {
+          Vue.set(db, "ui", {
             setup: 0,
             ssl: {
-              key: this.$t('labels.clientKey'), // Client Key
-              cert: this.$t('labels.clientCert'), // Client Cert
-              ca: this.$t('labels.serverCA') // Server CA
+              key: this.$t("labels.clientKey"), // Client Key
+              cert: this.$t("labels.clientCert"), // Client Cert
+              ca: this.$t("labels.serverCA"), // Server CA
             },
-            sslUse: this.$t('general.preferred') // Preferred
-          })
+            sslUse: this.$t("general.preferred"), // Preferred
+          });
         }
       }
       // delete p.projectJson;
 
       if (p.auth) {
         if (p.auth.jwt) {
-          this.auth.authType = 'jwt'
-          this.auth.authSecret = p.auth.jwt.secret
+          this.auth.authType = "jwt";
+          this.auth.authSecret = p.auth.jwt.secret;
         } else if (p.auth.masterKey) {
           if (p.auth.masterKey.secret) {
-            this.auth.authSecret = p.auth.masterKey.secret
-            this.auth.authType = 'masterKey'
+            this.auth.authSecret = p.auth.masterKey.secret;
+            this.auth.authType = "masterKey";
           } else if (p.auth.masterKey.url) {
-            this.auth.webhook = p.auth.masterKey.url
-            this.auth.authType = 'middleware'
+            this.auth.webhook = p.auth.masterKey.url;
+            this.auth.authType = "middleware";
           } else {
-            this.auth.authType = 'none'
+            this.auth.authType = "none";
           }
         } else {
-          this.auth.authType = 'none'
+          this.auth.authType = "none";
         }
       } else {
-        this.auth.authType = 'none'
+        this.auth.authType = "none";
       }
 
-      this.project = p
+      this.project = p;
       if (p.mailer) {
         this.smtpConfiguration = {
           from: p.mailer.from,
-          options: JSON.stringify(p.mailer.options, 0, 2)
-        }
+          options: JSON.stringify(p.mailer.options, 0, 2),
+        };
       }
-      delete p.mailer
+      delete p.mailer;
     },
 
     async createOrUpdateProject() {
-      const projectJson = this.getProjectJson()
-      delete projectJson.folder
+      const projectJson = this.getProjectJson();
+      delete projectJson.folder;
 
-      let i = 0
-      const toast = this.$toast.info(this.loaderMessages[0])
+      let i = 0;
+      const toast = this.$toast.info(this.loaderMessages[0]);
       const interv = setInterval(() => {
         if (this.edit) {
-          return
+          return;
         }
         if (i < this.loaderMessages.length - 1) {
-          i++
+          i++;
         }
         if (toast) {
           if (!this.allSchemas) {
-            toast.text(this.loaderMessages[i])
+            toast.text(this.loaderMessages[i]);
           } else {
-            toast.goAway(100)
+            toast.goAway(100);
           }
         }
-      }, 1000)
+      }, 1000);
 
-      this.projectReloading = true
+      this.projectReloading = true;
 
-      const con = projectJson.envs._noco.db[0]
-      const inflection = (con.meta && con.meta.inflection) || {}
+      const con = projectJson.envs._noco.db[0];
+      const inflection = (con.meta && con.meta.inflection) || {};
       try {
-        const result = (await this.$api.project.create({
+        const result = await this.$api.project.create({
           title: projectJson.title,
-          bases: [{
-            type: con.client,
-            config: con,
-            inflection_column: inflection.column_name,
-            inflection_table: inflection.table_name
-          }],
-          external: true
-        }))
+          bases: [
+            {
+              type: con.client,
+              config: con,
+              inflection_column: inflection.column_name,
+              inflection_table: inflection.table_name,
+            },
+          ],
+          external: true,
+        });
 
-        clearInterval(interv)
-        toast.goAway(100)
+        clearInterval(interv);
+        toast.goAway(100);
 
-        await this.$store.dispatch('project/ActLoadProjectInfo')
+        await this.$store.dispatch("project/ActLoadProjectInfo");
 
-        this.projectReloading = false
+        this.projectReloading = false;
 
         if (!this.edit && !this.allSchemas) {
           this.$router.push({
             path: `/nc/${result.id}`,
             query: {
-              new: 1
-            }
-          })
+              new: 1,
+            },
+          });
         }
 
-        this.projectCreated = true
+        this.projectCreated = true;
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
-        toast.goAway(0)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
+        toast.goAway(0);
       }
 
-      this.projectReloading = false
-      this.$tele.emit('project:create:extdb:submit')
+      this.projectReloading = false;
+      this.$e("a:project:create:extdb");
     },
 
     mtdDialogGetEnvNameSubmit(envName, cookie) {
-      this.dialogGetEnvName.dialogShow = false
+      this.dialogGetEnvName.dialogShow = false;
       if (envName in this.project.envs) {
       } else {
         Vue.set(this.project.envs, envName, {
           db: [
             {
-              client: 'pg',
+              client: "pg",
               connection: {
-                host: 'localhost',
-                port: '5432',
-                user: 'postgres',
-                password: 'password',
-                database: 'new_database'
+                host: "localhost",
+                port: "5432",
+                user: "postgres",
+                password: "password",
+                database: "new_database",
               },
               meta: {
-                tn: 'nc_evolutions',
-                dbAlias: 'db',
+                tn: "nc_evolutions",
+                dbAlias: "db",
                 inflection: {
-                  table_name: 'camelize',
-                  column_name: 'camelize'
+                  table_name: "camelize",
+                  column_name: "camelize",
                 },
                 api: {
-                  type: ''
-                }
+                  type: "",
+                },
               },
               ui: {
                 setup: 0,
                 ssl: {
-                  key: this.$t('labels.clientKey'), // Client Key
-                  cert: this.$t('labels.clientCert'), // Client Cert
-                  ca: this.$t('labels.serverCA') // Server CA
+                  key: this.$t("labels.clientKey"), // Client Key
+                  cert: this.$t("labels.clientCert"), // Client Cert
+                  ca: this.$t("labels.serverCA"), // Server CA
                 },
-                sslUse: this.$t('general.preferred') // Preferred
-              }
-            }
+                sslUse: this.$t("general.preferred"), // Preferred
+              },
+            },
           ],
-          apiClient: { data: [] }
-        })
+          apiClient: { data: [] },
+        });
       }
     },
     mtdDialogGetEnvNameCancel() {
-      this.dialogGetEnvName.dialogShow = false
+      this.dialogGetEnvName.dialogShow = false;
     },
 
     addNewEnvironment() {
-      this.dialogGetEnvName.dialogShow = true
+      this.dialogGetEnvName.dialogShow = true;
     },
     addNewDB(envKey, panelIndex) {
-      const len = this.project.envs[envKey].db.length
+      const len = this.project.envs[envKey].db.length;
       // eslint-disable-next-line no-unused-vars
-      const lastDbName = `${this.project.title}_${envKey}_${len}`
-      const dbType = (this.client[len] = this.client[len] || this.client[len - 1])
-      const newlyCreatedIndex = this.project.envs[envKey].db.length
+      const lastDbName = `${this.project.title}_${envKey}_${len}`;
+      const dbType = (this.client[len] =
+        this.client[len] || this.client[len - 1]);
+      const newlyCreatedIndex = this.project.envs[envKey].db.length;
       const dbAlias =
         this.project.envs[envKey].db.length <= 0
-          ? 'db'
-          : `db${this.project.envs[envKey].db.length + 1}`
+          ? "db"
+          : `db${this.project.envs[envKey].db.length + 1}`;
       this.project.envs[envKey].db.push({
         client: this.databaseNames[dbType],
         connection: {
           ...this.sampleConnectionData[dbType],
-          database: `${this.project.title}_${envKey}_${newlyCreatedIndex + 1}`
+          database: `${this.project.title}_${envKey}_${newlyCreatedIndex + 1}`,
         },
         meta: {
-          tn: 'nc_evolutions',
+          tn: "nc_evolutions",
           dbAlias,
           inflection: {
-            table_name: 'camelize',
-            column_name: 'camelize'
+            table_name: "camelize",
+            column_name: "camelize",
           },
           api: {
-            type: ''
-          }
+            type: "",
+          },
         },
         ui: {
           setup: 0,
-          sslUse: this.$t('general.preferred'), // Preferred
+          sslUse: this.$t("general.preferred"), // Preferred
           ssl: {
-            key: this.$t('labels.clientKey'), // Client Key
-            cert: this.$t('labels.clientCert'), // Client Cert
-            ca: this.$t('labels.serverCA') // Server CA
-          }
-        }
-      })
+            key: this.$t("labels.clientKey"), // Client Key
+            cert: this.$t("labels.clientCert"), // Client Cert
+            ca: this.$t("labels.serverCA"), // Server CA
+          },
+        },
+      });
       // set active tab as newly created
-      this.databases[panelIndex] = newlyCreatedIndex
+      this.databases[panelIndex] = newlyCreatedIndex;
     },
 
     testConnectionMethodSubmit() {
-      this.dialog.show = false
-    },
-    selectDir(ev) {
-    },
-    selectSqliteFile(db) {
+      this.dialog.show = false;
     },
+    selectDir(ev) {},
+    selectSqliteFile(db) {},
 
     getDbStatusColor(db) {
       switch (db.ui.setup) {
         case -1:
-          return 'red'
+          return "red";
 
         case 0:
-          return 'orange'
+          return "orange";
 
         case 1:
-          return 'green'
+          return "green";
 
         default:
-          break
+          break;
       }
     },
 
     getDbStatusTooltip(db) {
       switch (db.ui.setup) {
         case -1:
-          return 'DB Connection NOT successful'
+          return "DB Connection NOT successful";
 
         case 0:
-          return 'MySql Database Detected - Test your connection'
+          return "MySql Database Detected - Test your connection";
 
         case 1:
-          return 'DB Connection successful'
+          return "DB Connection successful";
 
         default:
-          break
+          break;
       }
     },
     async newTestConnection(db, env, panelIndex) {
       if (
-        db.connection.host === 'localhost' &&
+        db.connection.host === "localhost" &&
         !this.edit &&
-        env === '_noco' &&
+        env === "_noco" &&
         this.project.envs[env].db.length === 1 &&
-        this.project.envs[env].db[0].connection.user === 'postgres' &&
+        this.project.envs[env].db[0].connection.user === "postgres" &&
         this.project.envs[env].db[0].connection.database ===
-        `${this.project.title}_${env}_${this.project.envs[env].length}`
+          `${this.project.title}_${env}_${this.project.envs[env].length}`
       ) {
-        this.handleSSL(db)
-        if (db.client === 'sqlite3') {
-          db.ui.setup = 1
+        this.handleSSL(db);
+        if (db.client === "sqlite3") {
+          db.ui.setup = 1;
         } else {
           const c1 = {
             connection: {
               ...db.connection,
-              ...(db.client !== 'pg' ? { database: this.testDatabaseNames[db.client] } : {})
+              ...(db.client !== "pg"
+                ? { database: this.testDatabaseNames[db.client] }
+                : {}),
             },
-            client: db.client
-          }
+            client: db.client,
+          };
 
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+          const result = await this.$store.dispatch("sqlMgr/ActSqlOp", [
             {
               query: {
-                skipProjectHasDb: 1
-              }
+                skipProjectHasDb: 1,
+              },
             },
-            'testConnection',
-            c1
-          ])
+            "testConnection",
+            c1,
+          ]);
 
           if (result.code === 0) {
-            db.ui.setup = 1
-            let passed = true
+            db.ui.setup = 1;
+            let passed = true;
             /**
              * get other environments
              * and if host is localhost - test and update connection status
@@ -1577,266 +1742,276 @@ export default {
                 const c2 = {
                   connection: {
                     ...this.project.envs[e].db[0].connection,
-                    database: undefined
+                    database: undefined,
                   },
-                  client: this.project.envs[e].db[0].client
-                }
+                  client: this.project.envs[e].db[0].client,
+                };
 
-                this.handleSSL(c2)
+                this.handleSSL(c2);
 
-                const result = await this.sqlMgr.testConnection(c2)
+                const result = await this.sqlMgr.testConnection(c2);
 
                 if (result.code === 0) {
-                  this.project.envs[e][0].ui.setup = 1
+                  this.project.envs[e][0].ui.setup = 1;
                 } else {
-                  this.project.envs[e][0].ui.setup = -1
-                  passed = false
-                  break
+                  this.project.envs[e][0].ui.setup = -1;
+                  passed = false;
+                  break;
                 }
               }
             }
 
             if (passed) {
-              this.panel = null
+              this.panel = null;
             } else {
               // Connection was successful
-              this.dialog.heading = this.$t('msg.info.dbConnected')
-              this.dialog.type = 'success'
-              this.dialog.show = true
+              this.dialog.heading = this.$t("msg.info.dbConnected");
+              this.dialog.type = "success";
+              this.dialog.show = true;
             }
           } else {
-            db.ui.setup = -1
+            db.ui.setup = -1;
             // Connection Failure:
-            this.dialog.heading = this.$t('msg.error.dbConnectionFailed') + result.message
-            this.dialog.type = 'error'
-            this.dialog.show = true
+            this.dialog.heading =
+              this.$t("msg.error.dbConnectionFailed") + result.message;
+            this.dialog.type = "error";
+            this.dialog.show = true;
           }
         }
 
-        return true
+        return true;
       } else {
-        return false
+        return false;
       }
     },
 
     sendAdvancedConfig(connection) {
       if (!connection.ssl) {
-        return false
+        return false;
       }
-      let sendAdvancedConfig = false
-      const sslOptions = Object.values(connection.ssl).filter(el => !!el)
+      let sendAdvancedConfig = false;
+      const sslOptions = Object.values(connection.ssl).filter((el) => !!el);
       if (sslOptions[0]) {
-        sendAdvancedConfig = true
+        sendAdvancedConfig = true;
       } else {
       }
-      return sendAdvancedConfig
+      return sendAdvancedConfig;
     },
 
     handleSSL(db, creating = true) {
-      const sendAdvancedConfig = this.sendAdvancedConfig(db.connection)
+      const sendAdvancedConfig = this.sendAdvancedConfig(db.connection);
       if (!sendAdvancedConfig) {
-        db.connection.ssl = undefined
+        db.connection.ssl = undefined;
       }
 
       if (db.connection.ssl) {
       }
     },
-    getDatabaseForTestConnection(dbType) {
-    },
+    getDatabaseForTestConnection(dbType) {},
     async testConnection(db, env, panelIndex) {
-      this.$tele.emit('project:create:extdb:test-connection')
-      this.$store.commit('notification/MutToggleProgressBar', true)
+      this.$e("a:project:create:extdb:test-connection");
+      this.$store.commit("notification/MutToggleProgressBar", true);
       try {
         if (!(await this.newTestConnection(db, env, panelIndex))) {
-          this.handleSSL(db)
+          this.handleSSL(db);
 
-          if (db.client === 'sqlite3') {
-            db.ui.setup = 1
+          if (db.client === "sqlite3") {
+            db.ui.setup = 1;
           } else {
             const c1 = {
               connection: {
                 ...db.connection,
-                ...(db.client !== 'pg' ? { database: this.testDatabaseNames[db.client] } : {})
+                ...(db.client !== "pg"
+                  ? { database: this.testDatabaseNames[db.client] }
+                  : {}),
               },
-              client: db.client
-            }
+              client: db.client,
+            };
 
-            const result = (await this.$api.utils.testConnection(c1))
+            const result = await this.$api.utils.testConnection(c1);
 
             if (result.code === 0) {
-              db.ui.setup = 1
+              db.ui.setup = 1;
               // this.dialog.heading = "Connection was successful"
               // this.dialog.type = 'success';
               // this.dialog.show = true;
-              this.testSuccess = true
+              this.testSuccess = true;
             } else {
-              db.ui.setup = -1
+              db.ui.setup = -1;
               // this.activeDbNode.testConnectionStatus = false;
-              this.dialog.heading = this.$t('msg.error.dbConnectionFailed') + result.message
-              this.dialog.type = 'error'
-              this.dialog.show = true
+              this.dialog.heading =
+                this.$t("msg.error.dbConnectionFailed") + result.message;
+              this.dialog.type = "error";
+              this.dialog.show = true;
             }
           }
         }
       } catch (e) {
-        console.log(e)
+        console.log(e);
       } finally {
-        this.$store.commit('notification/MutToggleProgressBar', false)
+        this.$store.commit("notification/MutToggleProgressBar", false);
       }
     },
     getEnvironmentStatusAggregated(dbs) {
-      return dbs.every(db => db.ui.setup === 1)
+      return dbs.every((db) => db.ui.setup === 1);
     },
 
     getEnvironmentStatusAggregatedNew(dbs) {
-      return dbs.db.every(db => db.ui.setup === 1)
+      return dbs.db.every((db) => db.ui.setup === 1);
     },
     openFirstPanel() {
       if (!this.edit) {
-        this.panel = 0
+        this.panel = 0;
       }
     },
     onDatabaseTypeChanged(client, db1, index, env) {
       for (const env in this.project.envs) {
         if (this.project.envs[env].db.length > index) {
-          const db = this.project.envs[env].db[index]
-          Vue.set(db, 'client', this.databaseNames[client])
-          if (client !== 'Sqlite') {
-            const {
-              ssl,
-              ...connectionDet
-            } = this.sampleConnectionData[client]
-
-            Vue.set(db, 'connection', {
+          const db = this.project.envs[env].db[index];
+          Vue.set(db, "client", this.databaseNames[client]);
+          if (client !== "Sqlite") {
+            const { ssl, ...connectionDet } = this.sampleConnectionData[client];
+
+            Vue.set(db, "connection", {
               ...connectionDet,
               database: `${this.project.title}_${env}_${index + 1}`,
-              ssl: { ...ssl }
-            })
+              ssl: { ...ssl },
+            });
 
             for (const env in this.project.envs) {
               if (this.project.envs[env].length > index) {
-                this.setDBStatus(this.project.envs[env][index], 0)
+                this.setDBStatus(this.project.envs[env][index], 0);
               }
             }
           } else {
-            db.connection = {}
-            Vue.set(db, 'connection', {
-              client: 'sqlite3',
+            db.connection = {};
+            Vue.set(db, "connection", {
+              client: "sqlite3",
               // connection: {filename: path.join(this.project.folder, `${this.project.title}_${env}_${index + 1}`)},
               connection: {
-                filename: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join(
-                  '/'
-                )
+                filename: [
+                  this.project.folder,
+                  `${this.project.title}_${env}_${index + 1}`,
+                ].join("/"),
               },
-              database: [this.project.folder, `${this.project.title}_${env}_${index + 1}`].join(
-                '/'
-              ),
-              useNullAsDefault: true
-            })
+              database: [
+                this.project.folder,
+                `${this.project.title}_${env}_${index + 1}`,
+              ].join("/"),
+              useNullAsDefault: true,
+            });
           }
         }
       }
     },
     selectDatabaseClient(database, index = 0) {
       if (this.client) {
-        this.client[index] = database
+        this.client[index] = database;
       }
     },
     setDBStatus(db, status) {
-      db.ui.setup = status
+      db.ui.setup = status;
     },
     removeDBFromEnv(db, env, panelIndex, dbIndex) {
       for (const env in this.project.envs) {
         if (this.project.envs[env].db.length > dbIndex) {
-          this.project.envs[env].db.splice(dbIndex, 1)
+          this.project.envs[env].db.splice(dbIndex, 1);
         }
       }
     },
     removeEnv(envKey) {
-      delete this.project.envs[envKey]
-      Vue.set(this.project, 'envs', { ...this.project.envs })
-    }
-  },
-  fetch({
-    store,
-    params
-  }) {
-  },
-  beforeCreated() {
+      delete this.project.envs[envKey];
+      Vue.set(this.project, "envs", { ...this.project.envs });
+    },
   },
+  fetch({ store, params }) {},
+  beforeCreated() {},
   watch: {
-    'project.title'(newValue, oldValue) {
+    "project.title"(newValue, oldValue) {
       if (!newValue) {
-        return
+        return;
       }
       if (!this.edit) {
         // Vue.set(this.project, 'folder', slash(path.join(this.baseFolder, newValue)))
-        Vue.set(this.project, 'folder', [this.baseFolder, newValue].join('/'))
+        Vue.set(this.project, "folder", [this.baseFolder, newValue].join("/"));
         // }//this.project.folder = `${this.baseFolder}/${newValue}`;
 
         for (const env in this.project.envs) {
           for (const [index, db] of this.project.envs[env].db.entries()) {
             // db.connection.database = `${this.project.title}_${env}_${index}`
-            if (db.client !== 'sqlite3') {
-              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`)
+            if (db.client !== "sqlite3") {
+              Vue.set(
+                db.connection,
+                "database",
+                `${this.project.title}_${env}_${index + 1}`
+              );
             } else {
-              Vue.set(db.connection, 'database', `${this.project.title}_${env}_${index + 1}`)
+              Vue.set(
+                db.connection,
+                "database",
+                `${this.project.title}_${env}_${index + 1}`
+              );
             }
           }
         }
       }
     },
-    'project.envs': {
+    "project.envs": {
       deep: true,
       handler(envs) {
-        if (typeof envs === 'object' && envs) {
+        if (typeof envs === "object" && envs) {
           Object.entries(envs).forEach(([key, env]) => {
-            let res = 1
-            const msg = {}
+            let res = 1;
+            const msg = {};
             for (const db of env.db) {
-              res = db.ui.setup < res ? db.ui.setup : res
+              res = db.ui.setup < res ? db.ui.setup : res;
             }
             if (this.edit) {
-              Vue.set(this.project.ui, key, '')
+              Vue.set(this.project.ui, key, "");
             } else {
               switch (res) {
                 case -1:
-                  msg.color = 'red'
+                  msg.color = "red";
                   // msg.msg = ' ( Invalid database parameters )'
-                  msg.msg = `( ${this.$t('msg.error.dbConnectionStatus')} )`
-                  break
+                  msg.msg = `( ${this.$t("msg.error.dbConnectionStatus")} )`;
+                  break;
                 case 0:
-                  msg.color = 'warning'
-                  msg.msg = ' ( Click to validate database credentials )'
-                  break
+                  msg.color = "warning";
+                  msg.msg = " ( Click to validate database credentials )";
+                  break;
                 case 1:
-                  msg.color = 'green'
+                  msg.color = "green";
                   // msg.msg = ' ( Environment Validated )'
-                  msg.msg = `( ${this.$t('msg.info.dbConnectionStatus')} )`
-                  break
+                  msg.msg = `( ${this.$t("msg.info.dbConnectionStatus")} )`;
+                  break;
               }
-              Vue.set(this.project.ui, key, msg)
+              Vue.set(this.project.ui, key, msg);
             }
-          })
+          });
         }
-      }
-    }
+      },
+    },
   },
   async created() {
     this.compErrorMessage =
-      this.compErrorMessages[Math.floor(Math.random() * this.compErrorMessages.length)]
+      this.compErrorMessages[
+        Math.floor(Math.random() * this.compErrorMessages.length)
+      ];
 
     if (this.edit) {
       try {
-        let data = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcProjectGetConfig'])
-        data = JSON.parse(data.config)
-        this.constructProjectJsonFromProject(data)
-        this.$set(this.project, 'folder', data.folder)
+        let data = await this.$store.dispatch("sqlMgr/ActSqlOp", [
+          null,
+          "xcProjectGetConfig",
+        ]);
+        data = JSON.parse(data.config);
+        this.constructProjectJsonFromProject(data);
+        this.$set(this.project, "folder", data.folder);
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
     } else {
-      this.project = JSON.parse(JSON.stringify(this.defaultProject))
+      this.project = JSON.parse(JSON.stringify(this.defaultProject));
       // this.edit = false;
 
       /**
@@ -1846,75 +2021,74 @@ export default {
        *
        *
        */
-      let dbsAvailable = [] // await PortScanner.getOpenDbPortsAsList();
+      let dbsAvailable = []; // await PortScanner.getOpenDbPortsAsList();
       // // setting MySQL as default value if no databases are available
       // if (!dbsAvailable || !dbsAvailable.length) {
-      dbsAvailable = ['MySQL']
+      dbsAvailable = ["MySQL"];
       // }
 
-      this.selectDatabaseClient(dbsAvailable[0], 0)
+      this.selectDatabaseClient(dbsAvailable[0], 0);
 
       // iterating over environment and setting default connection details based
       // on first available database
       for (const env in this.project.envs) {
         for (const db of this.project.envs[env].db) {
-          db.client = this.databaseNames[dbsAvailable[0]]
+          db.client = this.databaseNames[dbsAvailable[0]];
 
-          if (db.client === 'sqlite3') {
+          if (db.client === "sqlite3") {
             db.connection = {
-              ...this.sampleConnectionData[dbsAvailable[0]]
-            }
+              ...this.sampleConnectionData[dbsAvailable[0]],
+            };
 
-            db.ui.setup = 0
+            db.ui.setup = 0;
           } else {
             db.connection = {
               ...this.sampleConnectionData[dbsAvailable[0]],
-              ssl: { ...this.sampleConnectionData[dbsAvailable[0]].ssl }
-            }
+              ssl: { ...this.sampleConnectionData[dbsAvailable[0]].ssl },
+            };
           }
         }
       }
     }
   },
-  beforeMount() {
-  },
+  beforeMount() {},
   mounted() {
     this.$set(
       this.project,
-      'title',
+      "title",
       uniqueNamesGenerator({
-        dictionaries: [[starWars], [adjectives, animals]][Math.floor(Math.random() * 2)]
+        dictionaries: [[starWars], [adjectives, animals]][
+          Math.floor(Math.random() * 2)
+        ],
       })
         .toLowerCase()
-        .replace(/[ -]/g, '_')
-    )
+        .replace(/[ -]/g, "_")
+    );
 
     this.$nextTick(() => {
-      const input = this.$refs.name.$el.querySelector('input')
-      input.setSelectionRange(0, this.project.title.length)
-      input.focus()
-    })
-  },
-  beforeDestroy() {
-  },
-  destroy() {
+      const input = this.$refs.name.$el.querySelector("input");
+      input.setSelectionRange(0, this.project.title.length);
+      input.focus();
+    });
   },
+  beforeDestroy() {},
+  destroy() {},
   validate({ params }) {
-    return true
+    return true;
   },
   head() {
     return {
-      title: this.$t('title.headCreateProject')
-    }
+      title: this.$t("title.headCreateProject"),
+    };
   },
   props: {
     edit: {
       type: Boolean,
-      default: false
-    }
+      default: false,
+    },
   },
-  directives: {}
-}
+  directives: {},
+};
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/previewAs.vue b/packages/nc-gui/components/previewAs.vue
index 5be79665af..97f6e0f599 100644
--- a/packages/nc-gui/components/previewAs.vue
+++ b/packages/nc-gui/components/previewAs.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <v-menu offset-y>
-      <template #activator="{on}">
+      <template #activator="{ on }">
         <v-btn
           v-show="isDashboard && _isUIAllowed('previewAs')"
           small
@@ -10,17 +10,13 @@
           class="white--text nc-btn-preview"
           v-on="on"
         >
-          <v-icon small class="mr-1">
-            mdi-play-circle
-          </v-icon>
+          <v-icon small class="mr-1"> mdi-play-circle </v-icon>
           Preview
-          <v-icon small>
-            mdi-menu-down
-          </v-icon>
+          <v-icon small> mdi-menu-down </v-icon>
         </v-btn>
       </template>
       <v-list dense>
-        <template v-for="(role) in rolesList">
+        <template v-for="role in rolesList">
           <v-list-item
             :key="role.title"
             :class="`pointer nc-preview-${role.title}`"
@@ -37,7 +33,8 @@
               <span
                 class="caption text-capitalize"
                 :class="{ 'x-active--text': role.title === previewAs }"
-              >{{ role.title }}</span>
+                >{{ role.title }}</span
+              >
             </v-list-item-title>
           </v-list-item>
         </template>
@@ -45,11 +42,11 @@
         <template v-if="previewAs">
           <!--                <v-divider></v-divider>-->
           <v-list-item @click="setPreviewUser(null)">
-            <v-icon small class="mr-1">
-              mdi-close
-            </v-icon>
+            <v-icon small class="mr-1"> mdi-close </v-icon>
             <!-- Reset Preview -->
-            <span class="caption nc-preview-reset">{{ $t('activity.resetReview') }}</span>
+            <span class="caption nc-preview-reset">{{
+              $t("activity.resetReview")
+            }}</span>
           </v-list-item>
         </template>
       </v-list>
@@ -63,7 +60,10 @@
       :close-on-click="false"
       :close-on-content-click="false"
     >
-      <div class="floating-reset-btn white py-1 pr-3 caption primary lighten-2 white--text font-weight-bold d-flex align-center nc-floating-preview-btn" style="overflow-y: hidden">
+      <div
+        class="floating-reset-btn white py-1 pr-3 caption primary lighten-2 white--text font-weight-bold d-flex align-center nc-floating-preview-btn"
+        style="overflow-y: hidden"
+      >
         <v-icon style="cursor: move" color="white" @mousedown="mouseDown">
           mdi-drag
         </v-icon>
@@ -81,7 +81,7 @@
             @change="setPreviewUser($event)"
           >
             <v-radio
-              v-for="(role) in rolesList"
+              v-for="role in rolesList"
               :key="role.title"
               :value="role.title"
               color="white"
@@ -89,12 +89,16 @@
               :class="`ml-1 nc-floating-preview-${role.title}`"
             >
               <template #label>
-                <span class="white--text caption text-capitalize">{{ role.title }}</span>
+                <span class="white--text caption text-capitalize">{{
+                  role.title
+                }}</span>
               </template>
             </v-radio>
           </v-radio-group>
           <v-divider vertical class="mr-2" />
-          <span class="pointer" @click="setPreviewUser(null)"> <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span>
+          <span class="pointer" @click="setPreviewUser(null)">
+            <v-icon small color="white">mdi-exit-to-app</v-icon> Exit</span
+          >
         </div>
       </div>
     </v-menu>
@@ -103,65 +107,69 @@
 
 <script>
 export default {
-  name: 'PreviewAs',
+  name: "PreviewAs",
   data: () => ({
     roleIcon: {
-      owner: 'mdi-account-star',
-      creator: 'mdi-account-hard-hat',
-      editor: 'mdi-account-edit',
-      viewer: 'mdi-eye-outline',
-      commenter: 'mdi-comment-account-outline'
+      owner: "mdi-account-star",
+      creator: "mdi-account-hard-hat",
+      editor: "mdi-account-edit",
+      viewer: "mdi-eye-outline",
+      commenter: "mdi-comment-account-outline",
     },
-    rolesList: [{ title: 'editor' }, { title: 'commenter' }, { title: 'viewer' }],
+    rolesList: [
+      { title: "editor" },
+      { title: "commenter" },
+      { title: "viewer" },
+    ],
     position: {
-      x: 9999, y: 9999
-    }
+      x: 9999,
+      y: 9999,
+    },
   }),
   computed: {
     previewAs: {
       get() {
-        return this.$store.state.users.previewAs
+        return this.$store.state.users.previewAs;
       },
       set(previewAs) {
-        this.$store.commit('users/MutPreviewAs', previewAs)
-      }
-    }
+        this.$store.commit("users/MutPreviewAs", previewAs);
+      },
+    },
   },
   mounted() {
     this.position = {
       y: window.innerHeight - 100,
-      x: window.innerWidth / 2 - 250
-    }
+      x: window.innerWidth / 2 - 250,
+    };
 
-    window.addEventListener('mouseup', this.mouseUp, false)
+    window.addEventListener("mouseup", this.mouseUp, false);
   },
   beforeDestroy() {
-    window.removeEventListener('mousemove', this.divMove, true)
-    window.removeEventListener('mouseup', this.mouseUp, false)
+    window.removeEventListener("mousemove", this.divMove, true);
+    window.removeEventListener("mouseup", this.mouseUp, false);
   },
   methods: {
     setPreviewUser(previewAs) {
-      this.$tele.emit(`preview-as:${previewAs}`)
+      this.$e("a:navdraw:preview", { role: previewAs });
       if (!process.env.EE) {
-        this.$toast.info('Available in Enterprise edition').goAway(3000)
+        this.$toast.info("Available in Enterprise edition").goAway(3000);
       } else {
-        this.previewAs = previewAs
-        window.location.reload()
+        this.previewAs = previewAs;
+        window.location.reload();
       }
     },
     mouseUp() {
-      window.removeEventListener('mousemove', this.divMove, true)
+      window.removeEventListener("mousemove", this.divMove, true);
     },
     mouseDown(e) {
-      window.addEventListener('mousemove', this.divMove, true)
+      window.addEventListener("mousemove", this.divMove, true);
     },
 
     divMove(e) {
-      this.position = { y: e.clientY - 10, x: e.clientX - 18 }
-    }
-  }
-}
+      this.position = { y: e.clientY - 10, x: e.clientX - 18 };
+    },
+  },
+};
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui/components/project/appStore.vue b/packages/nc-gui/components/project/appStore.vue
index 28df19a2ec..775b5b4a90 100644
--- a/packages/nc-gui/components/project/appStore.vue
+++ b/packages/nc-gui/components/project/appStore.vue
@@ -5,19 +5,31 @@
     </h3>
     <v-divider />
     <div class="d-flex h-100 nc-app-store-tab mt-5">
-      <v-dialog v-model="pluginInstallOverlay" min-width="400px" max-width="700px" min-height="300">
+      <v-dialog
+        v-model="pluginInstallOverlay"
+        min-width="400px"
+        max-width="700px"
+        min-height="300"
+      >
         <v-card
           v-if="installPlugin && pluginInstallOverlay"
           :dark="$store.state.windows.darkTheme"
           :light="!$store.state.windows.darkTheme"
         >
-          <app-install :id="installPlugin.id" :default-config="defaultConfig" @close="pluginInstallOverlay = false" @saved="saved()" />
+          <app-install
+            :id="installPlugin.id"
+            :default-config="defaultConfig"
+            @close="pluginInstallOverlay = false"
+            @saved="saved()"
+          />
         </v-card>
       </v-dialog>
 
       <dlg-ok-new
         v-model="pluginUninstallModal"
-        :heading="`Please click on submit to reset ${resetPluginRef && resetPluginRef.title}`"
+        :heading="`Please click on submit to reset ${
+          resetPluginRef && resetPluginRef.title
+        }`"
         ok-label="Submit"
         type="primary"
         @ok="confirmResetPlugin"
@@ -29,7 +41,9 @@
           :dark="$store.state.windows.darkTheme"
           :light="!$store.state.windows.darkTheme"
         >
-          <v-card-text> Please confirm to reset {{ resetPluginRef.title }}</v-card-text>
+          <v-card-text>
+            Please confirm to reset {{ resetPluginRef.title }}
+          </v-card-text>
           <v-card-actions>
             <v-btn color="primary" @click="confirmResetPlugin">
               Yes
@@ -43,25 +57,22 @@
 
       <v-container class="h-100 app-container">
         <v-row class="d-flex align-stretch">
-          <v-col v-for="(app,i) in filteredApps" :key="i" class="" cols="6">
+          <v-col v-for="(app, i) in filteredApps" :key="i" class="" cols="6">
             <!--          @click="installApp(app)"-->
 
-            <v-card
-              height="100%"
-              class="elevatio app-item-card "
-            >
-              <div class="install-btn ">
+            <v-card height="100%" class="elevatio app-item-card">
+              <div class="install-btn">
                 <v-btn
                   v-if="app.parsedInput"
                   x-small
                   outlined
-                  class=" caption text-capitalize"
+                  class="caption text-capitalize"
                   @click="installApp(app)"
                 >
                   <v-icon x-small class="mr-1">
                     mdi-pencil
                   </v-icon>
-                  {{ $t('general.edit') }}
+                  {{ $t("general.edit") }}
                 </v-btn>
                 <v-btn
                   v-if="app.parsedInput"
@@ -75,7 +86,13 @@
                   </v-icon>
                   Reset
                 </v-btn>
-                <v-btn v-else x-small outlined class=" caption text-capitalize" @click="installApp(app)">
+                <v-btn
+                  v-else
+                  x-small
+                  outlined
+                  class="caption text-capitalize"
+                  @click="installApp(app)"
+                >
                   <v-icon x-small class="mr-1">
                     mdi-plus
                   </v-icon>
@@ -96,36 +113,35 @@
                   </v-icon>
                 </v-avatar>
                 <div class="flex-grow-1">
-                  <v-card-title
-                    class="title "
-                    v-text="app.title"
-                  />
+                  <v-card-title class="title" v-text="app.title" />
 
                   <v-card-subtitle class="pb-1" v-text="app.description" />
                   <v-card-actions>
-                    <div class="d-flex justify-space-between d-100 align-center">
-                    <!--                    <v-rating-->
-                    <!--                      full-icon="mdi-star"-->
-                    <!--                      readonly-->
-                    <!--                      length="5"-->
-                    <!--                      size="15"-->
-                    <!--                      :value="5"-->
-                    <!--                    />-->
+                    <div
+                      class="d-flex justify-space-between d-100 align-center"
+                    >
+                      <!--                    <v-rating-->
+                      <!--                      full-icon="mdi-star"-->
+                      <!--                      readonly-->
+                      <!--                      length="5"-->
+                      <!--                      size="15"-->
+                      <!--                      :value="5"-->
+                      <!--                    />-->
 
-                    <!--                    <span class="subtitles" v-if="app.price && app.price !== 'Free'">${{ app.price }} / mo</span>-->
-                    <!--                    <span class="subtitles" v-else>Free</span>-->
+                      <!--                    <span class="subtitles" v-if="app.price && app.price !== 'Free'">${{ app.price }} / mo</span>-->
+                      <!--                    <span class="subtitles" v-else>Free</span>-->
                     </div>
                   </v-card-actions>
 
-                <!--                <v-card-actions>-->
-                <!--                  <v-btn-->
-                <!--                    outlined-->
-                <!--                    rounded-->
-                <!--                    small-->
-                <!--                  >-->
-                <!--                    Download-->
-                <!--                  </v-btn>-->
-                <!--                </v-card-actions>-->
+                  <!--                <v-card-actions>-->
+                  <!--                  <v-btn-->
+                  <!--                    outlined-->
+                  <!--                    rounded-->
+                  <!--                    small-->
+                  <!--                  >-->
+                  <!--                    Download-->
+                  <!--                  </v-btn>-->
+                  <!--                </v-card-actions>-->
                 </div>
               </div>
             </v-card>
@@ -203,11 +219,20 @@ export default {
   }),
   computed: {
     filters() {
-      return this.apps.reduce((arr, app) => arr.concat(app.tags || []), []).filter((f, i, arr) => i === arr.indexOf(f)).sort()
+      return this.apps
+        .reduce((arr, app) => arr.concat(app.tags || []), [])
+        .filter((f, i, arr) => i === arr.indexOf(f))
+        .sort()
     },
     filteredApps() {
-      return this.apps.filter(app => (!this.query.trim() || app.title.toLowerCase().includes(this.query.trim().toLowerCase())) &&
-        (!this.selectedTags.length || this.selectedTags.some(t => app.tags && app.tags.includes(t)))
+      return this.apps.filter(
+        app =>
+          (!this.query.trim() ||
+            app.title
+              .toLowerCase()
+              .includes(this.query.trim().toLowerCase())) &&
+          (!this.selectedTags.length ||
+            this.selectedTags.some(t => app.tags && app.tags.includes(t)))
       )
     }
   },
@@ -227,18 +252,18 @@ export default {
         this.$toast.error(e.message).goAway(3000)
       }
 
-      this.$tele.emit(`appstore:reset:${this.resetPluginRef.title}`)
+      this.$e('a:appstore:reset', { app: this.resetPluginRef.title })
     },
     async saved() {
       this.pluginInstallOverlay = false
       await this.loadPluginList()
-      this.$tele.emit(`appstore:install:submit:${this.installPlugin.title}`)
+      this.$e('a:appstore:install', { app: this.installPlugin.title })
     },
     async installApp(app) {
       this.pluginInstallOverlay = true
       this.installPlugin = app
 
-      this.$tele.emit(`appstore:install:trigger:${app.title}`)
+      this.$e('c:appstore:install', { app: app.title })
     },
     async resetApp(app) {
       this.pluginUninstallModal = true
@@ -254,18 +279,15 @@ export default {
           p.parsedInput = p.input && JSON.parse(p.input)
           return p
         })
-      } catch (e) {
-
-      }
+      } catch (e) {}
     }
   }
 }
 </script>
 
 <style scoped lang="scss">
-
 .app-item-card {
-  transition: .4s background-color;
+  transition: 0.4s background-color;
   position: relative;
   overflow-x: hidden;
 
@@ -274,7 +296,7 @@ export default {
     opacity: 0;
     right: -100%;
     top: 10px;
-    transition: .4s opacity, .4s right;
+    transition: 0.4s opacity, 0.4s right;
   }
 
   &:hover .install-btn {
@@ -284,7 +306,7 @@ export default {
 }
 
 .app-item-card {
-  transition: .4s background-color, .4s transform;
+  transition: 0.4s background-color, 0.4s transform;
 
   &:hover {
     background: rgba(123, 126, 136, 0.1) !important;
@@ -303,14 +325,15 @@ export default {
   }
 
   .v-input__control .v-input__slot .v-input--selection-controls__input {
-    transform: scale(.75);
+    transform: scale(0.75);
   }
 
   .v-input--selection-controls .v-input__slot > .v-label {
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
 
-  .search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
+  .search-field.v-text-field > .v-input__control,
+  .search-field.v-text-field > .v-input__control > .v-input__slot {
     min-height: auto;
   }
 }
@@ -319,7 +342,6 @@ export default {
   height: 100%;
   overflow-y: auto;
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue b/packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue
index f2d06255c4..aa43928297 100644
--- a/packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue
+++ b/packages/nc-gui/components/project/projectMetadata/sync/metaDiffSync.vue
@@ -16,7 +16,7 @@
                 class="my-2 mx-auto caption"
                 :placeholder="$t('placeholder.searchModels')"
                 prepend-inner-icon="search"
-                style="max-width:500px"
+                style="max-width: 500px"
                 outlined
               />
 
@@ -31,7 +31,7 @@
                 @click="clickReload"
               >
                 <!-- Reload -->
-                {{ $t('general.reload') }}
+                {{ $t("general.reload") }}
               </x-btn>
               <!--              <x-btn
                 outlined
@@ -63,12 +63,12 @@
                   <tr>
                     <th class="grey--text">
                       <!--Models-->
-                      {{ $t('labels.models') }}
+                      {{ $t("labels.models") }}
                     </th>
                     <!--                    <th>APIs</th>-->
                     <th class="grey--text">
                       <!--Sync state-->
-                      {{ $t('labels.syncState') }}
+                      {{ $t("labels.syncState") }}
                     </th>
                     <th />
                   </tr>
@@ -76,7 +76,12 @@
                 <tbody>
                   <tr
                     v-for="model in diff"
-                    v-show="!filter.trim() || (model.table_name || model.title || '').toLowerCase().includes(filter.toLowerCase())"
+                    v-show="
+                      !filter.trim() ||
+                      (model.table_name || model.title || '')
+                        .toLowerCase()
+                        .includes(filter.toLowerCase())
+                    "
                     :key="model.table_name"
                     :class="`nc-metasync-row nc-metasync-row-${model.table_name}`"
                   >
@@ -86,8 +91,11 @@
                         {{ viewIcons[model.type === 'table' ? 'grid' : 'view'].icon }}
                       </v-icon>-->
                       <v-tooltip bottom>
-                        <template #activator="{on}">
-                          <span v-on="on">{{ model.table_name && model.table_name.slice(prefix.length) }}</span>
+                        <template #activator="{ on }">
+                          <span v-on="on">{{
+                            model.table_name &&
+                            model.table_name.slice(prefix.length)
+                          }}</span>
                         </template>
                         <span class="caption">{{ model.title }}</span>
                       </v-tooltip>
@@ -112,18 +120,19 @@
 
                     <td>
                       <span
-                        v-if="model.detectedChanges && model.detectedChanges.length"
-
+                        v-if="
+                          model.detectedChanges && model.detectedChanges.length
+                        "
                         class="caption error--text"
-                      >{{ model.detectedChanges.map(m => m.msg).join(', ') }}</span>
-                      <span
-                        v-else
-                        class="caption grey--text"
+                        >{{
+                          model.detectedChanges.map((m) => m.msg).join(", ")
+                        }}</span
                       >
+                      <span v-else class="caption grey--text">
                         <!--{{ 'No change identified' }}-->
-                        {{ $t('msg.info.metaNoChange') }}
+                        {{ $t("msg.info.metaNoChange") }}
                       </span>
-                    <!--                  <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
+                      <!--                  <span v-else class="caption grey&#45;&#45;text">Recreate metadata.</span>-->
                     </td>
                   </tr>
                 </tbody>
@@ -200,7 +209,7 @@
             </div>
           </v-card>
         </v-col>
-        <v-col cols="4" style="padding-top:100px">
+        <v-col cols="4" style="padding-top: 100px">
           <div class="d-flex">
             <v-spacer />
 
@@ -244,7 +253,7 @@
           <div class="d-flex justify-center">
             <v-btn
               v-if="isChanged"
-              v-t="['proj-meta:metadata:metasync']"
+              v-t="['a:proj-meta:meta-data:sync']"
               x-large
               class="mx-auto primary nc-btn-metasync-sync-now"
               @click="syncMetaDiff"
@@ -255,12 +264,7 @@
               Sync Now
             </v-btn>
 
-            <v-alert
-              v-else
-              dense
-              outlined
-              type="success"
-            >
+            <v-alert v-else dense outlined type="success">
               Tables metadata is in sync
             </v-alert>
           </div>
@@ -271,29 +275,32 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import viewIcons from '~/helpers/viewIcons'
+import { mapGetters } from "vuex";
+import viewIcons from "~/helpers/viewIcons";
 
 export default {
-  name: 'DisableOrEnableTables',
-  props: ['nodes', 'db'],
+  name: "DisableOrEnableTables",
+  props: ["nodes", "db"],
   data: () => ({
     viewIcons,
     edited: false,
     models: null,
     updating: false,
     dbsTab: 0,
-    filter: '',
+    filter: "",
     tables: null,
-    diff: null
+    diff: null,
   }),
   async mounted() {
-    await this.loadXcDiff()
+    await this.loadXcDiff();
     // await this.loadMode// await this.loadTableList()
   },
   methods: {
     async loadXcDiff() {
-      this.diff = (await this.$api.project.metaDiffGet(this.$store.state.project.projectId, this.db.id))
+      this.diff = await this.$api.project.metaDiffGet(
+        this.$store.state.project.projectId,
+        this.db.id
+      );
 
       // this.diff = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   dbAlias: this.db.meta.dbAlias,
@@ -301,8 +308,8 @@ export default {
       // }, 'xcMetaDiff'])
     },
     clickReload() {
-      this.loadXcDiff()
-      this.$tele.emit('proj-meta:metadata:reload')
+      this.loadXcDiff();
+      this.$e("a:proj-meta:meta-data:reload");
     },
     /* async addTableMeta(tables) {
       try {
@@ -349,30 +356,37 @@ export default {
 */
     async syncMetaDiff() {
       try {
-        await this.$api.project.metaDiffSync(this.$store.state.project.projectId, this.db.id)
+        await this.$api.project.metaDiffSync(
+          this.$store.state.project.projectId,
+          this.db.id
+        );
         // await this.$store.dispatch('sqlMgr/ActSqlOp', [{
         //   dbAlias: this.db.meta.dbAlias,
         //   env: this.$store.getters['project/GtrEnv']
         // }, 'xcMetaDiffSync', {}])
-        this.$toast.success('Table metadata recreated successfully').goAway(3000)
-        await this.loadXcDiff()
+        this.$toast
+          .success("Table metadata recreated successfully")
+          .goAway(3000);
+        await this.loadXcDiff();
 
-        this.$store.commit('tabs/removeTableOrViewTabs')
-        await this.$nextTick()
-        await this.$store.dispatch('project/_loadTables', {
-          dbKey: '0.projectJson.envs._noco.db.0',
-          key: '0.projectJson.envs._noco.db.0.tables',
+        this.$store.commit("tabs/removeTableOrViewTabs");
+        await this.$nextTick();
+        await this.$store.dispatch("project/_loadTables", {
+          dbKey: "0.projectJson.envs._noco.db.0",
+          key: "0.projectJson.envs._noco.db.0.tables",
           _nodes: {
-            dbAlias: 'db',
-            env: '_noco',
-            type: 'tableDir'
-          }
-        })
-        await this.$store.commit('meta/MutClear')
+            dbAlias: "db",
+            env: "_noco",
+            type: "tableDir",
+          },
+        });
+        await this.$store.commit("meta/MutClear");
       } catch (e) {
-        this.$toast[e.response?.status === 402 ? 'info' : 'error'](e.message).goAway(3000)
+        this.$toast[e.response?.status === 402 ? "info" : "error"](
+          e.message
+        ).goAway(3000);
       }
-    }
+    },
 
     /*  async recreateTableMeta(table) {
         try {
@@ -424,14 +438,19 @@ export default {
   },
   computed: {
     ...mapGetters({
-      dbAliasList: 'project/GtrDbAliasList'
+      dbAliasList: "project/GtrDbAliasList",
     }),
     isChanged() {
-      return this.diff && this.diff.some(d => d && d.detectedChanges && d.detectedChanges.length)
+      return (
+        this.diff &&
+        this.diff.some(
+          (d) => d && d.detectedChanges && d.detectedChanges.length
+        )
+      );
     },
     prefix() {
-      return this.$store.getters['project/GtrProjectPrefix'] || ''
-    }
+      return this.$store.getters["project/GtrProjectPrefix"] || "";
+    },
     /* enableCountText() {
       return this.models
         ? `${this.models.filter(m => m.enabled).length}/${this.models.length} enabled`
@@ -470,8 +489,8 @@ export default {
       res.sort((a, b) => getPriority(b) - getPriority(a))
       return res
     } */
-  }
-}
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -484,7 +503,6 @@ export default {
     border-right: 1px solid #7f828b33;
   }
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue b/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
index fb88161a44..6283565108 100644
--- a/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
+++ b/packages/nc-gui/components/project/projectMetadata/uiAcl/toggleTableUIAcl.vue
@@ -10,13 +10,11 @@
             hide-details
             class="my-2 mx-auto search-field"
             placeholder="Search models"
-            style="max-width:300px"
+            style="max-width: 300px"
             outlined
           >
             <template #prepend-inner>
-              <v-icon small>
-                search
-              </v-icon>
+              <v-icon small> search </v-icon>
             </template>
           </v-text-field>
           <v-spacer />
@@ -43,7 +41,7 @@
             @click="save()"
           >
             <!-- Save -->
-            {{ $t('general.save') }}
+            {{ $t("general.save") }}
           </x-btn>
         </v-toolbar>
 
@@ -53,67 +51,92 @@
               <tr>
                 <th class="caption" width="100px">
                   <!--TableName-->
-                  {{ $t('labels.tableName') }}
+                  {{ $t("labels.tableName") }}
                 </th>
                 <th class="caption" width="150px">
                   <!--ViewName-->
-                  {{ $t('labels.viewName') }}
+                  {{ $t("labels.viewName") }}
                 </th>
-                <th v-for="role in roles" :key="role" class="caption" width="100px">
+                <th
+                  v-for="role in roles"
+                  :key="role"
+                  class="caption"
+                  width="100px"
+                >
                   {{ role.charAt(0).toUpperCase() + role.slice(1) }}
                 </th>
               </tr>
             </thead>
             <tbody>
-              <template
-                v-for="table in tables"
-              >
+              <template v-for="table in tables">
                 <tr
-                  v-if="table.title.toLowerCase().indexOf(filter.toLowerCase()) > -1"
+                  v-if="
+                    table.title.toLowerCase().indexOf(filter.toLowerCase()) > -1
+                  "
                   :key="table.table_name"
                   :class="`nc-acl-table-row nc-acl-table-row-${table.title}`"
                 >
                   <td>
                     <v-tooltip bottom>
-                      <template #activator="{on}">
-                        <span
-                          class="caption ml-2"
-                          v-on="on"
-                        >{{ table.ptype === 'table' ? table._ptn : table.ptype === 'view' ? table._ptn : table._ptn }}</span>
+                      <template #activator="{ on }">
+                        <span class="caption ml-2" v-on="on">{{
+                          table.ptype === "table"
+                            ? table._ptn
+                            : table.ptype === "view"
+                            ? table._ptn
+                            : table._ptn
+                        }}</span>
                       </template>
                       <span class="caption">{{ table.ptn || table._ptn }}</span>
                     </v-tooltip>
                   </td>
                   <td>
-                    <v-icon small :color="viewIcons[table.type].color" v-on="on">
+                    <v-icon
+                      small
+                      :color="viewIcons[table.type].color"
+                      v-on="on"
+                    >
                       {{ viewIcons[table.type].icon }}
                     </v-icon>
-                    <span v-if="table.ptn" class="caption">{{ table.title }}</span>
-                    <span v-else class="caption">{{ $t('general.default') }}</span>
+                    <span v-if="table.ptn" class="caption">{{
+                      table.title
+                    }}</span>
+                    <span v-else class="caption">{{
+                      $t("general.default")
+                    }}</span>
                     <!--                    {{ table.show_as || table.type }}-->
                   </td>
-                  <td v-for="role in roles" :key="`${table.table_name}-${role}`">
+                  <td
+                    v-for="role in roles"
+                    :key="`${table.table_name}-${role}`"
+                  >
                     <v-tooltip bottom>
-                      <template #activator="{on}">
-                        <div
-                          v-on="on"
-                        >
+                      <template #activator="{ on }">
+                        <div v-on="on">
                           <v-checkbox
                             v-model="table.disabled[role]"
-                            :class="`pt-0 mt-0 nc-acl-${table.title.toLowerCase().replace('_','')}-${role}-chkbox`"
+                            :class="`pt-0 mt-0 nc-acl-${table.title
+                              .toLowerCase()
+                              .replace('_', '')}-${role}-chkbox`"
                             dense
                             hide-details
                             :true-value="false"
                             :false-value="true"
-                            @change="$set(table,'edited',true)"
+                            @change="$set(table, 'edited', true)"
                           />
                         </div>
                       </template>
 
-                      <span v-if="table.disabled[role]">Click to make '{{ table.table_name }}' visible for Role:{{
-                        role
-                      }} in UI dashboard</span>
-                      <span v-else>Click to hide '{{ table.table_name }}' for Role:{{ role }} in UI dashboard</span>
+                      <span v-if="table.disabled[role]"
+                        >Click to make '{{ table.table_name }}' visible for
+                        Role:{{ role }} in UI dashboard</span
+                      >
+                      <span v-else
+                        >Click to hide '{{ table.table_name }}' for Role:{{
+                          role
+                        }}
+                        in UI dashboard</span
+                      >
                     </v-tooltip>
                   </td>
                 </tr>
@@ -128,30 +151,32 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import viewIcons from '~/helpers/viewIcons'
+import { mapGetters } from "vuex";
+import viewIcons from "~/helpers/viewIcons";
 
 export default {
-  name: 'ToggleTableUiAcl',
+  name: "ToggleTableUiAcl",
   components: {},
-  props: ['nodes', 'db'],
+  props: ["nodes", "db"],
   data: () => ({
     viewIcons,
     models: null,
     updating: false,
     dbsTab: 0,
-    filter: '',
-    tables: null
+    filter: "",
+    tables: null,
   }),
   async mounted() {
-    await this.loadTableList()
+    await this.loadTableList();
   },
   methods: {
     async loadTableList() {
-      this.tables = (await this.$api.project.modelVisibilityList(
-        this.db.project_id, {
-          includeM2M: this.$store.state.windows.includeM2M || ''
-        }))
+      this.tables = await this.$api.project.modelVisibilityList(
+        this.db.project_id,
+        {
+          includeM2M: this.$store.state.windows.includeM2M || "",
+        }
+      );
       // this.tables = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   dbAlias: this.db.meta.dbAlias,
       //   env: this.$store.getters['project/GtrEnv']
@@ -161,27 +186,34 @@ export default {
     },
     async save() {
       try {
-        await this.$api.project.modelVisibilitySet(this.db.project_id, this.tables.filter(t => t.edited))
-        this.$toast.success('Updated UI ACL for tables successfully').goAway(3000)
+        await this.$api.project.modelVisibilitySet(
+          this.db.project_id,
+          this.tables.filter((t) => t.edited)
+        );
+        this.$toast
+          .success("Updated UI ACL for tables successfully")
+          .goAway(3000);
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit('proj-meta:ui-acl:update')
-    }
+      this.$e("a:proj-meta:ui-acl");
+    },
   },
   computed: {
     ...mapGetters({
-      dbAliasList: 'project/GtrDbAliasList'
+      dbAliasList: "project/GtrDbAliasList",
     }),
     edited() {
-      return this.tables && this.tables.length && this.tables.some(t => t.edited)
+      return (
+        this.tables && this.tables.length && this.tables.some((t) => t.edited)
+      );
     },
     roles() {
-      return ['editor', 'commenter', 'viewer']// this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : []
-    }
-  }
-}
+      return ["editor", "commenter", "viewer"]; // this.tables && this.tables.length ? Object.keys(this.tables[0].disabled) : []
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -194,11 +226,11 @@ export default {
     border-right: 1px solid #7f828b33;
   }
 
-  .search-field.v-text-field > .v-input__control, .search-field.v-text-field > .v-input__control > .v-input__slot {
+  .search-field.v-text-field > .v-input__control,
+  .search-field.v-text-field > .v-input__control > .v-input__slot {
     min-height: auto;
   }
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/settings/appearance.vue b/packages/nc-gui/components/project/settings/appearance.vue
index 76f07a346e..f4aa319712 100644
--- a/packages/nc-gui/components/project/settings/appearance.vue
+++ b/packages/nc-gui/components/project/settings/appearance.vue
@@ -15,7 +15,7 @@
                   <v-icon
                     x-large
                     :color="$vuetify.theme.dark ? 'primary':'primary'"
-                    @click="toggleDarkTheme"
+                    @click="toggleDarkTheme($vuetify.theme.dark)"
                     v-on="on"
                   >
                     mdi-bat
@@ -67,6 +67,7 @@
                 <template #activator="{ on }">
                   <v-checkbox
                     v-model="includeM2M"
+                    v-t="[`c:themes:show-m2m-tables`]"
                     x-large
                     color="primary"
                     v-on="on"
@@ -276,9 +277,11 @@ export default {
       this.item = theme
       if (theme === 'Custom') { await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, custom: true }) }
       await this.$store.dispatch('windows/ActSetTheme', { theme: { ...t }, themeName: theme })
+      this.$e('c:themes:change', { mode: theme })
     },
-    toggleDarkTheme() {
+    toggleDarkTheme(mode) {
       this.$store.commit('windows/MutToggleDarkMode')
+      this.$e('c:themes:dark-mode', { dark: mode })
     }
   },
   beforeCreated() {
diff --git a/packages/nc-gui/components/project/settings/xcMeta.vue b/packages/nc-gui/components/project/settings/xcMeta.vue
index eb67328e14..afe6211c40 100644
--- a/packages/nc-gui/components/project/settings/xcMeta.vue
+++ b/packages/nc-gui/components/project/settings/xcMeta.vue
@@ -10,11 +10,11 @@
         <tr>
           <td>
             <!-- Export project meta to zip file and download. -->
-            {{ $t('msg.info.exportZip') }}
+            {{ $t("msg.info.exportZip") }}
           </td>
           <td>
             <v-btn
-              v-t="['proj-meta:export-zip:trigger']"
+              v-t="['c:proj-meta:export']"
               min-width="150"
               color="primary"
               small
@@ -22,22 +22,20 @@
               :loading="loading === 'export-zip'"
               @click="exportMetaZip()"
             >
-              <v-icon small>
-                mdi-export
-              </v-icon>&nbsp;
+              <v-icon small> mdi-export </v-icon>&nbsp;
               <!-- Export zip -->
-              {{ $t('activity.exportZip') }}
+              {{ $t("activity.exportZip") }}
             </v-btn>
           </td>
         </tr>
         <tr>
           <td>
             <!-- Import project meta zip file and restart. -->
-            {{ $t('msg.info.importZip') }}
+            {{ $t("msg.info.importZip") }}
           </td>
           <td>
             <v-btn
-              v-t="['proj-meta:import-zip']"
+              v-t="['a:proj-meta:import']"
               min-width="150"
               :loading="loading === 'import-zip'"
               color="info"
@@ -45,12 +43,10 @@
               outlined
               @click="$refs.importFile.click()"
             >
-              <v-icon small>
-                mdi-import
-              </v-icon>&nbsp;
+              <v-icon small> mdi-import </v-icon>&nbsp;
 
               <!-- Import Zip -->
-              {{ $t('activity.importZip') }}
+              {{ $t("activity.importZip") }}
             </v-btn>
 
             <input
@@ -59,31 +55,31 @@
               type="file"
               accept=".zip"
               @change="importMetaZip"
-            >
+            />
           </td>
         </tr>
-      <!--        <tr>-->
-      <!--          <td>-->
-      <!--            &lt;!&ndash; Clear all metadata from meta tables. &ndash;&gt;-->
-      <!--            {{ $t('tooltip.clearMetadata') }}-->
-      <!--          </td>-->
-      <!--          <td>-->
-      <!--            <v-btn-->
-      <!--              :loading="loading === 'reset-metadata'"-->
-      <!--              min-width="150"-->
-      <!--              color="error"-->
-      <!--              small-->
-      <!--              outlined-->
-      <!--              @click="resetMeta"-->
-      <!--            >-->
-      <!--              <v-icon small>-->
-      <!--                mdi-delete-variant-->
-      <!--              </v-icon>&nbsp;-->
-      <!--              &lt;!&ndash; Reset &ndash;&gt;-->
-      <!--              {{ $t('general.reset') }}-->
-      <!--            </v-btn>-->
-      <!--          </td>-->
-      <!--        </tr>-->
+        <!--        <tr>-->
+        <!--          <td>-->
+        <!--            &lt;!&ndash; Clear all metadata from meta tables. &ndash;&gt;-->
+        <!--            {{ $t('tooltip.clearMetadata') }}-->
+        <!--          </td>-->
+        <!--          <td>-->
+        <!--            <v-btn-->
+        <!--              :loading="loading === 'reset-metadata'"-->
+        <!--              min-width="150"-->
+        <!--              color="error"-->
+        <!--              small-->
+        <!--              outlined-->
+        <!--              @click="resetMeta"-->
+        <!--            >-->
+        <!--              <v-icon small>-->
+        <!--                mdi-delete-variant-->
+        <!--              </v-icon>&nbsp;-->
+        <!--              &lt;!&ndash; Reset &ndash;&gt;-->
+        <!--              {{ $t('general.reset') }}-->
+        <!--            </v-btn>-->
+        <!--          </td>-->
+        <!--        </tr>-->
       </tbody>
     </v-simple-table>
 
@@ -102,172 +98,188 @@
 </template>
 
 <script>
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
+import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
 // import ImportTemplate from '~/components/project/settings/importTemplate'
 
 export default {
-  name: 'XcMeta',
+  name: "XcMeta",
   components: {
     // ImportTemplate,
-    DlgLabelSubmitCancel
+    DlgLabelSubmitCancel,
   },
   data: () => ({
     loading: null,
     dialogShow: false,
     confirmAction: null,
-    confirmMessage: ''
+    confirmMessage: "",
   }),
   methods: {
     async exportMeta() {
-      this.dialogShow = true
+      this.dialogShow = true;
       // this.confirmMessage = 'Do you want to export metadata from meta tables?'
-      this.confirmMessage = `${this.$t('msg.info.exportMetadata')}`
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.confirmMessage = `${this.$t("msg.info.exportMetadata")}`;
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'export-file'
+          this.loading = "export-file";
           try {
             // todo: set env based on `nodes` prop
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
                 // dbAlias: 'db',
-                env: '_noco'
+                env: "_noco",
               },
-              'xcMetaTablesExportDbToLocalFs'
-            ])
+              "xcMetaTablesExportDbToLocalFs",
+            ]);
             // this.$toast.success('Successfully exported metadata').goAway(3000)
-            this.$toast.success(`${this.$t('msg.toast.exportMetadata')}`).goAway(3000)
+            this.$toast
+              .success(`${this.$t("msg.toast.exportMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000)
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
+          this.dialogShow = false;
+          this.loading = null;
         }
-      }
+      };
     },
     async exportMetaZip() {
-      this.dialogShow = true
+      this.dialogShow = true;
       // this.confirmMessage = 'Do you want to export metadata from meta tables?'
-      this.confirmMessage = `${this.$t('msg.info.exportMetadata')}`
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.confirmMessage = `${this.$t("msg.info.exportMetadata")}`;
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'export-zip'
-          let data
+          this.loading = "export-zip";
+          let data;
           try {
-            data = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            data = await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
                 // dbAlias: 'db',
-                env: '_noco'
+                env: "_noco",
               },
-              'xcMetaTablesExportDbToZip',
+              "xcMetaTablesExportDbToZip",
               null,
               null,
               {
-                responseType: 'blob'
-              }
-            ])
-            const url = window.URL.createObjectURL(new Blob([data], { type: 'application/zip' }))
-            const link = document.createElement('a')
-            link.href = url
-            link.setAttribute('download', 'meta.zip') // or any other extension
-            document.body.appendChild(link)
-            link.click()
+                responseType: "blob",
+              },
+            ]);
+            const url = window.URL.createObjectURL(
+              new Blob([data], { type: "application/zip" })
+            );
+            const link = document.createElement("a");
+            link.href = url;
+            link.setAttribute("download", "meta.zip"); // or any other extension
+            document.body.appendChild(link);
+            link.click();
             // this.$toast.success('Successfully exported metadata').goAway(3000)
-            this.$toast.success(`${this.$t('msg.toast.exportMetadata')}`).goAway(3000)
+            this.$toast
+              .success(`${this.$t("msg.toast.exportMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000)
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
-          this.$tele.emit('proj-meta:export-zip:submit')
+          this.dialogShow = false;
+          this.loading = null;
+          this.$e("a:proj-meta:export");
         }
-      }
+      };
     },
     async resetMeta() {
-      this.dialogShow = true
+      this.dialogShow = true;
       // this.confirmMessage = 'Do you want to clear metadata from meta tables?'
-      this.confirmMessage = `${this.$t('msg.info.clearMetadata')}`
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.confirmMessage = `${this.$t("msg.info.clearMetadata")}`;
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'reset-metadata'
+          this.loading = "reset-metadata";
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
                 // dbAlias: 'db',
-                env: '_noco'
+                env: "_noco",
               },
-              'xcMetaTablesReset'
-            ])
+              "xcMetaTablesReset",
+            ]);
             // this.$toast.success('Metadata cleared successfully').goAway(3000)
-            this.$toast.success(`${this.$t('msg.toast.clearMetadata')}`).goAway(3000)
+            this.$toast
+              .success(`${this.$t("msg.toast.clearMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000)
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
+          this.dialogShow = false;
+          this.loading = null;
         }
-      }
+      };
     },
 
     async importMeta() {
-      this.dialogShow = true
+      this.dialogShow = true;
       // this.confirmMessage = 'Do you want to import metadata from meta directory?'
-      this.confirmMessage = `${this.$t('msg.info.importMetadata')}`
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.confirmMessage = `${this.$t("msg.info.importMetadata")}`;
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'import-file'
+          this.loading = "import-file";
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
-                env: '_noco'
+                env: "_noco",
               },
-              'xcMetaTablesImportLocalFsToDb'
-            ])
+              "xcMetaTablesImportLocalFsToDb",
+            ]);
 
             // this.$toast.success('Metadata imported successfully').goAway(3000)
-            this.$toast.success(`${this.$t('msg.toast.importMetadata')}`).goAway(3000)
+            this.$toast
+              .success(`${this.$t("msg.toast.importMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            this.$toast.error(e.message).goAway(3000)
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
+          this.dialogShow = false;
+          this.loading = null;
         }
-      }
+      };
     },
     async importMetaZip() {
-      if (this.$refs.importFile && this.$refs.importFile.files && this.$refs.importFile.files[0]) {
-        const zipFile = this.$refs.importFile.files[0]
-        this.loading = 'import-zip'
+      if (
+        this.$refs.importFile &&
+        this.$refs.importFile.files &&
+        this.$refs.importFile.files[0]
+      ) {
+        const zipFile = this.$refs.importFile.files[0];
+        this.loading = "import-zip";
         try {
-          this.$refs.importFile.value = ''
-          await this.$store.dispatch('sqlMgr/ActUploadOld', [
+          this.$refs.importFile.value = "";
+          await this.$store.dispatch("sqlMgr/ActUploadOld", [
             {
-              env: '_noco'
+              env: "_noco",
             },
-            'xcMetaTablesImportZipToLocalFsAndDb',
+            "xcMetaTablesImportZipToLocalFsAndDb",
             {
-              importsToCurrentProject: true
+              importsToCurrentProject: true,
             },
-            zipFile
-          ])
+            zipFile,
+          ]);
           // this.$toast.success('Successfully imported metadata').goAway(3000)
-          this.$toast.success(`${this.$t('msg.toast.importMetadata')}`).goAway(3000)
+          this.$toast
+            .success(`${this.$t("msg.toast.importMetadata")}`)
+            .goAway(3000);
         } catch (e) {
-          this.$toast.error(e.message).goAway(3000)
+          this.$toast.error(e.message).goAway(3000);
         }
-        this.dialogShow = false
-        this.loading = null
+        this.dialogShow = false;
+        this.loading = null;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
index 5d7eff0cf0..cb6f15e8a8 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/columnFilter.vue
@@ -1,27 +1,32 @@
 <template>
   <div
     class="backgroundColor pa-2"
-    :style="{width:nested ? '100%' : '530px'}"
+    :style="{ width: nested ? '100%' : '530px' }"
   >
     <div class="grid" @click.stop>
-      <template v-for="(filter,i) in filters" dense>
+      <template v-for="(filter, i) in filters" dense>
         <template v-if="filter.status !== 'delete'">
-          <div v-if="filter.is_group" :key="i" style="grid-column: span 4; padding:6px" class="elevation-4 ">
-            <div class="d-flex" style="gap:6px; padding: 0 6px">
+          <div
+            v-if="filter.is_group"
+            :key="i"
+            style="grid-column: span 4; padding: 6px"
+            class="elevation-4"
+          >
+            <div class="d-flex" style="gap: 6px; padding: 0 6px">
               <v-icon
                 v-if="!filter.readOnly"
                 :key="i + '_3'"
                 small
                 class="nc-filter-item-remove-btn"
-                @click.stop="deleteFilter(filter,i)"
+                @click.stop="deleteFilter(filter, i)"
               >
                 mdi-close-box
               </v-icon>
               <span v-else :key="i + '_1'" />
               <v-select
                 v-model="filter.logical_op"
-                class="flex-shrink-1 flex-grow-0 elevation-0 caption "
-                :items="['and' ,'or']"
+                class="flex-shrink-1 flex-grow-0 elevation-0 caption"
+                :items="['and', 'or']"
                 solo
                 flat
                 dense
@@ -30,7 +35,7 @@
                 @click.stop
                 @change="saveOrUpdate(filter, i)"
               >
-                <template #item="{item}">
+                <template #item="{ item }">
                   <span class="caption font-weight-regular">{{ item }}</span>
                 </template>
               </v-select>
@@ -56,7 +61,7 @@
               :key="i + '_3'"
               small
               class="nc-filter-item-remove-btn"
-              @click.stop="deleteFilter(filter,i)"
+              @click.stop="deleteFilter(filter, i)"
             >
               mdi-close-box
             </v-icon>
@@ -65,14 +70,15 @@
               v-if="!i"
               :key="i + '_2'"
               class="caption d-flex align-center"
-            >{{ $t('labels.where') }}</span>
+              >{{ $t("labels.where") }}</span
+            >
 
             <v-select
               v-else
               :key="i + '_4'"
               v-model="filter.logical_op"
-              class="flex-shrink-1 flex-grow-0 elevation-0 caption "
-              :items="['and' ,'or']"
+              class="flex-shrink-1 flex-grow-0 elevation-0 caption"
+              :items="['and', 'or']"
               solo
               flat
               dense
@@ -81,7 +87,7 @@
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
-              <template #item="{item}">
+              <template #item="{ item }">
                 <span class="caption font-weight-regular">{{ item }}</span>
               </template>
             </v-select>
@@ -102,7 +108,7 @@
               @click.stop
               @change="saveOrUpdate(filter, i)"
             >
-              <template #item="{item}">
+              <template #item="{ item }">
                 <span
                   :class="`caption font-weight-regular nc-filter-fld-${item.title}`"
                 >
@@ -113,12 +119,12 @@
             <v-select
               :key="'k' + i"
               v-model="filter.comparison_op"
-              class="flex-shrink-1 flex-grow-0 caption  nc-filter-operation-select"
+              class="flex-shrink-1 flex-grow-0 caption nc-filter-operation-select"
               :items="filterComparisonOp(filter)"
               :placeholder="$t('labels.operation')"
               solo
               flat
-              style="max-width:120px"
+              style="max-width: 120px"
               dense
               :disabled="filter.readOnly"
               hide-details
@@ -126,11 +132,18 @@
               @click.stop
               @change="filterUpdateCondition(filter, i)"
             >
-              <template #item="{item}">
+              <template #item="{ item }">
                 <span class="caption font-weight-regular">{{ item.text }}</span>
               </template>
             </v-select>
-            <span v-if="['null', 'notnull', 'empty', 'notempty'].includes(filter.comparison_op)" :key="'span' + i" />
+            <span
+              v-if="
+                ['null', 'notnull', 'empty', 'notempty'].includes(
+                  filter.comparison_op
+                )
+              "
+              :key="'span' + i"
+            />
             <v-checkbox
               v-else-if="types[filter.field] === 'boolean'"
               :key="i + '_7'"
@@ -157,26 +170,20 @@
       </template>
     </div>
 
-    <v-btn
-      small
-      class="elevation-0 grey--text my-3"
-      @click.stop="addFilter"
-    >
-      <v-icon small color="grey">
-        mdi-plus
-      </v-icon>
+    <v-btn small class="elevation-0 grey--text my-3" @click.stop="addFilter">
+      <v-icon small color="grey"> mdi-plus </v-icon>
       <!-- Add Filter -->
-      {{ $t('activity.addFilter') }}
+      {{ $t("activity.addFilter") }}
     </v-btn>
     <slot />
   </div>
 </template>
 
 <script>
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
+import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes";
 
 export default {
-  name: 'ColumnFilter',
+  name: "ColumnFilter",
   props: {
     fieldList: [Array],
     meta: Object,
@@ -185,269 +192,299 @@ export default {
     viewId: String,
     shared: Boolean,
     webHook: Boolean,
-    hookId: String
+    hookId: String,
   },
   data: () => ({
     filters: [],
     opList: [
-      'is equal', 'is not equal', 'is like', 'is not like',
+      "is equal",
+      "is not equal",
+      "is like",
+      "is not like",
       // 'is empty', 'is not empty',
-      'is null', 'is not null',
-      '>',
-      '<',
-      '>=',
-      '<='
+      "is null",
+      "is not null",
+      ">",
+      "<",
+      ">=",
+      "<=",
     ],
     comparisonOp: [
       {
-        text: 'is equal',
-        value: 'eq'
+        text: "is equal",
+        value: "eq",
       },
       {
-        text: 'is not equal',
-        value: 'neq'
+        text: "is not equal",
+        value: "neq",
       },
       {
-        text: 'is like',
-        value: 'like'
+        text: "is like",
+        value: "like",
       },
       {
-        text: 'is not like',
-        value: 'nlike'
+        text: "is not like",
+        value: "nlike",
       },
       {
-        text: 'is empty',
-        value: 'empty',
-        ignoreVal: true
+        text: "is empty",
+        value: "empty",
+        ignoreVal: true,
       },
       {
-        text: 'is not empty',
-        value: 'notempty',
-        ignoreVal: true
+        text: "is not empty",
+        value: "notempty",
+        ignoreVal: true,
       },
       {
-        text: 'is null',
-        value: 'null',
-        ignoreVal: true
+        text: "is null",
+        value: "null",
+        ignoreVal: true,
       },
       {
-        text: 'is not null',
-        value: 'notnull',
-        ignoreVal: true
+        text: "is not null",
+        value: "notnull",
+        ignoreVal: true,
       },
       {
-        text: '>',
-        value: 'gt'
+        text: ">",
+        value: "gt",
       },
       {
-        text: '<',
-        value: 'lt'
+        text: "<",
+        value: "lt",
       },
       {
-        text: '>=',
-        value: 'gte'
+        text: ">=",
+        value: "gte",
       },
       {
-        text: '<=',
-        value: 'lte'
-      }
-    ]
+        text: "<=",
+        value: "lte",
+      },
+    ],
   }),
   computed: {
     columnsById() {
-      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {})
+      return (this.columns || []).reduce((o, c) => ({ ...o, [c.id]: c }), {});
     },
     autoApply() {
-      return this.$store.state.windows.autoApplyFilter && !this.webHook
+      return this.$store.state.windows.autoApplyFilter && !this.webHook;
     },
     columns() {
-      return (this.meta && this.meta.columns.filter(c => c && (!c.colOptions || !c.system)))
+      return (
+        this.meta &&
+        this.meta.columns.filter((c) => c && (!c.colOptions || !c.system))
+      );
     },
     types() {
       if (!this.meta || !this.meta.columns || !this.meta.columns.length) {
-        return {}
+        return {};
       }
 
       return this.meta.columns.reduce((obj, col) => {
         switch (col.uidt) {
           case UITypes.Number:
           case UITypes.Decimal:
-            obj[col.title] = obj[col.column_name] = 'number'
-            break
+            obj[col.title] = obj[col.column_name] = "number";
+            break;
           case UITypes.Checkbox:
-            obj[col.title] = obj[col.column_name] = 'boolean'
-            break
+            obj[col.title] = obj[col.column_name] = "boolean";
+            break;
           default:
-            break
+            break;
         }
-        return obj
-      }, {})
-    }
+        return obj;
+      }, {});
+    },
   },
   watch: {
     async viewId(v) {
       if (v) {
-        await this.loadFilter()
+        await this.loadFilter();
       }
     },
     filters: {
       handler(v) {
-        this.$emit('input', v && v.filter(f => (f.fk_column_id && f.comparison_op) || f.is_group))
+        this.$emit(
+          "input",
+          v &&
+            v.filter((f) => (f.fk_column_id && f.comparison_op) || f.is_group)
+        );
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
-    this.loadFilter()
+    this.loadFilter();
   },
   methods: {
     filterComparisonOp(f) {
       return this.comparisonOp.filter((op) => {
-        if (f && f.fk_column_id && this.columnsById[f.fk_column_id] &&
-          this.columnsById[f.fk_column_id].uidt === UITypes.LinkToAnotherRecord &&
+        if (
+          f &&
+          f.fk_column_id &&
+          this.columnsById[f.fk_column_id] &&
+          this.columnsById[f.fk_column_id].uidt ===
+            UITypes.LinkToAnotherRecord &&
           this.columnsById[f.fk_column_id].uidt === UITypes.Lookup
         ) {
-          return ![
-            'notempty',
-            'empty',
-            'notnull',
-            'null'
-          ].includes(op.value)
+          return !["notempty", "empty", "notnull", "null"].includes(op.value);
         }
-        return true
-      })
+        return true;
+      });
     },
     async applyChanges(nested = false, { hookId } = {}) {
       for (const [i, filter] of Object.entries(this.filters)) {
-        if (filter.status === 'delete') {
+        if (filter.status === "delete") {
           if (this.hookId || hookId) {
-            await this.$api.dbTableFilter.delete(filter.id)
+            await this.$api.dbTableFilter.delete(filter.id);
           } else {
-            await this.$api.dbTableFilter.delete(filter.id)
+            await this.$api.dbTableFilter.delete(filter.id);
           }
-        } else if (filter.status === 'update') {
+        } else if (filter.status === "update") {
           if (filter.id) {
             if (this.hookId || hookId) {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId
-              })
+                fk_parent_id: this.parentId,
+              });
             } else {
               await this.$api.dbTableFilter.update(filter.id, {
                 ...filter,
-                fk_parent_id: this.parentId
-              })
+                fk_parent_id: this.parentId,
+              });
             }
           } else if (this.hookId || hookId) {
-            this.$set(this.filters, i, (await this.$api.dbTableWebhookFilter.create(this.hookId || hookId, {
-              ...filter,
-              fk_parent_id: this.parentId
-            })))
+            this.$set(
+              this.filters,
+              i,
+              await this.$api.dbTableWebhookFilter.create(
+                this.hookId || hookId,
+                {
+                  ...filter,
+                  fk_parent_id: this.parentId,
+                }
+              )
+            );
           } else {
-            this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, {
-              ...filter,
-              fk_parent_id: this.parentId
-            })))
+            this.$set(
+              this.filters,
+              i,
+              await this.$api.dbTableFilter.create(this.viewId, {
+                ...filter,
+                fk_parent_id: this.parentId,
+              })
+            );
           }
         }
       }
       if (this.$refs.nestedFilter) {
         for (const nestedFilter of this.$refs.nestedFilter) {
-          await nestedFilter.applyChanges(true)
+          await nestedFilter.applyChanges(true);
         }
       }
-      this.loadFilter()
-      if (!nested) { this.$emit('updated') }
+      this.loadFilter();
+      if (!nested) {
+        this.$emit("updated");
+      }
     },
     async loadFilter() {
-      let filters = []
-      if (this.viewId && this._isUIAllowed('filterSync')) {
+      let filters = [];
+      if (this.viewId && this._isUIAllowed("filterSync")) {
         filters = this.parentId
-          ? (await this.$api.dbTableFilter.childrenRead(this.parentId))
-          : (await this.$api.dbTableFilter.read(this.viewId))
+          ? await this.$api.dbTableFilter.childrenRead(this.parentId)
+          : await this.$api.dbTableFilter.read(this.viewId);
       }
-      if (this.hookId && this._isUIAllowed('filterSync')) {
+      if (this.hookId && this._isUIAllowed("filterSync")) {
         filters = this.parentId
-          ? (await this.$api.dbTableFilter.childrenRead(this.parentId))
-          : (await this.$api.dbTableWebhookFilter.read(this.hookId))
+          ? await this.$api.dbTableFilter.childrenRead(this.parentId)
+          : await this.$api.dbTableWebhookFilter.read(this.hookId);
       }
 
-      this.filters = filters
+      this.filters = filters;
     },
     addFilter() {
       this.filters.push({
         fk_column_id: null,
-        comparison_op: 'eq',
-        value: '',
-        status: 'update',
-        logical_op: 'and'
-      })
-      this.filters = this.filters.slice()
-      this.$tele.emit(`filter:add:trigger:${this.filters.length}`)
+        comparison_op: "eq",
+        value: "",
+        status: "update",
+        logical_op: "and",
+      });
+      this.filters = this.filters.slice();
+      this.$e("a:filter:add", { length: this.filters.length });
     },
     addFilterGroup() {
       this.filters.push({
         parentId: this.parentId,
         is_group: true,
-        status: 'update'
-      })
-      this.filters = this.filters.slice()
-      const index = this.filters.length - 1
-      this.saveOrUpdate(this.filters[index], index)
+        status: "update",
+      });
+      this.filters = this.filters.slice();
+      const index = this.filters.length - 1;
+      this.saveOrUpdate(this.filters[index], index);
     },
     filterUpdateCondition(filter, i) {
-      this.saveOrUpdate(filter, i)
-      this.$tele.emit(`filter:condition:${filter.logical_op}:${filter.comparison_op}`)
+      this.saveOrUpdate(filter, i);
+      this.$e("a:filter:update", {
+        logical: filter.logical_op,
+        comparison: filter.comparison_op,
+      });
     },
     async saveOrUpdate(filter, i) {
-      if (this.shared || !this._isUIAllowed('filterSync')) {
+      if (this.shared || !this._isUIAllowed("filterSync")) {
         // this.$emit('input', this.filters.filter(f => f.fk_column_id && f.comparison_op))
-        this.$emit('updated')
+        this.$emit("updated");
       } else if (!this.autoApply) {
-        filter.status = 'update'
+        filter.status = "update";
       } else if (filter.id) {
         await this.$api.dbTableFilter.update(filter.id, {
           ...filter,
-          fk_parent_id: this.parentId
-        })
+          fk_parent_id: this.parentId,
+        });
 
-        this.$emit('updated')
+        this.$emit("updated");
       } else {
-        this.$set(this.filters, i, (await this.$api.dbTableFilter.create(this.viewId, {
-          ...filter,
-          fk_parent_id: this.parentId
-        })))
+        this.$set(
+          this.filters,
+          i,
+          await this.$api.dbTableFilter.create(this.viewId, {
+            ...filter,
+            fk_parent_id: this.parentId,
+          })
+        );
 
-        this.$emit('updated')
+        this.$emit("updated");
       }
     },
     async deleteFilter(filter, i) {
-      if (this.shared || !this._isUIAllowed('filterSync')) {
-        this.filters.splice(i, 1)
-        this.$emit('updated')
+      if (this.shared || !this._isUIAllowed("filterSync")) {
+        this.filters.splice(i, 1);
+        this.$emit("updated");
       } else if (filter.id) {
         if (!this.autoApply) {
-          this.$set(filter, 'status', 'delete')
+          this.$set(filter, "status", "delete");
         } else {
-          await this.$api.dbTableFilter.delete(filter.id)
-          await this.loadFilter()
-          this.$emit('updated')
+          await this.$api.dbTableFilter.delete(filter.id);
+          await this.loadFilter();
+          this.$emit("updated");
         }
       } else {
-        this.filters.splice(i, 1)
-        this.$emit('updated')
+        this.filters.splice(i, 1);
+        this.$emit("updated");
       }
-      this.$tele.emit('filter:delete')
-    }
-  }
-}
+      this.$e("a:filter:delete");
+    },
+  },
+};
 </script>
 
 <style scoped>
 .grid {
   display: grid;
-  grid-template-columns:22px 80px auto auto auto;
+  grid-template-columns: 22px 80px auto auto auto;
   column-gap: 6px;
-  row-gap: 6px
+  row-gap: 6px;
 }
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
index db51a44720..5ceb80800f 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/columnFilterMenu.vue
@@ -1,30 +1,25 @@
 <template>
   <v-menu offset-y eager>
-    <template #activator="{ on, }">
-      <v-badge
-        :value="filters.length"
-        color="primary"
-        dot
-        overlap
-      >
+    <template #activator="{ on }">
+      <v-badge :value="filters.length" color="primary" dot overlap>
         <v-btn
-          v-t="['filter:trigger']"
+          v-t="['c:filter']"
           class="nc-filter-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
           small
           text
-          :class=" { 'primary lighten-5 grey--text text--darken-3' : filters.length}"
+          :class="{
+            'primary lighten-5 grey--text text--darken-3': filters.length,
+          }"
           v-on="on"
         >
           <v-icon small class="mr-1" color="grey  darken-3">
             mdi-filter-outline
           </v-icon>
           <!-- Filter -->
-          {{ $t('activity.filter') }}
-          <v-icon small color="#777">
-            mdi-menu-down
-          </v-icon>
+          {{ $t("activity.filter") }}
+          <v-icon small color="#777"> mdi-menu-down </v-icon>
         </v-btn>
       </v-badge>
     </template>
@@ -49,16 +44,21 @@
         >
           <template #label>
             <span class="grey--text caption">
-              {{ $t('msg.info.filterAutoApply') }}
+              {{ $t("msg.info.filterAutoApply") }}
               <!-- Auto apply -->
             </span>
           </template>
         </v-checkbox>
 
         <v-spacer />
-        <v-btn v-show="!autosave" color="primary" small class="caption ml-2" @click="applyChanges">
-          Apply
-          changes
+        <v-btn
+          v-show="!autosave"
+          color="primary"
+          small
+          class="caption ml-2"
+          @click="applyChanges"
+        >
+          Apply changes
         </v-btn>
       </div>
     </column-filter>
@@ -66,59 +66,65 @@
 </template>
 
 <script>
-import ColumnFilter from '@/components/project/spreadsheet/components/columnFilter'
+import ColumnFilter from "@/components/project/spreadsheet/components/columnFilter";
 
 export default {
-  name: 'ColumnFilterMenu',
+  name: "ColumnFilterMenu",
   components: { ColumnFilter },
-  props: ['fieldList', 'isLocked', 'value', 'meta', 'viewId', 'shared'],
+  props: ["fieldList", "isLocked", "value", "meta", "viewId", "shared"],
   data: () => ({
-    filters: []
+    filters: [],
   }),
   computed: {
     autosave: {
       set(v) {
-        this.$store.commit('windows/MutAutoApplyFilter', v)
-        this.$tele.emit(`filter:auto-apply:${v}`)
+        this.$store.commit("windows/MutAutoApplyFilter", v);
+        this.$e("a:filter:auto-apply", { flag: v });
       },
       get() {
-        return this.$store.state.windows.autoApplyFilter
-      }
-    }
+        return this.$store.state.windows.autoApplyFilter;
+      },
+    },
   },
   watch: {
     filters: {
       handler(v) {
         if (this.autosave) {
-          this.$emit('input', v)
+          this.$emit("input", v);
         }
       },
-      deep: true
+      deep: true,
     },
     autosave(v) {
       if (!v) {
-        this.filters = JSON.parse(JSON.stringify(this.value || []))
+        this.filters = JSON.parse(JSON.stringify(this.value || []));
       }
     },
     value(v) {
-      this.filters = this.autosave ? v || [] : JSON.parse(JSON.stringify(v || []))
-    }
+      this.filters = this.autosave
+        ? v || []
+        : JSON.parse(JSON.stringify(v || []));
+    },
   },
   created() {
-    this.filters = this.autosave ? this.value || [] : JSON.parse(JSON.stringify(this.value || []))
+    this.filters = this.autosave
+      ? this.value || []
+      : JSON.parse(JSON.stringify(this.value || []));
   },
   methods: {
     applyChanges() {
-      this.$emit('input', this.filters)
-      if (this.$refs.filter) { this.$refs.filter.applyChanges() }
-      this.$tele.emit('filter:apply-explicit')
-    }
-  }
-}
+      this.$emit("input", this.filters);
+      if (this.$refs.filter) {
+        this.$refs.filter.applyChanges();
+      }
+      this.$e("a:filter:apply");
+    },
+  },
+};
 </script>
 
 <style scoped>
 /deep/ .col-filter-checkbox .v-input--selection-controls__input {
-  transform: scale(.7);
+  transform: scale(0.7);
 }
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
index 6146b14737..84f9005e3c 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editColumn.vue
@@ -4,7 +4,7 @@
     max-width="400px"
     max-height="95vh"
     style="overflow: auto"
-    class=" card nc-col-create-or-edit-card "
+    class="card nc-col-create-or-edit-card"
   >
     <v-form ref="form" v-model="valid">
       <v-container fluid @click.stop.prevent>
@@ -16,10 +16,22 @@
               hide-details="auto"
               color="primary"
               :rules="[
-                v => !!v || 'Required',
-                v => !meta || !meta.columns || meta.columns.every(c => column && (c.column_name || '').toLowerCase() === (column.column_name || '').toLowerCase() ||(
-                  (v||'').toLowerCase() !== (c.column_name||'').toLowerCase() && (v||'').toLowerCase() !== (c.title||'').toLowerCase())) || 'Duplicate column name' ,// && meta.v.every(c => v !== c.title ) || 'Duplicate column name',
-                validateColumnName
+                (v) => !!v || 'Required',
+                (v) =>
+                  !meta ||
+                  !meta.columns ||
+                  meta.columns.every(
+                    (c) =>
+                      (column &&
+                        (c.column_name || '').toLowerCase() ===
+                          (column.column_name || '').toLowerCase()) ||
+                      ((v || '').toLowerCase() !==
+                        (c.column_name || '').toLowerCase() &&
+                        (v || '').toLowerCase() !==
+                          (c.title || '').toLowerCase())
+                  ) ||
+                  'Duplicate column name', // && meta.v.every(c => v !== c.title ) || 'Duplicate column name',
+                validateColumnName,
               ]"
               class="caption nc-column-name-input"
               :label="$t('labels.columnName')"
@@ -32,22 +44,20 @@
           <v-container
             fluid
             :class="{
-              editDisabled :isEditDisabled
+              editDisabled: isEditDisabled,
             }"
           >
             <v-row>
               <v-col v-if="relation" cols="12">
                 <div class="caption">
-                  <p class="mb-1">
-                    Foreign Key
-                  </p>
+                  <p class="mb-1">Foreign Key</p>
 
-                  <v-icon small class="mt-n1">
-                    mdi-table
-                  </v-icon>
-                  <span class="text-capitalize font-weight-bold body-1"> {{ relation._rtn }}</span>
+                  <v-icon small class="mt-n1"> mdi-table </v-icon>
+                  <span class="text-capitalize font-weight-bold body-1">
+                    {{ relation._rtn }}</span
+                  >
                   <v-icon
-                    v-ge="['columns','fk-delete']"
+                    v-ge="['columns', 'fk-delete']"
                     small
                     class="ml-3 mt-n1"
                     color="error"
@@ -55,7 +65,9 @@
                   >
                     mdi-delete-forever
                   </v-icon>
-                  <span v-if="relation.type=== 'virtual'" class="caption">(v)</span>
+                  <span v-if="relation.type === 'virtual'" class="caption"
+                    >(v)</span
+                  >
                 </div>
               </v-col>
               <template v-else>
@@ -67,23 +79,25 @@
                     item-value="name"
                     item-text="name"
                     class="caption ui-type nc-ui-dt-dropdown"
-                    :class="{'primary lighten-5' : newColumn.uidt }"
+                    :class="{ 'primary lighten-5': newColumn.uidt }"
                     :label="$t('labels.columnType')"
                     dense
                     outlined
                     :items="uiTypes"
                     @change="onUiTypeChange"
                   >
-                    <template #selection="{item}">
+                    <template #selection="{ item }">
                       <div>
                         <v-icon color="grey darken-4" small class="mr-1">
                           {{ item.icon }}
                         </v-icon>
-                        <span class="caption  grey--text text--darken-4"> {{ item.name }}</span>
+                        <span class="caption grey--text text--darken-4">
+                          {{ item.name }}</span
+                        >
                       </div>
                     </template>
 
-                    <template #item="{item}">
+                    <template #item="{ item }">
                       <div class="caption">
                         <v-icon small class="mr-1">
                           {{ item.icon }}
@@ -94,7 +108,11 @@
                   </v-autocomplete>
 
                   <v-alert
-                    v-if="column && newColumn.uidt === 'SingleSelect' && column.uidt === 'MultiSelect'"
+                    v-if="
+                      column &&
+                      newColumn.uidt === 'SingleSelect' &&
+                      column.uidt === 'MultiSelect'
+                    "
                     dense
                     type="warning"
                     class="caption warning--text mt-2 mb-n4 pa-1"
@@ -105,8 +123,8 @@
                         mdi-alert-outline
                       </v-icon>
                     </template>
-                    Changing MultiSelect to SingleSelect can lead to errors when there are multiple values associated
-                    with a cell
+                    Changing MultiSelect to SingleSelect can lead to errors when
+                    there are multiple values associated with a cell
                   </v-alert>
                 </v-col>
 
@@ -116,14 +134,23 @@
                     @input="newColumn.altered = newColumn.altered || 2"
                   />
                 </v-col>
-                <v-col v-if="accordion" cols="12" class="pt-0" :class="{'pb-0': advanceOptions}">
+                <v-col
+                  v-if="accordion"
+                  cols="12"
+                  class="pt-0"
+                  :class="{ 'pb-0': advanceOptions }"
+                >
                   <div
                     class="pointer grey--text text-right caption nc-more-options"
                     @click="advanceOptions = !advanceOptions"
                   >
-                    {{ advanceOptions ? $t('general.hideAll') : $t('general.showMore') }}
+                    {{
+                      advanceOptions
+                        ? $t("general.hideAll")
+                        : $t("general.showMore")
+                    }}
                     <v-icon x-small color="grey">
-                      mdi-{{ advanceOptions ? 'minus' : 'plus' }}-circle-outline
+                      mdi-{{ advanceOptions ? "minus" : "plus" }}-circle-outline
                     </v-icon>
                   </div>
                 </v-col>
@@ -131,10 +158,7 @@
                 <v-col v-show="advanceOptions || !accordion" cols="12">
                   <v-row>
                     <template v-if="newColumn.uidt !== 'Formula'">
-                      <v-col
-                        v-if="isLookup"
-                        cols="12"
-                      >
+                      <v-col v-if="isLookup" cols="12">
                         <lookup-options
                           ref="lookup"
                           :column="newColumn"
@@ -146,10 +170,7 @@
                           v-on="$listeners"
                         />
                       </v-col>
-                      <v-col
-                        v-if="isRollup"
-                        cols="12"
-                      >
+                      <v-col v-if="isRollup" cols="12">
                         <rollup-options
                           ref="rollup"
                           :column="newColumn"
@@ -161,10 +182,7 @@
                           v-on="$listeners"
                         />
                       </v-col>
-                      <v-col
-                        v-if="isLinkToAnotherRecord"
-                        cols="12"
-                      >
+                      <v-col v-if="isLinkToAnotherRecord" cols="12">
                         <linked-to-another-options
                           ref="relation"
                           :column="newColumn"
@@ -176,10 +194,7 @@
                           @onColumnSelect="onRelColumnSelect"
                         />
                       </v-col>
-                      <v-col
-                        v-if="isRelation"
-                        cols="12"
-                      >
+                      <v-col v-if="isRelation" cols="12">
                         <relation-options
                           ref="relation"
                           :alias="alias"
@@ -191,26 +206,41 @@
                         />
                       </v-col>
 
-                      <template v-if="newColumn.column_name && newColumn.uidt && !isVirtual">
+                      <template
+                        v-if="
+                          newColumn.column_name && newColumn.uidt && !isVirtual
+                        "
+                      >
                         <v-col cols="12">
                           <v-container fluid class="wrapper">
                             <v-row>
                               <v-col cols="12">
-                                <div class="d-flex justify-space-between caption">
+                                <div
+                                  class="d-flex justify-space-between caption"
+                                >
                                   <v-tooltip bottom z-index="99999">
-                                    <template #activator="{on}">
+                                    <template #activator="{ on }">
                                       <div v-on="on">
                                         <v-checkbox
                                           v-model="newColumn.rqd"
-                                          :disabled="newColumn.pk || !sqlUi.columnEditable(newColumn)"
+                                          :disabled="
+                                            newColumn.pk ||
+                                            !sqlUi.columnEditable(newColumn)
+                                          "
                                           class="mr-2 mt-0"
                                           dense
                                           hide-details
                                           label="NN"
-                                          @change="newColumn.altered = newColumn.altered || 2"
+                                          @change="
+                                            newColumn.altered =
+                                              newColumn.altered || 2
+                                          "
                                         >
                                           <template #label>
-                                            <span class="caption font-weight-bold">NN</span>
+                                            <span
+                                              class="caption font-weight-bold"
+                                              >NN</span
+                                            >
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -218,20 +248,27 @@
                                     <span>Not Null</span>
                                   </v-tooltip>
                                   <v-tooltip bottom z-index="99999">
-                                    <template #activator="{on}">
+                                    <template #activator="{ on }">
                                       <div v-on="on">
                                         <v-checkbox
-
                                           v-model="newColumn.pk"
-                                          :disabled="!sqlUi.columnEditable(newColumn)"
+                                          :disabled="
+                                            !sqlUi.columnEditable(newColumn)
+                                          "
                                           class="mr-2 mt-0"
                                           dense
                                           hide-details
                                           label="PK"
-                                          @change="newColumn.altered = newColumn.altered || 2"
+                                          @change="
+                                            newColumn.altered =
+                                              newColumn.altered || 2
+                                          "
                                         >
                                           <template #label>
-                                            <span class="caption font-weight-bold">PK</span>
+                                            <span
+                                              class="caption font-weight-bold"
+                                              >PK</span
+                                            >
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -240,19 +277,30 @@
                                   </v-tooltip>
 
                                   <v-tooltip bottom z-index="99999">
-                                    <template #activator="{on}">
+                                    <template #activator="{ on }">
                                       <div v-on="on">
                                         <v-checkbox
                                           v-model="newColumn.ai"
-                                          :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
+                                          :disabled="
+                                            sqlUi.colPropUNDisabled(
+                                              newColumn
+                                            ) ||
+                                            !sqlUi.columnEditable(newColumn)
+                                          "
                                           class="mr-2 mt-0"
                                           dense
                                           hide-details
                                           label="AI"
-                                          @change="newColumn.altered = newColumn.altered || 2"
+                                          @change="
+                                            newColumn.altered =
+                                              newColumn.altered || 2
+                                          "
                                         >
                                           <template #label>
-                                            <span class="caption font-weight-bold">AI</span>
+                                            <span
+                                              class="caption font-weight-bold"
+                                              >AI</span
+                                            >
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -261,7 +309,7 @@
                                   </v-tooltip>
 
                                   <v-tooltip bottom z-index="99999">
-                                    <template #activator="{on}">
+                                    <template #activator="{ on }">
                                       <div v-on="on">
                                         <v-checkbox
                                           v-model="newColumn.un"
@@ -269,11 +317,22 @@
                                           dense
                                           hide-details
                                           label="UN"
-                                          :disabled="sqlUi.colPropUNDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                          @change="newColumn.altered = newColumn.altered || 2"
+                                          :disabled="
+                                            sqlUi.colPropUNDisabled(
+                                              newColumn
+                                            ) ||
+                                            !sqlUi.columnEditable(newColumn)
+                                          "
+                                          @change="
+                                            newColumn.altered =
+                                              newColumn.altered || 2
+                                          "
                                         >
                                           <template #label>
-                                            <span class="caption font-weight-bold">UN</span>
+                                            <span
+                                              class="caption font-weight-bold"
+                                              >UN</span
+                                            >
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -282,7 +341,7 @@
                                   </v-tooltip>
 
                                   <v-tooltip bottom z-index="99999">
-                                    <template #activator="{on}">
+                                    <template #activator="{ on }">
                                       <div v-on="on">
                                         <v-checkbox
                                           v-model="newColumn.au"
@@ -290,11 +349,22 @@
                                           dense
                                           hide-details
                                           label="UN"
-                                          :disabled=" sqlUi.colPropAuDisabled(newColumn) || !sqlUi.columnEditable(newColumn)"
-                                          @change="newColumn.altered = newColumn.altered || 2"
+                                          :disabled="
+                                            sqlUi.colPropAuDisabled(
+                                              newColumn
+                                            ) ||
+                                            !sqlUi.columnEditable(newColumn)
+                                          "
+                                          @change="
+                                            newColumn.altered =
+                                              newColumn.altered || 2
+                                          "
                                         >
                                           <template #label>
-                                            <span class="caption font-weight-bold">AU</span>
+                                            <span
+                                              class="caption font-weight-bold"
+                                              >AU</span
+                                            >
                                           </template>
                                         </v-checkbox>
                                       </div>
@@ -317,30 +387,47 @@
                                 />
                               </v-col>
 
-                              <v-col :cols="sqlUi.showScale(newColumn) && !isSelect ? 6 : 12">
+                              <v-col
+                                :cols="
+                                  sqlUi.showScale(newColumn) && !isSelect
+                                    ? 6
+                                    : 12
+                                "
+                              >
                                 <!--label="Length / Values"-->
                                 <v-text-field
                                   v-if="!isSelect"
                                   v-model="newColumn.dtxp"
                                   dense
-                                  :disabled="sqlUi.getDefaultLengthIsDisabled(newColumn.dt) || !sqlUi.columnEditable(newColumn)"
+                                  :disabled="
+                                    sqlUi.getDefaultLengthIsDisabled(
+                                      newColumn.dt
+                                    ) || !sqlUi.columnEditable(newColumn)
+                                  "
                                   class="caption"
                                   :label="$t('labels.lengthValue')"
                                   outlined
                                   hide-details
-                                  @input="newColumn.altered = newColumn.altered || 2"
+                                  @input="
+                                    newColumn.altered = newColumn.altered || 2
+                                  "
                                 />
                               </v-col>
-                              <v-col v-if="sqlUi.showScale(newColumn)" :cols="isSelect ?12 : 6">
+                              <v-col
+                                v-if="sqlUi.showScale(newColumn)"
+                                :cols="isSelect ? 12 : 6"
+                              >
                                 <v-text-field
                                   v-model="newColumn.dtxs"
                                   dense
-                                  :disabled=" !sqlUi.columnEditable(newColumn)"
+                                  :disabled="!sqlUi.columnEditable(newColumn)"
                                   class="caption"
                                   label="Scale"
                                   outlined
                                   hide-details
-                                  @input="newColumn.altered = newColumn.altered || 2"
+                                  @input="
+                                    newColumn.altered = newColumn.altered || 2
+                                  "
                                 />
                               </v-col>
 
@@ -348,13 +435,20 @@
                                 <v-textarea
                                   v-model="newColumn.cdf"
                                   :label="$t('placeholder.defaultValue')"
-                                  :hint="sqlUi.getDefaultValueForDatatype(newColumn.dt)"
+                                  :hint="
+                                    sqlUi.getDefaultValueForDatatype(
+                                      newColumn.dt
+                                    )
+                                  "
                                   persistent-hint
                                   rows="3"
                                   outlined
                                   dense
                                   class="caption"
-                                  @input="(newColumn.altered = newColumn.altered || 2); (newColumn.cdf = newColumn.cdf || null);"
+                                  @input="
+                                    newColumn.altered = newColumn.altered || 2;
+                                    newColumn.cdf = newColumn.cdf || null;
+                                  "
                                 />
                               </v-col>
                             </v-row>
@@ -381,35 +475,34 @@
                 </v-col>
               </template>
 
-              <div class="disabled-info" :class="{'d-none':!isEditDisabled}">
-                <v-alert dense type="warning" icon="info" class="caption mx-2" outlined>
-                  This spreadsheet is connected to an SQLite DB.<br>
-                  For production please see <a
+              <div class="disabled-info" :class="{ 'd-none': !isEditDisabled }">
+                <v-alert
+                  dense
+                  type="warning"
+                  icon="info"
+                  class="caption mx-2"
+                  outlined
+                >
+                  This spreadsheet is connected to an SQLite DB.<br />
+                  For production please see
+                  <a
                     href="https://github.com/nocodb/nocodb#production-setup"
                     target="_blank"
-                  >here</a>.
+                    >here</a
+                  >.
                 </v-alert>
               </div>
             </v-row>
           </v-container>
           <v-col cols="12" class="d-flex pt-0">
             <v-spacer />
-            <v-btn
-              small
-              outlined
-              @click="close"
-            >
+            <v-btn small outlined @click="close">
               <!-- Cancel -->
-              {{ $t('general.cancel') }}
+              {{ $t("general.cancel") }}
             </v-btn>
-            <v-btn
-              small
-              color="primary"
-              :disabled="!valid"
-              @click="save"
-            >
+            <v-btn small color="primary" :disabled="!valid" @click="save">
               <!-- Save -->
-              {{ $t('general.save') }}
+              {{ $t("general.save") }}
             </v-btn>
           </v-col>
         </v-row>
@@ -426,19 +519,19 @@
 </template>
 
 <script>
-import { MssqlUi, SqliteUi } from 'nocodb-sdk'
-import { UITypes, uiTypes } from '../helpers/uiTypes'
-import RollupOptions from './editColumn/rollupOptions'
-import FormulaOptions from '@/components/project/spreadsheet/components/editColumn/formulaOptions'
-import LookupOptions from '@/components/project/spreadsheet/components/editColumn/lookupOptions'
-import CustomSelectOptions from '@/components/project/spreadsheet/components/editColumn/customSelectOptions'
-import RelationOptions from '@/components/project/spreadsheet/components/editColumn/relationOptions'
-import DlgLabelSubmitCancel from '@/components/utils/dlgLabelSubmitCancel'
-import LinkedToAnotherOptions from '@/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions'
-import { validateColumnName } from '~/helpers'
+import { MssqlUi, SqliteUi } from "nocodb-sdk";
+import { UITypes, uiTypes } from "../helpers/uiTypes";
+import RollupOptions from "./editColumn/rollupOptions";
+import FormulaOptions from "@/components/project/spreadsheet/components/editColumn/formulaOptions";
+import LookupOptions from "@/components/project/spreadsheet/components/editColumn/lookupOptions";
+import CustomSelectOptions from "@/components/project/spreadsheet/components/editColumn/customSelectOptions";
+import RelationOptions from "@/components/project/spreadsheet/components/editColumn/relationOptions";
+import DlgLabelSubmitCancel from "@/components/utils/dlgLabelSubmitCancel";
+import LinkedToAnotherOptions from "@/components/project/spreadsheet/components/editColumn/linkedToAnotherOptions";
+import { validateColumnName } from "~/helpers";
 
 export default {
-  name: 'EditColumn',
+  name: "EditColumn",
   components: {
     RollupOptions,
     FormulaOptions,
@@ -446,7 +539,7 @@ export default {
     LinkedToAnotherOptions,
     DlgLabelSubmitCancel,
     RelationOptions,
-    CustomSelectOptions
+    CustomSelectOptions,
   },
   props: {
     nodes: Object,
@@ -455,154 +548,189 @@ export default {
     editColumn: Boolean,
     column: Object,
     columnIndex: Number,
-    value: Boolean
+    value: Boolean,
   },
   data: () => ({
     valid: false,
     relationDeleteDlg: false,
     newColumn: {},
-    advanceOptions: false
+    advanceOptions: false,
   }),
   computed: {
     accordion() {
-      return ![UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup, UITypes.SpecificDBType, UITypes.Formula].includes(this.newColumn && this.newColumn.uidt)
+      return ![
+        UITypes.LinkToAnotherRecord,
+        UITypes.Lookup,
+        UITypes.Rollup,
+        UITypes.SpecificDBType,
+        UITypes.Formula,
+      ].includes(this.newColumn && this.newColumn.uidt);
     },
     uiTypes() {
-      return uiTypes.filter(t => !this.editColumn || !t.virtual)
+      return uiTypes.filter((t) => !this.editColumn || !t.virtual);
     },
     isEditDisabled() {
-      return this.editColumn && this.sqlUi === SqliteUi
+      return this.editColumn && this.sqlUi === SqliteUi;
     },
     isSQLite() {
-      return this.sqlUi === SqliteUi
+      return this.sqlUi === SqliteUi;
     },
     isMSSQL() {
-      return this.sqlUi === MssqlUi
+      return this.sqlUi === MssqlUi;
     },
     dataTypes() {
-      return this.sqlUi.getDataTypeListForUiType(this.newColumn)
+      return this.sqlUi.getDataTypeListForUiType(this.newColumn);
     },
     isSelect() {
-      return this.newColumn && (this.newColumn.uidt === 'MultiSelect' ||
-        this.newColumn.uidt === 'SingleSelect')
+      return (
+        this.newColumn &&
+        (this.newColumn.uidt === "MultiSelect" ||
+          this.newColumn.uidt === "SingleSelect")
+      );
     },
     isRelation() {
-      return this.newColumn && this.newColumn.uidt === 'ForeignKey'
+      return this.newColumn && this.newColumn.uidt === "ForeignKey";
     },
     isLinkToAnotherRecord() {
-      return this.newColumn && this.newColumn.uidt === 'LinkToAnotherRecord'
+      return this.newColumn && this.newColumn.uidt === "LinkToAnotherRecord";
     },
     isLookup() {
-      return this.newColumn && this.newColumn.uidt === 'Lookup'
+      return this.newColumn && this.newColumn.uidt === "Lookup";
     },
     isRollup() {
-      return this.newColumn && this.newColumn.uidt === 'Rollup'
+      return this.newColumn && this.newColumn.uidt === "Rollup";
     },
     relation() {
-      return this.meta && this.column && this.meta.belongsTo && this.meta.belongsTo.find(bt => bt.column_name === this.column.column_name)
+      return (
+        this.meta &&
+        this.column &&
+        this.meta.belongsTo &&
+        this.meta.belongsTo.find(
+          (bt) => bt.column_name === this.column.column_name
+        )
+      );
     },
     isVirtual() {
-      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup
-    }
+      return this.isLinkToAnotherRecord || this.isLookup || this.isRollup;
+    },
   },
   watch: {
     column() {
-      this.genColumnData()
-    }
+      this.genColumnData();
+    },
   },
   async created() {
-    this.genColumnData()
+    this.genColumnData();
   },
   mounted() {
-    this.focusInput()
+    this.focusInput();
   },
   methods: {
     validateColumnName(v) {
-      return validateColumnName(v, this.$store.getters['project/GtrProjectIsGraphql'])
+      return validateColumnName(
+        v,
+        this.$store.getters["project/GtrProjectIsGraphql"]
+      );
     },
     onRelColumnSelect(colMeta) {
       Object.assign(this.newColumn, {
         dt: colMeta.dt,
         dtxp: colMeta.dtxp,
         dtxs: colMeta.dtxs,
-        un: colMeta.un
-      })
+        un: colMeta.un,
+      });
     },
     genColumnData() {
-      this.newColumn = this.column ? { ...this.column } : this.sqlUi.getNewColumn([...this.meta.columns, ...(this.meta.v || [])].length + 1)
-      this.newColumn.cno = this.newColumn.column_name
+      this.newColumn = this.column
+        ? { ...this.column }
+        : this.sqlUi.getNewColumn(
+            [...this.meta.columns, ...(this.meta.v || [])].length + 1
+          );
+      this.newColumn.cno = this.newColumn.column_name;
     },
     close() {
-      this.$emit('close')
-      this.newColumn = {}
+      this.$emit("close");
+      this.newColumn = {};
     },
     async save() {
       if (!this.$refs.form.validate()) {
-        return
+        return;
       }
       try {
-        if (this.newColumn.uidt === 'Formula') {
-          await this.$refs.formula.save()
-          return this.$emit('saved')
+        if (this.newColumn.uidt === "Formula") {
+          await this.$refs.formula.save();
+          return this.$emit("saved");
           // return this.$toast.info('Coming Soon...').goAway(3000)
         }
 
         if (this.isLinkToAnotherRecord && this.$refs.relation) {
-          await this.$refs.relation.saveRelation()
-          return this.$emit('saved')
+          await this.$refs.relation.saveRelation();
+          return this.$emit("saved");
         }
         if (this.isLookup && this.$refs.lookup) {
-          return await this.$refs.lookup.save()
+          return await this.$refs.lookup.save();
         }
         if (this.isRollup && this.$refs.rollup) {
-          return await this.$refs.rollup.save()
+          return await this.$refs.rollup.save();
         }
-        if (this.newColumn.uidt === 'Formula' && this.$refs.formula) {
-          return await this.$refs.formula.save()
+        if (this.newColumn.uidt === "Formula" && this.$refs.formula) {
+          return await this.$refs.formula.save();
         }
 
-        this.newColumn.table_name = this.nodes.table_name
-        this.newColumn.title = this.newColumn.column_name
+        this.newColumn.table_name = this.nodes.table_name;
+        this.newColumn.title = this.newColumn.column_name;
 
         if (this.editColumn) {
-          await this.$api.dbTableColumn.update(this.column.id, this.newColumn)
+          await this.$api.dbTableColumn.update(this.column.id, this.newColumn);
         } else {
-          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn)
+          await this.$api.dbTableColumn.create(this.meta.id, this.newColumn);
         }
 
-        this.$emit('saved', this.newColumn.title, this.editColumn ? this.meta.columns[this.columnIndex].title : null)
+        this.$emit(
+          "saved",
+          this.newColumn.title,
+          this.editColumn ? this.meta.columns[this.columnIndex].title : null
+        );
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
 
-      this.$emit('close')
+      this.$emit("close");
 
-      this.$tele.emit(`column:edit:save:${this.newColumn.uidt}`)
+      this.$e("a:column:add", { datatype: this.newColumn.uidt });
     },
     onDataTypeChange() {
-      this.newColumn.rqd = false
+      this.newColumn.rqd = false;
       if (this.newColumn.uidt !== UITypes.ID) {
-        this.newColumn.primaryKey = false
+        this.newColumn.primaryKey = false;
       }
-      this.newColumn.ai = false
-      this.newColumn.cdf = null
-      this.newColumn.un = false
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
-
-      this.newColumn.dtx = 'specificType'
-
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp
+      this.newColumn.ai = false;
+      this.newColumn.cdf = null;
+      this.newColumn.un = false;
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(
+        this.newColumn.dt
+      );
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(
+        this.newColumn.dt
+      );
+
+      this.newColumn.dtx = "specificType";
+
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      if (
+        this.column &&
+        selectTypes.includes(this.newColumn.uidt) &&
+        selectTypes.includes(this.column.uidt)
+      ) {
+        this.newColumn.dtxp = this.column.dtxp;
       }
 
       // this.$set(this.newColumn, 'uidt', this.sqlUi.getUIType(this.newColumn));
 
-      this.newColumn.altered = this.newColumn.altered || 2
+      this.newColumn.altered = this.newColumn.altered || 2;
     },
     onUiTypeChange() {
-      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn)
+      const colProp = this.sqlUi.getDataTypeForUiType(this.newColumn);
       this.newColumn = {
         ...this.newColumn,
         rqd: false,
@@ -610,69 +738,77 @@ export default {
         ai: false,
         cdf: null,
         un: false,
-        dtx: 'specificType',
-        ...colProp
+        dtx: "specificType",
+        ...colProp,
+      };
+
+      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(
+        this.newColumn.dt
+      );
+      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(
+        this.newColumn.dt
+      );
+
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect];
+      if (
+        this.column &&
+        selectTypes.includes(this.newColumn.uidt) &&
+        selectTypes.includes(this.column.uidt)
+      ) {
+        this.newColumn.dtxp = this.column.dtxp;
       }
 
-      this.newColumn.dtxp = this.sqlUi.getDefaultLengthForDatatype(this.newColumn.dt)
-      this.newColumn.dtxs = this.sqlUi.getDefaultScaleForDatatype(this.newColumn.dt)
-
-      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-      if (this.column && selectTypes.includes(this.newColumn.uidt) && selectTypes.includes(this.column.uidt)) {
-        this.newColumn.dtxp = this.column.dtxp
-      }
-
-      this.newColumn.altered = this.newColumn.altered || 2
+      this.newColumn.altered = this.newColumn.altered || 2;
     },
     focusInput() {
       setTimeout(() => {
         if (this.$refs.column && this.$refs.column.$el) {
-          const el = this.$refs.column.$el.querySelector('input')
-          el.focus()
-          el.select()
+          const el = this.$refs.column.$el.querySelector("input");
+          el.focus();
+          el.select();
         }
-      }, 100)
+      }, 100);
     },
-    async deleteRelation(action = '', column) {
+    async deleteRelation(action = "", column) {
       try {
-        if (action === 'showDialog') {
-          this.relationDeleteDlg = true
-        } else if (action === 'hideDialog') {
-          this.relationDeleteDlg = false
+        if (action === "showDialog") {
+          this.relationDeleteDlg = true;
+        } else if (action === "hideDialog") {
+          this.relationDeleteDlg = false;
         } else {
-          const result = await this.$store.dispatch('sqlMgr/ActSqlOpPlus', [
+          const result = await this.$store.dispatch("sqlMgr/ActSqlOpPlus", [
             {
               env: this.nodes.env,
-              dbAlias: this.nodes.dbAlias
+              dbAlias: this.nodes.dbAlias,
             },
-            this.relation.type === 'virtual' ? 'xcVirtualRelationDelete' : 'relationDelete',
+            this.relation.type === "virtual"
+              ? "xcVirtualRelationDelete"
+              : "relationDelete",
             {
               childColumn: this.relation.column_name,
               childTable: this.nodes.table_name,
-              parentTable: this.relation
-                .rtn,
-              parentColumn: this.relation
-                .rcn
-            }
-          ])
-          this.relationDeleteDlg = false
-          this.relation = null
-          this.$toast.success('Foreign Key deleted successfully').goAway(3000)
-          this.$emit('onRelationDelete')
+              parentTable: this.relation.rtn,
+              parentColumn: this.relation.rcn,
+            },
+          ]);
+          this.relationDeleteDlg = false;
+          this.relation = null;
+          this.$toast.success("Foreign Key deleted successfully").goAway(3000);
+          this.$emit("onRelationDelete");
         }
       } catch (e) {
-        console.log(e)
-        this.$toast.error('Foreign key relation delete failed' + e).goAway(3000)
-        throw e
+        console.log(e);
+        this.$toast
+          .error("Foreign key relation delete failed" + e)
+          .goAway(3000);
+        throw e;
       }
-    }
-  }
-
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 ::v-deep {
   .wrapper {
     border: solid 2px #7f828b33;
@@ -687,7 +823,9 @@ export default {
     border-color: #7f828b33 !important;
   }
 
-  .data-type, .ui-type, .formula-type {
+  .data-type,
+  .ui-type,
+  .formula-type {
     .v-input__append-inner {
       margin-top: 4px !important;
     }
@@ -698,11 +836,11 @@ export default {
   }
 
   .v-input--selection-controls__input > i {
-    transform: scale(.83);
+    transform: scale(0.83);
   }
 
   label {
-    font-size: 0.75rem !important
+    font-size: 0.75rem !important;
   }
 
   .v-text-field--outlined.v-input--dense .v-label:not(.v-label--active) {
@@ -732,12 +870,11 @@ export default {
     top: 0;
     bottom: 0;
     background: var(--v-backgroundColor-base);
-    opacity: .9;
+    opacity: 0.9;
 
     & > * {
       opacity: 1;
     }
   }
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
index 11a1157a34..8545eb8768 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/editVirtualColumn.vue
@@ -49,7 +49,7 @@
               {{ $t('general.cancel') }}
             </v-btn>
             <v-btn
-              v-t="['virtual:column:edit']"
+              v-t="['c:column:edit']"
               x-small
               color="primary"
               :disabled="!valid"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
index 0a29f9c675..394ad33cf3 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/expandedForm.vue
@@ -1,11 +1,9 @@
 <template>
   <v-card width="1000" max-width="100%">
     <v-toolbar height="55" class="elevation-1">
-      <div class="d-100 d-flex ">
+      <div class="d-100 d-flex">
         <h5 class="title text-center">
-          <v-icon :color="iconColor">
-            mdi-table-arrow-right
-          </v-icon>
+          <v-icon :color="iconColor"> mdi-table-arrow-right </v-icon>
 
           <template v-if="meta">
             {{ meta.title }}
@@ -17,9 +15,7 @@
         </h5>
         <v-spacer />
         <v-btn small text @click="reload">
-          <v-icon small>
-            mdi-reload
-          </v-icon>
+          <v-icon small> mdi-reload </v-icon>
         </v-btn>
 
         <x-icon
@@ -30,59 +26,80 @@
           text
           @click="toggleDrawer = !toggleDrawer"
         >
-          {{ toggleDrawer ? 'mdi-door-open' : 'mdi-door-closed' }}
+          {{ toggleDrawer ? "mdi-door-open" : "mdi-door-closed" }}
         </x-icon>
 
         <v-btn small @click="$emit('cancel')">
           <!-- Cancel -->
-          {{ $t('general.cancel') }}
+          {{ $t("general.cancel") }}
         </v-btn>
-        <v-btn :disabled="!_isUIAllowed('tableRowUpdate')" small color="primary" @click="save">
+        <v-btn
+          :disabled="!_isUIAllowed('tableRowUpdate')"
+          small
+          color="primary"
+          @click="save"
+        >
           <!--Save Row-->
-          {{ $t('activity.saveRow') }}
+          {{ $t("activity.saveRow") }}
         </v-btn>
       </div>
     </v-toolbar>
-    <div class="form-container ">
+    <div class="form-container">
       <v-card-text
-        class=" py-0 px-0 "
+        class="py-0 px-0"
         :class="{
-          'px-10' : isNew || !toggleDrawer,
+          'px-10': isNew || !toggleDrawer,
         }"
       >
         <v-breadcrumbs
           v-if="localBreadcrumbs && localBreadcrumbs.length"
           class="caption pt-0 pb-2 justify-center d-100"
-          :items="localBreadcrumbs.map(text => ({text}))"
+          :items="localBreadcrumbs.map((text) => ({ text }))"
         />
 
-        <v-container fluid style="height:70vh" class="py-0">
+        <v-container fluid style="height: 70vh" class="py-0">
           <v-row class="h-100">
-            <v-col class="h-100 px-10" style="overflow-y: auto" cols="8" :offset="isNew || !toggleDrawer ? 2 : 0">
+            <v-col
+              class="h-100 px-10"
+              style="overflow-y: auto"
+              cols="8"
+              :offset="isNew || !toggleDrawer ? 2 : 0"
+            >
               <div v-if="showNextPrev" class="d-flex my-4">
-                <x-icon tooltip="Previous record" small outlined @click="$emit('prev', localState)">
+                <x-icon
+                  tooltip="Previous record"
+                  small
+                  outlined
+                  @click="$emit('prev', localState)"
+                >
                   mdi-arrow-left-bold-outline
                 </x-icon>
                 <span class="flex-grow-1" />
-                <x-icon tooltip="Next record" small outlined @click="$emit('next', localState)">
+                <x-icon
+                  tooltip="Next record"
+                  small
+                  outlined
+                  @click="$emit('next', localState)"
+                >
                   mdi-arrow-right-bold-outline
                 </x-icon>
               </div>
 
-              <template
-                v-for="(col,i) in fields"
-              >
+              <template v-for="(col, i) in fields">
                 <div
                   v-if="!col.lk && (!showFields || showFields[col.title])"
                   :key="i"
                   :class="{
-                    'active-row' : active === col.title,
-                    required: isValid(col, localState)
+                    'active-row': active === col.title,
+                    required: isValid(col, localState),
                   }"
-                  class="row-col  my-4"
+                  class="row-col my-4"
                 >
                   <div>
-                    <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize">
+                    <label
+                      :for="`data-table-form-${col.title}`"
+                      class="body-2 text-capitalize"
+                    >
                       <virtual-header-cell
                         v-if="col.colOptions"
                         :column="col"
@@ -98,7 +115,6 @@
                         :column="col"
                         :sql-ui="sqlUi"
                       />
-
                     </label>
                     <virtual-cell
                       v-if="isVirtualCol(col)"
@@ -114,21 +130,30 @@
                       :is-form="true"
                       :breadcrumbs="localBreadcrumbs"
                       @updateCol="updateCol"
-                      @newRecordsSaved="$listeners.loadTableData|| reload"
+                      @newRecordsSaved="$listeners.loadTableData || reload"
                     />
 
                     <div
-                      v-else-if="col.ai || (col.pk && !isNew) || disabledColumns[col.title]"
-                      style="height:100%; width:100%"
+                      v-else-if="
+                        col.ai ||
+                        (col.pk && !isNew) ||
+                        disabledColumns[col.title]
+                      "
+                      style="height: 100%; width: 100%"
                       class="caption xc-input"
-                      @click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
+                      @click="
+                        col.ai &&
+                          $toast
+                            .info('Auto Increment field is not editable')
+                            .goAway(3000)
+                      "
                     >
                       <input
-                        style="height:100%; width: 100%"
+                        style="height: 100%; width: 100%"
                         readonly
                         disabled
                         :value="localState[col.title]"
-                      >
+                      />
                     </div>
 
                     <editable-cell
@@ -144,7 +169,7 @@
                       :is-locked="isLocked"
                       @focus="active = col.title"
                       @blur="active = ''"
-                      @input="$set(changedColumns,col.title, true)"
+                      @input="$set(changedColumns, col.title, true)"
                     />
                   </div>
                 </div>
@@ -153,45 +178,70 @@
             <v-col
               v-if="!isNew && toggleDrawer"
               cols="4"
-              class="d-flex flex-column h-100 flex-grow-1 blue-grey  "
+              class="d-flex flex-column h-100 flex-grow-1 blue-grey"
               :class="{
-                'lighten-5':!$vuetify.theme.dark,
-                'darken-4':$vuetify.theme.dark
+                'lighten-5': !$vuetify.theme.dark,
+                'darken-4': $vuetify.theme.dark,
               }"
             >
-              <v-skeleton-loader v-if="loadingLogs && !logs" type="list-item-avatar-two-line@8" />
+              <v-skeleton-loader
+                v-if="loadingLogs && !logs"
+                type="list-item-avatar-two-line@8"
+              />
 
               <v-list
                 v-else
                 ref="commentsList"
                 width="100%"
                 style="overflow-y: auto; overflow-x: auto"
-                class="blue-grey "
+                class="blue-grey"
                 :class="{
-                  'lighten-5':!$vuetify.theme.dark,
-                  'darken-4':$vuetify.theme.dark
+                  'lighten-5': !$vuetify.theme.dark,
+                  'darken-4': $vuetify.theme.dark,
                 }"
               >
                 <div>
                   <v-list-item v-for="log in logs" :key="log.id" class="d-flex">
                     <v-list-item-icon class="ma-0 mr-2">
-                      <v-icon :color="isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'">
+                      <v-icon
+                        :color="
+                          isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'
+                        "
+                      >
                         mdi-account-circle
                       </v-icon>
                     </v-list-item-icon>
                     <div class="flex-grow-1" style="min-width: 0">
                       <p class="mb-1 caption edited-text">
-                        {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }} {{
-                          log.op_type === 'COMMENT' ? 'commented' : (
-                            log.op_sub_type === 'INSERT' ? 'created' : 'edited'
-                          )
+                        {{
+                          isYou(log.user)
+                            ? "You"
+                            : log.user == null
+                            ? "Shared base"
+                            : log.user
+                        }}
+                        {{
+                          log.op_type === "COMMENT"
+                            ? "commented"
+                            : log.op_sub_type === "INSERT"
+                            ? "created"
+                            : "edited"
                         }}
                       </p>
-                      <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" :style="{background :colors[2]}">
+                      <p
+                        v-if="log.op_type === 'COMMENT'"
+                        class="caption mb-0 nc-chip"
+                        :style="{ background: colors[2] }"
+                      >
                         {{ log.description }}
                       </p>
 
-                      <p v-else class="caption mb-0" style="word-break: break-all;" v-html="log.details" />
+                      <p
+                        v-else
+                        class="caption mb-0"
+                        style="word-break: break-all"
+                        v-html="log.details"
+                      />
 
                       <p class="time text-right mb-0">
                         {{ calculateDiff(log.created_at) }}
@@ -206,7 +256,7 @@
               <div class="d-flex align-center justify-center">
                 <v-switch
                   v-model="commentsOnly"
-                  v-t="['record:comment:comments-only']"
+                  v-t="['c:row-expand:comment-only']"
                   class="mt-1"
                   dense
                   hide-details
@@ -229,9 +279,9 @@
                   solo
                   hide-details
                   class="caption comment-box"
-                  :class="{ focus : showborder }"
-                  @focusin=" showborder = true"
-                  @focusout=" showborder = false"
+                  :class="{ focus: showborder }"
+                  @focusin="showborder = true"
+                  @focusout="showborder = false"
                   @keyup.enter.prevent="saveComment"
                 >
                   <template v-if="comment" #append>
@@ -250,7 +300,7 @@
     <v-btn
       v-if="_isUIAllowed('rowComments')"
       v-show="!toggleDrawer"
-      v-t="['record:comment-toggle']"
+      v-t="['c:row-expand:comment-toggle']"
       class="comment-icon"
       color="primary"
       fab
@@ -262,40 +312,44 @@
 </template>
 
 <script>
-
-import dayjs from 'dayjs'
-import { AuditOperationSubTypes, AuditOperationTypes, isVirtualCol, UITypes } from 'nocodb-sdk'
-import form from '../mixins/form'
-import HeaderCell from '@/components/project/spreadsheet/components/headerCell'
-import EditableCell from '@/components/project/spreadsheet/components/editableCell'
-import colors from '@/mixins/colors'
-import VirtualCell from '@/components/project/spreadsheet/components/virtualCell'
-import VirtualHeaderCell from '@/components/project/spreadsheet/components/virtualHeaderCell'
-
-const relativeTime = require('dayjs/plugin/relativeTime')
-const utc = require('dayjs/plugin/utc')
-dayjs.extend(utc)
-dayjs.extend(relativeTime)
+import dayjs from "dayjs";
+import {
+  AuditOperationSubTypes,
+  AuditOperationTypes,
+  isVirtualCol,
+  UITypes,
+} from "nocodb-sdk";
+import form from "../mixins/form";
+import HeaderCell from "@/components/project/spreadsheet/components/headerCell";
+import EditableCell from "@/components/project/spreadsheet/components/editableCell";
+import colors from "@/mixins/colors";
+import VirtualCell from "@/components/project/spreadsheet/components/virtualCell";
+import VirtualHeaderCell from "@/components/project/spreadsheet/components/virtualHeaderCell";
+
+const relativeTime = require("dayjs/plugin/relativeTime");
+const utc = require("dayjs/plugin/utc");
+dayjs.extend(utc);
+dayjs.extend(relativeTime);
 export default {
-  name: 'ExpandedForm',
+  name: "ExpandedForm",
   components: {
     VirtualHeaderCell,
     VirtualCell,
     EditableCell,
-    HeaderCell
+    HeaderCell,
   },
   mixins: [colors, form],
   props: {
     showFields: Object,
     showNextPrev: {
       type: Boolean,
-      default: false
+      default: false,
     },
     breadcrumbs: {
       type: Array,
       default() {
-        return []
-      }
+        return [];
+      },
     },
     dbAlias: String,
     value: Object,
@@ -307,13 +361,13 @@ export default {
     oldRow: Object,
     iconColor: {
       type: String,
-      default: 'primary'
+      default: "primary",
     },
     availableColumns: [Object, Array],
     queryParams: Object,
     meta: Object,
     presetValues: Object,
-    isLocked: Boolean
+    isLocked: Boolean,
   },
   data: () => ({
     isVirtualCol,
@@ -322,228 +376,286 @@ export default {
     loadingLogs: true,
     toggleDrawer: false,
     logs: null,
-    active: '',
+    active: "",
     localState: {},
     changedColumns: {},
     comment: null,
     showSystemFields: false,
-    commentsOnly: false
+    commentsOnly: false,
   }),
   computed: {
     primaryKey() {
-      return this.isNew ? '' : this.meta.columns.filter(c => c.pk).map(c => this.localState[c.title]).join('___')
+      return this.isNew
+        ? ""
+        : this.meta.columns
+            .filter((c) => c.pk)
+            .map((c) => this.localState[c.title])
+            .join("___");
     },
     edited() {
-      return !!Object.keys(this.changedColumns).length
+      return !!Object.keys(this.changedColumns).length;
     },
     fields() {
       if (this.availableColumns) {
-        return this.availableColumns
+        return this.availableColumns;
       }
 
-      const hideCols = ['created_at', 'updated_at']
+      const hideCols = ["created_at", "updated_at"];
 
       if (this.showSystemFields) {
-        return this.meta.columns || []
+        return this.meta.columns || [];
       } else {
-        return this.meta.columns.filter(c => !(c.pk && c.ai) && !hideCols.includes(c.column_name) &&
-          !((this.meta.v || []).some(v => v.bt && v.bt.column_name === c.column_name))
-        ) || []
+        return (
+          this.meta.columns.filter(
+            (c) =>
+              !(c.pk && c.ai) &&
+              !hideCols.includes(c.column_name) &&
+              !(this.meta.v || []).some(
+                (v) => v.bt && v.bt.column_name === c.column_name
+              )
+          ) || []
+        );
       }
     },
     isChanged() {
-      return Object.values(this.changedColumns).some(Boolean)
+      return Object.values(this.changedColumns).some(Boolean);
     },
     localBreadcrumbs() {
-      return [...this.breadcrumbs, `${this.meta ? this.meta.title : this.table} ${this.primaryValue() ? `(${this.primaryValue()})` : ''}`]
-    }
+      return [
+        ...this.breadcrumbs,
+        `${this.meta ? this.meta.title : this.table} ${
+          this.primaryValue() ? `(${this.primaryValue()})` : ""
+        }`,
+      ];
+    },
   },
   watch: {
     value(obj) {
-      this.localState = { ...obj }
+      this.localState = { ...obj };
       if (!this.isNew && this.toggleDrawer) {
-        this.getAuditsAndComments()
+        this.getAuditsAndComments();
       }
     },
     isNew(n) {
       if (!n && this.toggleDrawer) {
-        this.getAuditsAndComments()
+        this.getAuditsAndComments();
       }
     },
     meta() {
       if (!this.isNew && this.toggleDrawer) {
-        this.getAuditsAndComments()
+        this.getAuditsAndComments();
       }
     },
     toggleDrawer(td) {
       if (td) {
-        this.getAuditsAndComments()
+        this.getAuditsAndComments();
       }
-    }
+    },
   },
   created() {
-    this.localState = { ...this.value }
+    this.localState = { ...this.value };
     if (!this.isNew && this.toggleDrawer) {
-      this.getAuditsAndComments()
+      this.getAuditsAndComments();
     }
   },
   methods: {
     updateCol(_row, _cn, pid) {
-      this.$set(this.localState, _cn, pid)
-      this.$set(this.changedColumns, _cn, true)
+      this.$set(this.localState, _cn, pid);
+      this.$set(this.changedColumns, _cn, true);
     },
     isYou(email) {
-      return this.$store.state.users.user && this.$store.state.users.user.email === email
+      return (
+        this.$store.state.users.user &&
+        this.$store.state.users.user.email === email
+      );
     },
     async getAuditsAndComments() {
-      this.loadingLogs = true
+      this.loadingLogs = true;
 
-      const data = (await this.$api.utils.commentList({
-        row_id: this.meta.columns.filter(c => c.pk).map(c => this.localState[c.title]).join('___'),
+      const data = await this.$api.utils.commentList({
+        row_id: this.meta.columns
+          .filter((c) => c.pk)
+          .map((c) => this.localState[c.title])
+          .join("___"),
         fk_model_id: this.meta.id,
-        comments_only: this.commentsOnly
-      }))
+        comments_only: this.commentsOnly,
+      });
 
-      this.logs = data.reverse()
-      this.loadingLogs = false
+      this.logs = data.reverse();
+      this.loadingLogs = false;
 
       this.$nextTick(() => {
-        if (this.$refs.commentsList && this.$refs.commentsList.$el && this.$refs.commentsList.$el.firstElementChild) {
-          this.$refs.commentsList.$el.scrollTop = this.$refs.commentsList.$el.firstElementChild.offsetHeight
+        if (
+          this.$refs.commentsList &&
+          this.$refs.commentsList.$el &&
+          this.$refs.commentsList.$el.firstElementChild
+        ) {
+          this.$refs.commentsList.$el.scrollTop =
+            this.$refs.commentsList.$el.firstElementChild.offsetHeight;
         }
-      })
+      });
     },
     async save() {
       try {
-        const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c.title]).join('___')
+        const id = this.meta.columns
+          .filter((c) => c.pk)
+          .map((c) => this.localState[c.title])
+          .join("___");
 
         if (this.presetValues) {
           // cater presetValues
           for (const k in this.presetValues) {
-            this.$set(this.changedColumns, k, true)
+            this.$set(this.changedColumns, k, true);
           }
         }
 
-        const updatedObj = Object.keys(this.changedColumns).reduce((obj, col) => {
-          obj[col] = this.localState[col]
-          return obj
-        }, {})
+        const updatedObj = Object.keys(this.changedColumns).reduce(
+          (obj, col) => {
+            obj[col] = this.localState[col];
+            return obj;
+          },
+          {}
+        );
 
         if (this.isNew) {
-          const data = (await this.$api.dbTableRow.create(
-            'noco',
+          const data = await this.$api.dbTableRow.create(
+            "noco",
             this.projectName,
-            this.meta.title, updatedObj))
-          this.localState = { ...this.localState, ...data }
+            this.meta.title,
+            updatedObj
+          );
+          this.localState = { ...this.localState, ...data };
 
           // save hasmany and manytomany relations from local state
           if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
             for (const vcell of this.$refs.virtual) {
               if (vcell.save) {
-                await vcell.save(this.localState)
+                await vcell.save(this.localState);
               }
             }
           }
 
-          await this.reload()
+          await this.reload();
         } else if (Object.keys(updatedObj).length) {
           if (!id) {
-            return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
+            return this.$toast
+              .info(
+                "Update not allowed for table which doesn't have primary Key"
+              )
+              .goAway(3000);
           }
           await this.$api.dbTableRow.update(
-            'noco',
+            "noco",
             this.projectName,
             this.meta.title,
             id,
             updatedObj
-          )
+          );
           for (const key of Object.keys(updatedObj)) {
             // audit
-            this.$api.utils.auditRowUpdate(id, {
-              fk_model_id: this.meta.id,
-              column_name: key,
-              row_id: id,
-              value: updatedObj[key],
-              prev_value: this.oldRow[key]
-            }).then(() => {
-            })
+            this.$api.utils
+              .auditRowUpdate(id, {
+                fk_model_id: this.meta.id,
+                column_name: key,
+                row_id: id,
+                value: updatedObj[key],
+                prev_value: this.oldRow[key],
+              })
+              .then(() => {});
           }
         } else {
-          return this.$toast.info('No columns to update').goAway(3000)
+          return this.$toast.info("No columns to update").goAway(3000);
         }
 
-        this.$emit('update:oldRow', { ...this.localState })
-        this.changedColumns = {}
-        this.$emit('input', this.localState)
-        this.$emit('update:isNew', false)
+        this.$emit("update:oldRow", { ...this.localState });
+        this.changedColumns = {};
+        this.$emit("input", this.localState);
+        this.$emit("update:isNew", false);
 
-        this.$toast.success(`${this.primaryValue() || 'Row'} updated successfully.`, {
-          position: 'bottom-right'
-        }).goAway(3000)
+        this.$toast
+          .success(`${this.primaryValue() || "Row"} updated successfully.`, {
+            position: "bottom-right",
+          })
+          .goAway(3000);
       } catch (e) {
-        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
+        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000);
       }
-      this.$tele.emit('record:add:submit')
+      this.$e("a:row-expand:add");
     },
     async reload() {
-      const id = this.meta.columns.filter(c => c.pk).map(c => this.localState[c.title]).join('___')
-      this.$set(this, 'changedColumns', {})
-      this.localState = (await this.$api.dbTableRow.read(
-        'noco',
+      const id = this.meta.columns
+        .filter((c) => c.pk)
+        .map((c) => this.localState[c.title])
+        .join("___");
+      this.$set(this, "changedColumns", {});
+      this.localState = await this.$api.dbTableRow.read(
+        "noco",
         this.projectName,
-        this.meta.title, id, { query: this.queryParams || {} }))
+        this.meta.title,
+        id,
+        { query: this.queryParams || {} }
+      );
     },
     calculateDiff(date) {
-      return dayjs.utc(date).fromNow()
+      return dayjs.utc(date).fromNow();
     },
     async saveComment() {
       try {
         await this.$api.utils.commentRow({
           fk_model_id: this.meta.id,
-          row_id: this.meta.columns.filter(c => c.pk).map(c => this.localState[c.title]).join('___'),
-          description: this.comment
-        })
-
-        this.comment = ''
-        this.$toast.success('Comment added successfully').goAway(3000)
-        this.$emit('commented')
-        await this.getAuditsAndComments()
+          row_id: this.meta.columns
+            .filter((c) => c.pk)
+            .map((c) => this.localState[c.title])
+            .join("___"),
+          description: this.comment,
+        });
+
+        this.comment = "";
+        this.$toast.success("Comment added successfully").goAway(3000);
+        this.$emit("commented");
+        await this.getAuditsAndComments();
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit('record:comment:insert')
+      this.$e("a:row-expand:comment");
     },
     primaryValue() {
       if (this.localState) {
-        const value = this.localState[this.primaryValueColumn]
-        const col = this.meta.columns.find(c => c.title == this.primaryValueColumn)
+        const value = this.localState[this.primaryValueColumn];
+        const col = this.meta.columns.find(
+          (c) => c.title == this.primaryValueColumn
+        );
         if (!col) {
-          return
+          return;
         }
-        const uidt = col.uidt
+        const uidt = col.uidt;
         if (uidt == UITypes.Date) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format(
+            "YYYY-MM-DD"
+          );
         } else if (uidt == UITypes.DateTime) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format(
+            "YYYY-MM-DD HH:mm"
+          );
         } else if (uidt == UITypes.Time) {
-          let dateTime = dayjs(value)
+          let dateTime = dayjs(value);
           if (!dateTime.isValid()) {
-            dateTime = dayjs(value, 'HH:mm:ss')
+            dateTime = dayjs(value, "HH:mm:ss");
           }
           if (!dateTime.isValid()) {
-            dateTime = dayjs(`1999-01-01 ${value}`)
+            dateTime = dayjs(`1999-01-01 ${value}`);
           }
           if (!dateTime.isValid()) {
-            return value
+            return value;
           }
-          return dateTime.format('HH:mm:ss')
+          return dateTime.format("HH:mm:ss");
         }
-        return value
+        return value;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -552,7 +664,8 @@ export default {
   font-weight: 700;
 }
 
-.row-col:focus > label, .active-row > label {
+.row-col:focus > label,
+.active-row > label {
   color: var(--v-primary-base);
 }
 
@@ -563,15 +676,14 @@ export default {
 }
 
 ::v-deep {
-
   .v-breadcrumbs__item:nth-child(odd) {
-    font-size: .72rem;
+    font-size: 0.72rem;
     color: grey;
   }
 
   .v-breadcrumbs li:nth-child(even) {
     padding: 0 6px;
-    font-size: .72rem;
+    font-size: 0.72rem;
     color: var(--v-textColor-base);
   }
 
@@ -594,7 +706,7 @@ export default {
     & > div textarea:not(.inputarea) {
       border: 1px solid #7f828b33;
       padding: 1px 5px;
-      font-size: .8rem;
+      font-size: 0.8rem;
       border-radius: 4px;
       min-height: 44px;
 
@@ -605,13 +717,10 @@ export default {
       &:hover:not(:focus) {
         box-shadow: 0 0 2px dimgrey;
       }
-
     }
-
   }
 
   &.v-card {
-
     &.theme--dark .v-card__text {
       background: #363636;
 
@@ -643,9 +752,7 @@ export default {
         }
       }
     }
-
   }
-
 }
 
 h5 {
@@ -658,8 +765,9 @@ h5 {
   overflow: auto;
 }
 
-.time, .edited-text {
-  font-size: .65rem;
+.time,
+.edited-text {
+  font-size: 0.65rem;
   color: grey;
 }
 
diff --git a/packages/nc-gui/components/project/spreadsheet/components/extras.vue b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
index 4cb7cc0102..b4a8b69b7d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/extras.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/extras.vue
@@ -32,19 +32,19 @@
         >
           <v-list-item>
             <div class="d-flex justify-space-between d-100 pr-2">
-              <v-icon v-t="['community:discord']" class="mr-1" size="22" :color="textColors[0]" @click="open('https://discord.gg/5RgZmkW')">
+              <v-icon v-t="['e:community:discord']" class="mr-1" size="22" :color="textColors[0]" @click="open('https://discord.gg/5RgZmkW')">
                 mdi-discord
               </v-icon>
-              <v-icon v-t="['community:discourse']" class="mr-1 discourse" size="22" :color="textColors[0]" @click="open('https://community.nocodb.com/')">
+              <v-icon v-t="['e:community:discourse']" class="mr-1 discourse" size="22" :color="textColors[0]" @click="open('https://community.nocodb.com/')">
                 mdi-discourse
               </v-icon>
-              <v-icon v-t="['community:discord']" class="mr-1" size="22" color="#ff4600" @click="open('https://www.reddit.com/r/NocoDB/')">
+              <v-icon v-t="['e:community:reddit']" class="mr-1" size="22" color="#ff4600" @click="open('https://www.reddit.com/r/NocoDB/')">
                 mdi-reddit
               </v-icon>
-              <v-icon v-t="['community:twitter']" class="mr-1" size="22" :color="textColors[1]" @click="open('https://twitter.com/NocoDB')">
+              <v-icon v-t="['e:community:twitter']" class="mr-1" size="22" :color="textColors[1]" @click="open('https://twitter.com/NocoDB')">
                 mdi-twitter
               </v-icon>
-              <v-icon v-t="['community:book-demo']" class="mr-1" size="22" :color="textColors[3]" @click="open('https://calendly.com/nocodb-meeting')">
+              <v-icon v-t="['e:community:book-demo']" class="mr-1" size="22" :color="textColors[3]" @click="open('https://calendly.com/nocodb-meeting')">
                 mdi-calendar-month
               </v-icon>
             </div>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
index aac906b6c7..ff4840656d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/fieldsMenu.vue
@@ -1,30 +1,23 @@
 <template>
   <v-menu offset-y>
     <template #activator="{ on }">
-      <v-badge
-        :value="isAnyFieldHidden"
-        color="primary"
-        dot
-        overlap
-      >
+      <v-badge :value="isAnyFieldHidden" color="primary" dot overlap>
         <v-btn
-          v-t="['fields:trigger']"
+          v-t="['c:fields']"
           class="nc-fields-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           outlined
           small
           text
-          :class=" { 'primary lighten-5 grey--text text--darken-3' : isAnyFieldHidden}"
+          :class="{
+            'primary lighten-5 grey--text text--darken-3': isAnyFieldHidden,
+          }"
           v-on="on"
         >
-          <v-icon small class="mr-1" color="#777">
-            mdi-eye-off-outline
-          </v-icon>
+          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon>
           <!-- Fields -->
-          {{ $t('objects.fields') }}
-          <v-icon small color="#777">
-            mdi-menu-down
-          </v-icon>
+          {{ $t("objects.fields") }}
+          <v-icon small color="#777"> mdi-menu-down </v-icon>
         </v-btn>
       </v-badge>
     </template>
@@ -45,9 +38,7 @@
             @click.stop
           >
             <template #prepend-inner>
-              <v-icon small class="field-icon">
-                mdi-image
-              </v-icon>
+              <v-icon small class="field-icon"> mdi-image </v-icon>
             </template>
           </v-select>
         </div>
@@ -69,19 +60,14 @@
             @click.stop
           >
             <template #prepend-inner>
-              <v-icon small class="field-icon">
-                mdi-select-group
-              </v-icon>
+              <v-icon small class="field-icon"> mdi-select-group </v-icon>
             </template>
           </v-select>
         </div>
         <v-divider />
       </template>
 
-      <v-list-item
-        dense
-        class=""
-      >
+      <v-list-item dense class="">
         <v-text-field
           v-model="fieldFilter"
           dense
@@ -101,16 +87,21 @@
       </v-list-item>
       <draggable
         v-model="fields"
-        @start="drag=true"
-        @end="drag=false"
+        @start="drag = true"
+        @end="drag = false"
         @change="onMove($event)"
       >
-        <template
-          v-for="(field,i) in fields"
-        >
+        <template v-for="(field, i) in fields">
           <v-list-item
-            v-show="(!fieldFilter || (field.title||'').toLowerCase().includes(fieldFilter.toLowerCase()))
-              && !(!showSystemFieldsLoc && systemColumnsIds.includes(field.fk_column_id))
+            v-show="
+              (!fieldFilter ||
+                (field.title || '')
+                  .toLowerCase()
+                  .includes(fieldFilter.toLowerCase())) &&
+              !(
+                !showSystemFieldsLoc &&
+                systemColumnsIds.includes(field.fk_column_id)
+              )
             "
             :key="field.id"
             dense
@@ -138,9 +129,7 @@
           </v-list-item>
         </template>
       </draggable>
-      <v-divider
-        class="my-2"
-      />
+      <v-divider class="my-2" />
 
       <v-list-item v-if="!isPublic" dense>
         <v-checkbox
@@ -153,7 +142,7 @@
           <template #label>
             <span class="caption">
               <!-- Show System Fields -->
-              {{ $t('activity.showSystemFields') }}
+              {{ $t("activity.showSystemFields") }}
             </span>
           </template>
         </v-checkbox>
@@ -161,11 +150,11 @@
       <v-list-item dense class="mt-2 list-btn mb-3">
         <v-btn small class="elevation-0 grey--text" @click.stop="showAll">
           <!-- Show All -->
-          {{ $t('general.showAll') }}
+          {{ $t("general.showAll") }}
         </v-btn>
         <v-btn small class="elevation-0 grey--text" @click.stop="hideAll">
           <!-- Hide All -->
-          {{ $t('general.hideAll') }}
+          {{ $t("general.hideAll") }}
         </v-btn>
       </v-list-item>
     </v-list>
@@ -173,13 +162,13 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import { getSystemColumnsIds } from 'nocodb-sdk'
+import draggable from "vuedraggable";
+import { getSystemColumnsIds } from "nocodb-sdk";
 
 export default {
-  name: 'FieldsMenu',
+  name: "FieldsMenu",
   components: {
-    draggable
+    draggable,
   },
   props: {
     coverImageField: String,
@@ -193,208 +182,278 @@ export default {
     fieldList: [Array, Object],
     showSystemFields: {
       type: [Boolean, Number],
-      default: false
+      default: false,
     },
     isLocked: Boolean,
     isPublic: Boolean,
-    viewId: String
+    viewId: String,
   },
   data: () => ({
     fields: [],
-    fieldFilter: '',
+    fieldFilter: "",
     showFields: {},
-    fieldsOrderLoc: []
+    fieldsOrderLoc: [],
   }),
   computed: {
     systemColumnsIds() {
-      return getSystemColumnsIds(this.meta && this.meta.columns)
+      return getSystemColumnsIds(this.meta && this.meta.columns);
     },
     attachmentFields() {
-      return [...(this.meta && this.meta.columns ? this.meta.columns.filter(f => f.uidt === 'Attachment') : []), {
-        alias: 'None',
-        id: null
-      }]
+      return [
+        ...(this.meta && this.meta.columns
+          ? this.meta.columns.filter((f) => f.uidt === "Attachment")
+          : []),
+        {
+          alias: "None",
+          id: null,
+        },
+      ];
     },
     singleSelectFields() {
-      return [...(this.meta && this.meta.columns ? this.meta.columns.filter(f => f.uidt === 'SingleSelect') : []), {
-        alias: 'None',
-        id: null
-      }]
+      return [
+        ...(this.meta && this.meta.columns
+          ? this.meta.columns.filter((f) => f.uidt === "SingleSelect")
+          : []),
+        {
+          alias: "None",
+          id: null,
+        },
+      ];
     },
     coverImageFieldLoc: {
       get() {
-        return this.coverImageField
+        return this.coverImageField;
       },
       set(val) {
-        this.$emit('update:coverImageField', val)
-      }
+        this.$emit("update:coverImageField", val);
+      },
     },
     groupingFieldLoc: {
       get() {
-        return this.groupingField
+        return this.groupingField;
       },
       set(val) {
-        this.$emit('update:groupingField', val)
-      }
+        this.$emit("update:groupingField", val);
+      },
     },
     columnMeta() {
       return this.meta && this.meta.columns
-        ? this.meta.columns.reduce((o, c) => ({
-          ...o,
-          [c.title]: c
-        }), {})
-        : {}
+        ? this.meta.columns.reduce(
+            (o, c) => ({
+              ...o,
+              [c.title]: c,
+            }),
+            {}
+          )
+        : {};
     },
 
     isAnyFieldHidden() {
-      return this.fields.some(f => !(!this.showSystemFieldsLoc && this.systemColumnsIds.includes(f.fk_column_id)) &&
-        !f.show
-      )// Object.values(this.showFields).some(v => !v)
+      return this.fields.some(
+        (f) =>
+          !(
+            !this.showSystemFieldsLoc &&
+            this.systemColumnsIds.includes(f.fk_column_id)
+          ) && !f.show
+      ); // Object.values(this.showFields).some(v => !v)
     },
     showSystemFieldsLoc: {
       get() {
-        return this.showSystemFields
+        return this.showSystemFields;
       },
       set(v) {
-        this.$emit('update:showSystemFields', v)
-        this.showFields = this.fields.reduce((o, c) => ({ [c.title]: c.show, ...o }), {})
-        this.$emit('update:fieldsOrder', this.fields.map(c => c.title))
+        this.$emit("update:showSystemFields", v);
+        this.showFields = this.fields.reduce(
+          (o, c) => ({ [c.title]: c.show, ...o }),
+          {}
+        );
+        this.$emit(
+          "update:fieldsOrder",
+          this.fields.map((c) => c.title)
+        );
 
-        this.$tele.emit('fields:system-field-checkbox')
-      }
-    }
+        this.$e("a:fields:system-fields");
+      },
+    },
   },
   watch: {
     async viewId(v) {
       if (v) {
-        await this.loadFields()
+        await this.loadFields();
       }
     },
     fieldList(f) {
-      this.fieldsOrderLoc = [...f]
+      this.fieldsOrderLoc = [...f];
     },
     showFields: {
       handler(v) {
         this.$nextTick(() => {
-          this.$emit('input', v)
-        })
+          this.$emit("input", v);
+        });
       },
-      deep: true
+      deep: true,
     },
     value(v) {
-      this.showFields = v || []
+      this.showFields = v || [];
     },
     fieldsOrder(n, o) {
       if ((n && n.join()) !== (o && o.join())) {
-        this.fieldsOrderLoc = n
+        this.fieldsOrderLoc = n;
       }
 
-      this.fieldsOrderLoc = n && n.length ? n : [...this.fieldList]
+      this.fieldsOrderLoc = n && n.length ? n : [...this.fieldList];
     },
     fieldsOrderLoc: {
       handler(n, o) {
         if ((n && n.join()) !== (o && o.join())) {
-          this.$emit('update:fieldsOrder', n)
+          this.$emit("update:fieldsOrder", n);
         }
       },
-      deep: true
-    }
+      deep: true,
+    },
   },
   created() {
-    this.loadFields()
-    this.showFields = this.value
-    this.fieldsOrderLoc = this.fieldsOrder && this.fieldsOrder.length ? this.fieldsOrder : [...this.fieldList]
+    this.loadFields();
+    this.showFields = this.value;
+    this.fieldsOrderLoc =
+      this.fieldsOrder && this.fieldsOrder.length
+        ? this.fieldsOrder
+        : [...this.fieldList];
   },
   methods: {
     async loadFields() {
-      let fields = []
-      let order = 1
+      let fields = [];
+      let order = 1;
       if (this.viewId) {
-        const data = await this.$api.dbViewColumn.list(this.viewId)
-        const fieldById = data.reduce((o, f) => ({
-          ...o,
-          [f.fk_column_id]: f
-        }), {})
-        fields = this.meta.columns.map(c => ({
-          title: c.title,
-          fk_column_id: c.id,
-          ...(fieldById[c.id] ? fieldById[c.id] : {}),
-          order: (fieldById[c.id] && fieldById[c.id].order) || order++
-        })
-        ).sort((a, b) => a.order - b.order)
-      } else if (this.isPublic) {
+        const data = await this.$api.dbViewColumn.list(this.viewId);
+        const fieldById = data.reduce(
+          (o, f) => ({
+            ...o,
+            [f.fk_column_id]: f,
+          }),
+          {}
+        );
         fields = this.meta.columns
+          .map((c) => ({
+            title: c.title,
+            fk_column_id: c.id,
+            ...(fieldById[c.id] ? fieldById[c.id] : {}),
+            order: (fieldById[c.id] && fieldById[c.id].order) || order++,
+          }))
+          .sort((a, b) => a.order - b.order);
+      } else if (this.isPublic) {
+        fields = this.meta.columns;
       }
 
-      this.fields = fields
+      this.fields = fields;
 
-      this.$emit('input', this.fields.reduce((o, c) => ({
-        ...o,
-        [c.title]: c.show
-      }), {}))
-      this.$emit('update:fieldsOrder', this.fields.map(c => c.title))
+      this.$emit(
+        "input",
+        this.fields.reduce(
+          (o, c) => ({
+            ...o,
+            [c.title]: c.show,
+          }),
+          {}
+        )
+      );
+      this.$emit(
+        "update:fieldsOrder",
+        this.fields.map((c) => c.title)
+      );
     },
     async saveOrUpdate(field, i) {
-      if (!this.isPublic && this._isUIAllowed('fieldsSync')) {
+      if (!this.isPublic && this._isUIAllowed("fieldsSync")) {
         if (field.id) {
-          await this.$api.dbViewColumn.update(this.viewId, field.id, field)
+          await this.$api.dbViewColumn.update(this.viewId, field.id, field);
         } else {
-          this.fields[i] = (await this.$api.dbViewColumn.create(this.viewId, field))
+          this.fields[i] = await this.$api.dbViewColumn.create(
+            this.viewId,
+            field
+          );
         }
       }
-      this.$emit('updated')
-      this.$emit('input', this.fields.reduce((o, c) => ({
-        ...o,
-        [c.title]: c.show
-      }), {}))
-      this.$emit('update:fieldsOrder', this.fields.map(c => c.title))
+      this.$emit("updated");
+      this.$emit(
+        "input",
+        this.fields.reduce(
+          (o, c) => ({
+            ...o,
+            [c.title]: c.show,
+          }),
+          {}
+        )
+      );
+      this.$emit(
+        "update:fieldsOrder",
+        this.fields.map((c) => c.title)
+      );
 
-      this.$tele.emit('fields:show-hide-checkbox')
+      this.$e("a:fields:show-hide");
     },
     async showAll() {
       if (!this.isPublic) {
-        await this.$api.dbView.showAllColumn(this.viewId)
+        await this.$api.dbView.showAllColumn(this.viewId);
       }
       for (const f of this.fields) {
-        f.show = true
+        f.show = true;
       }
-      this.$emit('updated')
+      this.$emit("updated");
 
       // eslint-disable-next-line no-return-assign,no-sequences
-      this.showFields = (this.fieldsOrderLoc || Object.keys(this.showFields)).reduce((o, k) => (o[k] = true, o), {})
+      this.showFields = (
+        this.fieldsOrderLoc || Object.keys(this.showFields)
+      ).reduce((o, k) => ((o[k] = true), o), {});
 
-      this.$tele.emit('fields:show-all')
+      this.$e("a:fields:show-all");
     },
     async hideAll() {
       if (!this.isPublic) {
-        await this.$api.dbView.hideAllColumn(this.viewId)
+        await this.$api.dbView.hideAllColumn(this.viewId);
       }
       for (const f of this.fields) {
-        f.show = false
+        f.show = false;
       }
-      this.$emit('updated')
+      this.$emit("updated");
 
       this.$nextTick(() => {
-        this.showFields = (this.fieldsOrderLoc || Object.keys(this.showFields)).reduce((o, k) => (o[k] = false, o), {})
-      })
+        this.showFields = (
+          this.fieldsOrderLoc || Object.keys(this.showFields)
+        ).reduce((o, k) => ((o[k] = false), o), {});
+      });
 
-      this.$tele.emit('fields:hide-all')
+      this.$e("a:fields:hide-all");
     },
     onMove(event) {
       if (this.fields.length - 1 === event.moved.newIndex) {
-        this.$set(this.fields[event.moved.newIndex], 'order', this.fields[event.moved.newIndex - 1].order + 1)
+        this.$set(
+          this.fields[event.moved.newIndex],
+          "order",
+          this.fields[event.moved.newIndex - 1].order + 1
+        );
       } else if (event.moved.newIndex === 0) {
-        this.$set(this.fields[event.moved.newIndex], 'order', this.fields[1].order / 2)
+        this.$set(
+          this.fields[event.moved.newIndex],
+          "order",
+          this.fields[1].order / 2
+        );
       } else {
-        this.$set(this.fields[event.moved.newIndex], 'order', (
-          this.fields[event.moved.newIndex - 1].order + this.fields[event.moved.newIndex + 1].order) / 2
-        )
+        this.$set(
+          this.fields[event.moved.newIndex],
+          "order",
+          (this.fields[event.moved.newIndex - 1].order +
+            this.fields[event.moved.newIndex + 1].order) /
+            2
+        );
       }
-      this.saveOrUpdate(this.fields[event.moved.newIndex], event.moved.newIndex)
-      this.$tele.emit('fields:drag')
-    }
-  }
-}
+      this.saveOrUpdate(
+        this.fields[event.moved.newIndex],
+        event.moved.newIndex
+      );
+      this.$e("a:fields:reorder");
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -429,5 +488,4 @@ export default {
 .drag-icon {
   cursor: all-scroll; /*cursor: grab;*/
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
index 199a09283d..c952bcde51 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/headerCell.vue
@@ -72,7 +72,7 @@
           </span>
         </v-list-item>
         <v-list-item
-          v-t="['column:set-as-primary']"
+          v-t="['a:column:set-primary']"
           dense
           @click="setAsPrimaryValue"
         >
@@ -143,7 +143,6 @@
         <v-card-actions class="d-flex pa-4">
           <v-spacer />
           <v-btn
-            v-t="['column:delete:cancel']"
             small
             @click="columnDeleteDialog = false"
           >
@@ -151,7 +150,7 @@
             {{ $t('general.cancel') }}
           </v-btn>
           <v-btn
-            v-t="['column:delete']"
+            v-t="['a:column:delete']"
             small
             color="error"
             @click="deleteColumn"
diff --git a/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
index 200cbcc5b1..bd6463e6dd 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/lockMenu.vue
@@ -1,10 +1,20 @@
 <template>
   <v-menu offset-y max-width="350">
-    <template #activator="{on}">
-      <v-icon v-if="value === 'locked'" small class="mx-1 nc-view-lock-menu" v-on="on">
+    <template #activator="{ on }">
+      <v-icon
+        v-if="value === 'locked'"
+        small
+        class="mx-1 nc-view-lock-menu"
+        v-on="on"
+      >
         mdi-lock-outline
       </v-icon>
-      <v-icon v-else-if="value === 'personal'" small class="mx-1 nc-view-lock-menu" v-on="on">
+      <v-icon
+        v-else-if="value === 'personal'"
+        small
+        class="mx-1 nc-view-lock-menu"
+        v-on="on"
+      >
         mdi-account
       </v-icon>
       <v-icon v-else small class="mx-1 nc-view-lock-menu" v-on="on">
@@ -12,7 +22,11 @@
       </v-icon>
     </template>
     <v-list maxc-width="350">
-      <v-list-item two-line class="pb-4" @click="changeLockType('collaborative')">
+      <v-list-item
+        two-line
+        class="pb-4"
+        @click="changeLockType('collaborative')"
+      >
         <v-list-item-icon class="mr-1 align-self-center">
           <v-icon v-if="!value || value === 'collaborative'" small>
             mdi-check-bold
@@ -26,51 +40,62 @@
             Collaborative view
           </v-list-item-title>
 
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-            Collaborators with edit permissions or higher can change the view configuration.
+          <v-list-item-subtitle
+            class="pt-2 pl- font-weight-light"
+            style="white-space: normal"
+          >
+            Collaborators with edit permissions or higher can change the view
+            configuration.
           </v-list-item-subtitle>
         </v-list-item-content>
       </v-list-item>
       <v-list-item two-line class="pb-4" @click="changeLockType('locked')">
         <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="value === 'locked'" small>
-            mdi-check-bold
-          </v-icon>
+          <v-icon v-if="value === 'locked'" small> mdi-check-bold </v-icon>
         </v-list-item-icon>
 
         <v-list-item-content class="pb-1">
           <v-list-item-title>
-            <v-icon small class="mt-n1" color="primary">
-              mdi-lock
-            </v-icon>
+            <v-icon small class="mt-n1" color="primary"> mdi-lock </v-icon>
             Locked View
           </v-list-item-title>
 
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
+          <v-list-item-subtitle
+            class="pt-2 pl- font-weight-light"
+            style="white-space: normal"
+          >
             No one can edit the view configuration until it is unlocked.
           </v-list-item-subtitle>
-          <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Locked view.</span>
+          <span class="caption mt-3"
+            ><v-icon class="mr-1 mt-n1" x-small color="#fcb401">
+              mdi-star</v-icon
+            >Locked view.</span
+          >
         </v-list-item-content>
       </v-list-item>
       <v-list-item three-line @click="changeLockType('personal')">
         <v-list-item-icon class="mr-1 align-self-center">
-          <v-icon v-if="value === 'personal'" small>
-            mdi-check-bold
-          </v-icon>
+          <v-icon v-if="value === 'personal'" small> mdi-check-bold </v-icon>
         </v-list-item-icon>
 
         <v-list-item-content>
           <v-list-item-title>
-            <v-icon small class="mt-n1" color="primary">
-              mdi-account
-            </v-icon>
+            <v-icon small class="mt-n1" color="primary"> mdi-account </v-icon>
             Personal view
           </v-list-item-title>
 
-          <v-list-item-subtitle class="pt-2 pl- font-weight-light" style="white-space: normal">
-            Only you can edit the view configuration. Other collaborators’ personal views are hidden by default.
+          <v-list-item-subtitle
+            class="pt-2 pl- font-weight-light"
+            style="white-space: normal"
+          >
+            Only you can edit the view configuration. Other collaborators’
+            personal views are hidden by default.
           </v-list-item-subtitle>
-          <span class="caption mt-3"><v-icon class="mr-1 mt-n1" x-small color="#fcb401"> mdi-star</v-icon>Coming soon.</span>
+          <span class="caption mt-3"
+            ><v-icon class="mr-1 mt-n1" x-small color="#fcb401">
+              mdi-star</v-icon
+            >Coming soon.</span
+          >
         </v-list-item-content>
       </v-list-item>
     </v-list>
@@ -79,24 +104,20 @@
 
 <script>
 export default {
-  name: 'LockMenu',
-  props: ['value'],
-  data: () => ({
-
-  }),
+  name: "LockMenu",
+  props: ["value"],
+  data: () => ({}),
   methods: {
     changeLockType(type) {
-      this.$tele.emit(`lockmenu:${type}`)
-      if (type === 'personal') {
-        return this.$toast.info('Coming soon').goAway(3000)
+      this.$e("a:grid:lockmenu", { lockType: type });
+      if (type === "personal") {
+        return this.$toast.info("Coming soon").goAway(3000);
       }
-      this.$emit('input', type)
-      this.$toast.success(`Successfully Switched to ${type} view`).goAway(3000)
-    }
-  }
-}
+      this.$emit("input", type);
+      this.$toast.success(`Successfully Switched to ${type} view`).goAway(3000);
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue b/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
index b8be60b14e..46441815ff 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/moreActions.vue
@@ -7,7 +7,7 @@
     >
       <template #activator="{on}">
         <v-btn
-          v-t="['actions:trigger']"
+          v-t="['c:actions']"
           outlined
           class="nc-actions-menu-btn caption px-2 nc-remove-border font-weight-medium"
           small
@@ -28,7 +28,7 @@
 
       <v-list dense>
         <v-list-item
-          v-t="['actions:download-csv']"
+          v-t="['a:actions:download-csv']"
           dense
           @click="exportCsv"
         >
@@ -44,7 +44,7 @@
         </v-list-item>
         <v-list-item
           v-if="_isUIAllowed('csvImport') && !isView"
-          v-t="['actions:upload-csv']"
+          v-t="['a:actions:upload-csv']"
           dense
           @click="importModal = true"
         >
@@ -64,7 +64,7 @@
         </v-list-item>
         <v-list-item
           v-if="_isUIAllowed('csvImport') && !isView"
-          v-t="['actions:shared-view-list']"
+          v-t="['a:actions:shared-view-list']"
           dense
           @click="$emit('showAdditionalFeatOverlay', 'shared-views')"
         >
@@ -80,7 +80,7 @@
         </v-list-item>
         <v-list-item
           v-if="_isUIAllowed('csvImport') && !isView"
-          v-t="['actions:webhook:trigger']"
+          v-t="['c:actions:webhook']"
           dense
           @click="$emit('webhook')"
         >
@@ -309,10 +309,10 @@ export default {
             return res
           }, {}))
           await this.$api.dbTableRow.bulkCreate(
-              'noco', 
-              this.projectName,
-              this.meta.title,
-              batchData
+            'noco',
+            this.projectName,
+            this.meta.title,
+            batchData
           )
           progress += batchData.length
           this.$store.commit('loader/MutMessage', `Importing data : ${progress}/${data.length}`)
diff --git a/packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
index 0b217ff5d7..2ec0a30f56 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/shareViewMenu.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <v-btn
-      v-t="['share-view:trigger']"
       v-if="_isUIAllowed('add-user')"
+      v-t="['c:view:share']"
       outlined
       class="nc-btn-share-view caption px-2 nc-remove-border font-weight-medium"
       small
diff --git a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
index f4154558c6..2286d30867 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/sortListMenu.vue
@@ -1,37 +1,36 @@
 <template>
   <v-menu offset-y>
     <template #activator="{ on }">
-      <v-badge
-        :value="sortList && sortList.length"
-        color="primary"
-        dot
-        overlap
-      >
+      <v-badge :value="sortList && sortList.length" color="primary" dot overlap>
         <v-btn
-          v-t="['sort:trigger']"
+          v-t="['c:sort']"
           class="nc-sort-menu-btn px-2 nc-remove-border"
           :disabled="isLocked"
           small
           text
           outlined
-          :class=" { 'primary lighten-5 grey--text text--darken-3' : sortList && sortList.length}"
+          :class="{
+            'primary lighten-5 grey--text text--darken-3':
+              sortList && sortList.length,
+          }"
           v-on="on"
         >
-          <v-icon small class="mr-1" color="#777">
-            mdi-sort
-          </v-icon>
+          <v-icon small class="mr-1" color="#777"> mdi-sort </v-icon>
           <!-- Sort -->
-          {{ $t('activity.sort') }}
-          <v-icon small color="#777">
-            mdi-menu-down
-          </v-icon>
+          {{ $t("activity.sort") }}
+          <v-icon small color="#777"> mdi-menu-down </v-icon>
         </v-btn>
       </v-badge>
     </template>
     <div class="backgroundColor pa-2" style="min-width: 330px">
       <div class="sort-grid" @click.stop>
-        <template v-for="(sort,i) in sortList||[]" dense>
-          <v-icon :key="i + 'icon'" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)">
+        <template v-for="(sort, i) in sortList || []" dense>
+          <v-icon
+            :key="i + 'icon'"
+            class="nc-sort-item-remove-btn"
+            small
+            @click.stop="deleteSort(sort)"
+          >
             mdi-close-box
           </v-icon>
 
@@ -50,7 +49,7 @@
             @click.stop
             @change="saveOrUpdate(sort, i)"
           >
-            <template #item="{item}">
+            <template #item="{ item }">
               <span
                 :class="`caption font-weight-regular nc-sort-fld-${item.title}`"
               >
@@ -62,7 +61,10 @@
             :key="i + 'sel2'"
             v-model="sort.direction"
             class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-            :items="[{text : 'A -> Z', value: 'asc'},{text : 'Z -> A', value: 'desc'}]"
+            :items="[
+              { text: 'A -> Z', value: 'asc' },
+              { text: 'Z -> A', value: 'desc' },
+            ]"
             :label="$t('labels.operation')"
             solo
             flat
@@ -71,116 +73,125 @@
             @click.stop
             @change="saveOrUpdate(sort, i)"
           >
-            <template #item="{item}">
+            <template #item="{ item }">
               <span class="caption font-weight-regular">{{ item.text }}</span>
             </template>
           </v-select>
         </template>
       </div>
       <v-btn small class="elevation-0 grey--text my-3" @click.stop="addSort">
-        <v-icon small color="grey">
-          mdi-plus
-        </v-icon>
+        <v-icon small color="grey"> mdi-plus </v-icon>
         <!-- Add Sort Option -->
-        {{ $t('activity.addSort') }}
+        {{ $t("activity.addSort") }}
       </v-btn>
     </div>
   </v-menu>
 </template>
 
 <script>
-import { RelationTypes, UITypes } from 'nocodb-sdk'
+import { RelationTypes, UITypes } from "nocodb-sdk";
 
 export default {
-  name: 'SortListMenu',
+  name: "SortListMenu",
   props: {
     fieldList: Array,
     value: [Array, Object],
     isLocked: Boolean,
     meta: [Object],
     viewId: String,
-    shared: Boolean
+    shared: Boolean,
   },
   data: () => ({
-    sortList: []
+    sortList: [],
   }),
   computed: {
     columns() {
-      if (!this.meta || !this.meta.columns) { return [] }
-      return this.meta.columns.filter(c => !(c.uidt === UITypes.LinkToAnotherRecord && c.colOptions.type !== RelationTypes.BELONGS_TO))
-    }
+      if (!this.meta || !this.meta.columns) {
+        return [];
+      }
+      return this.meta.columns.filter(
+        (c) =>
+          !(
+            c.uidt === UITypes.LinkToAnotherRecord &&
+            c.colOptions.type !== RelationTypes.BELONGS_TO
+          )
+      );
+    },
   },
   watch: {
     value(v) {
-      this.sortList = v || []
+      this.sortList = v || [];
     },
     async viewId(v) {
       if (v) {
-        await this.loadSortList()
+        await this.loadSortList();
       }
-    }
+    },
   },
   async created() {
-    this.sortList = this.value || []
-    this.loadSortList()
+    this.sortList = this.value || [];
+    this.loadSortList();
   },
   methods: {
     addSort() {
       this.sortList.push({
         fk_column_id: null,
-        direction: 'asc'
-      })
-      this.sortList = this.sortList.slice()
-      this.$tele.emit(`sort:add:${this.sortList.length}`)
+        direction: "asc",
+      });
+      this.sortList = this.sortList.slice();
+      this.$e("a:sort:add", { length: this.sortList.length });
     },
     async loadSortList() {
-      if (!this.shared) { // && !this._isUIAllowed('sortSync')) {
-        let sortList = []
+      if (!this.shared) {
+        // && !this._isUIAllowed('sortSync')) {
+        let sortList = [];
 
         if (this.viewId) {
-          const data = await this.$api.dbTableSort.list(this.viewId)
-          sortList = data.sorts.list
+          const data = await this.$api.dbTableSort.list(this.viewId);
+          sortList = data.sorts.list;
         }
 
-        this.sortList = sortList
+        this.sortList = sortList;
       }
     },
     async saveOrUpdate(sort, i) {
-      if (!this.shared && this._isUIAllowed('sortSync')) {
+      if (!this.shared && this._isUIAllowed("sortSync")) {
         if (sort.id) {
-          await this.$api.dbTableSort.update(sort.id, sort)
+          await this.$api.dbTableSort.update(sort.id, sort);
         } else {
-          this.$set(this.sortList, i, (await this.$api.dbTableSort.create(this.viewId, sort)))
+          this.$set(
+            this.sortList,
+            i,
+            await this.$api.dbTableSort.create(this.viewId, sort)
+          );
         }
       } else {
-        this.$emit('input', this.sortList)
+        this.$emit("input", this.sortList);
       }
-      this.$emit('updated')
+      this.$emit("updated");
 
-      this.$tele.emit(`sort:dir:${sort.direction}`)
+      this.$e("a:sort:dir", { direction: sort.direction });
     },
     async deleteSort(sort, i) {
-      if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-        await this.$api.dbTableSort.delete(sort.id)
-        await this.loadSortList()
+      if (!this.shared && sort.id && this._isUIAllowed("sortSync")) {
+        await this.$api.dbTableSort.delete(sort.id);
+        await this.loadSortList();
       } else {
-        this.sortList.splice(i, 1)
-        this.$emit('input', this.sortList)
+        this.sortList.splice(i, 1);
+        this.$emit("input", this.sortList);
       }
-      this.$emit('updated')
-      this.$tele.emit('sort:delete')
-    }
-  }
-}
+      this.$emit("updated");
+      this.$e("a:sort:delete");
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 .sort-grid {
   display: grid;
-  grid-template-columns:22px auto 100px;
+  grid-template-columns: 22px auto 100px;
   column-gap: 6px;
   row-gap: 6px;
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
index a83074361c..6b4b97ada8 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/spreadsheetNavDrawer.vue
@@ -13,9 +13,15 @@
           <v-list v-if="views && views.length" dense>
             <v-list-item dense>
               <!-- Views -->
-              <span class="body-2 font-weight-medium">{{ $t('objects.views') }}</span>
+              <span class="body-2 font-weight-medium">{{
+                $t("objects.views")
+              }}</span>
             </v-list-item>
-            <v-list-item-group v-model="selectedViewIdLocal" mandatory color="primary">
+            <v-list-item-group
+              v-model="selectedViewIdLocal"
+              mandatory
+              color="primary"
+            >
               <draggable
                 :is="_isUIAllowed('viewlist-drag-n-drop') ? 'draggable' : 'div'"
                 v-model="viewsList"
@@ -23,15 +29,20 @@
                 v-bind="dragOptions"
                 @change="onMove($event)"
               >
-                <transition-group type="transition" :name="!drag ? 'flip-list' : null">
+                <transition-group
+                  type="transition"
+                  :name="!drag ? 'flip-list' : null"
+                >
                   <v-list-item
                     v-for="(view, i) in viewsList"
                     :key="view.id"
-                    v-t="['view:open']"
+                    v-t="['a:view:open', { view: view.type }]"
                     dense
                     :value="view.id"
                     active-class="x-active--text"
-                    :class="`body-2  view nc-view-item nc-draggable-child nc-${viewTypeAlias[view.type]}-view-item`"
+                    :class="`body-2  view nc-view-item nc-draggable-child nc-${
+                      viewTypeAlias[view.type]
+                    }-view-item`"
                     @click="$emit('rerender')"
                   >
                     <v-icon
@@ -50,9 +61,7 @@
                       >
                         {{ viewIcons[view.type].icon }}
                       </v-icon>
-                      <v-icon v-else color="primary" small>
-                        mdi-table
-                      </v-icon>
+                      <v-icon v-else color="primary" small> mdi-table </v-icon>
                     </v-list-item-icon>
                     <v-list-item-title>
                       <v-tooltip bottom>
@@ -68,11 +77,11 @@
                               @click.stop
                               @keydown.enter.stop="updateViewName(view, i)"
                               @blur="updateViewName(view, i)"
-                            >
-                            <template
-                              v-else
-                            >
-                              <span v-on="on">{{ view.alias || view.title }}</span>
+                            />
+                            <template v-else>
+                              <span v-on="on">{{
+                                view.alias || view.title
+                              }}</span>
                             </template>
                           </div>
                         </template>
@@ -127,7 +136,9 @@
               </draggable>
             </v-list-item-group>
           </v-list>
-          <template v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')">
+          <template
+            v-if="hideViews && _isUIAllowed('virtualViewsCreateOrEdit')"
+          >
             <v-divider class="advance-menu-divider" />
 
             <v-list
@@ -138,8 +149,11 @@
             >
               <v-list-item dense>
                 <!-- Create a View -->
-                <span class="body-2 font-weight-medium" @dblclick="enableDummyFeat = true">
-                  {{ $t('activity.createView') }}
+                <span
+                  class="body-2 font-weight-medium"
+                  @dblclick="enableDummyFeat = true"
+                >
+                  {{ $t("activity.createView") }}
                 </span>
                 <v-tooltip top>
                   <template #activator="{ on }">
@@ -156,32 +170,33 @@
                   </template>
                   <!-- Only visible to Creator -->
                   <span class="caption">
-                    {{ $t('msg.info.onlyCreator') }}
+                    {{ $t("msg.info.onlyCreator") }}
                   </span>
                 </v-tooltip>
               </v-list-item>
               <v-tooltip bottom>
                 <template #activator="{ on }">
-                  <v-list-item dense class="body-2  nc-create-grid-view" v-on="on" @click="openCreateViewDlg(viewTypes.GRID)">
+                  <v-list-item
+                    dense
+                    class="body-2 nc-create-grid-view"
+                    v-on="on"
+                    @click="openCreateViewDlg(viewTypes.GRID)"
+                  >
                     <v-list-item-icon class="mr-n1">
-                      <v-icon color="blue" x-small>
-                        mdi-grid-large
-                      </v-icon>
+                      <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('objects.viewType.grid') }}
+                        {{ $t("objects.viewType.grid") }}
                       </span>
                     </v-list-item-title>
                     <v-spacer />
-                    <v-icon class="mr-1" small>
-                      mdi-plus
-                    </v-icon>
+                    <v-icon class="mr-1" small> mdi-plus </v-icon>
                   </v-list-item>
                 </template>
                 <!-- Add Grid View -->
-                {{ $t('msg.info.addView.grid') }}
+                {{ $t("msg.info.addView.grid") }}
               </v-tooltip>
               <v-tooltip bottom>
                 <template #activator="{ on }">
@@ -192,30 +207,24 @@
                     @click="openCreateViewDlg(viewTypes.GALLERY)"
                   >
                     <v-list-item-icon class="mr-n1">
-                      <v-icon color="orange" x-small>
-                        mdi-camera-image
-                      </v-icon>
+                      <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('objects.viewType.gallery') }}
+                        {{ $t("objects.viewType.gallery") }}
                       </span>
                     </v-list-item-title>
 
                     <v-spacer />
-                    <v-icon class="mr-1" small>
-                      mdi-plus
-                    </v-icon>
+                    <v-icon class="mr-1" small> mdi-plus </v-icon>
                   </v-list-item>
                 </template>
                 <!-- Add Gallery View -->
-                {{ $t('msg.info.addView.gallery') }}
+                {{ $t("msg.info.addView.gallery") }}
               </v-tooltip>
 
-              <v-tooltip
-                bottom
-              >
+              <v-tooltip bottom>
                 <template #activator="{ on }">
                   <v-list-item
                     v-if="!isView"
@@ -225,7 +234,11 @@
                     @click="openCreateViewDlg(viewTypes.FORM)"
                   >
                     <v-list-item-icon class="mr-n1">
-                      <v-icon x-small :color="viewIcons[viewTypes.FORM].color" class="mt-n1">
+                      <v-icon
+                        x-small
+                        :color="viewIcons[viewTypes.FORM].color"
+                        class="mt-n1"
+                      >
                         mdi-form-select
                       </v-icon>
                     </v-list-item-icon>
@@ -233,18 +246,16 @@
                       <span class="font-weight-regular">
                         <!-- Form -->
 
-                        {{ $t('objects.viewType.form') }}
+                        {{ $t("objects.viewType.form") }}
                       </span>
                     </v-list-item-title>
 
                     <v-spacer />
-                    <v-icon class="mr-1" small>
-                      mdi-plus
-                    </v-icon>
+                    <v-icon class="mr-1" small> mdi-plus </v-icon>
                   </v-list-item>
                 </template>
                 <!-- Add Form View -->
-                {{ $t('msg.info.addView.form') }}
+                {{ $t("msg.info.addView.form") }}
               </v-tooltip>
             </v-list>
           </template>
@@ -254,11 +265,7 @@
           v-if="time - $store.state.windows.miniSponsorCard > 15 * 60 * 1000"
           class="pa-2 sponsor-wrapper"
         >
-          <v-icon
-            small
-            class="close-icon"
-            @click="hideMiniSponsorCard"
-          >
+          <v-icon small class="close-icon" @click="hideMiniSponsorCard">
             mdi-close-circle-outline
           </v-icon>
 
@@ -396,45 +403,51 @@
         <v-container @click.stop>
           <h3 class="title mb-3">
             <!-- This view is shared via a private link -->
-            {{ $t('msg.info.privateLink') }}
+            {{ $t("msg.info.privateLink") }}
           </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"
+          >
             {{ sharedViewUrl }}
             <v-spacer />
             <a
-              v-t="['share-view:open-url']"
+              v-t="['c:view:share:open-url']"
               :href="`${sharedViewUrl}`"
               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"
-            >
+            <v-icon small class="pointer" @click="copyShareUrlToClipboard">
               mdi-content-copy
             </v-icon>
           </div>
 
-          <v-switch v-model="passwordProtect" dense @change="onPasswordProtectChange">
+          <v-switch
+            v-model="passwordProtect"
+            dense
+            @change="onPasswordProtectChange"
+          >
             <template #label>
               <!-- Restrict access with a password -->
               <span v-show="!passwordProtect" class="caption">
-                {{ $t('msg.info.beforeEnablePwd') }}
+                {{ $t("msg.info.beforeEnablePwd") }}
               </span>
               <!-- Access is password restricted -->
               <span v-show="passwordProtect" class="caption">
-                {{ $t('msg.info.afterEnablePwd') }}
+                {{ $t("msg.info.afterEnablePwd") }}
               </span>
             </template>
           </v-switch>
 
-          <div v-if="passwordProtect" class="d-flex flex-column align-center justify-center">
+          <div
+            v-if="passwordProtect"
+            class="d-flex flex-column align-center justify-center"
+          >
             <v-text-field
               v-model="shareLink.password"
               autocomplete="new-password"
@@ -449,14 +462,22 @@
               flat
             >
               <template #append>
-                <v-icon small @click="showShareLinkPassword = !showShareLinkPassword">
-                  {{ showShareLinkPassword ? 'visibility_off' : 'visibility' }}
+                <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">
+            <v-btn
+              color="primary"
+              class="caption"
+              small
+              @click="saveShareLinkPassword"
+            >
               <!-- Save password -->
-              {{ $t('placeholder.password.save') }}
+              {{ $t("placeholder.password.save") }}
             </v-btn>
           </div>
         </v-container>
@@ -466,16 +487,16 @@
 </template>
 
 <script>
-import draggable from 'vuedraggable'
-import { ViewTypes } from 'nocodb-sdk'
-import CreateViewDialog from '@/components/project/spreadsheet/dialog/createViewDialog'
-import Extras from '~/components/project/spreadsheet/components/extras'
-import viewIcons from '~/helpers/viewIcons'
-import { copyTextToClipboard } from '~/helpers/xutils'
-import SponsorMini from '~/components/sponsorMini'
+import draggable from "vuedraggable";
+import { ViewTypes } from "nocodb-sdk";
+import CreateViewDialog from "@/components/project/spreadsheet/dialog/createViewDialog";
+import Extras from "~/components/project/spreadsheet/components/extras";
+import viewIcons from "~/helpers/viewIcons";
+import { copyTextToClipboard } from "~/helpers/xutils";
+import SponsorMini from "~/components/sponsorMini";
 
 export default {
-  name: 'SpreadsheetNavDrawer',
+  name: "SpreadsheetNavDrawer",
   components: { SponsorMini, Extras, CreateViewDialog, draggable },
   props: {
     extraViewParams: Object,
@@ -485,7 +506,7 @@ export default {
     primaryValueColumn: [Number, String],
     toggleDrawer: {
       type: Boolean,
-      default: false
+      default: false,
     },
     nodes: Object,
     table: String,
@@ -499,7 +520,7 @@ export default {
     sortList: [Object, Array],
     load: {
       default: true,
-      type: Boolean
+      type: Boolean,
     },
     currentApiUrl: String,
     fieldsOrder: Array,
@@ -508,23 +529,23 @@ export default {
     // coverImageField: String,
     groupingField: String,
     // showSystemFields: Boolean,
-    views: Array
+    views: Array,
   },
   data: () => ({
     drag: false,
     dragOptions: {
       animation: 200,
-      group: 'description',
+      group: "description",
       disabled: false,
-      ghostClass: 'ghost'
+      ghostClass: "ghost",
     },
     time: Date.now(),
     sponsorMiniVisible: true,
     enableDummyFeat: false,
-    searchQueryVal: '',
+    searchQueryVal: "",
     showShareLinkPassword: false,
     passwordProtect: false,
-    sharedViewPassword: '',
+    sharedViewPassword: "",
     overAdvShieldIcon: false,
     overShieldIcon: false,
     viewIcons,
@@ -533,103 +554,121 @@ export default {
     showShareModel: false,
     showCreateView: false,
     loading: false,
-    viewTypeAlias: { [ViewTypes.GRID]: 'grid', [ViewTypes.FORM]: 'form', [ViewTypes.GALLERY]: 'gallery' }
+    viewTypeAlias: {
+      [ViewTypes.GRID]: "grid",
+      [ViewTypes.FORM]: "form",
+      [ViewTypes.GALLERY]: "gallery",
+    },
   }),
   computed: {
     viewsList: {
       set(v) {
-        this.$emit('update:views', v)
+        this.$emit("update:views", v);
       },
       get() {
-        return this.views
-      }
+        return this.views;
+      },
     },
     viewTypes() {
-      return ViewTypes
+      return ViewTypes;
     },
     newViewParams() {
       if (!this.showFields) {
-        return {}
+        return {};
       }
-      const showFields = { ...this.showFields }
+      const showFields = { ...this.showFields };
       Object.keys(showFields).forEach((k) => {
-        showFields[k] = true
-      })
-      return { showFields }
+        showFields[k] = true;
+      });
+      return { showFields };
     },
     selectedViewIdLocal: {
       set(val) {
-        const view = (this.views || []).find(v => v.id === val)
+        const view = (this.views || []).find((v) => v.id === val);
         this.$router.push({
           query: {
             ...this.$route.query,
-            view: view && (view.id)
-          }
-        })
+            view: view && view.id,
+          },
+        });
       },
       get() {
-        let id
+        let id;
         if (this.views) {
-          const view = this.views.find(v => v.id === this.$route.query.view)
-          id = (view && view.id) || ((this.views && this.views[0]) || {}).id
+          const view = this.views.find((v) => v.id === this.$route.query.view);
+          id = (view && view.id) || ((this.views && this.views[0]) || {}).id;
         }
-        return id
-      }
+        return id;
+      },
     },
     sharedViewUrl() {
-      let viewType
+      let viewType;
 
       switch (this.shareLink.type) {
         case this.viewTypes.FORM:
-          viewType = 'form'
-          break
+          viewType = "form";
+          break;
         case this.viewTypes.KANBAN:
-          viewType = 'kanban'
-          break
+          viewType = "kanban";
+          break;
         default:
-          viewType = 'view'
+          viewType = "view";
       }
-      return `${this.dashboardUrl}#/nc/${viewType}/${this.shareLink.uuid}`
-    }
+      return `${this.dashboardUrl}#/nc/${viewType}/${this.shareLink.uuid}`;
+    },
   },
   watch: {
     async load(v) {
       if (v) {
-        await this.loadViews()
-        this.onViewIdChange(this.selectedViewIdLocal)
+        await this.loadViews();
+        this.onViewIdChange(this.selectedViewIdLocal);
       }
     },
     selectedViewIdLocal(id) {
-      this.onViewIdChange(id)
-    }
+      this.onViewIdChange(id);
+    },
   },
   async created() {
     if (this.load) {
-      await this.loadViews()
+      await this.loadViews();
     }
-    this.onViewIdChange(this.selectedViewIdLocal)
+    this.onViewIdChange(this.selectedViewIdLocal);
   },
   methods: {
     async onMove(event) {
       if (this.viewsList.length - 1 === event.moved.newIndex) {
-        this.$set(this.viewsList[event.moved.newIndex], 'order', this.viewsList[event.moved.newIndex - 1].order + 1)
+        this.$set(
+          this.viewsList[event.moved.newIndex],
+          "order",
+          this.viewsList[event.moved.newIndex - 1].order + 1
+        );
       } else if (event.moved.newIndex === 0) {
-        this.$set(this.viewsList[event.moved.newIndex], 'order', this.viewsList[1].order / 2)
+        this.$set(
+          this.viewsList[event.moved.newIndex],
+          "order",
+          this.viewsList[1].order / 2
+        );
       } else {
-        this.$set(this.viewsList[event.moved.newIndex], 'order', (this.viewsList[event.moved.newIndex - 1].order + this.viewsList[event.moved.newIndex + 1].order) / 2)
+        this.$set(
+          this.viewsList[event.moved.newIndex],
+          "order",
+          (this.viewsList[event.moved.newIndex - 1].order +
+            this.viewsList[event.moved.newIndex + 1].order) /
+            2
+        );
       }
       await this.$api.dbView.update(this.viewsList[event.moved.newIndex].id, {
         title: this.viewsList[event.moved.newIndex].title,
-        order: this.viewsList[event.moved.newIndex].order
-      })
+        order: this.viewsList[event.moved.newIndex].order,
+      });
 
-      this.$tele.emit('view:drag')
+      this.$e("a:view:reorder");
     },
     onViewIdChange(id) {
-      const selectedView = this.views && this.views.find(v => v.id === id)
+      const selectedView = this.views && this.views.find((v) => v.id === id);
       // const queryParams = {}
-      this.$emit('update:selectedViewId', id)
-      this.$emit('update:selectedView', selectedView)
+      this.$emit("update:selectedViewId", id);
+      this.$emit("update:selectedView", selectedView);
       // if (selectedView.type === 'table') {
       //   return;
       // }
@@ -652,51 +691,52 @@ export default {
       // } else {
       //   this.$emit('mapFieldsAndShowFields')
       // }
-      this.$emit('loadTableData')
+      this.$emit("loadTableData");
     },
     hideMiniSponsorCard() {
-      this.$store.commit('windows/MutMiniSponsorCard', Date.now())
+      this.$store.commit("windows/MutMiniSponsorCard", Date.now());
     },
     openCreateViewDlg(type) {
-      const mainView = this.viewsList.find(v => v.type === 'table' || v.type === 'view')
+      const mainView = this.viewsList.find(
+        (v) => v.type === "table" || v.type === "view"
+      );
       try {
         this.copyViewRef = this.copyViewRef || {
           query_params: JSON.stringify({
             ...this.newViewParams,
-            fieldsOrder: JSON.parse(mainView.query_params).fieldsOrder
-          })
-        }
-      } catch {
-      }
-      this.createViewType = type
-      this.showCreateView = true
-      this.$tele.emit(`view:create:trigger:${type}`)
+            fieldsOrder: JSON.parse(mainView.query_params).fieldsOrder,
+          }),
+        };
+      } catch {}
+      this.createViewType = type;
+      this.showCreateView = true;
+      this.$e("c:view:create", { view: type });
     },
     isCentrallyAligned(col) {
       return ![
-        'SingleLineText',
-        'LongText',
-        'Attachment',
-        'Date',
-        'Time',
-        'Email',
-        'URL',
-        'DateTime',
-        'CreateTime',
-        'LastModifiedTime'
-      ].includes(col.uidt)
+        "SingleLineText",
+        "LongText",
+        "Attachment",
+        "Date",
+        "Time",
+        "Email",
+        "URL",
+        "DateTime",
+        "CreateTime",
+        "LastModifiedTime",
+      ].includes(col.uidt);
     },
     onPasswordProtectChange() {
       if (!this.passwordProtect) {
-        this.shareLink.password = null
-        this.saveShareLinkPassword()
+        this.shareLink.password = null;
+        this.saveShareLinkPassword();
       }
     },
     async saveShareLinkPassword() {
       try {
         await this.$api.dbViewShare.update(this.shareLink.id, {
-          password: this.shareLink.password
-        })
+          password: this.shareLink.password,
+        });
 
         // await this.$store.dispatch('sqlMgr/ActSqlOp', [
         //   { dbAlias: this.nodes.dbAlias },
@@ -706,12 +746,14 @@ export default {
         //     password: this.shareLink.password
         //   }
         // ])
-        this.$toast.success('Successfully updated').goAway(3000)
+        this.$toast.success("Successfully updated").goAway(3000);
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
       }
 
-      this.$tele.emit('share-view:enable-pwd')
+      this.$e("a:view:share:enable-pwd");
     },
     async loadViews() {
       // this.viewsList = await this.sqlOp(
@@ -727,8 +769,8 @@ export default {
 
       // this.viewsList = []
 
-      const views = (await this.$api.dbView.list(this.meta.id)).list
-      this.$emit('update:views', views)
+      const views = (await this.$api.dbView.list(this.meta.id)).list;
+      this.$emit("update:views", views);
     },
     // async onViewChange() {
     //   let query_params = {}
@@ -748,23 +790,27 @@ export default {
     //   this.$emit('loadTableData');
     // },
     copyapiUrlToClipboard() {
-      copyTextToClipboard(this.currentApiUrl)
-      this.clipboardSuccessHandler()
+      copyTextToClipboard(this.currentApiUrl);
+      this.clipboardSuccessHandler();
     },
     async updateViewName(view, index) {
       if (!view.edit) {
-        return
+        return;
       }
 
       // const oldTitle = view.title
 
-      this.$set(view, 'edit', false)
+      this.$set(view, "edit", false);
       if (view.title_temp === view.title) {
-        return
+        return;
       }
-      if (this.viewsList.some((v, i) => i !== index && (v.alias || v.title) === view.title_temp)) {
-        this.$toast.info('View name should be unique').goAway(3000)
-        return
+      if (
+        this.viewsList.some(
+          (v, i) => i !== index && (v.alias || v.title) === view.title_temp
+        )
+      ) {
+        this.$toast.info("View name should be unique").goAway(3000);
+        return;
       }
       try {
         // if (this.selectedViewIdLocal === view.id) {
@@ -775,35 +821,39 @@ export default {
         //     }
         //   })
         // }
-        this.$set(view, 'title', view.title_temp)
+        this.$set(view, "title", view.title_temp);
         await this.$api.dbView.update(view.id, {
           title: view.title,
-          order: view.order
-        })
-        this.$toast.success('View renamed successfully').goAway(3000)
+          order: view.order,
+        });
+        this.$toast.success("View renamed successfully").goAway(3000);
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
       }
     },
     showRenameTextBox(view, i) {
-      this.$set(view, 'edit', true)
-      this.$set(view, 'title_temp', view.title)
+      this.$set(view, "edit", true);
+      this.$set(view, "title_temp", view.title);
       this.$nextTick(() => {
-        const input = this.$refs[`input${i}`][0]
-        input.focus()
-        input.setSelectionRange(0, input.value.length)
-      })
-      this.$tele.emit(`view:rename:trigger:${view.type}`)
+        const input = this.$refs[`input${i}`][0];
+        input.focus();
+        input.setSelectionRange(0, input.value.length);
+      });
+      this.$e("c:view:rename", { view: view.type });
     },
     async deleteView(view) {
       try {
-        await this.$api.dbView.delete(view.id)
-        this.$toast.success('View deleted successfully').goAway(3000)
-        await this.loadViews()
+        await this.$api.dbView.delete(view.id);
+        this.$toast.success("View deleted successfully").goAway(3000);
+        await this.loadViews();
       } catch (e) {
-        this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+        this.$toast
+          .error(await this._extractSdkResponseErrorMsg(e))
+          .goAway(3000);
       }
-      this.$tele.emit(`view:delete:submit:${view.type}`)
+      this.$e("a:view:delete", { view: view.type });
     },
     async genShareLink() {
       // const sharedViewUrl = await this.$store.dispatch('sqlMgr/ActSqlOp', [
@@ -830,44 +880,44 @@ export default {
       //     password: this.sharedViewPassword
       //   }
       // ])
-      const shared = (await this.$api.dbViewShare.create(this.selectedViewId))
+      const shared = await this.$api.dbViewShare.create(this.selectedViewId);
 
       // todo: url
-      this.shareLink = shared
-      this.showShareModel = true
+      this.shareLink = shared;
+      this.showShareModel = true;
     },
     copyView(view, i) {
-      this.createViewType = view.type
-      this.showCreateView = true
-      this.copyViewRef = view
-      this.$tele.emit(`view:copy:trigger${view.type}`)
+      this.createViewType = view.type;
+      this.showCreateView = true;
+      this.copyViewRef = view;
+      this.$e("c:view:copy", { view: view.type });
     },
     async onViewCreate(viewMeta) {
-      this.copyViewRef = null
-      await this.loadViews()
-      this.selectedViewIdLocal = viewMeta.id
+      this.copyViewRef = null;
+      await this.loadViews();
+      this.selectedViewIdLocal = viewMeta.id;
       // await this.onViewChange();
-      this.$tele.emit(`view:create:submit:${viewMeta.type}`)
+      this.$e("a:view:create", { view: viewMeta.type });
     },
     clipboard(str) {
-      const el = document.createElement('textarea')
-      el.addEventListener('focusin', e => e.stopPropagation())
-      el.value = str
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
+      const el = document.createElement("textarea");
+      el.addEventListener("focusin", (e) => e.stopPropagation());
+      el.value = str;
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      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.sharedViewUrl)
-      this.clipboardSuccessHandler()
-      this.$tele.emit('share-view:copy-url')
-    }
-  }
-}
+      this.clipboard(this.sharedViewUrl);
+      this.clipboardSuccessHandler();
+      this.$e("c:view:share:copy-url");
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -933,7 +983,7 @@ export default {
   right: 0;
   background: var(--v-primary-base);
   opacity: 0.2;
-  content: '';
+  content: "";
   z-index: 1;
   pointer-events: none;
 }
@@ -961,7 +1011,7 @@ export default {
 
 .nc-draggable-child .nc-child-draggable-icon {
   opacity: 0;
-  transition: .3s opacity;
+  transition: 0.3s opacity;
   position: absolute;
   left: 0;
 }
@@ -984,5 +1034,4 @@ export default {
   opacity: 0.5;
   background: grey;
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
index 1f88b99743..6333a04a1a 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualHeaderCell.vue
@@ -106,7 +106,7 @@
             {{ $t('general.cancel') }}
           </v-btn>
           <v-btn
-            v-t="['vitual:column:delete']"
+            v-t="['a:column:delete']"
             small
             color="error"
             @click="deleteColumn"
diff --git a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
index ecced020c8..9b75a5a973 100644
--- a/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
+++ b/packages/nc-gui/components/project/spreadsheet/rowsXcDataTable.vue
@@ -6,23 +6,17 @@
       class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1"
       style="z-index: 7"
     >
-      <div v-if="!isForm" class="d-flex xc-border align-center search-box" style="min-width:156px">
+      <div
+        v-if="!isForm"
+        class="d-flex xc-border align-center search-box"
+        style="min-width: 156px"
+      >
         <v-menu bottom offset-y>
-          <template #activator="{on}">
+          <template #activator="{ on }">
             <div style="min-width: 56px" v-on="on">
-              <v-icon
-                class="ml-2"
-                small
-                color="grey"
-              >
-                mdi-magnify
-              </v-icon>
+              <v-icon class="ml-2" small color="grey"> mdi-magnify </v-icon>
 
-              <v-icon
-                color="grey"
-                class="pl-0 pa-1"
-                small
-              >
+              <v-icon color="grey" class="pl-0 pa-1" small>
                 mdi-menu-down
               </v-icon>
             </div>
@@ -38,31 +32,32 @@
           </v-list>
         </v-menu>
 
-        <v-divider
-          vertical
-        />
+        <v-divider vertical />
 
         <v-text-field
           v-model="searchQueryVal"
           autocomplete="new-password"
-          style="min-width: 100px ; width: 120px"
+          style="min-width: 100px; width: 120px"
           flat
           dense
           solo
           hide-details
-          :placeholder="searchField ? $t('placeholder.searchColumn', {searchField}) : 'Search all columns'"
+          :placeholder="
+            searchField
+              ? $t('placeholder.searchColumn', { searchField })
+              : 'Search all columns'
+          "
           class="elevation-0 pa-0 flex-grow-1 caption search-field"
           @keyup.enter="searchQuery = searchQueryVal"
           @blur="searchQuery = searchQueryVal"
         />
       </div>
 
-      <span
-        v-if="relationType && false"
-        class="caption grey--text"
-      >{{ refTable }}({{
-        relationPrimaryValue
-      }}) -> {{ relationType === 'hm' ? ' Has Many ' : ' Belongs To ' }} -> {{ table }}</span>
+      <span v-if="relationType && false" class="caption grey--text"
+        >{{ refTable }}({{ relationPrimaryValue }}) ->
+        {{ relationType === "hm" ? " Has Many " : " Belongs To " }} ->
+        {{ table }}</span
+      >
       <div class="d-inline-flex">
         <div>
           <fields
@@ -84,7 +79,7 @@
           />
 
           <sort-list
-            v-if="!isForm "
+            v-if="!isForm"
             v-model="sortList"
             :is-locked="isLocked"
             :meta="meta"
@@ -94,7 +89,7 @@
           <!--        v-model="sortList"-->
           <!--        :field-list="[...realFieldList, ...formulaFieldList]"-->
           <column-filter
-            v-if="!isForm "
+            v-if="!isForm"
             v-model="filters"
             :meta="meta"
             :is-locked="isLocked"
@@ -104,7 +99,10 @@
             @updated="loadTableData"
           />
         </div>
-        <share-view-menu v-if="!isGallery" @share="$refs.drawer && $refs.drawer.genShareLink()" />
+        <share-view-menu
+          v-if="!isGallery"
+          @share="$refs.drawer && $refs.drawer.genShareLink()"
+        />
 
         <MoreActions
           v-if="!isForm"
@@ -115,7 +113,7 @@
             fieldsOrder,
             fieldFilter,
             sortList,
-            showFields
+            showFields,
           }"
           :selected-view="selectedView"
           :is-view="isView"
@@ -124,37 +122,49 @@
           @reload="reload"
         />
       </div>
-      <v-spacer class="h-100" @click="clickCount = clickCount + 1; debug=clickCount >= 4" />
+      <v-spacer
+        class="h-100"
+        @click="
+          clickCount = clickCount + 1;
+          debug = clickCount >= 4;
+        "
+      />
 
       <template v-if="!isForm">
         <!-- Export Cache -->
         <v-tooltip v-if="debug" bottom>
-          <template #activator="{on}">
+          <template #activator="{ on }">
             <v-icon class="mr-3" small v-on="on" @click="exportCache">
               mdi-export
             </v-icon>
           </template>
-          <span class="caption"> Export Cache
-          </span>
+          <span class="caption"> Export Cache </span>
         </v-tooltip>
         <!-- Delete Cache -->
         <v-tooltip v-if="debug" bottom>
-          <template #activator="{on}">
+          <template #activator="{ on }">
             <v-icon class="mr-3" small v-on="on" @click="deleteCache">
               mdi-delete
             </v-icon>
           </template>
-          <span class="caption"> Delete Cache
-          </span>
+          <span class="caption"> Delete Cache </span>
         </v-tooltip>
         <debug-metas v-if="debug" class="mr-3" />
         <v-tooltip bottom>
-          <template #activator="{on}">
-            <v-icon v-if="!isPkAvail && !isForm" color="warning" small class="mr-3" v-on="on">
+          <template #activator="{ on }">
+            <v-icon
+              v-if="!isPkAvail && !isForm"
+              color="warning"
+              small
+              class="mr-3"
+              v-on="on"
+            >
               mdi-information-outline
             </v-icon>
           </template>
-          <span class="caption">          Update & Delete not allowed since the table doesn't have any primary key
+          <span class="caption">
+            Update & Delete not allowed since the table doesn't have any primary
+            key
           </span>
         </v-tooltip>
         <lock-menu v-if="_isUIAllowed('view-type')" v-model="lockType" />
@@ -201,12 +211,12 @@
 
         <!--          tooltip="Add new row"-->
         <x-icon
-          v-if="!isView &&isEditable && relationType !== 'bt'"
+          v-if="!isView && isEditable && relationType !== 'bt'"
           icon.class="nc-add-new-row-btn mx-1"
           :tooltip="$t('activity.addRow')"
           :disabled="isLocked"
           small
-          :color="['success','']"
+          :color="['success', '']"
           @click="clickAddNewIcon"
         >
           mdi-plus-outline
@@ -253,7 +263,7 @@
           icon.class="nc-table-delete-btn mx-1 mr-1"
           :disabled="isLocked"
           small
-          :color="['red',''] "
+          :color="['red', '']"
           :tooltip="$t('activity.deleteTable')"
           @click="checkAndDeleteTable"
         >
@@ -301,32 +311,31 @@
         outlined
         small
         text
-        :btn-class="{ 'primary lighten-5 nc-toggle-nav-drawer' : !toggleDrawer}"
-        @click="toggleDrawer = !toggleDrawer; toggleClick()"
+        :btn-class="{ 'primary lighten-5 nc-toggle-nav-drawer': !toggleDrawer }"
+        @click="
+          toggleDrawer = !toggleDrawer;
+          toggleClick();
+        "
       >
-        <v-icon
-          small
-          class="mx-0"
-          color="grey  darken-3"
-        >
-          {{ toggleDrawer ? 'mdi-door-closed' : 'mdi-door-open' }}
+        <v-icon small class="mx-0" color="grey  darken-3">
+          {{ toggleDrawer ? "mdi-door-closed" : "mdi-door-open" }}
         </v-icon>
       </x-btn>
     </v-toolbar>
     <div
       :class="`cell-height-${cellHeight}`"
-      style=" height:calc(100% - 32px);overflow:auto;transition: width 100ms "
+      style="height: calc(100% - 32px); overflow: auto; transition: width 100ms"
       class="d-flex"
     >
       <div class="flex-grow-1 h-100" style="overflow-y: auto">
         <div
           v-if="selectedViewId && selectedView"
           ref="table"
-          :style="{height:isForm ? '100%' : 'calc(100% - 36px)'}"
-          style="overflow: auto;width:100%"
+          :style="{ height: isForm ? '100%' : 'calc(100% - 36px)' }"
+          style="overflow: auto; width: 100%"
         >
           <!--          <v-skeleton-loader v-if="!dataLoaded && loadingData || !meta" type="table" />-->
-          <template v-if=" selectedView.type === viewTypes.GRID">
+          <template v-if="selectedView.type === viewTypes.GRID">
             <xc-grid-view
               ref="ncgridview"
               :loading="loadingData"
@@ -363,7 +372,7 @@
               @loadMeta="loadMeta"
             />
           </template>
-          <template v-else-if="selectedView.type === viewTypes.GALLERY ">
+          <template v-else-if="selectedView.type === viewTypes.GALLERY">
             <gallery-view
               :is-locked="isLocked"
               :nodes="nodes"
@@ -376,7 +385,9 @@
               :view-id="selectedViewId"
               :primary-value-column="primaryValueColumn"
               :cover-image-field.sync="coverImageField"
-              @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
+              @expandForm="
+                ({ rowIndex, rowMeta }) => expandRow(rowIndex, rowMeta)
+              "
             />
           </template>
           <template v-else-if="isKanban">
@@ -399,12 +410,16 @@
               :primary-value-column="primaryValueColumn"
               :grouping-field.sync="groupingField"
               :api="api"
-              @expandKanbanForm="({rowIdx}) => expandKanbanForm(rowIdx)"
+              @expandKanbanForm="({ rowIdx }) => expandKanbanForm(rowIdx)"
               @insertNewRow="insertNewRow"
-              @loadMoreKanbanData="(groupingFieldVal) => loadMoreKanbanData(groupingFieldVal)"
+              @loadMoreKanbanData="
+                (groupingFieldVal) => loadMoreKanbanData(groupingFieldVal)
+              "
             />
           </template>
-          <template v-else-if="selectedView && selectedView.show_as === 'calendar' ">
+          <template
+            v-else-if="selectedView && selectedView.show_as === 'calendar'"
+          >
             <calendar-view
               :nodes="nodes"
               :table="table"
@@ -413,10 +428,12 @@
               :meta="meta"
               :data="data"
               :primary-value-column="primaryValueColumn"
-              @expandForm="({rowIndex,rowMeta}) => expandRow(rowIndex,rowMeta)"
+              @expandForm="
+                ({ rowIndex, rowMeta }) => expandRow(rowIndex, rowMeta)
+              "
             />
           </template>
-          <template v-else-if=" selectedView.type === viewTypes.FORM">
+          <template v-else-if="selectedView.type === viewTypes.FORM">
             <form-view
               :id="selectedViewId"
               ref="formView"
@@ -518,41 +535,30 @@
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('validators')"
         >
-          <v-icon x-small class="mr-2">
-            mdi-sticker-check-outline
-          </v-icon>
+          <v-icon x-small class="mr-2"> mdi-sticker-check-outline </v-icon>
           <span class="caption"> API Validators</span>
         </v-list-item>
-        <v-divider
-          v-if="showAdvanceOptions"
-          class="advance-menu-divider"
-        />
+        <v-divider v-if="showAdvanceOptions" class="advance-menu-divider" />
 
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('columns')"
         >
-          <v-icon x-small class="mr-2">
-            mdi-view-column
-          </v-icon>
+          <v-icon x-small class="mr-2"> mdi-view-column </v-icon>
           <span class="caption font-weight-light">SQL Columns</span>
         </v-list-item>
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('indexes')"
         >
-          <v-icon x-small class="mr-2">
-            mdi-blur
-          </v-icon>
+          <v-icon x-small class="mr-2"> mdi-blur </v-icon>
           <span class="caption font-weight-light">SQL Indexes</span>
         </v-list-item>
         <v-list-item
           v-if="showAdvanceOptions"
           @click="showAdditionalFeatOverlay('triggers')"
         >
-          <v-icon x-small class="mr-2">
-            mdi-shield-edit-outline
-          </v-icon>
+          <v-icon x-small class="mr-2"> mdi-shield-edit-outline </v-icon>
           <span class="caption font-weight-light">SQL Triggers</span>
         </v-list-item>
       </spreadsheet-nav-drawer>
@@ -570,36 +576,48 @@
         <template v-if="isEditable && !isLocked">
           <v-list-item
             v-if="relationType !== 'bt'"
-            v-t="['record:right-click:insert']"
+            v-t="['a:row:insert']"
             @click="insertNewRow(false)"
           >
             <span class="caption">
               <!-- Insert New Row -->
-              {{ $t('activity.insertRow') }}
+              {{ $t("activity.insertRow") }}
             </span>
           </v-list-item>
-          <v-list-item v-t="['record:right-click:delete']" @click="deleteRow">
+          <v-list-item v-t="['a:row:delete']" @click="deleteRow">
             <span class="caption">
               <!-- Delete Row -->
-              {{ $t('activity.deleteRow') }}
+              {{ $t("activity.deleteRow") }}
             </span>
           </v-list-item>
-          <v-list-item v-t="['record:right-click:delete-selected']" @click="deleteSelectedRows">
+          <v-list-item v-t="['a:row:delete-bulk']" @click="deleteSelectedRows">
             <span class="caption">
               <!-- Delete Selected Rows -->
-              {{ $t('activity.deleteSelectedRow') }}
+              {{ $t("activity.deleteSelectedRow") }}
             </span>
           </v-list-item>
         </template>
-        <template v-if="rowContextMenu.col && !rowContextMenu.col.rqd && !rowContextMenu.col.virtual">
+        <template
+          v-if="
+            rowContextMenu.col &&
+            !rowContextMenu.col.rqd &&
+            !rowContextMenu.col.virtual
+          "
+        >
           <v-tooltip bottom>
-            <template #activator="{on}">
-              <v-list-item v-t="['record:right-click:clear']" v-on="on" @click="clearCellValue">
+            <template #activator="{ on }">
+              <v-list-item
+                v-t="['a:row:clear']"
+                v-on="on"
+                @click="clearCellValue"
+              >
                 <span class="caption">Clear</span>
               </v-list-item>
             </template>
 
-            <span class="caption">Set column value to <strong>null</strong></span>
+            <span class="caption"
+              >Set column value to <strong>null</strong></span
+            >
           </v-tooltip>
         </template>
       </v-list>
@@ -610,7 +628,7 @@
       :overlay-opacity="0.8"
       width="1000px"
       max-width="100%"
-      class=" mx-auto"
+      class="mx-auto"
     >
       <expanded-form
         v-if="isKanban && kanban.selectedExpandRow"
@@ -634,14 +652,24 @@
         :show-next-prev="false"
         :preset-values="presetValues"
         :is-locked="isLocked"
-        @cancel="showExpandModal = false;"
-        @input="showExpandModal = false; (kanban.selectedExpandRow && kanban.selectedExpandRow.rowMeta && delete kanban.selectedExpandRow.rowMeta.new) ; loadKanbanData(false)"
+        @cancel="showExpandModal = false"
+        @input="
+          showExpandModal = false;
+          kanban.selectedExpandRow &&
+            kanban.selectedExpandRow.rowMeta &&
+            delete kanban.selectedExpandRow.rowMeta.new;
+          loadKanbanData(false);
+        "
         @commented="reloadComments"
         @next="loadNext"
         @prev="loadPrev"
       />
       <expanded-form
-        v-if="!isKanban && (selectedExpandRowIndex != null && data[selectedExpandRowIndex])"
+        v-if="
+          !isKanban &&
+          selectedExpandRowIndex != null &&
+          data[selectedExpandRowIndex]
+        "
         :key="selectedExpandRowIndex"
         v-model="data[selectedExpandRowIndex].row"
         :db-alias="nodes.dbAlias"
@@ -662,8 +690,14 @@
         :show-next-prev="true"
         :preset-values="presetValues"
         :is-locked="isLocked"
-        @cancel="showExpandModal = false;"
-        @input="showExpandModal = false; (data[selectedExpandRowIndex] && data[selectedExpandRowIndex].rowMeta && delete data[selectedExpandRowIndex].rowMeta.new) ; loadTableData()"
+        @cancel="showExpandModal = false"
+        @input="
+          showExpandModal = false;
+          data[selectedExpandRowIndex] &&
+            data[selectedExpandRowIndex].rowMeta &&
+            delete data[selectedExpandRowIndex].rowMeta.new;
+          loadTableData();
+        "
         @commented="reloadComments"
         @loadTableData="loadTableData"
         @next="loadNext"
@@ -683,32 +717,31 @@
 </template>
 
 <script>
-
-import { mapActions } from 'vuex'
-import debounce from 'debounce'
-import { SqlUiFactory, ViewTypes } from 'nocodb-sdk'
-import FileSaver from 'file-saver'
-import FormView from './views/formView'
-import XcGridView from './views/xcGridView'
-import spreadsheet from './mixins/spreadsheet'
-import DebugMetas from '@/components/project/spreadsheet/components/debugMetas'
-
-import AdditionalFeatures from '@/components/project/spreadsheet/overlay/additinalFeatures'
-import GalleryView from '@/components/project/spreadsheet/views/galleryView'
-import CalendarView from '@/components/project/spreadsheet/views/calendarView'
-import KanbanView from '@/components/project/spreadsheet/views/kanbanView'
-import SortList from '@/components/project/spreadsheet/components/sortListMenu'
-import Fields from '@/components/project/spreadsheet/components/fieldsMenu'
-import SpreadsheetNavDrawer from '@/components/project/spreadsheet/components/spreadsheetNavDrawer'
-import LockMenu from '@/components/project/spreadsheet/components/lockMenu'
-import ExpandedForm from '@/components/project/spreadsheet/components/expandedForm'
-import Pagination from '@/components/project/spreadsheet/components/pagination'
-import ColumnFilter from '~/components/project/spreadsheet/components/columnFilterMenu'
-import MoreActions from '~/components/project/spreadsheet/components/moreActions'
-import ShareViewMenu from '~/components/project/spreadsheet/components/shareViewMenu'
+import { mapActions } from "vuex";
+import debounce from "debounce";
+import { SqlUiFactory, ViewTypes } from "nocodb-sdk";
+import FileSaver from "file-saver";
+import FormView from "./views/formView";
+import XcGridView from "./views/xcGridView";
+import spreadsheet from "./mixins/spreadsheet";
+import DebugMetas from "@/components/project/spreadsheet/components/debugMetas";
+
+import AdditionalFeatures from "@/components/project/spreadsheet/overlay/additinalFeatures";
+import GalleryView from "@/components/project/spreadsheet/views/galleryView";
+import CalendarView from "@/components/project/spreadsheet/views/calendarView";
+import KanbanView from "@/components/project/spreadsheet/views/kanbanView";
+import SortList from "@/components/project/spreadsheet/components/sortListMenu";
+import Fields from "@/components/project/spreadsheet/components/fieldsMenu";
+import SpreadsheetNavDrawer from "@/components/project/spreadsheet/components/spreadsheetNavDrawer";
+import LockMenu from "@/components/project/spreadsheet/components/lockMenu";
+import ExpandedForm from "@/components/project/spreadsheet/components/expandedForm";
+import Pagination from "@/components/project/spreadsheet/components/pagination";
+import ColumnFilter from "~/components/project/spreadsheet/components/columnFilterMenu";
+import MoreActions from "~/components/project/spreadsheet/components/moreActions";
+import ShareViewMenu from "~/components/project/spreadsheet/components/shareViewMenu";
 
 export default {
-  name: 'RowsXcDataTable',
+  name: "RowsXcDataTable",
   components: {
     ShareViewMenu,
     MoreActions,
@@ -725,7 +758,7 @@ export default {
     CalendarView,
     GalleryView,
     ColumnFilter,
-    AdditionalFeatures
+    AdditionalFeatures,
   },
   mixins: [spreadsheet],
   props: {
@@ -740,24 +773,24 @@ export default {
     refTable: String,
     relationPrimaryValue: [String, Number],
     deleteTable: Function,
-    showTabs: [Boolean, Number]
+    showTabs: [Boolean, Number],
   },
   data: () => ({
-    syncDataDebounce: debounce(async function(self) {
-      await self.syncData()
+    syncDataDebounce: debounce(async function (self) {
+      await self.syncData();
     }, 500),
-    loadTableDataDeb: debounce(async function(self) {
-      await self.loadTableDataFn()
+    loadTableDataDeb: debounce(async function (self) {
+      await self.loadTableDataFn();
     }, 200),
     viewKey: 0,
     extraViewParams: {},
     debug: false,
     key: 1,
     dataLoaded: false,
-    searchQueryVal: '',
+    searchQueryVal: "",
     columnsWidth: null,
     viewStatus: {
-      type: null
+      type: null,
     },
     fieldsOrder: [],
     coverImageField: null,
@@ -768,7 +801,7 @@ export default {
     selectedView: {},
     overShieldIcon: false,
     progress: false,
-    createViewType: '',
+    createViewType: "",
     addNewColModal: false,
     showAddFeatOverlay: false,
     featureType: null,
@@ -778,49 +811,54 @@ export default {
     loadingMeta: true,
     loadingData: true,
     toggleDrawer: false,
-    selectedViewId: '',
+    selectedViewId: "",
     searchField: null,
-    searchQuery: '',
+    searchQuery: "",
     showExpandModal: false,
     selectedExpandRowIndex: null,
     selectedExpandRowMeta: null,
     navDrawer: true,
     selected: {
       row: null,
-      col: null
+      col: null,
     },
     editEnabled: {
       row: null,
-      col: null
+      col: null,
     },
     page: 1,
     count: 0,
     // size: 25,
-    xWhere: '',
-    sort: '',
+    xWhere: "",
+    sort: "",
 
-    cellHeight: 'small',
+    cellHeight: "small",
 
     spreadsheet: null,
     options: {
       allowToolbar: true,
-      columnSorting: false
+      columnSorting: false,
     },
     filteredData: [],
 
-    cellHeights: [{
-      size: 'small',
-      icon: 'mdi-view-headline'
-    }, {
-      size: 'medium',
-      icon: 'mdi-view-sequential'
-    }, {
-      size: 'large',
-      icon: 'mdi-view-stream'
-    }, {
-      size: 'xlarge',
-      icon: 'mdi-ca rd'
-    }],
+    cellHeights: [
+      {
+        size: "small",
+        icon: "mdi-view-headline",
+      },
+      {
+        size: "medium",
+        icon: "mdi-view-sequential",
+      },
+      {
+        size: "large",
+        icon: "mdi-view-stream",
+      },
+      {
+        size: "xlarge",
+        icon: "mdi-ca rd",
+      },
+    ],
     rowContextMenu: null,
     presetValues: {},
     kanban: {
@@ -833,28 +871,28 @@ export default {
       loadingData: true,
       selectedExpandRow: null,
       selectedExpandOldRow: null,
-      selectedExpandRowMeta: null
+      selectedExpandRowMeta: null,
     },
-    clickCount: 0
+    clickCount: 0,
   }),
   watch: {
     isActive(n, o) {
       if (!o && n) {
-        this.reload()
+        this.reload();
       }
     },
     page(p) {
-      this.$store.commit('tabs/MutSetTabState', {
+      this.$store.commit("tabs/MutSetTabState", {
         id: this.uniqueId,
-        key: 'page',
-        val: p
-      })
+        key: "page",
+        val: p,
+      });
     },
     selectedViewId(id) {
       if (this.tabsState[this.tabId] && this.tabsState[this.tabId].page) {
-        this.page = this.tabsState[this.tabId].page || 1
+        this.page = this.tabsState[this.tabId].page || 1;
       } else {
-        this.page = 1
+        this.page = 1;
       }
       // this.$store.commit('tabs/MutSetTabState', {
       //   id: this.tabId,
@@ -863,47 +901,51 @@ export default {
       // })
     },
     async groupingField(newVal) {
-      this.groupingField = newVal
-      if (this.selectedView && this.selectedView.show_as === 'kanban') {
-        await this.loadKanbanData()
+      this.groupingField = newVal;
+      if (this.selectedView && this.selectedView.show_as === "kanban") {
+        await this.loadKanbanData();
       }
-    }
+    },
   },
   async mounted() {
     try {
       if (this.tabsState && this.tabsState[this.uniqueId]) {
         if (this.tabsState[this.uniqueId].page) {
-          this.page = this.tabsState[this.uniqueId].page
+          this.page = this.tabsState[this.uniqueId].page;
         }
       }
-      await this.createTableIfNewTable()
-      this.loadingMeta = true
-      await this.loadMeta(false)
-      this.loadingMeta = false
+      await this.createTableIfNewTable();
+      this.loadingMeta = true;
+      await this.loadMeta(false);
+      this.loadingMeta = false;
     } catch (e) {
-      console.log(e)
+      console.log(e);
     }
-    this.searchField = this.primaryValueColumn
+    this.searchField = this.primaryValueColumn;
   },
   methods: {
     clickAddNewIcon() {
-      this.insertNewRow(true, true)
-      this.$tele.emit('record:add-row:icon:trigger')
+      this.insertNewRow(true, true);
+      this.$e("c:row:add:grid-top");
     },
     toggleClick() {
-      this.$tele.emit('right-nav:toggle')
+      this.$e("c:grid:toggle-navdraw");
     },
     ...mapActions({
-      loadTablesFromChildTreeNode: 'project/loadTablesFromChildTreeNode'
+      loadTablesFromChildTreeNode: "project/loadTablesFromChildTreeNode",
     }),
     generateNewViewKey() {
-      this.viewKey = Math.random()
+      this.viewKey = Math.random();
     },
     loadNext() {
-      this.selectedExpandRowIndex = ++this.selectedExpandRowIndex % this.data.length
+      this.selectedExpandRowIndex =
+        ++this.selectedExpandRowIndex % this.data.length;
     },
     loadPrev() {
-      this.selectedExpandRowIndex = --this.selectedExpandRowIndex === -1 ? this.data.length - 1 : this.selectedExpandRowIndex
+      this.selectedExpandRowIndex =
+        --this.selectedExpandRowIndex === -1
+          ? this.data.length - 1
+          : this.selectedExpandRowIndex;
     },
     async checkAndDeleteTable() {
       // if (
@@ -914,136 +956,161 @@ export default {
       // ) {
       //   return this.$toast.info('Please delete relations before deleting table.').goAway(3000)
       // }
-      this.deleteTable('showDialog', this.meta.id)
+      this.deleteTable("showDialog", this.meta.id);
 
       // if (confirm('Do you want to delete the table?')) {
       //   await this.$api.meta.tableDelete(this.meta.id)
       // }
-      this.$tele.emit('table:delete:trigger')
+      this.$e("c:table:delete");
     },
     async reloadClick() {
-      await this.reload()
-      this.$tele.emit('table:reload')
+      await this.reload();
+      this.$e("a:table:reload:navbar");
     },
     async reload() {
-      this.$store.dispatch('meta/ActLoadMeta', {
+      this.$store.dispatch("meta/ActLoadMeta", {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         tn: this.table,
-        force: true
-      })
-      if (this.selectedView && this.selectedView.show_as === 'kanban') {
-        await this.loadKanbanData()
+        force: true,
+      });
+      if (this.selectedView && this.selectedView.show_as === "kanban") {
+        await this.loadKanbanData();
       } else {
-        await this.loadTableData()
+        await this.loadTableData();
       }
-      this.key = Math.random()
+      this.key = Math.random();
     },
     reloadComments() {
       if (this.$refs.ncgridview) {
-        this.$refs.ncgridview.xcAuditModelCommentsCount()
+        this.$refs.ncgridview.xcAuditModelCommentsCount();
       }
     },
-    async syncData() {
-    },
+    async syncData() {},
     showAdditionalFeatOverlay(feat) {
-      this.showAddFeatOverlay = true
-      this.featureType = feat
+      this.showAddFeatOverlay = true;
+      this.featureType = feat;
     },
     async createTableIfNewTable() {
       if (this.nodes.newTable && !this.nodes.tableCreated) {
-        const columns = this.sqlUi.getNewTableColumns().filter(col => this.nodes.newTable.columns.includes(col.column_name))
-        await this.$api.dbTable.create(
-          this.projectId,
-          {
-            table_name: this.nodes.table_name,
-            title: this.nodes.title,
-            columns
-          }
-        )
+        const columns = this.sqlUi
+          .getNewTableColumns()
+          .filter((col) =>
+            this.nodes.newTable.columns.includes(col.column_name)
+          );
+        await this.$api.dbTable.create(this.projectId, {
+          table_name: this.nodes.table_name,
+          title: this.nodes.title,
+          columns,
+        });
 
         await this.loadTablesFromChildTreeNode({
           _nodes: {
-            ...this.nodes
-          }
-        })
+            ...this.nodes,
+          },
+        });
         // eslint-disable-next-line vue/no-mutating-props
-        this.nodes.tableCreated = true
+        this.nodes.tableCreated = true;
       }
 
-      this.loadViews = true
+      this.loadViews = true;
     },
 
     comingSoon() {
-      this.$toast.info('Coming soon!').goAway(3000)
+      this.$toast.info("Coming soon!").goAway(3000);
     },
     changed(col, row) {
-      this.$set(this.data[row].rowMeta, 'changed', this.data[row].rowMeta.changed || {})
+      this.$set(
+        this.data[row].rowMeta,
+        "changed",
+        this.data[row].rowMeta.changed || {}
+      );
       if (this.data[row].rowMeta) {
-        this.$set(this.data[row].rowMeta.changed, this.availableColumns[col].column_name, true)
+        this.$set(
+          this.data[row].rowMeta.changed,
+          this.availableColumns[col].column_name,
+          true
+        );
       }
     },
     async save() {
       for (let row = 0; row < this.rowLength; row++) {
-        const {
-          row: rowObj,
-          rowMeta
-        } = this.data[row]
+        const { row: rowObj, rowMeta } = this.data[row];
         if (rowMeta.new) {
           try {
-            this.$set(this.data[row], 'saving', true)
+            this.$set(this.data[row], "saving", true);
             const pks = this.meta.columns.filter((col) => {
-              return col.pk
-            })
-            if (this.meta.columns.every((col) => {
-              return !col.ai
-            }) && pks.length && pks.every(col => !rowObj[col.title] && !(col.columnDefault || col.default))) {
-              return this.$toast.info('Primary column is empty please provide some value').goAway(3000)
+              return col.pk;
+            });
+            if (
+              this.meta.columns.every((col) => {
+                return !col.ai;
+              }) &&
+              pks.length &&
+              pks.every(
+                (col) =>
+                  !rowObj[col.title] && !(col.columnDefault || col.default)
+              )
+            ) {
+              return this.$toast
+                .info("Primary column is empty please provide some value")
+                .goAway(3000);
             }
-            if (this.meta.columns.some((col) => {
-              return !col.ai && col.rqd && (rowObj[col.title] === undefined || rowObj[col.title] === null) && !col.cdf
-            })) {
-              return
+            if (
+              this.meta.columns.some((col) => {
+                return (
+                  !col.ai &&
+                  col.rqd &&
+                  (rowObj[col.title] === undefined ||
+                    rowObj[col.title] === null) &&
+                  !col.cdf
+                );
+              })
+            ) {
+              return;
             }
 
             const insertObj = this.meta.columns.reduce((o, col) => {
               if (!col.ai && (rowObj && rowObj[col.title]) !== null) {
-                o[col.title] = rowObj && rowObj[col.title]
+                o[col.title] = rowObj && rowObj[col.title];
               }
-              return o
-            }, {})
+              return o;
+            }, {});
 
             // const insertedData = await this.api.insert(insertObj)
             const insertedData = await this.$api.dbViewRow.create(
-              'noco',
+              "noco",
               this.projectName,
               this.meta.title,
-              this.selectedView.title, insertObj
-            )
+              this.selectedView.title,
+              insertObj
+            );
 
             this.data.splice(row, 1, {
               row: insertedData,
               rowMeta: {},
-              oldRow: { ...insertedData }
-            })
+              oldRow: { ...insertedData },
+            });
 
             /* this.$toast.success(`${insertedData[this.primaryValueColumn] ? `${insertedData[this.primaryValueColumn]}'s r` : 'R'}ow saved successfully.`, {
               position: 'bottom-center'
             }).goAway(3000) */
           } catch (e) {
             // if (e.response && e.response.data && e.response.data.msg) {
-            this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+            this.$toast
+              .error(await this._extractSdkResponseErrorMsg(e))
+              .goAway(3000);
             // } else {
             //   this.$toast.error(`Failed to
             //
             //   row : ${e.message}`).goAway(3000)
             // }
           } finally {
-            this.$set(this.data[row], 'saving', false)
+            this.$set(this.data[row], "saving", false);
           }
         }
       }
-      this.syncCount()
+      this.syncCount();
     },
     // // todo: move debounce to cell since this will skip few update api call
     // onCellValueChangeDebounce: debounce(async function(col, row, column, self) {
@@ -1054,223 +1121,270 @@ export default {
     // },
     async onCellValueChange(col, row, column, saved = true) {
       if (!this.data[row]) {
-        return
+        return;
       }
-      const { row: rowObj, rowMeta, oldRow, saving, lastSave } = this.data[row]
+      const { row: rowObj, rowMeta, oldRow, saving, lastSave } = this.data[row];
       if (!lastSave) {
-        this.$set(this.data[row], 'lastSave', rowObj[column.title])
+        this.$set(this.data[row], "lastSave", rowObj[column.title]);
       }
       if (rowMeta.new) {
         // return if there is no change
-        if ((column && oldRow[column.title] === rowObj[column.title]) || saving) {
-          return
+        if (
+          (column && oldRow[column.title] === rowObj[column.title]) ||
+          saving
+        ) {
+          return;
         }
-        await this.save()
+        await this.save();
       } else {
         try {
           // if (!this.api) {
           //   return
           // }
           // return if there is no change
-          if (!column || (oldRow[column.title] === rowObj[column.title] && ((lastSave || rowObj[column.title]) === rowObj[column.title]))) {
-            return
+          if (
+            !column ||
+            (oldRow[column.title] === rowObj[column.title] &&
+              (lastSave || rowObj[column.title]) === rowObj[column.title])
+          ) {
+            return;
           }
           if (saved) {
-            this.$set(this.data[row], 'lastSave', oldRow[column.title])
+            this.$set(this.data[row], "lastSave", oldRow[column.title]);
           }
-          const id = this.meta.columns.filter(c => c.pk).map(c => rowObj[c.title]).join('___')
+          const id = this.meta.columns
+            .filter((c) => c.pk)
+            .map((c) => rowObj[c.title])
+            .join("___");
 
           if (!id) {
-            return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
+            return this.$toast
+              .info(
+                "Update not allowed for table which doesn't have primary Key"
+              )
+              .goAway(3000);
           }
-          this.$set(this.data[row], 'saving', true)
+          this.$set(this.data[row], "saving", true);
 
           // eslint-disable-next-line promise/param-names
-          const newData = (await this.$api.dbViewRow.update(
-            'noco',
+          const newData = await this.$api.dbViewRow.update(
+            "noco",
             this.projectName,
             this.meta.title,
             this.selectedView.title,
-            id, {
-              [column.title]: rowObj[column.title]
-            }, {
-              query: { ignoreWebhook: !saved }
-            }))
+            id,
+            {
+              [column.title]: rowObj[column.title],
+            },
+            {
+              query: { ignoreWebhook: !saved },
+            }
+          );
 
           // audit
-          this.$api.utils.auditRowUpdate(id, {
-            fk_model_id: this.meta.id,
-            column_name: column.title,
-            row_id: id,
-            value: rowObj[column.title],
-            prev_value: oldRow[column.title]
-          }).then(() => {
-          })
-
-          this.$set(this.data[row], 'row', { ...rowObj, ...newData })
-
-          this.$set(oldRow, column.title, rowObj[column.title])
+          this.$api.utils
+            .auditRowUpdate(id, {
+              fk_model_id: this.meta.id,
+              column_name: column.title,
+              row_id: id,
+              value: rowObj[column.title],
+              prev_value: oldRow[column.title],
+            })
+            .then(() => {});
+
+          this.$set(this.data[row], "row", { ...rowObj, ...newData });
+
+          this.$set(oldRow, column.title, rowObj[column.title]);
           /*    this.$toast.success(`${rowObj[this.primaryValueColumn] ? `${rowObj[this.primaryValueColumn]}'s c` : 'C'}olumn '${column.column_name}' updated successfully.`, {
             position: 'bottom-center'
           }).goAway(3000) */
         } catch (e) {
           // if (e.response && e.response.data && e.response.data.msg) {
-          this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+          this.$toast
+            .error(await this._extractSdkResponseErrorMsg(e))
+            .goAway(3000);
           // } else {
           //   this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
           // }
         }
 
-        this.$set(this.data[row], 'saving', false)
+        this.$set(this.data[row], "saving", false);
       }
     },
     async deleteRow() {
       try {
-        const rowObj = this.rowContextMenu.row
+        const rowObj = this.rowContextMenu.row;
         if (!this.rowContextMenu.rowMeta.new) {
-          const id = this.meta && this.meta.columns && this.meta.columns.filter(c => c.pk).map(c => rowObj[c.title]).join('___')
+          const id =
+            this.meta &&
+            this.meta.columns &&
+            this.meta.columns
+              .filter((c) => c.pk)
+              .map((c) => rowObj[c.title])
+              .join("___");
 
           if (!id) {
-            return this.$toast.info('Delete not allowed for table which doesn\'t have primary Key').goAway(3000)
+            return this.$toast
+              .info(
+                "Delete not allowed for table which doesn't have primary Key"
+              )
+              .goAway(3000);
           }
-          await this.$api.dbViewRow.delete('noco', this.projectName, this.meta.title, this.selectedView.title, id)
+          await this.$api.dbViewRow.delete(
+            "noco",
+            this.projectName,
+            this.meta.title,
+            this.selectedView.title,
+            id
+          );
         }
-        this.data.splice(this.rowContextMenu.index, 1)
-        this.syncCount()
+        this.data.splice(this.rowContextMenu.index, 1);
+        this.syncCount();
         // this.$toast.success('Deleted row successfully').goAway(3000)
       } catch (e) {
-        this.$toast.error(`Failed to delete row : ${e.message}`).goAway(3000)
+        this.$toast.error(`Failed to delete row : ${e.message}`).goAway(3000);
       }
     },
     async deleteSelectedRows() {
-      let row = this.rowLength
+      let row = this.rowLength;
       // let success = 0
       while (row--) {
         try {
-          const {
-            row: rowObj,
-            rowMeta
-          } = this.data[row]
+          const { row: rowObj, rowMeta } = this.data[row];
           if (!rowMeta.selected) {
-            continue
+            continue;
           }
           if (!rowMeta.new) {
-            const id = this.meta.columns.filter(c => c.pk).map(c => rowObj[c.title]).join('___')
+            const id = this.meta.columns
+              .filter((c) => c.pk)
+              .map((c) => rowObj[c.title])
+              .join("___");
 
             if (!id) {
-              return this.$toast.info('Delete not allowed for table which doesn\'t have primary Key').goAway(3000)
+              return this.$toast
+                .info(
+                  "Delete not allowed for table which doesn't have primary Key"
+                )
+                .goAway(3000);
             }
-            await this.$api.dbViewRow.delete('noco', this.projectName, this.meta.title, this.selectedView.title, id)
+            await this.$api.dbViewRow.delete(
+              "noco",
+              this.projectName,
+              this.meta.title,
+              this.selectedView.title,
+              id
+            );
           }
-          this.data.splice(row, 1)
+          this.data.splice(row, 1);
         } catch (e) {
-          return this.$toast.error(`Failed to delete row : ${e.message}`).goAway(3000)
+          return this.$toast
+            .error(`Failed to delete row : ${e.message}`)
+            .goAway(3000);
         }
       }
-      this.syncCount()
+      this.syncCount();
     },
 
     async clearCellValue() {
-      const {
-        col,
-        colIndex,
-        row,
-        index
-      } = this.rowContextMenu
+      const { col, colIndex, row, index } = this.rowContextMenu;
       if (row[col.title] === null) {
-        return
+        return;
       }
-      this.$set(this.data[index].row, col.title, null)
-      await this.onCellValueChange(colIndex, index, col, true)
+      this.$set(this.data[index].row, col.title, null);
+      await this.onCellValueChange(colIndex, index, col, true);
     },
     async insertNewRow(atEnd = false, expand = false, presetValues = {}) {
-      const isKanban = this.selectedView && this.selectedView.show_as === 'kanban'
-      const data = isKanban ? this.kanban.data : this.data
-      const focusRow = isKanban ? data.length : (atEnd ? this.rowLength : this.rowContextMenu.index + 1)
-      const focusCol = this.availableColumns.findIndex(c => !c.ai)
+      const isKanban =
+        this.selectedView && this.selectedView.show_as === "kanban";
+      const data = isKanban ? this.kanban.data : this.data;
+      const focusRow = isKanban
+        ? data.length
+        : atEnd
+        ? this.rowLength
+        : this.rowContextMenu.index + 1;
+      const focusCol = this.availableColumns.findIndex((c) => !c.ai);
       data.splice(focusRow, 0, {
-        row: this.relationType === 'hm'
-          ? {
-              ...this.fieldList.reduce((o, f) => ({
-                ...o,
-                [f]: presetValues[f] ?? null
-              }), {}),
-              [this.relation.column_name]: this.relationIdValue
-            }
-          : this.fieldList.reduce((o, f) => ({
-            ...o,
-            [f]: presetValues[f] ?? null
-          }), {}),
+        row:
+          this.relationType === "hm"
+            ? {
+                ...this.fieldList.reduce(
+                  (o, f) => ({
+                    ...o,
+                    [f]: presetValues[f] ?? null,
+                  }),
+                  {}
+                ),
+                [this.relation.column_name]: this.relationIdValue,
+              }
+            : this.fieldList.reduce(
+                (o, f) => ({
+                  ...o,
+                  [f]: presetValues[f] ?? null,
+                }),
+                {}
+              ),
         rowMeta: {
-          new: true
+          new: true,
         },
-        oldRow: {}
-      })
-      if (data[focusRow].row[this.groupingField] === 'Uncategorized') {
-        data[focusRow].row[this.groupingField] = null
+        oldRow: {},
+      });
+      if (data[focusRow].row[this.groupingField] === "Uncategorized") {
+        data[focusRow].row[this.groupingField] = null;
       }
       this.selected = {
         row: focusRow,
-        col: focusCol
-      }
+        col: focusCol,
+      };
       this.editEnabled = {
         row: focusRow,
-        col: focusCol
-      }
-      this.presetValues = presetValues
+        col: focusCol,
+      };
+      this.presetValues = presetValues;
 
       if (expand) {
         if (isKanban) {
-          this.expandKanbanForm(-1, data[focusRow])
+          this.expandKanbanForm(-1, data[focusRow]);
         } else {
-          const { rowMeta } = data[data.length - 1]
-          this.expandRow(data.length - 1, rowMeta)
+          const { rowMeta } = data[data.length - 1];
+          this.expandRow(data.length - 1, rowMeta);
         }
       }
     },
 
-    async handleKeyDown({
-      metaKey,
-      key,
-      altKey,
-      shiftKey,
-      ctrlKey
-    }) {
-      switch ([
-        this._isMac ? metaKey : ctrlKey,
-        key].join('_')) {
-        case 'true_s' :
-          this.edited && await this.save()
-          break
-        case 'true_l' :
-          await this.loadTableData()
-          break
-        case 'true_n' :
-          this.insertNewRow(true)
-          break
+    async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
+      switch ([this._isMac ? metaKey : ctrlKey, key].join("_")) {
+        case "true_s":
+          this.edited && (await this.save());
+          break;
+        case "true_l":
+          await this.loadTableData();
+          break;
+        case "true_n":
+          this.insertNewRow(true);
+          break;
       }
     },
     async loadMeta() {
       // load latest table meta
-      await this.$store.dispatch('meta/ActLoadMeta', {
+      await this.$store.dispatch("meta/ActLoadMeta", {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         table_name: this.table,
-        force: true
-      })
+        force: true,
+      });
     },
     clickPagination() {
-      this.loadTableData()
-      this.$tele.emit('pagination:click')
+      this.loadTableData();
+      this.$e("a:grid:pagination");
     },
     loadTableData() {
-      this.loadTableDataDeb(this)
+      this.loadTableDataDeb(this);
     },
     async loadTableDataFn() {
       if (this.isForm || !this.selectedView || !this.selectedView.title) {
-        return
+        return;
       }
-      this.loadingData = true
+      this.loadingData = true;
       try {
         // if (this.api) {
         // const { list, count } = await this.api.paginatedList(this.queryParams)
@@ -1287,41 +1401,42 @@ export default {
         //     }
         //   })).data.data
 
-        const {
-          list,
-          pageInfo
-        } = (await this.$api.dbViewRow.list(
-          'noco',
+        const { list, pageInfo } = await this.$api.dbViewRow.list(
+          "noco",
           this.projectName,
           this.meta.title,
           this.selectedView.title,
           {
             ...this.queryParams,
-            ...(this._isUIAllowed('sortSync') ? {} : { sortArrJson: JSON.stringify(this.sortList) }),
-            ...(this._isUIAllowed('filterSync') ? {} : { filterArrJson: JSON.stringify(this.filters) })
+            ...(this._isUIAllowed("sortSync")
+              ? {}
+              : { sortArrJson: JSON.stringify(this.sortList) }),
+            ...(this._isUIAllowed("filterSync")
+              ? {}
+              : { filterArrJson: JSON.stringify(this.filters) }),
             // sort: ['-FirstName'],
             // where: '(FirstName,like,%ro)~or((FirstName,like,%a)~and(FirstName,like,%e%))'
           }
-        ))
+        );
 
-        this.count = pageInfo.totalRows// count
-        this.data = list.map(row => ({
+        this.count = pageInfo.totalRows; // count
+        this.data = list.map((row) => ({
           row,
           oldRow: { ...row },
-          rowMeta: {}
-        }))
+          rowMeta: {},
+        }));
         // }
       } catch (e) {
-        console.log(e)
+        console.log(e);
       }
-      this.loadingData = false
+      this.loadingData = false;
     },
     showRowContextMenu(e, row, rowMeta, index, colIndex, col) {
       if (!this.isEditable) {
-        return
+        return;
       }
-      e.preventDefault()
-      this.rowContextMenu = false
+      e.preventDefault();
+      this.rowContextMenu = false;
       this.$nextTick(() => {
         this.rowContextMenu = {
           x: e.clientX,
@@ -1330,45 +1445,48 @@ export default {
           index,
           rowMeta,
           colIndex,
-          col
-        }
-      })
+          col,
+        };
+      });
     },
     expandRow(row, rowMeta) {
-      this.showExpandModal = true
-      this.selectedExpandRowIndex = row
-      this.selectedExpandRowMeta = rowMeta
+      this.showExpandModal = true;
+      this.selectedExpandRowIndex = row;
+      this.selectedExpandRowMeta = rowMeta;
     },
     async onNewColCreation(col, oldCol) {
       // if (this.$refs.drawer) {
       //   await this.$refs.drawer.loadViews()
       //   this.$refs.drawer.onViewIdChange(this.selectedViewId)
       // }
-      await this.loadMeta(true, col, oldCol)
-      this.$nextTick(async() => {
-        await this.loadTableData()
-      })
-      this.$refs.fields && this.$refs.fields.loadFields()
+      await this.loadMeta(true, col, oldCol);
+      this.$nextTick(async () => {
+        await this.loadTableData();
+      });
+      this.$refs.fields && this.$refs.fields.loadFields();
     },
     onColDelete() {
-      this.$refs.fields && this.$refs.fields.loadFields()
+      this.$refs.fields && this.$refs.fields.loadFields();
     },
     onFileDrop(ev) {
-      let file
+      let file;
       if (ev.dataTransfer.items) {
         // Use DataTransferItemList interface to access the file(s)
-        if (ev.dataTransfer.items.length && ev.dataTransfer.items[0].kind === 'file') {
-          file = ev.dataTransfer.items[0].getAsFile()
+        if (
+          ev.dataTransfer.items.length &&
+          ev.dataTransfer.items[0].kind === "file"
+        ) {
+          file = ev.dataTransfer.items[0].getAsFile();
         }
       } else if (ev.dataTransfer.files.length) {
-        file = ev.dataTransfer.files[0]
+        file = ev.dataTransfer.files[0];
       }
 
-      if (file && !file.name.endsWith('.csv')) {
-        return
+      if (file && !file.name.endsWith(".csv")) {
+        return;
       }
 
-      this.$refs.csvExportImport.onCsvFileSelection(file)
+      this.$refs.csvExportImport.onCsvFileSelection(file);
     },
     // Kanban
     async loadKanbanData(initKanbanProps = true) {
@@ -1383,254 +1501,308 @@ export default {
           loadingData: true,
           selectedExpandRow: null,
           selectedExpandOldRow: null,
-          selectedExpandRowMeta: null
-        }
+          selectedExpandRowMeta: null,
+        };
         if (initKanbanProps) {
-          this.kanban = kanban
+          this.kanban = kanban;
         }
 
         if (this.api) {
-          const groupingColumn = this.meta.columns.find(c => c.title === this.groupingField)
+          const groupingColumn = this.meta.columns.find(
+            (c) => c.title === this.groupingField
+          );
 
           if (!groupingColumn) {
-            return
+            return;
           }
-          const initialLimit = 10
-          const uncategorized = 'Uncategorized'
-
-          kanban.groupingColumnItems = groupingColumn.dtxp.split(',').map((c) => {
-            const trimCol = c.replace(/'/g, '')
-            kanban.recordCnt[trimCol] = 0
-            return trimCol
-          }).sort()
+          const initialLimit = 10;
+          const uncategorized = "Uncategorized";
+
+          kanban.groupingColumnItems = groupingColumn.dtxp
+            .split(",")
+            .map((c) => {
+              const trimCol = c.replace(/'/g, "");
+              kanban.recordCnt[trimCol] = 0;
+              return trimCol;
+            })
+            .sort();
 
-          kanban.groupingColumnItems.unshift(uncategorized)
-          kanban.recordCnt[uncategorized] = 0
+          kanban.groupingColumnItems.unshift(uncategorized);
+          kanban.recordCnt[uncategorized] = 0;
           for (const groupingColumnItem of kanban.groupingColumnItems) {
             {
               // enrich Kanban data
-              const {
-                data
-              } = await this.api.get(`/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`, {
-                limit: initialLimit,
-                where: groupingColumnItem === uncategorized ? `(${this.groupingField},is,null)` : `(${this.groupingField},eq,${groupingColumnItem})`
-              })
+              const { data } = await this.api.get(
+                `/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`,
+                {
+                  limit: initialLimit,
+                  where:
+                    groupingColumnItem === uncategorized
+                      ? `(${this.groupingField},is,null)`
+                      : `(${this.groupingField},eq,${groupingColumnItem})`,
+                }
+              );
               data.forEach((d) => {
                 // handle composite primary key
-                d.c_pk = this.meta.columns.filter(c => c.pk).map(c => d[c.title]).join('___')
+                d.c_pk = this.meta.columns
+                  .filter((c) => c.pk)
+                  .map((c) => d[c.title])
+                  .join("___");
                 if (!d.id) {
                   // id is required for <kanban-board/>
-                  d.id = d.c_pk
+                  d.id = d.c_pk;
                 }
                 kanban.data.push({
                   row: d,
                   oldRow: d,
-                  rowMeta: {}
-                })
-                kanban.recordCnt[groupingColumnItem] += 1
+                  rowMeta: {},
+                });
+                kanban.recordCnt[groupingColumnItem] += 1;
                 kanban.blocks.push({
                   status: groupingColumnItem,
-                  ...d
-                })
-              })
+                  ...d,
+                });
+              });
             }
             {
               // enrich recordTotalCnt
-              const {
-                data
-              } = await this.api.get(`/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}/count`, {
-                where: groupingColumnItem === uncategorized ? `(${this.groupingField},is,null)` : `(${this.groupingField},eq,${groupingColumnItem})`
-              })
-              kanban.recordTotalCnt[groupingColumnItem] = data.count
+              const { data } = await this.api.get(
+                `/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}/count`,
+                {
+                  where:
+                    groupingColumnItem === uncategorized
+                      ? `(${this.groupingField},is,null)`
+                      : `(${this.groupingField},eq,${groupingColumnItem})`,
+                }
+              );
+              kanban.recordTotalCnt[groupingColumnItem] = data.count;
             }
           }
         }
-        this.kanban = kanban
+        this.kanban = kanban;
       } catch (e) {
         if (e.response && e.response.data && e.response.data.msg) {
-          this.$toast.error(e.response.data.msg, {
-            position: 'bottom-center'
-          }).goAway(3000)
+          this.$toast
+            .error(e.response.data.msg, {
+              position: "bottom-center",
+            })
+            .goAway(3000);
         } else {
-          this.$toast.error(`Error occurred : ${e.message}`, {
-            position: 'bottom-center'
-          }).goAway(3000)
+          this.$toast
+            .error(`Error occurred : ${e.message}`, {
+              position: "bottom-center",
+            })
+            .goAway(3000);
         }
       } finally {
-        this.kanban.loadingData = false
+        this.kanban.loadingData = false;
       }
     },
     async loadMoreKanbanData(groupingFieldVal) {
-      const uncategorized = 'uncategorized'
-      const {
-        data
-      } = await this.api.get(`/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`, {
-        limit: 5,
-        where: groupingFieldVal === uncategorized ? `(${this.groupingField},is,null)` : `(${this.groupingField},eq,${groupingFieldVal})`,
-        offset: this.kanban.recordCnt[groupingFieldVal]
-      })
+      const uncategorized = "uncategorized";
+      const { data } = await this.api.get(
+        `/nc/${this.$store.state.project.projectId}/api/v1/${this.$route.query.name}`,
+        {
+          limit: 5,
+          where:
+            groupingFieldVal === uncategorized
+              ? `(${this.groupingField},is,null)`
+              : `(${this.groupingField},eq,${groupingFieldVal})`,
+          offset: this.kanban.recordCnt[groupingFieldVal],
+        }
+      );
       data.map((d) => {
         // handle composite primary key
-        d.c_pk = this.meta.columns.filter(c => c.pk).map(c => d[c.title]).join('___')
+        d.c_pk = this.meta.columns
+          .filter((c) => c.pk)
+          .map((c) => d[c.title])
+          .join("___");
         if (!d.id) {
           // id is required for <kanban-board/>
-          d.id = d.c_pk
+          d.id = d.c_pk;
         }
         this.kanban.data.push({
           row: d,
           oldRow: d,
-          rowMeta: {}
-        })
+          rowMeta: {},
+        });
         this.kanban.blocks.push({
           status: groupingFieldVal,
-          ...d
-        })
-      })
-      this.kanban.recordCnt[groupingFieldVal] += data.length
+          ...d,
+        });
+      });
+      this.kanban.recordCnt[groupingFieldVal] += data.length;
     },
     expandKanbanForm(rowIdx, data) {
       if (rowIdx != -1) {
         // not a new record -> find the target record
-        data = this.kanban.data.filter(o => o.row.c_pk == rowIdx)[0]
+        data = this.kanban.data.filter((o) => o.row.c_pk == rowIdx)[0];
       }
-      this.showExpandModal = true
-      this.kanban.selectedExpandRow = data.row
-      this.kanban.selectedExpandOldRow = data.oldRow
-      this.kanban.selectedExpandRowMeta = data.rowMeta
+      this.showExpandModal = true;
+      this.kanban.selectedExpandRow = data.row;
+      this.kanban.selectedExpandOldRow = data.oldRow;
+      this.kanban.selectedExpandRowMeta = data.rowMeta;
     },
     async exportCache() {
       try {
-        const data = (await this.$api.utils.cacheGet())
+        const data = await this.$api.utils.cacheGet();
         if (!data) {
-          this.$toast.info('Cache is empty').goAway(3000)
-          return
+          this.$toast.info("Cache is empty").goAway(3000);
+          return;
         }
-        const blob = new Blob([JSON.stringify(data)], { type: 'text/plain;charset=utf-8' })
-        FileSaver.saveAs(blob, 'cache_exported.json')
-        this.$toast.info('Exported Cache Successfully').goAway(3000)
+        const blob = new Blob([JSON.stringify(data)], {
+          type: "text/plain;charset=utf-8",
+        });
+        FileSaver.saveAs(blob, "cache_exported.json");
+        this.$toast.info("Exported Cache Successfully").goAway(3000);
       } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
+        console.log(e);
+        this.$toast.error(e.message).goAway(3000);
       }
     },
     async deleteCache() {
       try {
-        await this.$api.utils.cacheDelete()
-        this.$toast.info('Deleted Cache Successfully').goAway(3000)
+        await this.$api.utils.cacheDelete();
+        this.$toast.info("Deleted Cache Successfully").goAway(3000);
       } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
+        console.log(e);
+        this.$toast.error(e.message).goAway(3000);
       }
     },
     async syncCount() {
-      const { count } = await this.$api.dbViewRow.count('noco', this.$store.getters['project/GtrProjectName'], this.meta.title, this.selectedView.title)
-      this.count = count
-    }
+      const { count } = await this.$api.dbViewRow.count(
+        "noco",
+        this.$store.getters["project/GtrProjectName"],
+        this.meta.title,
+        this.selectedView.title
+      );
+      this.count = count;
+    },
   },
   computed: {
     isLocked() {
-      return this.lockType === 'locked'
+      return this.lockType === "locked";
     },
     lockType: {
       get() {
-        return this.selectedView && this.selectedView.lock_type
+        return this.selectedView && this.selectedView.lock_type;
       },
       set(type) {
-        this.selectedView.lock_type = type
+        this.selectedView.lock_type = type;
         this.$api.dbView.update(this.selectedViewId, {
-          lock_type: type
-        })
-      }
+          lock_type: type,
+        });
+      },
     },
     showSystemFields: {
       get() {
-        return this.selectedView && this.selectedView.show_system_fields
+        return this.selectedView && this.selectedView.show_system_fields;
       },
       set(v) {
         if (this.selectedView) {
-          this.selectedView.show_system_fields = v
-          this.$api.dbView.update(this.selectedViewId, {
-            show_system_fields: v
-          }).then(() => {
-            if (v) {
-              this.loadTableData()
-            }
-          })
+          this.selectedView.show_system_fields = v;
+          this.$api.dbView
+            .update(this.selectedViewId, {
+              show_system_fields: v,
+            })
+            .then(() => {
+              if (v) {
+                this.loadTableData();
+              }
+            });
         }
-      }
+      },
     },
     viewTypes() {
-      return ViewTypes
+      return ViewTypes;
     },
     tabsState() {
-      return this.$store.state.tabs.tabsState || {}
+      return this.$store.state.tabs.tabsState || {};
     },
     uniqueId() {
-      return `${this.tabId}_${this.selectedViewId}`
+      return `${this.tabId}_${this.selectedViewId}`;
     },
     size() {
-      return (this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.defaultLimit) || 25
+      return (
+        (this.$store.state.project.projectInfo &&
+          this.$store.state.project.projectInfo.defaultLimit) ||
+        25
+      );
     },
     isPkAvail() {
-      return this.meta && this.meta.columns.some(c => c.pk)
+      return this.meta && this.meta.columns.some((c) => c.pk);
     },
     isGallery() {
-      return this.selectedView && this.selectedView.type === ViewTypes.GALLERY
+      return this.selectedView && this.selectedView.type === ViewTypes.GALLERY;
     },
     isForm() {
-      return this.selectedView && this.selectedView.type === ViewTypes.FORM
+      return this.selectedView && this.selectedView.type === ViewTypes.FORM;
     },
     isKanban() {
-      return this.selectedView && this.selectedView.type === ViewTypes.KANBAN
+      return this.selectedView && this.selectedView.type === ViewTypes.KANBAN;
     },
     isGrid() {
-      return this.selectedView && this.selectedView.type === ViewTypes.GRID
+      return this.selectedView && this.selectedView.type === ViewTypes.GRID;
     },
     meta() {
-      return this.$store.state.meta.metas[this.table]
+      return this.$store.state.meta.metas[this.table];
     },
     currentApiUrl() {
-      return this.api && `${this.api.apiUrl}?` + Object.entries(this.queryParams).filter(p => p[1]).map(([key, val]) => `${encodeURIComponent(key)}=${encodeURIComponent(val)}`).join('&')
+      return (
+        this.api &&
+        `${this.api.apiUrl}?` +
+          Object.entries(this.queryParams)
+            .filter((p) => p[1])
+            .map(
+              ([key, val]) =>
+                `${encodeURIComponent(key)}=${encodeURIComponent(val)}`
+            )
+            .join("&")
+      );
     },
     isEditable() {
-      return this._isUIAllowed('xcDatatableEditable')
+      return this._isUIAllowed("xcDatatableEditable");
     },
     sqlUi() {
       // return SqlUI.create(this.nodes.dbConnection)
-      return SqlUiFactory.create(this.nodes.dbConnection)
+      return SqlUiFactory.create(this.nodes.dbConnection);
     },
     api() {
-      return this.meta && this.$ncApis.get({
-        env: this.nodes.env,
-        dbAlias: this.nodes.dbAlias,
-        table: this.meta.table_name
-      })
+      return (
+        this.meta &&
+        this.$ncApis.get({
+          env: this.nodes.env,
+          dbAlias: this.nodes.dbAlias,
+          table: this.meta.table_name,
+        })
+      );
       // return this.meta && this.meta.title ? ApiFactory.create(this.$store.getters['project/GtrProjectType'], this.meta && this.meta.title, this.meta && this.meta.columns, this, this.meta) : null
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
-
 /deep/ .v-input__control .v-input__slot .v-input--selection-controls__input {
-  transform: scale(.85);
+  transform: scale(0.85);
   margin-right: 0;
 }
 
-/deep/ .xc-toolbar .v-input__slot, .navigation .v-input__slot {
+/deep/ .xc-toolbar .v-input__slot,
+.navigation .v-input__slot {
   box-shadow: none !important;
 }
 
 /deep/ .navigation .v-input__slot input::placeholder {
-  font-size: .8rem;
+  font-size: 0.8rem;
 }
 
 /deep/ .v-btn {
   text-transform: capitalize;
 }
 
-.row-expand-icon, .row-checkbox {
+.row-expand-icon,
+.row-checkbox {
   opacity: 0;
 }
 
@@ -1638,19 +1810,22 @@ export default {
   height: 24px !important;
 }
 
-.cell-height-medium td, .cell-height-medium tr {
+.cell-height-medium td,
+.cell-height-medium tr {
   min-height: 35px !important;
   /*height: 35px !important;*/
   /*max-height: 35px !important;*/
 }
 
-.cell-height-large td, .cell-height-large tr {
+.cell-height-large td,
+.cell-height-large tr {
   min-height: 40px !important;
   /*height: 40px !important;*/
   /*max-height: 40px !important;*/
 }
 
-.cell-height-xlarge td, .cell-height-xlarge tr {
+.cell-height-xlarge td,
+.cell-height-xlarge tr {
   min-height: 50px !important;
   /*height: 50px !important;*/
   /*max-height: 50px !important;*/
@@ -1662,7 +1837,7 @@ export default {
 }
 
 /deep/ .xc-border.search-box .v-input {
-  transition: .4s border-color;
+  transition: 0.4s border-color;
 }
 
 /deep/ .xc-border.search-box .v-input--is-focused {
@@ -1670,12 +1845,14 @@ export default {
   margin: -1px;
 }
 
-/deep/ .search-field.v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
+/deep/
+  .search-field.v-text-field.v-text-field--solo.v-input--dense
+  > .v-input__control {
   min-height: auto;
 }
 
 .views-navigation-drawer {
-  transition: .4s max-width, .4s min-width;
+  transition: 0.4s max-width, 0.4s min-width;
 }
 
 .new-column-header {
diff --git a/packages/nc-gui/components/project/spreadsheet/views/formView.vue b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
index d0df0fb086..d1427a45b3 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/formView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/formView.vue
@@ -1,16 +1,21 @@
 <template>
   <v-container fluid class="h-100 py-0">
-    <v-row class="h-100 my-0" :class="{'d-flex justify-center': submitted}">
+    <v-row class="h-100 my-0" :class="{ 'd-flex justify-center': submitted }">
       <template v-if="submitted">
         <v-col class="d-flex justify-center">
           <div v-if="view" style="min-width: 350px">
             <v-alert type="success" outlined>
-              <span class="title">{{ view.success_msg || 'Successfully submitted form data' }}</span>
+              <span class="title">{{
+                view.success_msg || "Successfully submitted form data"
+              }}</span>
             </v-alert>
-            <p v-if="view.show_blank_form" class="caption grey--text text-center">
+            <p
+              v-if="view.show_blank_form"
+              class="caption grey--text text-center"
+            >
               New form will be loaded after {{ secondsRemain }} seconds
             </p>
-            <div v-if="view.submit_another_form" class=" text-center">
+            <div v-if="view.submit_another_form" class="text-center">
               <v-btn color="primary" @click="submitted = false">
                 Submit Another Form
               </v-btn>
@@ -20,50 +25,55 @@
       </template>
       <template v-else>
         <v-col v-if="isEditable" class="h-100 col-md-4 col-lg-3">
-          <v-card class="h-100 overflow-auto pa-4 pa-md-6 backgroundColor elevation-0 nc-form-left-nav">
+          <v-card
+            class="h-100 overflow-auto pa-4 pa-md-6 backgroundColor elevation-0 nc-form-left-nav"
+          >
             <div class="d-flex grey--text">
               <span class="">
                 <!--Fields-->
-                {{ $t('objects.fields') }}
+                {{ $t("objects.fields") }}
               </span>
               <v-spacer />
               <span
                 v-if="hiddenColumns.length"
                 class="pointer caption mr-2"
-                style="border-bottom: 2px solid rgb(218,218,218)"
+                style="border-bottom: 2px solid rgb(218, 218, 218)"
                 @click="addAllColumns()"
               >
                 <!--Add all-->
-                {{ $t('general.addAll') }}
+                {{ $t("general.addAll") }}
               </span>
               <span
                 v-if="columns.length"
                 class="pointer caption"
-                style="border-bottom: 2px solid rgb(218,218,218)"
+                style="border-bottom: 2px solid rgb(218, 218, 218)"
                 @click="removeAllColumns"
               >
                 <!--Remove all-->
-                {{ $t('general.removeAll') }}
+                {{ $t("general.removeAll") }}
               </span>
             </div>
             <draggable
-              v-if="showFields "
+              v-if="showFields"
               v-model="hiddenColumns"
               draggable=".item"
               group="form-inputs"
-              @start="drag=true"
-              @end="drag=false"
+              @start="drag = true"
+              @end="drag = false"
             >
               <v-card
-                v-for="(col) in hiddenColumns"
+                v-for="col in hiddenColumns"
                 :key="col.title"
                 class="pa-2 my-2 item pointer elevation-0"
-                @mousedown="moved=false"
-                @mousemove="moved=false"
+                @mousedown="moved = false"
+                @mousemove="moved = false"
                 @mouseup="handleMouseUp(col)"
               >
                 <div class="d-flex">
-                  <label :for="`data-table-form-${col.title}`" class="body-2 text-capitalize flex-grow-1">
+                  <label
+                    :for="`data-table-form-${col.title}`"
+                    class="body-2 text-capitalize flex-grow-1"
+                  >
                     <virtual-header-cell
                       v-if="isVirtualCol(col)"
                       class="caption"
@@ -80,16 +90,15 @@
                       :column="col"
                       :sql-ui="sqlUi"
                     />
-
                   </label>
-                  <v-icon color="grey">
-                    mdi-drag
-                  </v-icon>
+                  <v-icon color="grey"> mdi-drag </v-icon>
                 </div>
               </v-card>
-              <div class="mt-4 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1">
+              <div
+                class="mt-4 nc-drag-n-drop-to-hide py-3 text-center grey--text text--lighter-1"
+              >
                 <!--Drag and drop fields here to hide-->
-                {{ $t('msg.info.dragDropHide') }}
+                {{ $t("msg.info.dragDropHide") }}
               </div>
             </draggable>
 
@@ -99,13 +108,11 @@
               z-index="99"
               content-class="elevation-0"
             >
-              <template #activator="{on}">
+              <template #activator="{ on }">
                 <div class="grey--text caption text-center mt-4" v-on="on">
-                  <v-icon size="20" color="grey">
-                    mdi-plus
-                  </v-icon>
+                  <v-icon size="20" color="grey"> mdi-plus </v-icon>
                   <!--Add new field to this table-->
-                  {{ $t('activity.addField') }}
+                  {{ $t("activity.addField") }}
                 </div>
               </template>
               <edit-column
@@ -120,8 +127,8 @@
           </v-card>
         </v-col>
         <v-col
-          :class="{'col-12' : !isEditable, 'col-lg-9 col-md-8': isEditable}"
-          class="h-100 px-sm-1 px-md-10 "
+          :class="{ 'col-12': !isEditable, 'col-lg-9 col-md-8': isEditable }"
+          class="h-100 px-sm-1 px-md-10"
           style="overflow-y: auto"
         >
           <!--        <pre class="caption">{{ fields }}</pre>-->
@@ -129,9 +136,11 @@
           <!--        <div class="my-14 d-flex align-center justify-center">-->
           <!--          <v-chip>Add cover image</v-chip>-->
           <!--        </div>-->
-          <div class="nc-form-wrapper elevation-3 ma-3  pb-10">
+          <div class="nc-form-wrapper elevation-3 ma-3 pb-10">
             <div class="mt-10 d-flex align-center justify-center flex-column">
-              <div class="nc-form-banner backgroundColor darken-1 flex-column justify-center  d-flex">
+              <div
+                class="nc-form-banner backgroundColor darken-1 flex-column justify-center d-flex"
+              >
                 <div class="d-flex align-center justify-center flex-grow-1">
                   <!--                  <v-chip small color="backgroundColorDefault caption grey&#45;&#45;text">
                     Add cover image
@@ -139,7 +148,7 @@
                 </div>
               </div>
             </div>
-            <div class="mx-auto nc-form elevation-3 pa-2 ">
+            <div class="mx-auto nc-form elevation-3 pa-2">
               <div class="nc-form-logo py-8">
                 <!--                <div v-ripple class="nc-form-add-logo text-center caption pointer" @click.stop>-->
                 <!--                  Add a logo-->
@@ -148,8 +157,8 @@
               <editable
                 :is="isEditable ? 'editable' : 'h2'"
                 v-model="view.heading"
-                class="display-1 font-weight-bold text-left mx-4 mb-3 px-1 text--text  text--lighten-1"
-                :class="{'nc-meta-inputs': isEditable}"
+                class="display-1 font-weight-bold text-left mx-4 mb-3 px-1 text--text text--lighten-1"
+                :class="{ 'nc-meta-inputs': isEditable }"
                 placeholder="Form Title"
                 @input="updateView"
               >
@@ -159,8 +168,8 @@
               <editable
                 :is="isEditable ? 'editable' : 'div'"
                 v-model="view.subheading"
-                :class="{'nc-meta-inputs': isEditable}"
-                class="body-1  text-left mx-4 py-2 px-1 text--text text--lighten-2"
+                :class="{ 'nc-meta-inputs': isEditable }"
+                class="body-1 text-left mx-4 py-2 px-1 text--text text--lighten-2"
                 :placeholder="$t('msg.info.formDesc')"
                 @input="updateView"
               >
@@ -171,25 +180,31 @@
                 draggable=".item"
                 group="form-inputs"
                 class="h-100"
-                @start="drag=true"
-                @end="drag=false"
-
+                @start="drag = true"
+                @end="drag = false"
                 @change="onMove($event)"
               >
                 <div
-                  v-for="(col,i) in columns"
+                  v-for="(col, i) in columns"
                   :key="col.title"
                   class="nc-field-wrapper item px-4 my-3 pointer"
-                  :class="{'nc-editable':isEditable , 'active-row': isActiveRow(col) , 'py-4': !isActiveRow(col) , 'pb-4':isActiveRow(col)}"
+                  :class="{
+                    'nc-editable': isEditable,
+                    'active-row': isActiveRow(col),
+                    'py-4': !isActiveRow(col),
+                    'pb-4': isActiveRow(col),
+                  }"
                 >
                   <div
                     v-click-outside="() => onClickOutside(col)"
-                    @click="activeRow= col.title"
+                    @click="activeRow = col.title"
                   >
-                    <template
-                      v-if="_isUIAllowed('editFormView')"
-                    >
-                      <v-icon small class="nc-field-remove-icon" @click.stop="hideColumn(i)">
+                    <template v-if="_isUIAllowed('editFormView')">
+                      <v-icon
+                        small
+                        class="nc-field-remove-icon"
+                        @click.stop="hideColumn(i)"
+                      >
                         mdi-eye-off-outline
                       </v-icon>
                     </template>
@@ -197,66 +212,80 @@
                     <div
                       v-if="localParams.fields && localParams.fields[col.title]"
                       :class="{
-                        'active-row' : active === col.title,
-                        required: isRequired(col, localState, localParams.fields[col.title].required)
+                        'active-row': active === col.title,
+                        required: isRequired(
+                          col,
+                          localState,
+                          localParams.fields[col.title].required
+                        ),
                       }"
                     >
-                      <div class="nc-field-editables" :class="{'nc-show' : isActiveRow(col)}">
+                      <div
+                        class="nc-field-editables"
+                        :class="{ 'nc-show': isActiveRow(col) }"
+                      >
                         <div class="d-flex align-center pb-2 mt-2">
-                          <v-icon small color="grey">
-                            mdi-drag
-                          </v-icon>
+                          <v-icon small color="grey"> mdi-drag </v-icon>
 
                           <label
                             class="grey--text caption ml-2"
-                            @click="col.required= !col.required,updateColMeta(col,i)"
+                            @click="
+                              (col.required = !col.required),
+                                updateColMeta(col, i)
+                            "
                           >
                             <!--Required-->
-                            {{ $t('general.required') }}
+                            {{ $t("general.required") }}
                           </label>
                           <v-switch
                             v-model="col.required"
-                            v-t="['form-view:field:mark-required']"
+                            v-t="['a:form-view:field:mark-required']"
                             class="nc-required-switch ml-1 mt-0"
                             hide-details
                             flat
                             color="primary"
                             dense
                             inset
-                            @change="updateColMeta(col,i)"
+                            @change="updateColMeta(col, i)"
                           />
                         </div>
                         <!--placeholder=" Enter form input label"-->
                         <editable
                           v-model.lazy="col.label"
-                          style="width:300px;white-space: pre-wrap"
+                          style="width: 300px; white-space: pre-wrap"
                           :placeholder="$t('msg.info.formInput')"
-                          class="caption pa-1 backgroundColor darken-1 mb-2 "
-                          @input="updateColMeta(col,i)"
+                          class="caption pa-1 backgroundColor darken-1 mb-2"
+                          @input="updateColMeta(col, i)"
                         />
                         <!--placeholder=" Add some help text"-->
                         <editable
                           v-model.lazy="col.description"
-                          style="width:300px;white-space: pre-wrap"
+                          style="width: 300px; white-space: pre-wrap"
                           :placeholder="$t('msg.info.formHelpText')"
                           class="caption pa-1 backgroundColor darken-1 mb-2"
-                          @input="updateColMeta(col,i)"
+                          @input="updateColMeta(col, i)"
                           @keydown.enter.prevent
                         />
                       </div>
                       <label
-                        :class="{'nc-show' : !isActiveRow(col)}"
+                        :class="{ 'nc-show': !isActiveRow(col) }"
                         :for="`data-table-form-${col.title}`"
                         class="body-2 text-capitalize nc-field-labels"
                       >
                         <virtual-header-cell
                           v-if="isVirtualCol(col)"
                           class="caption"
-                          :column="{...col, _cn: col.label || col.title}"
+                          :column="{ ...col, _cn: col.label || col.title }"
                           :nodes="nodes"
                           :is-form="true"
                           :meta="meta"
-                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
+                          :required="
+                            isRequired(
+                              col,
+                              localState,
+                              localParams.fields[col.title].required
+                            )
+                          "
                         />
                         <header-cell
                           v-else
@@ -265,14 +294,16 @@
                           :value="col.label || col.title"
                           :column="col"
                           :sql-ui="sqlUi"
-                          :required="isRequired(col, localState, localParams.fields[col.title].required)"
+                          :required="
+                            isRequired(
+                              col,
+                              localState,
+                              localParams.fields[col.title].required
+                            )
+                          "
                         />
-
                       </label>
-                      <div
-                        v-if="isVirtualCol(col)"
-                        @click.stop
-                      >
+                      <div v-if="isVirtualCol(col)" @click.stop>
                         <virtual-cell
                           ref="virtual"
                           :disabled-columns="{}"
@@ -287,11 +318,19 @@
                           :is-form="true"
                           :hint="col.description"
                           :required="col.required"
-                          @update:localState="state => $set(virtual,col.title, state)"
+                          @update:localState="
+                            (state) => $set(virtual, col.title, state)
+                          "
                           @updateCol="updateCol"
                         />
                         <div
-                          v-if="$v.virtual && $v.virtual.$dirty && $v.virtual[col.title] && (!$v.virtual[col.title].required || !$v.virtual[col.alias].minLength)"
+                          v-if="
+                            $v.virtual &&
+                            $v.virtual.$dirty &&
+                            $v.virtual[col.title] &&
+                            (!$v.virtual[col.title].required ||
+                              !$v.virtual[col.alias].minLength)
+                          "
                           class="error--text caption"
                         >
                           Field is required.
@@ -299,10 +338,25 @@
 
                         <!-- todo: optimize -->
                         <template
-                          v-if="col.bt && $v.localState && $v.localState.$dirty && $v.localState[meta.columns.find(c => c.column_name === col.bt.column_name).title]"
+                          v-if="
+                            col.bt &&
+                            $v.localState &&
+                            $v.localState.$dirty &&
+                            $v.localState[
+                              meta.columns.find(
+                                (c) => c.column_name === col.bt.column_name
+                              ).title
+                            ]
+                          "
                         >
                           <div
-                            v-if="!$v.localState[meta.columns.find(c => c.column_name === col.bt.column_name).title].required"
+                            v-if="
+                              !$v.localState[
+                                meta.columns.find(
+                                  (c) => c.column_name === col.bt.column_name
+                                ).title
+                              ].required
+                            "
                             class="error--text caption"
                           >
                             Field is required.
@@ -311,24 +365,30 @@
                       </div>
                       <template v-else>
                         <div
-                          v-if="col.ai || (col.pk && !isNew) || disabledColumns[col.title]"
-                          style="height:100%; width:100%"
+                          v-if="
+                            col.ai ||
+                            (col.pk && !isNew) ||
+                            disabledColumns[col.title]
+                          "
+                          style="height: 100%; width: 100%"
                           class="caption xc-input"
                           @click.stop
-                          @click="col.ai && $toast.info('Auto Increment field is not editable').goAway(3000)"
+                          @click="
+                            col.ai &&
+                              $toast
+                                .info('Auto Increment field is not editable')
+                                .goAway(3000)
+                          "
                         >
                           <input
-                            style="height:100%; width: 100%"
+                            style="height: 100%; width: 100%"
                             readonly
                             disabled
                             :value="localState[col.title]"
-                          >
+                          />
                         </div>
 
-                        <div
-                          v-else
-                          @click.stop
-                        >
+                        <div v-else @click.stop>
                           <editable-cell
                             :id="`data-table-form-${col.title}`"
                             v-model="localState[col.title]"
@@ -343,8 +403,17 @@
                             @blur="active = ''"
                           />
                         </div>
-                        <template v-if="$v.localState&& $v.localState.$dirty && $v.localState[col.title] ">
-                          <div v-if="!$v.localState[col.title].required" class="error--text caption">
+                        <template
+                          v-if="
+                            $v.localState &&
+                            $v.localState.$dirty &&
+                            $v.localState[col.title]
+                          "
+                        >
+                          <div
+                            v-if="!$v.localState[col.title].required"
+                            class="error--text caption"
+                          >
                             Field is required.
                           </div>
                         </template>
@@ -355,19 +424,28 @@
                 </div>
                 <div
                   v-if="!columns.length"
-                  class="nc-drag-n-drop-to-show py-4 mx-8  my-10 text-center grey--text text--lighter-1"
+                  class="nc-drag-n-drop-to-show py-4 mx-8 my-10 text-center grey--text text--lighter-1"
                 >
                   Drag and drop fields here to add
                 </div>
               </draggable>
               <div class="my-10 text-center">
-                <v-btn color="primary" :loading="loading" :disabled="loading" @click="save">
+                <v-btn
+                  color="primary"
+                  :loading="loading"
+                  :disabled="loading"
+                  @click="save"
+                >
                   <!--Submit-->
-                  {{ $t('general.submit') }}
+                  {{ $t("general.submit") }}
                 </v-btn>
                 <!--            <span class="caption grey&#45;&#45;text pointer">Edit label</span>-->
               </div>
-              <div v-if="isEditable && localParams.submit" style="max-width: 700px" class="mx-auto mt-4 px-4 mb-4">
+              <div
+                v-if="isEditable && localParams.submit"
+                style="max-width: 700px"
+                class="mx-auto mt-4 px-4 mb-4"
+              >
                 <!--            <v-switch v-model="localParams.nocoBranding" dense inset hide-details>
                 <template #label>
                   <span class="caption">Show NocoDB branding</span>
@@ -379,13 +457,13 @@
                 </template>
               </v-switch>-->
 
-                <div class="caption grey--text  mt-10 mb-2">
+                <div class="caption grey--text mt-10 mb-2">
                   <!--After form is submitted:-->
-                  {{ $t('msg.info.afterFormSubmitted') }}
+                  {{ $t("msg.info.afterFormSubmitted") }}
                 </div>
                 <label class="caption grey--text font-weight-bold">
                   <!--Show this message:-->
-                  {{ $t('msg.info.showMessage') }}:
+                  {{ $t("msg.info.showMessage") }}:
                 </label>
                 <v-textarea
                   v-model="view.success_msg"
@@ -398,7 +476,7 @@
 
                 <v-switch
                   v-model="view.submit_another_form"
-                  v-t="[`form-view:option:submit-another-form`]"
+                  v-t="[`a:form-view:submit-another-form`]"
                   dense
                   inset
                   hide-details
@@ -408,13 +486,13 @@
                   <template #label>
                     <span class="font-weight-bold grey--text caption">
                       <!--Show "Submit Another Form" button-->
-                      {{ $t('msg.info.submitAnotherForm') }}
+                      {{ $t("msg.info.submitAnotherForm") }}
                     </span>
                   </template>
                 </v-switch>
                 <v-switch
                   v-model="view.show_blank_form"
-                  v-t="[`form-view:option:show-blank-form`]"
+                  v-t="[`a:form-view:show-blank-form`]"
                   dense
                   inset
                   hide-details
@@ -424,21 +502,22 @@
                   <template #label>
                     <span class="font-weight-bold grey--text caption">
                       <!--Show a blank form after 5 seconds-->
-                      {{ $t('msg.info.showBlankForm') }}
+                      {{ $t("msg.info.showBlankForm") }}
                     </span>
                   </template>
                 </v-switch>
                 <v-switch
                   v-model="emailMe"
-                  v-t="[`form-view:option:email-me`]"
+                  v-t="[`a:form-view:email-me`]"
                   dense
                   inset
                   hide-details
                   class="nc-switch"
                 >
                   <template #label>
-                    <span class="caption font-weight-bold grey--text ">
-                      {{ $t('msg.info.emailForm') }} <span class="font-eright-bold">{{
+                    <span class="caption font-weight-bold grey--text">
+                      {{ $t("msg.info.emailForm") }}
+                      <span class="font-eright-bold">{{
                         $store.state.users.user.email
                       }}</span>
                     </span>
@@ -454,24 +533,28 @@
 </template>
 
 <script>
-
-import draggable from 'vuedraggable'
-import { validationMixin } from 'vuelidate'
-import { required, minLength } from 'vuelidate/lib/validators'
-import { UITypes, isVirtualCol, RelationTypes, getSystemColumns } from 'nocodb-sdk'
-import VirtualHeaderCell from '../components/virtualHeaderCell'
-import HeaderCell from '../components/headerCell'
-import VirtualCell from '../components/virtualCell'
-import EditableCell from '../components/editableCell'
-import Editable from '../components/editable'
-import EditColumn from '../components/editColumn'
-import form from '../mixins/form'
+import draggable from "vuedraggable";
+import { validationMixin } from "vuelidate";
+import { required, minLength } from "vuelidate/lib/validators";
+import {
+  UITypes,
+  isVirtualCol,
+  RelationTypes,
+  getSystemColumns,
+} from "nocodb-sdk";
+import VirtualHeaderCell from "../components/virtualHeaderCell";
+import HeaderCell from "../components/headerCell";
+import VirtualCell from "../components/virtualCell";
+import EditableCell from "../components/editableCell";
+import Editable from "../components/editable";
+import EditColumn from "../components/editColumn";
+import form from "../mixins/form";
 
 // todo: generate hideCols based on default values
-const hiddenCols = ['created_at', 'updated_at']
+const hiddenCols = ["created_at", "updated_at"];
 
 export default {
-  name: 'FormView',
+  name: "FormView",
   components: {
     EditColumn,
     Editable,
@@ -479,14 +562,23 @@ export default {
     VirtualCell,
     HeaderCell,
     VirtualHeaderCell,
-    draggable
+    draggable,
   },
   mixins: [form, validationMixin],
   props: [
-    'meta', 'availableColumns', 'nodes',
-    'sqlUi', 'formParams', 'showFields',
-    'fieldsOrder', 'allColumns', 'dbAlias',
-    'api', 'id', 'viewId', 'viewTitle'
+    "meta",
+    "availableColumns",
+    "nodes",
+    "sqlUi",
+    "formParams",
+    "showFields",
+    "fieldsOrder",
+    "allColumns",
+    "dbAlias",
+    "api",
+    "id",
+    "viewId",
+    "viewTitle",
   ],
   data: () => ({
     isVirtualCol,
@@ -503,385 +595,427 @@ export default {
     virtual: {},
     formColumns: [],
     fields: [],
-    view: {}
+    view: {},
     // hiddenColumns: []
   }),
   validations() {
     const obj = {
       localState: {},
-      virtual: {}
-    }
+      virtual: {},
+    };
     for (const column of this.columns) {
-      if (!this.localParams || !this.localParams.fields || !this.localParams.fields[column.title]) {
-        continue
+      if (
+        !this.localParams ||
+        !this.localParams.fields ||
+        !this.localParams.fields[column.title]
+      ) {
+        continue;
       }
-      if (!column.virtual && (((column.rqd || column.notnull) && !column.cdf) || (column.pk && !(column.ai || column.default)) || this.localParams.fields[column.title].required)) {
-        obj.localState[column.title] = { required }
+      if (
+        !column.virtual &&
+        (((column.rqd || column.notnull) && !column.cdf) ||
+          (column.pk && !(column.ai || column.default)) ||
+          this.localParams.fields[column.title].required)
+      ) {
+        obj.localState[column.title] = { required };
       } else if (column.bt) {
-        const col = this.meta.columns.find(c => c.column_name === column.bt.column_name)
-        if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
-          obj.localState[col.title] = { required }
+        const col = this.meta.columns.find(
+          (c) => c.column_name === column.bt.column_name
+        );
+        if (
+          (col.rqd && !col.default) ||
+          this.localParams.fields[column.title].required
+        ) {
+          obj.localState[col.title] = { required };
         }
-      } else if (column.virtual && this.localParams.fields[column.title].required && (column.mm || column.hm)) {
+      } else if (
+        column.virtual &&
+        this.localParams.fields[column.title].required &&
+        (column.mm || column.hm)
+      ) {
         obj.virtual[column.title] = {
           minLength: minLength(1),
-          required
-        }
+          required,
+        };
       }
     }
 
-    return obj
+    return obj;
   },
   computed: {
     systemFieldsIds() {
-      return getSystemColumns(this.fields).map(c => c.fk_column_id)
+      return getSystemColumns(this.fields).map((c) => c.fk_column_id);
     },
     emailMe: {
       get() {
         try {
-          const data = JSON.parse(this.view.email)
-          return data[this.$store.state.users.user.email]
-        } catch (e) {
-        }
-        return false
+          const data = JSON.parse(this.view.email);
+          return data[this.$store.state.users.user.email];
+        } catch (e) {}
+        return false;
       },
       set(v) {
-        let data = {}
+        let data = {};
         try {
-          data = JSON.parse(this.view.email) || {}
-        } catch (e) {
-        }
-        data[this.$store.state.users.user.email] = v
-        this.view.email = JSON.stringify(data)
-        this.updateView()
-        this.checkSMTPStatus()
-      }
+          data = JSON.parse(this.view.email) || {};
+        } catch (e) {}
+        data[this.$store.state.users.user.email] = v;
+        this.view.email = JSON.stringify(data);
+        this.updateView();
+        this.checkSMTPStatus();
+      },
     },
     allColumnsLoc() {
-      return this.fields// this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name))
+      return this.fields; // this.mets.columns.filter(c => !hiddenCols.includes(c.column_name) && !(c.pk && c.ai) && this.meta.belongsTo.every(bt => c.column_name !== bt.column_name))
     },
     isEditable() {
-      return this._isUIAllowed('editFormView')
+      return this._isUIAllowed("editFormView");
     },
     localParams: {
       get() {
-        return this.formParams || {}
+        return this.formParams || {};
       },
       set(params) {
-        this.$emit('update:formParams', params)
-      }
+        this.$emit("update:formParams", params);
+      },
     },
     hiddenColumns: {
       get() {
-        return this.fields.filter(f => !f.show && !this.systemFieldsIds.includes(f.fk_column_id))
+        return this.fields.filter(
+          (f) => !f.show && !this.systemFieldsIds.includes(f.fk_column_id)
+        );
       },
-      set(v) {
-      }
+      set(v) {},
     },
     columns: {
       get() {
-        return this.fields.filter(f => f.show).sort((a, b) => a.order - b.order)
+        return this.fields
+          .filter((f) => f.show)
+          .sort((a, b) => a.order - b.order);
       },
-      set(v) {
-      }
-    }
+      set(v) {},
+    },
   },
   watch: {
-    'meta.columns'() {
+    "meta.columns"() {
       this.meta.columns.forEach((c) => {
-        this.localParams.fields[c.title] = this.localParams.fields[c.title] || {}
-      })
+        this.localParams.fields[c.title] =
+          this.localParams.fields[c.title] || {};
+      });
     },
     submitted(val) {
       if (val && this.view.show_blank_form) {
-        this.secondsRemain = 5
+        this.secondsRemain = 5;
         const intvl = setInterval(() => {
           if (--this.secondsRemain < 0) {
-            this.submitted = false
-            clearInterval(intvl)
+            this.submitted = false;
+            clearInterval(intvl);
           }
-        }, 1000)
+        }, 1000);
       }
-    }
+    },
   },
   created() {
-    this.loadView()
+    this.loadView();
   },
   mounted() {
-    const localParams = Object.assign({
-      name: this.meta.title,
-      description: 'Form view description',
-      submit: {},
-      emailMe: {},
-      fields: {}
-    }, this.localParams)
+    const localParams = Object.assign(
+      {
+        name: this.meta.title,
+        description: "Form view description",
+        submit: {},
+        emailMe: {},
+        fields: {},
+      },
+      this.localParams
+    );
     this.availableColumns.forEach((c) => {
-      localParams.fields[c.title] = localParams.fields[c.title] || {}
-    })
-    this.localParams = localParams
+      localParams.fields[c.title] = localParams.fields[c.title] || {};
+    });
+    this.localParams = localParams;
     // this.columns = [...this.availableColumns]
     // this.hiddenColumns = this.meta.columns.filter(c => this.availableColumns.find(c1 => c.column_name === c1.column_name && c.title === c1.title))
   },
   methods: {
     onMove(event) {
-      const {
-        newIndex,
-        element,
-        oldIndex
-      } = (event.added || event.moved || event.removed)
+      const { newIndex, element, oldIndex } =
+        event.added || event.moved || event.removed;
 
       if (event.added) {
-        this.$set(element, 'show', true)
+        this.$set(element, "show", true);
       }
 
       if (event.removed) {
-        this.$set(element, 'show', false)
-        this.saveOrUpdateOrderOrVisibility(element, oldIndex)
+        this.$set(element, "show", false);
+        this.saveOrUpdateOrderOrVisibility(element, oldIndex);
       } else {
         if (!this.columns.length || this.columns.length === 1) {
-          this.$set(element, 'order', 1)
+          this.$set(element, "order", 1);
         } else if (this.columns.length - 1 === newIndex) {
-          this.$set(element, 'order', this.columns[newIndex - 1].order + 1)
+          this.$set(element, "order", this.columns[newIndex - 1].order + 1);
         } else if (newIndex === 0) {
-          this.$set(element, 'order', this.columns[1].order / 2)
+          this.$set(element, "order", this.columns[1].order / 2);
         } else {
-          this.$set(element, 'order', (
-            this.columns[newIndex - 1].order + this.columns[newIndex + 1].order) / 2
-          )
+          this.$set(
+            element,
+            "order",
+            (this.columns[newIndex - 1].order +
+              this.columns[newIndex + 1].order) /
+              2
+          );
         }
-        this.saveOrUpdateOrderOrVisibility(element, newIndex)
+        this.saveOrUpdateOrderOrVisibility(element, newIndex);
       }
 
-      this.$tele.emit('form-view:drag')
+      this.$e("a:form-view:reorder");
     },
 
     async saveOrUpdateOrderOrVisibility(field, i) {
-      const {
-        fk_view_id,
-        fk_column_id,
-        order,
-        show,
-        id
-      } = field
+      const { fk_view_id, fk_column_id, order, show, id } = field;
 
       if (id) {
         await this.$api.dbViewColumn.update(this.viewId, field.id, {
           fk_view_id,
           fk_column_id,
           order,
-          show
-        })
+          show,
+        });
       } else {
-        field.id = (await this.$api.dbViewColumn.create(this.viewId, {
-          fk_view_id,
-          fk_column_id,
-          order,
-          show
-        })).id
+        field.id = (
+          await this.$api.dbViewColumn.create(this.viewId, {
+            fk_view_id,
+            fk_column_id,
+            order,
+            show,
+          })
+        ).id;
       }
-      this.$emit('update:fieldsOrder', this.fields.map(c => c.title))
+      this.$emit(
+        "update:fieldsOrder",
+        this.fields.map((c) => c.title)
+      );
     },
     async updateColMeta(col, i) {
       // todo: introduce debounce to avoid consecutive api call
       if (col.id) {
-        await this.$api.dbView.formColumnUpdate(col.id, col)
+        await this.$api.dbView.formColumnUpdate(col.id, col);
       }
     },
     async updateView() {
       if (this.view.subheading?.length > 255) {
-        this.$toast.error('Data too long for Form Description').goAway(3000)
-        return
+        this.$toast.error("Data too long for Form Description").goAway(3000);
+        return;
       }
-      await this.$api.dbView.formUpdate(this.viewId, this.view)
+      await this.$api.dbView.formUpdate(this.viewId, this.view);
     },
     async loadView() {
-      const {
-        columns,
-        ...view
-      } = (await this.$api.dbView.formRead(this.viewId))
-      this.view = view
-      this.formColumns = columns
-      let order = 1
-      const fieldById = this.formColumns.reduce((o, f) => ({
-        ...o,
-        [f.fk_column_id]: f
-      }), {})
-
-      const meta = this.$store.state.meta.metas[this.meta.id]
-      this.fields = meta.columns.map(c => ({
-        ...c,
-        fk_column_id: c.id,
-        fk_view_id: this.viewId,
-        ...(fieldById[c.id] ? fieldById[c.id] : {}),
-        order: (fieldById[c.id] && fieldById[c.id].order) || order++,
-        id: (fieldById[c.id] && fieldById[c.id].id)
-      })
-      ).sort((a, b) => a.order - b.order)
+      const { columns, ...view } = await this.$api.dbView.formRead(this.viewId);
+      this.view = view;
+      this.formColumns = columns;
+      let order = 1;
+      const fieldById = this.formColumns.reduce(
+        (o, f) => ({
+          ...o,
+          [f.fk_column_id]: f,
+        }),
+        {}
+      );
+
+      const meta = this.$store.state.meta.metas[this.meta.id];
+      this.fields = meta.columns
+        .map((c) => ({
+          ...c,
+          fk_column_id: c.id,
+          fk_view_id: this.viewId,
+          ...(fieldById[c.id] ? fieldById[c.id] : {}),
+          order: (fieldById[c.id] && fieldById[c.id].order) || order++,
+          id: fieldById[c.id] && fieldById[c.id].id,
+        }))
+        .sort((a, b) => a.order - b.order);
     },
     hideColumn(i) {
       if (this.isDbRequired(this.columns[i])) {
-        this.$toast.info('Required field can\'t be removed').goAway(3000)
-        return
+        this.$toast.info("Required field can't be removed").goAway(3000);
+        return;
       }
 
-      this.saveOrUpdateOrderOrVisibility({
-        ...this
-          .columns[i],
-        show: false
-      }, i)
-      this.$set(this.columns[i], 'show', false)
+      this.saveOrUpdateOrderOrVisibility(
+        {
+          ...this.columns[i],
+          show: false,
+        },
+        i
+      );
+      this.$set(this.columns[i], "show", false);
 
-      this.$tele.emit('form-view:hide-columns')
+      this.$e("a:form-view:hide-columns");
       // this.columns = this.columns.filter((_, j) => i !== j)
     },
     async addAllColumns() {
       for (const col of this.fields) {
         if (!this.systemFieldsIds.includes(col.fk_column_id)) {
-          this.$set(col, 'show', true)
+          this.$set(col, "show", true);
         }
       }
       await this.$api.dbView.showAllColumn(this.viewId, {
-        ignoreIds: this.systemFieldsIds
-      })
+        ignoreIds: this.systemFieldsIds,
+      });
       // this.columns = [...this.allColumnsLoc]
-      this.$tele.emit('form-view:add-all')
+      this.$e("a:form-view:add-all");
     },
     async removeAllColumns() {
       for (const col of this.fields) {
         if (this.isDbRequired(col)) {
-          continue
+          continue;
         }
-        this.$set(col, 'show', false)
+        this.$set(col, "show", false);
       }
       await this.$api.dbView.hideAllColumn(this.viewId, {
-        ignoreIds: this.fields.filter(this.isDbRequired).map(f => f.fk_column_id)
-      })
-      this.$tele.emit('form-view:remove-all')
+        ignoreIds: this.fields
+          .filter(this.isDbRequired)
+          .map((f) => f.fk_column_id),
+      });
+      this.$e("a:form-view:remove-all");
     },
     isDbRequired(column) {
       if (hiddenCols.includes(column.fk_column_id)) {
-        return false
+        return false;
       }
 
       let isRequired =
-        (
-          // confirm column is not virtual
-          !isVirtualCol(column) &&
+        // confirm column is not virtual
+        (!isVirtualCol(column) &&
           // column required / not null
           column.rqd &&
           // column default value
           !column.cdf &&
           // confirm it's not foreign key
           !this.meta.columns.some(
-            c => c.uidt === UITypes.LinkToAnotherRecord &&
+            (c) =>
+              c.uidt === UITypes.LinkToAnotherRecord &&
               c.colOptions.type === RelationTypes.BELONGS_TO &&
               column.fk_column_id === c.colOptions.fk_child_column_id
           )) ||
         // primary column
-        (column.pk && !column.ai && !column.cdf)
-      if (column.uidt === UITypes.LinkToAnotherRecord && column.colOptions.type === RelationTypes.BELONGS_TO) {
-        const col = this.meta.columns.find(c => c.id === column.colOptions.fk_child_column_id)
-        if ((col.rqd && !col.default) || this.localParams.fields[column.title].required) {
-          isRequired = true
+        (column.pk && !column.ai && !column.cdf);
+      if (
+        column.uidt === UITypes.LinkToAnotherRecord &&
+        column.colOptions.type === RelationTypes.BELONGS_TO
+      ) {
+        const col = this.meta.columns.find(
+          (c) => c.id === column.colOptions.fk_child_column_id
+        );
+        if (
+          (col.rqd && !col.default) ||
+          this.localParams.fields[column.title].required
+        ) {
+          isRequired = true;
         }
       }
 
-      return isRequired
+      return isRequired;
     },
     async checkSMTPStatus() {
       if (this.emailMe) {
-        const emailPluginActive = (await this.$api.plugin.status('SMTP'))
+        const emailPluginActive = await this.$api.plugin.status("SMTP");
         if (!emailPluginActive) {
-          this.emailMe = false
-          this.$toast.info('Please activate SMTP plugin in App store for enabling email notification').goAway(5000)
+          this.emailMe = false;
+          this.$toast
+            .info(
+              "Please activate SMTP plugin in App store for enabling email notification"
+            )
+            .goAway(5000);
         }
       }
     },
     updateCol(_, column, id) {
-      this.$set(this.localState, column, id)
+      this.$set(this.localState, column, id);
     },
     isActiveRow(col) {
-      return this.activeRow === col.title
+      return this.activeRow === col.title;
     },
     onClickOutside(col) {
-      this.activeRow = this.activeRow === col.title ? null : this.activeRow
+      this.activeRow = this.activeRow === col.title ? null : this.activeRow;
     },
     handleMouseUp(col) {
       if (!this.moved) {
-        const index = this.columns.length
+        const index = this.columns.length;
         // this.columns = [...this.columns, col]
-        col.order = (index ? this.columns[index - 1].order : 0) + 1
-        this.$set(col, 'show', true)
+        col.order = (index ? this.columns[index - 1].order : 0) + 1;
+        this.$set(col, "show", true);
         this.$nextTick(() => {
-          this.saveOrUpdateOrderOrVisibility(col, index)
-        })
+          this.saveOrUpdateOrderOrVisibility(col, index);
+        });
       }
     },
     async onNewColCreation(col) {
-      this.addNewColMenu = false
-      this.addNewColModal = false
-      this.$emit('onNewColCreation', col)
-      await this.$store.dispatch('meta/ActLoadMeta', {
+      this.addNewColMenu = false;
+      this.addNewColModal = false;
+      this.$emit("onNewColCreation", col);
+      await this.$store.dispatch("meta/ActLoadMeta", {
         env: this.nodes.env,
         dbAlias: this.nodes.dbAlias,
         id: this.meta.id,
-        force: true
-      })
+        force: true,
+      });
 
-      await this.loadView()
+      await this.loadView();
 
-      this.$tele.emit('form-view:add-new-field')
+      this.$e("a:form-view:add-new-field");
     },
     async save() {
       try {
-        this.$v.$touch()
+        this.$v.$touch();
         if (this.$v.localState.$invalid) {
-          this.$toast.error('Provide values of all required field').goAway(3000)
+          this.$toast
+            .error("Provide values of all required field")
+            .goAway(3000);
 
-          return
+          return;
         }
 
-        this.loading = true
+        this.loading = true;
 
         let data = await this.$api.dbViewRow.create(
-          'noco',
+          "noco",
           this.projectName,
           this.meta.title,
           this.viewTitle,
           this.localState
-        )
+        );
 
-        data = { ...this.localState, ...data }
+        data = { ...this.localState, ...data };
 
         // save hasmany and manytomany relations from local state
         if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
           for (const vcell of this.$refs.virtual) {
             if (vcell.save) {
-              await vcell.save(data)
+              await vcell.save(data);
             }
           }
         }
 
-        this.virtual = {}
-        this.localState = {}
+        this.virtual = {};
+        this.localState = {};
 
-        this.submitted = true
+        this.submitted = true;
 
-        this.$toast.success(this.localParams.submit.message || 'Saved successfully.', {
-          position: 'bottom-right'
-        }).goAway(3000)
+        this.$toast
+          .success(this.localParams.submit.message || "Saved successfully.", {
+            position: "bottom-right",
+          })
+          .goAway(3000);
       } catch (e) {
-        console.log(e)
-        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000)
+        console.log(e);
+        this.$toast.error(`Failed to update row : ${e.message}`).goAway(3000);
       }
-      this.loading = false
-    }
-  }
-}
+      this.loading = false;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
 .nc-form-wrapper {
   border-radius: 4px;
 
@@ -898,7 +1032,6 @@ export default {
 }
 
 .nc-field-wrapper {
-
   &.active-row {
     border-radius: 4px;
     border: 1px solid var(--v-backgroundColor-darken1);
@@ -912,7 +1045,7 @@ export default {
     right: 10px;
     top: 10px;
     transition: 200ms opacity;
-    z-index: 9
+    z-index: 9;
   }
 
   &.nc-editable:hover {
@@ -929,7 +1062,8 @@ export default {
   font-weight: 700;
 }
 
-.row-col:focus > label, .active-row > label {
+.row-col:focus > label,
+.active-row > label {
   color: var(--v-primary-base);
 }
 
@@ -940,25 +1074,25 @@ export default {
 }
 
 ::v-deep {
-
   .nc-hint {
     padding-left: 3px;
   }
 
-  .nc-required-switch, .nc-switch {
+  .nc-required-switch,
+  .nc-switch {
     .v-input--selection-controls__input {
       transform: scale(0.65) !important;
     }
   }
 
   .v-breadcrumbs__item:nth-child(odd) {
-    font-size: .72rem;
+    font-size: 0.72rem;
     color: grey;
   }
 
   .v-breadcrumbs li:nth-child(even) {
     padding: 0 6px;
-    font-size: .72rem;
+    font-size: 0.72rem;
     color: var(--v-textColor-base);
   }
 
@@ -969,7 +1103,6 @@ export default {
   }
 
   .nc-field-wrapper {
-
     //.required {
     //  & > input,
     //  .xc-input > input,
@@ -992,7 +1125,7 @@ export default {
     div textarea:not(.inputarea) {
       border: 1px solid #7f828b33;
       padding: 1px 5px;
-      font-size: .8rem;
+      font-size: 0.8rem;
       border-radius: 4px;
       min-height: 44px;
 
@@ -1025,17 +1158,19 @@ export default {
     background: var(--v-backgroundColor-base);
   }
 
-  &:active, &:focus {
+  &:active,
+  &:focus {
     border: 1px solid #7f828b33;
   }
 }
 
-.nc-drag-n-drop-to-hide, .nc-drag-n-drop-to-show {
+.nc-drag-n-drop-to-hide,
+.nc-drag-n-drop-to-show {
   border: 2px dashed #c4c4c4;
   border-radius: 4px;
-  font-size: .62rem;
+  font-size: 0.62rem;
 
-  color: grey
+  color: grey;
 }
 
 .nc-form-left-nav {
@@ -1081,7 +1216,7 @@ export default {
 //.nc-field-labels,
 .nc-field-editables {
   max-height: 0;
-  transition: .4s max-height;
+  transition: 0.4s max-height;
   overflow-y: hidden;
   display: block;
 
@@ -1089,5 +1224,4 @@ export default {
     max-height: 500px;
   }
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
index 7ddcd14ed0..b6823424f8 100644
--- a/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
+++ b/packages/nc-gui/components/project/spreadsheet/views/xcGridView.vue
@@ -10,13 +10,17 @@
     <table
       v-if="data"
       class="xc-row-table nc-grid backgroundColorDefault"
-      style=" "
+      style=""
     >
       <thead>
         <tr class="text-left nc-grid-header-row">
           <th
             class="grey-border caption"
-            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4 grey--text text--darken-2'"
+            :class="
+              $store.state.windows.darkTheme
+                ? 'grey darken-3 grey--text text--lighten-1'
+                : 'grey lighten-4 grey--text text--darken-2'
+            "
             style="width: 65px"
           >
             <div class="d-flex align-center">
@@ -25,7 +29,7 @@
                 <v-checkbox
                   v-model="selectAll"
                   class="row-checkbox pt-0 align-self-center my-auto"
-                  :class="{active : selectAll}"
+                  :class="{ active: selectAll }"
                   dense
                 />
               </template>
@@ -33,15 +37,19 @@
             </div>
           </th>
           <th
-            v-for="(col) in availableColumns"
+            v-for="col in availableColumns"
             v-show="showFields[col.title]"
             :key="col.title"
             v-xc-ver-resize
-            class="grey-border caption font-wight-regular  nc-grid-header-cell"
-            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
+            class="grey-border caption font-wight-regular nc-grid-header-cell"
+            :class="
+              $store.state.windows.darkTheme
+                ? 'grey darken-3 grey--text text--lighten-1'
+                : 'grey lighten-4  grey--text text--darken-2'
+            "
             :data-col="col.title"
-            @xcresize="onresize(col.id,$event), log('xcresize')"
-            @xcresizing="onXcResizing(col.title,$event)"
+            @xcresize="onresize(col.id, $event), log('xcresize')"
+            @xcresizing="onXcResizing(col.title, $event)"
             @xcresized="resizingCol = null"
           >
             <!--            :style="columnsWidth[col.title]  ? `min-width:${columnsWidth[col.title]}; max-width:${columnsWidth[col.title]}` : ''"
@@ -77,25 +85,24 @@
           </th>
 
           <th
-            v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')"
-            v-t="['column:add']"
-            :class="$store.state.windows.darkTheme ? 'grey darken-3 grey--text text--lighten-1' : 'grey lighten-4  grey--text text--darken-2'"
-            class="grey-border new-column-header pointer  nc-grid-header-cell"
+            v-if="
+              !isLocked &&
+              !isVirtual &&
+              !isPublicView &&
+              _isUIAllowed('add-column')
+            "
+            v-t="['c:column:add']"
+            :class="
+              $store.state.windows.darkTheme
+                ? 'grey darken-3 grey--text text--lighten-1'
+                : 'grey lighten-4  grey--text text--darken-2'
+            "
+            class="grey-border new-column-header pointer nc-grid-header-cell"
             @click="addNewColMenu = true"
           >
-            <v-icon
-              small
-              @click="addNewColMenu = true"
-            >
-              mdi-plus
-            </v-icon>
-            <v-menu
-              v-model="addNewColMenu"
-              offset-y
-              content-class=""
-              left
-            >
-              <template #activator="{on}">
+            <v-icon small @click="addNewColMenu = true"> mdi-plus </v-icon>
+            <v-menu v-model="addNewColMenu" offset-y content-class="" left>
+              <template #activator="{ on }">
                 <span v-on="on" />
               </template>
               <edit-column
@@ -112,32 +119,33 @@
       </thead>
       <tbody v-click-outside="onClickOutside">
         <tr
-          v-for="({row:rowObj, rowMeta, saving},row) in data"
+          v-for="({ row: rowObj, rowMeta, saving }, row) in data"
           :key="row"
-          class=" nc-grid-row"
+          class="nc-grid-row"
           :class="{
-            'nc-new-row':rowMeta.new,
-            'nc-saved-row':!rowMeta.new,
+            'nc-new-row': rowMeta.new,
+            'nc-saved-row': !rowMeta.new,
           }"
         >
           <td
             style="width: 65px"
             class="caption nc-grid-cell"
-            @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row)"
+            @contextmenu="showRowContextMenu($event, rowObj, rowMeta, row)"
           >
             <div class="d-flex align-center">
               <span
                 v-show="!rowMeta || !rowMeta.selected"
                 class="ml-2 grey--text"
-                :class="{ 'row-no' : !isPublicView }"
-              >{{ row + 1 }}</span>
+                :class="{ 'row-no': !isPublicView }"
+                >{{ row + 1 }}</span
+              >
 
               <template v-if="!isPublicView">
                 <v-checkbox
                   v-if="rowMeta"
                   v-model="rowMeta.selected"
                   class="row-checkbox pt-0 align-self-center my-auto"
-                  :class="{active : rowMeta.selected}"
+                  :class="{ active: rowMeta.selected }"
                   dense
                 />
                 <v-spacer />
@@ -145,8 +153,8 @@
                   v-if="!groupedAggCount[ids[row]] && !isLocked && !saving"
                   color="pink"
                   small
-                  class="row-expand-icon nc-row-expand-icon  mr-1 pointer"
-                  @click="expandRow(row,rowMeta)"
+                  class="row-expand-icon nc-row-expand-icon mr-1 pointer"
+                  @click="expandRow(row, rowMeta)"
                 >
                   mdi-arrow-expand
                 </v-icon>
@@ -154,42 +162,46 @@
               <v-chip
                 v-if="groupedAggCount[ids[row]] && !saving"
                 x-small
-                :color="colors[ groupedAggCount[ids[row]] % colors.length]"
-                @click="expandRow(row,rowMeta)"
+                :color="colors[groupedAggCount[ids[row]] % colors.length]"
+                @click="expandRow(row, rowMeta)"
               >
                 {{ groupedAggCount[ids[row]] }}
               </v-chip>
 
               <template v-if="saving">
                 <v-spacer />
-                <v-icon small>
-                  mdi-spin mdi-loading
-                </v-icon>
+                <v-icon small> mdi-spin mdi-loading </v-icon>
               </template>
             </div>
           </td>
           <td
-            v-for="(columnObj,col) in availableColumns"
+            v-for="(columnObj, col) in availableColumns"
             v-show="showFields[columnObj.title]"
             :key="row + columnObj.title"
             class="cell pointer nc-grid-cell"
             :class="{
-              'active' :!isPublicView && selected.col === col && selected.row === row && isEditable ,
-              'primary-column' : primaryValueColumn === columnObj.title,
+              active:
+                !isPublicView &&
+                selected.col === col &&
+                selected.row === row &&
+                isEditable,
+              'primary-column': primaryValueColumn === columnObj.title,
               'text-center': isCentrallyAligned(columnObj),
-              'required': isRequired(columnObj,rowObj)
+              required: isRequired(columnObj, rowObj),
             }"
             :data-col="columnObj.title"
-            @dblclick="makeEditable(col,row,columnObj.ai,rowMeta)"
-            @click="makeSelected(col,row);"
-            @contextmenu="showRowContextMenu($event,rowObj,rowMeta,row,col, columnObj)"
+            @dblclick="makeEditable(col, row, columnObj.ai, rowMeta)"
+            @click="makeSelected(col, row)"
+            @contextmenu="
+              showRowContextMenu($event, rowObj, rowMeta, row, col, columnObj)
+            "
           >
             <virtual-cell
               v-if="isVirtualCol(columnObj)"
               :password="password"
               :is-public="isPublicView"
               :metas="metas"
-              :is-locked="isLocked "
+              :is-locked="isLocked"
               :column="columnObj"
               :row="rowObj"
               :nodes="nodes"
@@ -199,18 +211,30 @@
               :sql-ui="sqlUi"
               :is-new="rowMeta.new"
               v-on="$listeners"
-              @updateCol="(...args) => updateCol(...args, columnObj.bt && meta.columns.find( c => c.column_name === columnObj.bt.column_name), col, row)"
+              @updateCol="
+                (...args) =>
+                  updateCol(
+                    ...args,
+                    columnObj.bt &&
+                      meta.columns.find(
+                        (c) => c.column_name === columnObj.bt.column_name
+                      ),
+                    col,
+                    row
+                  )
+              "
               @saveRow="onCellValueChange(col, row, columnObj, true)"
             />
 
             <editable-cell
               v-else-if="
-                (isPkAvail ||rowMeta.new) &&
+                ((isPkAvail || rowMeta.new) &&
                   !isView &&
-                  !isLocked
-                  && !isPublicView
-                  && (editEnabled.col === col && editEnabled.row === row)
-                  || enableEditable(columnObj)
+                  !isLocked &&
+                  !isPublicView &&
+                  editEnabled.col === col &&
+                  editEnabled.row === row) ||
+                enableEditable(columnObj)
               "
               v-model="rowObj[columnObj.title]"
               :column="columnObj"
@@ -221,8 +245,8 @@
               :is-locked="isLocked"
               :is-public="isPublicView"
               :view-id="viewId"
-              @save="editEnabled = {};"
-              @cancel="editEnabled = {};"
+              @save="editEnabled = {}"
+              @cancel="editEnabled = {}"
               @update="onCellValueChange(col, row, columnObj, false)"
               @blur="onCellValueChange(col, row, columnObj, true)"
               @input="unsaved = true"
@@ -232,7 +256,9 @@
 
             <table-cell
               v-else
-              :class="{'primary--text' : primaryValueColumn === columnObj.title}"
+              :class="{
+                'primary--text': primaryValueColumn === columnObj.title,
+              }"
               :selected="selected.col === col && selected.row === row"
               :is-locked="isLocked"
               :column="columnObj"
@@ -240,19 +266,33 @@
               :db-alias="nodes.dbAlias"
               :value="rowObj[columnObj.title]"
               :sql-ui="sqlUi"
-              @enableedit="makeSelected(col,row);makeEditable(col,row,columnObj.ai, rowMeta)"
+              @enableedit="
+                makeSelected(col, row);
+                makeEditable(col, row, columnObj.ai, rowMeta);
+              "
             />
           </td>
         </tr>
-        <tr v-if="!isView && !isLocked && !isPublicView && isEditable && relationType !== 'bt'">
-          <td v-t="['record:add:trigger']" :colspan="visibleColLength + 1" class="text-left pointer nc-grid-add-new-cell" @click="insertNewRow(true)">
+        <tr
+          v-if="
+            !isView &&
+            !isLocked &&
+            !isPublicView &&
+            isEditable &&
+            relationType !== 'bt'
+          "
+        >
+          <td
+            v-t="['c:row:add:grid-bottom']"
+            :colspan="visibleColLength + 1"
+            class="text-left pointer nc-grid-add-new-cell"
+            @click="insertNewRow(true)"
+          >
             <v-tooltip top>
-              <template #activator="{on}">
-                <v-icon small color="pink" v-on="on">
-                  mdi-plus
-                </v-icon>
-                <span class="ml-1 caption grey--text ">
-                  {{ $t('activity.addRow') }}
+              <template #activator="{ on }">
+                <v-icon small color="pink" v-on="on"> mdi-plus </v-icon>
+                <span class="ml-1 caption grey--text">
+                  {{ $t("activity.addRow") }}
                 </span>
               </template>
               <span class="caption"> Add new row</span>
@@ -266,30 +306,30 @@
     <!--    <div is="style" v-html="resizeColStyle" />-->
     <dynamic-style>
       <template v-if="resizingCol">
-        [data-col="{{ resizingCol }}"]{min-width:{{ resizingColWidth }};max-width:{{
+        [data-col="{{ resizingCol }}"]{min-width:{{
           resizingColWidth
-        }};width:{{ resizingColWidth }};}
+        }};max-width:{{ resizingColWidth }};width:{{ resizingColWidth }};}
       </template>
     </dynamic-style>
   </div>
 </template>
 
 <script>
-import { isVirtualCol } from 'nocodb-sdk'
-import HeaderCell from '../components/headerCell'
-import EditableCell from '../components/editableCell'
-import EditColumn from '../components/editColumn'
+import { isVirtualCol } from "nocodb-sdk";
+import HeaderCell from "../components/headerCell";
+import EditableCell from "../components/editableCell";
+import EditColumn from "../components/editColumn";
 // import columnStyling from '../helpers/columnStyling'
-import VirtualCell from '../components/virtualCell'
-import VirtualHeaderCell from '../components/virtualHeaderCell'
-import colors from '@/mixins/colors'
-import TableCell from '@/components/project/spreadsheet/components/cell'
-import DynamicStyle from '@/components/dynamicStyle'
-import { UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
-import { copyTextToClipboard } from '~/helpers/xutils'
+import VirtualCell from "../components/virtualCell";
+import VirtualHeaderCell from "../components/virtualHeaderCell";
+import colors from "@/mixins/colors";
+import TableCell from "@/components/project/spreadsheet/components/cell";
+import DynamicStyle from "@/components/dynamicStyle";
+import { UITypes } from "~/components/project/spreadsheet/helpers/uiTypes";
+import { copyTextToClipboard } from "~/helpers/xutils";
 
 export default {
-  name: 'XcGridView',
+  name: "XcGridView",
   components: {
     DynamicStyle,
     VirtualHeaderCell,
@@ -297,7 +337,7 @@ export default {
     TableCell,
     EditColumn,
     EditableCell,
-    HeaderCell
+    HeaderCell,
   },
   mixins: [colors],
   props: {
@@ -325,7 +365,7 @@ export default {
     // columnsWidth: { type: Object },
     isPkAvail: Boolean,
     password: String,
-    viewId: String
+    viewId: String,
   },
   data: () => ({
     resizingCol: null,
@@ -336,135 +376,168 @@ export default {
     addNewColMenu: false,
     selected: {
       row: null,
-      col: null
+      col: null,
     },
     editEnabled: {
       row: null,
-      col: null
+      col: null,
     },
     aggCount: [],
     dragOver: false,
     gridViewCols: {},
-    unsaved: false
+    unsaved: false,
   }),
   computed: {
     selectAll: {
       get() {
-        return !!(this.data.length && this.data.every(d => d.rowMeta && d.rowMeta.selected))
+        return !!(
+          this.data.length &&
+          this.data.every((d) => d.rowMeta && d.rowMeta.selected)
+        );
       },
       set(v) {
         for (const d of this.data) {
-          this.$set(d.rowMeta, 'selected', v)
+          this.$set(d.rowMeta, "selected", v);
         }
-      }
+      },
     },
     ids() {
-      return (this.meta &&
-        this.meta.columns &&
-        this.data &&
-        this.data.map(({ oldRow }) => this.meta.columns.filter(c => c.pk).map(c => oldRow[c.title]).join('___'))) || []
+      return (
+        (this.meta &&
+          this.meta.columns &&
+          this.data &&
+          this.data.map(({ oldRow }) =>
+            this.meta.columns
+              .filter((c) => c.pk)
+              .map((c) => oldRow[c.title])
+              .join("___")
+          )) ||
+        []
+      );
     },
     haveHasManyrelation() {
-      return !!Object.keys(this.hasMany).length
+      return !!Object.keys(this.hasMany).length;
     },
     colLength() {
-      return (this.availableColumns && this.availableColumns.length) || 0
+      return (this.availableColumns && this.availableColumns.length) || 0;
     },
     rowLength() {
-      return (this.data && this.data.length) || 0
+      return (this.data && this.data.length) || 0;
     },
     availColNames() {
-      return (this.availableColumns && this.availableColumns.map(c => c.title)) || []
+      return (
+        (this.availableColumns && this.availableColumns.map((c) => c.title)) ||
+        []
+      );
     },
     groupedAggCount() {
       // eslint-disable-next-line camelcase
       return this.aggCount
-        ? this.aggCount.reduce((o, {
-          row_id,
-          count
-        }) => ({
-          ...o,
-          [row_id]: count
-        }), {})
-        : {}
+        ? this.aggCount.reduce(
+            (o, { row_id, count }) => ({
+              ...o,
+              [row_id]: count,
+            }),
+            {}
+          )
+        : {};
     },
     style() {
-      let style = ''
+      let style = "";
       for (const c of this.availableColumns) {
-        const val = (this.gridViewCols && this.gridViewCols[c.id] && this.gridViewCols[c.id].width) || '200px'
+        const val =
+          (this.gridViewCols &&
+            this.gridViewCols[c.id] &&
+            this.gridViewCols[c.id].width) ||
+          "200px";
 
         if (val && c.key !== this.resizingCol) {
-          style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`
+          style += `[data-col="${c.title}"]{min-width:${val};max-width:${val};width: ${val};}`;
         }
       }
 
-      return style
-    }
+      return style;
+    },
     // resizeColStyle() {
     //   return this.resizingCol ? ` [data-col="${this.resizingCol}"]{min-width:${this.resizingColWidth};max-width:${this.resizingColWidth};width:${this.resizingColWidth};}` : ''
     // }
   },
   watch: {
     data() {
-      this.xcAuditModelCommentsCount()
+      this.xcAuditModelCommentsCount();
     },
     viewId(v, o) {
       if (v !== o) {
-        this.loadGridViewCols()
+        this.loadGridViewCols();
       }
-    }
+    },
   },
   mounted() {
     // this.calculateColumnWidth()
   },
   created() {
-    document.addEventListener('keydown', this.onKeyDown)
-    this.loadGridViewCols()
-    this.xcAuditModelCommentsCount()
-    const self = this
-    window.addEventListener('beforeunload', function() {
+    document.addEventListener("keydown", this.onKeyDown);
+    this.loadGridViewCols();
+    this.xcAuditModelCommentsCount();
+    const self = this;
+    window.addEventListener("beforeunload", function () {
       if (self.unsaved) {
         if (self.editEnabled.row != null && self.editEnabled.row != null) {
-          const columnObj = self.availableColumns[self.editEnabled.col]
-          self.onCellValueChange(self.editEnabled.col, self.editEnabled.row, columnObj, true)
+          const columnObj = self.availableColumns[self.editEnabled.col];
+          self.onCellValueChange(
+            self.editEnabled.col,
+            self.editEnabled.row,
+            columnObj,
+            true
+          );
         }
       }
-    })
+    });
   },
   beforeDestroy() {
-    document.removeEventListener('keydown', this.onKeyDown)
+    document.removeEventListener("keydown", this.onKeyDown);
   },
   methods: {
     async loadGridViewCols() {
       if (!this.viewId) {
-        return
+        return;
       }
-      const colsData = (await this.$api.dbView.gridColumnsList(this.viewId))
-      this.gridViewCols = colsData.reduce((o, col) => ({
-        ...o,
-        [col.fk_column_id]: col
-      }), {})
+      const colsData = await this.$api.dbView.gridColumnsList(this.viewId);
+      this.gridViewCols = colsData.reduce(
+        (o, col) => ({
+          ...o,
+          [col.fk_column_id]: col,
+        }),
+        {}
+      );
     },
     onFileDrop(event) {
-      this.$emit('drop', event)
+      this.$emit("drop", event);
     },
     isRequired(_columnObj, rowObj, ignoreCurrentValue = false) {
       if (this.isPublicView || this.loading) {
-        return false
+        return false;
       }
 
-      let columnObj = _columnObj
+      let columnObj = _columnObj;
       if (columnObj.bt) {
-        columnObj = this.meta.columns.find(c => c.column_name === columnObj.bt.column_name)
+        columnObj = this.meta.columns.find(
+          (c) => c.column_name === columnObj.bt.column_name
+        );
       }
 
-      return columnObj && (columnObj.rqd &&
-        (ignoreCurrentValue || rowObj[columnObj.title] === undefined || rowObj[columnObj.title] === null) &&
-        !columnObj.default)
+      return (
+        columnObj &&
+        columnObj.rqd &&
+        (ignoreCurrentValue ||
+          rowObj[columnObj.title] === undefined ||
+          rowObj[columnObj.title] === null) &&
+        !columnObj.default
+      );
     },
     updateCol(row, column, value, columnObj, colIndex, rowIndex) {
-      this.$set(row, column, value)
-      this.onCellValueChange(colIndex, rowIndex, columnObj, true)
+      this.$set(row, column, value);
+      this.onCellValueChange(colIndex, rowIndex, columnObj, true);
     },
     calculateColumnWidth() {
       // setTimeout(() => {
@@ -483,20 +556,22 @@ export default {
       // }, 2000)
     },
     isCentrallyAligned(col) {
-      return !['SingleLineText',
-        'LongText',
-        'Attachment',
-        'Date',
-        'Time',
-        'Email',
-        'URL',
-        'DateTime',
-        'CreateTime',
-        'LastModifiedTime'].includes(col.uidt)
+      return ![
+        "SingleLineText",
+        "LongText",
+        "Attachment",
+        "Date",
+        "Time",
+        "Email",
+        "URL",
+        "DateTime",
+        "CreateTime",
+        "LastModifiedTime",
+      ].includes(col.uidt);
     },
     async xcAuditModelCommentsCount() {
       if (this.isPublicView || !this.data || !this.data.length) {
-        return
+        return;
       }
       // const aggCount = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   dbAlias: this.nodes.dbAlias
@@ -508,104 +583,118 @@ export default {
       // }])
       //
 
-      this.aggCount = (await this.$api.utils.commentCount({
+      this.aggCount = await this.$api.utils.commentCount({
         ids: this.data.map(({ row: r }) => {
-          return this.meta.columns.filter(c => c.pk).map(c => r[c.title]).join('___')
+          return this.meta.columns
+            .filter((c) => c.pk)
+            .map((c) => r[c.title])
+            .join("___");
         }),
-        fk_model_id: this.meta.id
-      }))
+        fk_model_id: this.meta.id,
+      });
     },
 
     async onKeyDown(e) {
-      if (this.selected.col === null || this.selected.row === null || this.isLocked) {
-        return
+      if (
+        this.selected.col === null ||
+        this.selected.row === null ||
+        this.isLocked
+      ) {
+        return;
       }
 
       switch (e.keyCode) {
         // tab
         case 9:
-          e.preventDefault()
+          e.preventDefault();
           this.editEnabled = {
             col: null,
-            row: null
-          }
+            row: null,
+          };
           if (e.shiftKey) {
             if (this.selected.col > 0) {
-              this.selected.col--
+              this.selected.col--;
             } else if (this.selected.row > 0) {
-              this.selected.row--
-              this.selected.col = this.colLength - 1
+              this.selected.row--;
+              this.selected.col = this.colLength - 1;
             }
           } else if (this.selected.col < this.colLength - 1) {
-            this.selected.col++
+            this.selected.col++;
           } else if (this.selected.row < this.rowLength - 1) {
-            this.selected.row++
-            this.selected.col = 0
+            this.selected.row++;
+            this.selected.col = 0;
           }
 
-          break
+          break;
         // delete
-        case 46: {
-          if (this.editEnabled.col != null && this.editEnabled.row != null) {
-            return
-          }
+        case 46:
+          {
+            if (this.editEnabled.col != null && this.editEnabled.row != null) {
+              return;
+            }
 
-          const rowObj = this.data[this.selected.row].row
-          const columnObj = this.availableColumns[this.selected.col]
+            const rowObj = this.data[this.selected.row].row;
+            const columnObj = this.availableColumns[this.selected.col];
 
-          if (
-            // this.isRequired(columnObj, rowObj, true) ||
-            columnObj.virtual) {
-            return
-          }
+            if (
+              // this.isRequired(columnObj, rowObj, true) ||
+              columnObj.virtual
+            ) {
+              return;
+            }
 
-          this.$set(rowObj, columnObj.title, null)
-          // update/save cell value
-          this.onCellValueChange(this.selected.col, this.selected.row, columnObj, true)
-        }
-          break
+            this.$set(rowObj, columnObj.title, null);
+            // update/save cell value
+            this.onCellValueChange(
+              this.selected.col,
+              this.selected.row,
+              columnObj,
+              true
+            );
+          }
+          break;
         // left
         case 37:
           if (this.selected.col > 0) {
-            this.selected.col--
+            this.selected.col--;
           }
-          break
+          break;
         // right
         case 39:
           if (this.selected.col < this.colLength - 1) {
-            this.selected.col++
+            this.selected.col++;
           }
-          break
+          break;
         // up
         case 38:
           if (this.selected.row > 0) {
-            this.selected.row--
+            this.selected.row--;
           }
-          break
+          break;
         // down
         case 40:
           if (this.selected.row < this.rowLength - 1) {
-            this.selected.row++
+            this.selected.row++;
           }
-          break
+          break;
         // enter
         case 13:
-          this.makeEditable(this.selected.col, this.selected.row)
-          break
+          this.makeEditable(this.selected.col, this.selected.row);
+          break;
         default: {
           if (this.editEnabled.col != null && this.editEnabled.row != null) {
-            return
+            return;
           }
 
-          const rowObj = this.data[this.selected.row].row
-          const columnObj = this.availableColumns[this.selected.col]
+          const rowObj = this.data[this.selected.row].row;
+          const columnObj = this.availableColumns[this.selected.col];
 
           if (e.metaKey || e.ctrlKey) {
             switch (e.keyCode) {
               // copy - ctrl/cmd +c
               case 67:
-                copyTextToClipboard(rowObj[columnObj.title] || '')
-                break
+                copyTextToClipboard(rowObj[columnObj.title] || "");
+                break;
               // // paste ctrl/cmd + v
               // case 86: {
               //   const text = await navigator.clipboard.readText()
@@ -615,19 +704,25 @@ export default {
             }
           }
 
-          if (e.ctrlKey ||
-            e.altKey ||
-            e.metaKey) {
-            return
+          if (e.ctrlKey || e.altKey || e.metaKey) {
+            return;
           }
 
           if (e.key && e.key.length === 1) {
             if (!this.isPkAvail && !this.data[this.selected.row].rowMeta.new) {
-              return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
+              return this.$toast
+                .info(
+                  "Update not allowed for table which doesn't have primary Key"
+                )
+                .goAway(3000);
             }
 
-            this.$set(this.data[this.selected.row].row, this.availableColumns[this.selected.col].title, '')
-            this.editEnabled = { ...this.selected }
+            this.$set(
+              this.data[this.selected.row].row,
+              this.availableColumns[this.selected.col].title,
+              ""
+            );
+            this.editEnabled = { ...this.selected };
           }
         }
       }
@@ -638,135 +733,152 @@ export default {
         this.meta.columns[this.selected.col] &&
         this.meta.columns[this.selected.col].virtual
       ) {
-        return
+        return;
       }
-      this.selected.col = null
-      this.selected.row = null
-      this.editEnabled.col = null
-      this.editEnabled.row = null
+      this.selected.col = null;
+      this.selected.row = null;
+      this.editEnabled.col = null;
+      this.editEnabled.row = null;
     },
     onNewColCreation(col, oldCol) {
-      this.addNewColMenu = false
-      this.addNewColModal = false
-      this.$emit('onNewColCreation', col, oldCol)
+      this.addNewColMenu = false;
+      this.addNewColModal = false;
+      this.$emit("onNewColCreation", col, oldCol);
     },
     expandRow(...args) {
-      this.$emit('expandRow', ...args)
-      this.$tele.emit('record:expand-row')
+      this.$emit("expandRow", ...args);
+      this.$e("c:row-expand");
     },
     showRowContextMenu($event, rowObj, rowMeta, row, ...rest) {
-      this.$emit('showRowContextMenu', $event, rowObj, rowMeta, row, ...rest)
+      this.$emit("showRowContextMenu", $event, rowObj, rowMeta, row, ...rest);
     },
     onCellValueChange(col, row, column, saved) {
-      this.$emit('onCellValueChange', col, row, column, saved)
+      this.$emit("onCellValueChange", col, row, column, saved);
       if (saved) {
-        this.unsaved = false
+        this.unsaved = false;
       }
     },
     navigateToNext() {
       if (this.selected.row < this.rowLength - 1) {
-        this.selected.row++
+        this.selected.row++;
       }
     },
     navigateToPrev() {
       if (this.selected.row > 0) {
-        this.selected.row--
+        this.selected.row--;
       }
     },
     makeSelected(col, row) {
       if (this.selected.col !== col || this.selected.row !== row) {
         this.selected = {
           col,
-          row
-        }
-        this.editEnabled = {}
+          row,
+        };
+        this.editEnabled = {};
       }
     },
     makeEditable(col, row, _, rowMeta) {
       if (this.isPublicView || !this.isEditable || this.isView) {
-        return
+        return;
       }
 
       if (!this.isPkAvail && !rowMeta.new) {
-        return this.$toast.info('Update not allowed for table which doesn\'t have primary Key').goAway(3000)
+        return this.$toast
+          .info("Update not allowed for table which doesn't have primary Key")
+          .goAway(3000);
       }
       if (this.availableColumns[col].ai) {
-        return this.$toast.info('Auto Increment field is not editable').goAway(3000)
+        return this.$toast
+          .info("Auto Increment field is not editable")
+          .goAway(3000);
       }
       if (this.availableColumns[col].pk && !this.data[row].rowMeta.new) {
-        return this.$toast.info('Editing primary key not supported').goAway(3000)
+        return this.$toast
+          .info("Editing primary key not supported")
+          .goAway(3000);
       }
       if (this.editEnabled.col !== col || this.editEnabled.row !== row) {
         this.editEnabled = {
           col,
-          row
-        }
+          row,
+        };
       }
     },
     enableEditable(column) {
-      return ((column && column.uidt === UITypes.Attachment) ||
+      return (
+        (column && column.uidt === UITypes.Attachment) ||
         (column && column.uidt === UITypes.SingleSelect) ||
         (column && column.uidt === UITypes.MultiSelect) ||
         (column && column.uidt === UITypes.DateTime) ||
         (column && column.uidt === UITypes.Date) ||
         (column && column.uidt === UITypes.Time) ||
-        (this.sqlUi && column.dt && this.sqlUi.getAbstractType((column)) === 'boolean')
-      )
+        (this.sqlUi &&
+          column.dt &&
+          this.sqlUi.getAbstractType(column) === "boolean")
+      );
     },
     insertNewRow(atEnd = false, expand = false) {
-      this.$emit('insertNewRow', atEnd, expand)
+      this.$emit("insertNewRow", atEnd, expand);
     },
     async onresize(colId, size) {
-      const gridColId = this.gridViewCols && this.gridViewCols[colId] && this.gridViewCols[colId].id
+      const gridColId =
+        this.gridViewCols &&
+        this.gridViewCols[colId] &&
+        this.gridViewCols[colId].id;
       if (!gridColId) {
-        return
+        return;
       }
-      this.$set(this.gridViewCols[colId], 'width', size)
-      if (this._isUIAllowed('gridColUpdate')) {
+      this.$set(this.gridViewCols[colId], "width", size);
+      if (this._isUIAllowed("gridColUpdate")) {
         await this.$api.dbView.gridColumnUpdate(gridColId, {
-          width: size
-        })
+          width: size,
+        });
       }
       // this.$emit('update:columnsWidth', { ...this.columnsWidth, [col]: size })
     },
     onXcResizing(_cn, width) {
-      this.resizingCol = _cn
-      this.resizingColWidth = width
+      this.resizingCol = _cn;
+      this.resizingColWidth = width;
     },
     log(e, s) {
-      console.log(e.target, s)
-    }
-  }
-}
+      console.log(e.target, s);
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
 ::v-deep {
-  .resizer:hover, .resizer:active, .resizer:focus {
+  .resizer:hover,
+  .resizer:active,
+  .resizer:focus {
     background: var(--v-primary-base);
     cursor: col-resize;
   }
 
-  .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;
   }
 
   .v-input__control .v-input__slot .v-input--selection-controls__input {
-    transform: scale(.85);
+    transform: scale(0.85);
     margin-right: 0;
   }
 
-  .xc-toolbar .v-input__slot, .navigation .v-input__slot {
+  .xc-toolbar .v-input__slot,
+  .navigation .v-input__slot {
     box-shadow: none !important;
   }
 
   .navigation .v-input__slot input::placeholder {
-    font-size: .8rem;
+    font-size: 0.8rem;
   }
 
   .v-btn {
@@ -784,7 +896,7 @@ export default {
 
   .xc-bt-chip {
     margin-right: 24px;
-    transition: .4s margin-right, .4s padding-right;
+    transition: 0.4s margin-right, 0.4s padding-right;
   }
 
   .theme--light tbody tr:hover {
@@ -801,7 +913,7 @@ export default {
   }
 
   .xc-border.search-box .v-input {
-    transition: .4s border-color;
+    transition: 0.4s border-color;
   }
 
   .xc-border.search-box .v-input--is-focused {
@@ -809,13 +921,14 @@ export default {
     margin: -1px;
   }
 
-  .search-field.v-text-field.v-text-field--solo.v-input--dense > .v-input__control {
+  .search-field.v-text-field.v-text-field--solo.v-input--dense
+    > .v-input__control {
     min-height: auto;
   }
 
   .view .view-icon {
     display: none;
-    transition: .3s display;
+    transition: 0.3s display;
   }
 
   .view:hover .view-icon {
@@ -829,10 +942,13 @@ export default {
   .v-input__control label {
     font-size: inherit;
   }
-
 }
 
-table, td, th.grey-border, th.grey.darken-3, th.grey.lighten-4 {
+table,
+td,
+th.grey-border,
+th.grey.darken-3,
+th.grey.lighten-4 {
   border-right: 1px solid #7f828b33 !important;
   border-left: 1px solid #7f828b33 !important;
   border-bottom: 2px solid #7f828b33 !important;
@@ -840,13 +956,15 @@ table, td, th.grey-border, th.grey.darken-3, th.grey.lighten-4 {
   border-collapse: collapse;
 }
 
-td, th {
+td,
+th {
   position: relative;
   padding: 0 5px !important;
 }
 
-td.active::after, td.active::before {
-  content: '';
+td.active::after,
+td.active::before {
+  content: "";
   position: absolute;
   z-index: 3;
   height: calc(100% + 2px);
@@ -862,7 +980,7 @@ td.active::after {
 
 td.active::before {
   background: var(--v-primary-base);
-  opacity: .1;
+  opacity: 0.1;
 }
 
 .xc-row-table thead tr {
@@ -877,11 +995,14 @@ td.active::before {
   z-index: 6;
 }
 
-.row-expand-icon, .row-checkbox {
+.row-expand-icon,
+.row-checkbox {
   opacity: 0;
 }
 
-tr:hover .row-expand-icon, tr:hover .row-checkbox, tr .row-checkbox.active {
+tr:hover .row-expand-icon,
+tr:hover .row-checkbox,
+tr .row-checkbox.active {
   opacity: 1;
 }
 
@@ -889,25 +1010,29 @@ tr:hover .row-no {
   display: none;
 }
 
-td, tr {
+td,
+tr {
   min-height: 31px !important;
   /*height: 31px !important;*/
   /*max-height: 31px !important;*/
 }
 
-.cell-height-medium td, .cell-height-medium tr {
+.cell-height-medium td,
+.cell-height-medium tr {
   min-height: 35px !important;
   /*height: 35px !important;*/
   /*max-height: 35px !important;*/
 }
 
-.cell-height-large td, .cell-height-large tr {
+.cell-height-large td,
+.cell-height-large tr {
   min-height: 40px !important;
   /*height: 40px !important;*/
   /*max-height: 40px !important;*/
 }
 
-.cell-height-xlarge td, .cell-height-xlarge tr {
+.cell-height-xlarge td,
+.cell-height-xlarge tr {
   min-height: 50px !important;
   /*height: 50px !important;*/
   /*max-height: 50px !important;*/
@@ -923,7 +1048,7 @@ td, tr {
 
 .hasmany-col-menu-icon {
   opacity: 0;
-  transition: .4s opacity, .4s max-width;
+  transition: 0.4s opacity, 0.4s max-width;
 }
 
 .hasmany-col-menu-icon.pv {
@@ -947,7 +1072,7 @@ tbody tr:hover {
 }
 
 .views-navigation-drawer {
-  transition: .4s max-width, .4s min-width;
+  transition: 0.4s max-width, 0.4s min-width;
 }
 
 .cell {
@@ -959,7 +1084,7 @@ tbody tr:hover {
 }
 
 th::before {
-  content: '';
+  content: "";
   position: absolute;
   width: 100%;
   background: inherit;
@@ -984,7 +1109,7 @@ td.primary-column {
   bottom: 0;
   right: 0;
   background: var(--v-primary-base);
-  opacity: .2;
+  opacity: 0.2;
   content: "";
   z-index: 1;
   pointer-events: none;
@@ -1005,30 +1130,29 @@ td.primary-column {
   border-style: dashed;
   margin-top: 5px;
   margin-bottom: 5px;
-
 }
 
 .sort-grid {
   display: grid;
-  grid-template-columns:22px auto 100px;
+  grid-template-columns: 22px auto 100px;
   column-gap: 6px;
   row-gap: 6px;
 }
 
 .xc-row-table {
-  table-layout: fixed
+  table-layout: fixed;
 }
 
 td {
   overflow: hidden;
 }
 
-th:first-child, td:first-child {
+th:first-child,
+td:first-child {
   min-width: 100px;
 }
 
 .has-many-icon {
   transform: rotate(90deg);
 }
-
 </style>
diff --git a/packages/nc-gui/components/project/table.vue b/packages/nc-gui/components/project/table.vue
index f6a9c863b7..e5399cb3ba 100644
--- a/packages/nc-gui/components/project/table.vue
+++ b/packages/nc-gui/components/project/table.vue
@@ -6,23 +6,21 @@
     <template v-else>
       <v-tabs
         v-model="active"
-        :height="relationTabs && relationTabs.length ?38:0"
+        :height="relationTabs && relationTabs.length ? 38 : 0"
         class="table-tabs"
-        :class="{'hidden-tab':!relationTabs || !relationTabs.length}"
+        :class="{ 'hidden-tab': !relationTabs || !relationTabs.length }"
         color="pink"
         @change="onTabChange"
       >
         <template v-if="_isUIAllowed('smartSheet')">
           <v-tab v-show="relationTabs && relationTabs.length" class="">
-            <v-icon small>
-              mdi-table-edit
-            </v-icon>&nbsp;<span
-              class="caption text-capitalize  font-weight-bold"
-            > {{ nodes.title }}</span>
+            <v-icon small> mdi-table-edit </v-icon>&nbsp;<span
+              class="caption text-capitalize font-weight-bold"
+            >
+              {{ nodes.title }}</span
+            >
           </v-tab>
-          <v-tab-item
-            style="height:100%"
-          >
+          <v-tab-item style="height: 100%">
             <rows-xc-data-table
               ref="tabs7"
               :is-view="isView"
@@ -51,15 +49,15 @@
 </template>
 
 <script>
-import { mapActions } from 'vuex'
-import dlgLabelSubmitCancel from '../utils/dlgLabelSubmitCancel'
-import { isMetaTable } from '@/helpers/xutils'
-import RowsXcDataTable from '@/components/project/spreadsheet/rowsXcDataTable'
+import { mapActions } from "vuex";
+import dlgLabelSubmitCancel from "../utils/dlgLabelSubmitCancel";
+import { isMetaTable } from "@/helpers/xutils";
+import RowsXcDataTable from "@/components/project/spreadsheet/rowsXcDataTable";
 
 export default {
   components: {
     RowsXcDataTable,
-    dlgLabelSubmitCancel
+    dlgLabelSubmitCancel,
   },
   data() {
     return {
@@ -74,90 +72,90 @@ export default {
       loadRows: false,
       loadColumnsMock: false,
       relationTabs: [],
-      deleteId: null
-    }
+      deleteId: null,
+    };
   },
   methods: {
     async handleKeyDown(event) {
-      const activeTabEleKey = `tabs${this.active}`
-      if (this.$refs[activeTabEleKey] &&
+      const activeTabEleKey = `tabs${this.active}`;
+      if (
+        this.$refs[activeTabEleKey] &&
         this.$refs[activeTabEleKey].handleKeyDown
       ) {
-        await this.$refs[activeTabEleKey].handleKeyDown(event)
+        await this.$refs[activeTabEleKey].handleKeyDown(event);
       }
     },
     ...mapActions({
-      removeTableTab: 'tabs/removeTableTab',
-      loadTablesFromParentTreeNode: 'project/loadTablesFromParentTreeNode'
+      removeTableTab: "tabs/removeTableTab",
+      loadTablesFromParentTreeNode: "project/loadTablesFromParentTreeNode",
     }),
     mtdNewTableUpdate(value) {
-      this.newTableCopy = value
+      this.newTableCopy = value;
     },
-    async deleteTable(action = '', id) {
+    async deleteTable(action = "", id) {
       if (id) {
-        this.deleteId = id
+        this.deleteId = id;
       }
-      if (action === 'showDialog') {
-        this.dialogShow = true
-      } else if (action === 'hideDialog') {
-        this.dialogShow = false
+      if (action === "showDialog") {
+        this.dialogShow = true;
+      } else if (action === "hideDialog") {
+        this.dialogShow = false;
       } else {
         // todo : check relations and triggers
         try {
-          await this.$api.dbTable.delete(this.deleteId)
+          await this.$api.dbTable.delete(this.deleteId);
 
           this.removeTableTab({
             env: this.nodes.env,
             dbAlias: this.nodes.dbAlias,
-            table_name: this.nodes.table_name
-          })
+            table_name: this.nodes.table_name,
+          });
 
           await this.loadTablesFromParentTreeNode({
             _nodes: {
-              ...this.nodes
-            }
-          })
+              ...this.nodes,
+            },
+          });
 
-          this.$store.commit('meta/MutMeta', {
+          this.$store.commit("meta/MutMeta", {
             key: this.nodes.table_name,
-            value: null
-          })
-          this.$store.commit('meta/MutMeta', {
+            value: null,
+          });
+          this.$store.commit("meta/MutMeta", {
             key: this.deleteId,
-            value: null
-          })
+            value: null,
+          });
         } catch (e) {
-          const msg = await this._extractSdkResponseErrorMsg(e)
-          this.$toast.error(msg).goAway(3000)
+          const msg = await this._extractSdkResponseErrorMsg(e);
+          this.$toast.error(msg).goAway(3000);
         }
-        this.dialogShow = false
-        this.$tele.emit('table:delete:submit')
+        this.dialogShow = false;
+        this.$e("a:table:delete");
       }
     },
     onTabChange() {
-      this.$emit('update:hideLogWindows', this.active === 2)
-    }
+      this.$emit("update:hideLogWindows", this.active === 2);
+    },
   },
   computed: {
     isMetaTable() {
-      return isMetaTable(this.nodes.table_name)
-    }
+      return isMetaTable(this.nodes.table_name);
+    },
   },
   mounted() {
-    this.onTabChange()
+    this.onTabChange();
   },
   props: {
     nodes: Object,
     hideLogWindows: Boolean,
     tabId: String,
     isActive: Boolean,
-    isView: Boolean
-  }
-}
+    isView: Boolean,
+  },
+};
 </script>
 
 <style scoped>
-
 /*/deep/ .table-tabs > .v-tabs-items {
   border-top: 1px solid #7F828B33;
 }*/
@@ -166,12 +164,13 @@ export default {
   margin-top: -2px;
 }
 
-.table-tabs, /deep/ .table-tabs > .v-windows {
+.table-tabs,
+/deep/ .table-tabs > .v-windows {
   height: 100%;
 }
 
 /deep/ .v-window-item {
-  height: 100%
+  height: 100%;
 }
 
 .rel-row-parent {
@@ -189,7 +188,6 @@ export default {
   overflow: hidden;
   color: grey;
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/project/tableTabs/webhooks.vue b/packages/nc-gui/components/project/tableTabs/webhooks.vue
index 4c9c801207..07b5a11073 100644
--- a/packages/nc-gui/components/project/tableTabs/webhooks.vue
+++ b/packages/nc-gui/components/project/tableTabs/webhooks.vue
@@ -3,73 +3,64 @@
     <v-toolbar flat height="42" class="toolbar-border-bottom">
       <v-toolbar-title>
         <v-breadcrumbs
-          :items="[{
-                     text: nodes.env,
-                     disabled: true,
-                     href: '#'
-                   },{
-                     text: nodes.dbAlias,
-                     disabled: true,
-                     href: '#'
-                   },
-                   {
-                     text: nodes.title + ' (Webhooks)',
-                     disabled: true,
-                     href: '#'
-                   }]"
+          :items="[
+            {
+              text: nodes.env,
+              disabled: true,
+              href: '#',
+            },
+            {
+              text: nodes.dbAlias,
+              disabled: true,
+              href: '#',
+            },
+            {
+              text: nodes.title + ' (Webhooks)',
+              disabled: true,
+              href: '#',
+            },
+          ]"
           divider=">"
           small
         >
           <template #divider>
-            <v-icon small color="grey lighten-2">
-              forward
-            </v-icon>
+            <v-icon small color="grey lighten-2"> forward </v-icon>
           </template>
         </v-breadcrumbs>
       </v-toolbar-title>
       <v-spacer />
 
       <!--tooltip="Close webhooks modal"-->
-      <x-btn
-        outlined
-        small
-        @click.prevent="$emit('close')"
-      >
-        <v-icon small left>
-          mdi-close-circle-outline
-        </v-icon>
+      <x-btn outlined small @click.prevent="$emit('close')">
+        <v-icon small left> mdi-close-circle-outline </v-icon>
         <!-- Close -->
-        {{ $t('general.close') }}
+        {{ $t("general.close") }}
       </x-btn>
 
       <!--tooltip="Reload hooks"-->
       <x-btn
-        v-ge="['hooks','reload']"
+        v-ge="['hooks', 'reload']"
         outlined
         color="primary"
         small
         @click.prevent="loadHooksList"
       >
-        <v-icon small left>
-          mdi-reload
-        </v-icon>
+        <v-icon small left> mdi-reload </v-icon>
         <!-- Reload -->
-        {{ $t('general.reload') }}
+        {{ $t("general.reload") }}
       </x-btn>
 
       <!--:tooltip="$t('tooltip.saveChanges')"-->
       <x-btn
-        v-ge="['hooks','add new']"
+        v-ge="['hooks', 'add new']"
         outlined
         color="primary"
         small
         @click.prevent="addNewHook"
       >
-        <v-icon small left>
-          mdi-plus
-        </v-icon>
+        <v-icon small left> mdi-plus </v-icon>
         <!--Add New-->
-        {{ $t('activity.addWebhook') }}
+        {{ $t("activity.addWebhook") }}
       </x-btn>
 
       <!--      <x-btn outlined tooltip="Save Changes"
@@ -84,12 +75,7 @@
             </x-btn>-->
     </v-toolbar>
 
-    <v-form
-      ref="form"
-      v-model="valid"
-      class="mx-auto"
-      lazy-validation
-    >
+    <v-form ref="form" v-model="valid" class="mx-auto" lazy-validation>
       <v-container fluid>
         <v-row>
           <v-col cols="7">
@@ -102,30 +88,30 @@
                         <th />
                         <th>
                           <!--Title-->
-                          {{ $t('general.title') }}
+                          {{ $t("general.title") }}
                         </th>
                         <th>
                           <!--Event-->
-                          {{ $t('general.event') }}
+                          {{ $t("general.event") }}
                         </th>
                         <th>
                           <!--Condition-->
-                          {{ $t('general.condition') }}
+                          {{ $t("general.condition") }}
                         </th>
                         <th>
                           <!--Notify Via-->
-                          {{ $t('labels.notifyVia') }}
+                          {{ $t("labels.notifyVia") }}
                         </th>
                         <th>
                           <!--Action-->
-                          {{ $t('labels.action') }}
+                          {{ $t("labels.action") }}
                         </th>
                       </tr>
                     </thead>
 
                     <tbody>
                       <template v-if="hooks && hooks.length">
-                        <tr v-for="(item,i) in hooks" :key="i">
+                        <tr v-for="(item, i) in hooks" :key="i">
                           <td>
                             <v-radio :value="i" />
                           </td>
@@ -136,12 +122,18 @@
                               mdi-check-bold
                             </v-icon>
                           </td>
-                          <td>{{ item.notification && item.notification.type }}</td>
                           <td>
-                            <x-icon small color="error" @click.stop="deleteHook(item, i)">
+                            {{ item.notification && item.notification.type }}
+                          </td>
+                          <td>
+                            <x-icon
+                              small
+                              color="error"
+                              @click.stop="deleteHook(item, i)"
+                            >
                               mdi-delete
                             </x-icon>
-                          <!--              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
+                            <!--              <x-icon small :color="loading || !valid || !hook.event ?  'grey' : 'primary'"
                                                 @click.stop="(!loading && valid && hook.event) && saveHooks()">save
                                         </x-icon>-->
                           </td>
@@ -151,17 +143,15 @@
                         <td colspan="6" class="text-center py-5">
                           <!--:tooltip="$t('tooltip.saveChanges')"-->
                           <x-btn
-                            v-ge="['hooks','add new']"
+                            v-ge="['hooks', 'add new']"
                             outlined
                             color="primary"
                             small
                             @click.prevent="addNewHook"
                           >
-                            <v-icon small left>
-                              mdi-plus
-                            </v-icon>
+                            <v-icon small left> mdi-plus </v-icon>
                             <!--Add New Webhook-->
-                            {{ $t('activity.addWebhook') }}
+                            {{ $t("activity.addWebhook") }}
                           </x-btn>
                         </td>
                       </tr>
@@ -177,20 +167,17 @@
                 Webhook
                 <v-spacer />
                 <x-btn
-                  v-ge="['hooks','save']"
+                  v-ge="['hooks', 'save']"
                   outlined
                   tooltip="Save"
                   color="primary"
                   small
-
                   :disabled="loading || !valid || !hook.event"
                   @click.prevent="saveHooks"
                 >
-                  <v-icon small left>
-                    save
-                  </v-icon>
+                  <v-icon small left> save </v-icon>
                   <!-- Save -->
-                  {{ $t('general.save') }}
+                  {{ $t("general.save") }}
                 </x-btn>
               </v-card-title>
               <v-card-text>
@@ -201,7 +188,7 @@
                   dense
                   :label="$t('general.title')"
                   required
-                  :rules="[v => !!v || `${$t('general.required')}`]"
+                  :rules="[(v) => !!v || `${$t('general.required')}`]"
                 />
 
                 <webhook-event
@@ -242,12 +229,12 @@
                   :label="$t('general.notification')"
                   required
                   :items="notificationList"
-                  :rules="[v => !!v || `${$t('general.required')}`]"
+                  :rules="[(v) => !!v || `${$t('general.required')}`]"
                   class="caption"
                   :prepend-inner-icon="notificationIcon[hook.notification.type]"
                   @change="onNotTypeChange"
                 >
-                  <template #item="{item}">
+                  <template #item="{ item }">
                     <v-list-item-icon>
                       <v-icon small>
                         {{ notificationIcon[item] }}
@@ -267,7 +254,7 @@
                   <v-combobox
                     v-if="slackChannels"
                     v-model="notification.channels"
-                    :rules="[v => !!v || `${$t('general.required')}`]"
+                    :rules="[(v) => !!v || `${$t('general.required')}`]"
                     :items="slackChannels"
                     item-text="channel"
                     label="Select Slack channels"
@@ -281,7 +268,7 @@
                   <v-combobox
                     v-if="teamsChannels"
                     v-model="notification.channels"
-                    :rules="[v => !!v || `${$t('general.required')}`]"
+                    :rules="[(v) => !!v || `${$t('general.required')}`]"
                     :items="teamsChannels"
                     item-text="channel"
                     label="Select Teams channels"
@@ -295,7 +282,7 @@
                   <v-combobox
                     v-if="discordChannels"
                     v-model="notification.channels"
-                    :rules="[v => !!v || `${$t('general.required')}`]"
+                    :rules="[(v) => !!v || `${$t('general.required')}`]"
                     :items="discordChannels"
                     item-text="channel"
                     label="Select Discord channels"
@@ -309,7 +296,7 @@
                   <v-combobox
                     v-if="mattermostChannels"
                     v-model="notification.channels"
-                    :rules="[v => !!v || `${$t('general.required')}`]"
+                    :rules="[(v) => !!v || `${$t('general.required')}`]"
                     :items="mattermostChannels"
                     item-text="channel"
                     label="Select Mattermost channels"
@@ -330,7 +317,10 @@
                       dense
                       outlined
                       :label="input.label"
-                      :rules="[v => !input.required || !!v || `${$t('general.required')}`]"
+                      :rules="[
+                        (v) =>
+                          !input.required || !!v || `${$t('general.required')}`,
+                      ]"
                     />
                     <v-text-field
                       v-else
@@ -340,7 +330,10 @@
                       dense
                       outlined
                       :label="input.label"
-                      :rules="[v => !input.required || !!v || `${$t('general.required')}`]"
+                      :rules="[
+                        (v) =>
+                          !input.required || !!v || `${$t('general.required')}`,
+                      ]"
                     />
                   </template>
                 </template>
@@ -348,25 +341,27 @@
 
               <v-card-text>
                 <span class="caption grey--text">
-                  <em>Available context variables are <strong>data and user</strong></em>
+                  <em
+                    >Available context variables are
+                    <strong>data and user</strong></em
+                  >
                   <v-tooltip top>
-                    <template #activator="{on}">
-                      <v-icon
-                        small
-                        color="grey"
-                        class="ml-2"
-                        v-on="on"
-                      >mdi-information</v-icon>
+                    <template #activator="{ on }">
+                      <v-icon small color="grey" class="ml-2" v-on="on"
+                        >mdi-information</v-icon
+                      >
                     </template>
                     <span class="caption">
-                      <strong>data</strong> : Row data <br>
-                      <strong>user</strong> : User information<br>
+                      <strong>data</strong> : Row data <br />
+                      <strong>user</strong> : User information<br />
                     </span>
                   </v-tooltip>
-                  <br>
-                  <a href="https://docs.nocodb.com/developer-resources/webhooks/">
+                  <br />
+                  <a
+                    href="https://docs.nocodb.com/developer-resources/webhooks/"
+                  >
                     <!--Document Reference-->
-                    {{ $t('labels.docReference') }}
+                    {{ $t("labels.docReference") }}
                   </a>
                 </span>
 
@@ -377,8 +372,8 @@
                     filters,
                     notification: {
                       ...hook.notification,
-                      payload: notification
-                    }
+                      payload: notification,
+                    },
                   }"
                 />
               </v-card-text>
@@ -391,22 +386,22 @@
 </template>
 
 <script>
-import HttpWebhook from './webhook/httpWebhook'
-import ColumnFilter from '~/components/project/spreadsheet/components/columnFilter'
+import HttpWebhook from "./webhook/httpWebhook";
+import ColumnFilter from "~/components/project/spreadsheet/components/columnFilter";
 // import FormInput from '~/components/project/appStore/FormInput'
-import WebhookEvent from '~/components/project/tableTabs/webhookEvent'
-import WebhooksTest from '~/components/project/tableTabs/webhooksTest'
+import WebhookEvent from "~/components/project/tableTabs/webhookEvent";
+import WebhooksTest from "~/components/project/tableTabs/webhooksTest";
 
 export default {
-  name: 'Webhooks',
+  name: "Webhooks",
   components: {
     WebhooksTest,
     HttpWebhook,
     WebhookEvent,
     // FormInput,
-    ColumnFilter
+    ColumnFilter,
   },
-  props: ['nodes'],
+  props: ["nodes"],
   data: () => ({
     key: 0,
     apps: {},
@@ -421,138 +416,148 @@ export default {
     meta: null,
     loading: false,
     notificationList: [
-      'Email',
-      'Slack',
-      'Microsoft Teams',
-      'Discord',
-      'Mattermost',
-      'Twilio',
-      'Whatsapp Twilio',
-      'URL'
+      "Email",
+      "Slack",
+      "Microsoft Teams",
+      "Discord",
+      "Mattermost",
+      "Twilio",
+      "Whatsapp Twilio",
+      "URL",
     ],
     filters: [],
     hook: null,
     notification: {},
     notificationIcon: {
-      URL: 'mdi-link',
-      Email: 'mdi-email',
-      Slack: 'mdi-slack',
-      'Microsoft Teams': 'mdi-microsoft-teams',
-      Discord: 'mdi-discord',
-      Mattermost: 'mdi-chat',
-      'Whatsapp Twilio': 'mdi-whatsapp',
-      Twilio: 'mdi-cellphone-message'
+      URL: "mdi-link",
+      Email: "mdi-email",
+      Slack: "mdi-slack",
+      "Microsoft Teams": "mdi-microsoft-teams",
+      Discord: "mdi-discord",
+      Mattermost: "mdi-chat",
+      "Whatsapp Twilio": "mdi-whatsapp",
+      Twilio: "mdi-cellphone-message",
     },
     urlRules: [
-      v => !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || 'Not a valid URL'
+      (v) =>
+        !v || !v.trim() || /^https?:\/\/.{1,}/.test(v) || "Not a valid URL",
     ],
     fieldList: [],
     inputs: {
       Email: [
         {
-          key: 'to',
-          label: 'To Address',
-          placeholder: 'To Address',
-          type: 'SingleLineText',
-          required: true
+          key: "to",
+          label: "To Address",
+          placeholder: "To Address",
+          type: "SingleLineText",
+          required: true,
         },
         {
-          key: 'subject',
-          label: 'Subject',
-          placeholder: 'Subject',
-          type: 'SingleLineText',
-          required: true
-        }, {
-          key: 'body',
-          label: 'Body',
-          placeholder: 'Body',
-          type: 'LongText',
-          required: true
-        }
+          key: "subject",
+          label: "Subject",
+          placeholder: "Subject",
+          type: "SingleLineText",
+          required: true,
+        },
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
       ],
-      Slack: [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }
+      Slack: [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
       ],
-      'Microsoft Teams': [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }
+      "Microsoft Teams": [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
       ],
-      Discord: [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }
+      Discord: [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
       ],
-      Mattermost: [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }
+      Mattermost: [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
       ],
-      Twilio: [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }, {
-        key: 'to',
-        label: 'Comma separated Mobile #',
-        placeholder: 'Comma separated Mobile #',
-        type: 'LongText',
-        required: true
-      }],
-      'Whatsapp Twilio': [{
-        key: 'body',
-        label: 'Body',
-        placeholder: 'Body',
-        type: 'LongText',
-        required: true
-      }, {
-        key: 'to',
-        label: 'Comma separated Mobile #',
-        placeholder: 'Comma separated Mobile #',
-        type: 'LongText',
-        required: true
-      }]
-    }
+      Twilio: [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
+        {
+          key: "to",
+          label: "Comma separated Mobile #",
+          placeholder: "Comma separated Mobile #",
+          type: "LongText",
+          required: true,
+        },
+      ],
+      "Whatsapp Twilio": [
+        {
+          key: "body",
+          label: "Body",
+          placeholder: "Body",
+          type: "LongText",
+          required: true,
+        },
+        {
+          key: "to",
+          label: "Comma separated Mobile #",
+          placeholder: "Comma separated Mobile #",
+          type: "LongText",
+          required: true,
+        },
+      ],
+    },
   }),
   async created() {
-    await this.loadMeta()
-    await this.loadHooksList()
+    await this.loadMeta();
+    await this.loadHooksList();
     // todo: load only necessary plugins
-    await this.loadPluginList()
-    this.selectedHook = 0
-    this.onEventChange()
+    await this.loadPluginList();
+    this.selectedHook = 0;
+    this.onEventChange();
   },
   methods: {
     async loadPluginList() {
       try {
         // const plugins = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginList'])
-        const plugins = (await this.$api.plugin.list()).list
+        const plugins = (await this.$api.plugin.list()).list;
         // plugins.push(...plugins.splice(0, 3))
         this.apps = plugins.reduce((o, p) => {
-          p.tags = p.tags ? p.tags.split(',') : []
-          p.parsedInput = p.input && JSON.parse(p.input)
-          o[p.title] = p
-          return o
-        }, {})
-      } catch (e) {
-
-      }
+          p.tags = p.tags ? p.tags.split(",") : [];
+          p.parsedInput = p.input && JSON.parse(p.input);
+          o[p.title] = p;
+          return o;
+        }, {});
+      } catch (e) {}
     },
     checkConditionAvail() {
       // if (!process.env.EE) {
@@ -562,84 +567,102 @@ export default {
       // this.hook.condition = []
     },
     async onNotTypeChange() {
-      this.notification = {}
-      if (this.hook.notification.type === 'Slack') {
+      this.notification = {};
+      if (this.hook.notification.type === "Slack") {
         // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
         //   title: 'Slack'
         // }])
         // this.slackChannels = JSON.parse(plugin.input) || []
 
-        this.slackChannels = (this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || []
+        this.slackChannels =
+          (this.apps && this.apps.Slack && this.apps.Slack.parsedInput) || [];
       }
-      if (this.hook.notification.type === 'Microsoft Teams') {
+      if (this.hook.notification.type === "Microsoft Teams") {
         // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
         //   title: 'Microsoft Teams'
         // }])
         // this.teamsChannels = JSON.parse(plugin.input) || []
-        this.teamsChannels = (this.apps && this.apps['Microsoft Teams'] && this.apps['Microsoft Teams'].parsedInput) || []
+        this.teamsChannels =
+          (this.apps &&
+            this.apps["Microsoft Teams"] &&
+            this.apps["Microsoft Teams"].parsedInput) ||
+          [];
       }
-      if (this.hook.notification.type === 'Discord') {
+      if (this.hook.notification.type === "Discord") {
         // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
         //   title: 'Discord'
         // }])
-        this.discordChannels = (this.apps && this.apps.Discord && this.apps.Discord.parsedInput) || []
+        this.discordChannels =
+          (this.apps && this.apps.Discord && this.apps.Discord.parsedInput) ||
+          [];
       }
-      if (this.hook.notification.type === 'Mattermost') {
+      if (this.hook.notification.type === "Mattermost") {
         // const plugin = await this.$store.dispatch('sqlMgr/ActSqlOp', [null, 'xcPluginRead', {
         //   title: 'Mattermost'
         // }])
         // this.mattermostChannels = JSON.parse(plugin.input) || []
-        this.mattermostChannels = (this.apps && this.apps.Mattermost && this.apps.Mattermost.parsedInput) || []
+        this.mattermostChannels =
+          (this.apps &&
+            this.apps.Mattermost &&
+            this.apps.Mattermost.parsedInput) ||
+          [];
       }
     },
     async onEventChange() {
-      this.key++
+      this.key++;
       if (!this.hooks || !this.hooks.length) {
-        return
+        return;
       }
-      const {
-        notification: {
-          payload,
-          type
-        } = {},
-        ...hook
-      } = this.hooks[this.selectedHook] || {}
+      const { notification: { payload, type } = {}, ...hook } =
+        this.hooks[this.selectedHook] || {};
 
       this.hook = {
         ...hook,
         notification: {
-          type
-        }
-      }
+          type,
+        },
+      };
       // this.enableCondition = !!(this.hook && this.hook.condition && Object.keys(this.hook.condition).length)
-      await this.onNotTypeChange()
-      this.notification = payload
-      if (this.hook.notification.type === 'Slack') {
-        this.notification.webhook_url = this.notification.webhook_url &&
-          this.notification.webhook_url.map(v => this.slackChannels.find(s => v.webhook_url === s.webhook_url))
+      await this.onNotTypeChange();
+      this.notification = payload;
+      if (this.hook.notification.type === "Slack") {
+        this.notification.webhook_url =
+          this.notification.webhook_url &&
+          this.notification.webhook_url.map((v) =>
+            this.slackChannels.find((s) => v.webhook_url === s.webhook_url)
+          );
       }
-      if (this.hook.notification.type === 'Microsoft Teams') {
-        this.notification.webhook_url = this.notification.webhook_url &&
-          this.notification.webhook_url.map(v => this.teamsChannels.find(s => v.webhook_url === s.webhook_url))
+      if (this.hook.notification.type === "Microsoft Teams") {
+        this.notification.webhook_url =
+          this.notification.webhook_url &&
+          this.notification.webhook_url.map((v) =>
+            this.teamsChannels.find((s) => v.webhook_url === s.webhook_url)
+          );
       }
-      if (this.hook.notification.type === 'Discord') {
-        this.notification.webhook_url = this.notification.webhook_url &&
-          this.notification.webhook_url.map(v => this.discordChannels.find(s => v.webhook_url === s.webhook_url))
+      if (this.hook.notification.type === "Discord") {
+        this.notification.webhook_url =
+          this.notification.webhook_url &&
+          this.notification.webhook_url.map((v) =>
+            this.discordChannels.find((s) => v.webhook_url === s.webhook_url)
+          );
       }
-      if (this.hook.notification.type === 'Mattermost') {
-        this.notification.webhook_url = this.notification.webhook_url &&
-          this.notification.webhook_url.map(v => this.mattermostChannels.find(s => v.webhook_url === s.webhook_url))
+      if (this.hook.notification.type === "Mattermost") {
+        this.notification.webhook_url =
+          this.notification.webhook_url &&
+          this.notification.webhook_url.map((v) =>
+            this.mattermostChannels.find((s) => v.webhook_url === s.webhook_url)
+          );
       }
-      if (this.hook.notification.type === 'URL') {
+      if (this.hook.notification.type === "URL") {
         // eslint-disable-next-line no-self-assign
-        this.notification.api = this.notification.api
+        this.notification.api = this.notification.api;
       }
     },
     async saveHooks() {
       if (!this.$refs.form.validate() || !this.valid || !this.hook.event) {
-        return
+        return;
       }
-      this.loading = true
+      this.loading = true;
       try {
         // const res = await this.$store.dispatch('sqlMgr/ActSqlOp', [
         //   {
@@ -656,58 +679,66 @@ export default {
         //     }
         //   }
         // ])
-        let res
+        let res;
         if (this.hook.id) {
           res = await this.$api.dbTableWebhook.update(this.hook.id, {
             ...this.hook,
             notification: {
               ...this.hook.notification,
-              payload: this.notification
-            }
-          })
+              payload: this.notification,
+            },
+          });
         } else {
           res = await this.$api.dbTableWebhook.create(this.meta.id, {
             ...this.hook,
             notification: {
               ...this.hook.notification,
-              payload: this.notification
-            }
-          })
+              payload: this.notification,
+            },
+          });
         }
 
         if (!this.hook.id && res) {
-          this.hook.id = res.id
+          this.hook.id = res.id;
         }
         if (this.$refs.filter) {
           await this.$refs.filter.applyChanges(false, {
-            hookId: this.hook.id
-          })
+            hookId: this.hook.id,
+          });
         }
 
-        this.$toast.success('Webhook details updated successfully').goAway(3000)
+        this.$toast
+          .success("Webhook details updated successfully")
+          .goAway(3000);
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
-      this.loading = false
-      await this.loadHooksList()
-
-      this.$tele.emit(`webhooks:save:${this.hook.operation}:${this.hook.condition}:${this.hook.notification.type}`)
+      this.loading = false;
+      await this.loadHooksList();
+
+      this.$e("a:webhook:add", {
+        operation: this.hook.operation,
+        condition: this.hook.condition,
+        notification: this.hook.notification.type,
+      });
     },
     async loadMeta() {
-      this.loadingMeta = true
+      this.loadingMeta = true;
       // const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   env: this.nodes.env,
       //   dbAlias: this.nodes.dbAlias
       // }, 'tableXcModelGet', {
       //   tn: this.nodes.table_name
       // }] )
-      this.meta = await this.$store.dispatch('meta/ActLoadMeta', { table_name: this.nodes.table_name })// JSON.parse(tableMeta.meta)
-      this.fieldList = this.meta.columns.map(c => c.column_name)
-      this.loadingMeta = false
+      this.meta = await this.$store.dispatch("meta/ActLoadMeta", {
+        table_name: this.nodes.table_name,
+      }); // JSON.parse(tableMeta.meta)
+      this.fieldList = this.meta.columns.map((c) => c.column_name);
+      this.loadingMeta = false;
     },
     async loadHooksList() {
-      this.key++
-      this.loading = true
+      this.key++;
+      this.loading = true;
       // const hooks = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
       //   env: this.nodes.env,
       //   dbAlias: this.nodes.dbAlias
@@ -715,49 +746,49 @@ export default {
       //   tn: this.nodes.table_name
       // }])
 
-      const hooks = await this.$api.dbTableWebhook.list(this.meta.id)
+      const hooks = await this.$api.dbTableWebhook.list(this.meta.id);
 
       this.hooks = hooks.list.map((h) => {
-        h.notification = h.notification && JSON.parse(h.notification)
+        h.notification = h.notification && JSON.parse(h.notification);
         // h.condition = h.condition && JSON.parse(h.condition)
 
-        return h
-      })
-      this.loading = false
+        return h;
+      });
+      this.loading = false;
     },
     addNewHook() {
-      this.key++
-      this.selectedHook = this.hooks.length
+      this.key++;
+      this.selectedHook = this.hooks.length;
       this.hooks.push({
         notification: {
           // type:'Email'
-        }
-      })
-      this.onEventChange()
-      this.$refs.form.resetValidation()
+        },
+      });
+      this.onEventChange();
+      this.$refs.form.resetValidation();
 
-      this.$tele.emit(`webhook:add:trigger:${this.hooks.length}`)
+      this.$e("c:webhook:add", { count: this.hooks.length });
     },
     async deleteHook(item, i) {
       try {
         if (item.id) {
-          await this.$api.dbTableWebhook.delete(item.id)
-          this.hooks.splice(i, 1)
+          await this.$api.dbTableWebhook.delete(item.id);
+          this.hooks.splice(i, 1);
         } else {
-          this.hooks.splice(i, 1)
+          this.hooks.splice(i, 1);
         }
-        this.$toast.success('Hook deleted successfully').goAway(3000)
+        this.$toast.success("Hook deleted successfully").goAway(3000);
         if (!this.hooks.length) {
-          this.hook = null
+          this.hook = null;
         }
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       }
 
-      this.$tele.emit('webhook:delete')
-    }
-  }
-}
+      this.$e("a:webhook:delete");
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -766,7 +797,7 @@ export default {
 /*}*/
 
 /deep/ label {
-  font-size: 0.75rem !important
+  font-size: 0.75rem !important;
 }
 </style>
 <!--
diff --git a/packages/nc-gui/components/projectList/createNewProjectBtn.vue b/packages/nc-gui/components/projectList/createNewProjectBtn.vue
index 25ab1f0fa9..1bc3f26184 100644
--- a/packages/nc-gui/components/projectList/createNewProjectBtn.vue
+++ b/packages/nc-gui/components/projectList/createNewProjectBtn.vue
@@ -4,7 +4,7 @@
       <slot :on="on">
         <div>
           <v-btn
-            v-if="_isUIAllowed('projectCreate',true)"
+            v-if="_isUIAllowed('projectCreate', true)"
             v-ge="['home', 'project-new']"
             :x-large="$vuetify.breakpoint.lgAndUp"
             :large="$vuetify.breakpoint.mdAndDown"
@@ -15,15 +15,11 @@
             class="nc-new-project-menu elevation-3"
             v-on="on"
           >
-            <v-icon class="mr-2">
-              mdi-plus
-            </v-icon>
+            <v-icon class="mr-2"> mdi-plus </v-icon>
 
             <!-- New Project -->
-            {{ $t('title.newProj') }}
-            <v-icon class="mr-1" small>
-              mdi-menu-down
-            </v-icon>
+            {{ $t("title.newProj") }}
+            <v-icon class="mr-1" small> mdi-menu-down </v-icon>
           </v-btn>
         </div>
       </slot>
@@ -34,32 +30,21 @@
         @click="onCreateProject('xcdb')"
       >
         <v-list-item-icon class="mr-2">
-          <v-icon small color="blue">
-            mdi-plus
-          </v-icon>
+          <v-icon small color="blue"> mdi-plus </v-icon>
         </v-list-item-icon>
         <v-list-item-title>
           <!-- Create -->
-          <span>{{
-            $t('general.create')
-          }}</span>
+          <span>{{ $t("general.create") }}</span>
         </v-list-item-title>
         <v-spacer />
         <v-tooltip right>
           <template #activator="{ on }">
-            <v-icon
-              x-small
-              color="grey"
-              class="ml-4"
-              v-on="on"
-            >
+            <v-icon x-small color="grey" class="ml-4" v-on="on">
               mdi-information-outline
             </v-icon>
           </template>
           <!-- Create a new project -->
-          <span class="caption">{{
-            $t('tooltip.xcDB')
-          }}</span>
+          <span class="caption">{{ $t("tooltip.xcDB") }}</span>
         </v-tooltip>
       </v-list-item>
       <v-list-item
@@ -68,41 +53,30 @@
         @click="onCreateProject()"
       >
         <v-list-item-icon class="mr-2">
-          <v-icon small color="green">
-            mdi-database-outline
-          </v-icon>
+          <v-icon small color="green"> mdi-database-outline </v-icon>
         </v-list-item-icon>
         <v-list-item-title>
           <!-- Create By Connecting <br>To An External Database -->
           <span
             style="line-height: 1.5em"
-            v-html="
-              $t('activity.createProjectExtended.extDB')
-            "
+            v-html="$t('activity.createProjectExtended.extDB')"
           />
         </v-list-item-title>
         <v-spacer />
         <v-tooltip right>
           <template #activator="{ on }">
-            <v-icon
-              x-small
-              color="grey"
-              class="ml-4"
-              v-on="on"
-            >
+            <v-icon x-small color="grey" class="ml-4" v-on="on">
               mdi-information-outline
             </v-icon>
           </template>
           <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
-          <span class="caption">{{
-            $t('tooltip.extDB')
-          }}</span>
+          <span class="caption">{{ $t("tooltip.extDB") }}</span>
         </v-tooltip>
       </v-list-item>
     </v-list>
   </v-menu>
   <x-btn
-    v-else-if="_isUIAllowed('projectCreate',true)"
+    v-else-if="_isUIAllowed('projectCreate', true)"
     v-ge="['home', 'project-new']"
     outlined
     data-v-step="1"
@@ -110,33 +84,35 @@
     @click="onCreateProject('xcdb')"
   >
     <!-- New Project -->
-    {{ $t('title.newProj') }}
+    {{ $t("title.newProj") }}
   </x-btn>
   <span v-else />
 </template>
 
 <script>
 export default {
-  name: 'CreateNewProjectBtn',
+  name: "CreateNewProjectBtn",
   computed: {
     connectToExternalDB() {
-      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.connectToExternalDB
-    }
+      return (
+        this.$store.state.project &&
+        this.$store.state.project.projectInfo &&
+        this.$store.state.project.projectInfo.connectToExternalDB
+      );
+    },
   },
   methods: {
     onCreateProject(xcdb) {
-      if (xcdb === 'xcdb') {
-        this.$router.push('/project/xcdb')
-        this.$tele.emit('project:create:xcdb:trigger')
+      if (xcdb === "xcdb") {
+        this.$router.push("/project/xcdb");
+        this.$e("c:project:create:xcdb");
       } else {
-        this.$router.push('/project/0')
-        this.$tele.emit('project:create:extdb:trigger')
+        this.$router.push("/project/0");
+        this.$e("c:project:create:extdb");
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/packages/nc-gui/components/projectTabs.vue b/packages/nc-gui/components/projectTabs.vue
index 2f753a24c4..2ce35f7b6e 100644
--- a/packages/nc-gui/components/projectTabs.vue
+++ b/packages/nc-gui/components/projectTabs.vue
@@ -1,5 +1,9 @@
 <template>
-  <v-container fluid class="ph-no-capture project-container ma-0 pa-0 " style="position: relative">
+  <v-container
+    fluid
+    class="ph-no-capture project-container ma-0 pa-0"
+    style="position: relative"
+  >
     <v-tabs
       ref="projectTabs"
       v-model="activeTab"
@@ -11,16 +15,20 @@
       next-icon="mdi-arrow-right-bold-box-outline"
       prev-icon="mdi-arrow-left-bold-box-outline"
       show-arrows
-      :class="{'dark-them' : $store.state.windows.darkTheme}"
+      :class="{ 'dark-them': $store.state.windows.darkTheme }"
     >
       <v-tabs-slider color="" />
 
       <v-tab
-        v-for="(tab,index) in tabs"
-        :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
+        v-for="(tab, index) in tabs"
+        :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
+          (tab._nodes && tab._nodes.dbAlias) || ''
+        }||${tab.name}`"
         class="divider project-tab xc-border-right"
         :title="tab.name"
-        :href="`#${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
+        :href="`#${(tab._nodes && tab._nodes).type || ''}||${
+          (tab._nodes && tab._nodes.dbAlias) || ''
+        }||${tab.name}`"
         @change="tabActivated(tab)"
       >
         <v-icon v-if="treeViewIcons[tab._nodes.type]" icon :small="true">
@@ -29,9 +37,13 @@
         <span
           class="flex-grow-1 caption font-weight-bold text-capitalize mx-2"
           style="
-  white-space: nowrap;
-  overflow: hidden;max-width:140px;text-overflow:ellipsis"
-        >{{ tab.name }}</span>
+            white-space: nowrap;
+            overflow: hidden;
+            max-width: 140px;
+            text-overflow: ellipsis;
+          "
+          >{{ tab.name }}</span
+        >
         <v-icon icon :small="true" @click="removeTab(index)">
           mdi-close
         </v-icon>
@@ -41,141 +53,147 @@
       <v-tabs-items :value="activeTab">
         <v-tab-item
           v-for="(tab, index) in tabs"
-          :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
-          :value="`${(tab._nodes && tab._nodes.type) || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
+          :key="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
+            (tab._nodes && tab._nodes.dbAlias) || ''
+          }||${tab.name}`"
+          :value="`${(tab._nodes && tab._nodes.type) || ''}||${
+            (tab._nodes && tab._nodes.dbAlias) || ''
+          }||${tab.name}`"
           eager
           :transition="false"
-          style="height:100%"
+          style="height: 100%"
           :reverse-transition="false"
         >
-          <div
-            v-if="tab._nodes.type === 'table'"
-            style="height:100%"
-          >
+          <div v-if="tab._nodes.type === 'table'" style="height: 100%">
             <!--          <sqlLogAndOutput :hide="hideLogWindows">-->
             <TableView
-              :ref="'tabs'+index"
-              :is-active="activeTab === `${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
-              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
+              :ref="'tabs' + index"
+              :is-active="
+                activeTab ===
+                `${(tab._nodes && tab._nodes).type || ''}||${
+                  (tab._nodes && tab._nodes.dbAlias) || ''
+                }||${tab.name}`
+              "
+              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
+                (tab._nodes && tab._nodes.dbAlias) || ''
+              }||${tab.name}`"
               :hide-log-windows.sync="hideLogWindows"
               :nodes="tab._nodes"
             />
             <!--          </sqlLogAndOutput>-->
           </div>
-          <div v-else-if="tab._nodes.type === 'view'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'view'" style="height: 100%">
             <!--            <sqlLogAndOutput>-->
             <!--            <ViewTab :ref="'tabs'+index" :nodes="tab._nodes" />-->
             <TableView
-              :ref="'tabs'+index"
-              :is-active="activeTab === `${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
-              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${(tab._nodes && tab._nodes.dbAlias) || ''}||${tab.name}`"
+              :ref="'tabs' + index"
+              :is-active="
+                activeTab ===
+                `${(tab._nodes && tab._nodes).type || ''}||${
+                  (tab._nodes && tab._nodes.dbAlias) || ''
+                }||${tab.name}`
+              "
+              :tab-id="`${pid}||${(tab._nodes && tab._nodes).type || ''}||${
+                (tab._nodes && tab._nodes.dbAlias) || ''
+              }||${tab.name}`"
               :hide-log-windows.sync="hideLogWindows"
               :nodes="tab._nodes"
               is-view
             />
             <!--            </sqlLogAndOutput>-->
           </div>
-          <div v-else-if="tab._nodes.type === 'function'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'function'" style="height: 100%">
             <sqlLogAndOutput>
-              <FunctionTab :ref="'tabs'+index" :nodes="tab._nodes" />
+              <FunctionTab :ref="'tabs' + index" :nodes="tab._nodes" />
             </sqlLogAndOutput>
           </div>
-          <div v-else-if="tab._nodes.type === 'procedure'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'procedure'" style="height: 100%">
             <sqlLogAndOutput>
-              <ProcedureTab :ref="'tabs'+index" :nodes="tab._nodes" />
+              <ProcedureTab :ref="'tabs' + index" :nodes="tab._nodes" />
             </sqlLogAndOutput>
           </div>
-          <div v-else-if="tab._nodes.type === 'sequence'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'sequence'" style="height: 100%">
             <sqlLogAndOutput>
-              <SequenceTab :ref="'tabs'+index" :nodes="tab._nodes" />
+              <SequenceTab :ref="'tabs' + index" :nodes="tab._nodes" />
             </sqlLogAndOutput>
           </div>
-          <div v-else-if="tab._nodes.type === 'db'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'db'" style="height: 100%">
             <audit-tab
-              :ref="'tabs'+index"
+              :ref="'tabs' + index"
               class="backgroundColor"
               :nodes="tab._nodes"
             />
           </div>
-          <div v-else-if="tab._nodes.type === 'seedParserDir'" style="height:100%">
+          <div
+            v-else-if="tab._nodes.type === 'seedParserDir'"
+            style="height: 100%"
+          >
             <sqlLogAndOutput>
-              <SeedTab :ref="'tabs'+index" :nodes="tab._nodes" />
+              <SeedTab :ref="'tabs' + index" :nodes="tab._nodes" />
             </sqlLogAndOutput>
           </div>
-          <div v-else-if="tab._nodes.type === 'migrationsDir'" style="height:100%">
+          <div
+            v-else-if="tab._nodes.type === 'migrationsDir'"
+            style="height: 100%"
+          >
             <audit-tab
-              :ref="'tabs'+index"
+              :ref="'tabs' + index"
               class="backgroundColor"
               :nodes="tab._nodes"
             />
           </div>
-          <div v-else-if="tab._nodes.type === 'apisDir'" style="height:100%">
+          <div v-else-if="tab._nodes.type === 'apisDir'" style="height: 100%">
             <ApisTab
-              :ref="'tabs'+index"
+              :ref="'tabs' + index"
               class="backgroundColor"
               :nodes="tab._nodes"
             />
           </div>
           <div
             v-else-if="tab._nodes.type === 'apiClientDir'"
-            style="height:100%"
+            style="height: 100%"
           >
-            <ApiClientTab :ref="'tabs'+index" :nodes="tab._nodes" />
+            <ApiClientTab :ref="'tabs' + index" :nodes="tab._nodes" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'apiClientSwaggerDir'"
-            style="height:100%"
+            style="height: 100%"
           >
-            <ApiClientSwaggerTab :ref="'tabs'+index" :nodes="tab._nodes" />
+            <ApiClientSwaggerTab :ref="'tabs' + index" :nodes="tab._nodes" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'sqlClientDir'"
-            style="height:100%"
+            style="height: 100%"
           >
             <sqlLogAndOutput>
-              <SqlClientTab :ref="'tabs'+index" :nodes="tab._nodes" />
+              <SqlClientTab :ref="'tabs' + index" :nodes="tab._nodes" />
             </sqlLogAndOutput>
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'terminal'"
-            style="height:100%"
-          >
-            <x-term :ref="'tabs'+index" style="height: 100%" />
+          <div v-else-if="tab._nodes.type === 'terminal'" style="height: 100%">
+            <x-term :ref="'tabs' + index" style="height: 100%" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'graphqlClientDir'"
-            style="height:100%"
+            style="height: 100%"
           >
-            <graphql-client
-              class="backgroundColor"
-              style="height: 100%"
-            />
+            <graphql-client class="backgroundColor" style="height: 100%" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'swaggerClientDir'"
-            style="height:100%"
+            style="height: 100%"
           >
             <swagger-client style="height: 100%" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'grpcClient'"
-            style="height:100%"
+            style="height: 100%"
           >
             <grpc-client style="height: 100%" />
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'meta'"
-            style="height:100%"
-          >
-            <xc-meta
-              class="backgroundColor"
-              style="height: 100%"
-            />
+          <div v-else-if="tab._nodes.type === 'meta'" style="height: 100%">
+            <xc-meta class="backgroundColor" style="height: 100%" />
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'roles'"
-            style="height:100%"
-          >
+          <div v-else-if="tab._nodes.type === 'roles'" style="height: 100%">
             <auth-tab
               v-if="_isUIAllowed('team-auth')"
               class="backgroundColor"
@@ -183,10 +201,7 @@
               style="height: 100%"
             />
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'acl'"
-            style="height:100%"
-          >
+          <div v-else-if="tab._nodes.type === 'acl'" style="height: 100%">
             <global-acl
               class="backgroundColor"
               :nodes="tab._nodes"
@@ -195,7 +210,7 @@
           </div>
           <div
             v-else-if="tab._nodes.type === 'projectSettings'"
-            style="height:100%"
+            style="height: 100%"
           >
             <project-settings
               v-if="_isUIAllowed('settings')"
@@ -206,7 +221,7 @@
           </div>
           <div
             v-else-if="tab._nodes.type === 'disableOrEnableModel'"
-            style="height:100%"
+            style="height: 100%"
           >
             <disable-or-enable-models
               v-if="_isUIAllowed('project-metadata')"
@@ -215,28 +230,19 @@
               style="height: 100%"
             />
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'cronJobs'"
-            style="height:100%"
-          >
+          <div v-else-if="tab._nodes.type === 'cronJobs'" style="height: 100%">
             <cron-jobs :nodes="tab._nodes" style="height: 100%" />
           </div>
           <div
             v-else-if="tab._nodes.type === 'projectInfo'"
-            style="height:100%"
+            style="height: 100%"
           >
             <xc-info :nodes="tab._nodes" class="h-100" />
           </div>
-          <div
-            v-else-if="tab._nodes.type === 'appStore'"
-            style="height:100%"
-          >
-            <app-store
-              :nodes="tab._nodes"
-              class="backgroundColor h-100"
-            />
+          <div v-else-if="tab._nodes.type === 'appStore'" style="height: 100%">
+            <app-store :nodes="tab._nodes" class="backgroundColor h-100" />
           </div>
-          <div v-else style="height:100%">
+          <div v-else style="height: 100%">
             <h1>{{ tab.name }}</h1>
             <h1>{{ tab._nodes }}</h1>
           </div>
@@ -249,7 +255,7 @@
         v-if="_isUIAllowed('addTable')"
         :tooltip="$t('tooltip.addTable')"
         icon-class="add-btn"
-        :color="[ 'white','grey lighten-2']"
+        :color="['white', 'grey lighten-2']"
         @click="dialogCreateTableShowMethod"
       >
         mdi-plus-box
@@ -260,7 +266,10 @@
     <dlg-table-create
       v-if="dialogCreateTableShow"
       v-model="dialogCreateTableShow"
-      @create="$emit('tableCreate',$event); dialogCreateTableShow =false; teleTblCreate()"
+      @create="
+        $emit('tableCreate', $event);
+        dialogCreateTableShow = false;
+      "
     />
 
     <!--    <screensaver v-if="showScreensaver && !($store.state.project.projectInfo && $store.state.project.projectInfo.ncMin)" class="screensaver" />-->
@@ -268,33 +277,33 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations } from 'vuex'
-import treeViewIcons from '../helpers/treeViewIcons'
-import TableView from './project/table'
-import FunctionTab from './project/function'
-import ProcedureTab from './project/procedure'
-import SequenceTab from './project/sequence'
-import SeedTab from './project/seed'
-import SqlClientTab from './project/sqlClient'
-import ApisTab from './project/apis'
-import ApiClientTab from './project/apiClientOld'
-import sqlLogAndOutput from './project/sqlLogAndOutput'
-import graphqlClient from './project/graphqlClient'
-import xTerm from './xTerm'
-
-import ApiClientSwaggerTab from './project/apiClientSwagger'
-import XcMeta from './project/settings/xcMeta'
-import XcInfo from './project/xcInfo'
-import SwaggerClient from '@/components/project/swaggerClient'
-import DlgTableCreate from '@/components/utils/dlgTableCreate'
-import AppStore from '@/components/project/appStore'
-import AuthTab from '@/components/authTab'
-import CronJobs from '@/components/project/cronJobs'
-import DisableOrEnableModels from '@/components/project/projectMetadata/disableOrEnableModels'
-import ProjectSettings from '@/components/project/projectSettings'
-import GrpcClient from '@/components/project/grpcClient'
-import GlobalAcl from '@/components/globalAcl'
-import AuditTab from '~/components/project/auditTab'
+import { mapGetters, mapMutations } from "vuex";
+import treeViewIcons from "../helpers/treeViewIcons";
+import TableView from "./project/table";
+import FunctionTab from "./project/function";
+import ProcedureTab from "./project/procedure";
+import SequenceTab from "./project/sequence";
+import SeedTab from "./project/seed";
+import SqlClientTab from "./project/sqlClient";
+import ApisTab from "./project/apis";
+import ApiClientTab from "./project/apiClientOld";
+import sqlLogAndOutput from "./project/sqlLogAndOutput";
+import graphqlClient from "./project/graphqlClient";
+import xTerm from "./xTerm";
+
+import ApiClientSwaggerTab from "./project/apiClientSwagger";
+import XcMeta from "./project/settings/xcMeta";
+import XcInfo from "./project/xcInfo";
+import SwaggerClient from "@/components/project/swaggerClient";
+import DlgTableCreate from "@/components/utils/dlgTableCreate";
+import AppStore from "@/components/project/appStore";
+import AuthTab from "@/components/authTab";
+import CronJobs from "@/components/project/cronJobs";
+import DisableOrEnableModels from "@/components/project/projectMetadata/disableOrEnableModels";
+import ProjectSettings from "@/components/project/projectSettings";
+import GrpcClient from "@/components/project/grpcClient";
+import GlobalAcl from "@/components/globalAcl";
+import AuditTab from "~/components/project/auditTab";
 
 export default {
   components: {
@@ -324,148 +333,148 @@ export default {
     SequenceTab,
     sqlLogAndOutput,
     xTerm,
-    graphqlClient
+    graphqlClient,
   },
   data() {
     return {
       dialogCreateTableShow: false,
-      test: '',
+      test: "",
       treeViewIcons,
       hideLogWindows: false,
-      showScreensaver: false
-    }
+      showScreensaver: false,
+    };
   },
   methods: {
     dialogCreateTableShowMethod() {
-      this.dialogCreateTableShow = true
-      this.$tele.emit('table:create:trigger:mdi-plus-box')
-    },
-    teleTblCreate() {
-      this.$tele.emit('table:create:submit')
+      this.dialogCreateTableShow = true;
+      this.$e("c:table:create:navbar");
     },
     checkInactiveState() {
-      let position = 0
-      let idleTime = 0
+      let position = 0;
+      let idleTime = 0;
       // Increment the idle time counter every minute.
-      let idleInterval = setInterval(timerIncrement, 1000)
+      let idleInterval = setInterval(timerIncrement, 1000);
 
-      const self = this
+      const self = this;
       // Zero the idle timer on mouse movement.
-      document.addEventListener('mousemove', (e) => {
-        self.showScreensaver = false
-        idleTime = 0
-        clearInterval(idleInterval)
-        idleInterval = setInterval(timerIncrement, 1000)
-      })
-      document.addEventListener('keypress', (e) => {
-        self.showScreensaver = false
-        idleTime = 0
-        clearInterval(idleInterval)
-        idleInterval = setInterval(timerIncrement, 1000)
-      })
+      document.addEventListener("mousemove", (e) => {
+        self.showScreensaver = false;
+        idleTime = 0;
+        clearInterval(idleInterval);
+        idleInterval = setInterval(timerIncrement, 1000);
+      });
+      document.addEventListener("keypress", (e) => {
+        self.showScreensaver = false;
+        idleTime = 0;
+        clearInterval(idleInterval);
+        idleInterval = setInterval(timerIncrement, 1000);
+      });
 
       function timerIncrement() {
-        idleTime = idleTime + 1
+        idleTime = idleTime + 1;
         if (idleTime > 120) {
-          const title = document.title
+          const title = document.title;
 
           function scrolltitle() {
-            document.title = title + Array(position).fill(' .').join('')
-            position = ++position % 3
+            document.title = title + Array(position).fill(" .").join("");
+            position = ++position % 3;
             if (self.showScreensaver) {
-              window.setTimeout(scrolltitle, 400)
+              window.setTimeout(scrolltitle, 400);
             } else {
-              document.title = title
+              document.title = title;
             }
           }
 
-          self.showScreensaver = self.$store.state.windows.screensaver
-          scrolltitle()
-          clearInterval(idleInterval)
+          self.showScreensaver = self.$store.state.windows.screensaver;
+          scrolltitle();
+          clearInterval(idleInterval);
         }
       }
     },
     async handleKeyDown(event) {
-      const activeTabEleKey = `tabs${this.activeTab}`
-      let isHandled = false
+      const activeTabEleKey = `tabs${this.activeTab}`;
+      let isHandled = false;
 
-      if (this.$refs[activeTabEleKey] &&
+      if (
+        this.$refs[activeTabEleKey] &&
         this.$refs[activeTabEleKey][0] &&
-        this.$refs[activeTabEleKey][0].handleKeyDown) {
-        isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event)
+        this.$refs[activeTabEleKey][0].handleKeyDown
+      ) {
+        isHandled = await this.$refs[activeTabEleKey][0].handleKeyDown(event);
       }
       if (!isHandled) {
-        switch ([this._isMac ? event.metaKey : event.ctrlKey, event.key].join('_')) {
-          case 'true_w' :
-            this.removeTab(this.activeTab)
-            event.preventDefault()
-            event.stopPropagation()
-            break
+        switch (
+          [this._isMac ? event.metaKey : event.ctrlKey, event.key].join("_")
+        ) {
+          case "true_w":
+            this.removeTab(this.activeTab);
+            event.preventDefault();
+            event.stopPropagation();
+            break;
         }
       }
     },
     ...mapMutations({
-      setActiveTab: 'tabs/active',
-      removeTab: 'tabs/remove',
-      updateActiveTabx: 'tabs/activeTabCtx'
+      setActiveTab: "tabs/active",
+      removeTab: "tabs/remove",
+      updateActiveTabx: "tabs/activeTabCtx",
     }),
-    tabActivated(tab) {
-    }
+    tabActivated(tab) {},
   },
   computed: {
-    ...mapGetters({ tabs: 'tabs/list', activeTabCtx: 'tabs/activeTabCtx' }),
+    ...mapGetters({ tabs: "tabs/list", activeTabCtx: "tabs/activeTabCtx" }),
     pid() {
-      return this.$route.params.project_id
+      return this.$route.params.project_id;
     },
     activeTab: {
       set(tab) {
         if (!tab) {
           return this.$router.push({
-            query: {}
-          })
+            query: {},
+          });
         }
-        const [type, dbalias, name] = tab.split('||')
+        const [type, dbalias, name] = tab.split("||");
         this.$router.push({
           query: {
             ...this.$route.query,
             type,
             dbalias,
-            name
-          }
-        })
+            name,
+          },
+        });
       },
       get() {
-        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("||");
+      },
+    },
   },
 
-  beforeCreated() {
-  },
-  watch: {
-  },
+  beforeCreated() {},
+  watch: {},
   created() {
-    document.addEventListener('keydown', this.handleKeyDown)
+    document.addEventListener("keydown", this.handleKeyDown);
     /**
      * Listening for tab change so that we can hide/show projectlogs based on tab
      */
   },
-  mounted() {
-  },
-  beforeDestroy() {
-  },
+  mounted() {},
+  beforeDestroy() {},
   destroyed() {
-    document.removeEventListener('keydown', this.handleKeyDown)
+    document.removeEventListener("keydown", this.handleKeyDown);
   },
   directives: {},
   validate({ params }) {
-    return true
+    return true;
   },
   head() {
-    return {}
+    return {};
   },
-  props: {}
-}
+  props: {},
+};
 </script>
 
 <style scoped>
@@ -520,11 +529,11 @@ export default {
 
 .powered-by .powered-by-close {
   opacity: 0;
-  transition: .4s opacity;
+  transition: 0.4s opacity;
 }
 
 .powered-by a {
-  transition: .1s font-weight;
+  transition: 0.1s font-weight;
 }
 
 .powered-by:hover .powered-by-close {
@@ -543,10 +552,9 @@ export default {
   position: absolute;
 }
 
-/deep/ .project-tab:first-of-type{
+/deep/ .project-tab:first-of-type {
   margin-left: 0 !important;
 }
-
 </style>
 <!--
 /**
diff --git a/packages/nc-gui/components/settings/settingsModal.vue b/packages/nc-gui/components/settings/settingsModal.vue
index 226519eddc..402ae628af 100644
--- a/packages/nc-gui/components/settings/settingsModal.vue
+++ b/packages/nc-gui/components/settings/settingsModal.vue
@@ -34,7 +34,7 @@
                   <v-tooltip bottom>
                     <template #activator="{ on }">
                       <v-list-item
-                        v-t="['settings:team-auth']"
+                        v-t="['c:settings:team-auth']"
                         value="roles"
                         dense
                         class="body-2 nc-settings-teamauth"
@@ -61,7 +61,7 @@
                     <v-tooltip bottom>
                       <template #activator="{ on }">
                         <v-list-item
-                          v-t="['settings:appstore']"
+                          v-t="['c:settings:appstore']"
                           dense
                           class="body-2 nc-settings-appstore"
                           value="appStore"
@@ -87,7 +87,7 @@
                     <v-tooltip bottom>
                       <template #activator="{ on }">
                         <v-list-item
-                          v-t="['settings:proj-metadata']"
+                          v-t="['c:settings:proj-metadata']"
                           dense
                           class="body-2 nc-settings-projmeta"
                           value="disableOrEnableModel"
@@ -113,7 +113,7 @@
                     <v-tooltip bottom>
                       <template #activator="{ on }">
                         <v-list-item
-                          v-t="['settings:audit']"
+                          v-t="['c:settings:audit']"
                           dense
                           class="body-2 nc-settings-audit"
                           value="audit"
diff --git a/packages/nc-gui/components/templates/editor.vue b/packages/nc-gui/components/templates/editor.vue
index f7a8ee55df..30f4840b45 100644
--- a/packages/nc-gui/components/templates/editor.vue
+++ b/packages/nc-gui/components/templates/editor.vue
@@ -2,18 +2,15 @@
   <div class="h-100" style="min-height: 500px">
     <v-toolbar v-if="!viewMode" class="elevation-0">
       <slot name="toolbar" :valid="valid">
-
         <v-tooltip bottom>
-          <template #activator="{on}">
+          <template #activator="{ on }">
             <v-btn
               small
               outlined
               v-on="on"
               @click="$toast.info('Happy hacking!').goAway(3000)"
             >
-              <v-icon small class="mr-1">
-                mdi-file-excel-outline
-              </v-icon>
+              <v-icon small class="mr-1"> mdi-file-excel-outline </v-icon>
               Import
             </v-btn>
           </template>
@@ -22,20 +19,16 @@
 
         <v-spacer />
 
-        <v-icon class="mr-3" @click="helpModal=true">
+        <v-icon class="mr-3" @click="helpModal = true">
           mdi-information-outline
         </v-icon>
 
-        <v-btn small outlined class="mr-1" @click="project = {tables : []}">
-          <v-icon small>
-            mdi-close
-          </v-icon>
+        <v-btn small outlined class="mr-1" @click="project = { tables: [] }">
+          <v-icon small> mdi-close </v-icon>
           Reset
         </v-btn>
         <v-btn small outlined class="mr-1" @click="createTableClick">
-          <v-icon small>
-            mdi-plus
-          </v-icon>
+          <v-icon small> mdi-plus </v-icon>
           New table
         </v-btn>
         <v-btn
@@ -47,18 +40,21 @@
           :disabled="loading"
           @click="saveTemplate"
         >
-          {{ id || localId ? 'Update in' : 'Submit to' }} NocoDB
+          {{ id || localId ? "Update in" : "Submit to" }} NocoDB
         </v-btn>
       </slot>
     </v-toolbar>
     <v-divider class="mt-6" />
-    <v-container class="text-center" style="height:calc(100% - 64px);overflow-y: auto">
+    <v-container
+      class="text-center"
+      style="height: calc(100% - 64px); overflow-y: auto"
+    >
       <v-form ref="form" v-model="valid">
         <v-row fluid class="justify-center">
           <v-col cols="12">
             <v-card class="elevation-0">
               <v-card-text>
-                <div v-if="!viewMode" class="mx-auto" style="max-width:400px">
+                <div v-if="!viewMode" class="mx-auto" style="max-width: 400px">
                   <div class="mt-1">
                     <v-text-field
                       ref="project"
@@ -67,7 +63,7 @@
                       outlined
                       hide-details
                       denses
-                      :rules="[v => !!v || 'Project name required'] "
+                      :rules="[(v) => !!v || 'Project name required']"
                     >
                       <template #label>
                         <span class="caption">Project Name</span>
@@ -77,7 +73,10 @@
                 </div>
 
                 <p v-if="project.tables" class="caption grey--text mt-4">
-                  {{ project.tables.length }} sheet{{ project.tables.length > 1 ? 's' :'' }} available for import
+                  {{ project.tables.length }} sheet{{
+                    project.tables.length > 1 ? "s" : ""
+                  }}
+                  available for import
                 </p>
 
                 <v-expansion-panels
@@ -90,9 +89,7 @@
                     v-for="(table, i) in project.tables"
                     :key="i"
                   >
-                    <v-expansion-panel-header
-                      :id="`tn_${table.table_name}`"
-                    >
+                    <v-expansion-panel-header :id="`tn_${table.table_name}`">
                       <v-text-field
                         v-if="editableTn[i]"
                         :value="table.table_name"
@@ -102,22 +99,32 @@
                         autofocus
                         dense
                         hide-details
-                        @input="e => onTableNameUpdate(table, e)"
-                        @click="e => viewMode || e.stopPropagation()"
-                        @blur="$set(editableTn,i, false)"
-                        @keydown.enter=" $set(editableTn,i, false)"
+                        @input="(e) => onTableNameUpdate(table, e)"
+                        @click="(e) => viewMode || e.stopPropagation()"
+                        @blur="$set(editableTn, i, false)"
+                        @keydown.enter="$set(editableTn, i, false)"
                       />
                       <span
                         v-else
                         class="font-weight-bold"
-                        @click="e => viewMode || (e.stopPropagation() , $set(editableTn,i, true))"
+                        @click="
+                          (e) =>
+                            viewMode ||
+                            (e.stopPropagation(), $set(editableTn, i, true))
+                        "
                       >
                         <v-icon color="primary lighten-1">mdi-table</v-icon>
                         {{ table.table_name }}
                       </span>
 
                       <v-spacer />
-                      <v-icon v-if="!viewMode" class="flex-grow-0 mr-2" small color="grey" @click.stop="deleteTable(i)">
+                      <v-icon
+                        v-if="!viewMode"
+                        class="flex-grow-0 mr-2"
+                        small
+                        color="grey"
+                        @click.stop="deleteTable(i)"
+                      >
                         mdi-delete-outline
                       </v-icon>
                     </v-expansion-panel-header>
@@ -129,32 +136,42 @@
                                       </v-toolbar>-->
 
                       <template>
-                        <v-simple-table v-if="table.columns.length" dense class="my-4">
+                        <v-simple-table
+                          v-if="table.columns.length"
+                          dense
+                          class="my-4"
+                        >
                           <thead>
                             <tr>
                               <th class="caption text-left pa-1">
                                 <!--Column Name-->
-                                {{ $t('labels.columnName') }}
+                                {{ $t("labels.columnName") }}
                               </th>
                               <th class="caption text-left pa-1" colspan="4">
                                 <!--Column Type-->
-                                {{ $t('labels.columnType') }}
+                                {{ $t("labels.columnType") }}
                               </th>
                               <th />
-                            <!--                    <th class='text-center'>Related Table</th>-->
-                            <!--                    <th class='text-center'>Related Column</th>-->
+                              <!--                    <th class='text-center'>Related Table</th>-->
+                              <!--                    <th class='text-center'>Related Column</th>-->
                             </tr>
                           </thead>
                           <tbody>
-                            <tr v-for="(col,j) in table.columns" :key="j" :data-exp="i">
-                              <td class="pa-1 text-left" :style="{width:viewMode ? '33%' : '15%'}">
-                                <span v-if="viewMode" class="body-1 ">
+                            <tr
+                              v-for="(col, j) in table.columns"
+                              :key="j"
+                              :data-exp="i"
+                            >
+                              <td
+                                class="pa-1 text-left"
+                                :style="{ width: viewMode ? '33%' : '15%' }"
+                              >
+                                <span v-if="viewMode" class="body-1">
                                   {{ col.column_name }}
                                 </span>
 
                                 <v-text-field
                                   v-else
-
                                   :ref="`cn_${table.table_name}_${j}`"
                                   :value="col.column_name"
                                   outlined
@@ -163,17 +180,37 @@
                                   :placeholder="$t('labels.columnName')"
                                   hide-details="auto"
                                   :rules="[
-                                    v => !!v || 'Column name required',
-                                    v =>!table.columns.some(c=>c !== col && c.column_name === v) || 'Duplicate column not allowed'
+                                    (v) => !!v || 'Column name required',
+                                    (v) =>
+                                      !table.columns.some(
+                                        (c) => c !== col && c.column_name === v
+                                      ) || 'Duplicate column not allowed',
                                   ]"
-                                  @input="e => onColumnNameUpdate(col,e,table.table_name)"
+                                  @input="
+                                    (e) =>
+                                      onColumnNameUpdate(
+                                        col,
+                                        e,
+                                        table.table_name
+                                      )
+                                  "
                                 />
                               </td>
 
                               <template v-if="viewMode">
                                 <td
-                                  :style="{width:viewMode && isRelation(col) || isLookupOrRollup(col) ? '33%' : ''}"
-                                  :colspan="isRelation(col) || isLookupOrRollup(col) ? 3 : 5"
+                                  :style="{
+                                    width:
+                                      (viewMode && isRelation(col)) ||
+                                      isLookupOrRollup(col)
+                                        ? '33%'
+                                        : '',
+                                  }"
+                                  :colspan="
+                                    isRelation(col) || isLookupOrRollup(col)
+                                      ? 3
+                                      : 5
+                                  "
                                   class="text-left"
                                 >
                                   <v-icon small>
@@ -181,7 +218,12 @@
                                   </v-icon>
                                   <span class="caption">{{ col.uidt }}</span>
                                 </td>
-                                <td v-if="isRelation(col) || isLookupOrRollup(col)" class="text-left">
+                                <td
+                                  v-if="
+                                    isRelation(col) || isLookupOrRollup(col)
+                                  "
+                                  class="text-left"
+                                >
                                   <span
                                     v-if="isRelation(col)"
                                     class="caption pointer primary--text"
@@ -189,34 +231,40 @@
                                   >
                                     {{ col.rtn }}
                                   </span>
-                                  <template
-                                    v-else-if="isLookup(col)"
-                                  >
+                                  <template v-else-if="isLookup(col)">
                                     <span
                                       class="caption pointer primary--text"
-                                      @click="navigateToTable(col.rtn && col.rtn.table_name)"
+                                      @click="
+                                        navigateToTable(
+                                          col.rtn && col.rtn.table_name
+                                        )
+                                      "
                                     >
                                       {{ col.rtn && col.rtn.table_name }}
-                                    </span> <span class="caption">({{ col.rcn }})</span>
+                                    </span>
+                                    <span class="caption">({{ col.rcn }})</span>
                                   </template>
 
-                                  <template
-                                    v-else-if="isRollup(col)"
-                                  >
+                                  <template v-else-if="isRollup(col)">
                                     <span
                                       class="caption pointer primary--text"
-                                      @click="navigateToTable(col.rtn && col.rtn.table_name)"
+                                      @click="
+                                        navigateToTable(
+                                          col.rtn && col.rtn.table_name
+                                        )
+                                      "
                                     >
                                       {{ col.rtn && col.rtn.table_name }}
-                                    </span> <span class="caption">({{ col.fn }})</span>
+                                    </span>
+                                    <span class="caption">({{ col.fn }})</span>
                                   </template>
                                 </td>
                               </template>
 
                               <template v-else>
                                 <td
-                                  class="pa-1  text-left"
-                                  style="width:200px;max-width:200px"
+                                  class="pa-1 text-left"
+                                  style="width: 200px; max-width: 200px"
                                 >
                                   <v-autocomplete
                                     :ref="`uidt_${table.table_name}_${j}`"
@@ -227,33 +275,60 @@
                                     dense
                                     class="caption"
                                     hide-details="auto"
-                                    :rules="[v => !!v || 'Column data type required']"
-                                    :items="col.uidt ==='ForeignKey' ? [...uiTypes, {
-                                      name: 'ForeignKey',
-                                      icon: 'mdi-link-variant',
-                                      virtual: 1
-                                    }] : uiTypes"
+                                    :rules="[
+                                      (v) => !!v || 'Column data type required',
+                                    ]"
+                                    :items="
+                                      col.uidt === 'ForeignKey'
+                                        ? [
+                                            ...uiTypes,
+                                            {
+                                              name: 'ForeignKey',
+                                              icon: 'mdi-link-variant',
+                                              virtual: 1,
+                                            },
+                                          ]
+                                        : uiTypes
+                                    "
                                     item-text="name"
                                     item-value="name"
-                                    @input="v => onUidtChange(col.uidt,v,col,table)"
+                                    @input="
+                                      (v) =>
+                                        onUidtChange(col.uidt, v, col, table)
+                                    "
                                   >
-                                    <template #item="{item:{name}}">
-                                      <v-chip v-if="colors[name]" :color="colors[name]" small>
+                                    <template #item="{ item: { name } }">
+                                      <v-chip
+                                        v-if="colors[name]"
+                                        :color="colors[name]"
+                                        small
+                                      >
                                         {{ name }}
                                       </v-chip>
-                                      <span v-else class="caption">{{ name }}</span>
+                                      <span v-else class="caption">{{
+                                        name
+                                      }}</span>
                                     </template>
-                                    <template #selection="{item:{name}} ">
-                                      <v-chip v-if="colors[name]" :color="colors[name]" small style="max-width: 100px">
+                                    <template #selection="{ item: { name } }">
+                                      <v-chip
+                                        v-if="colors[name]"
+                                        :color="colors[name]"
+                                        small
+                                        style="max-width: 100px"
+                                      >
                                         {{ name }}
                                       </v-chip>
-                                      <span v-else class="caption">{{ name }}</span>
+                                      <span v-else class="caption">{{
+                                        name
+                                      }}</span>
                                     </template>
                                   </v-autocomplete>
                                 </td>
 
                                 <template
-                                  v-if="isRelation(col) || isLookupOrRollup(col)"
+                                  v-if="
+                                    isRelation(col) || isLookupOrRollup(col)
+                                  "
                                 >
                                   <td class="pa-1 text-left">
                                     <v-autocomplete
@@ -263,21 +338,42 @@
                                       class="caption"
                                       dense
                                       hide-details="auto"
-                                      :rules="[v => !!v || 'Related table name required', ...getRules(col, table)]"
-                                      :items="isLookupOrRollup(col) ? getRelatedTables(table.table_name, isRollup(col)) : project.tables"
-                                      :item-text="t => isLookupOrRollup(col) ? `${t.table_name} (${t.type})` : t.table_name"
-                                      :item-value="t => isLookupOrRollup(col) ? t : t.table_name"
+                                      :rules="[
+                                        (v) =>
+                                          !!v || 'Related table name required',
+                                        ...getRules(col, table),
+                                      ]"
+                                      :items="
+                                        isLookupOrRollup(col)
+                                          ? getRelatedTables(
+                                              table.table_name,
+                                              isRollup(col)
+                                            )
+                                          : project.tables
+                                      "
+                                      :item-text="
+                                        (t) =>
+                                          isLookupOrRollup(col)
+                                            ? `${t.table_name} (${t.type})`
+                                            : t.table_name
+                                      "
+                                      :item-value="
+                                        (t) =>
+                                          isLookupOrRollup(col)
+                                            ? t
+                                            : t.table_name
+                                      "
                                       :value-comparator="compareRel"
-                                      @input="v => onRtnChange(col.rtn,v, col, table)"
+                                      @input="
+                                        (v) =>
+                                          onRtnChange(col.rtn, v, col, table)
+                                      "
                                     />
                                   </td>
 
                                   <td v-if="isRelation(col)" class="pa-1">
                                     <template v-if="col.uidt !== 'ForeignKey'">
-                                      <span
-                                        v-if="viewMode"
-                                        class="caption"
-                                      >
+                                      <span v-if="viewMode" class="caption">
                                         <!--                                    {{ col.type }}-->
                                       </span>
                                       <v-autocomplete
@@ -288,17 +384,28 @@
                                         class="caption"
                                         dense
                                         hide-details="auto"
-                                        :rules="[v => !!v || 'Relation type required']"
-                                        :items="[{text:'Many To Many', value:'mm'},{text:'Has Many', value:'hm'}]"
-                                        @input="v => onRTypeChange(col.type, v, col,table)"
+                                        :rules="[
+                                          (v) =>
+                                            !!v || 'Relation type required',
+                                        ]"
+                                        :items="[
+                                          { text: 'Many To Many', value: 'mm' },
+                                          { text: 'Has Many', value: 'hm' },
+                                        ]"
+                                        @input="
+                                          (v) =>
+                                            onRTypeChange(
+                                              col.type,
+                                              v,
+                                              col,
+                                              table
+                                            )
+                                        "
                                       />
                                     </template>
                                   </td>
                                   <td v-if="isLookupOrRollup(col)" class="pa-1">
-                                    <span
-                                      v-if="viewMode"
-                                      class="caption"
-                                    >
+                                    <span v-if="viewMode" class="caption">
                                       {{ col.rcn }}
                                     </span>
 
@@ -310,17 +417,27 @@
                                       dense
                                       class="caption"
                                       hide-details="auto"
-                                      :rules="[v => !!v || 'Related column name required']"
-                                      :items="(project.tables.find(t => t.table_name === (col.rtn && col.rtn.table_name || col.rtn)) || {columns:[]}).columns.filter(v=> !isVirtual(v))"
+                                      :rules="[
+                                        (v) =>
+                                          !!v || 'Related column name required',
+                                      ]"
+                                      :items="
+                                        (
+                                          project.tables.find(
+                                            (t) =>
+                                              t.table_name ===
+                                              ((col.rtn &&
+                                                col.rtn.table_name) ||
+                                                col.rtn)
+                                          ) || { columns: [] }
+                                        ).columns.filter((v) => !isVirtual(v))
+                                      "
                                       item-text="column_name"
                                       item-value="column_name"
                                     />
                                   </td>
                                   <td v-if="isRollup(col)" class="pa-1">
-                                    <span
-                                      v-if="viewMode"
-                                      class="caption"
-                                    >
+                                    <span v-if="viewMode" class="caption">
                                       {{ col.fn }}
                                     </span>
 
@@ -332,19 +449,18 @@
                                       dense
                                       class="caption"
                                       hide-details="auto"
-                                      :rules="[v => !!v || 'Rollup aggregate function name required']"
+                                      :rules="[
+                                        (v) =>
+                                          !!v ||
+                                          'Rollup aggregate function name required',
+                                      ]"
                                       :items="rollupFnList"
                                     />
                                   </td>
                                 </template>
-                                <template
-                                  v-if="isSelect(col)"
-                                >
+                                <template v-if="isSelect(col)">
                                   <td class="pa-1 text-left" colspan="2">
-                                    <span
-                                      v-if="viewMode"
-                                      class="caption"
-                                    >
+                                    <span v-if="viewMode" class="caption">
                                       {{ col.dtxp }}
                                     </span>
                                     <v-text-field
@@ -358,17 +474,26 @@
                                   </td>
                                 </template>
                                 <td
-                                  v-if="!isRollup(col) "
-                                  :colspan="isLookupOrRollup(col) || isRelation(col) || isSelect(col) ? (isRollup(col)?
-                                    0 :1) : 3"
+                                  v-if="!isRollup(col)"
+                                  :colspan="
+                                    isLookupOrRollup(col) ||
+                                    isRelation(col) ||
+                                    isSelect(col)
+                                      ? isRollup(col)
+                                        ? 0
+                                        : 1
+                                      : 3
+                                  "
                                 />
-                                <td style="max-width: 50px;width: 50px">
+                                <td style="max-width: 50px; width: 50px">
                                   <v-icon
                                     v-if="!viewMode"
                                     class="flex-grow-0"
                                     small
                                     color="grey"
-                                    @click.stop="deleteTableColumn(i,j, col, table)"
+                                    @click.stop="
+                                      deleteTableColumn(i, j, col, table)
+                                    "
                                   >
                                     mdi-delete-outline
                                   </v-icon>
@@ -376,35 +501,63 @@
                               </template>
                             </tr>
 
-                          <!--                  <tr>-->
-                          <!--                    <td colspan='4' class='text-center pa-2'>-->
-                          <!--                    </td>-->
-                          <!--                  </tr>-->
+                            <!--                  <tr>-->
+                            <!--                    <td colspan='4' class='text-center pa-2'>-->
+                            <!--                    </td>-->
+                            <!--                  </tr>-->
                           </tbody>
                         </v-simple-table>
 
                         <div v-if="!viewMode" class="text-center">
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Number')">
-                            {{ getIcon('Number') }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table, 'Number')"
+                          >
+                            {{ getIcon("Number") }}
                           </v-icon>
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'SingleLineText')">
-                            {{ getIcon('SingleLineText') }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table, 'SingleLineText')"
+                          >
+                            {{ getIcon("SingleLineText") }}
                           </v-icon>
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'LongText')">
-                            {{
-                              getIcon('LongText')
-                            }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table, 'LongText')"
+                          >
+                            {{ getIcon("LongText") }}
                           </v-icon>
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'LinkToAnotherRecord')">
-                            {{ getIcon('LinkToAnotherRecord') }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="
+                              addNewColumnRow(table, 'LinkToAnotherRecord')
+                            "
+                          >
+                            {{ getIcon("LinkToAnotherRecord") }}
                           </v-icon>
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Lookup')">
-                            {{ getIcon('Lookup') }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table, 'Lookup')"
+                          >
+                            {{ getIcon("Lookup") }}
                           </v-icon>
-                          <v-icon class="mx-2" small @click="addNewColumnRow(table, 'Rollup')">
-                            {{ getIcon('Rollup') }}
+                          <v-icon
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table, 'Rollup')"
+                          >
+                            {{ getIcon("Rollup") }}
                           </v-icon>
-                          <v-btn class="mx-2" small @click="addNewColumnRow(table)">
+                          <v-btn
+                            class="mx-2"
+                            small
+                            @click="addNewColumnRow(table)"
+                          >
                             + column
                           </v-btn>
                         </div>
@@ -412,15 +565,18 @@
                     </v-expansion-panel-content>
                   </v-expansion-panel>
                 </v-expansion-panels>
-                <div v-if="!viewMode" class="mx-auto" style="max-width:600px">
+                <div v-if="!viewMode" class="mx-auto" style="max-width: 600px">
                   <template v-if="!excelImport">
-                    <gradient-generator v-model="project.image_url" class=" d-100 mt-4" />
+                    <gradient-generator
+                      v-model="project.image_url"
+                      class="d-100 mt-4"
+                    />
 
                     <v-row>
                       <v-col>
                         <v-text-field
                           v-model="project.category"
-                          :rules="[v => !!v || 'Category name required']"
+                          :rules="[(v) => !!v || 'Category name required']"
                           class="caption"
                           outlined
                           dense
@@ -460,7 +616,7 @@
       <v-card>
         <v-card-title>
           <!--Enter table name-->
-          {{ $t('msg.info.enterTableName') }}
+          {{ $t("msg.info.enterTableName") }}
         </v-card-title>
         <v-card-text>
           <v-text-field
@@ -475,13 +631,13 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn outlined small @click="createTablesDialog=false">
+          <v-btn outlined small @click="createTablesDialog = false">
             <!-- Cancel -->
-            {{ $t('general.cancel') }}
+            {{ $t("general.cancel") }}
           </v-btn>
           <v-btn outlined color="primary" small @click="addTables">
             <!-- Save -->
-            {{ $t('general.save') }}
+            {{ $t("general.save") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -502,13 +658,13 @@
         </v-card-text>
         <v-card-actions>
           <v-spacer />
-          <v-btn outlined small @click="createTableColumnsDialog=false">
+          <v-btn outlined small @click="createTableColumnsDialog = false">
             <!-- Cancel -->
-            {{ $t('general.cancel') }}
+            {{ $t("general.cancel") }}
           </v-btn>
           <v-btn outlined color="primary" small @click="addColumns">
             <!-- Save -->
-            {{ $t('general.save') }}
+            {{ $t("general.save") }}
           </v-btn>
         </v-card-actions>
       </v-card>
@@ -517,14 +673,14 @@
     <help v-model="helpModal" />
 
     <v-tooltip v-if="!viewMode" left>
-      <template #activator="{on}">
+      <template #activator="{ on }">
         <v-btn
           fixed
           fab
           large
           color="primary"
           right
-          style="top:45%"
+          style="top: 45%"
           @click="createTableClick"
           v-on="on"
         >
@@ -533,80 +689,85 @@
       </template>
       <span class="caption">
         <!--Add new table-->
-        {{ $t('tooltip.addTable') }}
+        {{ $t("tooltip.addTable") }}
       </span>
     </v-tooltip>
   </div>
 </template>
 
 <script>
-
-import { uiTypes, getUIDTIcon, UITypes } from '~/components/project/spreadsheet/helpers/uiTypes'
-import GradientGenerator from '~/components/templates/gradientGenerator'
-import Help from '~/components/templates/help'
-
-const LinkToAnotherRecord = 'LinkToAnotherRecord'
-const Lookup = 'Lookup'
-const Rollup = 'Rollup'
-const defaultColProp = {}
+import {
+  uiTypes,
+  getUIDTIcon,
+  UITypes,
+} from "~/components/project/spreadsheet/helpers/uiTypes";
+import GradientGenerator from "~/components/templates/gradientGenerator";
+import Help from "~/components/templates/help";
+
+const LinkToAnotherRecord = "LinkToAnotherRecord";
+const Lookup = "Lookup";
+const Rollup = "Rollup";
+const defaultColProp = {};
 
 export default {
-  name: 'TemplateEditor',
+  name: "TemplateEditor",
   components: { Help, GradientGenerator },
   props: {
     id: [Number, String],
     viewMode: Boolean,
     projectTemplate: Object,
-    excelImport: Boolean
+    excelImport: Boolean,
   },
   data: () => ({
     loading: false,
     localId: null,
     valid: false,
-    url: '',
+    url: "",
     githubConfigForm: false,
     helpModal: false,
     editableTn: {},
     expansionPanel: 0,
     project: {
-      name: 'Project name',
-      tables: []
+      name: "Project name",
+      tables: [],
     },
-    tableNamesInput: '',
-    columnNamesInput: '',
+    tableNamesInput: "",
+    columnNamesInput: "",
     createTablesDialog: false,
     createTableColumnsDialog: false,
     selectedTable: null,
-    uiTypes: uiTypes.filter(t => ![UITypes.Formula, UITypes.SpecificDBType].includes(t.name)),
+    uiTypes: uiTypes.filter(
+      (t) => ![UITypes.Formula, UITypes.SpecificDBType].includes(t.name)
+    ),
     rollupFnList: [
-      { text: 'count', value: 'count' },
-      { text: 'min', value: 'min' },
-      { text: 'max', value: 'max' },
-      { text: 'avg', value: 'avg' },
-      { text: 'min', value: 'min' },
-      { text: 'sum', value: 'sum' },
-      { text: 'countDistinct', value: 'countDistinct' },
-      { text: 'sumDistinct', value: 'sumDistinct' },
-      { text: 'avgDistinct', value: 'avgDistinct' }
+      { text: "count", value: "count" },
+      { text: "min", value: "min" },
+      { text: "max", value: "max" },
+      { text: "avg", value: "avg" },
+      { text: "min", value: "min" },
+      { text: "sum", value: "sum" },
+      { text: "countDistinct", value: "countDistinct" },
+      { text: "sumDistinct", value: "sumDistinct" },
+      { text: "avgDistinct", value: "avgDistinct" },
     ],
     colors: {
-      LinkToAnotherRecord: 'blue lighten-5',
-      Rollup: 'pink lighten-5',
-      Lookup: 'green lighten-5'
-    }
+      LinkToAnotherRecord: "blue lighten-5",
+      Rollup: "pink lighten-5",
+      Lookup: "green lighten-5",
+    },
   }),
   computed: {
     counter: {
       get() {
-        return this.$store.state.templateC
+        return this.$store.state.templateC;
       },
       set(c) {
-        this.$store.commit('mutTemplateC', c)
-      }
+        this.$store.commit("mutTemplateC", c);
+      },
     },
     updateFilename() {
-      return this.url && this.url.split('/').pop()
-    }
+      return this.url && this.url.split("/").pop();
+    },
   },
   watch: {
     project: {
@@ -615,25 +776,32 @@ export default {
         const template = {
           ...this.project,
           tables: (this.project.tables || []).map((t) => {
-            const table = { ...t, columns: [], hasMany: [], manyToMany: [], belongsTo: [], v: [] }
-
-            for (const column of (t.columns || [])) {
+            const table = {
+              ...t,
+              columns: [],
+              hasMany: [],
+              manyToMany: [],
+              belongsTo: [],
+              v: [],
+            };
+
+            for (const column of t.columns || []) {
               if (this.isRelation(column)) {
-                if (column.type === 'hm') {
+                if (column.type === "hm") {
                   table.hasMany.push({
                     tn: column.rtn,
-                    _cn: column.column_name
-                  })
-                } else if (column.type === 'mm') {
+                    _cn: column.column_name,
+                  });
+                } else if (column.type === "mm") {
                   table.manyToMany.push({
                     rtn: column.rtn,
-                    _cn: column.column_name
-                  })
+                    _cn: column.column_name,
+                  });
                 } else if (column.uidt === UITypes.ForeignKey) {
                   table.belongsTo.push({
                     tn: column.rtn,
-                    _cn: column.column_name
-                  })
+                    _cn: column.column_name,
+                  });
                 }
               } else if (this.isLookup(column)) {
                 if (column.rtn) {
@@ -642,9 +810,9 @@ export default {
                     lk: {
                       ltn: column.rtn.table_name,
                       type: column.rtn.type,
-                      lcn: column.rcn
-                    }
-                  })
+                      lcn: column.rcn,
+                    },
+                  });
                 }
               } else if (this.isRollup(column)) {
                 if (column.rtn) {
@@ -654,222 +822,267 @@ export default {
                       rltn: column.rtn.table_name,
                       rlcn: column.rcn,
                       type: column.rtn.type,
-                      fn: column.fn
-                    }
-                  })
+                      fn: column.fn,
+                    },
+                  });
                 }
               } else {
-                table.columns.push(column)
+                table.columns.push(column);
               }
             }
-            return table
-          })
-        }
-        this.$emit('update:projectTemplate', template)
-      }
-    }
+            return table;
+          }),
+        };
+        this.$emit("update:projectTemplate", template);
+      },
+    },
   },
 
   created() {
-    document.addEventListener('keydown', this.handleKeyDown)
+    document.addEventListener("keydown", this.handleKeyDown);
   },
   destroyed() {
-    document.removeEventListener('keydown', this.handleKeyDown)
+    document.removeEventListener("keydown", this.handleKeyDown);
   },
   mounted() {
-    this.parseAndLoadTemplate()
-    const input = this.$refs.projec && this.$refs.project.$el.querySelector('input')
+    this.parseAndLoadTemplate();
+    const input =
+      this.$refs.projec && this.$refs.project.$el.querySelector("input");
     if (input) {
-      input.focus()
-      input.select()
+      input.focus();
+      input.select();
     }
   },
   methods: {
     createTableClick() {
-      this.createTablesDialog = true
-      this.$tele.emit('table:create:mdi-plus-circle')
+      this.createTablesDialog = true;
+      this.$e("c:table:create:navdraw");
     },
     parseAndLoadTemplate() {
       if (this.projectTemplate) {
-        this.parseTemplate(this.projectTemplate)
-        this.expansionPanel = Array.from({ length: this.project.tables.length }, (_, i) => i)
+        this.parseTemplate(this.projectTemplate);
+        this.expansionPanel = Array.from(
+          { length: this.project.tables.length },
+          (_, i) => i
+        );
       }
     },
     getIcon(type) {
-      return getUIDTIcon(type)
+      return getUIDTIcon(type);
     },
     getRelatedTables(tableName, rollup = false) {
-      const tables = []
+      const tables = [];
       for (const t of this.projectTemplate.tables) {
         if (tableName === t.table_name) {
           for (const hm of t.hasMany) {
-            const rTable = this.project.tables.find(t1 => t1.table_name === hm.table_name)
+            const rTable = this.project.tables.find(
+              (t1) => t1.table_name === hm.table_name
+            );
             tables.push({
               ...rTable,
-              type: 'hm'
-            })
+              type: "hm",
+            });
           }
           for (const mm of t.manyToMany) {
-            const rTable = this.project.tables.find(t1 => t1.table_name === mm.rtn)
+            const rTable = this.project.tables.find(
+              (t1) => t1.table_name === mm.rtn
+            );
             tables.push({
               ...rTable,
-              type: 'mm'
-            })
+              type: "mm",
+            });
           }
         } else {
           for (const hm of t.hasMany) {
             if (hm.table_name === tableName && !rollup) {
               tables.push({
                 ...t,
-                type: 'bt'
-              })
+                type: "bt",
+              });
             }
           }
           for (const mm of t.manyToMany) {
             if (mm.rtn === tableName) {
               tables.push({
                 ...t,
-                type: 'mm'
-              })
+                type: "mm",
+              });
             }
           }
         }
       }
 
-      return tables
+      return tables;
     },
     validateAndFocus() {
       if (!this.$refs.form.validate()) {
-        const input = this.$el.querySelector('.v-input.error--text')
-        this.expansionPanel = input && input.parentElement && input.parentElement.parentElement && +input.parentElement.parentElement.dataset.exp
+        const input = this.$el.querySelector(".v-input.error--text");
+        this.expansionPanel =
+          input &&
+          input.parentElement &&
+          input.parentElement.parentElement &&
+          +input.parentElement.parentElement.dataset.exp;
         setTimeout(() => {
-          input.querySelector('input,select').focus()
-        }, 500)
-        return false
+          input.querySelector("input,select").focus();
+        }, 500);
+        return false;
       }
-      return true
+      return true;
     },
     deleteTable(i) {
-      const deleteTable = this.project.tables[i]
+      const deleteTable = this.project.tables[i];
       for (const table of this.project.tables) {
         if (table === deleteTable) {
-          continue
+          continue;
         }
-        table.columns = table.columns.filter(c => c.rtn !== deleteTable.table_name)
+        table.columns = table.columns.filter(
+          (c) => c.rtn !== deleteTable.table_name
+        );
       }
-      this.project.tables.splice(i, 1)
+      this.project.tables.splice(i, 1);
     },
     deleteTableColumn(i, j, col, table) {
-      const deleteTable = this.project.tables[i]
-      const deleteColumn = deleteTable.columns[j]
+      const deleteTable = this.project.tables[i];
+      const deleteColumn = deleteTable.columns[j];
 
-      let rTable, index
+      let rTable, index;
       // if relation column, delete the corresponding relation from other table
       if (col.uidt === UITypes.LinkToAnotherRecord) {
-        if (col.type === 'hm') {
-          rTable = this.project.tables.find(t => t.table_name === col.rtn)
-          index = rTable && rTable.columns.findIndex(c => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name)
-        } else if (col.type === 'mm') {
-          rTable = this.project.tables.find(t => t.table_name === col.rtn)
-          index = rTable && rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'mm')
+        if (col.type === "hm") {
+          rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+          index =
+            rTable &&
+            rTable.columns.findIndex(
+              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+            );
+        } else if (col.type === "mm") {
+          rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+          index =
+            rTable &&
+            rTable.columns.findIndex(
+              (c) =>
+                c.uidt === UITypes.LinkToAnotherRecord &&
+                c.rtn === table.table_name &&
+                c.type === "mm"
+            );
         }
       } else if (col.uidt === UITypes.ForeignKey) {
-        rTable = this.project.tables.find(t => t.table_name === col.rtn)
-        index = rTable && rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'hm')
+        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        index =
+          rTable &&
+          rTable.columns.findIndex(
+            (c) =>
+              c.uidt === UITypes.LinkToAnotherRecord &&
+              c.rtn === table.table_name &&
+              c.type === "hm"
+          );
       }
 
       if (rTable && index > -1) {
-        rTable.columns.splice(index, 1)
+        rTable.columns.splice(index, 1);
       }
 
       for (const table of this.project.tables) {
         if (table === deleteTable) {
-          continue
+          continue;
         }
-        table.columns = table.columns.filter(c => c.rtn !== deleteTable.table_name || c.rcn !== deleteColumn.column_name)
+        table.columns = table.columns.filter(
+          (c) =>
+            c.rtn !== deleteTable.table_name ||
+            c.rcn !== deleteColumn.column_name
+        );
       }
-      deleteTable.columns.splice(j, 1)
+      deleteTable.columns.splice(j, 1);
     },
     addTables() {
       if (!this.tableNamesInput) {
-        return
+        return;
       }
       // todo: fix
-      const re = /(?:^|,\s*)(\w+)(?:\(((\w+)(?:\s*,\s*\w+)?)?\)){0,1}(?=\s*,|\s*$)/g
-      let m
+      const re =
+        /(?:^|,\s*)(\w+)(?:\(((\w+)(?:\s*,\s*\w+)?)?\)){0,1}(?=\s*,|\s*$)/g;
+      let m;
       // eslint-disable-next-line no-cond-assign
-      while (m = re.exec(this.tableNamesInput)) {
-        if (this.project.tables.some(t => t.table_name === m[1])) {
-          this.$toast.info(`Table '${m[1]}' is already exist`).goAway(1000)
-          continue
+      while ((m = re.exec(this.tableNamesInput))) {
+        if (this.project.tables.some((t) => t.table_name === m[1])) {
+          this.$toast.info(`Table '${m[1]}' is already exist`).goAway(1000);
+          continue;
         }
 
         this.project.tables.push({
           tn: m[1],
-          columns: (m[2] ? m[2].split(/\s*,\s*/) : []).map(col => ({
-            cn: col,
-            ...defaultColProp
-          })).filter((v, i, arr) => i === arr.findIndex(c => c.column_name === v.column_name))
-        })
+          columns: (m[2] ? m[2].split(/\s*,\s*/) : [])
+            .map((col) => ({
+              cn: col,
+              ...defaultColProp,
+            }))
+            .filter(
+              (v, i, arr) =>
+                i === arr.findIndex((c) => c.column_name === v.column_name)
+            ),
+        });
       }
-      this.createTablesDialog = false
-      this.tableNamesInput = ''
+      this.createTablesDialog = false;
+      this.tableNamesInput = "";
     },
     compareRel(a, b) {
-      return ((a && a.table_name) || a) === ((b && b.table_name) || b) && (a && a.type) === (b && b.type)
+      return (
+        ((a && a.table_name) || a) === ((b && b.table_name) || b) &&
+        (a && a.type) === (b && b.type)
+      );
     },
     addColumns() {
       if (!this.columnNamesInput) {
-        return
+        return;
       }
-      const table = this.project.tables[this.expansionPanel]
+      const table = this.project.tables[this.expansionPanel];
       for (const col of this.columnNamesInput.split(/\s*,\s*/)) {
-        if (table.columns.some(c => c.column_name === col)) {
-          this.$toast.info(`Column '${col}' is already exist`).goAway(1000)
-          continue
+        if (table.columns.some((c) => c.column_name === col)) {
+          this.$toast.info(`Column '${col}' is already exist`).goAway(1000);
+          continue;
         }
 
         table.columns.push({
           cn: col,
-          ...defaultColProp
-        })
+          ...defaultColProp,
+        });
       }
-      this.columnNamesInput = ''
-      this.createTableColumnsDialog = false
+      this.columnNamesInput = "";
+      this.createTableColumnsDialog = false;
 
       this.$nextTick(() => {
-        const input = this.$refs[`uidt_${table.table_name}_${table.columns.length - 1}`][0].$el.querySelector('input')
-        input.focus()
+        const input =
+          this.$refs[
+            `uidt_${table.table_name}_${table.columns.length - 1}`
+          ][0].$el.querySelector("input");
+        input.focus();
         this.$nextTick(() => {
-          input.select()
-        })
-      })
+          input.select();
+        });
+      });
     },
     showColCreateDialog(table) {
-      this.createTableColumnsDialog = true
-      this.selectedTable = table
+      this.createTableColumnsDialog = true;
+      this.selectedTable = table;
     },
 
     isRelation(col) {
-      return col.uidt === 'LinkToAnotherRecord' ||
-          col.uidt === 'ForeignKey'
+      return col.uidt === "LinkToAnotherRecord" || col.uidt === "ForeignKey";
     },
     isLookup(col) {
-      return col.uidt === 'Lookup'
+      return col.uidt === "Lookup";
     },
     isRollup(col) {
-      return col.uidt === 'Rollup'
+      return col.uidt === "Rollup";
     },
     isVirtual(col) {
-      return col && uiTypes.some(ut => ut.name === col.uidt && ut.virtual)
+      return col && uiTypes.some((ut) => ut.name === col.uidt && ut.virtual);
     },
     isLookupOrRollup(col) {
-      return this.isLookup(col) ||
-          this.isRollup(col)
+      return this.isLookup(col) || this.isRollup(col);
     },
     isSelect(col) {
-      return col.uidt === 'MultiSelect' ||
-          col.uidt === 'SingleSelect'
+      return col.uidt === "MultiSelect" || col.uidt === "SingleSelect";
     },
     addNewColumnRow(table, uidt) {
       table.columns.push({
@@ -878,159 +1091,194 @@ export default {
         uidt,
         ...(uidt === LinkToAnotherRecord
           ? {
-              type: 'mm'
+              type: "mm",
             }
-          : {})
-      })
+          : {}),
+      });
       this.$nextTick(() => {
-        const input = this.$refs[`cn_${table.table_name}_${table.columns.length - 1}`][0].$el.querySelector('input')
-        input.focus()
-        input.select()
-      })
+        const input =
+          this.$refs[
+            `cn_${table.table_name}_${table.columns.length - 1}`
+          ][0].$el.querySelector("input");
+        input.focus();
+        input.select();
+      });
     },
 
     async handleKeyDown({ metaKey, key, altKey, shiftKey, ctrlKey }) {
       if (!(metaKey && ctrlKey) && !(altKey && shiftKey)) {
-        return
+        return;
       }
       switch (key && key.toLowerCase()) {
-        case 't':
-          this.createTablesDialog = true
-          break
-        case 'c':
-          this.createTableColumnsDialog = true
-          break
-        case 'a':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel])
-          break
-        case 'j':
-          this.copyJSON()
-          break
-        case 's':
-          await this.saveTemplate()
-          break
-        case 'arrowup':
-          this.expansionPanel = this.expansionPanel ? --this.expansionPanel : this.project.tables.length - 1
-          break
-        case 'arrowdown':
-          this.expansionPanel = ++this.expansionPanel % this.project.tables.length
-          break
-
-        case '1':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Number')
-          break
-        case '2':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'SingleLineText')
-          break
-        case '3':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'LongText')
-          break
-        case '4':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'LinkToAnotherRecord')
-          break
-        case '5':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Lookup')
-          break
-        case '6':
-          this.addNewColumnRow(this.project.tables[this.expansionPanel], 'Rollup')
-          break
+        case "t":
+          this.createTablesDialog = true;
+          break;
+        case "c":
+          this.createTableColumnsDialog = true;
+          break;
+        case "a":
+          this.addNewColumnRow(this.project.tables[this.expansionPanel]);
+          break;
+        case "j":
+          this.copyJSON();
+          break;
+        case "s":
+          await this.saveTemplate();
+          break;
+        case "arrowup":
+          this.expansionPanel = this.expansionPanel
+            ? --this.expansionPanel
+            : this.project.tables.length - 1;
+          break;
+        case "arrowdown":
+          this.expansionPanel =
+            ++this.expansionPanel % this.project.tables.length;
+          break;
+
+        case "1":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "Number"
+          );
+          break;
+        case "2":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "SingleLineText"
+          );
+          break;
+        case "3":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "LongText"
+          );
+          break;
+        case "4":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "LinkToAnotherRecord"
+          );
+          break;
+        case "5":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "Lookup"
+          );
+          break;
+        case "6":
+          this.addNewColumnRow(
+            this.project.tables[this.expansionPanel],
+            "Rollup"
+          );
+          break;
       }
     },
     copyJSON() {
       if (!this.validateAndFocus()) {
-        this.$toast.info('Please fill all the required column!').goAway(5000)
-        return
+        this.$toast.info("Please fill all the required column!").goAway(5000);
+        return;
       }
-      const el = document.createElement('textarea')
-      el.addEventListener('focusin', e => e.stopPropagation())
-      el.value = JSON.stringify(this.projectTemplate, null, 2)
-      el.style = { position: 'absolute', left: '-9999px' }
-      document.body.appendChild(el)
-      el.select()
-      document.execCommand('copy')
-      document.body.removeChild(el)
-      this.$toast.success('Successfully copied JSON data to clipboard!').goAway(3000)
-      return true
+      const el = document.createElement("textarea");
+      el.addEventListener("focusin", (e) => e.stopPropagation());
+      el.value = JSON.stringify(this.projectTemplate, null, 2);
+      el.style = { position: "absolute", left: "-9999px" };
+      document.body.appendChild(el);
+      el.select();
+      document.execCommand("copy");
+      document.body.removeChild(el);
+      this.$toast
+        .success("Successfully copied JSON data to clipboard!")
+        .goAway(3000);
+      return true;
     },
     openUrl() {
-      window.open(this.url, '_blank')
+      window.open(this.url, "_blank");
     },
     async loadUrl() {
       try {
-        let template = (await this.$axios.get(this.url)).data
+        let template = (await this.$axios.get(this.url)).data;
 
-        if (typeof template === 'string') {
-          template = JSON.parse(template)
+        if (typeof template === "string") {
+          template = JSON.parse(template);
         }
 
-        this.parseTemplate(template)
+        this.parseTemplate(template);
       } catch (e) {
-        this.$toast.error(e.message).goAway(5000)
+        this.$toast.error(e.message).goAway(5000);
       }
     },
 
     parseTemplate({ tables = [], ...rest }) {
       const parsedTemplate = {
         ...rest,
-        tables: tables.map(({ manyToMany = [], hasMany = [], belongsTo = [], v = [], columns = [], ...rest }) => ({
-          ...rest,
-          columns: [
-            ...columns,
-            ...manyToMany.map(mm => ({
-              cn: mm.title || `${rest.table_name} <=> ${mm.rtn}`,
-              uidt: LinkToAnotherRecord,
-              type: 'mm',
-              ...mm
-            })),
-            ...hasMany.map(hm => ({
-              cn: hm.title || `${rest.table_name} => ${hm.table_name}`,
-              uidt: LinkToAnotherRecord,
-              type: 'hm',
-              rtn: hm.table_name,
-              ...hm
-            })),
-            ...belongsTo.map(bt => ({
-              cn: bt.title || `${rest.table_name} => ${bt.rtn}`,
-              uidt: UITypes.ForeignKey,
-              rtn: bt.table_name,
-              ...bt
-            })),
-            ...v.map((v) => {
-              const res = {
-                cn: v.title,
-                rtn: {
-                  ...v
+        tables: tables.map(
+          ({
+            manyToMany = [],
+            hasMany = [],
+            belongsTo = [],
+            v = [],
+            columns = [],
+            ...rest
+          }) => ({
+            ...rest,
+            columns: [
+              ...columns,
+              ...manyToMany.map((mm) => ({
+                cn: mm.title || `${rest.table_name} <=> ${mm.rtn}`,
+                uidt: LinkToAnotherRecord,
+                type: "mm",
+                ...mm,
+              })),
+              ...hasMany.map((hm) => ({
+                cn: hm.title || `${rest.table_name} => ${hm.table_name}`,
+                uidt: LinkToAnotherRecord,
+                type: "hm",
+                rtn: hm.table_name,
+                ...hm,
+              })),
+              ...belongsTo.map((bt) => ({
+                cn: bt.title || `${rest.table_name} => ${bt.rtn}`,
+                uidt: UITypes.ForeignKey,
+                rtn: bt.table_name,
+                ...bt,
+              })),
+              ...v.map((v) => {
+                const res = {
+                  cn: v.title,
+                  rtn: {
+                    ...v,
+                  },
+                };
+                if (v.lk) {
+                  res.uidt = Lookup;
+                  res.rtn.table_name = v.lk.ltn;
+                  res.rcn = v.lk.lcn;
+                  res.rtn.type = v.lk.type;
+                } else if (v.rl) {
+                  res.uidt = Rollup;
+                  res.rtn.table_name = v.rl.rltn;
+                  res.rcn = v.rl.rlcn;
+                  res.rtn.type = v.rl.type;
+                  res.fn = v.rl.fn;
                 }
-              }
-              if (v.lk) {
-                res.uidt = Lookup
-                res.rtn.table_name = v.lk.ltn
-                res.rcn = v.lk.lcn
-                res.rtn.type = v.lk.type
-              } else if (v.rl) {
-                res.uidt = Rollup
-                res.rtn.table_name = v.rl.rltn
-                res.rcn = v.rl.rlcn
-                res.rtn.type = v.rl.type
-                res.fn = v.rl.fn
-              }
-              return res
-            })
-          ]
-        }))
-      }
+                return res;
+              }),
+            ],
+          })
+        ),
+      };
 
-      this.project = parsedTemplate
+      this.project = parsedTemplate;
     },
 
     async projectTemplateCreate() {
       if (!this.validateAndFocus()) {
-        this.$toast.info('Please fill all the required column!').goAway(5000)
-        return
+        this.$toast.info("Please fill all the required column!").goAway(5000);
+        return;
       }
 
       try {
-        const githubConfig = this.$store.state.github
+        const githubConfig = this.$store.state.github;
 
         // const token = await models.store.where({ key: 'GITHUB_TOKEN' }).first()
         // const branch = await models.store.where({ key: 'GITHUB_BRANCH' }).first()
@@ -1038,265 +1286,363 @@ export default {
         // const templateRepo = await models.store.where({ key: 'PROJECT_TEMPLATES_REPO' }).first()
 
         if (!githubConfig.token || !githubConfig.repo) {
-          throw new Error('Missing token or template path')
+          throw new Error("Missing token or template path");
         }
 
-        const data = JSON.stringify(this.projectTemplate, 0, 2)
-        const filename = this.updateFilename || `${this.projectTemplate.name}_${Date.now()}.json`
-        const filePath = `${githubConfig.filePath ? githubConfig.filePath + '/' : ''}${filename}`
-        const apiPath = `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`
+        const data = JSON.stringify(this.projectTemplate, 0, 2);
+        const filename =
+          this.updateFilename ||
+          `${this.projectTemplate.name}_${Date.now()}.json`;
+        const filePath = `${
+          githubConfig.filePath ? githubConfig.filePath + "/" : ""
+        }${filename}`;
+        const apiPath = `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`;
 
-        let sha
+        let sha;
         if (this.updateFilename) {
-          const { data: { sha: _sha } } = await this.$axios({
+          const {
+            data: { sha: _sha },
+          } = await this.$axios({
             url: `https://api.github.com/repos/${githubConfig.repo}/contents/${filePath}`,
-            method: 'get',
+            method: "get",
             headers: {
-              Authorization: 'token ' + githubConfig.token
-            }
-          })
-          sha = _sha
+              Authorization: "token " + githubConfig.token,
+            },
+          });
+          sha = _sha;
         }
 
         await this.$axios({
           url: apiPath,
-          method: 'put',
+          method: "put",
           headers: {
-            'Content-Type': 'application/json',
-            Authorization: 'token ' + githubConfig.token
+            "Content-Type": "application/json",
+            Authorization: "token " + githubConfig.token,
           },
           data: {
             message: `templates : init template ${filename}`,
             content: Base64.encode(data),
             sha,
-            branch: githubConfig.branch
-          }
-        })
+            branch: githubConfig.branch,
+          },
+        });
 
-        this.url = `https://raw.githubusercontent.com/${githubConfig.repo}/${githubConfig.branch}/${filePath}`
+        this.url = `https://raw.githubusercontent.com/${githubConfig.repo}/${githubConfig.branch}/${filePath}`;
 
-        this.$toast.success('Template generated and saved successfully!').goAway(4000)
+        this.$toast
+          .success("Template generated and saved successfully!")
+          .goAway(4000);
       } catch (e) {
-        this.$toast.error(e.message).goAway(5000)
+        this.$toast.error(e.message).goAway(5000);
       }
     },
     navigateToTable(tn) {
-      const index = this.projectTemplate.tables.findIndex(t => t.table_name === tn)
+      const index = this.projectTemplate.tables.findIndex(
+        (t) => t.table_name === tn
+      );
       if (Array.isArray(this.expansionPanel)) {
-        this.expansionPanel.push(index)
+        this.expansionPanel.push(index);
       } else {
-        this.expansionPanel = index
+        this.expansionPanel = index;
       }
 
       this.$nextTick(() => {
-        const accord = this.$el.querySelector(`#tn_${tn}`)
-        accord.focus()
-        accord.scrollIntoView()
-      })
+        const accord = this.$el.querySelector(`#tn_${tn}`);
+        accord.focus();
+        accord.scrollIntoView();
+      });
     },
 
     async saveTemplate() {
-      this.loading = true
+      this.loading = true;
       try {
         if (this.id || this.localId) {
-          await this.$axios.put(`${process.env.NC_API_URL}/api/v1/nc/templates/${this.id || this.localId}`, this.projectTemplate, {
-            params: {
-              token: this.$store.state.template
+          await this.$axios.put(
+            `${process.env.NC_API_URL}/api/v1/nc/templates/${
+              this.id || this.localId
+            }`,
+            this.projectTemplate,
+            {
+              params: {
+                token: this.$store.state.template,
+              },
             }
-          })
-          this.$toast.success('Template updated successfully').goAway(3000)
+          );
+          this.$toast.success("Template updated successfully").goAway(3000);
         } else if (!this.$store.state.template) {
           if (!this.copyJSON()) {
-            return
+            return;
           }
 
-          this.$toast.info('Initiating Github for template').goAway(3000)
-          const res = await this.$axios.post(`${process.env.NC_API_URL}/api/v1/projectTemplateCreate`, this.projectTemplate)
-          this.$toast.success('Initiated Github successfully').goAway(3000)
-          window.open(res.data.path, '_blank')
+          this.$toast.info("Initiating Github for template").goAway(3000);
+          const res = await this.$axios.post(
+            `${process.env.NC_API_URL}/api/v1/projectTemplateCreate`,
+            this.projectTemplate
+          );
+          this.$toast.success("Initiated Github successfully").goAway(3000);
+          window.open(res.data.path, "_blank");
         } else {
-          const res = await this.$axios.post(`${process.env.NC_API_URL}/api/v1/nc/templates`, this.projectTemplate, {
-            params: {
-              token: this.$store.state.template
+          const res = await this.$axios.post(
+            `${process.env.NC_API_URL}/api/v1/nc/templates`,
+            this.projectTemplate,
+            {
+              params: {
+                token: this.$store.state.template,
+              },
             }
-          })
-          this.localId = res.data.id
-          this.$toast.success('Template updated successfully').goAway(3000)
+          );
+          this.localId = res.data.id;
+          this.$toast.success("Template updated successfully").goAway(3000);
         }
 
-        this.$emit('saved')
+        this.$emit("saved");
       } catch (e) {
-        this.$toast.error(e.message).goAway(3000)
+        this.$toast.error(e.message).goAway(3000);
       } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
     getRules(col, table) {
-      return v => col.uidt !== UITypes.LinkToAnotherRecord || !table.columns.some(c => c !== col && c.uidt === UITypes.LinkToAnotherRecord && c.type === col.type && c.rtn === col.rtn) || 'Duplicate relation is not allowed'
+      return (v) =>
+        col.uidt !== UITypes.LinkToAnotherRecord ||
+        !table.columns.some(
+          (c) =>
+            c !== col &&
+            c.uidt === UITypes.LinkToAnotherRecord &&
+            c.type === col.type &&
+            c.rtn === col.rtn
+        ) ||
+        "Duplicate relation is not allowed";
     },
     onTableNameUpdate(oldTable, newVal) {
-      const oldVal = oldTable.table_name
-      this.$set(oldTable, 'tn', newVal)
+      const oldVal = oldTable.table_name;
+      this.$set(oldTable, "tn", newVal);
 
       for (const table of this.project.tables) {
         for (const col of table.columns) {
           if (col.uidt === UITypes.LinkToAnotherRecord) {
             if (col.rtn === oldVal) {
-              this.$set(col, 'rtn', newVal)
+              this.$set(col, "rtn", newVal);
             }
-          } else if (col.uidt === UITypes.Rollup || col.uidt === UITypes.Lookup) {
+          } else if (
+            col.uidt === UITypes.Rollup ||
+            col.uidt === UITypes.Lookup
+          ) {
             if (col.rtn && col.rtn.table_name === oldVal) {
-              this.$set(col.rtn, 'tn', newVal)
+              this.$set(col.rtn, "tn", newVal);
             }
           }
         }
       }
     },
     onColumnNameUpdate(oldCol, newVal, tn) {
-      const oldVal = oldCol.column_name
-      this.$set(oldCol, 'cn', newVal)
+      const oldVal = oldCol.column_name;
+      this.$set(oldCol, "cn", newVal);
 
       for (const table of this.project.tables) {
         for (const col of table.columns) {
           if (col.uidt === UITypes.Rollup || col.uidt === UITypes.Lookup) {
             if (col.rtn && col.rcn === oldVal && col.rtn.table_name === tn) {
-              this.$set(col, 'rcn', newVal)
+              this.$set(col, "rcn", newVal);
             }
           }
         }
       }
     },
     async onRtnChange(oldVal, newVal, col, table) {
-      this.$set(col, 'rtn', newVal)
+      this.$set(col, "rtn", newVal);
 
-      await this.$nextTick()
+      await this.$nextTick();
 
-      if (col.uidt !== UITypes.LinkToAnotherRecord && col.uidt !== UITypes.ForeignKey) {
-        return
+      if (
+        col.uidt !== UITypes.LinkToAnotherRecord &&
+        col.uidt !== UITypes.ForeignKey
+      ) {
+        return;
       }
 
       if (oldVal) {
-        const rTable = this.project.tables.find(t => t.table_name === oldVal)
+        const rTable = this.project.tables.find((t) => t.table_name === oldVal);
         // delete relation from other table if exist
 
-        let index = -1
-        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'mm') {
-          index = rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'mm')
-        } else if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'hm') {
-          index = rTable.columns.findIndex(c => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name)
+        let index = -1;
+        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === "mm") {
+          index = rTable.columns.findIndex(
+            (c) =>
+              c.uidt === UITypes.LinkToAnotherRecord &&
+              c.rtn === table.table_name &&
+              c.type === "mm"
+          );
+        } else if (
+          col.uidt === UITypes.LinkToAnotherRecord &&
+          col.type === "hm"
+        ) {
+          index = rTable.columns.findIndex(
+            (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+          );
         } else if (col.uidt === UITypes.ForeignKey) {
-          index = rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'hm')
+          index = rTable.columns.findIndex(
+            (c) =>
+              c.uidt === UITypes.LinkToAnotherRecord &&
+              c.rtn === table.table_name &&
+              c.type === "hm"
+          );
         }
 
         if (index > -1) {
-          rTable.columns.splice(index, 1)
+          rTable.columns.splice(index, 1);
         }
       }
       if (newVal) {
-        const rTable = this.project.tables.find(t => t.table_name === newVal)
+        const rTable = this.project.tables.find((t) => t.table_name === newVal);
 
         // check relation relation exist in other table
         // if not create a relation
-        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'mm') {
-          if (!rTable.columns.find(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'mm')) {
+        if (col.uidt === UITypes.LinkToAnotherRecord && col.type === "mm") {
+          if (
+            !rTable.columns.find(
+              (c) =>
+                c.uidt === UITypes.LinkToAnotherRecord &&
+                c.rtn === table.table_name &&
+                c.type === "mm"
+            )
+          ) {
             rTable.columns.push({
               cn: `title${rTable.columns.length + 1}`,
               uidt: UITypes.LinkToAnotherRecord,
-              type: 'mm',
-              rtn: table.table_name
-            })
+              type: "mm",
+              rtn: table.table_name,
+            });
           }
-        } else if (col.uidt === UITypes.LinkToAnotherRecord && col.type === 'hm') {
-          if (!rTable.columns.find(c => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name)) {
+        } else if (
+          col.uidt === UITypes.LinkToAnotherRecord &&
+          col.type === "hm"
+        ) {
+          if (
+            !rTable.columns.find(
+              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+            )
+          ) {
             rTable.columns.push({
               cn: `title${rTable.columns.length + 1}`,
               uidt: UITypes.ForeignKey,
-              rtn: table.table_name
-            })
+              rtn: table.table_name,
+            });
           }
         } else if (col.uidt === UITypes.ForeignKey) {
-          if (!rTable.columns.find(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'hm')) {
+          if (
+            !rTable.columns.find(
+              (c) =>
+                c.uidt === UITypes.LinkToAnotherRecord &&
+                c.rtn === table.table_name &&
+                c.type === "hm"
+            )
+          ) {
             rTable.columns.push({
               cn: `title${rTable.columns.length + 1}`,
               uidt: UITypes.LinkToAnotherRecord,
-              type: 'hm',
-              rtn: table.table_name
-            })
+              type: "hm",
+              rtn: table.table_name,
+            });
           }
         }
       }
     },
     onRTypeChange(oldType, newType, col, table) {
-      this.$set(col, 'type', newType)
+      this.$set(col, "type", newType);
 
-      const rTable = this.project.tables.find(t => t.table_name === col.rtn)
+      const rTable = this.project.tables.find((t) => t.table_name === col.rtn);
 
-      let index = -1
+      let index = -1;
 
       // find column and update relation
       // or create a new column
 
-      if (oldType === 'hm') {
-        index = rTable.columns.findIndex(c => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name)
-      } else if (oldType === 'mm') {
-        index = rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'mm')
+      if (oldType === "hm") {
+        index = rTable.columns.findIndex(
+          (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+        );
+      } else if (oldType === "mm") {
+        index = rTable.columns.findIndex(
+          (c) =>
+            c.uidt === UITypes.LinkToAnotherRecord &&
+            c.rtn === table.table_name &&
+            c.type === "mm"
+        );
       }
 
-      const rCol = index === -1 ? { cn: `title${rTable.columns.length + 1}` } : { ...rTable.columns[index] }
-      index = index === -1 ? rTable.columns.length : index
-
-      if (newType === 'mm') {
-        rCol.type = 'mm'
-        rCol.uidt = UITypes.LinkToAnotherRecord
-      } else if (newType === 'hm') {
-        rCol.type = 'bt'
-        rCol.uidt = UITypes.ForeignKey
+      const rCol =
+        index === -1
+          ? { cn: `title${rTable.columns.length + 1}` }
+          : { ...rTable.columns[index] };
+      index = index === -1 ? rTable.columns.length : index;
+
+      if (newType === "mm") {
+        rCol.type = "mm";
+        rCol.uidt = UITypes.LinkToAnotherRecord;
+      } else if (newType === "hm") {
+        rCol.type = "bt";
+        rCol.uidt = UITypes.ForeignKey;
       }
-      rCol.rtn = table.table_name
+      rCol.rtn = table.table_name;
 
-      this.$set(rTable.columns, index, rCol)
+      this.$set(rTable.columns, index, rCol);
     },
     onUidtChange(oldVal, newVal, col, table) {
-      this.$set(col, 'uidt', newVal)
-      this.$set(col, 'dtxp', undefined)
+      this.$set(col, "uidt", newVal);
+      this.$set(col, "dtxp", undefined);
 
       // delete relation column from other table
       // if previous type is relation
 
-      let index = -1
-      let rTable
+      let index = -1;
+      let rTable;
 
       if (oldVal === UITypes.LinkToAnotherRecord) {
-        rTable = this.project.tables.find(t => t.table_name === col.rtn)
+        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
         if (rTable) {
-          if (col.type === 'hm') {
-            index = rTable.columns.findIndex(c => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name)
-          } else if (col.type === 'mm') {
-            index = rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'mm')
+          if (col.type === "hm") {
+            index = rTable.columns.findIndex(
+              (c) => c.uidt === UITypes.ForeignKey && c.rtn === table.table_name
+            );
+          } else if (col.type === "mm") {
+            index = rTable.columns.findIndex(
+              (c) =>
+                c.uidt === UITypes.LinkToAnotherRecord &&
+                c.rtn === table.table_name &&
+                c.type === "mm"
+            );
           }
         }
       } else if (oldVal === UITypes.ForeignKey) {
-        rTable = this.project.tables.find(t => t.table_name === col.rtn)
-        if (rTable) { index = rTable.columns.findIndex(c => c.uidt === UITypes.LinkToAnotherRecord && c.rtn === table.table_name && c.type === 'hm') }
+        rTable = this.project.tables.find((t) => t.table_name === col.rtn);
+        if (rTable) {
+          index = rTable.columns.findIndex(
+            (c) =>
+              c.uidt === UITypes.LinkToAnotherRecord &&
+              c.rtn === table.table_name &&
+              c.type === "hm"
+          );
+        }
       }
       if (rTable && index > -1) {
-        rTable.columns.splice(index, 1)
+        rTable.columns.splice(index, 1);
       }
 
-      col.rtn = undefined
-      col.type = undefined
-      col.rcn = undefined
+      col.rtn = undefined;
+      col.type = undefined;
+      col.rcn = undefined;
 
       if (col.uidt === LinkToAnotherRecord) {
-        col.type = col.type || 'mm'
+        col.type = col.type || "mm";
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style scoped>
-/deep/ .v-select__selections{
+/deep/ .v-select__selections {
   flex-wrap: nowrap;
 }
 </style>
diff --git a/packages/nc-gui/components/utils/language.vue b/packages/nc-gui/components/utils/language.vue
index c9349a698b..490f759b4d 100644
--- a/packages/nc-gui/components/utils/language.vue
+++ b/packages/nc-gui/components/utils/language.vue
@@ -1,15 +1,13 @@
 <template>
   <div>
     <v-menu top offset-y>
-      <template #activator="{on}">
+      <template #activator="{ on }">
         <v-icon size="20" class="ml-2 nc-menu-translate" v-on="on">
           mdi-translate
         </v-icon>
       </template>
       <v-list dense class="nc-language-list">
-        <v-list-item-group
-          v-model="language"
-        >
+        <v-list-item-group v-model="language">
           <v-list-item
             v-for="lan in languages"
             :key="lan.value"
@@ -25,9 +23,13 @@
         </v-list-item-group>
         <v-divider />
         <v-list-item>
-          <a href="https://github.com/nocodb/nocodb/tree/master/packages/nc-gui/lang" target="_blank" class="caption">
+          <a
+            href="https://github.com/nocodb/nocodb/tree/master/packages/nc-gui/lang"
+            target="_blank"
+            class="caption"
+          >
             <!--Help translate-->
-            {{ $t('activity.translate') }}
+            {{ $t("activity.translate") }}
           </a>
         </v-list-item>
       </v-list>
@@ -37,101 +39,103 @@
 
 <script>
 export default {
-  name: 'Language',
+  name: "Language",
   data: () => ({
     labels: {
-      de: 'Deutsch',
-      en: 'English',
-      es: 'Español',
-      fa: 'فارسی',
-      fr: 'Français',
-      id: 'Bahasa Indonesia',
-      ja: '日本語',
-      it_IT: 'Italiano',
-      ko: '한국인',
-      lv: 'Latviešu',
-      nl: 'Nederlandse',
-      ru: 'Pусский',
-      zh_CN: '大陆简体',
-      zh_HK: '香港繁體',
-      zh_TW: '臺灣正體',
-      sv: 'Svenska',
-      tr: 'Turkish',
-      da: 'Dansk',
-      vi: 'Tiếng Việt',
-      no: 'Norsk',
-      iw: 'עִברִית',
-      fi: 'Suomalainen',
-      uk: 'Українська',
-      hr: 'Hrvatski',
-      th: 'ไทย',
-      sl: 'Slovenščina',
-      pt_BR: 'Português (Brasil)'
-    }
+      de: "Deutsch",
+      en: "English",
+      es: "Español",
+      fa: "فارسی",
+      fr: "Français",
+      id: "Bahasa Indonesia",
+      ja: "日本語",
+      it_IT: "Italiano",
+      ko: "한국인",
+      lv: "Latviešu",
+      nl: "Nederlandse",
+      ru: "Pусский",
+      zh_CN: "大陆简体",
+      zh_HK: "香港繁體",
+      zh_TW: "臺灣正體",
+      sv: "Svenska",
+      tr: "Turkish",
+      da: "Dansk",
+      vi: "Tiếng Việt",
+      no: "Norsk",
+      iw: "עִברִית",
+      fi: "Suomalainen",
+      uk: "Українська",
+      hr: "Hrvatski",
+      th: "ไทย",
+      sl: "Slovenščina",
+      pt_BR: "Português (Brasil)",
+    },
   }),
   computed: {
     languages() {
-      return ((this.$i18n && this.$i18n.availableLocales) || ['en']).sort()
+      return ((this.$i18n && this.$i18n.availableLocales) || ["en"]).sort();
     },
     language: {
       get() {
-        return this.$store.state.windows.language
+        return this.$store.state.windows.language;
       },
       set(val) {
-        this.$store.commit('windows/MutLanguage', val)
-        this.applyDirection()
-      }
-    }
+        this.$store.commit("windows/MutLanguage", val);
+        this.applyDirection();
+      },
+    },
   },
   mounted() {
-    this.applyDirection()
+    this.applyDirection();
   },
   methods: {
     applyDirection() {
-      document.body.style.direction = this.isRtlLang() ? 'rtl' : 'ltr'
+      document.body.style.direction = this.isRtlLang() ? "rtl" : "ltr";
     },
     isRtlLang() {
-      return ['fa'].includes(this.language)
+      return ["fa"].includes(this.language);
     },
     changeLan(lan) {
-      this.language = lan
-      const count = 200
+      this.language = lan;
+      const count = 200;
       const defaults = {
-        origin: { y: 0.7 }
-      }
+        origin: { y: 0.7 },
+      };
 
       function fire(particleRatio, opts) {
-        window.confetti(Object.assign({}, defaults, opts, {
-          particleCount: Math.floor(count * particleRatio)
-        }))
+        window.confetti(
+          Object.assign({}, defaults, opts, {
+            particleCount: Math.floor(count * particleRatio),
+          })
+        );
       }
 
       fire(0.25, {
         spread: 26,
-        startVelocity: 55
-      })
+        startVelocity: 55,
+      });
       fire(0.2, {
-        spread: 60
-      })
+        spread: 60,
+      });
       fire(0.35, {
         spread: 100,
         decay: 0.91,
-        scalar: 0.8
-      })
+        scalar: 0.8,
+      });
       fire(0.1, {
         spread: 120,
         startVelocity: 25,
         decay: 0.92,
-        scalar: 1.2
-      })
+        scalar: 1.2,
+      });
       fire(0.1, {
         spread: 120,
-        startVelocity: 45
-      })
-      this.$tele.emit(`toolbar:lang:${lan}`)
-    }
-  }
-}
+        startVelocity: 45,
+      });
+      this.$e("c:navbar:lang", { lang: lan });
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
@@ -139,7 +143,7 @@ export default {
   .nc-language-list {
     max-height: 90vh;
     overflow: auto;
-     .v-list-item{
+    .v-list-item {
       min-height: 30px !important;
     }
   }
diff --git a/packages/nc-gui/global.d.ts b/packages/nc-gui/global.d.ts
index 21ee853970..16e4f5c89e 100644
--- a/packages/nc-gui/global.d.ts
+++ b/packages/nc-gui/global.d.ts
@@ -6,6 +6,7 @@ declare module "vue/types/options" {
     $tele: {
       emit: (event: string, data?) => void
     },
+    $e: (event: string, data?) => void,
     $api: Api<any>
   }
 }
diff --git a/packages/nc-gui/layouts/default.vue b/packages/nc-gui/layouts/default.vue
index e772c5fafa..5a14dfa4a5 100644
--- a/packages/nc-gui/layouts/default.vue
+++ b/packages/nc-gui/layouts/default.vue
@@ -15,7 +15,7 @@
           <v-tooltip bottom>
             <template #activator="{ on }">
               <v-btn
-                v-t="['toolbar:home']"
+                v-t="['c:navbar:home']"
                 to="/projects"
                 icon
                 class="pa-1 pr-0 brand-icon nc-noco-brand-icon"
@@ -25,29 +25,36 @@
               </v-btn>
             </template>
             <!-- Home -->
-            {{ $t('general.home') }}
-            <span
-              class="caption  font-weight-light pointer"
-            >(v{{
-              $store.state.project.projectInfo && $store.state.project.projectInfo.version
-            }})</span>
+            {{ $t("general.home") }}
+            <span class="caption font-weight-light pointer"
+              >(v{{
+                $store.state.project.projectInfo &&
+                $store.state.project.projectInfo.version
+              }})</span
+            >
           </v-tooltip>
 
-          <span class="body-1 ml-n1" @click="$router.push('/projects')"> {{ brandName }}</span>
+          <span class="body-1 ml-n1" @click="$router.push('/projects')">
+            {{ brandName }}</span
+          >
         </v-toolbar-title>
 
         <!--        <v-toolbar-items  />-->
         <!-- loading -->
-        <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3">{{ $t('general.loading') }} <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span>
+        <span v-show="$nuxt.$loading.show" class="caption grey--text ml-3"
+          >{{ $t("general.loading") }}
+          <v-icon small color="grey">mdi-spin mdi-loading</v-icon></span
+        >
 
-        <span
-          v-shortkey="[ 'ctrl','shift', 'd']"
-          @shortkey="openDiscord"
-        />
+        <span v-shortkey="['ctrl', 'shift', 'd']" @shortkey="openDiscord" />
       </div>
 
-      <div v-if="isDashboard" class="text-capitalize text-center title" style="flex: 1">
-        {{ $store.getters['project/GtrProjectName'] }}
+      <div
+        v-if="isDashboard"
+        class="text-capitalize text-center title"
+        style="flex: 1"
+      >
+        {{ $store.getters["project/GtrProjectName"] }}
       </div>
 
       <div style="flex: 1" class="d-flex justify-end">
@@ -68,13 +75,13 @@
                   mdi-account-supervisor-outline
                 </v-icon>
                 <!-- Share -->
-                {{ $t('activity.share') }}
+                {{ $t("activity.share") }}
               </x-btn>
 
               <share-or-invite-modal v-model="shareModal" />
             </div>
             <span
-              v-shortkey="[ 'ctrl','shift', 'd']"
+              v-shortkey="['ctrl', 'shift', 'd']"
               @shortkey="$router.push('/')"
             />
             <x-btn
@@ -84,43 +91,45 @@
               tooltip="Enable/Disable Models"
               @click="cronTabAdd()"
             >
-              <v-icon size="20">
-                mdi-timetable
-              </v-icon> &nbsp;
-              Crons
+              <v-icon size="20"> mdi-timetable </v-icon> &nbsp; Crons
             </x-btn>
           </template>
           <template v-else>
             <span
-              v-shortkey="[ 'ctrl','shift', 'c']"
+              v-shortkey="['ctrl', 'shift', 'c']"
               @shortkey="settingsTabAdd"
             />
 
-            <span
-              v-shortkey="[ 'ctrl','shift', 'b']"
-              @shortkey="changeTheme"
-            />
+            <span v-shortkey="['ctrl', 'shift', 'b']" @shortkey="changeTheme" />
           </template>
 
           <preview-as class="mx-1" />
 
-          <v-menu
-            v-if="isAuthenticated"
-            offset-y
-          >
+          <v-menu v-if="isAuthenticated" offset-y>
             <template #activator="{ on }">
-              <v-icon v-ge="['Profile','']" text class="font-weight-bold nc-menu-account icon" v-on="on">
+              <v-icon
+                v-ge="['Profile', '']"
+                text
+                class="font-weight-bold nc-menu-account icon"
+                v-on="on"
+              >
                 <!--              <v-icon></v-icon>-->
                 mdi-dots-vertical
               </v-icon>
             </template>
             <v-list dense class="nc-user-menu">
               <template>
-                <v-list-item v-t="['toolbar:user:email']" v-ge="['Settings','']" dense to="/user/settings">
+                <v-list-item
+                  v-t="['c:navbar:user:email']"
+                  v-ge="['Settings', '']"
+                  dense
+                  to="/user/settings"
+                >
                   <v-list-item-title>
-                    <v-icon small>
-                      mdi-at
-                    </v-icon>&nbsp; <span class="font-weight-bold caption">{{ userEmail }}</span>
+                    <v-icon small> mdi-at </v-icon>&nbsp;
+                    <span class="font-weight-bold caption">{{
+                      userEmail
+                    }}</span>
                   </v-list-item-title>
                 </v-list-item>
 
@@ -130,73 +139,82 @@
                 <!-- "Auth token copied to clipboard" -->
                 <v-list-item
                   v-if="isDashboard"
-                  v-t="['toolbar:user:copy-auth-token']"
+                  v-t="['a:navbar:user:copy-auth-token']"
                   v-clipboard="$store.state.users.token"
                   dense
-                  @click.stop="$toast.success($t('msg.toast.authToken')).goAway(3000)"
+                  @click.stop="
+                    $toast.success($t('msg.toast.authToken')).goAway(3000)
+                  "
                 >
                   <v-list-item-title>
-                    <v-icon key="terminal-dash" small>
-                      mdi-content-copy
-                    </v-icon>&nbsp;
-                    <span class="font-weight-regular caption">{{ $t('activity.account.authToken') }}</span>
+                    <v-icon key="terminal-dash" small> mdi-content-copy </v-icon
+                    >&nbsp;
+                    <span class="font-weight-regular caption">{{
+                      $t("activity.account.authToken")
+                    }}</span>
                   </v-list-item-title>
                 </v-list-item>
                 <v-list-item
                   v-if="swaggerOrGraphiqlUrl"
-                  v-t="['toolbar:user:swagger']"
+                  v-t="['a:navbar:user:swagger']"
                   dense
-                  @click.stop="openUrl(`${$axios.defaults.baseURL}${swaggerOrGraphiqlUrl}`)"
+                  @click.stop="
+                    openUrl(`${$axios.defaults.baseURL}${swaggerOrGraphiqlUrl}`)
+                  "
                 >
                   <v-list-item-title>
                     <v-icon key="terminal-dash" small>
-                      {{ isGql ? 'mdi-graphql' : 'mdi-code-json' }}
-                    </v-icon>&nbsp;
+                      {{ isGql ? "mdi-graphql" : "mdi-code-json" }} </v-icon
+                    >&nbsp;
                     <span class="font-weight-regular caption">
-                      {{ isGql ? 'GraphQL APIs' : 'Swagger APIs Doc' }}</span>
+                      {{ isGql ? "GraphQL APIs" : "Swagger APIs Doc" }}</span
+                    >
                   </v-list-item-title>
                 </v-list-item>
                 <v-divider />
                 <v-list-item
                   v-if="isDashboard"
-                  v-t="['toolbar:user:copy-proj-info']"
-                  v-ge="['Sign Out','']"
+                  v-t="['c:navbar:user:copy-proj-info']"
+                  v-ge="['Sign Out', '']"
                   dense
                   @click="copyProjectInfo"
                 >
                   <v-list-item-title>
-                    <v-icon small>
-                      mdi-content-copy
-                    </v-icon>&nbsp; <span class="font-weight-regular caption">{{ $t('activity.account.projInfo') }}</span>
+                    <v-icon small> mdi-content-copy </v-icon>&nbsp;
+                    <span class="font-weight-regular caption">{{
+                      $t("activity.account.projInfo")
+                    }}</span>
                   </v-list-item-title>
                 </v-list-item>
                 <v-divider v-if="isDashboard" />
                 <v-list-item
                   v-if="isDashboard"
-                  v-t="['toolbar:user:themes']"
+                  v-t="['c:navbar:user:themes']"
                   dense
                   @click.stop="settingsTabAdd"
                 >
                   <v-list-item-title>
-                    <v-icon key="terminal-dash" small>
-                      mdi-palette
-                    </v-icon>&nbsp;
-                    <span class="font-weight-regular caption">{{ $t('activity.account.themes') }}</span>
+                    <v-icon key="terminal-dash" small> mdi-palette </v-icon
+                    >&nbsp;
+                    <span class="font-weight-regular caption">{{
+                      $t("activity.account.themes")
+                    }}</span>
                   </v-list-item-title>
                 </v-list-item>
 
                 <v-divider v-if="isDashboard" />
 
                 <v-list-item
-                  v-t="['toolbar:user:sign-out']"
-                  v-ge="['Sign Out','']"
+                  v-t="['a:navbar:user:sign-out']"
+                  v-ge="['Sign Out', '']"
                   dense
                   @click="MtdSignOut"
                 >
                   <v-list-item-title>
-                    <v-icon small>
-                      mdi-logout
-                    </v-icon>&nbsp; <span class="font-weight-regular caption">{{ $t('general.signOut') }}</span>
+                    <v-icon small> mdi-logout </v-icon>&nbsp;
+                    <span class="font-weight-regular caption">{{
+                      $t("general.signOut")
+                    }}</span>
                   </v-list-item-title>
                 </v-list-item>
               </template>
@@ -204,27 +222,40 @@
           </v-menu>
           <v-menu v-else offset-y open-on-hover>
             <template #activator="{ on }">
-              <v-btn v-ge="['Profile','']" text class=" font-weight-bold nc-menu-account" v-on="on">
+              <v-btn
+                v-ge="['Profile', '']"
+                text
+                class="font-weight-bold nc-menu-account"
+                v-on="on"
+              >
                 <!--              Menu-->
                 <v-icon>mdi-account</v-icon>
                 <v-icon>arrow_drop_down</v-icon>
               </v-btn>
             </template>
             <v-list dense>
-              <v-list-item v-if="!user && !isThisMobile" dense to="/user/authentication/signup">
+              <v-list-item
+                v-if="!user && !isThisMobile"
+                dense
+                to="/user/authentication/signup"
+              >
                 <v-list-item-title>
-                  <v-icon small>
-                    mdi-account-plus-outline
-                  </v-icon> &nbsp; <span
-                    class="font-weight-regular caption"
-                  >{{ $t('general.signUp') }}</span>
+                  <v-icon small> mdi-account-plus-outline </v-icon> &nbsp;
+                  <span class="font-weight-regular caption">{{
+                    $t("general.signUp")
+                  }}</span>
                 </v-list-item-title>
               </v-list-item>
-              <v-list-item v-if="!user && !isThisMobile" dense to="/user/authentication/signin">
+              <v-list-item
+                v-if="!user && !isThisMobile"
+                dense
+                to="/user/authentication/signin"
+              >
                 <v-list-item-title>
-                  <v-icon small>
-                    mdi-login
-                  </v-icon> &nbsp; <span class="font-weight-regular caption">{{ $t('general.signIn') }}</span>
+                  <v-icon small> mdi-login </v-icon> &nbsp;
+                  <span class="font-weight-regular caption">{{
+                    $t("general.signIn")
+                  }}</span>
                 </v-list-item-title>
               </v-list-item>
             </v-list>
@@ -271,19 +302,19 @@
 </template>
 
 <script>
-import ReleaseInfo from '@/components/releaseInfo'
-import { mapGetters, mapActions, mapMutations } from 'vuex'
-import 'splitpanes/dist/splitpanes.css'
-import XBtn from '../components/global/xBtn'
-import dlgUnexpectedError from '../components/utils/dlgUnexpectedError'
-import settings from '../components/settings'
-import { copyTextToClipboard } from '@/helpers/xutils'
-import Snackbar from '~/components/snackbar'
-import Language from '~/components/utils/language'
-import Loader from '~/components/loader'
-import PreviewAs from '~/components/previewAs'
-import ShareOrInviteModal from '~/components/auth/shareOrInviteModal'
-import ImportantAnnouncement from '../components/importantAnnouncement.vue'
+import { mapGetters, mapActions, mapMutations } from "vuex";
+import ReleaseInfo from "@/components/releaseInfo";
+import "splitpanes/dist/splitpanes.css";
+import XBtn from "../components/global/xBtn";
+import dlgUnexpectedError from "../components/utils/dlgUnexpectedError";
+import settings from "../components/settings";
+import { copyTextToClipboard } from "@/helpers/xutils";
+import Snackbar from "~/components/snackbar";
+import Language from "~/components/utils/language";
+import Loader from "~/components/loader";
+import PreviewAs from "~/components/previewAs";
+import ShareOrInviteModal from "~/components/auth/shareOrInviteModal";
+import ImportantAnnouncement from "../components/importantAnnouncement.vue";
 
 export default {
   components: {
@@ -296,7 +327,7 @@ export default {
     Snackbar,
     dlgUnexpectedError,
     settings,
-    ImportantAnnouncement
+    ImportantAnnouncement,
   },
   data: () => ({
     clickCount: true,
@@ -304,10 +335,10 @@ export default {
     swaggerOrGraphiqlUrl: null,
     showScreensaver: false,
     roleIcon: {
-      owner: 'mdi-account-star',
-      creator: 'mdi-account-hard-hat',
-      editor: 'mdi-account-edit',
-      viewer: 'mdi-eye-outline'
+      owner: "mdi-account-star",
+      creator: "mdi-account-hard-hat",
+      editor: "mdi-account-edit",
+      viewer: "mdi-eye-outline",
     },
     showAppStore: false,
     showChangeEnv: false,
@@ -324,72 +355,72 @@ export default {
     drawer: null,
     fixed: false,
     right: true,
-    title: 'Xgene',
+    title: "Xgene",
     isHydrated: false,
     snackbar: false,
     timeout: 10000,
     rolesList: null,
-    shareModal: false
+    shareModal: false,
   }),
   computed: {
     ...mapGetters({
-      logo: 'plugins/brandLogo',
-      brandName: 'plugins/brandName',
-      projects: 'project/list',
-      tabs: 'tabs/list',
-      sqldMgr: 'sqlMgr/sqlMgr',
-      GetPendingStatus: 'notification/GetPendingStatus',
-      isAuthenticated: 'users/GtrIsAuthenticated',
-      isAdmin: 'users/GtrIsAdmin',
-      isDocker: 'project/GtrIsDocker',
-      isFirstLoad: 'project/GtrIsFirstLoad',
-      isGql: 'project/GtrProjectIsGraphql',
-      isRest: 'project/GtrProjectIsRest',
-      isGrpc: 'project/GtrProjectIsGrpc',
-      role: 'users/GtrRole',
-      userEmail: 'users/GtrUserEmail'
+      logo: "plugins/brandLogo",
+      brandName: "plugins/brandName",
+      projects: "project/list",
+      tabs: "tabs/list",
+      sqldMgr: "sqlMgr/sqlMgr",
+      GetPendingStatus: "notification/GetPendingStatus",
+      isAuthenticated: "users/GtrIsAuthenticated",
+      isAdmin: "users/GtrIsAdmin",
+      isDocker: "project/GtrIsDocker",
+      isFirstLoad: "project/GtrIsFirstLoad",
+      isGql: "project/GtrProjectIsGraphql",
+      isRest: "project/GtrProjectIsRest",
+      isGrpc: "project/GtrProjectIsGrpc",
+      role: "users/GtrRole",
+      userEmail: "users/GtrUserEmail",
     }),
     user() {
-      return this.$store.getters['users/GtrUser']
+      return this.$store.getters["users/GtrUser"];
+    },
+    isThisMobile() {
+      // just an example, could be one specific value if that's all you need
+      return this.isHydrated ? this.$vuetify.breakpoint.smAndDown : false;
     },
-    isThisMobile() { // just an example, could be one specific value if that's all you need
-      return this.isHydrated ? this.$vuetify.breakpoint.smAndDown : false
-    }
   },
   watch: {
-    '$route.path'(path, oldPath) {
+    "$route.path"(path, oldPath) {
       try {
         if (oldPath === path) {
-          return
+          return;
         }
-        const recaptcha = this.$recaptchaInstance
-        if (path.startsWith('/user/')) {
-          recaptcha.showBadge()
+        const recaptcha = this.$recaptchaInstance;
+        if (path.startsWith("/user/")) {
+          recaptcha.showBadge();
         } else {
-          recaptcha.hideBadge()
+          recaptcha.hideBadge();
         }
-      } catch (e) {
-      }
+      } catch (e) {}
     },
-    '$route.params.project_id'(newId, oldId) {
+    "$route.params.project_id"(newId, oldId) {
       if (newId && newId !== oldId) {
-        this.loadProjectInfo()
+        this.loadProjectInfo();
       }
       if (!newId) {
-        this.swaggerOrGraphiqlUrl = null
+        this.swaggerOrGraphiqlUrl = null;
       }
-    }
+    },
   },
   mounted() {
-    this.selectedEnv = this.$store.getters['project/GtrActiveEnv']
-    this.loadProjectInfo()
+    this.selectedEnv = this.$store.getters["project/GtrActiveEnv"];
+    this.loadProjectInfo();
   },
   methods: {
-    ...mapActions({ changeActiveTab: 'tabs/changeActiveTab' }),
+    ...mapActions({ changeActiveTab: "tabs/changeActiveTab" }),
     ...mapMutations({
-      toggleLogWindow: 'windows/MutToggleLogWindow',
-      toggleOutputWindow: 'windows/MutToggleOutputWindow',
-      toggleTreeviewWindow: 'windows/MutToggleTreeviewWindow'
+      toggleLogWindow: "windows/MutToggleLogWindow",
+      toggleOutputWindow: "windows/MutToggleOutputWindow",
+      toggleTreeviewWindow: "windows/MutToggleTreeviewWindow",
     }),
     async loadProjectInfo() {
       // if (this.$route.params.project_id) {
@@ -406,23 +437,23 @@ export default {
       // }
     },
     setPreviewUSer(previewAs) {
-      this.previewAs = previewAs
-      window.location.reload()
+      this.previewAs = previewAs;
+      window.location.reload();
     },
     showAppStoreIcon() {
-      this.showAppStore = true
-      this.$toast.info('Apps unlocked').goAway(5000)
+      this.showAppStore = true;
+      this.$toast.info("Apps unlocked").goAway(5000);
     },
 
     isProjectInfoLoaded() {
-      return this.$store.state.project.projectInfo !== null
+      return this.$store.state.project.projectInfo !== null;
     },
     githubClickHandler(e) {
       //   e.preventDefault();
       //   shell.openExternal(e.path.find(e => e.href).href);
     },
     openUrl(url) {
-      window.open(url, '_blank')
+      window.open(url, "_blank");
     },
     openPricingPage() {
       //   shell.openExternal(process.env.serverUrl + '/pricing')
@@ -437,240 +468,253 @@ export default {
       //   shell.openExternal('https://github.com/NocoDB/NocoDB')
     },
     dialogDebugCancel() {
-      this.dialogDebug = false
+      this.dialogDebug = false;
     },
     dialogDebugShow() {
-      this.dialogDebug = true
+      this.dialogDebug = true;
     },
 
     errorDialogCancel() {
-      this.dialogErrorShow = false
+      this.dialogErrorShow = false;
     },
     errorDialogReport() {
-      this.dialogErrorShow = false
+      this.dialogErrorShow = false;
     },
     loadChat() {
       if (!window.Tawk_API) {
-        const s1 = document.createElement('script')
-        const s0 = document.getElementsByTagName('script')[0]
-        s1.async = true
-        s1.src = 'https://embed.tawk.to/5d81b8de9f6b7a4457e23ba7/default'
-        s1.charset = 'UTF-8'
-        s1.setAttribute('crossorigin', '*')
-        s0.parentNode.insertBefore(s1, s0)
-        setTimeout(() => window.Tawk_API && window.Tawk_API.maximize(), 2000)
+        const s1 = document.createElement("script");
+        const s0 = document.getElementsByTagName("script")[0];
+        s1.async = true;
+        s1.src = "https://embed.tawk.to/5d81b8de9f6b7a4457e23ba7/default";
+        s1.charset = "UTF-8";
+        s1.setAttribute("crossorigin", "*");
+        s0.parentNode.insertBefore(s1, s0);
+        setTimeout(() => window.Tawk_API && window.Tawk_API.maximize(), 2000);
       } else {
-        window.Tawk_API.maximize()
+        window.Tawk_API.maximize();
       }
     },
-    handleMigrationsMenuClick(item, closeMenu = true, sqlEditor = false) {
-    },
+    handleMigrationsMenuClick(item, closeMenu = true, sqlEditor = false) {},
     apiClientTabAdd() {
       // if (this.$route.path.indexOf('dashboard') > -1) {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'apiClientDir')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "apiClientDir");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'API Client', key: 'apiClientDir' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'apiClientDir'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "API Client", key: "apiClientDir" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "apiClientDir";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     apiClientSwaggerTabAdd() {
       // if (this.$route.path.indexOf('dashboard') > -1) {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'apiClientSwaggerDir')
+      const tabIndex = this.tabs.findIndex(
+        (el) => el.key === "apiClientSwaggerDir"
+      );
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'API Client', key: 'apiClientSwaggerDir' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'apiClientSwaggerDir'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "API Client", key: "apiClientSwaggerDir" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "apiClientSwaggerDir";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     projectInfoTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'projectInfo')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "projectInfo");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Info', key: 'projectInfo' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'projectInfo'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Info", key: "projectInfo" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "projectInfo";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     xcMetaTabAdd() {
       // if (this.$route.path.indexOf('dashboard') > -1) {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'meta')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "meta");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Meta', key: 'meta' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'meta'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Meta", key: "meta" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "meta";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     apiClientSwaggerOpen() {
-      this.$router.push('/apiClient')
+      this.$router.push("/apiClient");
     },
     graphqlClientTabAdd() {
-      window.open(this.swaggerOrGraphiqlUrl, '_blank')
+      window.open(this.swaggerOrGraphiqlUrl, "_blank");
     },
     swaggerClientTabAdd() {
-      window.open(this.swaggerOrGraphiqlUrl, '_blank')
+      window.open(this.swaggerOrGraphiqlUrl, "_blank");
     },
     grpcTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'grpcClient')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "grpcClient");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'gRPC Client', key: 'grpcClient' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'grpcClient'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "gRPC Client", key: "grpcClient" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "grpcClient";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     rolesTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'roles')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "roles");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Team & Auth ', key: 'roles' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'roles'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Team & Auth ", key: "roles" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "roles";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
       setTimeout(() => {
-        this.$eventBus.$emit('show-add-user')
-      }, 200)
+        this.$eventBus.$emit("show-add-user");
+      }, 200);
     },
     settingsTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'projectSettings')
+      const tabIndex = this.tabs.findIndex(
+        (el) => el.key === "projectSettings"
+      );
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Themes', key: 'projectSettings' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'projectSettings'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Themes", key: "projectSettings" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "projectSettings";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     aclTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'acl')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "acl");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'ACL', key: 'acl' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'acl'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "ACL", key: "acl" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "acl";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     disableOrEnableModelTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'disableOrEnableModel')
+      const tabIndex = this.tabs.findIndex(
+        (el) => el.key === "disableOrEnableModel"
+      );
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Meta Management', key: 'disableOrEnableModel' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'disableOrEnableModel'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Meta Management", key: "disableOrEnableModel" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "disableOrEnableModel";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     cronTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'cronJobs')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "cronJobs");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'Cron Jobs', key: 'cronJobs' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'cronJobs'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "Cron Jobs", key: "cronJobs" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "cronJobs";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     appsTabAdd() {
-      const tabIndex = this.tabs.findIndex(el => el.key === 'appStore')
+      const tabIndex = this.tabs.findIndex((el) => el.key === "appStore");
       if (tabIndex !== -1) {
-        this.changeActiveTab(tabIndex)
+        this.changeActiveTab(tabIndex);
       } else {
-        const item = { name: 'App Store', key: 'appStore' }
-        item._nodes = { env: '_noco' }
-        item._nodes.type = 'appStore'
-        this.$store.dispatch('tabs/ActAddTab', item)
+        const item = { name: "App Store", key: "appStore" };
+        item._nodes = { env: "_noco" };
+        item._nodes.type = "appStore";
+        this.$store.dispatch("tabs/ActAddTab", item);
       }
     },
     async codeGenerateMvc() {
       try {
         await this.sqlMgr.projectGenerateBackend({
-          env: '_noco'
-        })
-        this.$toast.success('Yay, REST APIs with MVC generated').goAway(4000)
+          env: "_noco",
+        });
+        this.$toast.success("Yay, REST APIs with MVC generated").goAway(4000);
       } catch (e) {
-        this.$toast.error('Error generating REST APIs code :' + e).goAway(4000)
-        throw e
+        this.$toast.error("Error generating REST APIs code :" + e).goAway(4000);
+        throw e;
       }
     },
     cookieStatus(status) {
-      this.status = status
+      this.status = status;
     },
     cookieClickedAccept() {
-      this.status = 'accept'
+      this.status = "accept";
     },
     cookieClickedDecline() {
-      this.status = 'decline'
+      this.status = "decline";
       // localStorage.removeItem('vue-cookie-accept-decline')
     },
     removeCookie() {
       // console.log('Cookie removed')
-      localStorage.removeItem('vue-cookie-accept-decline')
-      this.status = 'Cookie removed, refresh the page.'
+      localStorage.removeItem("vue-cookie-accept-decline");
+      this.status = "Cookie removed, refresh the page.";
     },
 
     MtdContactUs() {
-      this.snackbar = true
+      this.snackbar = true;
     },
 
     MtdHiring() {
-      this.$router.push('/info/hiring')
+      this.$router.push("/info/hiring");
     },
 
     MtdFaq() {
-      this.$router.push('/info/faq')
+      this.$router.push("/info/faq");
     },
     MtdTos() {
-      this.$router.push('/info/tos')
+      this.$router.push("/info/tos");
     },
     async MtdSignOut() {
-      await this.$store.dispatch('users/ActSignOut')
-      this.$router.push('/user/authentication/signin')
+      await this.$store.dispatch("users/ActSignOut");
+      this.$router.push("/user/authentication/signin");
     },
     MtdToggleDrawer() {
-      if (!this.$store.getters['users/GtrUser']) {
-        this.drawer = false
+      if (!this.$store.getters["users/GtrUser"]) {
+        this.drawer = false;
       } else {
-        this.drawer = !this.drawer
+        this.drawer = !this.drawer;
       }
       // console.log('Toggling drawer', this.drawer);
     },
     changeTheme() {
-      this.$store.dispatch('windows/ActToggleDarkMode', !this.$store.state.windows.darkTheme)
-      this.$tele.emit('toolbar:theme')
+      this.$store.dispatch(
+        "windows/ActToggleDarkMode",
+        !this.$store.state.windows.darkTheme
+      );
+      this.$e("c:navbar:theme");
     },
     async copyProjectInfo() {
       try {
-        const data = (await this.$api.project.metaGet(this.$store.state.project.projectId))
-        copyTextToClipboard(Object.entries(data).map(([k, v]) => `${k}: **${v}**`).join('\n'))
-        this.$toast.info('Copied project info to clipboard').goAway(3000)
+        const data = await this.$api.project.metaGet(
+          this.$store.state.project.projectId
+        );
+        copyTextToClipboard(
+          Object.entries(data)
+            .map(([k, v]) => `${k}: **${v}**`)
+            .join("\n")
+        );
+        this.$toast.info("Copied project info to clipboard").goAway(3000);
       } catch (e) {
-        console.log(e)
-        this.$toast.error(e.message).goAway(3000)
+        console.log(e);
+        this.$toast.error(e.message).goAway(3000);
       }
-    }
-  }
-
-}
+    },
+  },
+};
 </script>
 <style scoped>
 a {
@@ -718,10 +762,10 @@ a {
   border-radius: 50%;
 }
 
-/deep/ .nc-user-menu .v-list-item--dense, /deep/ .nc-user-menu .v-list--dense .v-list-item {
-  min-height: 35px
+/deep/ .nc-user-menu .v-list-item--dense,
+/deep/ .nc-user-menu .v-list--dense .v-list-item {
+  min-height: 35px;
 }
-
 </style>
 
 <!--
diff --git a/packages/nc-gui/pages/project/xcdb.vue b/packages/nc-gui/pages/project/xcdb.vue
index 12fb168366..6605fd854e 100644
--- a/packages/nc-gui/pages/project/xcdb.vue
+++ b/packages/nc-gui/pages/project/xcdb.vue
@@ -69,7 +69,7 @@
           </div>
           <div class="text-center">
             <v-btn
-              v-t="['project:create:xcdb:submit']"
+              v-t="['a:project:create:xcdb']"
               class="mt-3"
               large
               :loading="loading"
diff --git a/packages/nc-gui/pages/projects/index.vue b/packages/nc-gui/pages/projects/index.vue
index 5795f98b3e..be3d9b6be8 100644
--- a/packages/nc-gui/pages/projects/index.vue
+++ b/packages/nc-gui/pages/projects/index.vue
@@ -2,7 +2,6 @@
   <v-container
     fluid
     class="text-center px-10 pt-10 nc-container"
-
     @dragover.prevent="dragOver = true"
     @dragenter.prevent="dragOver = true"
     @dragexit="dragOver = false"
@@ -15,28 +14,22 @@
         <v-row v-show="projects" class="justify-center">
           <v-card
             row
-            class="
-              pa-4
-              elevation-20
-              text-center
-              overflow-x-hidden
-              flex-shrink-1
-            "
+            class="pa-4 elevation-20 text-center overflow-x-hidden flex-shrink-1"
             min-width="600"
           >
             <v-overlay v-if="projectStatusUpdating" />
             <v-row justify="center">
               <h1 class="text-center display-1 pa-2 nc-project-page-title">
                 <!-- My Projects -->
-                <b>{{ $t('title.myProject') }}</b>
+                <b>{{ $t("title.myProject") }}</b>
                 <x-icon
                   small
                   color="primary grey"
                   :tooltip="$t('activity.refreshProject')"
                   @click="projectsRefresh"
                 >
-                  mdi-refresh
-                </x-icon>&nbsp;
+                  mdi-refresh </x-icon
+                >&nbsp;
                 <!--                </x-btn>-->
               </h1>
             </v-row>
@@ -54,9 +47,7 @@
                 style="max-width: 200px"
               >
                 <template #prepend-inner>
-                  <v-icon color="grey" class="mt-1" small>
-                    search
-                  </v-icon>
+                  <v-icon color="grey" class="mt-1" small> search </v-icon>
                 </template>
               </v-text-field>
               <v-spacer />
@@ -78,7 +69,7 @@
                   <template #activator="{ on }">
                     <div>
                       <x-btn
-                        v-if="_isUIAllowed('projectCreate',true)"
+                        v-if="_isUIAllowed('projectCreate', true)"
                         v-ge="['home', 'project-new']"
                         outlined
                         data-v-step="1"
@@ -87,10 +78,8 @@
                         v-on="on"
                       >
                         <!-- New Project -->
-                        {{ $t('title.newProj') }}
-                        <v-icon class="mr-1" small>
-                          mdi-menu-down
-                        </v-icon>
+                        {{ $t("title.newProj") }}
+                        <v-icon class="mr-1" small> mdi-menu-down </v-icon>
                       </x-btn>
                     </div>
                   </template>
@@ -100,32 +89,23 @@
                       @click="onCreateProject('xcdb')"
                     >
                       <v-list-item-icon class="mr-2">
-                        <v-icon small>
-                          mdi-plus
-                        </v-icon>
+                        <v-icon small> mdi-plus </v-icon>
                       </v-list-item-icon>
                       <v-list-item-title>
                         <!-- Create -->
-                        <span class="caption font-weight-regular ">{{
-                          $t('general.create')
+                        <span class="caption font-weight-regular">{{
+                          $t("general.create")
                         }}</span>
                       </v-list-item-title>
                       <v-spacer />
                       <v-tooltip right>
                         <template #activator="{ on }">
-                          <v-icon
-                            x-small
-                            color="grey"
-                            class="ml-4"
-                            v-on="on"
-                          >
+                          <v-icon x-small color="grey" class="ml-4" v-on="on">
                             mdi-information-outline
                           </v-icon>
                         </template>
                         <!-- Create a new project -->
-                        <span class="caption">{{
-                          $t('tooltip.xcDB')
-                        }}</span>
+                        <span class="caption">{{ $t("tooltip.xcDB") }}</span>
                       </v-tooltip>
                     </v-list-item>
                     <v-divider />
@@ -135,42 +115,31 @@
                       @click="onCreateProject()"
                     >
                       <v-list-item-icon class="mr-2">
-                        <v-icon small class="">
-                          mdi-power-plug-outline
-                        </v-icon>
+                        <v-icon small class=""> mdi-power-plug-outline </v-icon>
                       </v-list-item-icon>
                       <v-list-item-title>
                         <!-- Create By Connecting <br>To An External Database -->
                         <span
                           class="caption font-weight-regular"
-                          v-html="
-                            $t('activity.createProjectExtended.extDB')
-                          "
+                          v-html="$t('activity.createProjectExtended.extDB')"
                         />
                       </v-list-item-title>
                       <v-spacer />
                       <v-tooltip right>
                         <template #activator="{ on }">
-                          <v-icon
-                            x-small
-                            color="grey"
-                            class="ml-4"
-                            v-on="on"
-                          >
+                          <v-icon x-small color="grey" class="ml-4" v-on="on">
                             mdi-information-outline
                           </v-icon>
                         </template>
                         <!-- Supports MySQL, PostgreSQL, SQL Server & SQLite -->
-                        <span class="caption">{{
-                          $t('tooltip.extDB')
-                        }}</span>
+                        <span class="caption">{{ $t("tooltip.extDB") }}</span>
                       </v-tooltip>
                     </v-list-item>
                   </v-list>
                 </v-menu>
               </template>
               <x-btn
-                v-else-if="_isUIAllowed('projectCreate',true)"
+                v-else-if="_isUIAllowed('projectCreate', true)"
                 v-ge="['home', 'project-new']"
                 outlined
                 data-v-step="1"
@@ -178,7 +147,7 @@
                 @click="onCreateProject('xcdb')"
               >
                 <!-- New Project -->
-                {{ $t('title.newProj') }}
+                {{ $t("title.newProj") }}
               </x-btn>
             </v-row>
 
@@ -195,15 +164,18 @@
                 :footer-props="{
                   'items-per-page-options': [20, -1],
                 }"
-                class="pa-4 text-left mx-auto "
+                class="pa-4 text-left mx-auto"
                 style="cursor: pointer; max-width: 100%"
               >
                 <template #item="props">
                   <tr
                     class="project-row"
-                    :class="[`nc-${props.item.projectType}-project-row`,{
-                      'nc-meta-project-row': props.item.prefix
-                    }]"
+                    :class="[
+                      `nc-${props.item.projectType}-project-row`,
+                      {
+                        'nc-meta-project-row': props.item.prefix,
+                      },
+                    ]"
                     @click="projectRouteHandler(props.item, projects.length)"
                   >
                     <td data-v-step="2">
@@ -215,30 +187,30 @@
                           indeterminate
                         />
                         <template v-else>
-                          <v-icon
-                            x-small
-                            class="mr-2"
-                            color="green"
-                          >
+                          <v-icon x-small class="mr-2" color="green">
                             mdi-moon-full
                           </v-icon>
                           <!-- Accessible via GraphQL APIs / Accessible via REST APIs -->
                         </template>
                         <div
                           class="d-inline-block title font-weight-regular"
-                          style="min-width:0; max-width:390px; white-space: nowrap;text-overflow: ellipsis; overflow: hidden"
+                          style="
+                            min-width: 0;
+                            max-width: 390px;
+                            white-space: nowrap;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                          "
                         >
-                          {{
-                            props.item.title
-                          }}
+                          {{ props.item.title }}
                         </div>
                       </div>
                     </td>
-                    <td style="width:150px;min-width:150px;max-width:150px">
+                    <td
+                      style="width: 150px; min-width: 150px; max-width: 150px"
+                    >
                       <x-icon
-                        :tooltip="
-                          $t('activity.deleteProject')
-                        "
+                        :tooltip="$t('activity.deleteProject')"
                         class="pointer mr-2"
                         icon.class="delete-icon"
                         small
@@ -249,7 +221,11 @@
                       </x-icon>
 
                       <div
-                        v-if="props.item.allowed && _isUIAllowed('projectActions',true) && props.item.is_creator"
+                        v-if="
+                          props.item.allowed &&
+                          _isUIAllowed('projectActions', true) &&
+                          props.item.is_creator
+                        "
                         :class="{
                           'action-icons': !(
                             projectStatusUpdating &&
@@ -260,9 +236,7 @@
                         <!-- Stop Project -->
                         <x-icon
                           v-if="props.item.status === 'started'"
-                          :tooltip="
-                            $t('activity.stopProject')
-                          "
+                          :tooltip="$t('activity.stopProject')"
                           class="pointer mr-2"
                           color="orange grey"
                           @click.stop="stopProject(props.item)"
@@ -272,9 +246,7 @@
                         <!-- Start Project -->
                         <x-icon
                           v-else-if="props.item.status === 'stopped'"
-                          :tooltip="
-                            $t('activity.startProject')
-                          "
+                          :tooltip="$t('activity.startProject')"
                           class="pointer mr-2"
                           color="green grey"
                           @click.stop="startProject(props.item)"
@@ -284,7 +256,7 @@
                         <x-icon
                           v-if="
                             projectStatusUpdating &&
-                              props.item.id === statusUpdatingProjectId
+                            props.item.id === statusUpdatingProjectId
                           "
                           class="mr-1"
                         >
@@ -292,9 +264,7 @@
                         </x-icon>
                         <!-- Restart Project -->
                         <x-icon
-                          :tooltip="
-                            $t('activity.restartProject')
-                          "
+                          :tooltip="$t('activity.restartProject')"
                           class="pointer mr-2"
                           color="primary grey"
                           @click.stop="restartProject(props.item)"
@@ -303,9 +273,7 @@
                         </x-icon>
                         <!-- Delete Project -->
                         <x-icon
-                          :tooltip="
-                            $t('activity.deleteProject')
-                          "
+                          :tooltip="$t('activity.deleteProject')"
                           class="pointer mr-2"
                           color="red grey"
                           @click.stop="deleteProject(props.item)"
@@ -315,10 +283,7 @@
 
                         <v-menu offset-y>
                           <template #activator="{ on }">
-                            <x-icon
-                              color="grey"
-                              v-on="on"
-                            >
+                            <x-icon color="grey" v-on="on">
                               mdi-dots-vertical
                             </x-icon>
                           </template>
@@ -331,14 +296,12 @@
                               "
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small>
-                                  mdi-import
-                                </v-icon>
+                                <v-icon small> mdi-import </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Import Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('activity.importMetadata')
+                                  $t("activity.importMetadata")
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -347,14 +310,12 @@
                               @click="exportMetaZip(props.item.id)"
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small>
-                                  mdi-export
-                                </v-icon>
+                                <v-icon small> mdi-export </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Export Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('activity.exportMetadata')
+                                  $t("activity.exportMetadata")
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -363,14 +324,12 @@
                               @click="resetMeta(props.item.id)"
                             >
                               <v-list-item-icon class="mr-1">
-                                <v-icon small>
-                                  mdi-delete-variant
-                                </v-icon>
+                                <v-icon small> mdi-delete-variant </v-icon>
                               </v-list-item-icon>
                               <v-list-item-title>
                                 <!-- Clear Metadata -->
                                 <span class="caption font-weight-regular">{{
-                                  $t('activity.clearMetadata')
+                                  $t("activity.clearMetadata")
                                 }}</span>
                               </v-list-item-title>
                             </v-list-item>
@@ -381,15 +340,9 @@
                   </tr>
                 </template>
                 <!-- Your search for "{{ search }}" found no results. -->
-                <template
-                  #no-results
-                >
-                  <v-alert
-                    :value="true"
-                    color="error"
-                    icon="warning"
-                  >
-                    {{ $t('msg.error.searchProject', {search}) }}
+                <template #no-results>
+                  <v-alert :value="true" color="error" icon="warning">
+                    {{ $t("msg.error.searchProject", { search }) }}
                   </v-alert>
                 </template>
               </v-data-table>
@@ -408,7 +361,7 @@
                   icon="mdi-information-outline"
                 >
                   <!-- Get started by creating a new project -->
-                  {{ $t('msg.info.projectEmptyMessage') }}
+                  {{ $t("msg.info.projectEmptyMessage") }}
                 </v-alert>
               </v-col>
             </v-row>
@@ -425,14 +378,7 @@
               class="elevation-20 pt-4 mt-4 d-flex flex-column"
             >
               <p
-                class="
-                  display-1
-                  flex-grow-1
-                  pt-5
-                  d-flex
-                  align-center
-                  justify-center
-                "
+                class="display-1 flex-grow-1 pt-5 d-flex align-center justify-center"
               >
                 <!-- Create By Connecting <br>To An External Database -->
                 <span v-html="$t('activity.createProjectExtended.extDB')" />
@@ -446,10 +392,10 @@
                   @click="onCreateProject"
                 >
                   <v-icon color="white" class="blink_me">
-                    mdi-lightbulb-on
-                  </v-icon>&nbsp;
+                    mdi-lightbulb-on </v-icon
+                  >&nbsp;
                   <!-- New Project -->
-                  {{ $t('title.newProj') }}
+                  {{ $t("title.newProj") }}
                 </x-btn>
               </v-card-actions>
             </v-card>
@@ -458,12 +404,7 @@
       </v-col>
       <v-col
         v-if="loaded"
-        class="
-          col-sm-12 col-lg-3
-          d-sm-none d-md-flex
-          justify-center justify-lg-end
-          align-start
-        "
+        class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start"
       >
         <sponsor-mini />
       </v-col>
@@ -471,14 +412,7 @@
 
     <div v-if="projects && projects.length" class="d-flex justify-end">
       <v-list
-        class="
-          flex-shrink-1
-          text-left
-          elevation-4
-          rounded-xl
-          community-card
-          mr-10
-        "
+        class="flex-shrink-1 text-left elevation-4 rounded-xl community-card mr-10"
         width="300"
         :class="{ active: showCommunity }"
         dense
@@ -489,23 +423,17 @@
           target="_blank"
         >
           <v-list-item-icon>
-            <v-icon class="ml-2 mt-n2">
-              mdi-github
-            </v-icon>
+            <v-icon class="ml-2 mt-n2"> mdi-github </v-icon>
           </v-list-item-icon>
           <v-list-item-title>
             <!-- Star -->
-            {{ $t('labels.community.starUs1') }}
-            <v-icon small>
-              mdi-star-outline
-            </v-icon>
+            {{ $t("labels.community.starUs1") }}
+            <v-icon small> mdi-star-outline </v-icon>
             <!-- us on Github -->
-            {{ $t('labels.community.starUs2') }}
+            {{ $t("labels.community.starUs2") }}
           </v-list-item-title>
         </v-list-item>
-        <v-divider
-          v-if="!_isZh"
-        />
+        <v-divider v-if="!_isZh" />
         <v-list-item
           v-if="!_isZh"
           dense
@@ -513,32 +441,23 @@
           href="https://calendly.com/nocodb-meeting"
         >
           <v-list-item-icon>
-            <v-icon
-              class="ml-2"
-              :color="textColors[3]"
-            >
+            <v-icon class="ml-2" :color="textColors[3]">
               mdi-calendar-month
             </v-icon>
           </v-list-item-icon>
           <!-- Book a Free DEMO -->
           <v-list-item-title>
-            {{
-              $t('labels.community.bookDemo')
-            }}
+            {{ $t("labels.community.bookDemo") }}
           </v-list-item-title>
         </v-list-item>
         <v-divider />
         <v-list-item dense href="https://discord.gg/5RgZmkW" target="_blank">
           <v-list-item-icon>
-            <v-icon class="ml-2" :color="textColors[0]">
-              mdi-discord
-            </v-icon>
+            <v-icon class="ml-2" :color="textColors[0]"> mdi-discord </v-icon>
           </v-list-item-icon>
           <!-- Get your questions answered -->
           <v-list-item-title>
-            {{
-              $t('labels.community.getAnswered')
-            }}
+            {{ $t("labels.community.getAnswered") }}
           </v-list-item-title>
         </v-list-item>
         <v-divider />
@@ -549,33 +468,35 @@
           target="_blank"
         >
           <v-list-item-icon>
-            <v-icon class="ml-2" :color="textColors[1]">
-              mdi-twitter
-            </v-icon>
+            <v-icon class="ml-2" :color="textColors[1]"> mdi-twitter </v-icon>
           </v-list-item-icon>
           <!-- Follow NocoDB -->
           <v-list-item-title>
-            {{
-              $t('labels.community.followNocodb')
-            }}
+            {{ $t("labels.community.followNocodb") }}
           </v-list-item-title>
         </v-list-item>
         <template v-else>
-          <v-list-item dense class="" @click="$refs.wechat.$el.firstElementChild.click()">
+          <v-list-item
+            dense
+            class=""
+            @click="$refs.wechat.$el.firstElementChild.click()"
+          >
             <v-list-item-icon>
               <share-icons
                 ref="wechat"
-                class="small  mr-n2"
+                class="small mr-n2"
                 url="https://github.com/nocodb/nocodb"
                 :social-medias="['wechat']"
               />
             </v-list-item-icon>
-            <v-list-item-title>
-              Please share it in Wechat
-            </v-list-item-title>
+            <v-list-item-title> Please share it in Wechat </v-list-item-title>
           </v-list-item>
           <v-divider />
-          <v-list-item dense class="" @click="$refs.weibo.$el.firstElementChild.click()">
+          <v-list-item
+            dense
+            class=""
+            @click="$refs.weibo.$el.firstElementChild.click()"
+          >
             <v-list-item-icon>
               <share-icons
                 ref="weibo"
@@ -584,17 +505,12 @@
                 :social-medias="['weibo']"
               />
             </v-list-item-icon>
-            <v-list-item-title>
-              Please share it in Weibo
-            </v-list-item-title>
+            <v-list-item-title> Please share it in Weibo </v-list-item-title>
           </v-list-item>
           <v-divider />
-          <v-list-item
-            dense
-            target="_blank"
-          >
+          <v-list-item dense target="_blank">
             <v-list-item-icon>
-              <img class="ml-2" src="vue.svg" width="25">
+              <img class="ml-2" src="vue.svg" width="25" />
             </v-list-item-icon>
             <!-- Follow NocoDB -->
             <v-list-item-title>
@@ -614,7 +530,7 @@
       type="file"
       accept=".zip"
       @change="importMetaZip"
-    >
+    />
 
     <dlg-label-submit-cancel
       v-if="dialogShow"
@@ -629,12 +545,12 @@
 </template>
 
 <script>
-import dlgLabelSubmitCancel from '../../components/utils/dlgLabelSubmitCancel.vue'
-import ShareIcons from '../../components/share-icons'
-import SponsorMini from '@/components/sponsorMini'
-import colors from '~/mixins/colors'
-import TemplatesModal from '~/components/templates/templatesModal'
-import ExcelImport from '~/components/import/excelImport'
+import dlgLabelSubmitCancel from "../../components/utils/dlgLabelSubmitCancel.vue";
+import ShareIcons from "../../components/share-icons";
+import SponsorMini from "@/components/sponsorMini";
+import colors from "~/mixins/colors";
+import TemplatesModal from "~/components/templates/templatesModal";
+import ExcelImport from "~/components/import/excelImport";
 
 export default {
   components: {
@@ -642,12 +558,12 @@ export default {
     TemplatesModal,
     ShareIcons,
     SponsorMini,
-    dlgLabelSubmitCancel
+    dlgLabelSubmitCancel,
     // howItWorks,
   },
   mixins: [colors],
   $_veeValidate: {
-    validator: 'new'
+    validator: "new",
   },
   data() {
     return {
@@ -660,7 +576,7 @@ export default {
       loading: null,
       dialogShow: false,
       confirmAction: null,
-      confirmMessage: '',
+      confirmMessage: "",
 
       createProjectDialog: false,
       projectStatusUpdating: false,
@@ -671,247 +587,245 @@ export default {
       steps: [
         {
           target: '[data-v-step="1"]',
-          content: 'Click here to create new Project.',
+          content: "Click here to create new Project.",
           params: {
-            placement: 'top'
-          }
+            placement: "top",
+          },
         },
         {
           target: '[data-v-step="2"]',
-          content: 'Click here to open existing project.'
+          content: "Click here to open existing project.",
         },
         {
           target: '[data-v-step="3"]',
-          content: 'Click here to filter projects.'
+          content: "Click here to filter projects.",
         },
         {
           target: '[data-v-step="4"]',
-          content: 'Click here to open project folder.'
+          content: "Click here to open project folder.",
         },
         {
           target: '[data-v-step="5"]',
-          content: 'Click here to edit project.'
+          content: "Click here to edit project.",
         },
         {
           target: '[data-v-step="6"]',
-          content: 'Click here to delete project.'
-        }
+          content: "Click here to delete project.",
+        },
       ],
       loaded: false,
       dialog: {
         show: false,
-        title: 'Confirm Deleting project',
-        heading: '',
+        title: "Confirm Deleting project",
+        heading: "",
         // mtdOk: this.projectRemove,
-        type: 'error'
+        type: "error",
       },
       loadingProjects: true,
       newProjectDialog: false,
-      name: '',
-      type: 'MySQL',
+      name: "",
+      type: "MySQL",
       userSelectedDir: false,
-      dialogTitle: 'New',
+      dialogTitle: "New",
       databases: {
-        Oracle: 'oracledb',
-        Postgres: 'pg',
-        MySQL: 'mysql',
-        MSSQL: 'mssql',
-        Sqlite: 'sqlite'
+        Oracle: "oracledb",
+        Postgres: "pg",
+        MySQL: "mysql",
+        MSSQL: "mssql",
+        Sqlite: "sqlite",
       },
       headers: [
         {
-          text: 'Title',
-          value: 'title',
-          class: 'caption'
+          text: "Title",
+          value: "title",
+          class: "caption",
         },
         {
-          text: '',
-          value: 'name',
+          text: "",
+          value: "name",
           sortable: false,
-          class: 'caption'
-        }
+          class: "caption",
+        },
       ],
       projects: [],
-      search: '',
-      deleteBtnClicked: false
-    }
+      search: "",
+      deleteBtnClicked: false,
+    };
   },
   computed: {
     connectToExternalDB() {
-      return this.$store.state.project && this.$store.state.project.projectInfo && this.$store.state.project.projectInfo.connectToExternalDB
-    }
+      return (
+        this.$store.state.project &&
+        this.$store.state.project.projectInfo &&
+        this.$store.state.project.projectInfo.connectToExternalDB
+      );
+    },
   },
   watch: {
     name() {
       if (!this.userSelectedDir) {
-        this.folder = `${this.baseFolder}/${this.name}`
+        this.folder = `${this.baseFolder}/${this.name}`;
       }
-    }
+    },
   },
   async created() {
-    this.$store.commit('windows/MutToggleGaEnabled', true)
-    this.$store.commit('windows/MutToggleTelemetryEnabled', true)
-    await this.$store.dispatch('users/ActGetUserDetails')
+    this.$store.commit("windows/MutToggleGaEnabled", true);
+    this.$store.commit("windows/MutToggleTelemetryEnabled", true);
+    await this.$store.dispatch("users/ActGetUserDetails");
   },
   async mounted() {
-    setTimeout(() => (this.showCommunity = true), 2000)
+    setTimeout(() => (this.showCommunity = true), 2000);
 
-    await this.projectsLoad()
+    await this.projectsLoad();
 
     if (this.$route && this.$route.query && this.$route.query.excelUrl) {
-      this.excelImportModal = true
+      this.excelImportModal = true;
     }
   },
   methods: {
     async onFileDrop(e) {
-      this.excelImportModal = true
-      this.$refs.excelImport.dropHandler(e)
+      this.excelImportModal = true;
+      this.$refs.excelImport.dropHandler(e);
     },
     async stopProject(project) {
-      this.dialogShow = true
-      this.confirmMessage =
-        'Do you want to stop the project?'
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to stop the project?";
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.$set(project, 'status', 'stopping')
-          const projectId = project.id
-          this.statusUpdatingProjectId = projectId
-          this.projectStatusUpdating = true
+          this.$set(project, "status", "stopping");
+          const projectId = project.id;
+          this.statusUpdatingProjectId = projectId;
+          this.projectStatusUpdating = true;
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               { project_id: projectId },
-              'projectStop'
-            ])
+              "projectStop",
+            ]);
             this.$toast
               .success(`Project '${project.title}' stopped successfully`)
-              .goAway(3000)
+              .goAway(3000);
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' stopping failed`)
-              .goAway(3000)
+              .goAway(3000);
           }
-          await this.projectsLoad()
-          this.projectStatusUpdating = false
-          this.dialogShow = false
+          await this.projectsLoad();
+          this.projectStatusUpdating = false;
+          this.dialogShow = false;
         }
-      }
+      };
     },
     async startProject(project) {
-      this.dialogShow = true
-      this.confirmMessage =
-        'Do you want to start the project?'
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to start the project?";
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.$set(project, 'status', 'starting')
-          const projectId = project.id
-          this.statusUpdatingProjectId = projectId
-          this.projectStatusUpdating = true
+          this.$set(project, "status", "starting");
+          const projectId = project.id;
+          this.statusUpdatingProjectId = projectId;
+          this.projectStatusUpdating = true;
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               { project_id: projectId },
-              'projectStart'
-            ])
+              "projectStart",
+            ]);
             this.$toast
               .success(`Project '${project.title}' started successfully`)
-              .goAway(3000)
+              .goAway(3000);
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' starting failed`)
-              .goAway(3000)
+              .goAway(3000);
           }
-          await this.projectsLoad()
-          this.projectStatusUpdating = false
-          this.dialogShow = false
+          await this.projectsLoad();
+          this.projectStatusUpdating = false;
+          this.dialogShow = false;
         }
-      }
+      };
     },
     async restartProject(project) {
-      this.dialogShow = true
-      this.confirmMessage =
-        'Do you want to restart the project?'
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to restart the project?";
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.$set(project, 'status', 'restarting')
-          const projectId = project.id
-          this.statusUpdatingProjectId = projectId
-          this.projectStatusUpdating = true
+          this.$set(project, "status", "restarting");
+          const projectId = project.id;
+          this.statusUpdatingProjectId = projectId;
+          this.projectStatusUpdating = true;
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               { project_id: projectId },
-              'projectRestart'
-            ])
+              "projectRestart",
+            ]);
             this.$toast
               .success(`Project '${project.title}' restarted successfully`)
-              .goAway(3000)
+              .goAway(3000);
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' restarting failed`)
-              .goAway(3000)
+              .goAway(3000);
           }
-          await this.projectsLoad()
-          this.projectStatusUpdating = false
-          this.dialogShow = false
+          await this.projectsLoad();
+          this.projectStatusUpdating = false;
+          this.dialogShow = false;
         }
-      }
+      };
     },
     async deleteProject(project) {
-      this.dialogShow = true
-      this.confirmMessage =
-        'Do you want to delete the project?'
-      this.$tele.emit('project:delete:trigger')
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to delete the project?";
+      this.$e("c:project:delete");
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.$set(project, 'status', 'deleting')
-          const projectId = project.id
-          this.statusUpdatingProjectId = projectId
-          this.projectStatusUpdating = true
+          this.$set(project, "status", "deleting");
+          const projectId = project.id;
+          this.statusUpdatingProjectId = projectId;
+          this.projectStatusUpdating = true;
           try {
-
-            await this.$api.project.delete(projectId)
+            await this.$api.project.delete(projectId);
             this.$toast
               .success(`Project '${project.title}' deleted successfully`)
-              .goAway(3000)
+              .goAway(3000);
           } catch (e) {
             this.$toast
               .error(`Project '${project.title}' deleting failed`)
-              .goAway(3000)
+              .goAway(3000);
           }
-          await this.projectsLoad()
-          this.projectStatusUpdating = false
+          await this.projectsLoad();
+          this.projectStatusUpdating = false;
 
-          this.dialogShow = false
-          this.$tele.emit('project:delete:submit')
+          this.dialogShow = false;
+          this.$e("a:project:delete");
         }
-      }
+      };
     },
     onCreateProject(xcdb) {
-      if (xcdb === 'xcdb') {
-        this.$router.push('/project/xcdb')
-        this.$tele.emit('project:create:xcdb:trigger')
+      if (xcdb === "xcdb") {
+        this.$router.push("/project/xcdb");
+        this.$e("c:project:create:xcdb");
       } else {
-        this.$router.push('/project/0')
-        this.$tele.emit('project:create:extdb:trigger')
+        this.$router.push("/project/0");
+        this.$e("c:project:create:extdb");
       }
     },
     onCreateProjectFromTemplate() {
-      this.templatesModal = true
-      this.$tele.emit('project:create:template:trigger')
+      this.templatesModal = true;
+      this.$e("c:project:create:template");
     },
     onCreateProjectFromExcel() {
       // this.$refs.excelImport.selectFile()
-      this.excelImportModal = true
-      this.$tele.emit('project:create:excel:trigger')
-    },
-    async importProjectFromJSON() {
+      this.excelImportModal = true;
+      this.$e("c:project:create:excel");
     },
+    async importProjectFromJSON() {},
     onTourCompletion() {
       // this.$store.commit('windows/MutShowTour', {page: 'home'})
     },
@@ -919,16 +833,16 @@ export default {
       // return path.dirname(filePath);
     },
     async projectsRefresh() {
-      await this.projectsLoad()
-      this.$tele.emit('project:refresh')
+      await this.projectsLoad();
+      this.$e("a:project:refresh");
     },
     async projectsLoad() {
       try {
-        this.loadingProjects = true
-        this.projects = (await this.$api.project.list({})).list
+        this.loadingProjects = true;
+        this.projects = (await this.$api.project.list({})).list;
 
         // todo: multiplex
-        const user = this.$store.state.users.user
+        const user = this.$store.state.users.user;
         if (
           !(this.projects && this.projects.length) &&
           user &&
@@ -943,133 +857,136 @@ export default {
           }
         }
 
-        this.loadingProjects = false
+        this.loadingProjects = false;
       } catch (error) {
-        console.log('Project fetch err', error)
+        console.log("Project fetch err", error);
       }
-      this.loaded = true
+      this.loaded = true;
     },
     async projectRouteHandler(project, count) {
-
       if (!this.deleteBtnClicked) {
         await this.$router.push({
-          path: `/nc/${project.id}`
-        })
+          path: `/nc/${project.id}`,
+        });
       }
-      this.$tele.emit(`project:open:${count}`)
+      this.$e("a:project:open", { count });
     },
     async projectEdit(project) {
       this.$router.push({
-        path: `project/0?edit=true&projectId=${project.id}`
-      })
-    },
-    async projectOpenFolder(project) {
+        path: `project/0?edit=true&projectId=${project.id}`,
+      });
     },
+    async projectOpenFolder(project) {},
 
     async exportMetaZip(projectId) {
-      this.dialogShow = true
-      this.confirmMessage =
-        'Do you want to export metadata from meta tables?'
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to export metadata from meta tables?";
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'export-zip'
-          let data
+          this.loading = "export-zip";
+          let data;
           try {
-            data = await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            data = await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
                 // dbAlias: 'db',
                 project_id: projectId,
-                env: '_noco'
+                env: "_noco",
               },
-              'xcMetaTablesExportDbToZip',
+              "xcMetaTablesExportDbToZip",
               null,
               null,
               {
-                responseType: 'blob'
-              }
-            ])
+                responseType: "blob",
+              },
+            ]);
             const url = window.URL.createObjectURL(
-              new Blob([data], { type: 'application/zip' })
-            )
-            const link = document.createElement('a')
-            link.href = url
-            link.setAttribute('download', 'meta.zip') // or any other extension
-            document.body.appendChild(link)
-            link.click()
-            this.$toast.success(`${this.$t('msg.toast.exportMetadata')}`).goAway(3000)
+              new Blob([data], { type: "application/zip" })
+            );
+            const link = document.createElement("a");
+            link.href = url;
+            link.setAttribute("download", "meta.zip"); // or any other extension
+            document.body.appendChild(link);
+            link.click();
+            this.$toast
+              .success(`${this.$t("msg.toast.exportMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            console.log(e)
-            this.$toast.error(e.message).goAway(3000)
+            console.log(e);
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
+          this.dialogShow = false;
+          this.loading = null;
         }
-      }
+      };
     },
     async resetMeta(projectId) {
-      this.dialogShow = true
-      this.confirmMessage = 'Do you want to clear metadata from meta tables?'
-      this.confirmAction = async(act) => {
-        if (act === 'hideDialog') {
-          this.dialogShow = false
+      this.dialogShow = true;
+      this.confirmMessage = "Do you want to clear metadata from meta tables?";
+      this.confirmAction = async (act) => {
+        if (act === "hideDialog") {
+          this.dialogShow = false;
         } else {
-          this.loading = 'reset-metadata'
+          this.loading = "reset-metadata";
           try {
-            await this.$store.dispatch('sqlMgr/ActSqlOp', [
+            await this.$store.dispatch("sqlMgr/ActSqlOp", [
               {
                 // dbAlias: 'db',
-                env: '_noco',
-                project_id: projectId
+                env: "_noco",
+                project_id: projectId,
               },
-              'xcMetaTablesReset'
-            ])
+              "xcMetaTablesReset",
+            ]);
             // this.$toast.success('Metadata cleared successfully').goAway(3000)
-            this.$toast.success(`${this.$t('msg.toast.clearMetadata')}`).goAway(3000)
+            this.$toast
+              .success(`${this.$t("msg.toast.clearMetadata")}`)
+              .goAway(3000);
           } catch (e) {
-            console.log(e)
-            this.$toast.error(e.message).goAway(3000)
+            console.log(e);
+            this.$toast.error(e.message).goAway(3000);
           }
-          this.dialogShow = false
-          this.loading = null
+          this.dialogShow = false;
+          this.loading = null;
         }
-      }
+      };
     },
     async importMetaZip() {
-      const projectId = this.project_id
+      const projectId = this.project_id;
       if (
         this.$refs.importFile &&
         this.$refs.importFile.files &&
         this.$refs.importFile.files[0]
       ) {
-        const zipFile = this.$refs.importFile.files[0]
-        this.loading = 'import-zip'
+        const zipFile = this.$refs.importFile.files[0];
+        this.loading = "import-zip";
         try {
-          this.$refs.importFile.value = ''
-          await this.$store.dispatch('sqlMgr/ActUploadOld', [
+          this.$refs.importFile.value = "";
+          await this.$store.dispatch("sqlMgr/ActUploadOld", [
             {
               // dbAlias: 'db',
               project_id: projectId,
-              env: '_noco'
+              env: "_noco",
             },
-            'xcMetaTablesImportZipToLocalFsAndDb',
+            "xcMetaTablesImportZipToLocalFsAndDb",
             {},
-            zipFile
-          ])
+            zipFile,
+          ]);
           // this.$toast.success('Successfully imported metadata').goAway(3000)
-          this.$toast.success(`${this.$t('msg.toast.importMetadata')}`).goAway(3000)
-          await this.projectsLoad()
+          this.$toast
+            .success(`${this.$t("msg.toast.importMetadata")}`)
+            .goAway(3000);
+          await this.projectsLoad();
         } catch (e) {
-          console.log(e)
-          this.$toast.error(e.message).goAway(3000)
+          console.log(e);
+          this.$toast.error(e.message).goAway(3000);
         }
-        this.dialogShow = false
-        this.loading = null
+        this.dialogShow = false;
+        this.loading = null;
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 <style scoped>
 .action-icons {
@@ -1103,14 +1020,13 @@ tr:hover .action-icons {
 .nc-container {
   position: relative;
 }
-/deep/ .project-row .delete-icon{
-opacity:0;
-  transition: .2s opacity;
+/deep/ .project-row .delete-icon {
+  opacity: 0;
+  transition: 0.2s opacity;
 }
-/deep/ .project-row:hover .delete-icon{
-opacity:1;
+/deep/ .project-row:hover .delete-icon {
+  opacity: 1;
 }
-
 </style>
 
 <!--
diff --git a/packages/nc-gui/pages/projects/list.vue b/packages/nc-gui/pages/projects/list.vue
index 66fb582761..5665798dda 100644
--- a/packages/nc-gui/pages/projects/list.vue
+++ b/packages/nc-gui/pages/projects/list.vue
@@ -1,14 +1,6 @@
 <template>
-  <div
-    class="d-flex "
-    style="height:calc(100vh - 52px)"
-  >
-    <v-navigation-drawer
-      left
-      permanent
-      width="max(300px,20%)"
-      class="h-100"
-    >
+  <div class="d-flex" style="height: calc(100vh - 52px)">
+    <v-navigation-drawer left permanent width="max(300px,20%)" class="h-100">
       <div class="d-flex flex-column h-100">
         <div class="advance-menu flex-grow-1 pt-8">
           <v-list
@@ -31,7 +23,10 @@
                   </v-icon>
                   <span
                     class="font-weight-medium ml-3"
-                    :class="{'textColor--text text--lighten-2':item.title!==activePage}"
+                    :class="{
+                      'textColor--text text--lighten-2':
+                        item.title !== activePage,
+                    }"
                   >
                     {{ item.title }}
                   </span>
@@ -41,7 +36,7 @@
           </v-list>
         </div>
         <v-divider />
-        <extras class="pl-6 " />
+        <extras class="pl-6" />
         <div class="sponsor ml-2 mb-2 mr-2">
           <sponsor-mini nav />
         </div>
@@ -49,7 +44,9 @@
     </v-navigation-drawer>
     <v-container class="flex-grow-1 py-9 px-15 h-100" style="overflow-y: auto">
       <div class="d-flex">
-        <h2 class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1">
+        <h2
+          class="display-1 ml-5 mb-7 font-weight-medium textColor--text text--lighten-2 flex-grow-1"
+        >
           {{ activePage }}
         </h2>
 
@@ -58,35 +55,53 @@
         </div>
       </div>
       <v-divider class="mb-3" />
-      <div v-if="projectList &&projectList.length" class="nc-project-item-container d-flex d-100">
+      <div
+        v-if="projectList && projectList.length"
+        class="nc-project-item-container d-flex d-100"
+      >
         <div
-          v-for="(project,i) in projectList"
+          v-for="(project, i) in projectList"
           :key="project.id"
-          class=" nc-project-item elevation-0 d-flex align-center justify-center flex-column py-5"
+          class="nc-project-item elevation-0 d-flex align-center justify-center flex-column py-5"
         >
           <div
             class="nc-project-thumbnail pointer text-uppercase d-flex align-center justify-center"
-            :style="{backgroundColor:getTextColor(i)}"
+            :style="{ backgroundColor: getTextColor(i) }"
             @click="openProject(project)"
           >
-            {{ project.title.split(' ').map(w => w[0]).slice(0, 2).join('') }}
-
-            <v-icon class="nc-project-star-icon" small color="white" v-on="on" @click.stop>
+            {{
+              project.title
+                .split(" ")
+                .map((w) => w[0])
+                .slice(0, 2)
+                .join("")
+            }}
+
+            <v-icon
+              class="nc-project-star-icon"
+              small
+              color="white"
+              v-on="on"
+              @click.stop
+            >
               mdi-star-outline
             </v-icon>
 
             <v-menu bottom offset-y>
-              <template #activator="{on}">
-                <v-icon class="nc-project-option-menu-icon" color="white" v-on="on" @click.stop>
+              <template #activator="{ on }">
+                <v-icon
+                  class="nc-project-option-menu-icon"
+                  color="white"
+                  v-on="on"
+                  @click.stop
+                >
                   mdi-menu-down
                 </v-icon>
               </template>
               <v-list dense>
                 <v-list-item>
                   <v-list-item-title>
-                    <v-icon small color="red">
-                      mdi-delete-outline
-                    </v-icon>
+                    <v-icon small color="red"> mdi-delete-outline </v-icon>
                     Delete
                   </v-list-item-title>
                 </v-list-item>
@@ -94,30 +109,36 @@
             </v-menu>
           </div>
 
-          <div class="text-center pa-2 nc-project-title body-2 font-weight-medium ">
+          <div
+            class="text-center pa-2 nc-project-title body-2 font-weight-medium"
+          >
             {{ project.title }}
           </div>
         </div>
 
-        <div class="pointer nc-project-item nc-project-item elevation-0 d-flex align-center justify-center flex-column">
+        <div
+          class="pointer nc-project-item nc-project-item elevation-0 d-flex align-center justify-center flex-column"
+        >
           <create-new-project-btn>
-            <template #default="{on}">
+            <template #default="{ on }">
               <div
-                class="nc-project-thumbnail nc-add-project text-uppercase d-flex align-center justify-center grey lighten-2 "
+                class="nc-project-thumbnail nc-add-project text-uppercase d-flex align-center justify-center grey lighten-2"
                 v-on="on"
               >
                 +
               </div>
             </template>
           </create-new-project-btn>
-          <div class="text-center pa-2 nc-project-title body-2 font-weight-medium ">
+          <div
+            class="text-center pa-2 nc-project-title body-2 font-weight-medium"
+          >
             Add project
           </div>
         </div>
       </div>
       <div
         v-else
-        class="px-4 py-10 text-center textColor--text text--lighten-3 caption backgroundColor "
+        class="px-4 py-10 text-center textColor--text text--lighten-3 caption backgroundColor"
       >
         Please create a project
       </div>
@@ -126,49 +147,53 @@
 </template>
 
 <script>
-
-import colors from '~/mixins/colors'
-import CreateNewProjectBtn from '~/components/projectList/createNewProjectBtn'
-import Extras from '~/components/project/spreadsheet/components/extras'
-import SponsorMini from '~/components/sponsorMini'
+import colors from "~/mixins/colors";
+import CreateNewProjectBtn from "~/components/projectList/createNewProjectBtn";
+import Extras from "~/components/project/spreadsheet/components/extras";
+import SponsorMini from "~/components/sponsorMini";
 
 export default {
-  name: 'List',
+  name: "List",
   components: { SponsorMini, Extras, CreateNewProjectBtn },
   mixins: [colors],
   data: () => ({
     projectList: null,
     activePage: null,
-    navDrawerOptions: [{
-      title: 'My NocoDB',
-      icon: 'mdi-folder-outline'
-    }, {
-      title: 'Shared With Me',
-      icon: 'mdi-account-group'
-    }, {
-      title: 'Recent',
-      icon: 'mdi-clock-outline'
-    }, {
-      title: 'Starred',
-      icon: 'mdi-star'
-    }]
+    navDrawerOptions: [
+      {
+        title: "My NocoDB",
+        icon: "mdi-folder-outline",
+      },
+      {
+        title: "Shared With Me",
+        icon: "mdi-account-group",
+      },
+      {
+        title: "Recent",
+        icon: "mdi-clock-outline",
+      },
+      {
+        title: "Starred",
+        icon: "mdi-star",
+      },
+    ],
   }),
   mounted() {
-    this.loadProjectList()
+    this.loadProjectList();
   },
   methods: {
     async loadProjectList() {
-      const { list, pageInfo } = await this.$api.project.list()
-      this.projectList = list
+      const { list, pageInfo } = await this.$api.project.list();
+      this.projectList = list;
     },
     async openProject(project) {
       await this.$router.push({
-        path: `/nc/${project.id}`
-      })
-      this.$tele.emit(`project:open:${this.projects.length}`)
-    }
-  }
-}
+        path: `/nc/${project.id}`,
+      });
+      this.$e("a:project:open", { count: this.projects.length });
+    },
+  },
+};
 </script>
 
 <style scoped>
@@ -193,20 +218,22 @@ export default {
   position: relative;
 }
 
-.nc-project-option-menu-icon,.nc-project-star-icon {
+.nc-project-option-menu-icon,
+.nc-project-star-icon {
   position: absolute;
   opacity: 0;
-  transition: .3s opacity;
+  transition: 0.3s opacity;
 }
-.nc-project-star-icon{
-  top:8px;
+.nc-project-star-icon {
+  top: 8px;
   right: 10px;
 }
-.nc-project-option-menu-icon{
+.nc-project-option-menu-icon {
   bottom: 5px;
   right: 5px;
 }
-.nc-project-thumbnail:hover .nc-project-option-menu-icon,.nc-project-thumbnail:hover .nc-project-star-icon{
+.nc-project-thumbnail:hover .nc-project-option-menu-icon,
+.nc-project-thumbnail:hover .nc-project-star-icon {
   opacity: 1;
 }
 .nc-project-title {
@@ -225,5 +252,4 @@ export default {
 .nc-project-thumbnail:hover {
   background-image: linear-gradient(#0002, #0002);
 }
-
 </style>
diff --git a/packages/nc-gui/pages/user/authentication/signin.vue b/packages/nc-gui/pages/user/authentication/signin.vue
index 9dc6df2f61..86ff7eaf9b 100644
--- a/packages/nc-gui/pages/user/authentication/signin.vue
+++ b/packages/nc-gui/pages/user/authentication/signin.vue
@@ -79,7 +79,6 @@
                 <!--                </v-btn>-->
 
                 <v-btn
-                  v-t="['login:sign-in']"
                   v-ge="['Sign In', '']"
                   color="primary"
                   large
@@ -370,6 +369,7 @@ export default {
       } else {
         this.$router.push('/projects')
       }
+      this.$e('a:auth:sign-in')
     },
 
     MtdOnSigninGoogle(e) {
diff --git a/packages/nc-gui/pages/user/authentication/signup/index.vue b/packages/nc-gui/pages/user/authentication/signup/index.vue
index 6a166aa2b1..8bc4fb49d2 100644
--- a/packages/nc-gui/pages/user/authentication/signup/index.vue
+++ b/packages/nc-gui/pages/user/authentication/signup/index.vue
@@ -68,7 +68,6 @@
                 <!--                </vue-recaptcha>-->
 
                 <v-btn
-                  v-t="['login:sign-up']"
                   v-ge="['Sign Up ','']"
                   color="primary"
                   class="btn--large"
@@ -379,6 +378,7 @@ export default {
         this.$router.push('/projects?toast')
       }
       this.signUpButtonLoading = false
+      this.$e('a:auth:sign-up')
     },
 
     MtdOnReset() {
diff --git a/packages/nc-gui/plugins/tele.js b/packages/nc-gui/plugins/tele.js
index 1d2088b26d..6fa5bd8451 100644
--- a/packages/nc-gui/plugins/tele.js
+++ b/packages/nc-gui/plugins/tele.js
@@ -45,6 +45,7 @@ export default function({
 
   const tele = {
     emit(evt, data) {
+      // debugger
       if (socket) {
         socket.emit('event', {
           event: evt,
@@ -56,6 +57,7 @@ export default function({
   }
 
   inject('tele', tele)
+  inject('e', tele.emit)
 
   function getListener(binding) {
     return function(e) {
@@ -76,7 +78,11 @@ export default function({
   Vue.directive('t', {
     bind(el, binding, vnode) {
       if (vnode.componentInstance) {
-        vnode.componentInstance.$on('click', getListener(binding))
+        if (vnode.componentInstance.$el) {
+          vnode.componentInstance.$el.addEventListener('click', getListener(binding))
+        } else {
+          vnode.componentInstance.$on('click', getListener(binding))
+        }
       } else {
         el.addEventListener('click', getListener(binding))
       }