From c96e1edd30b4583436f99bc53113e43609797165 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 17:02:51 +0800
Subject: [PATCH 001/106] fix(gui-v2): resize header option dropdown

---
 packages/nc-gui-v2/components/api-client/Headers.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/api-client/Headers.vue b/packages/nc-gui-v2/components/api-client/Headers.vue
index e465ffcdfc..7d5685275b 100644
--- a/packages/nc-gui-v2/components/api-client/Headers.vue
+++ b/packages/nc-gui-v2/components/api-client/Headers.vue
@@ -85,7 +85,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               <a-checkbox v-model:checked="headerRow.enabled" />
             </a-form-item>
           </td>
-          <td class="px-2">
+          <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-select v-model:value="headerRow.name" size="large" placeholder="Key">
                 <a-select-option v-for="(header, i) in headerList" :key="i" :value="header">
@@ -94,7 +94,7 @@ const deleteHeaderRow = (idx: number) => vModel.value.splice(idx, 1)
               </a-select>
             </a-form-item>
           </td>
-          <td class="px-2">
+          <td class="px-2 w-min-[400px]">
             <a-form-item>
               <a-input v-model:value="headerRow.value" size="large" placeholder="Value" />
             </a-form-item>

From bab571e2765fe987ed0f498d1fe6a0a62443c230 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 17:11:37 +0800
Subject: [PATCH 002/106] fix(gui-v2): add scrollbar for listing

---
 packages/nc-gui-v2/components/webhook/List.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index c05cfdaa50..42e07b55e3 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -58,7 +58,11 @@ onMounted(() => {
     </div>
     <a-divider />
     <div v-if="hooks.length">
-      <a-list item-layout="horizontal" :data-source="hooks" class="cursor-pointer pl-5 pr-5 pt-2 pb-2">
+      <a-list
+        item-layout="horizontal"
+        :data-source="hooks"
+        class="cursor-pointer max-h-[75vh] overflow-y-auto scrollbar-thin-primary"
+      >
         <template #renderItem="{ item, index }">
           <a-list-item class="pa-2" @click="emit('edit', item)">
             <a-list-item-meta>

From 6166d0f990a6c6c29de4c6dea3d44c8d011f5c91 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 17:11:48 +0800
Subject: [PATCH 003/106] fix(gui-v2): we are hiring overlap issue

---
 packages/nc-gui-v2/components/webhook/Drawer.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Drawer.vue b/packages/nc-gui-v2/components/webhook/Drawer.vue
index 45fdd7d580..ff55fe5b2f 100644
--- a/packages/nc-gui-v2/components/webhook/Drawer.vue
+++ b/packages/nc-gui-v2/components/webhook/Drawer.vue
@@ -31,8 +31,10 @@ async function editHook(hook: Record<string, any>) {
     :body-style="{ background: 'rgba(67, 81, 232, 0.05)', padding: '50px' }"
     @keydown.esc="vModel = false"
   >
-    <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
-    <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+    <div>
+      <WebhookEditor v-if="editOrAdd" ref="webhookEditorRef" @back-to-list="editOrAdd = false" />
+      <WebhookList v-else @edit="editHook" @add="editOrAdd = true" />
+    </div>
     <div class="self-center flex flex-column flex-wrap gap-4 items-center mt-4 md:mx-8 md:justify-between justify-center">
       <a-button v-t="['e:hiring']" href="https://angel.co/company/nocodb" target="_blank" size="large">
         🚀 We are Hiring! 🚀

From 87d02a49fb0b569bfd7b960ce1bbbad60360aa3f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 17:46:58 +0800
Subject: [PATCH 004/106] feat(gui-v2): add vue-github-button

---
 .../components/dashboard/GithubStarButton.vue |  9 +++++++
 .../components/dashboard/TreeView.vue         |  7 +++++
 packages/nc-gui-v2/package-lock.json          | 27 +++++++++++++++++++
 packages/nc-gui-v2/package.json               |  1 +
 4 files changed, 44 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/dashboard/GithubStarButton.vue

diff --git a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
new file mode 100644
index 0000000000..c154eb1618
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import GithubButton from 'vue-github-button'
+</script>
+
+<template>
+  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" :data-show-count="true" data-size="large"
+    >Star</GithubButton
+  >
+</template>
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 1056663fb7..3eed1cd492 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -9,6 +9,7 @@ import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 import MdiMenuIcon from '~icons/mdi/dots-vertical'
 import MdiDrag from '~icons/mdi/drag-vertical'
+import GithubStarButton from '~/components/dashboard/GithubStarButton.vue'
 
 const { addTab } = useTabs()
 
@@ -233,6 +234,12 @@ const activeTable = computed(() => {
       </template>
     </a-dropdown>
 
+    <a-divider class="mt-0 mb-2" />
+
+    <div class="items-center flex justify-center mb-1">
+      <GithubStarButton />
+    </div>
+
     <DlgTableCreate v-if="tableCreateDlg" v-model="tableCreateDlg" />
     <DlgTableRename v-if="renameTableMeta" v-model="renameTableDlg" :table-meta="renameTableMeta" />
   </div>
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 39f21c9386..d3a429e9e7 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -23,6 +23,7 @@
         "url": "^0.11.0",
         "util": "^0.12.4",
         "vue-dompurify-html": "^3.0.0",
+        "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.1.10",
         "vuedraggable": "^4.1.0",
         "vuetify": "^3.0.0-alpha.13",
@@ -7596,6 +7597,11 @@
         "git-up": "^4.0.0"
       }
     },
+    "node_modules/github-buttons": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.0.tgz",
+      "integrity": "sha512-N5bk01s1WgK1FVtoeSUVkRkJpkaSu8yHMPcjye+PTa0jsRjMRNrYqVLgpUf2RA5Kvec05DfHYAT6/68fwkdqPw=="
+    },
     "node_modules/github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -14596,6 +14602,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/vue-github-button": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
+      "integrity": "sha512-O2Kv5HxRMn1qqgt2sSy8N7y2C6WGOeICzgGj6y+JFcnLjorTTzNR8vY5abiPOYDiW03WZ/9hUIn7Gm9CG9pIuA==",
+      "dependencies": {
+        "github-buttons": "^2.21.1"
+      }
+    },
     "node_modules/vue-i18n": {
       "version": "9.1.10",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
@@ -20865,6 +20879,11 @@
         "git-up": "^4.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.22.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.22.0.tgz",
+      "integrity": "sha512-N5bk01s1WgK1FVtoeSUVkRkJpkaSu8yHMPcjye+PTa0jsRjMRNrYqVLgpUf2RA5Kvec05DfHYAT6/68fwkdqPw=="
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -26088,6 +26107,14 @@
         }
       }
     },
+    "vue-github-button": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/vue-github-button/-/vue-github-button-3.0.3.tgz",
+      "integrity": "sha512-O2Kv5HxRMn1qqgt2sSy8N7y2C6WGOeICzgGj6y+JFcnLjorTTzNR8vY5abiPOYDiW03WZ/9hUIn7Gm9CG9pIuA==",
+      "requires": {
+        "github-buttons": "^2.21.1"
+      }
+    },
     "vue-i18n": {
       "version": "9.1.10",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index efa84dabdc..3e22e01819 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -29,6 +29,7 @@
     "url": "^0.11.0",
     "util": "^0.12.4",
     "vue-dompurify-html": "^3.0.0",
+    "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.1.10",
     "vuedraggable": "^4.1.0",
     "vuetify": "^3.0.0-alpha.13",

From b5fc45e7553c08006a791ec34e39812114c59009 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 18:04:15 +0800
Subject: [PATCH 005/106] feat(gui-v2): share button on right top in navbar

---
 packages/nc-gui-v2/layouts/base.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index a99c63a5cf..70c15dead4 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -8,6 +8,10 @@ const route = useRoute()
 
 const email = computed(() => user.value?.email ?? '---')
 
+const { isUIAllowed } = useUIPermission()
+
+const showUserModal = $ref(false)
+
 const logout = () => {
   signOut()
   navigateTo('/signin')
@@ -41,6 +45,22 @@ const logout = () => {
 
           <div class="flex-1" />
 
+          <div class="flex items-center mr-4">
+            <a-button
+              v-if="isUIAllowed('newUser')"
+              size="middle"
+              type="primary"
+              class="!bg-white !text-primary rounded"
+              @click="showUserModal = true"
+            >
+              <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+                <mdi-account-supervisor-outline class="mr-1" />
+                <div>{{ $t('activity.share') }}</div>
+              </div>
+            </a-button>
+            <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
+          </div>
+
           <a-tooltip placement="left">
             <template #title> Switch language </template>
 

From 1023854ac4ea34ff349d59c99cea1a2128173a0d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 18:35:49 +0800
Subject: [PATCH 006/106] feat(gui-v2): add sponsors

---
 .../nc-gui-v2/components/general/Sponsors.vue |  47 +++--
 packages/nc-gui-v2/pages/index/index.vue      | 193 +++++++++---------
 2 files changed, 125 insertions(+), 115 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index a1e6378b9a..4452dff71f 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -1,37 +1,36 @@
 <script lang="ts" setup>
-import MdiHeartsCard from '~icons/mdi/cards-heart'
-
 interface Props {
   nav?: boolean
-  img?: boolean
 }
 
-const { nav = false, img = true } = defineProps<Props>()
+const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <v-card :rounded="0" class="dark:bg-gray-900" href="https://github.com/sponsors/nocodb" target="_blank">
-    <v-img v-if="img" src="/ants-leaf-cutter.jpeg" :cover="true" :aspect-ratio="1" :height="nav ? 80 : ''" />
+  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg" href="https://github.com/sponsors/nocodb" target="_blank">
+    <template #cover>
+      <img class="max-h-[180px]" alt="cover" src="/ants-leaf-cutter.jpeg" />
+    </template>
 
-    <v-card-title v-if="!nav" class="pb-2">
-      {{ $t('msg.info.sponsor.header') }}
-    </v-card-title>
+    <a-card-meta>
+      <template #title>
+        <span v-if="!nav" class="text-xl pb-4">
+          {{ $t('msg.info.sponsor.header') }}
+        </span>
+      </template>
+    </a-card-meta>
 
-    <v-card-text v-if="!nav" class="pb-0">
+    <div v-if="!nav" class="py-5 text-sm">
       {{ $t('msg.info.sponsor.message') }}
-    </v-card-text>
+    </div>
 
-    <v-card-actions class="justify-center">
-      <v-btn color="primary" class="dark:(!text-white)">
-        <MdiHeartsCard class="text-red-500 mr-2" />
-        {{ $t('activity.sponsorUs') }}
-      </v-btn>
-    </v-card-actions>
-  </v-card>
+    <div class="flex justify-center">
+      <a-button class="!shadow" size="large">
+        <div class="flex items-center">
+          <mdi-cards-heart class="text-red-500 mr-2" />
+          {{ $t('activity.sponsorUs') }}
+        </div>
+      </a-button>
+    </div>
+  </a-card>
 </template>
-
-<style>
-a img {
-  margin: 0 !important;
-}
-</style>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 75bc87d53a..5a1d4c36e4 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -58,97 +58,108 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
-      <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
-        <!-- My Projects -->
-        <b>{{ $t('title.myProject') }}</b>
-
-        <MdiRefresh
-          v-t="['a:project:refresh']"
-          class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
-          @click="loadProjects"
-        ></MdiRefresh>
-      </h1>
-
-      <div class="flex mb-6">
-        <a-input-search
-          v-model:value="filterQuery"
-          class="max-w-[200px] nc-project-page-search"
-          :placeholder="$t('activity.searchProject')"
-        ></a-input-search>
-        <div class="flex-grow"></div>
-
-        <a-dropdown @click.stop>
-          <a-button class="nc-new-project-menu !shadow">
-            <div class="flex align-center">
-              {{ $t('title.newProj') }}
-              <MdiMenuDown class="menu-icon" />
-            </div>
-          </a-button>
-
-          <template #overlay>
-            <a-menu>
-              <div
-                v-t="['c:project:create:xcdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
-                @click="navigateTo('/project/create')"
-              >
-                <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
-                <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
-              </div>
-              <div
-                v-t="['c:project:create:extdb']"
-                class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
-                @click="navigateTo('/project/create-external')"
-              >
-                <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
-                <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
-              </div>
-            </a-menu>
-          </template>
-        </a-dropdown>
-      </div>
-
-      <div v-if="isLoading">
-        <a-skeleton />
-      </div>
-
-      <a-table
-        v-else
-        :custom-row="
-          (record) => ({
-            onClick: () => {
-              $e('a:project:open')
-              navigateTo(`/nc/${record.id}`)
-            },
-          })
-        "
-        :data-source="filteredProjects"
-        :pagination="{ position: ['bottomCenter'] }"
-      >
-        <!--        Title -->
-        <a-table-column key="title" :title="$t('general.title')" data-index="title">
-          <template #default="{ text }">
-            <div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row" :title="text">
-              {{ text }}
-            </div>
-          </template>
-        </a-table-column>
-        <!--        Actions -->
-        <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
-          <template #default="{ text, record }">
-            <div class="flex align-center">
-              <MdiEditOutline
-                v-t="['c:project:edit:rename']"
-                class="nc-action-btn"
-                @click.stop="navigateTo(`/project/${text}`)"
-              />
-              <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
-            </div>
-          </template>
-        </a-table-column>
-      </a-table>
-    </a-card>
+    <a-row>
+      <a-col :span="8"></a-col>
+      <a-col :span="8" class="!bg-red">
+        <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
+          <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
+            <!-- My Projects -->
+            <b>{{ $t('title.myProject') }}</b>
+
+            <MdiRefresh
+              v-t="['a:project:refresh']"
+              class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
+              @click="loadProjects"
+            ></MdiRefresh>
+          </h1>
+
+          <div class="flex mb-6">
+            <a-input-search
+              v-model:value="filterQuery"
+              class="max-w-[200px] nc-project-page-search"
+              :placeholder="$t('activity.searchProject')"
+            ></a-input-search>
+            <div class="flex-grow"></div>
+
+            <a-dropdown @click.stop>
+              <a-button class="nc-new-project-menu !shadow">
+                <div class="flex align-center">
+                  {{ $t('title.newProj') }}
+                  <MdiMenuDown class="menu-icon" />
+                </div>
+              </a-button>
+
+              <template #overlay>
+                <a-menu>
+                  <div
+                    v-t="['c:project:create:xcdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-xc-db-project"
+                    @click="navigateTo('/project/create')"
+                  >
+                    <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+                    <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
+                  </div>
+                  <div
+                    v-t="['c:project:create:extdb']"
+                    class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
+                    @click="navigateTo('/project/create-external')"
+                  >
+                    <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+                    <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
+                  </div>
+                </a-menu>
+              </template>
+            </a-dropdown>
+          </div>
+
+          <div v-if="isLoading">
+            <a-skeleton />
+          </div>
+
+          <a-table
+            v-else
+            :custom-row="
+              (record) => ({
+                onClick: () => {
+                  $e('a:project:open')
+                  navigateTo(`/nc/${record.id}`)
+                },
+              })
+            "
+            :data-source="filteredProjects"
+            :pagination="{ position: ['bottomCenter'] }"
+          >
+            <!-- Title -->
+            <a-table-column key="title" :title="$t('general.title')" data-index="title">
+              <template #default="{ text }">
+                <div
+                  class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap nc-project-row"
+                  :title="text"
+                >
+                  {{ text }}
+                </div>
+              </template>
+            </a-table-column>
+            <!-- Actions -->
+            <a-table-column key="id" :title="$t('labels.actions')" data-index="id">
+              <template #default="{ text, record }">
+                <div class="flex align-center">
+                  <MdiEditOutline
+                    v-t="['c:project:edit:rename']"
+                    class="nc-action-btn"
+                    @click.stop="navigateTo(`/project/${text}`)"
+                  />
+                  <MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
+                </div>
+              </template>
+            </a-table-column>
+          </a-table>
+        </a-card>
+      </a-col>
+      <a-col :span="8" class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start">
+        <GeneralSponsors />
+      </a-col>
+    </a-row>
   </NuxtLayout>
 </template>
 

From 9140cdccbc648fd16a945b7b203278370c4ab670 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:25:08 +0800
Subject: [PATCH 007/106] feat(gui-v2): add social card

---
 .../components/general/SocialCard.vue         | 73 +++++++++++++++++++
 packages/nc-gui-v2/pages/index/index.vue      |  9 ++-
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/SocialCard.vue

diff --git a/packages/nc-gui-v2/components/general/SocialCard.vue b/packages/nc-gui-v2/components/general/SocialCard.vue
new file mode 100644
index 0000000000..4b2e51ad51
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { enumColor as colors } from '#imports'
+
+const { lang: currentLang } = useGlobal()
+
+const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+</script>
+
+<template>
+  <a-list class="w-[300px] pa-3 elevation-4 rounded-xl mr-10" dense>
+    <a-list-item class="cursor-pointer">
+      <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-github class="mx-3 text-lg" />
+          <div v-if="isRtlLang">
+            <!-- us on Github -->
+            {{ $t('labels.community.starUs2') }}
+            <!-- Star -->
+            {{ $t('labels.community.starUs1') }}
+            <mdi-star-outline />
+          </div>
+          <div v-else class="flex items-center">
+            <!-- Star -->
+            {{ $t('labels.community.starUs1') }}
+            <mdi-star-outline class="mx-1" />
+            <!-- us on Github -->
+            {{ $t('labels.community.starUs2') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+          <!-- Book a Free DEMO -->
+          <div>
+            {{ $t('labels.community.bookDemo') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+          <!-- Get your questions answered -->
+          <div>
+            {{ $t('labels.community.getAnswered') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+          <!-- Follow NocoDB -->
+          <div>
+            {{ $t('labels.community.followNocodb') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item v-t="['e:hiring']">
+      <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+        <div class="flex items-center text-sm">
+          <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+  </a-list>
+</template>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 5a1d4c36e4..a95a9fbafa 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -156,8 +156,13 @@ onMounted(() => {
           </a-table>
         </a-card>
       </a-col>
-      <a-col :span="8" class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start">
-        <GeneralSponsors />
+      <a-col :span="8" class="">
+        <div class="justify-end flex">
+          <GeneralSponsors />
+        </div>
+        <div class="justify-end flex">
+          <GeneralSocialCard />
+        </div>
       </a-col>
     </a-row>
   </NuxtLayout>

From 2f2eff4d788c020462bd2c7c630ed9a76c62ebe1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:25:19 +0800
Subject: [PATCH 008/106] fix(gui-v2): sponsors

---
 .../nc-gui-v2/components/general/Sponsors.vue    | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index 4452dff71f..ccc2c7b5b8 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -7,7 +7,7 @@ const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg" href="https://github.com/sponsors/nocodb" target="_blank">
+  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg">
     <template #cover>
       <img class="max-h-[180px]" alt="cover" src="/ants-leaf-cutter.jpeg" />
     </template>
@@ -25,12 +25,14 @@ const { nav = false } = defineProps<Props>()
     </div>
 
     <div class="flex justify-center">
-      <a-button class="!shadow" size="large">
-        <div class="flex items-center">
-          <mdi-cards-heart class="text-red-500 mr-2" />
-          {{ $t('activity.sponsorUs') }}
-        </div>
-      </a-button>
+      <nuxt-link href="https://github.com/sponsors/nocodb" target="_blank">
+        <a-button class="!shadow" size="large">
+          <div class="flex items-center">
+            <mdi-cards-heart class="text-red-500 mr-2" />
+            {{ $t('activity.sponsorUs') }}
+          </div>
+        </a-button>
+      </nuxt-link>
     </div>
   </a-card>
 </template>

From 73f780d298d0aed824531882c84b5d92f35c0306 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:25:30 +0800
Subject: [PATCH 009/106] chore(gui-v2): add icons

---
 packages/nc-gui-v2/components.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 8f4944d7d0..ed4036cf39 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -86,12 +86,14 @@ declare module '@vue/runtime-core' {
     MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -118,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -143,6 +146,7 @@ declare module '@vue/runtime-core' {
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -150,6 +154,7 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     MdiZomm: typeof import('~icons/mdi/zomm')['default']

From 46224f0f4e43bdd140d350addfdce1a41f76fb99 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:58:15 +0800
Subject: [PATCH 010/106] feat(gui-v2): export cache

---
 .../smartsheet/sidebar/toolbar/index.vue      | 57 ++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 10888ad6f3..a5061e11c0 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,14 +1,69 @@
 <script lang="ts" setup>
+import FileSaver from 'file-saver'
+import { message } from 'ant-design-vue'
 import AddRow from './AddRow.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
 
 const { isUIAllowed } = useUIPermission()
+
+const { api } = useApi()
+
+const debug = $ref(false)
+
+const clickCount = $ref(0)
+
+async function exportCache() {
+  try {
+    const data = await api.utils.cacheGet()
+    if (!data) {
+      message.info('Cache is empty')
+      return
+    }
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'text/plain;charset=utf-8',
+    })
+    FileSaver.saveAs(blob, 'cache_exported.json')
+    message.info('Exported Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+
+function deleteCache() {}
 </script>
 
 <template>
-  <div class="flex gap-2">
+  <div
+    class="flex gap-2"
+    @click="
+      () => {
+        clickCount = clickCount + 1
+        debug = clickCount >= 4
+      }
+    "
+  >
     <slot name="start" />
+    <div class="pt-2">
+      <!-- Export Cache -->
+      <a-tooltip v-if="debug">
+        <template #title>
+          <span class="caption"> Export Cache </span>
+        </template>
+        <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
+      </a-tooltip>
+
+      <!-- Delete Cache -->
+      <a-tooltip v-if="debug">
+        <template #title>
+          <span class="caption"> Delete Cache </span>
+        </template>
+        <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
+      </a-tooltip>
+
+      <!-- TODO: -->
+      <!-- <debug-metas v-if="debug" class="mr-3" /> -->
+    </div>
 
     <LockMenu v-if="isUIAllowed('view-type')" />
 

From f975c4bf9213d6258c77117e0ede422cbb5aad49 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:59:11 +0800
Subject: [PATCH 011/106] feat(gui-v2): add deleteCache

---
 .../components/smartsheet/sidebar/toolbar/index.vue      | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index a5061e11c0..39c419131f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -30,7 +30,14 @@ async function exportCache() {
   }
 }
 
-function deleteCache() {}
+async function deleteCache() {
+  try {
+    await api.utils.cacheDelete()
+    message.info('Deleted Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>

From b420884183b9c74602f383b37806781e9540f6df Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:59:22 +0800
Subject: [PATCH 012/106] feat(gui-v2): add MdiDelete & MdiExport

---
 packages/nc-gui-v2/components.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index a70885e604..58374b2827 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -102,6 +102,7 @@ declare module '@vue/runtime-core' {
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
@@ -113,6 +114,7 @@ declare module '@vue/runtime-core' {
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']

From c2674c18c1acdec5fd7f7c0937f08b32b5f38e7a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 14 Aug 2022 00:12:38 +0800
Subject: [PATCH 013/106] fix(gui-v2): set default value for the webhook
 creation case

---
 packages/nc-gui-v2/components/webhook/Test.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Test.vue b/packages/nc-gui-v2/components/webhook/Test.vue
index 1a45f1f806..0a8e8551bf 100644
--- a/packages/nc-gui-v2/components/webhook/Test.vue
+++ b/packages/nc-gui-v2/components/webhook/Test.vue
@@ -28,7 +28,7 @@ watch(
 
 async function loadSampleData() {
   sampleData.value = {
-    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation),
+    data: await $api.dbTableWebhook.samplePayloadGet(meta?.value?.id as string, hook?.operation || 'insert'),
   }
 }
 

From ca1b670c0f11fbaf1c2babedb14f6e6facf1cadf Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 14 Aug 2022 17:41:53 +0800
Subject: [PATCH 014/106] feat(gui-v2): split into components to make toolbar
 clean

---
 .../sidebar/toolbar/DeleteCache.vue           | 22 +++++++
 .../sidebar/toolbar/ExportCache.vue           | 33 +++++++++++
 .../smartsheet/sidebar/toolbar/index.vue      | 59 ++++---------------
 3 files changed, 67 insertions(+), 47 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
 create mode 100644 packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
new file mode 100644
index 0000000000..2eeabc259e
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+const { api } = useApi()
+
+async function deleteCache() {
+  try {
+    await api.utils.cacheDelete()
+    message.info('Deleted Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <a-tooltip>
+    <template #title>
+      <span> Delete Cache </span>
+    </template>
+    <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
new file mode 100644
index 0000000000..7cbaba15d2
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import FileSaver from 'file-saver'
+
+const { api } = useApi()
+
+async function exportCache() {
+  try {
+    const data = await api.utils.cacheGet()
+    if (!data) {
+      message.info('Cache is empty')
+      return
+    }
+    const blob = new Blob([JSON.stringify(data)], {
+      type: 'text/plain;charset=utf-8',
+    })
+    FileSaver.saveAs(blob, 'cache_exported.json')
+    message.info('Exported Cache Successfully')
+  } catch (e: any) {
+    message.error(e.message)
+  }
+}
+</script>
+
+<template>
+  <!-- Export Cache -->
+  <a-tooltip>
+    <template #title>
+      <span> Export Cache </span>
+    </template>
+    <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 39c419131f..20a0980af5 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -1,43 +1,15 @@
 <script lang="ts" setup>
-import FileSaver from 'file-saver'
-import { message } from 'ant-design-vue'
 import AddRow from './AddRow.vue'
 import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
+import ExportCache from './ExportCache.vue'
+import DeleteCache from './DeleteCache.vue'
 
 const { isUIAllowed } = useUIPermission()
 
-const { api } = useApi()
-
 const debug = $ref(false)
 
 const clickCount = $ref(0)
-
-async function exportCache() {
-  try {
-    const data = await api.utils.cacheGet()
-    if (!data) {
-      message.info('Cache is empty')
-      return
-    }
-    const blob = new Blob([JSON.stringify(data)], {
-      type: 'text/plain;charset=utf-8',
-    })
-    FileSaver.saveAs(blob, 'cache_exported.json')
-    message.info('Exported Cache Successfully')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
-
-async function deleteCache() {
-  try {
-    await api.utils.cacheDelete()
-    message.info('Deleted Cache Successfully')
-  } catch (e: any) {
-    message.error(e.message)
-  }
-}
 </script>
 
 <template>
@@ -51,26 +23,19 @@ async function deleteCache() {
     "
   >
     <slot name="start" />
-    <div class="pt-2">
-      <!-- Export Cache -->
-      <a-tooltip v-if="debug">
-        <template #title>
-          <span class="caption"> Export Cache </span>
-        </template>
-        <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
-      </a-tooltip>
-
-      <!-- Delete Cache -->
-      <a-tooltip v-if="debug">
-        <template #title>
-          <span class="caption"> Delete Cache </span>
-        </template>
-        <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
-      </a-tooltip>
+
+    <template v-if="debug">
+      <ExportCache />
+
+      <div class="dot" />
+
+      <DeleteCache />
+
+      <div class="dot" />
 
       <!-- TODO: -->
       <!-- <debug-metas v-if="debug" class="mr-3" /> -->
-    </div>
+    </template>
 
     <LockMenu v-if="isUIAllowed('view-type')" />
 

From 62363f04b877604721c13ef037cbe801533011ed Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sun, 14 Aug 2022 17:43:42 +0800
Subject: [PATCH 015/106] chore(gui-v2): remove unnecessary css classes

---
 packages/nc-gui-v2/layouts/base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index e12fa1f33a..081d2040ae 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -55,7 +55,7 @@ const logout = () => {
               class="!bg-white !text-primary rounded"
               @click="showUserModal = true"
             >
-              <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
+              <div class="flex items-center space-x-1">
                 <mdi-account-supervisor-outline class="mr-1" />
                 <div>{{ $t('activity.share') }}</div>
               </div>

From 8059826082301dff5afa1309b137787fd10e22aa Mon Sep 17 00:00:00 2001
From: Naveen MR <oof1lab@gmail.com>
Date: Sun, 14 Aug 2022 10:43:49 +0100
Subject: [PATCH 016/106] fix : UI improvements

---
 packages/nc-gui-v2/components.d.ts                            | 1 +
 packages/nc-gui-v2/components/smartsheet/Grid.vue             | 4 ++--
 packages/nc-gui-v2/components/smartsheet/Pagination.vue       | 2 +-
 .../nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue | 4 ++--
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index a70885e604..aa6f02d413 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -136,6 +136,7 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusIconOutline: typeof import('~icons/mdi/plus-icon-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index ca55ff15ce..c7d8d54c1a 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -430,8 +430,8 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 class="text-left pointer nc-grid-add-new-cell"
                 @click="addEmptyRow()"
               >
-                <div class="px-2 w-full flex items-center">
-                  <MdiPlus class="text-pint-500 text-xs" />
+                <div class="px-2 w-full flex items-center text-gray-500">
+                  <MdiPlus class="text-pint-500 text-xs ml-2" />
 
                   <span class="ml-1">
                     {{ $t('activity.addRow') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 3c711d0e15..cc4d7af99e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -19,7 +19,7 @@ const page = computed({
 
 <template>
   <div class="flex items-center">
-    <span v-if="count !== null && count !== Infinity" class="caption ml-2 text-gray-500">
+    <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500">
       {{ count }} record{{ count !== 1 ? 's' : '' }}
     </span>
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index f659ea0410..0e8ddc6124 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -3,7 +3,7 @@ import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
 import { TabMetaInj } from '~/context'
 import { useTabs, useUIPermission } from '#imports'
-import MdiPlusIcon from '~icons/mdi/plus'
+import MdiPlusBoxOutline from '~icons/mdi/plus-box-outline'
 import MdiTableIcon from '~icons/mdi/table'
 import MdiCsvIcon from '~icons/mdi/file-document-outline'
 import MdiExcelIcon from '~icons/mdi/file-excel'
@@ -61,7 +61,7 @@ const icon = (tab: TabItem) => {
               <a-sub-menu key="addORImport">
                 <template #title>
                   <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">
-                    <MdiPlusIcon />
+                    <MdiPlusBoxOutline/>
                     Add / Import
                   </div>
                 </template>

From 960d4bae1f30c2876a25af1f5db7a1a2ac4a4b4c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Sun, 14 Aug 2022 22:15:29 +0530
Subject: [PATCH 017/106] test: formula & pagination CY marker

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui-v2/components/smartsheet-column/FormulaOptions.vue   | 2 +-
 packages/nc-gui-v2/components/smartsheet/Pagination.vue         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index c3c2dda53d..30ff09fa7f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -612,7 +612,7 @@ onMounted(() => {
       <a-textarea
         ref="formulaRef"
         v-model:value="vModel.formula_raw"
-        class="mb-2"
+        class="mb-2 nc-formula-input"
         @keydown.down.prevent="suggestionListDown"
         @keydown.up.prevent="suggestionListUp"
         @keydown.enter.prevent="selectText"
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index cc4d7af99e..c9859a1d5b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -29,7 +29,7 @@ const page = computed({
       v-if="count !== Infinity"
       v-model:current="page"
       size="small"
-      class="!text-xs !m-1"
+      class="!text-xs !m-1 nc-pagination"
       :total="count"
       :page-size="size"
       show-less-items

From 9aa04efe63c15f048b57b9bbd4ad2f516465c772 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 15 Aug 2022 08:07:39 +0530
Subject: [PATCH 018/106] test: CY markers for CRUD view operations

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue  | 6 +++---
 .../nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue     | 1 +
 .../components/smartsheet/sidebar/RenameableMenuItem.vue    | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index e23b8f3b4b..5b92fde368 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -41,7 +41,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         {{ $t('activity.createView') }}
       </h3>
 
-      <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px]" @click="onOpenModal(ViewTypes.GRID)">
+      <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view" @click="onOpenModal(ViewTypes.GRID)">
         <a-tooltip placement="left">
           <template #title>
             {{ $t('msg.info.addView.grid') }}
@@ -59,7 +59,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </a-menu-item>
 
-      <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px]" @click="onOpenModal(ViewTypes.GALLERY)">
+      <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view" @click="onOpenModal(ViewTypes.GALLERY)">
         <a-tooltip placement="left">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
@@ -80,7 +80,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       <a-menu-item
         v-if="!isView"
         key="form"
-        class="group !flex !items-center !my-0 !h-[30px]"
+        class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
         @click="onOpenModal(ViewTypes.FORM)"
       >
         <a-tooltip placement="left">
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
index 89558695ad..1ba2093a0c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuTop.vue
@@ -183,6 +183,7 @@ function onDeleted() {
       :class="[
         isMarked === view.id ? 'bg-gray-200' : '',
         route.params.viewTitle && route.params.viewTitle.includes(view.title) ? 'active' : '',
+        `nc-view-item nc-${view.type}-view-item`,
       ]"
       @change-view="changeView"
       @open-modal="$emit('openModal', $event)"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 8ec7ee7b3d..451372acc7 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -183,7 +183,7 @@ function onStopEdit() {
                 {{ $t('activity.deleteView') }}
               </template>
 
-              <MdiTrashCan class="hidden group-hover:block text-red-500" @click.stop="onDelete" />
+              <MdiTrashCan class="hidden group-hover:block text-red-500 nc-view-delete-icon" @click.stop="onDelete" />
             </a-tooltip>
           </template>
         </div>

From ae48ae2c9c24ce1f77d2c3137b7919b66d859d47 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 11:25:31 +0800
Subject: [PATCH 019/106] fix(gui-v2): remove formulaSuggestionDrawer

---
 .../smartsheet-column/EditOrAdd.vue           | 19 +++----------------
 .../smartsheet-column/FormulaOptions.vue      |  6 ------
 2 files changed, 3 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 78be8575dd..e2cd87a328 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -17,9 +17,11 @@ const { formState, generateNewColumnMeta, addOrUpdate, onAlter, onUidtOrIdTypeCh
 const reloadDataTrigger = inject(ReloadViewDataHookInj)
 
 const advancedOptions = ref(false)
+
 const { getMeta } = useMetas()
 
 const formulaOptionsRef = ref()
+
 const editOrAddRef = ref<HTMLElement>()
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
@@ -74,23 +76,12 @@ onMounted(() => {
     generateNewColumnMeta()
   }
 
-  if (formState.value.uidt === UITypes.Formula) {
-    formulaOptionsRef.value.formulaSuggestionDrawer = true
-  }
-
   // for cases like formula
   if (formState.value && !formState.value.column_name) {
     formState.value.column_name = formState.value?.title
   }
 })
 
-onUnmounted(() => {
-  if (formState.value.uidt === UITypes.Formula) {
-    // close formula drawer
-    formulaOptionsRef.value.formulaSuggestionDrawer = false
-  }
-})
-
 const handleClose = (e: MouseEvent) => {
   if (
     e.target &&
@@ -127,11 +118,7 @@ useEventListener(document, 'click', handleClose)
             </a-select-option>
           </a-select>
         </a-form-item>
-        <SmartsheetColumnFormulaOptions
-          v-if="formState.uidt === UITypes.Formula"
-          ref="formulaOptionsRef"
-          v-model:value="formState"
-        />
+        <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" v-model:value="formState" />
         <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" v-model:value="formState" />
         <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" v-model:value="formState" />
         <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" v-model:value="formState" />
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 30ff09fa7f..bf5e6086d9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -59,8 +59,6 @@ const validators = {
   ],
 }
 
-const formulaSuggestionDrawer = ref(true)
-
 const availableFunctions = formulaList
 
 const availableBinOps = ['+', '-', '*', '/', '>', '<', '==', '<=', '>=', '!=']
@@ -597,10 +595,6 @@ setAdditionalValidations({
   ...validators,
 })
 
-defineExpose({
-  formulaSuggestionDrawer,
-})
-
 onMounted(() => {
   jsep.plugins.register(jsepCurlyHook)
 })

From fb52b7e65ef4f9667e56b057513a4d0fd8f22f2d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 11:40:17 +0800
Subject: [PATCH 020/106] chore(gui-v2): lint

---
 .../nc-gui-v2/components/smartsheet-header/Cell.vue  |  2 --
 .../components/smartsheet-header/VirtualCell.vue     |  3 +--
 .../components/smartsheet/sidebar/MenuBottom.vue     | 12 ++++++++++--
 .../pages/[projectType]/[projectId]/index/index.vue  |  2 +-
 4 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index 8da79dc159..fce8191777 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -6,8 +6,6 @@ const props = defineProps<{ column: ColumnType & { meta: any }; required?: boole
 
 const hideMenu = toRef(props, 'hideMenu')
 
-const meta = inject(MetaInj)
-
 const isForm = inject(IsFormInj, ref(false))
 
 const column = toRef(props, 'column')
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 5c6b54173c..092869ab3a 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { provide, toRef, useMetas } from '#imports'
 
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 5b92fde368..c947baefd1 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -41,7 +41,11 @@ function onOpenModal(type: ViewTypes, title = '') {
         {{ $t('activity.createView') }}
       </h3>
 
-      <a-menu-item key="grid" class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view" @click="onOpenModal(ViewTypes.GRID)">
+      <a-menu-item
+        key="grid"
+        class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
+        @click="onOpenModal(ViewTypes.GRID)"
+      >
         <a-tooltip placement="left">
           <template #title>
             {{ $t('msg.info.addView.grid') }}
@@ -59,7 +63,11 @@ function onOpenModal(type: ViewTypes, title = '') {
         </a-tooltip>
       </a-menu-item>
 
-      <a-menu-item key="gallery" class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view" @click="onOpenModal(ViewTypes.GALLERY)">
+      <a-menu-item
+        key="gallery"
+        class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
+        @click="onOpenModal(ViewTypes.GALLERY)"
+      >
         <a-tooltip placement="left">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 0e8ddc6124..db91aba10d 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -61,7 +61,7 @@ const icon = (tab: TabItem) => {
               <a-sub-menu key="addORImport">
                 <template #title>
                   <div class="text-sm flex items-center gap-2 pt-[8px] pb-3">
-                    <MdiPlusBoxOutline/>
+                    <MdiPlusBoxOutline />
                     Add / Import
                   </div>
                 </template>

From 9af9a3bbb7ce54a79c8e079c9e06156ccf730c13 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 13:55:44 +0800
Subject: [PATCH 021/106] feat(gui-v2): add channel multi select

---
 .../components/webhook/ChannelMultiSelect.vue | 66 +++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue

diff --git a/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
new file mode 100644
index 0000000000..7e84165d06
--- /dev/null
+++ b/packages/nc-gui-v2/components/webhook/ChannelMultiSelect.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { onMounted } from '@vue/runtime-core'
+
+interface Props {
+  modelValue: Record<string, any>[]
+  availableChannelList: Record<string, any>[]
+  placeholder: string
+}
+
+const { availableChannelList, placeholder, ...rest } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const vModel = useVModel(rest, 'modelValue', emit)
+
+// idx of selected channels
+const localChannelValues = $ref<number[]>([])
+
+// availableChannelList with idx enriched
+let availableChannelWithIdxList = $ref<Record<string, any>[]>()
+
+watch(
+  () => localChannelValues,
+  (v) => {
+    const res = []
+    for (const channelIdx of v) {
+      const target = availableChannelWithIdxList.find((availableChannel) => availableChannel.idx === channelIdx)
+      if (target) {
+        // push without target.idx
+        res.push({ webhook_url: target.webhook_url, channel: target.channel })
+      }
+    }
+    vModel.value = res
+  },
+)
+
+onMounted(() => {
+  if (availableChannelList.length) {
+    // enrich idx
+    let idx = 0
+    availableChannelWithIdxList = availableChannelList.map((channel) => ({
+      ...channel,
+      idx: idx++,
+    }))
+
+    // build localChannelValues from modelValue
+    for (const channel of rest.modelValue || []) {
+      const target = availableChannelWithIdxList.find(
+        (availableChannelWithIdx) =>
+          availableChannelWithIdx.webhook_url === channel.webhook_url && availableChannelWithIdx.channel === channel.channel,
+      )
+      if (target) {
+        localChannelValues.push(target.idx)
+      }
+    }
+  }
+})
+</script>
+
+<template>
+  <a-select v-model:value="localChannelValues" mode="multiple" :placeholder="placeholder" max-tag-count="responsive">
+    <a-select-option v-for="channel of availableChannelWithIdxList" :key="channel.idx" :value="channel.idx">{{
+      channel.channel
+    }}</a-select-option>
+  </a-select>
+</template>

From 30d6fcd12083244522c95ecc4e6e58e5ea9b5569 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 13:58:21 +0800
Subject: [PATCH 022/106] fix(gui-v2): use WebhookChannelMultiSelect & fix
 onNotTypeChange logic

---
 .../nc-gui-v2/components/webhook/Editor.vue   | 75 +++++++++----------
 1 file changed, 37 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index c83fea2798..7551e1deb1 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -4,11 +4,6 @@ import { MetaInj } from '~/context'
 import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
 import { inject, reactive, useApi, useNuxtApp } from '#imports'
 
-interface Option {
-  label: string
-  value: string
-}
-
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
 const { $e } = useNuxtApp()
@@ -205,21 +200,27 @@ const validators = computed(() => {
 })
 const { validate, validateInfos } = useForm(hook, validators)
 
-function onNotTypeChange() {
-  hook.notification.payload = {} as any
+function onNotTypeChange(reset = false) {
+  if (reset) {
+    hook.notification.payload = {} as Record<string, any>
+  }
 
   if (hook.notification.type === 'Slack') {
-    slackChannels.value = (apps && apps?.Slack && apps.Slack.parsedInput) || []
+    slackChannels.value = (apps.value && apps.value.Slack && apps.Slack.parsedInput) || []
   }
+
   if (hook.notification.type === 'Microsoft Teams') {
-    teamsChannels.value = (apps && apps['Microsoft Teams'] && apps['Microsoft Teams'].parsedInput) || []
+    teamsChannels.value = (apps.value && apps.value['Microsoft Teams'] && apps.value['Microsoft Teams'].parsedInput) || []
   }
+
   if (hook.notification.type === 'Discord') {
-    discordChannels.value = (apps && apps.Discord && apps.Discord.parsedInput) || []
+    discordChannels.value = (apps.value && apps.value.Discord && apps.value.Discord.parsedInput) || []
   }
+
   if (hook.notification.type === 'Mattermost') {
-    mattermostChannels.value = (apps && apps.Mattermost && apps.Mattermost.parsedInput) || []
+    mattermostChannels.value = (apps.value && apps.value.Mattermost && apps.value.Mattermost.parsedInput) || []
   }
+
   if (hook.notification.type === 'URL') {
     hook.notification.payload.body = '{{ json data }}'
     hook.notification.payload.parameters = [{}]
@@ -228,10 +229,6 @@ function onNotTypeChange() {
   }
 }
 
-function filterOption(input: string, option: Option) {
-  return option.value.toUpperCase().includes(input.toUpperCase())
-}
-
 function setHook(newHook: any) {
   Object.assign(hook, {
     ...newHook,
@@ -301,6 +298,8 @@ async function loadPluginList() {
     if (hook.event && hook.operation) {
       hook.eventOperation = `${hook.event} ${hook.operation}`
     }
+
+    onNotTypeChange()
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -383,8 +382,8 @@ watch(
   },
 )
 
-onMounted(() => {
-  loadPluginList()
+onMounted(async () => {
+  await loadPluginList()
 })
 </script>
 
@@ -439,7 +438,7 @@ onMounted(() => {
               v-model:value="hook.notification.type"
               size="large"
               :placeholder="$t('general.notification')"
-              @change="onNotTypeChange"
+              @change="onNotTypeChange(true)"
             >
               <a-select-option v-for="(notificationOption, i) in notificationList" :key="i" :value="notificationOption.type">
                 <div class="flex items-center">
@@ -505,12 +504,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Slack'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="slackChannels"
+            <WebhookChannelMultiSelect
+              v-if="slackChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="slackChannels"
               placeholder="Select Slack channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -519,12 +518,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Microsoft Teams'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="teamsChannels"
+            <WebhookChannelMultiSelect
+              v-if="teamsChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="teamsChannels"
               placeholder="Select Microsoft Teams channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -533,12 +532,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Discord'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="discordChannels"
+            <WebhookChannelMultiSelect
+              v-if="discordChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="discordChannels"
               placeholder="Select Discord channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>
@@ -547,12 +546,12 @@ onMounted(() => {
       <a-row v-if="hook.notification.type === 'Mattermost'" type="flex">
         <a-col :span="24">
           <a-form-item v-bind="validateInfos['notification.channels']">
-            <a-auto-complete
-              v-model:value="hook.notification.payload.channels"
-              size="large"
-              :options="mattermostChannels"
+            <WebhookChannelMultiSelect
+              v-if="mattermostChannels.length > 0"
+              v-model="hook.notification.payload.channels"
+              :selected-channel-list="hook.notification.payload.channels"
+              :available-channel-list="mattermostChannels"
               placeholder="Select Mattermost channels"
-              :filter-option="filterOption"
             />
           </a-form-item>
         </a-col>

From f0db576a8cc7cc484686870ec833d7484c0cbfbd Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 13:59:18 +0800
Subject: [PATCH 023/106] refactor(gui-v2): combine imports

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 7551e1deb1..1911b2ec60 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg, fieldRequiredValidator } from '~/utils'
-import { inject, reactive, useApi, useNuxtApp } from '#imports'
+import { inject, reactive, useApi, useNuxtApp, extractSdkResponseErrorMsg, fieldRequiredValidator, MetaInj } from '#imports'
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 

From 2cc2d07eac4a73d78b228e87c374173c07d0954c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 15 Aug 2022 12:31:30 +0530
Subject: [PATCH 024/106] refactor: move tooltip to bottom for i18n menu

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/layouts/base.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 081d2040ae..6ca23e21d3 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -63,7 +63,7 @@ const logout = () => {
             <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
           </div>
 
-          <a-tooltip placement="left">
+          <a-tooltip placement="bottom">
             <template #title> Switch language </template>
 
             <div class="flex pr-4 items-center">
@@ -103,7 +103,7 @@ const logout = () => {
         </a-layout-header>
       </Transition>
 
-      <a-tooltip>
+      <a-tooltip placement="bottom">
         <template #title> Switch language </template>
 
         <Transition name="layout">

From f7691e3584fef0788f4eacca525d9d833573893a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:13:23 +0800
Subject: [PATCH 025/106] feat(gui-v2): integrate hook logic in filter

---
 .../smartsheet-toolbar/ColumnFilter.vue       | 17 +++++++---
 .../nc-gui-v2/composables/useViewFilters.ts   | 33 ++++++++++++++-----
 2 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 6b730127ff..d3f413b030 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -9,12 +9,19 @@ import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
 
-const { nested = false, parentId, autoSave = true } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean }>()
+const {
+  nested = false,
+  parentId,
+  autoSave = true,
+  hookId = null,
+} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
 
 const emit = defineEmits(['update:filtersLength'])
 
 const meta = inject(MetaInj)
+
 const activeView = inject(ActiveViewInj)
+
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
@@ -76,7 +83,7 @@ const types = computed(() => {
 watch(
   () => (activeView?.value as any)?.id,
   (n, o) => {
-    if (n !== o) loadFilters()
+    if (n !== o) loadFilters(hookId as string)
   },
   { immediate: true },
 )
@@ -95,11 +102,11 @@ watch(
   },
 )
 
-const applyChanges = async () => {
-  await sync()
+const applyChanges = async (hookId?: string) => {
+  await sync(hookId)
   for (const nestedFilter of nestedFilters?.value || []) {
     if (nestedFilter.parentId) {
-      await nestedFilter.applyChanges(true)
+      await nestedFilter.applyChanges(hookId, true)
     }
   }
 }
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 444e22df2a..5e5d3a976e 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -16,15 +16,23 @@ export function useViewFilters(
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
-  const loadFilters = async () => {
-    if (parentId) {
-      filters.value = await $api.dbTableFilter.childrenRead(parentId)
+  const loadFilters = async (hookId?: string) => {
+    if (hookId) {
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = (await $api.dbTableWebhookFilter.read(hookId as string)) as any
+      }
     } else {
-      filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      if (parentId) {
+        filters.value = await $api.dbTableFilter.childrenRead(parentId)
+      } else {
+        filters.value = await $api.dbTableFilter.read(view?.value?.id as string)
+      }
     }
   }
 
-  const sync = async (_nested = false) => {
+  const sync = async (hookId?: string, _nested = false) => {
     for (const [i, filter] of Object.entries(filters.value)) {
       if (filter.status === 'delete') {
         await $api.dbTableFilter.delete(filter.id as string)
@@ -34,10 +42,17 @@ export function useViewFilters(
           fk_parent_id: parentId,
         })
       } else if (filter.status === 'create') {
-        filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
-          ...filter,
-          fk_parent_id: parentId,
-        })) as any
+        if (hookId) {
+          filters.value[+i] = (await $api.dbTableWebhookFilter.create(hookId, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        } else {
+          filters.value[+i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
+            ...filter,
+            fk_parent_id: parentId,
+          })) as any
+        }
       }
     }
     reloadData?.()

From 12ee6aeae5d8ad17675e5f0e5290c493b3604529 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:13:38 +0800
Subject: [PATCH 026/106] fix(gui-v2): hook filter

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index 1911b2ec60..ca83068c8b 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Form, message } from 'ant-design-vue'
-import { inject, reactive, useApi, useNuxtApp, extractSdkResponseErrorMsg, fieldRequiredValidator, MetaInj } from '#imports'
+import { MetaInj, extractSdkResponseErrorMsg, fieldRequiredValidator, inject, reactive, useApi, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['backToList', 'editOrAdd'])
 
@@ -44,7 +44,7 @@ const discordChannels = ref<Record<string, any>[]>([])
 
 const mattermostChannels = ref<Record<string, any>[]>([])
 
-const filters = ref([])
+const filterRef = ref()
 
 const formInput = ref({
   'Email': [
@@ -339,12 +339,7 @@ async function saveHooks() {
       hook.id = res.id
     }
 
-    // TODO: wait for filter implementation
-    // if ($refs.filter) {
-    //   await $refs.filter.applyChanges(false, {
-    //     hookId: hook.id,
-    //   });
-    // }
+    await filterRef.value.applyChanges(hook.id)
 
     message.success('Webhook details updated successfully')
   } catch (e: any) {
@@ -570,7 +565,7 @@ onMounted(async () => {
         <a-col :span="24">
           <a-card>
             <a-checkbox v-model:checked="hook.condition">On Condition</a-checkbox>
-            <SmartsheetToolbarColumnFilter v-if="hook.condition" />
+            <SmartsheetToolbarColumnFilter v-if="hook.condition" ref="filterRef" :auto-save="false" :hook-id="hook.id" />
           </a-card>
         </a-col>
       </a-row>
@@ -598,7 +593,6 @@ onMounted(async () => {
             ref="webhookTestRef"
             :hook="{
               ...hook,
-              filters,
               notification: {
                 ...hook.notification,
                 payload: hook.notification.payload,

From b71664d08e9f5cbe68c63633b606d8f324964c19 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:31:52 +0800
Subject: [PATCH 027/106] fix(gui-v2): undefined of applyChanges

---
 packages/nc-gui-v2/components/webhook/Editor.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/webhook/Editor.vue b/packages/nc-gui-v2/components/webhook/Editor.vue
index ca83068c8b..e1711acff7 100644
--- a/packages/nc-gui-v2/components/webhook/Editor.vue
+++ b/packages/nc-gui-v2/components/webhook/Editor.vue
@@ -339,7 +339,9 @@ async function saveHooks() {
       hook.id = res.id
     }
 
-    await filterRef.value.applyChanges(hook.id)
+    if (filterRef.value) {
+      await filterRef.value.applyChanges(hook.id)
+    }
 
     message.success('Webhook details updated successfully')
   } catch (e: any) {

From 53e9d0545c216f88b006953408ffef739cad0dd0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:53:02 +0800
Subject: [PATCH 028/106] fix(gui-v2): update default active index

---
 packages/nc-gui-v2/composables/useTabs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 4c3c08d8e4..43f64ad02d 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -53,8 +53,8 @@ export function useTabs() {
       } else if ((route.name as string)?.startsWith('nc-projectId-index-index-auth')) {
         return tabs.value.findIndex((t) => t.type === 'auth')
       }
-
-      return -1
+      // by default, it's showing Team & Auth
+      return 0
     },
     set(index: number) {
       if (index === -1) {

From d8944d7bc4633e5a12a2aeb59f3e71582ba6c918 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:57:15 +0800
Subject: [PATCH 029/106] chore(gui-v2): add missing cursor pointer

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index c7d8d54c1a..5d85cf3ae3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -325,7 +325,12 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
-              <th v-if="isUIAllowed('add-column')" v-t="['c:column:add']" @click.stop="addColumnDropdown = true">
+              <th
+                v-if="isUIAllowed('add-column')"
+                v-t="['c:column:add']"
+                class="cursor-pointer"
+                @click.stop="addColumnDropdown = true"
+              >
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
                   <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlus class="text-sm" />

From 878bdcc79bf92adc9ee3fb28670b9f04ff12a61c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 17:57:42 +0800
Subject: [PATCH 030/106] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index e2cd87a328..4d9a29fa27 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -20,8 +20,6 @@ const advancedOptions = ref(false)
 
 const { getMeta } = useMetas()
 
-const formulaOptionsRef = ref()
-
 const editOrAddRef = ref<HTMLElement>()
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]

From 4b8a197c1c966a8b438254c93d2e4632783ca77d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 18:07:58 +0800
Subject: [PATCH 031/106] feat(gui-v2): add MdiBugOutline

---
 packages/nc-gui-v2/components.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 38c6f5d873..4ff58356f6 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -90,6 +90,7 @@ declare module '@vue/runtime-core' {
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']

From 0207310bebe5ed3e4c5b003febb8d1d502ae94d8 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 18:08:11 +0800
Subject: [PATCH 032/106] chore(gui-v2): remove mx-3

---
 .../components/smartsheet/sidebar/toolbar/DeleteCache.vue       | 2 +-
 .../components/smartsheet/sidebar/toolbar/DeleteTable.vue       | 2 +-
 .../components/smartsheet/sidebar/toolbar/ExportCache.vue       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
index 2eeabc259e..9f0b81fe6b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -17,6 +17,6 @@ async function deleteCache() {
     <template #title>
       <span> Delete Cache </span>
     </template>
-    <mdi-delete class="cursor-pointer mx-3" @click="deleteCache" />
+    <mdi-delete class="cursor-pointer" @click="deleteCache" />
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
index fc82263308..c94301fe70 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteTable.vue
@@ -14,7 +14,7 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
     <template #title> {{ $t('activity.deleteTable') }} </template>
 
     <div class="nc-sidebar-right-item hover:after:bg-red-500 group">
-      <MdiDeleteOutline class="cursor-pointer group-hover:(!text-white)" @click="deleteTable(meta)" />
+      <MdiDeleteOutline class="cursor-pointer" @click="deleteTable(meta)" />
     </div>
   </a-tooltip>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
index 7cbaba15d2..6e05077eae 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -28,6 +28,6 @@ async function exportCache() {
     <template #title>
       <span> Export Cache </span>
     </template>
-    <mdi-export class="cursor-pointer mx-3" @click="exportCache" />
+    <mdi-export class="cursor-pointer" @click="exportCache" />
   </a-tooltip>
 </template>

From cdb085376fd102364cbd9a4333f290f02c6344aa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 18:08:22 +0800
Subject: [PATCH 033/106] feat(gui-v2): include DebugMeta

---
 .../components/smartsheet/sidebar/toolbar/index.vue         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
index 30c1acc8c8..9af373d4c3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/index.vue
@@ -4,6 +4,7 @@ import LockMenu from './LockMenu.vue'
 import Reload from './Reload.vue'
 import ExportCache from './ExportCache.vue'
 import DeleteCache from './DeleteCache.vue'
+import DebugMeta from './DebugMeta.vue'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -33,8 +34,9 @@ const clickCount = $ref(0)
 
       <div class="dot" />
 
-      <!-- TODO: -->
-      <!-- <debug-metas v-if="debug" class="mr-3" /> -->
+      <DebugMeta />
+
+      <div class="dot" />
     </template>
 
     <LockMenu v-if="isUIAllowed('view-type')" />

From 8818227606d5a5769b66bdfa74e0d06e0e684ec1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 18:59:47 +0800
Subject: [PATCH 034/106] feat(gui-v2): add debug meta

---
 .../smartsheet/sidebar/toolbar/DebugMeta.vue  | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
new file mode 100644
index 0000000000..9d63394eec
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { MetaInj } from '#imports'
+
+const editorOpen = ref(false)
+
+const meta = $(inject(MetaInj))
+</script>
+
+<template>
+  <a-tooltip>
+    <template #title>
+      <span> Debug Meta </span>
+    </template>
+    <mdi-bug-outline class="cursor-pointer" @click="editorOpen = true" />
+  </a-tooltip>
+
+  <a-modal v-model:visible="editorOpen" :footer="null" width="80%" :title="meta.title">
+    <MonacoEditor ref="jsonEditorRef" v-model="meta" class="h-max-[70vh]" />
+  </a-modal>
+</template>

From c3b821bf8e0920ef9a877ef468e932348d9316a8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 9 Aug 2022 15:45:09 +0200
Subject: [PATCH 035/106] chore(gui-v2): fix type issues

---
 .../components/cell/attachment/utils.ts       |  4 +--
 .../components/smartsheet/Pagination.vue      | 16 ++++++------
 .../components/virtual-cell/Lookup.vue        |  9 ++++---
 .../nc-gui-v2/components/webhook/List.vue     |  4 +--
 .../[projectType]/[projectId]/index/index.vue | 25 ++++++++++++-------
 packages/nc-gui-v2/pages/index/index.vue      | 11 ++------
 6 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index bbfa6b86e4..ed0aab1982 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -141,7 +141,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       editEnabled,
       isLoading,
       api,
-      open,
+      open: () => open(),
       onDrop,
       modalVisible,
       FileIcon,
@@ -151,5 +151,5 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
       selectedImage,
     }
   },
-  'attachmentCell',
+  'useAttachmentCell',
 )
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index c9859a1d5b..1b0acb3c05 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, inject } from '#imports'
 import { ChangePageInj, PaginationDataInj } from '~/context'
-import MdiKeyboardIcon from '~icons/mdi/keyboard-return'
 
-const paginatedData = inject(PaginationDataInj)
+const paginatedData = inject(PaginationDataInj)!
 
-const changePage = inject(ChangePageInj)
+const changePage = inject(ChangePageInj)!
 
-const count = computed(() => paginatedData?.value?.totalRows ?? Infinity)
+const count = computed(() => paginatedData.value?.totalRows ?? Infinity)
 
-const size = computed(() => paginatedData?.value?.pageSize ?? 25)
+const size = computed(() => paginatedData.value?.pageSize ?? 25)
 
 const page = computed({
   get: () => paginatedData?.value?.page ?? 1,
@@ -39,7 +38,7 @@ const page = computed({
       <span class="text-xs" style="white-space: nowrap"> Change page:</span>
       <a-input :value="page" size="small" class="ml-1 !text-xs" type="number" @keydown.enter="changePage(page)">
         <template #suffix>
-          <MdiKeyboardIcon class="mt-1" @click="changePage(page)" />
+          <MdiKeyboardReturn class="mt-1" @click="changePage(page)" />
         </template>
       </a-input>
     </div>
@@ -50,8 +49,7 @@ const page = computed({
 
 <style scoped>
 :deep(.ant-pagination-item a) {
-  line-height: 21px !important;
-  @apply text-sm;
+  @apply text-sm !leading-[21px];
 }
 :deep(.ant-pagination-item:not(.ant-pagination-item-active) a) {
   line-height: 21px !important;
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index 15f99e9913..c8436a7e89 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -10,9 +10,12 @@ const { metas, getMeta } = useMetas()
 provide(ReadonlyInj, true)
 
 const column = inject(ColumnInj)! as Ref<ColumnType & { colOptions: LookupType }>
+
 const meta = inject(MetaInj)
+
 const value = inject(CellValueInj)
-const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]))
+
+const arrValue = computed(() => (Array.isArray(value?.value) ? value?.value : [value?.value]) ?? [])
 
 const relationColumn = meta?.value.columns?.find((c) => c.id === column.value.colOptions?.fk_relation_column_id) as ColumnType & {
   colOptions: LinkToAnotherRecordType
@@ -22,7 +25,7 @@ await getMeta(relationColumn.colOptions.fk_related_model_id!)
 
 const lookupTableMeta = computed(() => metas.value[relationColumn.colOptions.fk_related_model_id!])
 
-const lookupColumn = computed(
+const lookupColumn = computed<any>(
   () =>
     lookupTableMeta.value.columns?.find(
       (c: Record<string, any>) => c.id === column.value.colOptions?.fk_lookup_column_id,
@@ -58,7 +61,7 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
       <template v-else>
         <!-- For attachment cell avoid adding chip style -->
         <div
-          v-for="(v, i) in arrValue"
+          v-for="(v, i) of arrValue"
           :key="i"
           :class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
         >
diff --git a/packages/nc-gui-v2/components/webhook/List.vue b/packages/nc-gui-v2/components/webhook/List.vue
index c05cfdaa50..7ca873c992 100644
--- a/packages/nc-gui-v2/components/webhook/List.vue
+++ b/packages/nc-gui-v2/components/webhook/List.vue
@@ -4,13 +4,13 @@ import { MetaInj } from '~/context'
 import { inject, onMounted, ref, useNuxtApp } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
 
-const emit = defineEmits(['edit'])
+const emit = defineEmits(['edit', 'add'])
 
 const { $api, $e } = useNuxtApp()
 
 const hooks = ref<Record<string, any>[]>([])
 
-const meta = inject(MetaInj)
+const meta = inject(MetaInj)!
 
 async function loadHooksList() {
   try {
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index db91aba10d..4d4a39616c 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -9,7 +9,6 @@ import MdiCsvIcon from '~icons/mdi/file-document-outline'
 import MdiExcelIcon from '~icons/mdi/file-excel'
 import MdiJSONIcon from '~icons/mdi/code-json'
 import MdiAirTableIcon from '~icons/mdi/table-large'
-import MdiRequestDataSourceIcon from '~icons/mdi/open-in-new'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'
 
@@ -46,7 +45,7 @@ const icon = (tab: TabItem) => {
   <div class="h-full w-full nc-container pt-[9px]">
     <div class="h-full w-full flex flex-col">
       <div>
-        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab">
+        <a-tabs v-model:activeKey="activeTabIndex" class="nc-root-tabs" type="editable-card" @edit="closeTab(activeTabIndex)">
           <a-tab-pane v-for="(tab, i) in tabs" :key="i">
             <template #tab>
               <div class="flex align-center gap-2">
@@ -65,15 +64,17 @@ const icon = (tab: TabItem) => {
                     Add / Import
                   </div>
                 </template>
+
                 <a-menu-item-group v-if="isUIAllowed('addTable')">
                   <a-menu-item key="add-new-table" v-t="['a:actions:create-table']" @click="tableCreateDialog = true">
                     <span class="flex items-center gap-2">
-                      <MdiTableIcon class="text-primary" />
+                      <MdiTable class="text-primary" />
                       <!-- Add new table -->
                       {{ $t('tooltip.addTable') }}
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
+
                 <a-menu-item-group title="QUICK IMPORT FROM">
                   <a-menu-item
                     v-if="isUIAllowed('airtableImport')"
@@ -82,7 +83,7 @@ const icon = (tab: TabItem) => {
                     @click="airtableImportDialog = true"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiAirTableIcon class="text-primary" />
+                      <MdiTableLarge class="text-primary" />
                       <!-- TODO: i18n -->
                       Airtable
                     </span>
@@ -94,11 +95,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('csv')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiCsvIcon class="text-primary" />
+                      <MdiFileDocumentOutline class="text-primary" />
                       <!-- TODO: i18n -->
                       CSV file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('jsonImport')"
                     key="quick-import-json"
@@ -106,11 +108,12 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('json')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiJSONIcon class="text-primary" />
+                      <MdiCodeJson class="text-primary" />
                       <!-- TODO: i18n -->
                       JSON file
                     </span>
                   </a-menu-item>
+
                   <a-menu-item
                     v-if="isUIAllowed('excelImport')"
                     key="quick-import-excel"
@@ -118,13 +121,15 @@ const icon = (tab: TabItem) => {
                     @click="openQuickImportDialog('excel')"
                   >
                     <span class="flex items-center gap-2">
-                      <MdiExcelIcon class="text-primary" />
+                      <MdiFileExcel class="text-primary" />
                       <!-- TODO: i18n -->
                       Microsoft Excel
                     </span>
                   </a-menu-item>
                 </a-menu-item-group>
-                <a-divider class="ma-0 mb-2" />
+
+                <a-menu-divider class="ma-0 mb-2" />
+
                 <a-menu-item
                   v-if="isUIAllowed('importRequest')"
                   key="add-new-table"
@@ -133,7 +138,7 @@ const icon = (tab: TabItem) => {
                 >
                   <a href="https://github.com/nocodb/nocodb/issues/2052" target="_blank" class="prose-sm pa-0">
                     <span class="flex items-center gap-2">
-                      <MdiRequestDataSourceIcon class="text-primary" />
+                      <MdiOpenInNew class="text-primary" />
                       <!-- TODO: i18n -->
                       Request a data source you need?
                     </span>
@@ -150,7 +155,9 @@ const icon = (tab: TabItem) => {
     </div>
 
     <DlgTableCreate v-if="tableCreateDialog" v-model="tableCreateDialog" />
+
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" :import-type="importType" />
+
     <DlgAirtableImport v-if="airtableImportDialog" v-model="airtableImportDialog" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 761df16dca..1be4f69efe 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -1,15 +1,8 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { navigateTo } from '#app'
-import { computed, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
+import { computed, navigateTo, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
 import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiDeleteOutline from '~icons/mdi/delete-outline'
-import MdiEditOutline from '~icons/mdi/edit-outline'
-import MdiRefresh from '~icons/mdi/refresh'
-import MdiMenuDown from '~icons/mdi/menu-down'
-import MdiPlus from '~icons/mdi/plus'
-import MdiDatabaseOutline from '~icons/mdi/database-outline'
 
 const { $e } = useNuxtApp()
 
@@ -64,7 +57,7 @@ onMounted(() => {
     <a-row>
       <a-col :span="8"></a-col>
       <a-col :span="8" class="!bg-red">
-        <a-card class="mx-auto mt-10 !max-w-[600px] shadow-lg">
+        <a-card :loading="isLoading" class="mx-auto mt-10 !max-w-[600px] shadow-lg">
           <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
             <!-- My Projects -->
             <b>{{ $t('title.myProject') }}</b>

From 0e699f89c0d4856879f9830b25c5d841c7e1621d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 23:00:18 +0200
Subject: [PATCH 036/106] chore(gui-v2): cleanup typecheck issues

---
 .../nc-gui-v2/components/cell/MultiSelect.vue | 31 ++++++++-----------
 .../components/cell/SingleSelect.vue          | 14 ++++-----
 .../components/general/ColorPicker.vue        | 20 +++++-------
 .../smartsheet-toolbar/SearchData.vue         | 12 +++----
 .../smartsheet/sidebar/menu/ApiSnippet.vue    | 13 ++++++--
 .../virtual-cell/components/ItemChip.vue      |  9 +++---
 .../composables/useSmartsheetRowStore.ts      | 16 ++++++----
 packages/nc-gui-v2/composables/useViewData.ts |  3 +-
 packages/nc-gui-v2/httpsnippet-shims.d.ts     |  3 ++
 packages/nc-gui-v2/vue-color-shims.d.ts       |  1 +
 10 files changed, 62 insertions(+), 60 deletions(-)
 create mode 100644 packages/nc-gui-v2/httpsnippet-shims.d.ts

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 97fba2b1a8..7eda956454 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
 import { EditModeInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
@@ -32,9 +31,9 @@ const isOpen = ref(false)
 const options = computed(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+    for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
@@ -43,7 +42,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -52,8 +51,8 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el: SelectOptionType) => el.title === a)
-            const opb = options.value.find((el: SelectOptionType) => el.title === b)
+            const opa = options.value.find((el: any) => el.title === a)
+            const opb = options.value.find((el: any) => el.title === b)
             if (opa && opb) {
               return opa.order - opb.order
             }
@@ -83,25 +82,21 @@ const handleClose = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  selectedIds.value = selectedTitles.value.map((el) => {
-    return options.value.find((op: SelectOptionType) => op.title === el).id
-  })
+  selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
 })
 
 useEventListener(document, 'click', handleClose)
 
 watch(
   () => modelValue,
-  (_n, _o) => {
-    selectedIds.value = selectedTitles.value.map((el) => {
-      return options.value.find((op: SelectOptionType) => op.title === el).id
-    })
+  () => {
+    selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
   },
 )
 
 watch(isOpen, (n, _o) => {
-  if (n === false) {
-    aselect.value.blur()
+  if (!n) {
+    aselect.value?.blur()
   }
 })
 </script>
@@ -128,10 +123,10 @@ watch(isOpen, (n, _o) => {
     </a-select-option>
     <template #tagRender="{ value: val, onClose }">
       <a-tag
-        v-if="options.find((el: SelectOptionType) => el.title === val)"
+        v-if="options.find((el) => el.title === val)"
         class="rounded-tag"
         :style="{ display: 'flex', alignItems: 'center' }"
-        :color="options.find((el: SelectOptionType) => el.title === val).color"
+        :color="options.find((el) => el.title === val).color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
         :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 821ba945c4..36ff1daccb 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import type { SelectOptionType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, computed, inject } from '#imports'
+import { ActiveCellInj, ColumnInj, computed, inject, ref, useEventListener, watch } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
@@ -14,8 +13,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
 
-// const isForm = inject<boolean>('isForm', false)
-
 const editEnabled = inject(EditModeInj)
 
 const active = inject(ActiveCellInj, ref(false))
@@ -32,9 +29,10 @@ const vModel = computed({
 const options = computed(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
-      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      ? // todo: fix colOptions type, options does not exist as a property
+        (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
       : []
-    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+    for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
     return opts
@@ -61,8 +59,8 @@ const handleClose = (e: MouseEvent) => {
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
-  if (n === false) {
-    aselect.value.blur()
+  if (!n) {
+    aselect.value?.blur()
   }
 })
 </script>
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index c319f83299..7511b0f9a9 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
 import { Chrome } from '@ckpack/vue-color'
 import { enumColor } from '@/utils'
+import { computed, ref, watch } from '#imports'
 
 interface Props {
   modelValue: string | any
   colors?: string[]
   rowSize?: number
-  advanced?: Boolean
-  pickButton?: Boolean
+  advanced?: boolean
+  pickButton?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   modelValue: () => enumColor.light[0],
   colors: () => enumColor.light.concat(enumColor.dark),
-  rowSize: () => 10,
-  advanced: () => true,
-  pickButton: () => false,
+  rowSize: 10,
+  advanced: true,
+  pickButton: false,
 })
 
 const emit = defineEmits(['update:modelValue'])
@@ -29,17 +30,12 @@ const vModel = computed({
 
 const picked = ref(props.modelValue || enumColor.light[0])
 
-const selectColor = (color: any) => {
+const selectColor = (color: Record<string, any>) => {
   picked.value = color.hex ? color.hex : color
   vModel.value = color.hex ? color.hex : color
 }
 
-const compare = (colorA: String, colorB: String) => {
-  if ((typeof colorA === 'string' || colorA instanceof String) && (typeof colorB === 'string' || colorB instanceof String)) {
-    return colorA.toLowerCase() === colorB.toLowerCase()
-  }
-  return false
-}
+const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
index 51031561d1..cf08d019e1 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/SearchData.vue
@@ -15,16 +15,14 @@ const columns = computed(() =>
     label: c.title,
   })),
 )
+
+function onPressEnter() {
+  reloadData.trigger()
+}
 </script>
 
 <template>
-  <a-input
-    v-model:value="search.query"
-    size="small"
-    class="max-w-[200px]"
-    placeholder="Filter query"
-    @press-enter="reloadData.trigger(null)"
-  >
+  <a-input v-model:value="search.query" size="small" class="max-w-[200px]" placeholder="Filter query" @press-enter="onPressEnter">
     <template #addonBefore>
       <div class="flex align-center relative" @click="isDropdownOpen = true">
         <MdiMagnify class="text-grey" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index 3e3aed7159..3a061ab159 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -3,6 +3,7 @@ import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
+import { inject, useGlobal, useProject, useSmartsheetStoreOrThrow, useVModel, useViewData } from '#imports'
 
 const props = defineProps<Props>()
 
@@ -13,11 +14,17 @@ interface Props {
 }
 
 const { project } = $(useProject())
+
 const { appInfo, token } = $(useGlobal())
-const meta = $(inject(MetaInj))
-const view = $(inject(ActiveViewInj))
+
+const meta = $(inject(MetaInj)!)
+
+const view = $(inject(ActiveViewInj)!)
+
 const { xWhere } = useSmartsheetStoreOrThrow()
-const { queryParams } = $(useViewData(meta, view as any, xWhere))
+
+const { queryParams } = $(useViewData($$(meta), view as any, xWhere))
+
 const { copy } = useClipboard()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index f4be7fbad0..6283b90536 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useLTARStoreOrThrow } from '#imports'
+import { inject, ref, useLTARStoreOrThrow } from '#imports'
 import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
 
 interface Props {
@@ -11,13 +11,13 @@ const { value, item } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
-const { relatedTableMeta } = useLTARStoreOrThrow()
+const { relatedTableMeta } = useLTARStoreOrThrow()!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
-const isForm = inject(IsFormInj)
+const isForm = inject(IsFormInj)!
 
 const expandedFormDlg = ref(false)
 </script>
@@ -29,6 +29,7 @@ const expandedFormDlg = ref(false)
     @click="expandedFormDlg = true"
   >
     <span class="name">{{ value }}</span>
+
     <div v-show="active || isForm" v-if="editEnabled" class="flex align-center">
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index bc9a59aa37..8bb3135a89 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -2,9 +2,8 @@ import { message } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports'
-import type { Row } from '~/composables/useViewData'
+import type { Row } from './useViewData'
+import { useInjectionState, useMetas, useNuxtApp, useProject, useVirtualCell } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
@@ -47,7 +46,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         project.value.title as string,
         meta.value.title as string,
         rowId,
-        type,
+        type as 'mm' | 'hm',
         column.title as string,
         relatedRowId,
       )
@@ -69,14 +68,19 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
       if (isHm || isMm) {
         const relatedRows = (state.value?.[column.title!] ?? []) as Record<string, any>[]
         for (const relatedRow of relatedRows) {
-          await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
+          await linkRecord(
+            id,
+            extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]),
+            column,
+            colOptions.type as RelationTypes,
+          )
         }
       } else if (isBt && state?.value?.[column.title!]) {
         await linkRecord(
           id,
           extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
           column,
-          colOptions.type,
+          colOptions.type as RelationTypes,
         )
       }
     }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index c2c10fd8c1..c57293922c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,8 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
+import { ref, useNuxtApp, useProject } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
diff --git a/packages/nc-gui-v2/httpsnippet-shims.d.ts b/packages/nc-gui-v2/httpsnippet-shims.d.ts
new file mode 100644
index 0000000000..a06664f07b
--- /dev/null
+++ b/packages/nc-gui-v2/httpsnippet-shims.d.ts
@@ -0,0 +1,3 @@
+declare module 'httpsnippet' {
+  export default new ((): any => {})()
+}
diff --git a/packages/nc-gui-v2/vue-color-shims.d.ts b/packages/nc-gui-v2/vue-color-shims.d.ts
index 63fe35c76e..75f77909c4 100644
--- a/packages/nc-gui-v2/vue-color-shims.d.ts
+++ b/packages/nc-gui-v2/vue-color-shims.d.ts
@@ -1,4 +1,5 @@
 declare module '@ckpack/vue-color' {
   import type { Component } from '@vue/runtime-core'
   const Sketch: Component
+  const Chrome: Component
 }

From 68551192f3f38482e559baffd3580b151cc1a228 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 12 Aug 2022 15:39:21 +0200
Subject: [PATCH 037/106] chore(gui-v2): update pre-login pages error msg style

---
 packages/nc-gui-v2/pages/forgot-password.vue  | 6 +++---
 packages/nc-gui-v2/pages/signin.vue           | 6 +++---
 packages/nc-gui-v2/pages/signup/[[token]].vue | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/pages/forgot-password.vue b/packages/nc-gui-v2/pages/forgot-password.vue
index d2c5360c67..6dc766cc9d 100644
--- a/packages/nc-gui-v2/pages/forgot-password.vue
+++ b/packages/nc-gui-v2/pages/forgot-password.vue
@@ -63,10 +63,10 @@ function resetError() {
       ref="formValidator"
       layout="vertical"
       :model="form"
-      class="bg-primary/5 forgot-password h-full min-h-[600px] flex justify-center items-center"
+      class="bg-primary/5 forgot-password h-full flex justify-center items-center nc-form-signin"
       @finish="resetPassword"
     >
-      <div class="h-full w-full flex flex-col flex-wrap justify-center items-center">
+      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
         <div
           class="color-transition bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
@@ -96,7 +96,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>
diff --git a/packages/nc-gui-v2/pages/signin.vue b/packages/nc-gui-v2/pages/signin.vue
index f1e5543724..58b4c02508 100644
--- a/packages/nc-gui-v2/pages/signin.vue
+++ b/packages/nc-gui-v2/pages/signin.vue
@@ -84,10 +84,10 @@ function resetError() {
       ref="formValidator"
       :model="form"
       layout="vertical"
-      class="bg-primary/5 signin h-full min-h-[600px] flex justify-center items-center nc-form-signin"
+      class="bg-primary/5 signin h-full flex justify-center items-center nc-form-signin"
       @finish="signIn"
     >
-      <div class="h-full w-full flex flex-col flex-wrap items-center pt-[100px]">
+      <div class="h-full w-full flex flex-col items-center justify-center pt-[50px]">
         <div
           class="bg-white dark:(!bg-gray-900 !text-white) relative flex flex-col justify-center gap-2 w-full max-w-[500px] mx-auto p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
         >
@@ -102,7 +102,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>
diff --git a/packages/nc-gui-v2/pages/signup/[[token]].vue b/packages/nc-gui-v2/pages/signup/[[token]].vue
index ede398ef9e..02f68f250f 100644
--- a/packages/nc-gui-v2/pages/signup/[[token]].vue
+++ b/packages/nc-gui-v2/pages/signup/[[token]].vue
@@ -114,7 +114,7 @@ function resetError() {
             <div v-if="error" class="self-center mb-4 bg-red-500 text-white rounded-lg w-3/4 mx-auto p-1">
               <div class="flex items-center gap-2 justify-center">
                 <MaterialSymbolsWarning />
-                <div style="flex: 0 0 auto" class="break-words">{{ error }}</div>
+                <div class="break-words">{{ error }}</div>
               </div>
             </div>
           </Transition>

From cf853e6bc80202aae6e107a139035b6a87447633 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 13 Aug 2022 14:55:38 +0200
Subject: [PATCH 038/106] chore(gui-v2): cleanup typecheck issues

---
 .../smartsheet-column/FormulaOptions.vue      | 15 +++++----
 .../composables/useColumnCreateStore.ts       | 12 +------
 .../composables/useExpandedFormStore.ts       | 24 +++++++++-----
 .../nc-gui-v2/composables/useGlobal/state.ts  | 16 ++++++++-
 .../nc-gui-v2/composables/useGlobal/types.ts  |  2 +-
 .../nc-gui-v2/composables/useLTARStore.ts     | 33 ++++++++++++-------
 .../nc-gui-v2/composables/useViewColumns.ts   |  3 +-
 .../nc-gui-v2/composables/useViewFilters.ts   |  5 +--
 packages/nc-gui-v2/composables/useViews.ts    |  5 +--
 9 files changed, 71 insertions(+), 44 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index bf5e6086d9..ba57f2d5bf 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -4,9 +4,8 @@ import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
-import { onMounted, useDebounceFn } from '#imports'
-import { MetaInj } from '~/context'
 import {
+  MetaInj,
   NcAutocompleteTree,
   formulaList,
   formulaTypes,
@@ -14,8 +13,11 @@ import {
   getUIDTIcon,
   getWordUntilCaret,
   insertAtCursor,
+  onMounted,
+  useColumnCreateStoreOrThrow,
+  useDebounceFn,
   validateDateWithUnknownFormat,
-} from '@/utils'
+} from '#imports'
 
 interface Props {
   value: Record<string, any>
@@ -615,10 +617,11 @@ onMounted(() => {
     </a-form-item>
     <div class="text-gray-600 mt-2 mb-4 prose-sm">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
-      <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
-        >Formulas</a
-      >.
+      <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">
+        Formulas.
+      </a>
     </div>
+
     <div class="h-[250px] overflow-auto scrollbar-thin-primary">
       <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
         <template #renderItem="{ item, index }">
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index e2aeaec68c..fb57c1fca3 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -1,23 +1,13 @@
-import { createInjectionState } from '@vueuse/core'
 import clone from 'just-clone'
 import { Form, message } from 'ant-design-vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useColumn } from './useColumn'
-import { computed } from '#imports'
-import { useNuxtApp } from '#app'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { computed, createInjectionState, extractSdkResponseErrorMsg, useNuxtApp } from '#imports'
 
 const useForm = Form.useForm
 
-// enum ColumnAlterType {
-//   NEW=4,
-//   EDIT=2,
-//   RENAME=8,
-//   DELETE=0,
-// }
-
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index de5d7874cd..54f5f56645 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -3,17 +3,22 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import { useApi, useInjectionState, useProject, useProvideSmartsheetRowStore } from '#imports'
-import { NOCO } from '~/lib'
-import { useNuxtApp } from '#app'
-import type { Row } from '~/composables/useViewData'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import {
+  NOCO,
+  extractPkFromRow,
+  extractSdkResponseErrorMsg,
+  useApi,
+  useInjectionState,
+  useNuxtApp,
+  useProject,
+  useProvideSmartsheetRowStore,
+} from '#imports'
+import type { Row } from '~/composables'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   const { $e, $state, $api } = useNuxtApp()
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
-  // { useGlobalInstance: true },
-  // state
+
   const commentsOnly = ref(false)
   const commentsAndLogs = ref([])
   const comment = ref('')
@@ -84,11 +89,14 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
+        // todo: description missing from argument type
         description: comment.value,
-      })
+      } as any)
 
       comment.value = ''
+
       message.success('Comment added successfully')
+
       await loadCommentsAndLogs()
     } catch (e: any) {
       message.error(e.message)
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index c61b3829cf..5a8481de78 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -72,7 +72,21 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
-  const appInfo = ref<AppInfo>({ ncSiteUrl: 'localhost:8080' })
+  const appInfo = ref<AppInfo>({
+    ncSiteUrl: 'localhost:8080',
+    authType: 'jwt',
+    connectToExternalDB: false,
+    defaultLimit: 0,
+    firstUser: true,
+    githubAuthEnabled: false,
+    googleAuthEnabled: true,
+    ncMin: false,
+    oneClick: false,
+    projectHasAdmin: false,
+    teleEnabled: true,
+    type: 'nocodb',
+    version: '0.0.0',
+  })
 
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 0e57222752..9ce4f7d924 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -13,7 +13,7 @@ export interface FeedbackForm {
 
 export interface AppInfo {
   ncSiteUrl: string
-  authType: 'jwt' | 'masterKey' | 'none'
+  authType: 'jwt' | 'none'
   connectToExternalDB: boolean
   defaultLimit: number
   firstUser: boolean
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 08fae40172..b89ab6896b 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,10 +1,18 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { Modal, message } from 'ant-design-vue'
-import { useInjectionState, useMetas, useProject } from '#imports'
-import { NOCO } from '~/lib'
+import {
+  NOCO,
+  computed,
+  extractSdkResponseErrorMsg,
+  reactive,
+  ref,
+  useInjectionState,
+  useMetas,
+  useNuxtApp,
+  useProject,
+} from '#imports'
 import type { Row } from '~/composables'
-import { extractSdkResponseErrorMsg } from '~/utils'
 
 interface DataApiResponse {
   list: Record<string, any>
@@ -13,13 +21,13 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
     const { $api } = useNuxtApp()
-    const childrenExcludedList: Ref<DataApiResponse | undefined> = ref()
-    const childrenList: Ref<DataApiResponse | undefined> = ref()
+    const childrenExcludedList = ref<DataApiResponse | undefined>()
+    const childrenList = ref<DataApiResponse | undefined>()
     const childrenExcludedListPagination = reactive({
       page: 1,
       query: '',
@@ -95,12 +103,13 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
             colOptions.type as 'mm' | 'hm',
             column?.value?.title,
             {
-              limit: childrenExcludedListPagination.size,
-              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              limit: String(childrenExcludedListPagination.size),
+              offset: String(childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1)),
+              // todo: where clause is missing from type
               where:
                 childrenExcludedListPagination.query &&
                 `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-            },
+            } as any,
           )
         }
       } catch (e: any) {
@@ -120,10 +129,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           colOptions.type as 'mm' | 'hm',
           column?.value?.title,
           {
-            limit: childrenListPagination.size,
-            offset: childrenListPagination.size * (childrenListPagination.page - 1),
+            limit: String(childrenListPagination.size),
+            offset: String(childrenListPagination.size * (childrenListPagination.page - 1)),
             where: childrenListPagination.query && `(${relatedTablePrimaryValueProp.value},like,${childrenListPagination.query})`,
-          },
+          } as any,
         )
       } catch (e: any) {
         message.error(`Failed to load children list: ${await extractSdkResponseErrorMsg(e)}`)
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index c0fc06149e..7c7b9bc191 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -113,7 +113,8 @@ export function useViewColumns(
 
   const showSystemFields = computed({
     get() {
-      return view?.value?.show_system_fields || false
+      // todo: show_system_fields missing from ViewType
+      return (view?.value as any)?.show_system_fields || false
     },
     set(v: boolean) {
       if (view?.value?.id) {
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 444e22df2a..a5c07e4519 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -78,10 +78,11 @@ export function useViewFilters(
         fk_parent_id: parentId,
       })
     } else {
-      filters.value[i] = await $api.dbTableFilter.create(view?.value?.id as string, {
+      // todo: return type of dbTableFilter is void?
+      filters.value[i] = (await $api.dbTableFilter.create(view?.value?.id as string, {
         ...filter,
         fk_parent_id: parentId,
-      })
+      })) as any
     }
     reloadData?.()
   }
diff --git a/packages/nc-gui-v2/composables/useViews.ts b/packages/nc-gui-v2/composables/useViews.ts
index 854852f003..9083b7192c 100644
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/packages/nc-gui-v2/composables/useViews.ts
@@ -1,16 +1,17 @@
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
-import { useNuxtApp } from '#app'
+import { unref, useNuxtApp, watch } from '#imports'
 
 export function useViews(meta: MaybeRef<TableType | undefined>) {
   let views = $ref<ViewType[]>([])
+
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
     const _meta = unref(meta)
 
     if (_meta && _meta.id) {
-      const response = (await $api.dbView.list(_meta.id)).list
+      const response = (await $api.dbView.list(_meta.id)).list as ViewType[]
       if (response) {
         views = response.sort((a, b) => a.order! - b.order!)
       }

From 0aac7e9b4356ad58e5bbd859704bca506b3d71ec Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sat, 13 Aug 2022 16:24:59 +0200
Subject: [PATCH 039/106] chore(gui-v2): cleanup typecheck issues

---
 .../smartsheet-column/LookupOptions.vue       |  6 +--
 .../nc-gui-v2/components/smartsheet/Form.vue  | 46 ++++++++++++++-----
 .../smartsheet/expanded-form/Comments.vue     |  8 ++--
 .../tabs/auth/user-management/ShareBase.vue   |  9 ++--
 .../nc-gui-v2/components/template/Editor.vue  | 25 +++++++---
 .../components/virtual-cell/BelongsTo.vue     | 20 ++++++--
 .../composables/useExpandedFormStore.ts       |  2 +-
 7 files changed, 82 insertions(+), 34 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 237df7df5d..c3bd6908c2 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
-import { MetaInj } from '~/context'
+import { MetaInj } from '#imports'
 
 interface Props {
   value: Record<string, any>
@@ -39,7 +39,7 @@ const refTables = $computed(() => {
   }
 
   return meta.columns
-    .filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    ?.filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
     .map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
       col: c.colOptions,
       column: c,
@@ -52,7 +52,7 @@ const refTables = $computed(() => {
 })
 
 const columns = $computed(() => {
-  const selectedTable = refTables.find((t) => t.column.id === vModel.value.fk_relation_column_id)
+  const selectedTable = refTables?.find((t) => t.column.id === vModel.value.fk_relation_column_id)
   if (!selectedTable?.id) {
     return []
   }
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 353d76ae2e..2cffdd7ccf 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -3,11 +3,26 @@ import Draggable from 'vuedraggable'
 import { RelationTypes, UITypes, getSystemColumns, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import type { Permission } from '~/composables/useUIPermission/rolePermissions'
-import { computed, inject, onClickOutside, useDebounceFn } from '#imports'
-import { ActiveViewInj, IsFormInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-
-provide(IsFormInj, true)
+import {
+  ActiveViewInj,
+  IsFormInj,
+  MetaInj,
+  computed,
+  extractSdkResponseErrorMsg,
+  inject,
+  onClickOutside,
+  provide,
+  reactive,
+  ref,
+  useDebounceFn,
+  useGlobal,
+  useNuxtApp,
+  useUIPermission,
+  useViewData,
+  watch,
+} from '#imports'
+
+provide(IsFormInj, ref(true))
 
 // todo: generate hideCols based on default values
 const hiddenCols = ['created_at', 'updated_at']
@@ -76,7 +91,8 @@ async function submitForm() {
     return
   }
 
-  insertRow(formState)
+  await insertRow(formState)
+
   submitted.value = true
 }
 
@@ -199,17 +215,23 @@ function setFormData() {
   formViewData.value = {
     ...formViewData.value,
     submit_another_form: !!(formViewData?.value?.submit_another_form ?? 0),
-    show_blank_form: !!(formViewData?.value?.show_blank_form ?? 0),
-  }
+    // todo: show_blank_form missing from FormType
+    show_blank_form: !!((formViewData?.value as any)?.show_blank_form ?? 0),
+  } as any
 
   {
     // email me
     let data: Record<string, boolean> = {}
     try {
-      data = JSON.parse(formViewData.value.email as string) || {}
-    } catch (e) {}
+      data = JSON.parse(formViewData.value?.email || '') || {}
+    } catch (e) {
+      // noop
+    }
+
     data[state.user.value?.email as string] = emailMe.value
-    formViewData.value.email = JSON.stringify(data)
+
+    formViewData.value!.email = JSON.stringify(data)
+
     checkSMTPStatus()
   }
 
@@ -265,7 +287,7 @@ const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
 }, 250)
 
 watch(submitted, (v) => {
-  if (v && formViewData?.value?.show_blank_form) {
+  if (v && (formViewData?.value as any)?.show_blank_form) {
     secondsRemain.value = 5
     const intvl = setInterval(() => {
       if (--secondsRemain.value < 0) {
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
index 7aecd34155..93012ce369 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
-import { enumColor, timeAgo } from '~/utils'
-import MdiAccountIcon from '~icons/mdi/account-circle'
+import { enumColor, nextTick, ref, timeAgo, useExpandedFormStoreOrThrow, watch } from '#imports'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
@@ -10,6 +8,8 @@ const commentsWrapperEl = ref<HTMLDivElement>()
 
 await loadCommentsAndLogs()
 
+const showborder = ref(false)
+
 watch(
   commentsAndLogs,
   () => {
@@ -28,7 +28,7 @@ watch(
 
       <template v-else>
         <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
-          <MdiAccountIcon class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
+          <MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
           <div class="flex-grow">
             <p class="mb-1 caption edited-text text-[10px] text-gray">
               {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index fd30bc2233..4c5ffb19ba 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -32,7 +32,9 @@ const loadBase = async () => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseGet(project.value.id)
+    // todo: response is missing roles in type
+    const res = (await $api.project.sharedBaseGet(project.value.id)) as any
+
     base = {
       uuid: res.uuid,
       url: res.url,
@@ -47,9 +49,10 @@ const createShareBase = async (role = ShareBaseRole.Viewer) => {
   try {
     if (!project.value.id) return
 
-    const res = await $api.project.sharedBaseUpdate(project.value.id, {
+    // todo: return type void?
+    const res = (await $api.project.sharedBaseUpdate(project.value.id, {
       roles: role,
-    })
+    })) as any
 
     base = res ?? {}
     base!.role = role
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 4739448a47..0d701d89a8 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -3,14 +3,26 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { Form, message } from 'ant-design-vue'
 import { srcDestMappingColumns, tableColumns } from './utils'
-import { computed, onMounted } from '#imports'
-import { extractSdkResponseErrorMsg, fieldRequiredValidator, getUIDTIcon } from '~/utils'
-import { MetaInj, ReloadViewDataHookInj } from '~/context'
+import {
+  MetaInj,
+  ReloadViewDataHookInj,
+  computed,
+  extractSdkResponseErrorMsg,
+  fieldRequiredValidator,
+  getUIDTIcon,
+  nextTick,
+  onMounted,
+  reactive,
+  ref,
+  useProject,
+  useTabs,
+} from '#imports'
+import { TabType } from '~/composables'
 
 interface Props {
   quickImportType: 'csv' | 'excel' | 'json'
   projectTemplate: Record<string, any>
-  importData: Record<string, any>[]
+  importData: Record<string, any>
   importColumns: any[]
   importOnly: boolean
   maxRowsToParse: number
@@ -74,6 +86,7 @@ const { sqlUi, project, loadTables } = useProject()
 
 onMounted(() => {
   parseAndLoadTemplate()
+
   nextTick(() => {
     inputRefs.value[0]?.focus()
   })
@@ -409,7 +422,7 @@ async function importTemplate() {
       await loadTables()
       addTab({
         ...tab,
-        type: 'table',
+        type: TabType.TABLE,
       })
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
@@ -476,7 +489,7 @@ onMounted(() => {
         </p>
       </a-form>
       <a-collapse v-if="data.tables && data.tables.length" v-model:activeKey="expansionPanel" class="template-collapse" accordion>
-        <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
+        <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 499f8fb3e5..7cbb7e1a2f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,20 +3,30 @@ import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
-import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { ActiveCellInj, CellValueInj, ColumnInj, EditModeInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  ActiveCellInj,
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const cellValue = inject(CellValueInj, ref<any>(null))
 
-const row = inject(RowInj)
+const row = inject(RowInj)!
 
-const active = inject(ActiveCellInj)
+const active = inject(ActiveCellInj)!
 
 const editEnabled = inject(EditModeInj)
 
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 54f5f56645..9132809a50 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -20,7 +20,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
 
   const commentsOnly = ref(false)
-  const commentsAndLogs = ref([])
+  const commentsAndLogs = ref<any[]>([])
   const comment = ref('')
   const commentsDrawer = ref(false)
   const changedColumns = ref(new Set<string>())

From fb07bbaceafd8980ed52c3b1b0db783bef25eb63 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 06:06:03 +0200
Subject: [PATCH 040/106] chore(gui-v2): cleanup typecheck issues

---
 packages/nc-gui-v2/components/dashboard/TreeView.vue    | 2 +-
 packages/nc-gui-v2/composables/useUIPermission/index.ts | 7 +++----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index c9f4395237..2267c3e197 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -3,7 +3,7 @@ import type { TableType } from 'nocodb-sdk'
 import Sortable from 'sortablejs'
 import { Empty } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
-import { computed, useProject, useTable, useTabs, watchEffect } from '#imports'
+import { computed, useProject, useTable, useTabs, useUIPermission, watchEffect } from '#imports'
 import { TabType } from '~/composables'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index 62ff91f05e..b966adae77 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -1,13 +1,12 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { useState } from '#app'
-import { USER_PROJECT_ROLES } from '~/lib/constants'
+import { USER_PROJECT_ROLES, useNuxtApp, useState } from '#imports'
 
 export function useUIPermission() {
   const { $state } = useNuxtApp()
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: Permission, skipPreviewAs = false) => {
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
     const user = $state.user
     let userRoles = user?.value?.roles || {}
     // if string populate key-value paired object
@@ -33,7 +32,7 @@ export function useUIPermission() {
     return Object.entries<boolean>(roles).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
 
-      return hasRole && (rolePermission === '*' || rolePermission?.[permission])
+      return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
     })
   }
 

From 83eca162efdaf85cfb73378426e55bbce33721a2 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 07:09:20 +0200
Subject: [PATCH 041/106] chore(gui-v2): cleanup typecheck issues

---
 packages/nc-gui-v2/components/cell/Url.vue    | 15 +++++---
 .../smartsheet-column/LookupOptions.vue       | 13 +++----
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  2 +-
 .../nc-gui-v2/components/smartsheet/Form.vue  | 37 +++++++++++++++----
 .../smartsheet/expanded-form/Header.vue       |  8 ++++
 .../nc-gui-v2/components/template/Editor.vue  | 30 +++++++++------
 packages/nc-gui-v2/composables/useViewData.ts | 23 +++++++-----
 packages/nc-gui-v2/utils/columnUtils.ts       |  2 +-
 8 files changed, 85 insertions(+), 45 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index f5200c1bcd..5cddb7349c 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -1,10 +1,9 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, computed, inject, isValidURL } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, isValidURL } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()
@@ -13,7 +12,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const vModel = computed({
   get: () => value,
@@ -26,10 +25,12 @@ const vModel = computed({
 
 const isValid = computed(() => value && isValidURL(value))
 
-const url = computed<string | null>(() => {
-  if (!value || !isValidURL(value)) return null
+const url = computed(() => {
+  if (!value || !isValidURL(value)) return ''
+
   /** add url scheme if missing */
   if (/^https?:\/\//.test(value)) return value
+
   return `https://${value}`
 })
 
@@ -38,7 +39,9 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 
 <template>
   <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none text-sm" @blur="editEnabled = false" />
+
   <nuxt-link v-else-if="isValid" class="text-sm underline hover:opacity-75" :to="url" target="_blank">{{ value }} </nuxt-link>
+
   <span v-else>{{ value }}</span>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index c3bd6908c2..503ab38fa9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import { MetaInj } from '#imports'
 
@@ -39,16 +39,13 @@ const refTables = $computed(() => {
   }
 
   return meta.columns
-    ?.filter((c: ColumnType) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
-    .map<TableType & { col: LinkToAnotherRecordType; column: ColumnType }>((c: ColumnType) => ({
+    ?.filter((c: any) => c.uidt === UITypes.LinkToAnotherRecord && !c.system)
+    .map((c: ColumnType) => ({
       col: c.colOptions,
       column: c,
       ...tables.find((t) => t.id === (c.colOptions as LinkToAnotherRecordType).fk_related_model_id),
     }))
-    .filter(
-      (table: TableType & { col: LinkToAnotherRecordType; column: ColumnType }) =>
-        table.col.fk_related_model_id === table.id && !table.mm,
-    )
+    .filter((table: any) => table.col.fk_related_model_id === table.id && !table.mm)
 })
 
 const columns = $computed(() => {
@@ -57,7 +54,7 @@ const columns = $computed(() => {
     return []
   }
 
-  return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
+  return metas[selectedTable.id].columns.filter((c: any) => !isSystemColumn(c))
 })
 </script>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index ed64f98769..196527edfc 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -10,7 +10,7 @@ interface Props {
   column: ColumnType
   modelValue: any
   editEnabled: boolean
-  rowIndex: number
+  rowIndex?: number
   active?: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index 2cffdd7ccf..b49ed441c1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -18,6 +18,7 @@ import {
   useGlobal,
   useNuxtApp,
   useUIPermission,
+  useViewColumns,
   useViewData,
   watch,
 } from '#imports'
@@ -35,7 +36,7 @@ const { $api, $e } = useNuxtApp()
 
 const { isUIAllowed } = useUIPermission()
 
-const formState = reactive({})
+const formState: Record<any, any> = reactive({})
 
 const secondsRemain = ref(0)
 
@@ -54,13 +55,13 @@ const { showAll, hideAll, saveOrUpdate } = useViewColumns(view, meta as any, fal
 
 const columns = computed(() => meta?.value?.columns || [])
 
-const localColumns = ref<Record<string, any>>([])
+const localColumns = ref<Record<string, any>[]>([])
 
-const hiddenColumns = ref<Record<string, any>>([])
+const hiddenColumns = ref<Record<string, any>[]>([])
 
 const draggableRef = ref()
 
-const systemFieldsIds = ref<Record<string, any>>([])
+const systemFieldsIds = ref<Record<string, any>[]>([])
 
 const showColumnDropdown = ref(false)
 
@@ -279,7 +280,7 @@ async function submitCallback() {
 const updateColMeta = useDebounceFn(async (col: Record<string, any>) => {
   if (col.id) {
     try {
-      $api.dbView.formColumnUpdate(col.id, col)
+      await $api.dbView.formColumnUpdate(col.id, col)
     } catch (e: any) {
       message.error(await extractSdkResponseErrorMsg(e))
     }
@@ -428,7 +429,14 @@ onMounted(async () => {
       <div class="h-[200px] !bg-[#dbdad7]">
         <!-- for future implementation of cover image -->
       </div>
-      <a-card class="h-full ma-0 rounded-b-0 pa-4" body-style="max-width: 700px; margin: 0 auto; margin-top: -200px;">
+      <a-card
+        class="h-full ma-0 rounded-b-0 pa-4"
+        :body-style="{
+          maxWidth: '700px',
+          margin: '0 auto',
+          marginTop: '-200px',
+        }"
+      >
         <a-form ref="formRef" :model="formState">
           <a-card class="rounded ma-2 py-10 px-5">
             <!-- Header -->
@@ -444,7 +452,9 @@ onMounted(async () => {
                 @keydown.enter="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 w-full text-bold text-h3">{{ formViewData.heading }}</div>
+
             <!-- Sub Header -->
             <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
               <a-input
@@ -459,7 +469,9 @@ onMounted(async () => {
                 @click="updateView"
               />
             </a-form-item>
+
             <div v-else class="ml-3 mb-5 w-full text-bold text-h3">{{ formViewData.subheading }}</div>
+
             <Draggable
               ref="draggableRef"
               :list="localColumns"
@@ -495,6 +507,7 @@ onMounted(async () => {
                       <mdi-eye-off-outline class="opacity-0 nc-field-remove-icon" @click.stop="hideColumn(index)" />
                     </div>
                   </div>
+
                   <a-form-item
                     v-if="isVirtualCol(element)"
                     class="ma-0 gap-0 pa-0"
@@ -503,6 +516,7 @@ onMounted(async () => {
                   >
                     <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
                   </a-form-item>
+
                   <a-form-item
                     v-else
                     class="ma-0 gap-0 pa-0"
@@ -511,6 +525,7 @@ onMounted(async () => {
                   >
                     <SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
                   </a-form-item>
+
                   <div v-if="activeRow === element.title">
                     <a-form-item class="my-0 w-1/2">
                       <a-input
@@ -522,6 +537,7 @@ onMounted(async () => {
                       >
                       </a-input>
                     </a-form-item>
+
                     <a-form-item class="mt-2 mb-0 w-1/2">
                       <a-input
                         v-model:value="element.description"
@@ -531,14 +547,18 @@ onMounted(async () => {
                         @change="updateColMeta(element)"
                       />
                     </a-form-item>
+
                     <div class="items-center flex">
                       <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
+
                       <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                     </div>
                   </div>
+
                   <span class="text-gray-500">{{ element.description }}</span>
                 </div>
               </template>
+
               <template #footer>
                 <div
                   v-if="!localColumns.length"
@@ -563,9 +583,11 @@ onMounted(async () => {
           <div class="text-gray-500 mt-4 mb-2">
             {{ $t('msg.info.afterFormSubmitted') }}
           </div>
+
           <!-- Show this message -->
           <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-          <a-textarea v-model:value="formViewData.success_msg" rows="3" hide-details @change="updateView" />
+
+          <a-textarea v-model:value="formViewData.success_msg" :rows="3" hide-details @change="updateView" />
 
           <!-- Other options -->
           <div class="mt-4">
@@ -590,6 +612,7 @@ onMounted(async () => {
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
+
             <div class="my-4">
               <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
               <!-- Email me at <email> -->
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
index 3c0f54621d..eb082778de 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -42,23 +42,31 @@ const iconColor = '#1890ff'
       <template v-if="meta">
         {{ meta.title }}
       </template>
+
+      <!-- todo: table doesn't exist?
       <template v-else>
         {{ table }}
       </template>
+      -->
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
+
     <div class="flex-grow" />
+
     <mdi-reload class="cursor-pointer select-none" />
+
     <component
       :is="drawerToggleIcon"
       v-if="isUIAllowed('rowComments')"
       class="cursor-pointer select-none"
       @click="commentsDrawer = !commentsDrawer"
     />
+
     <a-button class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>
+
     <a-button :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
       <!-- Save Row -->
       {{ $t('activity.saveRow') }}
diff --git a/packages/nc-gui-v2/components/template/Editor.vue b/packages/nc-gui-v2/components/template/Editor.vue
index 0d701d89a8..f7c08a01ca 100644
--- a/packages/nc-gui-v2/components/template/Editor.vue
+++ b/packages/nc-gui-v2/components/template/Editor.vue
@@ -16,6 +16,7 @@ import {
   ref,
   useProject,
   useTabs,
+  useTemplateRefsList,
 } from '#imports'
 import { TabType } from '~/composables'
 
@@ -53,7 +54,7 @@ const expansionPanel = ref<number[]>([])
 
 const editableTn = ref<boolean[]>([])
 
-const inputRefs = ref<HTMLInputElement[]>([])
+const inputRefs = useTemplateRefsList<HTMLInputElement>()
 
 const isImporting = ref(false)
 
@@ -493,9 +494,11 @@ onMounted(() => {
           <template #header>
             <span class="font-weight-bold text-lg flex items-center gap-2">
               <mdi-table class="text-primary" />
+
               {{ table.ref_table_name }}
             </span>
           </template>
+
           <a-table
             v-if="srcDestMapping"
             class="template-form"
@@ -509,10 +512,12 @@ onMounted(() => {
                 {{ column.name }}
               </span>
             </template>
+
             <template #bodyCell="{ column, record }">
               <template v-if="column.key === 'source_column'">
                 <span>{{ record.srcCn }}</span>
               </template>
+
               <template v-else-if="column.key === 'destination_column'">
                 <a-select v-model:value="record.destCn" class="w-52" show-search :filter-option="filterOption">
                   <a-select-option v-for="(col, i) of columns" :key="i" :value="col.title">
@@ -538,13 +543,14 @@ onMounted(() => {
           {{ data.tables.length }} sheet{{ data.tables.length > 1 ? 's' : '' }}
           available for import
         </p>
+
         <a-collapse
           v-if="data.tables && data.tables.length"
           v-model:activeKey="expansionPanel"
           class="template-collapse"
           accordion
         >
-          <a-collapse-panel v-for="(table, tableIdx) in data.tables" :key="tableIdx">
+          <a-collapse-panel v-for="(table, tableIdx) of data.tables" :key="tableIdx">
             <template #header>
               <a-form-item v-if="editableTn[tableIdx]" v-bind="validateInfos[`tables.${tableIdx}.table_name`]" no-style>
                 <a-input
@@ -552,16 +558,18 @@ onMounted(() => {
                   class="max-w-xs"
                   size="large"
                   hide-details
-                  @click="(e) => e.stopPropagation()"
+                  @click="$event.stopPropagation()"
                   @blur="setEditableTn(tableIdx, false)"
                   @keydown.enter="setEditableTn(tableIdx, false)"
                 />
               </a-form-item>
+
               <span v-else class="font-weight-bold text-lg flex items-center gap-2" @click="setEditableTn(tableIdx, true)">
                 <mdi-table class="text-primary" />
                 {{ table.table_name }}
               </span>
             </template>
+
             <template #extra>
               <a-tooltip bottom>
                 <template #title>
@@ -573,7 +581,7 @@ onMounted(() => {
             </template>
 
             <a-table
-              v-if="table.columns.length"
+              v-if="table.columns && table.columns.length"
               class="template-form"
               row-class-name="template-form-row"
               :data-source="table.columns"
@@ -586,11 +594,13 @@ onMounted(() => {
                     {{ $t('labels.columnName') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <span>
                     {{ $t('labels.columnType') }}
                   </span>
                 </template>
+
                 <template v-else-if="column.key === 'dtxp' && hasSelectColumn[tableIdx]">
                   <span>
                     <!-- TODO: i18n -->
@@ -598,19 +608,14 @@ onMounted(() => {
                   </span>
                 </template>
               </template>
+
               <template #bodyCell="{ column, record }">
                 <template v-if="column.key === 'column_name'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
-                    <a-input
-                      :ref="
-                        (el) => {
-                          inputRefs[record.key] = el
-                        }
-                      "
-                      v-model:value="record.column_name"
-                    />
+                    <a-input :ref="inputRefs.set" v-model:value="record.column_name" />
                   </a-form-item>
                 </template>
+
                 <template v-else-if="column.key === 'uidt'">
                   <a-form-item v-bind="validateInfos[`tables.${tableIdx}.columns.${record.key}.${column.key}`]">
                     <a-select
@@ -635,6 +640,7 @@ onMounted(() => {
                       <!-- TODO: i18n -->
                       <span>Primary Value</span>
                     </template>
+
                     <div class="flex items-center float-right mr-4">
                       <mdi-key-star class="text-lg" />
                     </div>
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index c57293922c..0be745f83c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,9 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { ref, useNuxtApp, useProject } from '#imports'
-import { NOCO } from '~/lib'
-import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -34,9 +32,10 @@ export function useViewData(
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
-  const galleryData = ref<GalleryType | undefined>(undefined)
-  const formColumnData = ref<FormType | undefined>(undefined)
-  const formViewData = ref<FormType | undefined>(undefined)
+  const galleryData = ref<GalleryType>()
+  const formColumnData = ref<FormType>()
+  // todo: missing properties on FormType (success_msg, show_blank_form,
+  const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
@@ -101,7 +100,7 @@ export function useViewData(
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
-    loadAggCommentsCount()
+    await loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -132,7 +131,8 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
-      syncCount()
+
+      await syncCount()
     } catch (error: any) {
       message.error(await extractSdkResponseErrorMsg(error))
     }
@@ -240,8 +240,10 @@ export function useViewData(
           return
         }
       }
+
       formattedData.value.splice(rowIndex, 1)
-      syncCount()
+
+      await syncCount()
     } catch (e: any) {
       message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
     }
@@ -271,7 +273,8 @@ export function useViewData(
         return message.error(`Failed to delete row: ${await extractSdkResponseErrorMsg(e)}`)
       }
     }
-    syncCount()
+
+    await syncCount()
   }
 
   const loadFormView = async () => {
diff --git a/packages/nc-gui-v2/utils/columnUtils.ts b/packages/nc-gui-v2/utils/columnUtils.ts
index 96d3fecddb..70c07d7827 100644
--- a/packages/nc-gui-v2/utils/columnUtils.ts
+++ b/packages/nc-gui-v2/utils/columnUtils.ts
@@ -147,7 +147,7 @@ const uiTypes = [
   },
 ]
 
-const getUIDTIcon = (uidt: UITypes) => {
+const getUIDTIcon = (uidt: UITypes | string) => {
   return (
     [
       ...uiTypes,

From 83d5a8d76c57c0caa7cc37043cc04eb7144cb2b9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 13:07:19 +0200
Subject: [PATCH 042/106] fix(gui-v2): prod build

---
 packages/nc-gui-v2/components.d.ts        |  12 +-
 packages/nc-gui-v2/nuxt.config.ts         |  16 +-
 packages/nc-gui-v2/package-lock.json      | 353 +++++++---------------
 packages/nc-gui-v2/package.json           |   5 +-
 packages/nc-gui-v2/plugins/a.dayjs.ts     |  10 +-
 packages/nc-gui-v2/utils/dateTimeUtils.ts |   2 -
 6 files changed, 134 insertions(+), 264 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 38c6f5d873..e0a6e19f0f 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -65,6 +65,7 @@ declare module '@vue/runtime-core' {
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
     CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    ClaritySuccessLine: typeof import('~icons/clarity/success-line')['default']
     EvaEmailOutline: typeof import('~icons/eva/email-outline')['default']
     IcBaselineMoreVert: typeof import('~icons/ic/baseline-more-vert')['default']
     IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
@@ -76,6 +77,7 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsCloseRounded: typeof import('~icons/material-symbols/close-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    MaterialSymbolsRocketLaunchOutline: typeof import('~icons/material-symbols/rocket-launch-outline')['default']
     MaterialSymbolsSendOutline: typeof import('~icons/material-symbols/send-outline')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
@@ -100,9 +102,10 @@ declare module '@vue/runtime-core' {
     MdiClose: typeof import('~icons/mdi/close')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
+    MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
-    MdiDelete: typeof import('~icons/mdi/delete')['default']
+    MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
@@ -111,11 +114,13 @@ declare module '@vue/runtime-core' {
     MdiDrag: typeof import('~icons/mdi/drag')['default']
     MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiDramaMasks: typeof import('~icons/mdi/drama-masks')['default']
+    MdiEditOutline: typeof import('~icons/mdi/edit-outline')['default']
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
-    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
+    MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
@@ -138,8 +143,8 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
-    MdiPlusIconOutline: typeof import('~icons/mdi/plus-icon-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
@@ -150,6 +155,7 @@ declare module '@vue/runtime-core' {
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
+    MdiTableLarge: typeof import('~icons/mdi/table-large')['default']
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index e1cf7e689b..53d9d28912 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -48,6 +48,9 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    build: {
+      minify: false,
+    },
     css: {
       preprocessorOptions: {
         less: {
@@ -59,6 +62,7 @@ export default defineNuxtConfig({
     plugins: [
       vueI18n({
         include: path.resolve(__dirname, './lang'),
+        runtimeOnly: false,
       }),
       Icons({
         autoInstall: true,
@@ -81,7 +85,6 @@ export default defineNuxtConfig({
     ],
     define: {
       'process.env.DEBUG': 'false',
-      'global': {},
     },
     server: {
       watch: {
@@ -91,17 +94,6 @@ export default defineNuxtConfig({
   },
   experimental: {
     reactivityTransform: true,
-    viteNode: false,
-  },
-
-  typescript: {
-    typeCheck: true,
-    strict: true,
-    tsConfig: {
-      compilerOptions: {
-        types: ['@intlify/vite-plugin-vue-i18n/client', 'vue-i18n', 'unplugin-icons/types/vue', 'nuxt-windicss'],
-      },
-    },
   },
 
   image: {
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index d3a429e9e7..c9bc82fe4c 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -12,6 +12,7 @@
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
         "jsep": "^1.3.6",
+        "just-clone": "^6.1.1",
         "jwt-decode": "^3.1.2",
         "locale-codes": "^1.3.1",
         "monaco-editor": "^0.33.0",
@@ -20,8 +21,6 @@
         "socket.io-client": "^4.5.1",
         "sortablejs": "^1.15.0",
         "unique-names-generator": "^4.7.1",
-        "url": "^0.11.0",
-        "util": "^0.12.4",
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.1.10",
@@ -39,13 +38,12 @@
         "@iconify-json/material-symbols": "^1.1.8",
         "@iconify-json/mdi": "^1.1.25",
         "@iconify-json/ri": "^1.1.3",
-        "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+        "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
         "@types/file-saver": "^2.0.5",
         "@types/papaparse": "^5.3.2",
         "@types/sortablejs": "^1.13.0",
-        "@vitejs/plugin-vue": "^2.3.3",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
@@ -1284,30 +1282,33 @@
       }
     },
     "node_modules/@intlify/vite-plugin-vue-i18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-4.0.0.tgz",
-      "integrity": "sha512-bX7WgJAnYAbhmfvMp17TjCzg4e4T68O7iqAcNo6TOS+oHK0kAJAN9AJfEMTdpDrAwURCw0VwZ0kgMFWDbJkY4g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.1.tgz",
+      "integrity": "sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==",
       "dev": true,
       "dependencies": {
         "@intlify/bundle-utils": "next",
         "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.1.0",
+        "@rollup/pluginutils": "^4.2.0",
         "debug": "^4.3.1",
         "fast-glob": "^3.2.5",
         "source-map": "0.6.1"
       },
       "engines": {
-        "node": ">= 12"
+        "node": ">= 14.6"
       },
       "peerDependencies": {
-        "petite-vue-i18n": "next",
-        "vite": "^2.9.0",
-        "vue-i18n": "next"
+        "petite-vue-i18n": "*",
+        "vite": "^2.9.0 || ^3.0.0",
+        "vue-i18n": "*"
       },
       "peerDependenciesMeta": {
         "petite-vue-i18n": {
           "optional": true
         },
+        "vite": {
+          "optional": true
+        },
         "vue-i18n": {
           "optional": true
         }
@@ -3797,17 +3798,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -4044,6 +4034,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -5214,6 +5205,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
       "dependencies": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -5583,6 +5575,7 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -5636,6 +5629,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "dependencies": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -7272,14 +7266,6 @@
         }
       }
     },
-    "node_modules/for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dependencies": {
-        "is-callable": "^1.1.3"
-      }
-    },
     "node_modules/form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -7422,12 +7408,14 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -7451,6 +7439,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7506,6 +7495,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -7558,6 +7548,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -7816,6 +7807,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -7848,6 +7840,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
       "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -7865,6 +7858,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.1"
       },
@@ -7876,6 +7870,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -7887,6 +7882,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8401,7 +8397,8 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8455,6 +8452,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -8535,21 +8533,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "dependencies": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -8560,6 +8543,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
       "dependencies": {
         "has-bigints": "^1.0.1"
       },
@@ -8583,6 +8567,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8610,6 +8595,7 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
       "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8633,6 +8619,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8686,20 +8673,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "dependencies": {
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -8741,6 +8714,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
       "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -8761,6 +8735,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8824,6 +8799,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -8848,6 +8824,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -8880,6 +8857,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -8894,6 +8872,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.2"
       },
@@ -8904,24 +8883,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
-      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -8938,6 +8899,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2"
       },
@@ -9227,6 +9189,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/just-clone": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/just-clone/-/just-clone-6.1.1.tgz",
+      "integrity": "sha512-V24KLIid8uaG7ayOymGfheNHtxgrbpzj1UznQnF9vQZMHlKGTSLT3WWmFx62OXSQPwk1Tn+uo+H5/Xhb4bL9pA=="
+    },
     "node_modules/jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -10563,6 +10530,7 @@
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
       "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -10571,6 +10539,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -10579,6 +10548,7 @@
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -11944,15 +11914,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -12243,6 +12204,7 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -12470,7 +12432,8 @@
     "node_modules/safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "node_modules/safe-regex": {
       "version": "2.1.1",
@@ -12779,6 +12742,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -13149,6 +13113,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -13162,6 +13127,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -13852,6 +13818,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -14188,33 +14155,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-    },
-    "node_modules/util": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
-      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -14903,6 +14843,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
       "dependencies": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -14914,25 +14855,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/which-typed-array": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
-      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "dependencies": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
     "node_modules/wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -16189,14 +16111,14 @@
       "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
     },
     "@intlify/vite-plugin-vue-i18n": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-4.0.0.tgz",
-      "integrity": "sha512-bX7WgJAnYAbhmfvMp17TjCzg4e4T68O7iqAcNo6TOS+oHK0kAJAN9AJfEMTdpDrAwURCw0VwZ0kgMFWDbJkY4g==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/@intlify/vite-plugin-vue-i18n/-/vite-plugin-vue-i18n-6.0.1.tgz",
+      "integrity": "sha512-FFVcxVU4bR9vdDLNbltM5mrhndnXMErO01i0RrpdyMegEt3Nu/YLoH0sFdjRun7/RY4vaEnhTnFvVf9uO0dQvg==",
       "dev": true,
       "requires": {
         "@intlify/bundle-utils": "next",
         "@intlify/shared": "next",
-        "@rollup/pluginutils": "^4.1.0",
+        "@rollup/pluginutils": "^4.2.0",
         "debug": "^4.3.1",
         "fast-glob": "^3.2.5",
         "source-map": "0.6.1"
@@ -18117,11 +18039,6 @@
         "postcss-value-parser": "^4.2.0"
       }
     },
-    "available-typed-arrays": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz",
-      "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw=="
-    },
     "axios": {
       "version": "0.27.2",
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.27.2.tgz",
@@ -18293,6 +18210,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
       "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "get-intrinsic": "^1.0.2"
@@ -19193,6 +19111,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
       "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
+      "dev": true,
       "requires": {
         "has-property-descriptors": "^1.0.0",
         "object-keys": "^1.1.1"
@@ -19469,6 +19388,7 @@
       "version": "1.20.1",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
       "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "es-to-primitive": "^1.2.1",
@@ -19516,6 +19436,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
       "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
       "requires": {
         "is-callable": "^1.1.4",
         "is-date-object": "^1.0.1",
@@ -20631,14 +20552,6 @@
       "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
       "devOptional": true
     },
-    "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "requires": {
-        "is-callable": "^1.1.3"
-      }
-    },
     "form-data": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
@@ -20749,12 +20662,14 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "devOptional": true
     },
     "function.prototype.name": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
       "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -20771,7 +20686,8 @@
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
-      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
     },
     "gauge": {
       "version": "3.0.2",
@@ -20812,6 +20728,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.2.tgz",
       "integrity": "sha512-Jfm3OyCxHh9DJyc28qGk+JmfkpO41A4XkneDSujN9MDXrm4oDKdHvndhZ2dN94+ERNfkYJWDclW6k2L/ZGHjXA==",
+      "dev": true,
       "requires": {
         "function-bind": "^1.1.1",
         "has": "^1.0.3",
@@ -20849,6 +20766,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
       "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "get-intrinsic": "^1.1.1"
@@ -21050,6 +20968,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "devOptional": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -21074,7 +20993,8 @@
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
-      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
     },
     "has-flag": {
       "version": "4.0.0",
@@ -21086,6 +21006,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
       "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.1"
       }
@@ -21093,12 +21014,14 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true
     },
     "has-tostringtag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
       "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
@@ -21482,7 +21405,8 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
     },
     "ini": {
       "version": "1.3.8",
@@ -21529,6 +21453,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
       "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
+      "dev": true,
       "requires": {
         "get-intrinsic": "^1.1.0",
         "has": "^1.0.3",
@@ -21588,15 +21513,6 @@
         "is-decimal": "^1.0.0"
       }
     },
-    "is-arguments": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
-      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
-      "requires": {
-        "call-bind": "^1.0.2",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -21607,6 +21523,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
       "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
       "requires": {
         "has-bigints": "^1.0.1"
       }
@@ -21624,6 +21541,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
       "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -21641,7 +21559,8 @@
     "is-callable": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
-      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
     },
     "is-core-module": {
       "version": "2.9.0",
@@ -21656,6 +21575,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21684,14 +21604,6 @@
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
       "dev": true
     },
-    "is-generator-function": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
-      "integrity": "sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==",
-      "requires": {
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -21722,7 +21634,8 @@
     "is-negative-zero": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
-      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
     },
     "is-number": {
       "version": "7.0.0",
@@ -21734,6 +21647,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
       "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21782,6 +21696,7 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -21797,6 +21712,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
       "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -21820,6 +21736,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
       "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
       "requires": {
         "has-tostringtag": "^1.0.0"
       }
@@ -21828,22 +21745,11 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
       "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
       "requires": {
         "has-symbols": "^1.0.2"
       }
     },
-    "is-typed-array": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.9.tgz",
-      "integrity": "sha512-kfrlnTTn8pZkfpJMUgYD7YZ3qzeJgWUn8XfVYBARc4wnmNOmLbmuuaAs3q5fvB0UJOn6yHAKaGTPM7d6ezoD/A==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0"
-      }
-    },
     "is-unicode-supported": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz",
@@ -21854,6 +21760,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
       "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2"
       }
@@ -22074,6 +21981,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "just-clone": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/just-clone/-/just-clone-6.1.1.tgz",
+      "integrity": "sha512-V24KLIid8uaG7ayOymGfheNHtxgrbpzj1UznQnF9vQZMHlKGTSLT3WWmFx62OXSQPwk1Tn+uo+H5/Xhb4bL9pA=="
+    },
     "jwt-decode": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
@@ -23164,17 +23076,20 @@
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true
     },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
+      "dev": true
     },
     "object.assign": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.3.tgz",
       "integrity": "sha512-ZFJnX3zltyjcYJL0RoCJuzb+11zWGyaDbjgxZbdV7rFEcHQuYxrZqhow67aA7xpes6LhojyFDaBKAFfogQrikA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -24140,11 +24055,6 @@
         "strict-uri-encode": "^2.0.0"
       }
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g=="
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -24367,6 +24277,7 @@
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
       "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.3",
@@ -24521,7 +24432,8 @@
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true
     },
     "safe-regex": {
       "version": "2.1.1",
@@ -24780,6 +24692,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
       "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.0",
         "get-intrinsic": "^1.0.2",
@@ -25059,6 +24972,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
       "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -25069,6 +24983,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
       "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "define-properties": "^1.1.4",
@@ -25595,6 +25510,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
       "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
         "has-bigints": "^1.0.2",
@@ -25811,35 +25727,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==",
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw=="
-        }
-      }
-    },
-    "util": {
-      "version": "0.12.4",
-      "resolved": "https://registry.npmjs.org/util/-/util-0.12.4.tgz",
-      "integrity": "sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==",
-      "requires": {
-        "inherits": "^2.0.3",
-        "is-arguments": "^1.0.4",
-        "is-generator-function": "^1.0.7",
-        "is-typed-array": "^1.1.3",
-        "safe-buffer": "^5.1.2",
-        "which-typed-array": "^1.1.2"
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -26322,6 +26209,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
       "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
       "requires": {
         "is-bigint": "^1.0.1",
         "is-boolean-object": "^1.1.0",
@@ -26330,19 +26218,6 @@
         "is-symbol": "^1.0.3"
       }
     },
-    "which-typed-array": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.8.tgz",
-      "integrity": "sha512-Jn4e5PItbcAHyLoRDwvPj1ypu27DJbtdYXUa5zsinrUx77Uvfb0cXwwnGMTn7cjUfhhqgVQnVJCwF+7cgU7tpw==",
-      "requires": {
-        "available-typed-arrays": "^1.0.5",
-        "call-bind": "^1.0.2",
-        "es-abstract": "^1.20.0",
-        "for-each": "^0.3.3",
-        "has-tostringtag": "^1.0.0",
-        "is-typed-array": "^1.1.9"
-      }
-    },
     "wide-align": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 1a217ba76b..cca8e10ace 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -27,8 +27,6 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
-    "url": "^0.11.0",
-    "util": "^0.12.4",
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.1.10",
@@ -46,13 +44,12 @@
     "@iconify-json/material-symbols": "^1.1.8",
     "@iconify-json/mdi": "^1.1.25",
     "@iconify-json/ri": "^1.1.3",
-    "@intlify/vite-plugin-vue-i18n": "^4.0.0",
+    "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
     "@types/file-saver": "^2.0.5",
     "@types/papaparse": "^5.3.2",
     "@types/sortablejs": "^1.13.0",
-    "@vitejs/plugin-vue": "^2.3.3",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
diff --git a/packages/nc-gui-v2/plugins/a.dayjs.ts b/packages/nc-gui-v2/plugins/a.dayjs.ts
index 235852f82d..261c3d5fda 100644
--- a/packages/nc-gui-v2/plugins/a.dayjs.ts
+++ b/packages/nc-gui-v2/plugins/a.dayjs.ts
@@ -1,8 +1,9 @@
 import dayjs from 'dayjs'
-import relativeTime from 'dayjs/plugin/relativeTime'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-import duration from 'dayjs/plugin/duration'
-import utc from 'dayjs/plugin/utc'
+import relativeTime from 'dayjs/plugin/relativeTime.js'
+import customParseFormat from 'dayjs/plugin/customParseFormat.js'
+import duration from 'dayjs/plugin/duration.js'
+import utc from 'dayjs/plugin/utc.js'
+import weekday from 'dayjs/plugin/weekday.js'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(() => {
@@ -10,4 +11,5 @@ export default defineNuxtPlugin(() => {
   dayjs.extend(relativeTime)
   dayjs.extend(customParseFormat)
   dayjs.extend(duration)
+  dayjs.extend(weekday)
 })
diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 6c70227061..5272df19de 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -1,6 +1,4 @@
 import dayjs from 'dayjs'
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()

From ca3b3197158bff01db364b993b498ba1dbb60463 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 07:11:21 +0200
Subject: [PATCH 043/106] chore(gui-v2): add shims for 'just-clone' pkg

---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts | 2 +-
 packages/nc-gui-v2/just-clone-shims.d.ts               | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/just-clone-shims.d.ts

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index fb57c1fca3..78ec8677ec 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -232,6 +232,6 @@ export { useProvideColumnCreateStore }
 
 export function useColumnCreateStoreOrThrow() {
   const columnCreateStore = useColumnCreateStore()
-  if (columnCreateStore == null) throw new Error('Please call `useColumnCreateStore` on the appropriate parent component')
+  if (columnCreateStore == null) throw new Error('Please call `useProvideColumnCreateStore` on the appropriate parent component')
   return columnCreateStore
 }
diff --git a/packages/nc-gui-v2/just-clone-shims.d.ts b/packages/nc-gui-v2/just-clone-shims.d.ts
new file mode 100644
index 0000000000..667284c0d6
--- /dev/null
+++ b/packages/nc-gui-v2/just-clone-shims.d.ts
@@ -0,0 +1 @@
+declare module 'just-clone'

From 4373c383113f16edef1c9d6a8027e3f3afda122d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 07:20:34 +0200
Subject: [PATCH 044/106] chore(gui-v2): revert casting to any instead of
 select options type

---
 .../nc-gui-v2/components/cell/MultiSelect.vue | 56 +++++++++++++------
 .../components/cell/SingleSelect.vue          | 16 +++---
 2 files changed, 46 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 7eda956454..528e08c106 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,11 +1,23 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import { ActiveCellInj, ColumnInj, computed, h, inject, onMounted, ref, useEventListener, useProject, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import type { SelectOptionsType } from 'nocodb-sdk'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  EditModeInj,
+  computed,
+  h,
+  inject,
+  onMounted,
+  ref,
+  useEventListener,
+  useProject,
+  watch,
+} from '#imports'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
-  modelValue?: string | string[] | undefined
+  modelValue?: string | string[]
 }
 
 const { modelValue } = defineProps<Props>()
@@ -14,11 +26,9 @@ const emit = defineEmits(['update:modelValue'])
 
 const { isMysql } = useProject()
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-// const isForm = inject<boolean>('isForm', false)
-
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -28,7 +38,7 @@ const aselect = ref<typeof AntSelect>()
 
 const isOpen = ref(false)
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
@@ -42,7 +52,7 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () => selectedIds.value.map((el) => options.value.find((op: any) => op.id === el)?.title),
+  get: () => selectedIds.value.map((el) => options.value.find((op) => op.id === el)?.title),
   set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
@@ -51,10 +61,10 @@ const selectedTitles = computed(() =>
     ? typeof modelValue === 'string'
       ? isMysql
         ? modelValue.split(',').sort((a, b) => {
-            const opa = options.value.find((el: any) => el.title === a)
-            const opb = options.value.find((el: any) => el.title === b)
+            const opa = options.value.find((el) => el.title === a)
+            const opb = options.value.find((el) => el.title === b)
             if (opa && opb) {
-              return opa.order - opb.order
+              return opa.order! - opb.order!
             }
             return 0
           })
@@ -82,7 +92,14 @@ const handleClose = (e: MouseEvent) => {
 }
 
 onMounted(() => {
-  selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
+  selectedIds.value = selectedTitles.value.flatMap((el) => {
+    const item = options.value.find((op) => op.title === el)?.id
+    if (item) {
+      return [item]
+    }
+
+    return []
+  })
 })
 
 useEventListener(document, 'click', handleClose)
@@ -90,14 +107,19 @@ useEventListener(document, 'click', handleClose)
 watch(
   () => modelValue,
   () => {
-    selectedIds.value = selectedTitles.value.map((el) => options.value.find((op: any) => op.title === el).id)
+    selectedIds.value = selectedIds.value = selectedTitles.value.flatMap((el) => {
+      const item = options.value.find((op) => op.title === el)?.id
+      if (item) {
+        return [item]
+      }
+
+      return []
+    })
   },
 )
 
 watch(isOpen, (n, _o) => {
-  if (!n) {
-    aselect.value?.blur()
-  }
+  if (!n) aselect.value?.$el.blur()
 })
 </script>
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 36ff1daccb..e25f73e5f4 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
-import { ActiveCellInj, ColumnInj, computed, inject, ref, useEventListener, watch } from '#imports'
-import { EditModeInj } from '~/context'
+import type { SelectOptionsType } from 'nocodb-sdk'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -11,9 +11,9 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)
+const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -26,11 +26,11 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val || null),
 })
 
-const options = computed(() => {
+const options = computed<SelectOptionsType[]>(() => {
   if (column?.value.colOptions) {
     const opts = column.value.colOptions
       ? // todo: fix colOptions type, options does not exist as a property
-        (column.value.colOptions as any).options.filter((el: any) => el.title !== '') || []
+        (column.value.colOptions as any).options.filter((el: SelectOptionsType) => el.title !== '') || []
       : []
     for (const op of opts.filter((el: any) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
@@ -59,9 +59,7 @@ const handleClose = (e: MouseEvent) => {
 useEventListener(document, 'click', handleClose)
 
 watch(isOpen, (n, _o) => {
-  if (!n) {
-    aselect.value?.blur()
-  }
+  if (!n) aselect.value?.$el.blur()
 })
 </script>
 

From e31ad66aafcab929c1f0db64707ef58442d4893d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 07:31:41 +0200
Subject: [PATCH 045/106] chore(gui-v2): cleanup typecheck issues

---
 .../nc-gui-v2/components/cell/DatePicker.vue  | 15 ++---
 .../nc-gui-v2/components/cell/YearPicker.vue  | 15 +++--
 .../components/general/ColorPicker.vue        | 14 ++---
 .../smartsheet-toolbar/MoreActions.vue        | 60 ++++++++++---------
 4 files changed, 55 insertions(+), 49 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 3b95868d8d..3b17503d6b 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -1,19 +1,18 @@
 <script setup lang="ts">
 import dayjs from 'dayjs'
-import { ColumnInj } from '#imports'
-import { EditModeInj } from '~/context'
+import { ColumnInj, EditModeInj, computed, inject, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | null | undefined
+  modelValue?: string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const columnMeta = inject(ColumnInj, null)
+const columnMeta = inject(ColumnInj, null)!
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isDateInvalid = $ref(false)
 
@@ -43,7 +42,7 @@ const localState = $computed({
     }
   },
 })
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -55,6 +54,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isDateInvalid ? 'Invalid date' : editEnabled.value ? 'Select date' : ''))
 </script>
 
 <template>
@@ -63,7 +64,7 @@ watch(
     :bordered="false"
     class="!w-full px-1"
     :format="dateFormat"
-    :placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :dropdown-class-name="randomClass"
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index 940fe3a4e9..039331df24 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -1,17 +1,16 @@
 <script setup lang="ts">
-import { onClickOutside } from '@vueuse/core'
 import dayjs from 'dayjs'
-import { EditModeInj } from '~/context'
+import { EditModeInj, computed, inject, onClickOutside, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: number | string | null | undefined
+  modelValue?: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const editEnabled = inject(EditModeInj)
+const editEnabled = inject(EditModeInj)!
 
 let isYearInvalid = $ref(false)
 
@@ -41,7 +40,7 @@ const localState = $computed({
   },
 })
 
-const open = ref(false)
+const open = ref<boolean>(false)
 
 const randomClass = `picker_${Math.floor(Math.random() * 99999)}`
 watch(
@@ -53,6 +52,8 @@ watch(
   },
   { flush: 'post' },
 )
+
+const placeholder = computed(() => (isYearInvalid ? 'Invalid year' : editEnabled.value ? 'Select year' : ''))
 </script>
 
 <template>
@@ -61,7 +62,7 @@ watch(
     picker="year"
     :bordered="false"
     class="!w-full px-1"
-    :placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''"
+    :placeholder="placeholder"
     :allow-clear="!editEnabled"
     :input-read-only="true"
     :open="editEnabled ? false : open"
@@ -72,5 +73,3 @@ watch(
     <template #suffixIcon></template>
   </a-date-picker>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index 7511b0f9a9..d0d810a522 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -4,7 +4,7 @@ import { enumColor } from '@/utils'
 import { computed, ref, watch } from '#imports'
 
 interface Props {
-  modelValue: string | any
+  modelValue?: string | any
   colors?: string[]
   rowSize?: number
   advanced?: boolean
@@ -28,18 +28,18 @@ const vModel = computed({
   },
 })
 
-const picked = ref(props.modelValue || enumColor.light[0])
+const picked = ref<string | Record<string, any>>(props.modelValue || enumColor.light[0])
 
-const selectColor = (color: Record<string, any>) => {
-  picked.value = color.hex ? color.hex : color
-  vModel.value = color.hex ? color.hex : color
+const selectColor = (color: string | Record<string, any>) => {
+  picked.value = typeof color === 'string' ? color : color.hex ? color.hex : color
+  vModel.value = typeof color === 'string' ? color : color.hex ? color.hex : color
 }
 
 const compare = (colorA: string, colorB: string) => colorA.toLowerCase() === colorB.toLowerCase()
 
 watch(picked, (n, _o) => {
   if (!props.pickButton) {
-    vModel.value = n.hex ? n.hex : n
+    vModel.value = typeof n === 'string' ? n : n.hex ? n.hex : n
   }
 })
 </script>
@@ -48,7 +48,7 @@ watch(picked, (n, _o) => {
   <div class="color-picker">
     <div v-for="colId in Math.ceil(props.colors.length / props.rowSize)" :key="colId" class="color-picker-row">
       <button
-        v-for="(color, i) in colors.slice((colId - 1) * rowSize, colId * rowSize)"
+        v-for="(color, i) of colors.slice((colId - 1) * rowSize, colId * rowSize)"
         :key="`color-${colId}-${i}`"
         class="color-selector"
         :class="compare(picked, color) ? 'selected' : ''"
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index fe2ac2095b..13f9a376c5 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -1,18 +1,24 @@
 <script lang="ts" setup>
 import * as XLSX from 'xlsx'
-import { ExportTypes } from 'nocodb-sdk'
+// todo: export types is missing EXCEL
+// import { ExportTypes } from 'nocodb-sdk'
 import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { ActiveViewInj, MetaInj } from '~/context'
-import { extractSdkResponseErrorMsg } from '~/utils'
-import MdiFlashIcon from '~icons/mdi/flash-outline'
-import MdiMenuDownIcon from '~icons/mdi/menu-down'
-import MdiDownloadIcon from '~icons/mdi/download-outline'
-import MdiUploadIcon from '~icons/mdi/upload-outline'
-import MdiHookIcon from '~icons/mdi/hook'
-import MdiViewListIcon from '~icons/mdi/view-list-outline'
+import {
+  ActiveViewInj,
+  MetaInj,
+  extractSdkResponseErrorMsg,
+  inject,
+  ref,
+  useNuxtApp,
+  useProject,
+  useUIPermission,
+} from '#imports'
+
+enum ExportTypes {
+  EXCEL = 'excel',
+  CSV = 'csv',
+}
 
 const sharedViewListDlg = ref(false)
 
@@ -22,14 +28,6 @@ const isView = false
 
 // TODO: pending for shared view
 
-// interface Props {
-//   publicViewId?: string
-//   queryParams?: Record<string, any>
-//   reqPayload?: Record<string, any>
-// }
-
-// const { publicViewId, queryParams, reqPayload } = defineProps<Props>()
-
 const { project } = useProject()
 
 const { $api } = useNuxtApp()
@@ -44,7 +42,7 @@ const quickImportDialog = ref(false)
 
 const { isUIAllowed } = useUIPermission()
 
-const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
+const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
@@ -114,52 +112,59 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     <a-dropdown>
       <a-button v-t="['c:actions']" class="nc-actions-menu-btn nc-toolbar-btn">
         <div class="flex gap-1 align-center">
-          <MdiFlashIcon />
+          <MdiFlashOutline />
+
           <!-- More -->
           <span class="!text-sm font-weight-medium">{{ $t('general.more') }}</span>
-          <MdiMenuDownIcon class="text-grey" />
+
+          <MdiMenuDown class="text-grey" />
         </div>
       </a-button>
+
       <template #overlay>
         <div class="bg-white shadow-lg !border">
           <div>
             <div v-t="['a:actions:download-csv']" class="nc-menu-item" @click="exportFile(ExportTypes.CSV)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as CSV -->
               {{ $t('activity.downloadCSV') }}
             </div>
+
             <div v-t="['a:actions:download-excel']" class="nc-menu-item" @click="exportFile(ExportTypes.EXCEL)">
-              <MdiDownloadIcon />
+              <MdiDownloadOutline />
               <!-- Download as XLSX -->
               {{ $t('activity.downloadExcel') }}
             </div>
+
             <div
               v-if="isUIAllowed('csvImport') && !isView"
               v-t="['a:actions:upload-csv']"
               class="nc-menu-item"
               @click="quickImportDialog = true"
             >
-              <MdiUploadIcon />
+              <MdiUploadOutline />
               <!-- Upload CSV -->
               {{ $t('activity.uploadCSV') }}
             </div>
+
             <div
               v-if="isUIAllowed('SharedViewList') && !isView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
             >
-              <MdiViewListIcon />
+              <MdiViewListOutline />
               <!-- Shared View List -->
               {{ $t('activity.listSharedView') }}
             </div>
+
             <div
               v-if="isUIAllowed('webhook') && !isView"
               v-t="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
             >
-              <MdiHookIcon />
+              <MdiHook />
               {{ $t('objects.webhooks') }}
             </div>
           </div>
@@ -168,6 +173,7 @@ const exportFile = async (exportType: ExportTypes.EXCEL | ExportTypes.CSV) => {
     </a-dropdown>
 
     <DlgQuickImport v-if="quickImportDialog" v-model="quickImportDialog" import-type="csv" :import-only="true" />
+
     <WebhookDrawer v-if="showWebhookDrawer" v-model="showWebhookDrawer" />
 
     <a-modal v-model:visible="sharedViewListDlg" title="Shared view list" width="max(900px,60vw)" :footer="null">

From 1c79b77c641e7967e96ddb43c8dfc13f4e2f780d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Sun, 14 Aug 2022 17:01:47 +0200
Subject: [PATCH 046/106] fix(gui-v2): circular component imports replaced with
 async imports and typehack

---
 .../settings/app-store/AppInstall.vue         | 14 ++----
 .../components/smartsheet-header/Cell.vue     |  6 +--
 .../smartsheet-header/VirtualCell.vue         | 34 +++++++-------
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  4 +-
 .../components/smartsheet/VirtualCell.vue     | 38 ++++++++++-----
 .../smartsheet/expanded-form/index.vue        | 47 ++++++++++++++-----
 .../components/virtual-cell/BelongsTo.vue     |  9 ++--
 .../components/virtual-cell/Formula.vue       |  4 +-
 .../components/virtual-cell/HasMany.vue       | 27 +++++++++--
 .../components/virtual-cell/Lookup.vue        |  3 +-
 .../components/virtual-cell/ManyToMany.vue    | 24 ++++++++--
 .../components/virtual-cell/Rollup.vue        |  2 +-
 .../virtual-cell/components/ItemChip.vue      | 31 +++++++-----
 .../components/ListChildItems.vue             | 33 +++++++++----
 .../virtual-cell/components/ListItems.vue     | 33 +++++++++----
 15 files changed, 203 insertions(+), 106 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
index 5928084ef0..1c589933ee 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/app-store/AppInstall.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { message } from 'ant-design-vue'
 import type { PluginType } from 'nocodb-sdk'
-import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
-import CloseIcon from '~icons/material-symbols/close-rounded'
-import MdiPlusIcon from '~icons/mdi/plus'
-import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { extractSdkResponseErrorMsg, ref, useNuxtApp } from '#imports'
 
 interface Props {
   id: string
@@ -139,7 +135,7 @@ onMounted(async () => {
             class="mr-1 flex items-center justify-center"
             :class="[plugin.title === 'SES' ? 'p-2 bg-[#242f3e]' : '']"
           >
-            <img :src="`/${plugin.logo}`" class="h-6" />
+            <img :alt="plugin.title || 'plugin'" :src="`/${plugin.logo}`" class="h-6" />
           </div>
 
           <span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
@@ -147,7 +143,7 @@ onMounted(async () => {
         <div class="absolute -right-2 -top-0.5">
           <a-button type="text" class="!rounded-md mr-1" @click="emits('close')">
             <template #icon>
-              <CloseIcon class="flex mx-auto" />
+              <MaterialSymbolsCloseRounded class="flex mx-auto" />
             </template>
           </a-button>
         </div>
@@ -194,7 +190,7 @@ onMounted(async () => {
                       v-if="itemIndex !== 0 && columnIndex === plugin.formDetails.items.length - 1"
                       class="absolute flex flex-col justify-start mt-2 -right-6 top-0"
                     >
-                      <MdiDeleteOutlineIcon class="hover:text-red-400 cursor-pointer" @click="deleteFormRow(itemIndex)" />
+                      <MdiDeleteOutline class="hover:text-red-400 cursor-pointer" @click="deleteFormRow(itemIndex)" />
                     </div>
                   </a-form-item>
                 </td>
@@ -205,7 +201,7 @@ onMounted(async () => {
               <td :colspan="plugin.formDetails.items.length" class="text-center">
                 <a-button type="default" class="!bg-gray-100 rounded-md border-none mr-1" @click="addSetting">
                   <template #icon>
-                    <MdiPlusIcon class="flex mx-auto" />
+                    <MdiPlus class="flex mx-auto" />
                   </template>
                 </a-button>
               </td>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index fce8191777..30a67fe9df 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { inject, toRef } from 'vue'
-import { ColumnInj, IsFormInj } from '~/context'
+import { ColumnInj, IsFormInj, inject, provide, ref, toRef, useUIPermission } from '#imports'
+
 const props = defineProps<{ column: ColumnType & { meta: any }; required?: boolean; hideMenu?: boolean }>()
 
 const hideMenu = toRef(props, 'hideMenu')
@@ -24,7 +24,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="flex align-center w-full text-xs font-weight-regular">
+  <div class="flex items-center w-full text-xs text-normal">
     <SmartsheetHeaderCellIcon v-if="column" />
     <span v-if="column" class="name" style="white-space: nowrap" :title="column.title">{{ column.title }}</span>
     <span v-if="(column.rqd && !column.cdf) || required" class="text-red-500">&nbsp;*</span>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 092869ab3a..9a989e41f4 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,8 +1,19 @@
 <script setup lang="ts">
-import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
-import { ColumnInj, IsFormInj, MetaInj } from '~/context'
-import { provide, toRef, useMetas } from '#imports'
+import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import {
+  ColumnInj,
+  IsFormInj,
+  MetaInj,
+  computed,
+  inject,
+  provide,
+  ref,
+  toRef,
+  useMetas,
+  useUIPermission,
+  useVirtualCell,
+} from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean; required?: boolean }>()
 
@@ -48,12 +59,10 @@ const relatedTableTitle = $computed(() => relatedTableMeta?.title)
 const childColumn = $computed(() => {
   if (relatedTableMeta?.columns) {
     if (isRollup.value) {
-      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
-      return ch
+      return relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
     }
     if (isLookup.value) {
-      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
-      return ch
+      return relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
     }
   }
   return ''
@@ -92,11 +101,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <div class="d-flex align-center w-full text-xs font-weight-regular">
-    <!--    <v-tooltip bottom>
-          <template #activator="{ on }">
-          todo: bring tooltip
-          -->
+  <div class="flex items-center w-full text-xs text-normal">
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
 
     <a-tooltip placement="bottom">
@@ -105,13 +110,10 @@ function onVisibleChange() {
       </template>
       <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
     </a-tooltip>
-    <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
-    <!--    <span class="caption" v-html="tooltipMsg" /> -->
+    <span v-if="column.rqd || required" class="text-red-500">&nbsp;*</span>
 
-    <!--    </v-tooltip> -->
     <template v-if="!hideMenu">
-      <v-spacer />
       <SmartsheetHeaderMenu v-if="!isForm && isUIAllowed('edit-column')" :virtual="true" @edit="editColumnDropdown = true" />
     </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 196527edfc..2e2324a762 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
-import { provide, toRef } from 'vue'
-import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
-import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj, computed, provide, toRef, useColumn, useDebounceFn, useVModel } from '#imports'
 import { NavigateDir } from '~/lib'
 
 interface Props {
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index f47831b164..a0f0ebf549 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -1,10 +1,27 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { provide, toRef, useVirtualCell } from '#imports'
+import { ActiveCellInj, CellValueInj, ColumnInj, RowInj, provide, toRef, useVirtualCell } from '#imports'
 import type { Row } from '~/composables'
-import { ActiveCellInj, CellValueInj, ColumnInj, RowInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
+const props = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue', 'navigate'])
+
+const HasMany = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
+
+const ManyToMany = defineAsyncComponent(() => import('../virtual-cell/ManyToMany.vue'))
+
+const BelongsTo = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
+const Rollup = defineAsyncComponent(() => import('../virtual-cell/HasMany.vue'))
+
+const Formula = defineAsyncComponent(() => import('../virtual-cell/ManyToMany.vue'))
+
+const Count = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
+const Lookup = defineAsyncComponent(() => import('../virtual-cell/BelongsTo.vue'))
+
 interface Props {
   column: ColumnType
   modelValue: any
@@ -12,9 +29,6 @@ interface Props {
   active?: boolean
 }
 
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue', 'navigate'])
-
 const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
@@ -33,12 +47,12 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
     @keydown.stop.enter.exact="emit('navigate', NavigateDir.NEXT)"
     @keydown.stop.shift.enter.exact="emit('navigate', NavigateDir.PREV)"
   >
-    <VirtualCellHasMany v-if="isHm" />
-    <VirtualCellManyToMany v-else-if="isMm" />
-    <VirtualCellBelongsTo v-else-if="isBt" />
-    <VirtualCellRollup v-else-if="isRollup" />
-    <VirtualCellFormula v-else-if="isFormula" />
-    <VirtualCellCount v-else-if="isCount" />
-    <VirtualCellLookup v-else-if="isLookup" />
+    <HasMany v-if="isHm" />
+    <ManyToMany v-else-if="isMm" />
+    <BelongsTo v-else-if="isBt" />
+    <Rollup v-else-if="isRollup" />
+    <Formula v-else-if="isFormula" />
+    <Count v-else-if="isCount" />
+    <Lookup v-else-if="isLookup" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 25d9df8284..691f9369a3 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,25 +1,32 @@
 <script setup lang="ts">
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import Cell from '../Cell.vue'
+import VirtualCell from '../VirtualCell.vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
 import {
+  FieldsInj,
+  IsFormInj,
+  MetaInj,
+  NOCO,
   computedInject,
+  extractPkFromRow,
   provide,
+  ref,
   toRef,
   useNuxtApp,
+  useProject,
   useProvideExpandedFormStore,
   useProvideSmartsheetStore,
   useVModel,
   watch,
 } from '#imports'
-import { NOCO } from '~/lib'
-import { extractPkFromRow } from '~/utils'
 import type { Row } from '~/composables'
-import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue?: boolean
   row: Row
   state?: Record<string, any> | null
   meta: TableType
@@ -28,9 +35,13 @@ interface Props {
 }
 
 const props = defineProps<Props>()
+
 const emits = defineEmits(['update:modelValue'])
+
 const row = toRef(props, 'row')
+
 const state = toRef(props, 'state')
+
 const meta = toRef(props, 'meta')
 
 const fields = computedInject(FieldsInj, (_fields) => {
@@ -45,25 +56,26 @@ provide(MetaInj, meta)
 const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
 
 const { $api } = useNuxtApp()
+
 if (props.loadRow) {
   const { project } = useProject()
+
   row.value.row = await $api.dbTableRow.read(
     NOCO,
     project.value.id as string,
     meta.value.title,
     extractPkFromRow(row.value.row, meta.value.columns as ColumnType[]),
   )
+
   row.value.oldRow = { ...row.value.row }
+
   row.value.rowMeta = {}
 }
 
-useProvideSmartsheetStore(ref({}) as any, meta)
+useProvideSmartsheetStore(ref({}) as Ref<ViewType>, meta)
 
 provide(IsFormInj, ref(true))
 
-// accept as a prop
-// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
-
 watch(
   state,
   () => {
@@ -76,7 +88,15 @@ watch(
   { immediate: true },
 )
 
-const isExpanded = useVModel(props, 'modelValue', emits)
+const isExpanded = useVModel(props, 'modelValue', emits, {
+  defaultValue: false,
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'ExpandedForm',
+}
 </script>
 
 <template>
@@ -86,13 +106,14 @@ const isExpanded = useVModel(props, 'modelValue', emits)
       <div class="flex h-full nc-form-wrapper items-stretch min-h-[70vh]">
         <div class="flex-grow overflow-auto scrollbar-thin-primary">
           <div class="w-[500px] mx-auto">
-            <div v-for="col in fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
+            <div v-for="col of fields" :key="col.title" class="mt-2 py-2" :class="`nc-expand-col-${col.title}`">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center mt-2">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
-                <SmartsheetCell
+                <VirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
+
+                <Cell
                   v-else
                   v-model="row.row[col.title]"
                   :column="col"
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 7cbb7e1a2f..0967f6886a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListItems from './components/ListItems.vue'
 import {
   ActiveCellInj,
   CellValueInj,
@@ -10,6 +8,7 @@ import {
   EditModeInj,
   ReloadViewDataHookInj,
   RowInj,
+  defineAsyncComponent,
   inject,
   ref,
   useProvideLTARStore,
@@ -18,6 +17,10 @@ import {
 import MdiArrowExpand from '~icons/mdi/arrow-expand'
 import MdiPlus from '~icons/mdi/plus'
 
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
 const column = inject(ColumnInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
@@ -65,7 +68,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="value">
+      <template v-if="value && relatedTablePrimaryValueProp">
         <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index 2efc5928e4..bc2bda47b4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -1,7 +1,5 @@
 <script lang="ts" setup>
-import { computed, inject, ref, useProject } from '#imports'
-import { CellValueInj, ColumnInj } from '~/context'
-import { handleTZ, replaceUrlsWithLink } from '~/utils'
+import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column: any = inject(ColumnInj)
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index a549964392..cb54162498 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListChildItems from './components/ListChildItems.vue'
-import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  computed,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
+
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
+const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
 
 const column = inject(ColumnInj)!
 
@@ -85,7 +100,9 @@ const unlinkRef = async (rec: Record<string, any>) => {
         />
       </div>
     </template>
+
     <ListItems v-model="listItemsDlg" />
+
     <ListChildItems
       v-model="childListDlg"
       @attach-record="
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index c8436a7e89..dea7579e40 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -2,8 +2,7 @@
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj } from '~/context'
-import { computed, inject, provide, useColumn, useMetas } from '#imports'
+import { CellValueInj, ColumnInj, MetaInj, ReadonlyInj, computed, inject, provide, useColumn, useMetas } from '#imports'
 
 const { metas, getMeta } = useMetas()
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index a5f4655a5b..12a4290210 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,11 +1,25 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import ItemChip from './components/ItemChip.vue'
-import ListChildItems from './components/ListChildItems.vue'
-import ListItems from './components/ListItems.vue'
-import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
-import { CellValueInj, ColumnInj, EditModeInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import {
+  CellValueInj,
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  ReloadViewDataHookInj,
+  RowInj,
+  computed,
+  inject,
+  ref,
+  useProvideLTARStore,
+  useSmartsheetRowStoreOrThrow,
+} from '#imports'
+
+const ItemChip = defineAsyncComponent(() => import('./components/ItemChip.vue'))
+
+const ListItems = defineAsyncComponent(() => import('./components/ListItems.vue'))
+
+const ListChildItems = defineAsyncComponent(() => import('./components/ListChildItems.vue'))
 
 const column = inject(ColumnInj)!
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
index a08cb64234..68a3e3259b 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Rollup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CellValueInj } from '~/context'
+import { CellValueInj, inject } from '#imports'
 
 const value = inject(CellValueInj)
 </script>
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
index 6283b90536..48d79a6f8a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,6 +1,5 @@
-<script setup lang="ts">
-import { inject, ref, useLTARStoreOrThrow } from '#imports'
-import { ActiveCellInj, EditModeInj, IsFormInj } from '~/context'
+<script lang="ts" setup>
+import { ActiveCellInj, EditModeInj, IsFormInj, defineAsyncComponent, inject, ref, useLTARStoreOrThrow } from '#imports'
 
 interface Props {
   value?: string | number | boolean
@@ -11,6 +10,8 @@ const { value, item } = defineProps<Props>()
 
 const emit = defineEmits(['unlink'])
 
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
+
 const { relatedTableMeta } = useLTARStoreOrThrow()!
 
 const editEnabled = inject(EditModeInj)!
@@ -22,6 +23,12 @@ const isForm = inject(IsFormInj)!
 const expandedFormDlg = ref(false)
 </script>
 
+<script lang="ts">
+export default {
+  name: 'ItemChip',
+}
+</script>
+
 <template>
   <div
     class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
@@ -34,14 +41,16 @@ const expandedFormDlg = ref(false)
       <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
-    <SmartsheetExpandedForm
-      v-if="expandedFormDlg && editEnabled"
-      v-model="expandedFormDlg"
-      :row="{ row: item }"
-      :meta="relatedTableMeta"
-      load-row
-      use-meta-fields
-    />
+    <Suspense>
+      <ExpandedForm
+        v-if="editEnabled"
+        v-model="expandedFormDlg"
+        :row="{ row: item }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
index 8083fb0969..c8211f0643 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
 import { Empty, Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
-import { ColumnInj, EditModeInj, IsFormInj } from '~/context'
+import {
+  ColumnInj,
+  EditModeInj,
+  IsFormInj,
+  computed,
+  useLTARStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useVModel,
+  watch,
+} from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
+
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
+
 const vModel = useVModel(props, 'modelValue', emit)
 
 const isForm = inject(IsFormInj, ref(false))
@@ -120,14 +131,16 @@ const expandedFormRow = ref()
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
     </div>
 
-    <SmartsheetExpandedForm
-      v-if="expandedFormDlg && expandedFormRow"
-      v-model="expandedFormDlg"
-      :row="{ row: expandedFormRow }"
-      :meta="relatedTableMeta"
-      load-row
-      use-meta-fields
-    />
+    <Suspense>
+      <ExpandedForm
+        v-if="expandedFormRow"
+        v-model="expandedFormDlg"
+        :row="{ row: expandedFormRow }"
+        :meta="relatedTableMeta"
+        load-row
+        use-meta-fields
+      />
+    </Suspense>
   </component>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
index 29ba9e4195..25d512da45 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -2,13 +2,24 @@
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { Empty } from 'ant-design-vue'
-import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel } from '#imports'
-import { ColumnInj } from '~/context'
+import {
+  ColumnInj,
+  computed,
+  defineAsyncComponent,
+  inject,
+  ref,
+  useLTARStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useVModel,
+  watch,
+} from '#imports'
 
 const props = defineProps<{ modelValue: boolean }>()
 
 const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
+const ExpandedForm: any = defineAsyncComponent(() => import('../../smartsheet/expanded-form/index.vue'))
+
 const vModel = useVModel(props, 'modelValue', emit)
 
 const column = inject(ColumnInj)
@@ -118,14 +129,16 @@ const newRowState = computed(() => {
       </template>
       <a-empty v-else class="my-10" :image="Empty.PRESENTED_IMAGE_SIMPLE" />
 
-      <SmartsheetExpandedForm
-        v-if="expandedFormDlg"
-        v-model="expandedFormDlg"
-        :meta="relatedTableMeta"
-        :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
-        :state="newRowState"
-        use-meta-fields
-      />
+      <Suspense>
+        <ExpandedForm
+          v-if="expandedFormDlg"
+          v-model="expandedFormDlg"
+          :meta="relatedTableMeta"
+          :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
+          :state="newRowState"
+          use-meta-fields
+        />
+      </Suspense>
     </div>
   </a-modal>
 </template>

From 9a6f66ff404b00e540bb06013ae26dd1489a51a7 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 13:22:42 +0200
Subject: [PATCH 047/106] fix(gui-v2): disable httpsnippet library

---
 packages/nc-gui-v2/components.d.ts              | 13 ++++---------
 .../smartsheet/sidebar/menu/ApiSnippet.vue      | 17 ++---------------
 packages/nc-gui-v2/nuxt.config.ts               |  1 +
 3 files changed, 7 insertions(+), 24 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index e0a6e19f0f..abb6418425 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -12,7 +12,6 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
-    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -83,17 +82,14 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsWarning: typeof import('~icons/material-symbols/warning')['default']
     MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
-    MdiAccountIcon: typeof import('~icons/mdi/account-icon')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
-    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
-    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -108,9 +104,9 @@ declare module '@vue/runtime-core' {
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
-    MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
+    MdiDownloadOutline: typeof import('~icons/mdi/download-outline')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
     MdiDragVertical: typeof import('~icons/mdi/drag-vertical')['default']
     MdiDramaMasks: typeof import('~icons/mdi/drama-masks')['default']
@@ -122,10 +118,10 @@ declare module '@vue/runtime-core' {
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
     MdiFlag: typeof import('~icons/mdi/flag')['default']
+    MdiFlashOutline: typeof import('~icons/mdi/flash-outline')['default']
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
-    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -147,10 +143,8 @@ declare module '@vue/runtime-core' {
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
-    MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
-    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -159,7 +153,8 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
-    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
+    MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
+    MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index 3a061ab159..4c58cd9d27 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import HTTPSnippet from 'httpsnippet'
+// import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
 import { message } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
@@ -73,20 +73,7 @@ const apiUrl = $computed(
     new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/').href,
 )
 
-const snippet = $computed(
-  () =>
-    new HTTPSnippet({
-      method: 'GET',
-      headers: [{ name: 'xc-auth', value: token as string, comment: 'JWT Auth token' }],
-      url: apiUrl,
-      queryString: Object.entries(queryParams || {}).map(([name, value]) => {
-        return {
-          name,
-          value: String(value),
-        }
-      }),
-    }),
-)
+const snippet = $computed(() => '')
 
 const activeLang = $computed(() => langs.find((lang) => lang.name === selectedLangName))
 
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 53d9d28912..5bf68cad79 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -48,6 +48,7 @@ export default defineNuxtConfig({
   },
 
   vite: {
+    // todo: minifiy again
     build: {
       minify: false,
     },

From db007538bf1933a1cb1c332767d6af427e892658 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 13:27:32 +0200
Subject: [PATCH 048/106] chore(gui-v2): lint & cleanup

---
 .../components/smartsheet-column/EditOrAdd.vue    | 15 ++++++++-------
 .../[projectType]/[projectId]/index/index.vue     |  8 +-------
 2 files changed, 9 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index e2cd87a328..743e9c7d8f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -20,8 +20,6 @@ const advancedOptions = ref(false)
 
 const { getMeta } = useMetas()
 
-const formulaOptionsRef = ref()
-
 const editOrAddRef = ref<HTMLElement>()
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
@@ -83,17 +81,20 @@ onMounted(() => {
 })
 
 const handleClose = (e: MouseEvent) => {
+  const target = e.target as HTMLElement
+
   if (
-    e.target &&
+    target &&
     editOrAddRef?.value &&
-    !editOrAddRef.value.contains(e.target) &&
-    !e.target.closest('.ant-dropdown') &&
-    !e.target.closest('.ant-select') &&
-    !e.target.closest('.ant-select-item')
+    !editOrAddRef.value.contains(target) &&
+    !target.closest('.ant-dropdown') &&
+    !target.closest('.ant-select') &&
+    !target.closest('.ant-select-item')
   ) {
     emit('cancel')
   }
 }
+
 useEventListener(document, 'click', handleClose)
 </script>
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
index 4d4a39616c..693549d18b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index.vue
@@ -1,13 +1,7 @@
 <script setup lang="ts">
 import type { TabItem } from '~/composables'
 import { TabType } from '~/composables'
-import { TabMetaInj } from '~/context'
-import { useTabs, useUIPermission } from '#imports'
-import MdiPlusBoxOutline from '~icons/mdi/plus-box-outline'
-import MdiTableIcon from '~icons/mdi/table'
-import MdiCsvIcon from '~icons/mdi/file-document-outline'
-import MdiExcelIcon from '~icons/mdi/file-excel'
-import MdiJSONIcon from '~icons/mdi/code-json'
+import { TabMetaInj, useTabs, useUIPermission } from '#imports'
 import MdiAirTableIcon from '~icons/mdi/table-large'
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiAccountGroup from '~icons/mdi/account-group'

From 199579b5099de210486187445dd6302137e4b75f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 19:30:59 +0800
Subject: [PATCH 049/106] feat(gui-v2): includeM2M

---
 .../components/dashboard/settings/Misc.vue          | 13 +++++++++++++
 .../components/dashboard/settings/Modal.vue         |  5 +++++
 .../components/dashboard/settings/UIAcl.vue         |  6 ++++--
 packages/nc-gui-v2/composables/useGlobal/state.ts   |  1 +
 packages/nc-gui-v2/composables/useGlobal/types.ts   |  1 +
 packages/nc-gui-v2/composables/useProject.ts        |  5 ++++-
 6 files changed, 28 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/dashboard/settings/Misc.vue

diff --git a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
new file mode 100644
index 0000000000..8908ee9ccc
--- /dev/null
+++ b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const { includeM2M } = useGlobal()
+</script>
+
+<template>
+  <div class="flex flex-row w-full">
+    <div class="flex flex-column w-full">
+      <div class="flex flex-row items-center w-full mb-4 gap-2">
+        <a-checkbox v-model:checked="includeM2M">Show M2M Tables</a-checkbox>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index b4a5fbbcff..e280c7c8cb 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -5,6 +5,7 @@ import AuditTab from './AuditTab.vue'
 import AppStore from './AppStore.vue'
 import Metadata from './Metadata.vue'
 import UIAcl from './UIAcl.vue'
+import Misc from './Misc.vue'
 import ApiTokenManagement from '~/components/tabs/auth/ApiTokenManagement.vue'
 import UserManagement from '~/components/tabs/auth/UserManagement.vue'
 import StoreFrontOutline from '~icons/mdi/storefront-outline'
@@ -86,6 +87,10 @@ const tabsInfo: TabGroup = {
         title: 'UI Access Control',
         body: UIAcl,
       },
+      misc: {
+        title: 'Misc',
+        body: Misc,
+      },
     },
   },
   audit: {
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 4aaaf11afe..56d438baad 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -7,6 +7,8 @@ const { $api, $e } = useNuxtApp()
 
 const { project } = useProject()
 
+const { includeM2M } = useGlobal()
+
 const roles = $ref<string[]>(['editor', 'commenter', 'viewer'])
 
 let isLoading = $ref(false)
@@ -28,9 +30,9 @@ async function loadTableList() {
     if (!project.value?.id) return
 
     isLoading = true
-    // TODO includeM2M
+
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      includeM2M: false,
+      includeM2M: includeM2M.value,
     })
   } catch (e) {
     console.error(e)
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index c61b3829cf..3ef7430700 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -58,6 +58,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     },
     filterAutoSave: true,
     previewAs: null,
+    includeM2M: false,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 0e57222752..d9fc67463d 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -35,6 +35,7 @@ export interface StoredState {
   feedbackForm: FeedbackForm
   filterAutoSave: boolean
   previewAs: string | null
+  includeM2M: boolean
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index f11e5a1124..b32ddf329d 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -12,6 +12,7 @@ export function useProject(projectId?: MaybeRef<string>) {
   const project = useState<ProjectType>('project')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
+  const { includeM2M } = useGlobal()
 
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
@@ -27,7 +28,9 @@ export function useProject(projectId?: MaybeRef<string>) {
 
   async function loadTables() {
     if (project.value.id) {
-      const tablesResponse = await $api.dbTable.list(project.value.id)
+      const tablesResponse = await $api.dbTable.list(project.value.id, {
+        includeM2M: includeM2M.value,
+      })
       if (tablesResponse.list) tables.value = tablesResponse.list
     }
   }

From ba55e0597a0b2eb496f178b333b74771c24d161d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 19:40:14 +0800
Subject: [PATCH 050/106] feat(gui-v2): allow multiple tables in debug meta

---
 .../smartsheet/sidebar/toolbar/DebugMeta.vue   | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
index 9d63394eec..4f111b5a9a 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { MetaInj } from '#imports'
-
 const editorOpen = ref(false)
 
-const meta = $(inject(MetaInj))
+const tabKey = ref()
+
+const { metas } = $(useMetas())
+
+const { tables } = useTable()
+
+const localTables = tables.value.filter((t) => metas[t.id as string])
 </script>
 
 <template>
@@ -14,7 +18,11 @@ const meta = $(inject(MetaInj))
     <mdi-bug-outline class="cursor-pointer" @click="editorOpen = true" />
   </a-tooltip>
 
-  <a-modal v-model:visible="editorOpen" :footer="null" width="80%" :title="meta.title">
-    <MonacoEditor ref="jsonEditorRef" v-model="meta" class="h-max-[70vh]" />
+  <a-modal v-model:visible="editorOpen" :footer="null" width="80%">
+    <a-tabs v-model:activeKey="tabKey" type="card" closeable="false" class="shadow-sm">
+      <a-tab-pane v-for="table in localTables" :key="table.id" :tab="table.title">
+        <MonacoEditor v-model="metas[table.id]" class="h-max-[70vh]" :read-only="true" />
+      </a-tab-pane>
+    </a-tabs>
   </a-modal>
 </template>

From 3b3de7da22bd2003e134297cd01c4d8d1071f9d6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 13:56:45 +0200
Subject: [PATCH 051/106] chore(gui-v2): fix closed menu icon style

---
 .../nc-gui-v2/pages/[projectType]/[projectId]/index.vue     | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index d2e6d3d68c..0613ecb484 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -56,7 +56,11 @@ await loadTables()
         collapsible
         theme="light"
       >
-        <div style="height: var(--header-height)" class="flex items-center !bg-primary text-white px-1 pl-5 gap-2">
+        <div
+          style="height: var(--header-height)"
+          :class="isOpen ? 'pl-6' : ''"
+          class="flex items-center !bg-primary text-white px-1 gap-2"
+        >
           <div
             v-if="isOpen && !isSharedBase"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"

From 832f565a2ead48d28ab0b79e2e718cdb8a6e44ee Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 20:09:24 +0800
Subject: [PATCH 052/106] fix(gui-v2): includeM2M

---
 packages/nc-gui-v2/components/dashboard/settings/Misc.vue  | 6 ++++++
 packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue | 3 ++-
 packages/nc-gui-v2/composables/useProject.ts               | 3 ++-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
index 8908ee9ccc..d20b231175 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
@@ -1,5 +1,11 @@
 <script setup lang="ts">
 const { includeM2M } = useGlobal()
+const { loadTables } = useProject()
+
+watch(
+    includeM2M,
+    async () => await loadTables()
+)
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
index 56d438baad..381f1cfaf8 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UIAcl.vue
@@ -32,7 +32,8 @@ async function loadTableList() {
     isLoading = true
 
     tables = await $api.project.modelVisibilityList(project.value?.id, {
-      includeM2M: includeM2M.value,
+      // FIXME: type
+      includeM2M: includeM2M.value || '',
     })
   } catch (e) {
     console.error(e)
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index b32ddf329d..8c830507f3 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -29,7 +29,8 @@ export function useProject(projectId?: MaybeRef<string>) {
   async function loadTables() {
     if (project.value.id) {
       const tablesResponse = await $api.dbTable.list(project.value.id, {
-        includeM2M: includeM2M.value,
+        // FIXME: type
+        includeM2M: includeM2M.value || '',
       })
       if (tablesResponse.list) tables.value = tablesResponse.list
     }

From a0fa1c169dd0871326d541c0c89e38d9f18f076e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 14:09:53 +0200
Subject: [PATCH 053/106] refactor(gui-v2): show sidebar toggle on hover

# What's changed?

* delay toggle tooltips and view create tooltips by 1s
* cleanup imports
* fix some minor padding issues
---
 packages/nc-gui-v2/components.d.ts            |  9 +++
 .../components/dashboard/TreeView.vue         |  2 +-
 .../components/smartsheet/Pagination.vue      |  2 +-
 .../smartsheet/sidebar/MenuBottom.vue         |  8 +--
 .../components/smartsheet/sidebar/index.vue   | 43 ++++++++------
 .../smartsheet/sidebar/menu/ApiSnippet.vue    |  2 -
 packages/nc-gui-v2/nuxt.config.ts             |  3 +
 .../pages/[projectType]/[projectId]/index.vue | 59 +++++++++++++------
 8 files changed, 85 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index abb6418425..bb21bcdfd3 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -84,12 +85,14 @@ declare module '@vue/runtime-core' {
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -102,6 +105,7 @@ declare module '@vue/runtime-core' {
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
@@ -114,6 +118,7 @@ declare module '@vue/runtime-core' {
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
@@ -122,6 +127,7 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -139,12 +145,14 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -153,6 +161,7 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/dashboard/TreeView.vue b/packages/nc-gui-v2/components/dashboard/TreeView.vue
index 2267c3e197..7e5ad0f52a 100644
--- a/packages/nc-gui-v2/components/dashboard/TreeView.vue
+++ b/packages/nc-gui-v2/components/dashboard/TreeView.vue
@@ -137,7 +137,7 @@ const activeTable = computed(() => {
 
 <template>
   <div class="nc-treeview-container flex flex-col">
-    <div class="px-6 py-[8.75px] border-b-1 nc-filter-input">
+    <div class="px-6 py-[9px] border-b-1 nc-filter-input">
       <div class="flex items-center bg-gray-50 rounded relative">
         <a-input
           v-model:value="filterQuery"
diff --git a/packages/nc-gui-v2/components/smartsheet/Pagination.vue b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
index 1b0acb3c05..d4470540f9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Pagination.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Pagination.vue
@@ -17,7 +17,7 @@ const page = computed({
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div class="flex items-center mb-1">
     <span v-if="count !== null && count !== Infinity" class="caption ml-5 text-gray-500">
       {{ count }} record{{ count !== 1 ? 's' : '' }}
     </span>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index c947baefd1..13b126c02e 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -46,7 +46,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
         @click="onOpenModal(ViewTypes.GRID)"
       >
-        <a-tooltip placement="left">
+        <a-tooltip mouse-enter-delay="1000" placement="left">
           <template #title>
             {{ $t('msg.info.addView.grid') }}
           </template>
@@ -68,7 +68,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
         @click="onOpenModal(ViewTypes.GALLERY)"
       >
-        <a-tooltip placement="left">
+        <a-tooltip mouse-enter-delay="1000" placement="left">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
           </template>
@@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
         @click="onOpenModal(ViewTypes.FORM)"
       >
-        <a-tooltip placement="left">
+        <a-tooltip mouse-enter-delay="1000" placement="left">
           <template #title>
             {{ $t('msg.info.addView.form') }}
           </template>
@@ -111,7 +111,7 @@ function onOpenModal(type: ViewTypes, title = '') {
 
     <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
 
-    <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
+    <div class="flex-auto justify-end flex flex-col gap-3 mt-3">
       <button
         v-if="isUIAllowed('virtualViewsCreateOrEdit')"
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded border transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease !text-xs"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 6e06661cc4..338143de10 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -3,7 +3,7 @@ import type { FormType, GalleryType, GridType, KanbanType, ViewTypes } from 'noc
 import MenuTop from './MenuTop.vue'
 import MenuBottom from './MenuBottom.vue'
 import Toolbar from './toolbar/index.vue'
-import { computed, inject, provide, ref, useRoute, useRouter, useViews, watch } from '#imports'
+import { computed, inject, provide, ref, useElementHover, useRoute, useRouter, useViews, watch } from '#imports'
 import { ActiveViewInj, MetaInj, RightSidebarInj, ViewListInj } from '~/context'
 
 const meta = inject(MetaInj, ref())
@@ -25,6 +25,9 @@ const sidebarOpen = inject(RightSidebarInj, ref(true))
 
 const sidebarCollapsed = computed(() => !sidebarOpen.value)
 
+/** Sidebar ref */
+const sidebar = ref()
+
 /** View type to create from modal */
 let viewCreateType = $ref<ViewTypes>()
 
@@ -37,6 +40,8 @@ let selectedViewId = $ref('')
 /** is view creation modal open */
 let modalOpen = $ref(false)
 
+const isHovered = useElementHover(sidebar)
+
 /** Watch route param and change active view based on `viewTitle` */
 watch(
   [views, () => route.params.viewTitle],
@@ -74,6 +79,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 
 <template>
   <a-layout-sider
+    ref="sidebar"
     :collapsed="sidebarCollapsed"
     collapsiple
     collapsed-width="50"
@@ -81,24 +87,27 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    <a-tooltip placement="left">
+    <a-tooltip mouse-enter-delay="1000" placement="left">
       <template #title> Toggle sidebar </template>
 
-      <div
-        class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
-      >
-        <MaterialSymbolsChevronRightRounded
-          v-if="sidebarOpen"
-          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-          @click="sidebarOpen = false"
-        />
-
-        <MaterialSymbolsChevronLeftRounded
-          v-else
-          class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-          @click="sidebarOpen = true"
-        />
-      </div>
+      <Transition name="layout">
+        <div
+          v-show="isHovered"
+          class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
+        >
+          <MaterialSymbolsChevronRightRounded
+            v-if="sidebarOpen"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            @click="sidebarOpen = false"
+          />
+
+          <MaterialSymbolsChevronLeftRounded
+            v-else
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            @click="sidebarOpen = true"
+          />
+        </div>
+      </Transition>
     </a-tooltip>
 
     <Toolbar v-if="sidebarOpen" class="flex items-center py-3 px-3 justify-between border-b-1" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
index 4c58cd9d27..31bd83a143 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -172,5 +172,3 @@ const afterVisibleChange = (visible: boolean) => {
     </div>
   </a-drawer>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 5bf68cad79..da1f361f7a 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -51,6 +51,9 @@ export default defineNuxtConfig({
     // todo: minifiy again
     build: {
       minify: false,
+      rollupOptions: {
+        external: 'httpsnippet',
+      },
     },
     css: {
       preprocessorOptions: {
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 0613ecb484..9a3e686753 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { navigateTo, onKeyStroke, provideSidebar, ref, useProject, useRoute, useTabs, useUIPermission } from '#imports'
+import {
+  navigateTo,
+  onKeyStroke,
+  openLink,
+  provideSidebar,
+  ref,
+  useElementHover,
+  useProject,
+  useRoute,
+  useTabs,
+  useUIPermission,
+} from '#imports'
 import { TabType } from '~/composables'
-import { openLink } from '~/utils'
 
 const route = useRoute()
 
@@ -20,6 +30,9 @@ const openDialogKey = ref<string>()
 
 const dropdownOpen = ref(false)
 
+/** Sidebar ref */
+const sidebar = ref()
+
 onKeyStroke(
   'Escape',
   () => {
@@ -42,12 +55,15 @@ function toggleDialog(value?: boolean, key?: string) {
 await loadProject()
 
 await loadTables()
+
+const isHovered = useElementHover(sidebar)
 </script>
 
 <template>
   <NuxtLayout id="content" class="flex">
     <template #sidebar>
       <a-layout-sider
+        ref="sidebar"
         :collapsed="!isOpen"
         width="250"
         collapsed-width="50"
@@ -68,6 +84,7 @@ await loadTables()
           >
             <img alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
           </div>
+
           <a
             v-if="isOpen && isSharedBase"
             class="w-[40px] min-w-[40px] transition-all duration-200 p-1 cursor-pointer transform hover:scale-105"
@@ -81,6 +98,7 @@ await loadTables()
             <template v-if="isOpen">
               <div class="text-xl font-semibold truncate">{{ project.title }}</div>
             </template>
+
             <template v-else>
               <MdiFolder class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
             </template>
@@ -115,6 +133,7 @@ await loadTables()
 
                         <div class="flex items-center gap-1">
                           <div class="group-hover:(!text-primary)">ID:</div>
+
                           <div class="text-xs group-hover:text-pink-500 truncate font-italic">{{ project.id }}</div>
                         </div>
                       </div>
@@ -216,24 +235,27 @@ await loadTables()
           </a-dropdown>
         </div>
 
-        <a-tooltip placement="right">
+        <a-tooltip mouse-enter-delay="1000" placement="right">
           <template #title> Toggle table list </template>
 
-          <div
-            class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
-          >
-            <MaterialSymbolsChevronLeftRounded
-              v-if="isOpen"
-              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-              @click="toggle(false)"
-            />
-
-            <MaterialSymbolsChevronRightRounded
-              v-else
-              class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
-              @click="toggle(true)"
-            />
-          </div>
+          <Transition name="layout">
+            <div
+              v-show="isHovered"
+              class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
+            >
+              <MaterialSymbolsChevronLeftRounded
+                v-if="isOpen"
+                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                @click="toggle(false)"
+              />
+
+              <MaterialSymbolsChevronRightRounded
+                v-else
+                class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+                @click="toggle(true)"
+              />
+            </div>
+          </Transition>
         </a-tooltip>
 
         <DashboardTreeView v-show="isOpen" />
@@ -241,6 +263,7 @@ await loadTables()
     </template>
 
     <dashboard-settings-modal v-model="dialogOpen" :open-key="openDialogKey" />
+
     <NuxtPage />
 
     <GeneralPreviewAs float />

From 3474ccff30f40c0ae5dffd947191686a247640c0 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 14:19:33 +0200
Subject: [PATCH 054/106] refactor(gui-v2): always show toggle when sidebar is
 collapsed

---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue   | 2 +-
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 338143de10..3270c30979 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -92,7 +92,7 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
 
       <Transition name="layout">
         <div
-          v-show="isHovered"
+          v-show="sidebarCollapsed || isHovered"
           class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
         >
           <MaterialSymbolsChevronRightRounded
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9a3e686753..85142ec57f 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -240,7 +240,7 @@ const isHovered = useElementHover(sidebar)
 
           <Transition name="layout">
             <div
-              v-show="isHovered"
+              v-show="!isOpen || isHovered"
               class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
             >
               <MaterialSymbolsChevronLeftRounded

From e8de580842225401da580c13c423316e11029255 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:07:34 +0200
Subject: [PATCH 055/106] refactor(gui-v2): project list page style fixes

---
 packages/nc-gui-v2/assets/style-v2.scss       |  64 +++++----
 .../components/general/SocialCard.vue         | 124 ++++++++++--------
 .../nc-gui-v2/components/general/Sponsors.vue |   6 +-
 .../smartsheet/sidebar/MenuBottom.vue         |   6 +-
 .../smartsheet/sidebar/RenameableMenuItem.vue |   3 +-
 .../components/smartsheet/sidebar/index.vue   |   4 +-
 .../composables/useUIPermission/index.ts      |  23 ++--
 .../pages/[projectType]/[projectId]/index.vue |   4 +-
 packages/nc-gui-v2/pages/index/index.vue      |  27 ++--
 9 files changed, 143 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui-v2/assets/style-v2.scss b/packages/nc-gui-v2/assets/style-v2.scss
index f15d6b19d6..49355fa497 100644
--- a/packages/nc-gui-v2/assets/style-v2.scss
+++ b/packages/nc-gui-v2/assets/style-v2.scss
@@ -31,31 +31,6 @@ nav .v-list {
   @apply dark:bg-white
 }
 
-.page-enter-active,
-.page-leave-active,
-.layout-enter-active,
-.layout-leave-active {
-  @apply transition-opacity duration-300 ease-in-out;
-}
-
-.page-enter,
-.page-leave-active,
-.layout-enter,
-.layout-leave-active {
-  @apply opacity-0;
-}
-
-.slide-enter-active,
-.slide-leave-active {
-  @apply transition-all duration-200 ease-in-out;
-  transform: translate(100%, 0);
-}
-
-.slide-enter,
-.slide-leave-active {
-  transform: translate(-100%, 0);
-}
-
 a {
   @apply prose text-primary underline hover:opacity-75 dark:(text-secondary) hover:(opacity-75);
 }
@@ -153,3 +128,42 @@ html {
     background-position: 0% 22%
   }
 }
+
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity duration-300 ease-in-out;
+}
+
+.page-enter,
+.page-leave-active,
+.layout-enter,
+.layout-leave-active {
+  @apply opacity-0;
+}
+
+.slide-enter-active,
+.slide-leave-active {
+  @apply transition-all duration-200 ease-in-out;
+  transform: translate(100%, 0);
+}
+
+.slide-enter,
+.slide-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.glow-enter-active,
+.glow-leave-active {
+  @apply transition-all duration-300 ease-in-out;
+}
+
+.glow-enter-active {
+  @apply ring ring-xl;
+}
+
+.glow-enter,
+.glow-leave-active {
+  @apply opacity-0;
+}
\ No newline at end of file
diff --git a/packages/nc-gui-v2/components/general/SocialCard.vue b/packages/nc-gui-v2/components/general/SocialCard.vue
index 4b2e51ad51..6ca98e0114 100644
--- a/packages/nc-gui-v2/components/general/SocialCard.vue
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@@ -7,67 +7,75 @@ const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
 </script>
 
 <template>
-  <a-list class="w-[300px] pa-3 elevation-4 rounded-xl mr-10" dense>
-    <a-list-item class="cursor-pointer">
-      <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-github class="mx-3 text-lg" />
-          <div v-if="isRtlLang">
-            <!-- us on Github -->
-            {{ $t('labels.community.starUs2') }}
-            <!-- Star -->
-            {{ $t('labels.community.starUs1') }}
-            <mdi-star-outline />
+  <a-card :body-style="{ padding: '0' }" class="w-[300px] shadow-sm rounded-lg">
+    <a-list class="w-full" dense>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-github class="mx-3 text-lg" />
+            <div v-if="isRtlLang">
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline />
+            </div>
+            <div v-else class="flex items-center">
+              <!-- Star -->
+              {{ $t('labels.community.starUs1') }}
+              <mdi-star-outline class="mx-1" />
+              <!-- us on Github -->
+              {{ $t('labels.community.starUs2') }}
+            </div>
           </div>
-          <div v-else class="flex items-center">
-            <!-- Star -->
-            {{ $t('labels.community.starUs1') }}
-            <mdi-star-outline class="mx-1" />
-            <!-- us on Github -->
-            {{ $t('labels.community.starUs2') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+            <!-- Book a Free DEMO -->
+            <div>
+              {{ $t('labels.community.bookDemo') }}
+            </div>
           </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
-          <!-- Book a Free DEMO -->
-          <div>
-            {{ $t('labels.community.bookDemo') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+            <!-- Get your questions answered -->
+            <div>
+              {{ $t('labels.community.getAnswered') }}
+            </div>
           </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
-          <!-- Get your questions answered -->
-          <div>
-            {{ $t('labels.community.getAnswered') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item>
+        <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+          <div class="flex items-center text-sm">
+            <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+            <!-- Follow NocoDB -->
+            <div>
+              {{ $t('labels.community.followNocodb') }}
+            </div>
           </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item>
-      <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
-        <div class="flex items-center text-sm">
-          <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
-          <!-- Follow NocoDB -->
-          <div>
-            {{ $t('labels.community.followNocodb') }}
+        </nuxt-link>
+      </a-list-item>
+      <a-list-item v-t="['e:hiring']">
+        <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+          <div class="flex items-center text-sm">
+            <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
           </div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-    <a-list-item v-t="['e:hiring']">
-      <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
-        <div class="flex items-center text-sm">
-          <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
-        </div>
-      </nuxt-link>
-    </a-list-item>
-  </a-list>
+        </nuxt-link>
+      </a-list-item>
+    </a-list>
+  </a-card>
 </template>
+
+<style scoped>
+:deep(.ant-list-item) {
+  @apply hover:(bg-gray-100 !text-primary);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/general/Sponsors.vue b/packages/nc-gui-v2/components/general/Sponsors.vue
index ccc2c7b5b8..8700a04108 100644
--- a/packages/nc-gui-v2/components/general/Sponsors.vue
+++ b/packages/nc-gui-v2/components/general/Sponsors.vue
@@ -7,9 +7,9 @@ const { nav = false } = defineProps<Props>()
 </script>
 
 <template>
-  <a-card class="w-[300px] ma-10 shadow-lg rounded-lg">
+  <a-card class="w-[300px] shadow-sm rounded-lg">
     <template #cover>
-      <img class="max-h-[180px]" alt="cover" src="/ants-leaf-cutter.jpeg" />
+      <img class="max-h-[180px] rounded-t-lg" alt="cover" src="/ants-leaf-cutter.jpeg" />
     </template>
 
     <a-card-meta>
@@ -26,7 +26,7 @@ const { nav = false } = defineProps<Props>()
 
     <div class="flex justify-center">
       <nuxt-link href="https://github.com/sponsors/nocodb" target="_blank">
-        <a-button class="!shadow" size="large">
+        <a-button class="!shadow rounded" size="large">
           <div class="flex items-center">
             <mdi-cards-heart class="text-red-500 mr-2" />
             {{ $t('activity.sponsorUs') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 13b126c02e..e0558071d8 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -46,7 +46,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !my-0 !h-[30px] nc-create-3-view"
         @click="onOpenModal(ViewTypes.GRID)"
       >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.grid') }}
           </template>
@@ -68,7 +68,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !-my0 !h-[30px] nc-create-2-view"
         @click="onOpenModal(ViewTypes.GALLERY)"
       >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.gallery') }}
           </template>
@@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
         class="group !flex !items-center !my-0 !h-[30px] nc-create-1-view"
         @click="onOpenModal(ViewTypes.FORM)"
       >
-        <a-tooltip mouse-enter-delay="1000" placement="left">
+        <a-tooltip :mouse-enter-delay="1" placement="left">
           <template #title>
             {{ $t('msg.info.addView.form') }}
           </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
index 451372acc7..b4a30d59fb 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -2,7 +2,7 @@
 import type { ViewTypes } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import { viewIcons } from '~/utils'
-import { onKeyStroke, useDebounceFn, useNuxtApp, useVModel } from '#imports'
+import { onKeyStroke, useDebounceFn, useNuxtApp, useUIPermission, useVModel } from '#imports'
 
 interface Props {
   view: Record<string, any>
@@ -163,6 +163,7 @@ function onStopEdit() {
       </div>
 
       <a-input v-if="isEditing" :ref="focusInput" v-model:value="vModel.title" @blur="onCancel" @keydown="onKeyDown($event)" />
+
       <div v-else>{{ vModel.alias || vModel.title }}</div>
 
       <div class="flex-1" />
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index 3270c30979..e9e0e00b93 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -87,10 +87,10 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
     class="relative shadow-md h-full"
     theme="light"
   >
-    <a-tooltip mouse-enter-delay="1000" placement="left">
+    <a-tooltip :mouse-enter-delay="1" placement="left">
       <template #title> Toggle sidebar </template>
 
-      <Transition name="layout">
+      <Transition name="glow">
         <div
           v-show="sidebarCollapsed || isHovered"
           class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center p-[1px] absolute top-1/2 left-[-1rem] shadow bg-gray-100 rounded-full"
diff --git a/packages/nc-gui-v2/composables/useUIPermission/index.ts b/packages/nc-gui-v2/composables/useUIPermission/index.ts
index b966adae77..9ac28afbe4 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/index.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/index.ts
@@ -1,14 +1,15 @@
 import type { Permission } from './rolePermissions'
 import rolePermissions from './rolePermissions'
-import { USER_PROJECT_ROLES, useNuxtApp, useState } from '#imports'
+import { USER_PROJECT_ROLES, useGlobal, useState } from '#imports'
 
 export function useUIPermission() {
-  const { $state } = useNuxtApp()
+  const { user, previewAs } = useGlobal()
+
   const projectRoles = useState<Record<string, boolean>>(USER_PROJECT_ROLES, () => ({}))
 
-  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
-    const user = $state.user
-    let userRoles = user?.value?.roles || {}
+  const getRoles = (skipPreviewAs = false) => {
+    let userRoles = user.value?.roles || {}
+
     // if string populate key-value paired object
     if (typeof userRoles === 'string') {
       userRoles = userRoles.split(',').reduce<Record<string, boolean>>((acc, role) => {
@@ -20,16 +21,20 @@ export function useUIPermission() {
     // merge user role and project specific user roles
     let roles = {
       ...userRoles,
-      ...(projectRoles?.value || {}),
+      ...projectRoles.value,
     }
 
-    if ($state.previewAs.value && !skipPreviewAs) {
+    if (previewAs.value && !skipPreviewAs) {
       roles = {
-        [$state.previewAs.value]: true,
+        [previewAs.value]: true,
       }
     }
 
-    return Object.entries<boolean>(roles).some(([role, hasRole]) => {
+    return roles
+  }
+
+  const isUIAllowed = (permission: Permission | string, skipPreviewAs = false) => {
+    return Object.entries<boolean>(getRoles(skipPreviewAs)).some(([role, hasRole]) => {
       const rolePermission = rolePermissions[role as keyof typeof rolePermissions] as '*' | Record<Permission, true>
 
       return hasRole && (rolePermission === '*' || rolePermission?.[permission as Permission])
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 85142ec57f..9b5f91a176 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -235,10 +235,10 @@ const isHovered = useElementHover(sidebar)
           </a-dropdown>
         </div>
 
-        <a-tooltip mouse-enter-delay="1000" placement="right">
+        <a-tooltip :mouse-enter-delay="1" placement="right">
           <template #title> Toggle table list </template>
 
-          <Transition name="layout">
+          <Transition name="glow">
             <div
               v-show="!isOpen || isHovered"
               class="group color-transition cursor-pointer hover:ring active:ring-pink-500 z-1 flex items-center absolute top-1/2 right-[-0.75rem] shadow bg-gray-100 rounded-full"
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 1be4f69efe..f6fca6899e 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -54,11 +54,10 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <a-row>
-      <a-col :span="8"></a-col>
-      <a-col :span="8" class="!bg-red">
-        <a-card :loading="isLoading" class="mx-auto mt-10 !max-w-[600px] shadow-lg">
-          <h1 class="text-center text-4xl pa-2 nc-project-page-title flex align-center justify-center gap-2 text-gray-600">
+    <div class="flex p-12">
+      <div class="w-2/3 flex-auto">
+        <a-card :loading="isLoading" class="!rounded-lg shadow">
+          <h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
             <!-- My Projects -->
             <b>{{ $t('title.myProject') }}</b>
 
@@ -151,16 +150,14 @@ onMounted(() => {
             </a-table-column>
           </a-table>
         </a-card>
-      </a-col>
-      <a-col :span="8" class="">
-        <div class="justify-end flex">
-          <GeneralSponsors />
-        </div>
-        <div class="justify-end flex">
-          <GeneralSocialCard />
-        </div>
-      </a-col>
-    </a-row>
+      </div>
+
+      <div class="w-1/3 flex-auto flex flex-col justify-center items-center gap-4">
+        <GeneralSponsors />
+
+        <GeneralSocialCard />
+      </div>
+    </div>
   </NuxtLayout>
 </template>
 

From b23b8235a9edcccfbd1eb4193852cae75c63f45e Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:09:52 +0200
Subject: [PATCH 056/106] refactor(gui-v2): set right sidebar to collapsed as
 default

---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index e1dbca365d..012e0a4b38 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -34,7 +34,7 @@ provide(ActiveViewInj, activeView)
 provide(IsLockedInj, false)
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
-provide(RightSidebarInj, ref(true))
+provide(RightSidebarInj, ref(false))
 
 const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 

From fad28a45cb300bb4787374b8a7de24eb895acab0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Mon, 15 Aug 2022 21:24:56 +0800
Subject: [PATCH 057/106] fix(gui-v2): disable share button in some pages

---
 packages/nc-gui-v2/layouts/base.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 6ca23e21d3..9e8acda62b 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -49,7 +49,13 @@ const logout = () => {
 
           <div class="flex items-center mr-4">
             <a-button
-              v-if="isUIAllowed('newUser')"
+              v-if="
+                isUIAllowed('newUser') &&
+                route.name !== 'index' &&
+                route.name !== 'project-index-create' &&
+                route.name !== 'project-index-create-external' &&
+                route.name !== 'index-user-index'
+              "
               size="middle"
               type="primary"
               class="!bg-white !text-primary rounded"

From fdd37c31d998afae52acd3c3907cec38eaa9b56f Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:26:50 +0200
Subject: [PATCH 058/106] refactor(gui-v2): align project list into center

---
 packages/nc-gui-v2/pages/index/index.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index f6fca6899e..111ec3ce3e 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -54,8 +54,12 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <div class="flex p-12">
-      <div class="w-2/3 flex-auto">
+    <div class="flex gap-6 py-6 px-12">
+      <div>
+        <GeneralSponsors />
+      </div>
+
+      <div class="min-w-2/4 flex-auto">
         <a-card :loading="isLoading" class="!rounded-lg shadow">
           <h1 class="text-center text-4xl p-2 nc-project-page-title flex items-center justify-center gap-2 text-gray-600">
             <!-- My Projects -->
@@ -152,9 +156,7 @@ onMounted(() => {
         </a-card>
       </div>
 
-      <div class="w-1/3 flex-auto flex flex-col justify-center items-center gap-4">
-        <GeneralSponsors />
-
+      <div>
         <GeneralSocialCard />
       </div>
     </div>

From e1ff8e806c4be3528923a5686cf651d38d0b3260 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 15:57:39 +0200
Subject: [PATCH 059/106] chore(gui-v2): cleanup styles and imports

---
 packages/nc-gui-v2/layouts/base.vue      |  2 +-
 packages/nc-gui-v2/pages/index/index.vue | 35 ++++++++++++++++++------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 6ca23e21d3..fc2526711e 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -113,7 +113,7 @@ const logout = () => {
         </Transition>
       </a-tooltip>
 
-      <div class="w-full h-full overflow-hidden">
+      <div style="height: calc(100% - var(--header-height))" class="w-full h-full overflow-hidden">
         <slot />
       </div>
     </a-layout>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 111ec3ce3e..c12ae11436 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -1,8 +1,17 @@
 <script lang="ts" setup>
 import { Modal, message } from 'ant-design-vue'
 import type { ProjectType } from 'nocodb-sdk'
-import { computed, navigateTo, onMounted, ref, useApi, useNuxtApp, useSidebar } from '#imports'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import {
+  computed,
+  extractSdkResponseErrorMsg,
+  navigateTo,
+  onMounted,
+  ref,
+  useApi,
+  useNuxtApp,
+  useSidebar,
+  useUIPermission,
+} from '#imports'
 
 const { $e } = useNuxtApp()
 
@@ -54,8 +63,8 @@ onMounted(() => {
 
 <template>
   <NuxtLayout>
-    <div class="flex gap-6 py-6 px-12">
-      <div>
+    <div class="flex flex-col md:flex-row flex-wrap gap-6 py-6 px-12">
+      <div class="hidden xl:(block)">
         <GeneralSponsors />
       </div>
 
@@ -69,16 +78,17 @@ onMounted(() => {
               v-t="['a:project:refresh']"
               class="text-sm text-gray-500 hover:text-primary mt-1 cursor-pointer"
               @click="loadProjects"
-            ></MdiRefresh>
+            />
           </h1>
 
-          <div class="flex mb-6">
+          <div class="order-1 flex mb-6">
             <a-input-search
               v-model:value="filterQuery"
               class="max-w-[200px] nc-project-page-search"
               :placeholder="$t('activity.searchProject')"
-            ></a-input-search>
-            <div class="flex-grow"></div>
+            />
+
+            <div class="flex-grow" />
 
             <a-dropdown v-if="isUIAllowed('projectCreate', true)" @click.stop>
               <a-button class="nc-new-project-menu !shadow">
@@ -96,14 +106,17 @@ onMounted(() => {
                     @click="navigateTo('/project/create')"
                   >
                     <MdiPlus class="col-span-2 mr-1 mt-[1px] text-primary text-lg" />
+
                     <div class="col-span-10 text-sm xl:text-md">{{ $t('activity.createProject') }}</div>
                   </div>
+
                   <div
                     v-t="['c:project:create:extdb']"
                     class="grid grid-cols-12 cursor-pointer hover:bg-gray-200 flex items-center p-2 nc-create-external-db-project"
                     @click="navigateTo('/project/create-external')"
                   >
                     <MdiDatabaseOutline class="col-span-2 mr-1 mt-[1px] text-green-500 text-lg" />
+
                     <div class="col-span-10 text-sm xl:text-md" v-html="$t('activity.createProjectExtended.extDB')" />
                   </div>
                 </a-menu>
@@ -156,8 +169,12 @@ onMounted(() => {
         </a-card>
       </div>
 
-      <div>
+      <div class="flex gap-6 md:block">
         <GeneralSocialCard />
+
+        <div class="block mt-0 md:(!mt-6) xl:hidden">
+          <GeneralSponsors />
+        </div>
       </div>
     </div>
   </NuxtLayout>

From 903a53bc4ac56b29c047b8bccca8fd50e67753d8 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 16:05:19 +0200
Subject: [PATCH 060/106] revert(gui-v2): height calculation

---
 packages/nc-gui-v2/layouts/base.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index fc2526711e..6ca23e21d3 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -113,7 +113,7 @@ const logout = () => {
         </Transition>
       </a-tooltip>
 
-      <div style="height: calc(100% - var(--header-height))" class="w-full h-full overflow-hidden">
+      <div class="w-full h-full overflow-hidden">
         <slot />
       </div>
     </a-layout>

From 1d499633501c0f4a4ffbcdba1bc87cead31fced1 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 16:18:43 +0200
Subject: [PATCH 061/106] feat(gui-v2): reopen attachment modal on carousel
 close

# What's changed?

* When modal was used to open the image carousel, reopen the modal when carousel is closed
---
 packages/nc-gui-v2/components.d.ts            |  2 ++
 .../components/cell/attachment/Carousel.vue   |  6 +-----
 .../components/cell/attachment/Modal.vue      | 21 ++++++++++++++++---
 .../components/cell/attachment/index.vue      |  3 +--
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index abb6418425..4b246db180 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -71,6 +71,8 @@ declare module '@vue/runtime-core' {
     IcRoundEdit: typeof import('~icons/ic/round-edit')['default']
     IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
     IcRoundSearch: typeof import('~icons/ic/round-search')['default']
+    MaterialSymbolsArrowCircleLeftRounded: typeof import('~icons/material-symbols/arrow-circle-left-rounded')['default']
+    MaterialSymbolsArrowCircleRightRounded: typeof import('~icons/material-symbols/arrow-circle-right-rounded')['default']
     MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
diff --git a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
index 0b3b91cf3f..902cb57153 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Carousel.vue
@@ -1,11 +1,7 @@
 <script lang="ts" setup>
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
-import { isImage } from '~/utils'
-import { computed, onClickOutside, ref } from '#imports'
-import MaterialSymbolsArrowCircleRightRounded from '~icons/material-symbols/arrow-circle-right-rounded'
-import MaterialSymbolsArrowCircleLeftRounded from '~icons/material-symbols/arrow-circle-left-rounded'
-import MdiCloseCircle from '~icons/mdi/close-circle'
+import { computed, isImage, onClickOutside, ref } from '#imports'
 
 const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
 
diff --git a/packages/nc-gui-v2/components/cell/attachment/Modal.vue b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
index c17763bdce..7ffec69130 100644
--- a/packages/nc-gui-v2/components/cell/attachment/Modal.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/Modal.vue
@@ -2,8 +2,7 @@
 import { onKeyDown } from '@vueuse/core'
 import { useAttachmentCell } from './utils'
 import { useSortable } from './sort'
-import { ref, useDropZone, useUIPermission } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { isImage, openLink, ref, useDropZone, useUIPermission, watch } from '#imports'
 
 const { isUIAllowed } = useUIPermission()
 
@@ -39,6 +38,22 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
+
+function onClick(item: Record<string, any>) {
+  selectedImage.value = item
+  modalVisible.value = false
+
+  const stopHandle = watch(selectedImage, (nextImage, _, onCleanup) => {
+    if (!nextImage) {
+      setTimeout(() => {
+        modalVisible.value = true
+      }, 50)
+      stopHandle?.()
+    }
+
+    onCleanup(() => stopHandle?.())
+  })
+}
 </script>
 
 <template>
@@ -103,7 +118,7 @@ onKeyDown('Escape', () => {
                 v-if="isImage(item.title, item.mimetype)"
                 :style="{ backgroundImage: `url('${item.url}')` }"
                 class="w-full h-full bg-contain bg-center bg-no-repeat"
-                @click.stop="() => (selectedImage = item) && (modalVisible = false)"
+                @click.stop="onClick(item)"
               />
 
               <component
diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 0a962539fb..33db7c7b83 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -4,8 +4,7 @@ import { useProvideAttachmentCell } from './utils'
 import { useSortable } from './sort'
 import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
-import { isImage, openLink } from '~/utils'
+import { computed, isImage, openLink, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 
 interface Props {
   modelValue: string | Record<string, any>[] | null

From 781e5c5b5e55f63bf6049bd8056419a6bf45c18b Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Aug 2022 16:25:40 +0200
Subject: [PATCH 062/106] chore(gui-v2): update submenu styles

---
 packages/nc-gui-v2/components.d.ts             |  9 +++++++++
 .../nc-gui-v2/components/general/PreviewAs.vue | 18 +++++++++++-------
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 4b246db180..465c71af0f 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -86,12 +87,14 @@ declare module '@vue/runtime-core' {
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -104,6 +107,7 @@ declare module '@vue/runtime-core' {
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
@@ -116,6 +120,7 @@ declare module '@vue/runtime-core' {
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
@@ -124,6 +129,7 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -141,12 +147,14 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -155,6 +163,7 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/general/PreviewAs.vue b/packages/nc-gui-v2/components/general/PreviewAs.vue
index e7d2e1cc88..2ac4a21ef2 100644
--- a/packages/nc-gui-v2/components/general/PreviewAs.vue
+++ b/packages/nc-gui-v2/components/general/PreviewAs.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { onUnmounted, useEventListener, useGlobal, watch } from '#imports'
-import { useState } from '#app'
+import { onUnmounted, useEventListener, useGlobal, useState, watch } from '#imports'
 import MdiAccountStar from '~icons/mdi/account-star'
 import MdiAccountHardHat from '~icons/mdi/account-hard-hat'
 import MdiAccountEdit from '~icons/mdi/account-edit'
@@ -54,13 +53,14 @@ watch(previewAs, () => window.location.reload())
     :style="{ top: position.y, left: position.x }"
   >
     <MdiDrag style="cursor: move" class="text-white" @mousedown="mouseDown" />
+
     <div class="divider" />
 
     <div class="pointer flex items-center gap-4">
       <span>Preview as :</span>
 
       <a-radio-group v-model:value="previewAs" name="radioGroup">
-        <a-radio v-for="role in roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
+        <a-radio v-for="role of roleList" :key="role.title" class="capitalize !text-white" :value="role.title"
           >{{ role.title }}
         </a-radio>
       </a-radio-group>
@@ -77,8 +77,8 @@ watch(previewAs, () => window.location.reload())
   <template v-else>
     <template v-for="role of roleList" :key="role.title">
       <a-menu-item :class="`pointer nc-preview-${role.title}`" @click="previewAs = role.title">
-        <div class="p-1 flex gap-2 items-center">
-          <component :is="roleIcon[role.title]" />
+        <div class="nc-project-menu-item group">
+          <component :is="roleIcon[role.title]" class="group-hover:text-pink-500" />
 
           <span class="capitalize" :class="{ 'x-active--text': role.title === previewAs }">{{ role.title }}</span>
         </div>
@@ -87,8 +87,8 @@ watch(previewAs, () => window.location.reload())
 
     <template v-if="previewAs">
       <a-menu-item @click="previewAs = null">
-        <div class="p-1 flex gap-2 items-center">
-          <mdi-close />
+        <div class="nc-project-menu-item group">
+          <MdiClose class="group-hover:text-pink-500" />
           <!-- Reset Preview -->
           <span class="text-capitalize text-xs whitespace-nowrap">{{ $t('activity.resetReview') }}</span>
         </div>
@@ -98,6 +98,10 @@ watch(previewAs, () => window.location.reload())
 </template>
 
 <style scoped>
+.nc-project-menu-item {
+  @apply cursor-pointer flex items-center gap-2 py-2 hover:text-primary after:(content-[''] absolute top-0 left-0 bottom-0 right-0 w-full h-full bg-current opacity-0 transition transition-opactity duration-100) hover:(after:(opacity-5));
+}
+
 .floating-reset-btn {
   @apply z-1000 index-100 fixed text-white
   @apply flex items-center overflow-hidden whitespace-nowrap gap-4 rounded shadow-md;

From bb5fd37d9639972acf135e89fa2037ad9c78dcad Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 15 Aug 2022 20:14:55 +0530
Subject: [PATCH 063/106] test: CY markers for form view

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../nc-gui-v2/components/smartsheet/Form.vue  | 66 ++++++++++++++-----
 1 file changed, 51 insertions(+), 15 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index b49ed441c1..b75673fc52 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -337,7 +337,11 @@ onMounted(async () => {
     </a-col>
   </a-row>
   <a-row v-else class="h-full flex">
-    <a-col v-if="isEditable" :span="8" class="bg-[#f7f7f7] shadow-md pa-5 h-full overflow-auto scrollbar-thin-primary">
+    <a-col
+      v-if="isEditable"
+      :span="8"
+      class="bg-[#f7f7f7] shadow-md pa-5 h-full overflow-auto scrollbar-thin-primary nc-form-left-drawer"
+    >
       <div class="flex">
         <div class="flex flex-row flex-1 text-lg">
           <span>
@@ -349,7 +353,7 @@ onMounted(async () => {
           <div class="cursor-pointer mr-2">
             <span
               v-if="hiddenColumns.length"
-              class="mr-2"
+              class="mr-2 nc-form-add-all"
               style="border-bottom: 2px solid rgb(218, 218, 218)"
               @click="addAllColumns"
             >
@@ -358,7 +362,7 @@ onMounted(async () => {
             </span>
             <span
               v-if="localColumns.length"
-              class="ml-2"
+              class="ml-2 nc-form-remove-all"
               style="border-bottom: 2px solid rgb(218, 218, 218)"
               @click="removeAllColumns"
             >
@@ -400,7 +404,7 @@ onMounted(async () => {
           </a-card>
         </template>
         <template #footer>
-          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center">
+          <div class="mt-4 border-dashed border-2 border-gray-400 py-3 text-gray-400 text-center nc-drag-n-drop-to-hide">
             <!-- Drag and drop fields here to hide -->
             {{ $t('msg.info.dragDropHide') }}
           </div>
@@ -437,7 +441,7 @@ onMounted(async () => {
           marginTop: '-200px',
         }"
       >
-        <a-form ref="formRef" :model="formState">
+        <a-form ref="formRef" :model="formState" class="nc-form">
           <a-card class="rounded ma-2 py-10 px-5">
             <!-- Header -->
             <a-form-item v-if="isEditable" class="ma-0 gap-0 pa-0">
@@ -484,7 +488,11 @@ onMounted(async () => {
               @end="drag = false"
             >
               <template #item="{ element, index }">
-                <div class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3" @click="activeRow = element.title">
+                <div
+                  class="nc-editable item cursor-pointer hover:bg-primary/10 pa-3"
+                  :class="`nc-form-drag-${element.title.replaceAll(' ', '')}`"
+                  @click="activeRow = element.title"
+                >
                   <div class="flex">
                     <div class="flex flex-1">
                       <div class="flex flex-row">
@@ -514,7 +522,12 @@ onMounted(async () => {
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
-                    <SmartsheetVirtualCell v-model="formState[element.title]" class="nc-input" :column="element" />
+                    <SmartsheetVirtualCell
+                      v-model="formState[element.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :column="element"
+                    />
                   </a-form-item>
 
                   <a-form-item
@@ -523,7 +536,13 @@ onMounted(async () => {
                     :name="element.title"
                     :rules="[{ required: element.required, message: `${element.title} is required` }]"
                   >
-                    <SmartsheetCell v-model="formState[element.title]" class="nc-input" :column="element" :edit-enabled="true" />
+                    <SmartsheetCell
+                      v-model="formState[element.title]"
+                      class="nc-input"
+                      :class="`nc-form-input-${element.title.replaceAll(' ', '')}`"
+                      :column="element"
+                      :edit-enabled="true"
+                    />
                   </a-form-item>
 
                   <div v-if="activeRow === element.title">
@@ -531,7 +550,7 @@ onMounted(async () => {
                       <a-input
                         v-model:value="element.label"
                         size="small"
-                        class="form-meta-input !bg-[#dbdbdb]"
+                        class="form-meta-input !bg-[#dbdbdb] nc-form-input-label"
                         :placeholder="$t('msg.info.formInput')"
                         @change="updateColMeta(element)"
                       >
@@ -542,14 +561,14 @@ onMounted(async () => {
                       <a-input
                         v-model:value="element.description"
                         size="small"
-                        class="form-meta-input !bg-[#dbdbdb] text-sm"
+                        class="form-meta-input !bg-[#dbdbdb] text-sm nc-form-input-help-text"
                         :placeholder="$t('msg.info.formHelpText')"
                         @change="updateColMeta(element)"
                       />
                     </a-form-item>
 
                     <div class="items-center flex">
-                      <span class="text-sm text-gray-500 mr-2">{{ $t('general.required') }}</span>
+                      <span class="text-sm text-gray-500 mr-2 nc-form-input-required">{{ $t('general.required') }}</span>
 
                       <a-switch v-model:checked="element.required" size="small" class="my-2" @change="updateColMeta(element)" />
                     </div>
@@ -570,7 +589,11 @@ onMounted(async () => {
             </Draggable>
 
             <div class="justify-center flex mt-10">
-              <a-button class="flex items-center gap-2 !bg-primary text-white rounded" size="large" @click="submitForm">
+              <a-button
+                class="flex items-center gap-2 !bg-primary text-white rounded nc-form-submit"
+                size="large"
+                @click="submitForm"
+              >
                 <!-- Submit -->
                 {{ $t('general.submit') }}
               </a-button>
@@ -586,8 +609,13 @@ onMounted(async () => {
 
           <!-- Show this message -->
           <label class="text-gray-600 text-bold"> {{ $t('msg.info.showMessage') }}: </label>
-
-          <a-textarea v-model:value="formViewData.success_msg" :rows="3" hide-details @change="updateView" />
+          <a-textarea
+            v-model:value="formViewData.success_msg"
+            :rows="3"
+            hide-details
+            @change="updateView"
+            class="nc-form-after-submit-msg"
+          />
 
           <!-- Other options -->
           <div class="mt-4">
@@ -598,6 +626,7 @@ onMounted(async () => {
                 v-t="[`a:form-view:submit-another-form`]"
                 size="small"
                 @change="updateView"
+                class="nc-form-checkbox-submit-another-form"
               />
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
             </div>
@@ -609,12 +638,19 @@ onMounted(async () => {
                 v-t="[`a:form-view:show-blank-form`]"
                 size="small"
                 @change="updateView"
+                class="nc-form-checkbox-show-blank-form"
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
 
             <div class="my-4">
-              <a-switch v-model:checked="emailMe" v-t="[`a:form-view:email-me`]" size="small" @change="onEmailChange" />
+              <a-switch
+                v-model:checked="emailMe"
+                v-t="[`a:form-view:email-me`]"
+                size="small"
+                @change="onEmailChange"
+                class="nc-form-checkbox-send-email"
+              />
               <!-- Email me at <email> -->
               <span class="ml-4">
                 {{ $t('msg.info.emailForm') }} <span class="text-bold text-gray-600">{{ state.user.value?.email }}</span>

From cac5cec6c7c158cd4942501e25690b4474e1bf8c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 10:52:42 +0800
Subject: [PATCH 064/106] refactor(gui-v2): move to GeneralShareBaseButton

---
 .../components/general/ShareBaseButton.vue    | 33 +++++++++++++++++++
 packages/nc-gui-v2/layouts/base.vue           | 26 +--------------
 2 files changed, 34 insertions(+), 25 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/ShareBaseButton.vue

diff --git a/packages/nc-gui-v2/components/general/ShareBaseButton.vue b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
new file mode 100644
index 0000000000..b33d45f67c
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ShareBaseButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useRoute } from '#imports'
+
+const route = useRoute()
+
+const showUserModal = $ref(false)
+
+const { isUIAllowed } = useUIPermission()
+</script>
+
+<template>
+  <div class="flex items-center mr-4">
+    <a-button
+      v-if="
+        isUIAllowed('newUser') &&
+        route.name !== 'index' &&
+        route.name !== 'project-index-create' &&
+        route.name !== 'project-index-create-external' &&
+        route.name !== 'index-user-index'
+      "
+      size="middle"
+      type="primary"
+      class="!bg-white !text-primary rounded"
+      @click="showUserModal = true"
+    >
+      <div class="flex items-center space-x-1">
+        <mdi-account-supervisor-outline class="mr-1" />
+        <div>{{ $t('activity.share') }}</div>
+      </div>
+    </a-button>
+    <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 9e8acda62b..298336b28c 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -10,10 +10,6 @@ const route = useRoute()
 
 const email = computed(() => user.value?.email ?? '---')
 
-const { isUIAllowed } = useUIPermission()
-
-const showUserModal = $ref(false)
-
 const logout = () => {
   signOut()
   navigateTo('/signin')
@@ -47,27 +43,7 @@ const logout = () => {
 
           <div class="flex-1" />
 
-          <div class="flex items-center mr-4">
-            <a-button
-              v-if="
-                isUIAllowed('newUser') &&
-                route.name !== 'index' &&
-                route.name !== 'project-index-create' &&
-                route.name !== 'project-index-create-external' &&
-                route.name !== 'index-user-index'
-              "
-              size="middle"
-              type="primary"
-              class="!bg-white !text-primary rounded"
-              @click="showUserModal = true"
-            >
-              <div class="flex items-center space-x-1">
-                <mdi-account-supervisor-outline class="mr-1" />
-                <div>{{ $t('activity.share') }}</div>
-              </div>
-            </a-button>
-            <TabsAuthUserManagementUsersModal :key="showUserModal" :show="showUserModal" @closed="showUserModal = false" />
-          </div>
+          <GeneralShareBaseButton />
 
           <a-tooltip placement="bottom">
             <template #title> Switch language </template>

From e0e522b06558d25859471136397c77bff7500567 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 10:52:52 +0800
Subject: [PATCH 065/106] chore(gui-v2): lint

---
 packages/nc-gui-v2/components.d.ts                       | 9 +++++++++
 .../nc-gui-v2/components/dashboard/settings/Misc.vue     | 5 +----
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index def2f91c1b..d62231196b 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -12,6 +12,7 @@ declare module '@vue/runtime-core' {
     ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
+    ACardMeta: typeof import('ant-design-vue/es')['CardMeta']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
     ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
     ACol: typeof import('ant-design-vue/es')['Col']
@@ -84,6 +85,7 @@ declare module '@vue/runtime-core' {
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['default']
     MdiAccountOutline: typeof import('~icons/mdi/account-outline')['default']
     MdiAccountPlusOutline: typeof import('~icons/mdi/account-plus-outline')['default']
+    MdiAccountSupervisorOutline: typeof import('~icons/mdi/account-supervisor-outline')['default']
     MdiAlphaA: typeof import('~icons/mdi/alpha-a')['default']
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
@@ -91,6 +93,7 @@ declare module '@vue/runtime-core' {
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiBugOutline: typeof import('~icons/mdi/bug-outline')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
+    MdiCalendarMonth: typeof import('~icons/mdi/calendar-month')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
     MdiCellphoneMessage: typeof import('~icons/mdi/cellphone-message')['default']
     MdiChat: typeof import('~icons/mdi/chat')['default']
@@ -103,6 +106,7 @@ declare module '@vue/runtime-core' {
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabaseOutline: typeof import('~icons/mdi/database-outline')['default']
+    MdiDelete: typeof import('~icons/mdi/delete')['default']
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
@@ -115,6 +119,7 @@ declare module '@vue/runtime-core' {
     MdiEmail: typeof import('~icons/mdi/email')['default']
     MdiEmailArrowRightOutline: typeof import('~icons/mdi/email-arrow-right-outline')['default']
     MdiExitToApp: typeof import('~icons/mdi/exit-to-app')['default']
+    MdiExport: typeof import('~icons/mdi/export')['default']
     MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
     MdiFileDocumentOutline: typeof import('~icons/mdi/file-document-outline')['default']
     MdiFileExcel: typeof import('~icons/mdi/file-excel')['default']
@@ -123,6 +128,7 @@ declare module '@vue/runtime-core' {
     MdiFolder: typeof import('~icons/mdi/folder')['default']
     MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiGestureDoubleTap: typeof import('~icons/mdi/gesture-double-tap')['default']
+    MdiGithub: typeof import('~icons/mdi/github')['default']
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
@@ -140,12 +146,14 @@ declare module '@vue/runtime-core' {
     MdiNumeric: typeof import('~icons/mdi/numeric')['default']
     MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
+    MdiPlusBoxOutline: typeof import('~icons/mdi/plus-box-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiStarOutline: typeof import('~icons/mdi/star-outline')['default']
     MdiStore: typeof import('~icons/mdi/store')['default']
     MdiTable: typeof import('~icons/mdi/table')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
@@ -154,6 +162,7 @@ declare module '@vue/runtime-core' {
     MdiText: typeof import('~icons/mdi/text')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
+    MdiTwitter: typeof import('~icons/mdi/twitter')['default']
     MdiUploadOutline: typeof import('~icons/mdi/upload-outline')['default']
     MdiViewListOutline: typeof import('~icons/mdi/view-list-outline')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
diff --git a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
index d20b231175..117d48f186 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Misc.vue
@@ -2,10 +2,7 @@
 const { includeM2M } = useGlobal()
 const { loadTables } = useProject()
 
-watch(
-    includeM2M,
-    async () => await loadTables()
-)
+watch(includeM2M, async () => await loadTables())
 </script>
 
 <template>

From 600d2a460bf3d73e3f2eca29a7a5711a90ca2b53 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 11:50:39 +0800
Subject: [PATCH 066/106] feat(gui-v2): release info

---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../components/general/ReleaseInfo.vue        | 70 +++++++++++++++++++
 .../nc-gui-v2/composables/useGlobal/state.ts  |  3 +
 .../nc-gui-v2/composables/useGlobal/types.ts  |  3 +
 packages/nc-gui-v2/layouts/base.vue           |  2 +
 5 files changed, 80 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/ReleaseInfo.vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index d62231196b..153faa9b83 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -150,6 +150,8 @@ declare module '@vue/runtime-core' {
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiRocketLaunchOutline: typeof import('~icons/mdi/rocket-launch-outline')['default']
+    MdiScriptTextOutline: typeof import('~icons/mdi/script-text-outline')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiSlack: typeof import('~icons/mdi/slack')['default']
     MdiStar: typeof import('~icons/mdi/star')['default']
diff --git a/packages/nc-gui-v2/components/general/ReleaseInfo.vue b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
new file mode 100644
index 0000000000..381d46acf4
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { message } from 'ant-design-vue'
+import { onMounted } from '@vue/runtime-core'
+import { extractSdkResponseErrorMsg } from '#imports'
+
+const { $api } = useNuxtApp()
+
+const { currentVersion, latestRelease, hiddenRelease } = useGlobal()
+
+const releaseAlert = computed(
+  () =>
+    currentVersion.value &&
+    latestRelease.value &&
+    currentVersion.value !== latestRelease.value &&
+    latestRelease.value !== hiddenRelease.value,
+)
+
+async function fetchReleaseInfo() {
+  try {
+    const versionInfo = await $api.utils.appVersion()
+    if (versionInfo && versionInfo.releaseVersion && versionInfo.currentVersion && !/[^0-9.]/.test(versionInfo.currentVersion)) {
+      currentVersion.value = versionInfo.currentVersion
+      latestRelease.value = versionInfo.releaseVersion
+    } else {
+      currentVersion.value = null
+      latestRelease.value = null
+    }
+  } catch (e: any) {
+    message.error(await extractSdkResponseErrorMsg(e))
+  }
+}
+
+onMounted(async () => await fetchReleaseInfo())
+</script>
+
+<template>
+  <div v-if="releaseAlert" class="flex items-center">
+    <a-dropdown :trigger="['click']" placement="bottom">
+      <a-button class="bg-primary border-none">
+        <div class="flex gap-1 align-center text-white">
+          <span class="text-sm font-weight-medium">{{ $t('activity.upgrade.available') }}</span>
+          <mdi-menu-down />
+        </div>
+      </a-button>
+      <template #overlay>
+        <div class="mt-1 bg-white shadow-lg !border">
+          <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb/releases" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-script-text-outline />
+              {{ latestRelease }} {{ $t('activity.upgrade.releaseNote') }}
+            </div>
+          </nuxt-link>
+          <nuxt-link class="text-primary" to="https://docs.nocodb.com/getting-started/upgrading" target="_blank">
+            <div class="nc-menu-item">
+              <mdi-rocket-launch-outline />
+              <!-- How to upgrade? -->
+              {{ $t('activity.upgrade.howTo') }}
+            </div>
+          </nuxt-link>
+          <a-divider class="ma-0" />
+          <div class="nc-menu-item" @click="latestRelease = null">
+            <mdi-close />
+            <!-- Hide menu -->
+            {{ $t('general.hideMenu') }}
+          </div>
+        </div>
+      </template>
+    </a-dropdown>
+  </div>
+</template>
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 35d28ac028..c0f7a799d4 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -59,6 +59,9 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     filterAutoSave: true,
     previewAs: null,
     includeM2M: false,
+    currentVersion: null,
+    latestRelease: null,
+    hiddenRelease: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 481c94625c..e598332022 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -36,6 +36,9 @@ export interface StoredState {
   filterAutoSave: boolean
   previewAs: string | null
   includeM2M: boolean
+  currentVersion: string | null
+  latestRelease: string | null
+  hiddenRelease: string | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
diff --git a/packages/nc-gui-v2/layouts/base.vue b/packages/nc-gui-v2/layouts/base.vue
index 298336b28c..1ce866ad42 100644
--- a/packages/nc-gui-v2/layouts/base.vue
+++ b/packages/nc-gui-v2/layouts/base.vue
@@ -43,6 +43,8 @@ const logout = () => {
 
           <div class="flex-1" />
 
+          <GeneralReleaseInfo />
+
           <GeneralShareBaseButton />
 
           <a-tooltip placement="bottom">

From 7eee3ae7e11275b6f0774626dd248d98c37d5965 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 16 Aug 2022 10:02:43 +0530
Subject: [PATCH 067/106] refactor: place tooltip to bottom

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/smartsheet/sidebar/toolbar/DebugMeta.vue         | 2 +-
 .../components/smartsheet/sidebar/toolbar/DeleteCache.vue       | 2 +-
 .../components/smartsheet/sidebar/toolbar/ExportCache.vue       | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
index 4f111b5a9a..60ef0f660f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -11,7 +11,7 @@ const localTables = tables.value.filter((t) => metas[t.id as string])
 </script>
 
 <template>
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Debug Meta </span>
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
index 9f0b81fe6b..0905d952dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -13,7 +13,7 @@ async function deleteCache() {
 </script>
 
 <template>
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Delete Cache </span>
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
index 6e05077eae..36749ea44b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -24,7 +24,7 @@ async function exportCache() {
 
 <template>
   <!-- Export Cache -->
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Export Cache </span>
     </template>

From e59c7dafc21544f1324241799b52af38f8afd8e1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 12:36:19 +0800
Subject: [PATCH 068/106] chore(gui-v2): add tooltip placement for easter egg
 buttons

---
 .../components/smartsheet/sidebar/toolbar/DebugMeta.vue        | 2 +-
 .../components/smartsheet/sidebar/toolbar/DeleteCache.vue      | 2 +-
 .../components/smartsheet/sidebar/toolbar/ExportCache.vue      | 3 +--
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
index 4f111b5a9a..60ef0f660f 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DebugMeta.vue
@@ -11,7 +11,7 @@ const localTables = tables.value.filter((t) => metas[t.id as string])
 </script>
 
 <template>
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Debug Meta </span>
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
index 9f0b81fe6b..0905d952dd 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/DeleteCache.vue
@@ -13,7 +13,7 @@ async function deleteCache() {
 </script>
 
 <template>
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Delete Cache </span>
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
index 6e05077eae..0c0242412b 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/toolbar/ExportCache.vue
@@ -23,8 +23,7 @@ async function exportCache() {
 </script>
 
 <template>
-  <!-- Export Cache -->
-  <a-tooltip>
+  <a-tooltip placement="bottom">
     <template #title>
       <span> Export Cache </span>
     </template>

From 0a473c7b066b9f24d5ae91d01f84b58ad91e083b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 13:33:14 +0800
Subject: [PATCH 069/106] refactor(gui-v2): combine imports

---
 packages/nc-gui-v2/components/general/ReleaseInfo.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/ReleaseInfo.vue b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
index 381d46acf4..7f42fd24dc 100644
--- a/packages/nc-gui-v2/components/general/ReleaseInfo.vue
+++ b/packages/nc-gui-v2/components/general/ReleaseInfo.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
-import { onMounted } from '@vue/runtime-core'
-import { extractSdkResponseErrorMsg } from '#imports'
+import { extractSdkResponseErrorMsg, onMounted } from '#imports'
 
 const { $api } = useNuxtApp()
 

From 28fe5a849d0ac6284608ea130eb0675f07e7f1bb Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 16 Aug 2022 13:43:42 +0800
Subject: [PATCH 070/106] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/smartsheet/Form.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Form.vue b/packages/nc-gui-v2/components/smartsheet/Form.vue
index b75673fc52..2419991536 100644
--- a/packages/nc-gui-v2/components/smartsheet/Form.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Form.vue
@@ -613,8 +613,8 @@ onMounted(async () => {
             v-model:value="formViewData.success_msg"
             :rows="3"
             hide-details
-            @change="updateView"
             class="nc-form-after-submit-msg"
+            @change="updateView"
           />
 
           <!-- Other options -->
@@ -625,8 +625,8 @@ onMounted(async () => {
                 v-model:checked="formViewData.submit_another_form"
                 v-t="[`a:form-view:submit-another-form`]"
                 size="small"
-                @change="updateView"
                 class="nc-form-checkbox-submit-another-form"
+                @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.submitAnotherForm') }}</span>
             </div>
@@ -637,8 +637,8 @@ onMounted(async () => {
                 v-model:checked="formViewData.show_blank_form"
                 v-t="[`a:form-view:show-blank-form`]"
                 size="small"
-                @change="updateView"
                 class="nc-form-checkbox-show-blank-form"
+                @change="updateView"
               />
               <span class="ml-4">{{ $t('msg.info.showBlankForm') }}</span>
             </div>
@@ -648,8 +648,8 @@ onMounted(async () => {
                 v-model:checked="emailMe"
                 v-t="[`a:form-view:email-me`]"
                 size="small"
-                @change="onEmailChange"
                 class="nc-form-checkbox-send-email"
+                @change="onEmailChange"
               />
               <!-- Email me at <email> -->
               <span class="ml-4">

From 2a71202c727e3b65b2b222b2aa0c4fbf187bd1e7 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 10:55:08 +0530
Subject: [PATCH 071/106] refactor/fixed url generation for swagger

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 4 +++-
 packages/nc-gui-v2/utils/urlUtils.ts                         | 5 +++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9b5f91a176..9a447e0639 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -15,6 +15,8 @@ import { TabType } from '~/composables'
 
 const route = useRoute()
 
+const { appInfo } = useGlobal()
+
 const { project, loadProject, loadTables, isSharedBase } = useProject()
 
 const { addTab, clearTabs } = useTabs()
@@ -152,7 +154,7 @@ const isHovered = useElementHover(sidebar)
                       v-if="isUIAllowed('apiDocs')"
                       v-t="['e:api-docs']"
                       class="nc-project-menu-item group"
-                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`)"
+                      @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
                     >
                       <MdiApi class="group-hover:text-pink-500 nc-swagger-api-docs" />
                       Swagger: Rest APIs
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index ac9d7fc0f4..95c3aeb41a 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -24,6 +24,7 @@ export const isValidURL = (str: string) => {
   return !!pattern.test(str)
 }
 
-export const openLink = (url: string, target = '_blank') => {
-  window.open(url, target)
+export const openLink = (path: string, baseURL: string, target = '_blank') => {
+  const url = new URL(path, baseURL)
+  window.open(url.href, target)
 }

From 2d22bff82af45db8146c82808d825fe78d24b87f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 11:21:45 +0530
Subject: [PATCH 072/106] refactor/Added project info copy

---
 packages/nc-gui-v2/composables/useProject.ts  | 24 +++++++++++++++++--
 packages/nc-gui-v2/lib/types.ts               | 11 +++++++++
 .../pages/[projectType]/[projectId]/index.vue | 24 ++++++++++++++++---
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 8c830507f3..31cf3e2eb7 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -2,6 +2,7 @@ import { SqlUiFactory } from 'nocodb-sdk'
 import type { OracleUi, ProjectType, TableType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { useNuxtApp, useRoute, useState } from '#app'
+import type { ProjectMetaInfo } from '~/lib'
 import { USER_PROJECT_ROLES } from '~/lib'
 
 export function useProject(projectId?: MaybeRef<string>) {
@@ -13,10 +14,17 @@ export function useProject(projectId?: MaybeRef<string>) {
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
   const route = useRoute()
   const { includeM2M } = useGlobal()
-
+  const projectMetaInfo = useState<ProjectMetaInfo | undefined>('projectMetaInfo')
   // todo: refactor path param name and variable name
   const projectType = $computed(() => route.params.projectType as string)
 
+  async function loadProjectMetaInfo(force?: boolean) {
+    if (!projectMetaInfo.value || force) {
+      const data = await $api.project.metaGet(project.value.id!, {}, {})
+      projectMetaInfo.value = data
+    }
+  }
+
   async function loadProjectRoles() {
     projectRoles.value = {}
 
@@ -59,5 +67,17 @@ export function useProject(projectId?: MaybeRef<string>) {
   )
   const isSharedBase = computed(() => projectType === 'base')
 
-  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi, isSharedBase }
+  return {
+    project,
+    tables,
+    loadProjectRoles,
+    loadProject,
+    loadTables,
+    isMysql,
+    isPg,
+    sqlUi,
+    isSharedBase,
+    loadProjectMetaInfo,
+    projectMetaInfo,
+  }
 }
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index f468954e5f..c8f5869047 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -10,4 +10,15 @@ export interface User {
   project_id?: string
 }
 
+export interface ProjectMetaInfo {
+  Node?: string
+  Arch?: string
+  Platform?: string
+  Docker?: boolean
+  Database?: string
+  ProjectOnRootDB?: string
+  RootDB?: string
+  PackageVersion?: string
+}
+
 export type Roles = Record<Role, boolean>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9a447e0639..b7cf9bfab6 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { message } from 'ant-design-vue'
 import {
   navigateTo,
   onKeyStroke,
   openLink,
   provideSidebar,
   ref,
+  useClipboard,
   useElementHover,
   useProject,
   useRoute,
@@ -12,17 +14,18 @@ import {
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/composables'
-
 const route = useRoute()
 
 const { appInfo } = useGlobal()
 
-const { project, loadProject, loadTables, isSharedBase } = useProject()
+const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
 const { addTab, clearTabs } = useTabs()
 
 const { isUIAllowed } = useUIPermission()
 
+const { copy } = useClipboard()
+
 // create a new sidebar state
 const { isOpen, toggle } = provideSidebar({ isOpen: true })
 
@@ -59,6 +62,21 @@ await loadProject()
 await loadTables()
 
 const isHovered = useElementHover(sidebar)
+
+const copyProjectInfo = async () => {
+  try {
+    await loadProjectMetaInfo()
+    copy(
+      Object.entries(projectMetaInfo.value!)
+        .map(([k, v]) => `${k}: **${v}**`)
+        .join('\n'),
+    )
+    message.info('Copied project info to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>
@@ -143,7 +161,7 @@ const isHovered = useElementHover(sidebar)
                   </template>
 
                   <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group">
+                    <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">
                       <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Project Info
                     </div>

From 9f0408cd89884c9811a472310c0a444ebeec8b7c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 11:28:08 +0530
Subject: [PATCH 073/106] refactor/Added copy auth token

---
 .../pages/[projectType]/[projectId]/index.vue | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index b7cf9bfab6..9fe9d493e1 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -16,7 +16,7 @@ import {
 import { TabType } from '~/composables'
 const route = useRoute()
 
-const { appInfo } = useGlobal()
+const { appInfo, token } = useGlobal()
 
 const { project, loadProject, loadTables, isSharedBase, loadProjectMetaInfo, projectMetaInfo } = useProject()
 
@@ -77,6 +77,16 @@ const copyProjectInfo = async () => {
     message.error(e.message)
   }
 }
+
+const copyAuthToken = async () => {
+  try {
+    copy(token.value!)
+    message.info('Copied auth token to clipboard')
+  } catch (e: any) {
+    console.log(e)
+    message.error(e.message)
+  }
+}
 </script>
 
 <template>
@@ -179,6 +189,13 @@ const copyProjectInfo = async () => {
                     </div>
                   </a-menu-item>
 
+                  <a-menu-item key="copy">
+                    <div class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
+                      Copy Auth Token
+                    </div>
+                  </a-menu-item>
+
                   <a-menu-divider />
 
                   <a-menu-item key="teamAndAuth">

From 2112cc7d1129847605ae07cdb304675169377731 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 12:07:23 +0530
Subject: [PATCH 074/106] fix/Added users reloading after user creation

---
 .../components/tabs/auth/user-management/UsersModal.vue         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index d557eeea40..cac1f3fe8e 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -85,7 +85,6 @@ const saveUser = async () => {
         project_id: project.value.id,
         projectName: project.value.title,
       })
-      emit('reload')
       emit('closed')
     } else {
       const res = await $api.auth.projectUserAdd(project.value.id, {
@@ -96,6 +95,7 @@ const saveUser = async () => {
       })
       usersData.invitationToken = res.invite_token
     }
+    emit('reload')
     message.success('Successfully updated the user details')
   } catch (e: any) {
     console.error(e)

From bb71a2eb157995c385061e1dc843f5b436c03c02 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 12:14:05 +0530
Subject: [PATCH 075/106] fix/added directive to copy auth token

---
 packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index 9fe9d493e1..24883c6944 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -190,7 +190,7 @@ const copyAuthToken = async () => {
                   </a-menu-item>
 
                   <a-menu-item key="copy">
-                    <div class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                    <div v-t="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
                       <MdiContentCopy class="group-hover:text-pink-500 nc-copy-project-info" />
                       Copy Auth Token
                     </div>

From 67bebbf32414c597da3b7b2e269e99a6599dea4e Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Tue, 16 Aug 2022 12:46:49 +0530
Subject: [PATCH 076/106] test: CY marker for sidebar toggle

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/smartsheet/sidebar/index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
index e9e0e00b93..92ab9dd635 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/index.vue
@@ -97,13 +97,13 @@ function onCreate(view: GridType | FormType | KanbanType | GalleryType) {
         >
           <MaterialSymbolsChevronRightRounded
             v-if="sidebarOpen"
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
             @click="sidebarOpen = false"
           />
 
           <MaterialSymbolsChevronLeftRounded
             v-else
-            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400"
+            class="transform group-hover:(scale-115 text-pink-500) text-xl text-gray-400 nc-right-sidebar-toggle"
             @click="sidebarOpen = true"
           />
         </div>

From 0c1f79beb1d9e4f9b0e24b28ddfbadd2adda4239 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:03:06 +0300
Subject: [PATCH 077/106] fix(gui-v2): prop type for github-button

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/dashboard/GithubStarButton.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
index c154eb1618..e0ec0a793e 100644
--- a/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
+++ b/packages/nc-gui-v2/components/dashboard/GithubStarButton.vue
@@ -3,7 +3,7 @@ import GithubButton from 'vue-github-button'
 </script>
 
 <template>
-  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" :data-show-count="true" data-size="large"
+  <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large"
     >Star</GithubButton
   >
 </template>

From 993d72dfb9a956cf814a8116a46414de39ae5d06 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:30:49 +0300
Subject: [PATCH 078/106] fix(gui-v2): select cells use readOnly instead of
 editEnabled

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/cell/MultiSelect.vue  | 10 +++++-----
 packages/nc-gui-v2/components/cell/SingleSelect.vue | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 528e08c106..dd114415a4 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -4,7 +4,7 @@ import type { SelectOptionsType } from 'nocodb-sdk'
 import {
   ActiveCellInj,
   ColumnInj,
-  EditModeInj,
+  ReadonlyInj,
   computed,
   h,
   inject,
@@ -28,7 +28,7 @@ const { isMysql } = useProject()
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -129,12 +129,12 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
-    show-arrow
+    :show-arrow="!readOnly"
     :show-search="false"
     :open="isOpen"
-    :disabled="!editEnabled"
+    :disabled="readOnly"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"
   >
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index e25f73e5f4..5b4881126b 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Select as AntSelect } from 'ant-design-vue'
 import type { SelectOptionsType } from 'nocodb-sdk'
-import { ActiveCellInj, ColumnInj, EditModeInj, computed, inject, ref, useEventListener, watch } from '#imports'
+import { ActiveCellInj, ColumnInj, ReadonlyInj, computed, inject, ref, useEventListener, watch } from '#imports'
 
 interface Props {
   modelValue?: string | undefined
@@ -13,7 +13,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)!
 
-const editEnabled = inject(EditModeInj)!
+const readOnly = inject(ReadonlyInj)!
 
 const active = inject(ActiveCellInj, ref(false))
 
@@ -69,11 +69,11 @@ watch(isOpen, (n, _o) => {
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
-    placeholder="Select an option"
+    :placeholder="!readOnly ? 'Select an option' : ''"
     :bordered="false"
     :open="isOpen"
-    :disabled="!editEnabled"
-    :show-arrow="active || vModel === null"
+    :disabled="readOnly"
+    :show-arrow="!readOnly && (active || vModel === null)"
     @select="isOpen = false"
     @keydown="handleKeys"
     @click="isOpen = !isOpen"

From 0d8f5ff07ef97df8b45118462c0bab58431794e6 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 16 Aug 2022 11:39:38 +0300
Subject: [PATCH 079/106] fix(gui-v2): disable edit mode if role is not allowed

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5d85cf3ae3..0120b85ec4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -410,7 +410,12 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         v-else
                         v-model="row.row[columnObj.title]"
                         :column="columnObj"
-                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :edit-enabled="
+                          isUIAllowed('xcDatatableEditable') &&
+                          editEnabled &&
+                          selected.col === colIndex &&
+                          selected.row === rowIndex
+                        "
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
                         @update:edit-enabled="editEnabled = false"

From c194e36a0973fbaeda94db68d7a5da5bbfbf82a0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 11 Aug 2022 16:59:50 +0530
Subject: [PATCH 080/106] fix/Added share view

---
 packages/nc-gui-v2/components.d.ts            |  1 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 16 ++++++----
 .../composables/useGridViewColumnWidth.ts     | 10 ++++---
 packages/nc-gui-v2/composables/useMetas.ts    | 10 ++++++-
 .../nc-gui-v2/composables/useSharedView.ts    | 22 ++++++++++++++
 packages/nc-gui-v2/composables/useViewData.ts | 17 ++++++++++-
 packages/nc-gui-v2/context/index.ts           |  1 +
 .../pages/[projectType]/view/[viewId].vue     | 30 +++++++++++++++++++
 8 files changed, 96 insertions(+), 11 deletions(-)
 create mode 100644 packages/nc-gui-v2/composables/useSharedView.ts
 create mode 100644 packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 2c8304ace6..40939c6f17 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -61,6 +61,7 @@ declare module '@vue/runtime-core' {
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    ATypography: typeof import('ant-design-vue/es')['Typography']
     ATypographyTitle: typeof import('ant-design-vue/es')['TypographyTitle']
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 0120b85ec4..cd90ac9fe6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -23,6 +23,7 @@ import {
   IsFormInj,
   IsGridInj,
   IsLockedInj,
+  IsPublicInj,
   MetaInj,
   PaginationDataInj,
   ReloadViewDataHookInj,
@@ -34,6 +35,8 @@ const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
 
+const isPublicView = inject(IsPublicInj, ref(false))
+
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
@@ -45,8 +48,6 @@ const reloadViewDataHook = inject(ReloadViewDataHookInj)
 const { isUIAllowed } = useUIPermission()
 
 // todo: get from parent ( inject or use prop )
-const isPublicView = false
-
 const isView = false
 
 const selected = reactive<{ row: number | null; col: number | null }>({ row: null, col: null })
@@ -80,8 +81,13 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-
-onMounted(loadGridViewColumns)
+onMounted(() => {
+  if (!isPublicView.value) {
+    loadGridViewColumns()
+  } else {
+    loadGridViewColumns(fields.value)
+  }
+})
 
 provide(IsFormInj, ref(false))
 
@@ -149,7 +155,7 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 const { copy } = useClipboard()
 
 const makeEditable = (row: Row, col: ColumnType) => {
-  if (isPublicView || editEnabled || isView) {
+  if (isPublicView.value || editEnabled || isView) {
     return
   }
   if (!isPkAvail.value && !row.rowMeta.new) {
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 1e365cc54d..26820d311b 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -3,6 +3,7 @@ import type { ColumnType, GridColumnType, GridType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useMetas } from './useMetas'
 import { useUIPermission } from './useUIPermission'
+import { IsPublicInj } from '~/context'
 
 export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) | undefined>) {
   const { css, load: loadCss, unload: unloadCss } = useStyleTag('')
@@ -13,6 +14,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
   const gridViewCols = ref<Record<string, GridColumnType>>({})
   const resizingCol = ref('')
   const resizingColWidth = ref('200px')
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const columns = computed<ColumnType[]>(() => metas?.value?.[(view?.value as any)?.fk_model_id as string]?.columns)
 
@@ -34,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     { deep: true, immediate: true },
   )
 
-  const loadGridViewColumns = async () => {
-    if (!view.value?.id) return
-    const colsData: GridColumnType[] = await $api.dbView.gridColumnsList(view.value.id)
+  const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => {
+    if (!view.value?.id && !cols) return
+    const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id))
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,
@@ -56,7 +58,7 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     }
 
     // sync with server if allowed
-    if (isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
+    if (!isPublic.value && isUIAllowed('gridColUpdate') && gridViewCols.value[id]?.id) {
       $api.dbView.gridColumnUpdate(gridViewCols.value[id].id as string, {
         width,
       })
diff --git a/packages/nc-gui-v2/composables/useMetas.ts b/packages/nc-gui-v2/composables/useMetas.ts
index 732f5393fe..8a780f1793 100644
--- a/packages/nc-gui-v2/composables/useMetas.ts
+++ b/packages/nc-gui-v2/composables/useMetas.ts
@@ -12,6 +12,14 @@ export function useMetas() {
   const metas = useState<{ [idOrTitle: string]: TableType | any }>('metas', () => ({}))
   const loadingState = useState<Record<string, boolean>>('metas-loading-state', () => ({}))
 
+  const setMeta = async (model: any) => {
+    metas.value = {
+      ...metas.value,
+      [model.id!]: model,
+      [model.title]: model,
+    }
+  }
+
   const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
@@ -83,5 +91,5 @@ export function useMetas() {
     }
   }
 
-  return { getMeta, clearAllMeta, metas, removeMeta }
+  return { getMeta, clearAllMeta, metas, removeMeta, setMeta }
 }
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
new file mode 100644
index 0000000000..7200acdd23
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -0,0 +1,22 @@
+import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import { useNuxtApp } from '#app'
+
+export function useSharedView(viewId: string) {
+  const sharedView = ref<ViewType>()
+  const meta = computed<TableType>(() => sharedView.value.model)
+  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+
+  const { $api } = useNuxtApp()
+  const { setMeta } = useMetas()
+
+  const loadSharedView = async () => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+    sharedView.value = viewMeta
+    setMeta(viewMeta.model)
+
+    const relatedMetas = { ...viewMeta.relatedMetas }
+    Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
+  }
+
+  return { sharedView, loadSharedView, meta, columns }
+}
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0be745f83c..2a33377ff6 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,7 +1,7 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
+import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -39,6 +39,7 @@ export function useViewData(
 
   const { project } = useProject()
   const { $api } = useNuxtApp()
+  const isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -59,6 +60,14 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
+  const loadPublicData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    const { data } = await $api.public.dataList(viewMeta?.value?.uuid, {
+      ...params,
+    })
+    formattedData.value = formatData(data.list)
+    paginationData.value = data.pageInfo
+  }
+
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
@@ -92,7 +101,13 @@ export function useViewData(
   }
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    if (isPublic.value) {
+      loadPublicData(params)
+      return
+    }
+
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+
     const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
       ...params,
       where: where?.value,
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index d955c93802..c9d3ce92e6 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -6,6 +6,7 @@ import type { Row } from '~/composables'
 import type { TabItem } from '~/composables/useTabs'
 
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
+export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
 export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
new file mode 100644
index 0000000000..44f27701c5
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+
+await loadSharedView()
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, ref(columns))
+provide(IsPublicInj, ref(true))
+
+const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <SmartsheetGrid :is-public-view="true" />
+  </NuxtLayout>
+</template>

From 3b4eb683325e0bf6f533c655f6dd03da7dc2db36 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 11 Aug 2022 19:08:13 +0530
Subject: [PATCH 081/106] refactor/gui-v2-added hiding column to Share view

---
 .../smartsheet-toolbar/FieldsMenu.vue         |  2 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  4 +-
 .../components/smartsheet/Toolbar.vue         |  8 ++--
 .../nc-gui-v2/composables/useSharedView.ts    |  7 +++-
 .../nc-gui-v2/composables/useViewColumns.ts   | 41 ++++++++++++-------
 .../pages/[projectType]/view/[viewId].vue     |  3 +-
 6 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
index 55cc86b8e9..abd0573159 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/FieldsMenu.vue
@@ -21,7 +21,7 @@ const {
   showAll,
   hideAll,
   saveOrUpdate,
-} = useViewColumns(activeView, meta, false, () => reloadDataHook.trigger())
+} = useViewColumns(activeView, meta, () => reloadDataHook.trigger())
 
 watch(
   () => (activeView.value as any)?.id,
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index cd90ac9fe6..26e159418e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -100,8 +100,10 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
+  if (!isPublicView) {
+    loadAggCommentsCount()
+  }
   await loadData()
-  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index d4d9bfb4ca..f817b260b4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,18 +1,20 @@
 <script setup lang="ts">
 import { useSmartsheetStoreOrThrow } from '~/composables'
+import { IsPublicInj } from '~/context'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
+    <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 
-    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
+    <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
     <SmartsheetToolbarMoreActions v-if="isGrid" />
     <div class="flex-1" />
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 7200acdd23..5bd73019b9 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -3,8 +3,8 @@ import { useNuxtApp } from '#app'
 
 export function useSharedView(viewId: string) {
   const sharedView = ref<ViewType>()
-  const meta = computed<TableType>(() => sharedView.value.model)
-  const columns = computed<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const meta = ref<TableType>(() => sharedView.value.model)
+  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -12,6 +12,9 @@ export function useSharedView(viewId: string) {
   const loadSharedView = async () => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
+    meta.value = sharedView.value.model
+    columns.value = sharedView.value.model.columns
+
     setMeta(viewMeta.model)
 
     const relatedMetas = { ...viewMeta.relatedMetas }
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 7c7b9bc191..6cc390ef37 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -3,13 +3,10 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
+import { IsPublicInj } from '~/context'
 
-export function useViewColumns(
-  view: Ref<ViewType> | undefined,
-  meta: ComputedRef<TableType>,
-  isPublic = false,
-  reloadData?: () => void,
-) {
+export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
+  const isPublic = inject(IsPublicInj, ref(false))
   const fields = ref<
     {
       order: number
@@ -31,7 +28,7 @@ export function useViewColumns(
 
     let order = 1
     if (view.value?.id) {
-      const data = (await $api.dbViewColumn.list(view.value.id)) as any[]
+      const data = (isPublic.value ? meta.value?.columns : await $api.dbViewColumn.list(view.value.id)) as any[]
 
       const fieldById = data.reduce<Record<string, any>>((acc, curr) => {
         curr.show = !!curr.show
@@ -54,8 +51,6 @@ export function useViewColumns(
           }
         })
         .sort((a, b) => a.order - b.order)
-    } else if (isPublic) {
-      fields.value = meta.value.columns as any
     }
   }
 
@@ -89,6 +84,22 @@ export function useViewColumns(
   }
 
   const saveOrUpdate = async (field: any, index: number) => {
+    if (isPublic && fields.value) {
+      fields.value[index] = field
+      meta.value.columns = meta.value?.columns?.map((column) => {
+        if (column.id === field.fk_column_id) {
+          return {
+            ...column,
+            ...field,
+          }
+        }
+        return column
+      })
+
+      reloadData?.()
+      return
+    }
+
     if (isUIAllowed('fieldsSync')) {
       if (field.id && view?.value?.id) {
         await $api.dbViewColumn.update(view.value.id, field.id, field)
@@ -118,11 +129,13 @@ export function useViewColumns(
     },
     set(v: boolean) {
       if (view?.value?.id) {
-        $api.dbView
-          .update(view.value.id, {
-            show_system_fields: v,
-          })
-          .finally(() => reloadData?.())
+        if (!isPublic.value) {
+          $api.dbView
+            .update(view.value.id, {
+              show_system_fields: v,
+            })
+            .finally(() => reloadData?.())
+        }
         ;(view.value as any).show_system_fields = v
       }
     },
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 44f27701c5..f891d7b423 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -17,7 +17,7 @@ await loadSharedView()
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
-provide(FieldsInj, ref(columns))
+provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 
 const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
@@ -25,6 +25,7 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 
 <template>
   <NuxtLayout id="content" class="flex">
+    <SmartsheetToolbar />
     <SmartsheetGrid :is-public-view="true" />
   </NuxtLayout>
 </template>

From f13003bcfca641f6f593e518187a8fd25182841f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 12:41:27 +0530
Subject: [PATCH 082/106] refactor/gui-v2-added filter to Share view

---
 .../components/smartsheet/Toolbar.vue         |  2 +-
 .../nc-gui-v2/composables/useSharedView.ts    | 32 ++++++++---
 packages/nc-gui-v2/composables/useViewData.ts | 46 ++++++++-------
 .../nc-gui-v2/composables/useViewFilters.ts   | 56 +++++++++++++------
 .../pages/[projectType]/view/[viewId].vue     |  4 +-
 5 files changed, 89 insertions(+), 51 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index f817b260b4..e83eb46d0e 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -10,7 +10,7 @@ const isPublic = inject(IsPublicInj, ref(false))
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
 
-    <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
+    <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
 
     <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
 
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 5bd73019b9..4e05bb23cd 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,19 +1,23 @@
-import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-export function useSharedView(viewId: string) {
-  const sharedView = ref<ViewType>()
-  const meta = ref<TableType>(() => sharedView.value.model)
+const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+const sharedView = ref<ViewType>()
+
+export function useSharedView() {
+  const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async () => {
+  const loadSharedView = async (viewId: string) => {
     const viewMeta = await $api.public.sharedViewMetaGet(viewId)
     sharedView.value = viewMeta
-    meta.value = sharedView.value.model
-    columns.value = sharedView.value.model.columns
+
+    meta.value = viewMeta.model
+    columns.value = viewMeta.model.columns
 
     setMeta(viewMeta.model)
 
@@ -21,5 +25,17 @@ export function useSharedView(viewId: string) {
     Object.keys(relatedMetas).forEach((key) => setMeta(relatedMetas[key]))
   }
 
-  return { sharedView, loadSharedView, meta, columns }
+  const fetchSharedViewData = async () => {
+    const page = paginationData.value.page || 1
+    const pageSize = paginationData.value.pageSize || 25
+
+    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
+      offset: (page - 1) * pageSize,
+      filterArrJson: JSON.stringify(filters.value),
+    } as any)
+
+    return data
+  }
+
+  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 2a33377ff6..146f9ccf4c 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -19,6 +19,7 @@ export interface Row {
     commentCount?: number
   }
 }
+const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -29,7 +30,6 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
@@ -38,8 +38,9 @@ export function useViewData(
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
   const { project } = useProject()
+  const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  const isPublic = inject(IsPublicInj, ref(false))
+  let isPublic = inject(IsPublicInj, ref(false))
 
   const selectedAllRecords = computed({
     get() {
@@ -60,14 +61,6 @@ export function useViewData(
     paginationData.value.totalRows = count
   }
 
-  const loadPublicData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    const { data } = await $api.public.dataList(viewMeta?.value?.uuid, {
-      ...params,
-    })
-    formattedData.value = formatData(data.list)
-    paginationData.value = data.pageInfo
-  }
-
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
@@ -77,9 +70,7 @@ export function useViewData(
   /** load row comments count */
   const loadAggCommentsCount = async () => {
     // todo: handle in public api
-    // if (this.isPublicView) {
-    //   return;
-    // }
+    if (isPublic.value) return
 
     const ids = formattedData.value
       ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
@@ -100,18 +91,16 @@ export function useViewData(
     }
   }
 
-  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if (isPublic.value) {
-      loadPublicData(params)
-      return
-    }
-
-    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}, isPublicMode = false) => {
+    isPublic = isPublic ?? ref(isPublicMode)
+    if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
-    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
-      ...params,
-      where: where?.value,
-    })
+    const response = !isPublic.value
+      ? await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+          ...params,
+          where: where?.value,
+        })
+      : await fetchSharedViewData()
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
 
@@ -333,6 +322,15 @@ export function useViewData(
     }
   }
 
+  watch(
+    () => paginationData.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedPaginationData.value = paginationData.value
+    },
+  )
+
   return {
     loadData,
     paginationData,
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 1733df1ded..689b42892d 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -2,21 +2,28 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
+import { IsPublicInj, MetaInj } from '~/context'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
-  shared = false,
 ) {
+  const { filters: sharedViewFilter } = useSharedView()
+  const meta = inject(MetaInj)
+  const { loadData } = useViewData(meta, view)
+
   const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
+  const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
   const loadFilters = async (hookId?: string) => {
+    if (isPublic.value) return
+
     if (hookId) {
       if (parentId) {
         filters.value = await $api.dbTableFilter.childrenRead(parentId)
@@ -55,12 +62,13 @@ export function useViewFilters(
         }
       }
     }
+    }
     reloadData?.()
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
       reloadData?.()
     } else {
@@ -83,7 +91,7 @@ export function useViewFilters(
 
   const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
     if (!view?.value) return
-    if (shared || !isUIAllowed('filterSync')) {
+    if (isPublic.value || !isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -103,21 +111,27 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value = [
+      ...filters.value,
+      {
+        comparison_op: 'eq',
+        value: '',
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
   }
 
-  const addFilterGroup = async (parentId?: string) => {
-    filters.value.push({
-      parentId,
-      is_group: true,
-      status: 'create',
-      logical_op: 'and',
-    })
+  const addFilterGroup = async () => {
+    filters.value = [
+      ...filters.value,
+      {
+        parentId,
+        is_group: true,
+        status: 'create',
+        logical_op: 'and',
+      },
+    ]
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
@@ -138,5 +152,15 @@ export function useViewFilters(
     },
   )
 
+  watch(
+    () => filters.value,
+    () => {
+      if (!isPublic.value) return
+
+      sharedViewFilter.value = filters.value
+      loadData()
+    },
+  )
+
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index f891d7b423..65ff8c17ab 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -10,9 +10,9 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView(route.params.viewId as string)
+const { sharedView, loadSharedView, meta, columns } = useSharedView()
 
-await loadSharedView()
+await loadSharedView(route.params.viewId as string)
 
 provide(ReloadViewDataHookInj, reloadEventHook)
 provide(MetaInj, meta)

From 9c44490cda183fec749f51a653c7f6792d80dec4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:45:24 +0530
Subject: [PATCH 083/106] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewData.ts | 24 ++++----
 .../nc-gui-v2/composables/useViewFilters.ts   | 60 +++++++++----------
 2 files changed, 41 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 146f9ccf4c..56df5eff00 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -30,17 +30,28 @@ export function useViewData(
     throw new Error('Table meta is not available')
   }
 
-  const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const _paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
   const aggCommentCount = ref<{ row_id: string; count: number }[]>([])
   const galleryData = ref<GalleryType>()
   const formColumnData = ref<FormType>()
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
+  let isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
-  let isPublic = inject(IsPublicInj, ref(false))
+
+  const paginationData = computed({
+    get: () => (isPublic.value ? sharedPaginationData.value : _paginationData.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedPaginationData.value = value
+      } else {
+        _paginationData.value = value
+      }
+    },
+  })
 
   const selectedAllRecords = computed({
     get() {
@@ -322,15 +333,6 @@ export function useViewData(
     }
   }
 
-  watch(
-    () => paginationData.value,
-    () => {
-      if (!isPublic.value) return
-
-      sharedPaginationData.value = paginationData.value
-    },
-  )
-
   return {
     loadData,
     paginationData,
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 689b42892d..ed3f342e1f 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -2,7 +2,7 @@ import type { FilterType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
-import { IsPublicInj, MetaInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
@@ -11,16 +11,28 @@ export function useViewFilters(
   reloadData?: () => void,
 ) {
   const { filters: sharedViewFilter } = useSharedView()
-  const meta = inject(MetaInj)
-  const { loadData } = useViewData(meta, view)
 
-  const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const reloadHook = inject(ReloadViewDataHookInj)
+
+  const _filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
   const { isUIAllowed } = useUIPermission()
   const { metas } = useMetas()
 
+  const filters = computed({
+    get: () => (isPublic.value ? sharedViewFilter.value : _filters.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedViewFilter.value = value
+        reloadHook?.trigger()
+      } else {
+        _filters.value = value
+      }
+    },
+  })
+
   const loadFilters = async (hookId?: string) => {
     if (isPublic.value) return
 
@@ -111,27 +123,21 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value = [
-      ...filters.value,
-      {
-        comparison_op: 'eq',
-        value: '',
-        status: 'create',
-        logical_op: 'and',
-      },
-    ]
+    filters.value.push({
+      comparison_op: 'eq',
+      value: '',
+      status: 'create',
+      logical_op: 'and',
+    })
   }
 
   const addFilterGroup = async () => {
-    filters.value = [
-      ...filters.value,
-      {
-        parentId,
-        is_group: true,
-        status: 'create',
-        logical_op: 'and',
-      },
-    ]
+    filters.value.push({
+      parentId,
+      is_group: true,
+      status: 'create',
+      logical_op: 'and',
+    })
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
@@ -152,15 +158,5 @@ export function useViewFilters(
     },
   )
 
-  watch(
-    () => filters.value,
-    () => {
-      if (!isPublic.value) return
-
-      sharedViewFilter.value = filters.value
-      loadData()
-    },
-  )
-
   return { filters, loadFilters, sync, deleteFilter, saveOrUpdate, addFilter, addFilterGroup }
 }

From c2d4b6619b9b5a4f93575437944813fbf78b7193 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:46:45 +0530
Subject: [PATCH 084/106] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewData.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 56df5eff00..1a00842f27 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -37,7 +37,7 @@ export function useViewData(
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
 
-  let isPublic = inject(IsPublicInj, ref(false))
+  const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
   const { fetchSharedViewData, paginationData: sharedPaginationData } = useSharedView()
   const { $api } = useNuxtApp()
@@ -102,8 +102,7 @@ export function useViewData(
     }
   }
 
-  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}, isPublicMode = false) => {
-    isPublic = isPublic ?? ref(isPublicMode)
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
     const response = !isPublic.value

From 4b51c73dcd54fce5d3a5de1f1011010663315d40 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 13:51:42 +0530
Subject: [PATCH 085/106] refactor/gui-v2-added readonly mode to Share view

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 4 +---
 packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue | 3 ++-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 26e159418e..c1b3275bb2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -100,9 +100,7 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
-  if (!isPublicView) {
-    loadAggCommentsCount()
-  }
+  loadAggCommentsCount()
   await loadData()
 })
 
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 65ff8c17ab..ffd3b34d81 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk/build/main'
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 definePageMeta({
   requiresAuth: false,
@@ -19,6 +19,7 @@ provide(MetaInj, meta)
 provide(ActiveViewInj, sharedView)
 provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
+provide(ReadonlyInj, ref(true))
 
 const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>

From 71976bca727a38898fc1aee6d6ba2bb158e28b65 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 14:31:49 +0530
Subject: [PATCH 086/106] refactor/gui-v2-added sort to Share view

---
 .../nc-gui-v2/composables/useSharedView.ts    |  6 ++-
 .../nc-gui-v2/composables/useViewSorts.ts     | 46 +++++++++++++++++--
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 4e05bb23cd..7175d0b152 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,9 +1,10 @@
-import type { ColumnType, FilterType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
+const sorts = ref<SortType[]>([])
 
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
@@ -32,10 +33,11 @@ export function useSharedView() {
     const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
       offset: (page - 1) * pageSize,
       filterArrJson: JSON.stringify(filters.value),
+      sortArrJson: JSON.stringify(sorts.value),
     } as any)
 
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData }
+  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData, sorts }
 }
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 31e4a998e4..b7d712a255 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,18 +1,41 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#imports'
+import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
   reloadData?: () => void,
 ) {
-  const sorts = ref<SortType[]>([])
+  const _sorts = ref<SortType[]>([])
+  const { sorts: sharedViewSorts, sharedView } = useSharedView()
+
+  const reloadHook = inject(ReloadViewDataHookInj)
+  const isPublic = inject(IsPublicInj, ref(false))
+
+  const sorts = computed<SortType[]>({
+    get: () => (isPublic.value ? sharedViewSorts.value : _sorts.value),
+    set: (value) => {
+      if (isPublic.value) {
+        sharedViewSorts.value = value
+      } else {
+        _sorts.value = value
+      }
+      reloadHook?.trigger()
+    },
+  })
 
   const { $api } = useNuxtApp()
 
   const { isUIAllowed } = useUIPermission()
 
   const loadSorts = async () => {
+    if (isPublic.value) {
+      console.log('load sorts public', sharedView.value?.sorts)
+      const sharedSorts = sharedView.value?.sorts || []
+      sorts.value = [...sharedSorts]
+      return
+    }
     if (!view?.value) return
     sorts.value = ((await $api.dbTableSort.list(view?.value?.id as string)) as any)?.sorts?.list
   }
@@ -20,6 +43,12 @@ export function useViewSorts(
   const saveOrUpdate = async (sort: SortType, i: number) => {
     // TODO:
     // if (!this.shared && this._isUIAllowed('sortSync')) {
+    if (isPublic.value) {
+      sorts.value[i] = sort
+      sorts.value = [...sorts.value]
+      return
+    }
+
     if (isUIAllowed('sortSync')) {
       if (sort.id) {
         await $api.dbTableSort.update(sort.id, sort)
@@ -30,14 +59,23 @@ export function useViewSorts(
     reloadData?.()
   }
   const addSort = () => {
-    sorts.value.push({
-      direction: 'asc',
-    })
+    sorts.value = [
+      ...sorts.value,
+      {
+        direction: 'asc',
+      },
+    ]
   }
 
   const deleteSort = async (sort: SortType, i: number) => {
     // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
+    if (isPublic.value) {
+      sorts.value.splice(i, 1)
+      sorts.value = [...sorts.value]
+      return
+    }
+
     if (isUIAllowed('sortSync') && sort.id) {
       await $api.dbTableSort.delete(sort.id)
     } else {

From b92f8263adfb4f976f0b0ab7a9b8f4c97fcb0b38 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 14:35:52 +0530
Subject: [PATCH 087/106] refactor/gui-v2-Share view minor cleanup

---
 packages/nc-gui-v2/composables/useViewSorts.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index b7d712a255..a1e8f2bc99 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -31,7 +31,6 @@ export function useViewSorts(
 
   const loadSorts = async () => {
     if (isPublic.value) {
-      console.log('load sorts public', sharedView.value?.sorts)
       const sharedSorts = sharedView.value?.sorts || []
       sorts.value = [...sharedSorts]
       return

From 6072e9e354ba3b5a96106aeeb52cbdaf756352a5 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 17:41:28 +0530
Subject: [PATCH 088/106] refactor/gui-v2-Share view added group filter

---
 .../smartsheet-toolbar/ColumnFilter.vue       |  6 ++-
 .../nc-gui-v2/composables/useSharedView.ts    |  6 +--
 .../nc-gui-v2/composables/useViewFilters.ts   | 51 ++++++++++++-------
 packages/nc-gui-v2/lib/types.ts               |  4 +-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index d3f413b030..816ae9c15a 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -8,12 +8,14 @@ import { comparisonOpList } from '~/utils/filterUtils'
 import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
 import MdiDeleteIcon from '~icons/mdi/close-box'
 import MdiAddIcon from '~icons/mdi/plus'
+import type { Filter } from '~/lib/types'
 
 const {
   nested = false,
   parentId,
   autoSave = true,
   hookId = null,
+  modelValue: Filter[]
 } = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
 
 const emit = defineEmits(['update:filtersLength'])
@@ -25,7 +27,6 @@ const activeView = inject(ActiveViewInj)
 const reloadDataHook = inject(ReloadViewDataHookInj)
 
 // todo: replace with inject or get from state
-const shared = ref(false)
 
 const { $e } = useNuxtApp()
 
@@ -36,6 +37,7 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   () => {
     reloadDataHook?.trigger()
   },
+  modelValue,
 )
 
 const filterUpdateCondition = (filter: FilterType, i: number) => {
@@ -152,7 +154,7 @@ defineExpose({
             <span class="col-span-3" />
             <div class="col-span-5">
               <SmartsheetToolbarColumnFilter
-                v-if="filter.id || shared"
+                v-if="filter.id || filter.children"
                 ref="nestedFilters"
                 v-model="filter.children"
                 :parent-id="filter.id"
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 7175d0b152..aeabc9f06f 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,7 +1,7 @@
 import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-const filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
@@ -32,12 +32,12 @@ export function useSharedView() {
 
     const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
       offset: (page - 1) * pageSize,
-      filterArrJson: JSON.stringify(filters.value),
+      filterArrJson: JSON.stringify(nestedFilters.value),
       sortArrJson: JSON.stringify(sorts.value),
     } as any)
 
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, filters, fetchSharedViewData, paginationData, sorts }
+  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts }
 }
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index ed3f342e1f..6e22b9690e 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,20 +1,22 @@
-import type { FilterType, ViewType } from 'nocodb-sdk'
+import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp, useUIPermission } from '#imports'
 import { useMetas } from '~/composables/useMetas'
 import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import type { Filter } from '~/lib'
 
 export function useViewFilters(
   view: Ref<ViewType> | undefined,
   parentId?: string,
   autoApply?: ComputedRef<boolean>,
   reloadData?: () => void,
+  siblingFilters?: Filter[],
 ) {
-  const { filters: sharedViewFilter } = useSharedView()
+  const { nestedFilters } = useSharedView()
 
   const reloadHook = inject(ReloadViewDataHookInj)
 
-  const _filters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
+  const _filters = ref<Filter[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { $api } = useNuxtApp()
@@ -22,10 +24,15 @@ export function useViewFilters(
   const { metas } = useMetas()
 
   const filters = computed({
-    get: () => (isPublic.value ? sharedViewFilter.value : _filters.value),
+    get: () => (isPublic.value ? siblingFilters || nestedFilters.value : _filters.value),
     set: (value) => {
       if (isPublic.value) {
-        sharedViewFilter.value = value
+        if (siblingFilters) {
+          siblingFilters = value
+        } else {
+          nestedFilters.value = value
+        }
+        nestedFilters.value = [...nestedFilters.value]
         reloadHook?.trigger()
       } else {
         _filters.value = value
@@ -33,6 +40,13 @@ export function useViewFilters(
     },
   })
 
+  const placeholderFilter: Filter = {
+    comparison_op: 'eq',
+    value: '',
+    status: 'create',
+    logical_op: 'and',
+  }
+
   const loadFilters = async (hookId?: string) => {
     if (isPublic.value) return
 
@@ -78,7 +92,7 @@ export function useViewFilters(
     reloadData?.()
   }
 
-  const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+  const deleteFilter = async (filter: Filter, i: number) => {
     // if shared or sync permission not allowed simply remove it from array
     if (isPublic.value || !isUIAllowed('filterSync')) {
       filters.value.splice(i, 1)
@@ -101,9 +115,14 @@ export function useViewFilters(
     }
   }
 
-  const saveOrUpdate = async (filter: FilterType & { status?: string }, i: number, force = false) => {
+  const saveOrUpdate = async (filter: Filter, i: number, force = false) => {
+    if (isPublic.value) {
+      filters.value[i] = { ...filter } as any
+      filters.value = [...filters.value]
+      return
+    }
     if (!view?.value) return
-    if (isPublic.value || !isUIAllowed('filterSync')) {
+    if (!isUIAllowed('filterSync')) {
       // skip
     } else if (!autoApply?.value && !force) {
       filter.status = filter.id ? 'update' : 'create'
@@ -123,21 +142,19 @@ export function useViewFilters(
   }
 
   const addFilter = () => {
-    filters.value.push({
-      comparison_op: 'eq',
-      value: '',
-      status: 'create',
-      logical_op: 'and',
-    })
+    filters.value.push(placeholderFilter)
   }
 
   const addFilterGroup = async () => {
-    filters.value.push({
-      parentId,
+    const child = placeholderFilter
+    const placeHolderGroupFilter: Filter = {
       is_group: true,
       status: 'create',
       logical_op: 'and',
-    })
+    }
+    if (isPublic.value) placeHolderGroupFilter.children = [child]
+
+    filters.value.push(placeHolderGroupFilter)
     const index = filters.value.length - 1
     await saveOrUpdate(filters.value[index], index, true)
   }
diff --git a/packages/nc-gui-v2/lib/types.ts b/packages/nc-gui-v2/lib/types.ts
index c8f5869047..7b006d67f7 100644
--- a/packages/nc-gui-v2/lib/types.ts
+++ b/packages/nc-gui-v2/lib/types.ts
@@ -1,5 +1,5 @@
+import type { FilterType } from 'nocodb-sdk'
 import type { Role } from './enums'
-
 export interface User {
   id: string
   email: string
@@ -22,3 +22,5 @@ export interface ProjectMetaInfo {
 }
 
 export type Roles = Record<Role, boolean>
+
+export type Filter = FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string; readOnly?: boolean }

From d6fbce8a59f23f90b2d476e10aa06fc1b0bcc8c0 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 20:27:14 +0530
Subject: [PATCH 089/106] refactor/gui-v2 added more options

---
 .../smartsheet-toolbar/MoreActions.vue        | 37 +++++--------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  9 +++--
 .../components/smartsheet/Toolbar.vue         |  4 +-
 .../nc-gui-v2/composables/useSharedView.ts    | 26 ++++++++++++-
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 13f9a376c5..54eaa310fb 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -6,6 +6,8 @@ import FileSaver from 'file-saver'
 import { message } from 'ant-design-vue'
 import {
   ActiveViewInj,
+  FieldsInj,
+  IsPublicInj,
   MetaInj,
   extractSdkResponseErrorMsg,
   inject,
@@ -22,7 +24,7 @@ enum ExportTypes {
 
 const sharedViewListDlg = ref(false)
 
-const publicViewId = null
+const isPublicView = inject(IsPublicInj, ref(false))
 
 const isView = false
 
@@ -33,7 +35,7 @@ const { project } = useProject()
 const { $api } = useNuxtApp()
 
 const meta = inject(MetaInj)
-
+const fields = inject(FieldsInj, ref([]))
 const selectedView = inject(ActiveViewInj)
 
 const showWebhookDrawer = ref(false)
@@ -46,31 +48,12 @@ const exportFile = async (exportType: ExportTypes) => {
   let offset = 0
   let c = 1
   const responseType = exportType === ExportTypes.EXCEL ? 'base64' : 'blob'
+
   try {
     while (!isNaN(offset) && offset > -1) {
       let res
-      if (publicViewId) {
-        // TODO: pending for shared view
-        // const { data, headers } = await $api.public.csvExport(publicViewId, exportType, {
-        //   format: responseType,
-        //   query: {
-        //     fields:
-        //       queryParams && queryParams.fieldsOrder && queryParams.fieldsOrder.filter((c: number) => queryParams.showFields[c]),
-        //     offset,
-        //     sortArrJson: JSON.stringify(
-        //       reqPayload &&
-        //         reqPayload.sorts &&
-        //         reqPayload.sorts.map(({ fk_column_id, direction }) => ({
-        //           direction,
-        //           fk_column_id,
-        //         })),
-        //     ),
-        //     filterArrJson: JSON.stringify(reqPayload && reqPayload.filters),
-        //   },
-        //   headers: {
-        //     'xc-password': reqPayload && reqPayload.password,
-        //   },
-        // } as Record<string, any>)
+      if (isPublicView.value) {
+        res = await exportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
           'noco',
@@ -137,7 +120,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('csvImport') && !isView"
+              v-if="isUIAllowed('csvImport') && !isView && !isPublicView"
               v-t="['a:actions:upload-csv']"
               class="nc-menu-item"
               @click="quickImportDialog = true"
@@ -148,7 +131,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('SharedViewList') && !isView"
+              v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView"
               v-t="['a:actions:shared-view-list']"
               class="nc-menu-item"
               @click="sharedViewListDlg = true"
@@ -159,7 +142,7 @@ const exportFile = async (exportType: ExportTypes) => {
             </div>
 
             <div
-              v-if="isUIAllowed('webhook') && !isView"
+              v-if="isUIAllowed('webhook') && !isView && !isPublicView"
               v-t="['c:actions:webhook']"
               class="nc-menu-item"
               @click="showWebhookDrawer = true"
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index c1b3275bb2..6e071e5d17 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -26,6 +26,7 @@ import {
   IsPublicInj,
   MetaInj,
   PaginationDataInj,
+  ReadonlyInj,
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
@@ -40,7 +41,7 @@ const isPublicView = inject(IsPublicInj, ref(false))
 // keep a root fields variable and will get modified from
 // fields menu and get used in grid and gallery
 const fields = inject(FieldsInj, ref([]))
-
+const readonly = inject(ReadonlyInj, ref(false))
 const isLocked = inject(IsLockedInj, false)
 
 const reloadViewDataHook = inject(ReloadViewDataHookInj)
@@ -325,14 +326,14 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 @xcresized="resizingCol = null"
               >
                 <div class="w-full h-full bg-gray-100 flex items-center">
-                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
+                  <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" :hide-menu="readonly" />
 
-                  <SmartsheetHeaderCell v-else :column="col" />
+                  <SmartsheetHeaderCell v-else :column="col" :hide-menu="readonly" />
                 </div>
               </th>
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th
-                v-if="isUIAllowed('add-column')"
+                v-if="!readonly && isUIAllowed('add-column')"
                 v-t="['c:column:add']"
                 class="cursor-pointer"
                 @click.stop="addColumnDropdown = true"
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index e83eb46d0e..d895f47221 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -7,8 +7,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
-    <SmartsheetToolbarFieldsMenu v-if="(isGrid && !isPublic) || isGallery" :show-system-fields="false" class="ml-1" />
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
+    <SmartsheetToolbarSearchData v-if="isGrid && !isPublic" class="flex-shrink" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
 
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index aeabc9f06f..04ddc5996f 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,10 +1,11 @@
-import type { ColumnType, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
 const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
+const password = ref<string | undefined>()
 
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
@@ -39,5 +40,26 @@ export function useSharedView() {
     return data
   }
 
-  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts }
+  const exportFile = async (
+    fields: any[],
+    offset: number,
+    type: ExportTypes.EXCEL | ExportTypes.CSV,
+    responseType: 'base64' | 'blob',
+  ) => {
+    return await $api.public.csvExport(sharedView.value?.uuid, type, {
+      format: responseType as any,
+      query: {
+        fields: fields.map((field) => field.title),
+        offset,
+        sortArrJson: JSON.stringify(sorts.value),
+
+        filterArrJson: JSON.stringify(nestedFilters.value),
+      },
+      headers: {
+        'xc-password': password,
+      },
+    })
+  }
+
+  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts, exportFile }
 }

From bc0553d38184a48af2ae4c10708d866658b8b22f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 12 Aug 2022 22:36:28 +0530
Subject: [PATCH 090/106] fix/fixed scroll of shared view

---
 .../pages/[projectType]/view/[viewId].vue         | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index ffd3b34d81..57a68e193b 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 import type { TableType } from 'nocodb-sdk/build/main'
+
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
+import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
 })
@@ -26,7 +28,16 @@ const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <SmartsheetToolbar />
-    <SmartsheetGrid :is-public-view="true" />
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SmartsheetToolbar />
+      <SmartsheetGrid :is-public-view="true" />
+    </div>
   </NuxtLayout>
 </template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>

From d13fe53d63cb6036416d07b0b48253265d485412 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:19:51 +0530
Subject: [PATCH 091/106] fix/added shared view form

---
 .../nc-gui-v2/components/shared-view/Form.vue | 94 +++++++++++++++++++
 .../nc-gui-v2/composables/useSharedView.ts    | 24 ++++-
 packages/nc-gui-v2/composables/useViewData.ts |  2 +-
 .../pages/[projectType]/form/[viewId].vue     | 42 +++++++++
 .../pages/[projectType]/view/[viewId].vue     |  2 +-
 5 files changed, 161 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/shared-view/Form.vue
 create mode 100644 packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue

diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
new file mode 100644
index 0000000000..89db748be6
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { FieldsInj, MetaInj } from '~/context'
+
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+const { sharedView } = useSharedView()
+
+const formState = ref(fields.value.reduce((a, v) => ({ ...a, [v.title]: undefined }), {}))
+
+function isRequired(_columnObj: Record<string, any>, required = false) {
+  let columnObj = _columnObj
+  if (
+    columnObj.uidt === UITypes.LinkToAnotherRecord &&
+    columnObj.colOptions &&
+    columnObj.colOptions.type === RelationTypes.BELONGS_TO
+  ) {
+    columnObj = fields.value.find((c: Record<string, any>) => c.id === columnObj.colOptions.fk_child_column_id) as Record<
+      string,
+      any
+    >
+  }
+
+  return required || (columnObj && columnObj.rqd && !columnObj.cdf)
+}
+
+useSmartsheetStoreOrThrow()
+useProvideSmartsheetRowStore(meta, formState)
+
+const formRef = ref()
+
+watch(
+  () => formState,
+  () => {
+    console.log('formData', formState.value)
+  },
+)
+
+console.log(fields)
+</script>
+
+<template>
+  <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
+    <div class="flex w-2/3 flex-col mt-10">
+      <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">{{
+          sharedView.view.heading
+        }}</a-typography-title>
+        <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
+      </div>
+
+      <a-form ref="formRef" :model="formState" class="mt-8 pb-12 mb-8 px-3 bg-gray-50 rounded-md">
+        <div v-for="(field, index) in fields" :key="index" class="flex flex-col mt-4 px-10 pt-6 space-y-2">
+          <div class="flex">
+            <SmartsheetHeaderVirtualCell
+              v-if="isVirtualCol(field)"
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+            <SmartsheetHeaderCell
+              v-else
+              :column="{ ...field, title: field.label || field.title }"
+              :required="isRequired(field, field.required)"
+              :hide-menu="true"
+            />
+          </div>
+          <a-form-item
+            v-if="isVirtualCol(field)"
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetVirtualCell v-model="formState[field.title]" class="nc-input" :column="field" />
+          </a-form-item>
+          <a-form-item
+            v-else
+            class="ma-0 gap-0 pa-0"
+            :name="field.title"
+            :rules="[{ required: field.required, message: `${field.title} is required` }]"
+          >
+            <SmartsheetCell v-model="formState[field.title]" class="nc-input" :column="field" :edit-enabled="true" />
+          </a-form-item>
+        </div>
+      </a-form>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.nc-input {
+  @apply w-full !bg-white rounded px-2 py-2 min-h-[40px] mt-2 mb-2 flex align-center border-solid border-1 border-primary;
+}
+</style>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 04ddc5996f..8b702bbb48 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,4 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
+import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -10,6 +11,16 @@ const password = ref<string | undefined>()
 export function useSharedView() {
   const meta = ref<TableType>(() => sharedView.value?.model)
   const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const formColumns = computed(
+    () =>
+      columns.value
+        .filter(
+          (f: Record<string, any>) =>
+            f.show && f.uidt !== UITypes.Rollup && f.uidt !== UITypes.Lookup && f.uidt !== UITypes.Formula,
+        )
+        .sort((a: Record<string, any>, b: Record<string, any>) => a.order - b.order)
+        .map((c: Record<string, any>) => ({ ...c, required: !!(c.required || 0) })) ?? [],
+  )
 
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
@@ -61,5 +72,16 @@ export function useSharedView() {
     })
   }
 
-  return { sharedView, loadSharedView, meta, columns, nestedFilters, fetchSharedViewData, paginationData, sorts, exportFile }
+  return {
+    sharedView,
+    loadSharedView,
+    meta,
+    columns,
+    nestedFilters,
+    fetchSharedViewData,
+    paginationData,
+    sorts,
+    exportFile,
+    formColumns,
+  }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 1a00842f27..43f6ca6db3 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -19,7 +19,6 @@ export interface Row {
     commentCount?: number
   }
 }
-const formattedData = ref<Row[]>([])
 
 export function useViewData(
   meta: Ref<TableType> | ComputedRef<TableType> | undefined,
@@ -36,6 +35,7 @@ export function useViewData(
   const formColumnData = ref<FormType>()
   // todo: missing properties on FormType (success_msg, show_blank_form,
   const formViewData = ref<FormType & { success_msg?: string; show_blank_form?: boolean }>()
+  const formattedData = ref<Row[]>([])
 
   const isPublic = inject(IsPublicInj, ref(false))
   const { project } = useProject()
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
new file mode 100644
index 0000000000..ab6206ad97
--- /dev/null
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+
+import { useRoute } from '#imports'
+definePageMeta({
+  requiresAuth: false,
+})
+
+const route = useRoute()
+
+const reloadEventHook = createEventHook<void>()
+const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
+console.log(sharedView)
+await loadSharedView(route.params.viewId as string)
+
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, formColumns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+// useSmartsheetRowStore()
+</script>
+
+<template>
+  <NuxtLayout id="content" class="flex">
+    <div class="nc-container flex flex-col h-full mt-2 px-6">
+      <SharedViewForm />
+    </div>
+  </NuxtLayout>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 57a68e193b..035cdc8930 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -23,7 +23,7 @@ provide(FieldsInj, columns)
 provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-const { isGrid } = useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>

From e9b62481b14895640384416dea0be90c752f3373 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:46:52 +0530
Subject: [PATCH 092/106] fix/minor cleanup

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 6 +-----
 packages/nc-gui-v2/composables/useGridViewColumnWidth.ts | 6 +++---
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6e071e5d17..115b590036 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -83,11 +83,7 @@ const {
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
 onMounted(() => {
-  if (!isPublicView.value) {
-    loadGridViewColumns()
-  } else {
-    loadGridViewColumns(fields.value)
-  }
+  loadGridViewColumns()
 })
 
 provide(IsFormInj, ref(false))
diff --git a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
index 26820d311b..f26da87d31 100644
--- a/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
+++ b/packages/nc-gui-v2/composables/useGridViewColumnWidth.ts
@@ -36,9 +36,9 @@ export function useGridViewColumnWidth(view: Ref<(GridType & { id?: string }) |
     { deep: true, immediate: true },
   )
 
-  const loadGridViewColumns = async (cols?: GridColumnType[] | undefined) => {
-    if (!view.value?.id && !cols) return
-    const colsData: GridColumnType[] = cols ?? (await $api.dbView.gridColumnsList(view.value.id))
+  const loadGridViewColumns = async () => {
+    if (!view.value?.id && !isPublic.value) return
+    const colsData: GridColumnType[] = isPublic.value ? columns.value : await $api.dbView.gridColumnsList(view.value.id)
     gridViewCols.value = colsData.reduce<Record<string, GridColumnType>>(
       (o, col) => ({
         ...o,

From f1f33b5a24720dab29ae75a1f799ea48c5042069 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 14:52:48 +0530
Subject: [PATCH 093/106] fix/export fix shared view

---
 .../nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
index 54eaa310fb..f852b05a24 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/MoreActions.vue
@@ -53,7 +53,8 @@ const exportFile = async (exportType: ExportTypes) => {
     while (!isNaN(offset) && offset > -1) {
       let res
       if (isPublicView.value) {
-        res = await exportFile(fields.value, offset, exportType, responseType)
+        const { exportFile: sharedViewExportFile } = useSharedView()
+        res = await sharedViewExportFile(fields.value, offset, exportType, responseType)
       } else {
         res = await $api.dbViewRow.export(
           'noco',

From 5ec2b687eb2129026ad76d3cdc30adf15aa6c283 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 17:02:31 +0530
Subject: [PATCH 094/106] refactor/gui-v2 added password login to shared grid
 view

---
 .../components/shared-view/AskPassword.vue    | 51 +++++++++++++++++++
 .../nc-gui-v2/components/shared-view/Grid.vue | 32 ++++++++++++
 .../nc-gui-v2/composables/useSharedView.ts    | 36 +++++++++----
 .../pages/[projectType]/view/[viewId].vue     | 35 +++++--------
 4 files changed, 120 insertions(+), 34 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/shared-view/AskPassword.vue
 create mode 100644 packages/nc-gui-v2/components/shared-view/Grid.vue

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
new file mode 100644
index 0000000000..8dc57a3e71
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { notification } from 'ant-design-vue'
+import { extractSdkResponseErrorMsg } from '~/utils'
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
+interface Props {
+  modelValue: boolean
+}
+
+const route = useRoute()
+const { loadSharedView } = useSharedView()
+
+const formState = ref({ password: undefined })
+const vModel = useVModel(props, 'modelValue', emit)
+
+const onFinish = async () => {
+  try {
+    await loadSharedView(route.params.viewId as string, formState.value.password)
+    vModel.value = false
+  } catch (e: any) {
+    console.error(e)
+    notification.error({
+      message: await extractSdkResponseErrorMsg(e),
+    })
+  }
+}
+</script>
+
+<template>
+  <a-modal
+    v-model:visible="vModel"
+    :closable="false"
+    width="28rem"
+    centered
+    :footer="null"
+    :mask-closable="false"
+    @close="vModel = false"
+  >
+    <div class="w-full flex flex-col">
+      <a-typography-title :level="4">This shared view is protected</a-typography-title>
+      <a-form ref="formRef" :model="formState" class="mt-2" @finish="onFinish">
+        <a-form-item name="password" :rules="[{ required: true, message: 'Password is required' }]">
+          <a-input-password v-model:value="formState.password" placeholder="Enter password" />
+        </a-form-item>
+        <a-button type="primary" html-type="submit">Unlock</a-button>
+      </a-form>
+    </div>
+  </a-modal>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
new file mode 100644
index 0000000000..2c7eb73b56
--- /dev/null
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { TableType } from 'nocodb-sdk/build/main'
+
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+
+const { sharedView, meta, columns } = useSharedView()
+
+const reloadEventHook = createEventHook<void>()
+provide(ReloadViewDataHookInj, reloadEventHook)
+provide(ReadonlyInj, ref(true))
+provide(MetaInj, meta)
+provide(ActiveViewInj, sharedView)
+provide(FieldsInj, columns)
+provide(IsPublicInj, ref(true))
+
+useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+</script>
+
+<template>
+  <div class="nc-container flex flex-col h-full mt-2 px-6">
+    <SmartsheetToolbar />
+    <SmartsheetGrid />
+  </div>
+</template>
+
+<style scoped>
+.nc-container {
+  height: calc(100% - var(--header-height));
+  flex: 1 1 100%;
+}
+</style>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index 8b702bbb48..db8027ebc9 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -1,5 +1,5 @@
 import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, TableType, ViewType } from 'nocodb-sdk'
-import { UITypes, isVirtualCol } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
 const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -9,8 +9,8 @@ const sorts = ref<SortType[]>([])
 const password = ref<string | undefined>()
 
 export function useSharedView() {
-  const meta = ref<TableType>(() => sharedView.value?.model)
-  const columns = ref<ColumnType[]>(() => sharedView.value?.model?.columns ?? [])
+  const meta = ref<TableType>(sharedView.value?.model)
+  const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
   const formColumns = computed(
     () =>
       columns.value
@@ -25,8 +25,14 @@ export function useSharedView() {
   const { $api } = useNuxtApp()
   const { setMeta } = useMetas()
 
-  const loadSharedView = async (viewId: string) => {
-    const viewMeta = await $api.public.sharedViewMetaGet(viewId)
+  const loadSharedView = async (viewId: string, localPassword: string | undefined = undefined) => {
+    const viewMeta = await $api.public.sharedViewMetaGet(viewId, {
+      headers: {
+        'xc-password': localPassword ?? password.value,
+      },
+    })
+
+    if (localPassword) password.value = localPassword
     sharedView.value = viewMeta
 
     meta.value = viewMeta.model
@@ -42,11 +48,19 @@ export function useSharedView() {
     const page = paginationData.value.page || 1
     const pageSize = paginationData.value.pageSize || 25
 
-    const { data } = await $api.public.dataList(sharedView?.value?.uuid, {
-      offset: (page - 1) * pageSize,
-      filterArrJson: JSON.stringify(nestedFilters.value),
-      sortArrJson: JSON.stringify(sorts.value),
-    } as any)
+    const { data } = await $api.public.dataList(
+      sharedView?.value?.uuid,
+      {
+        offset: (page - 1) * pageSize,
+        filterArrJson: JSON.stringify(nestedFilters.value),
+        sortArrJson: JSON.stringify(sorts.value),
+      } as any,
+      {
+        headers: {
+          'xc-password': password.value,
+        },
+      },
+    )
 
     return data
   }
@@ -67,7 +81,7 @@ export function useSharedView() {
         filterArrJson: JSON.stringify(nestedFilters.value),
       },
       headers: {
-        'xc-password': password,
+        'xc-password': password.value,
       },
     })
   }
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 035cdc8930..09668bcf02 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
-
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 
 import { useRoute } from '#imports'
 definePageMeta({
@@ -12,32 +9,24 @@ definePageMeta({
 const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
-const { sharedView, loadSharedView, meta, columns } = useSharedView()
-
-await loadSharedView(route.params.viewId as string)
-
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(MetaInj, meta)
-provide(ActiveViewInj, sharedView)
-provide(FieldsInj, columns)
-provide(IsPublicInj, ref(true))
 provide(ReadonlyInj, ref(true))
 
-useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
+const { loadSharedView } = useSharedView()
+const showPassword = ref(false)
+
+try {
+  await loadSharedView(route.params.viewId as string)
+} catch (e) {
+  showPassword.value = true
+}
 </script>
 
 <template>
   <NuxtLayout id="content" class="flex">
-    <div class="nc-container flex flex-col h-full mt-2 px-6">
-      <SmartsheetToolbar />
-      <SmartsheetGrid :is-public-view="true" />
+    <div v-if="showPassword">
+      <SharedViewAskPassword v-model="showPassword" />
     </div>
+    <SharedViewGrid v-else />
   </NuxtLayout>
 </template>
-
-<style scoped>
-.nc-container {
-  height: calc(100% - var(--header-height));
-  flex: 1 1 100%;
-}
-</style>

From 25ddcb70e8505f8c7647758f370bae7f19056d0b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sat, 13 Aug 2022 17:15:38 +0530
Subject: [PATCH 095/106] refactor/gui-v2 added allowcsv flag to shared grid
 view

---
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 4 +++-
 packages/nc-gui-v2/composables/useSharedView.ts      | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index d895f47221..1d92b96763 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -3,6 +3,7 @@ import { useSmartsheetStoreOrThrow } from '~/composables'
 import { IsPublicInj } from '~/context'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
+const { allowCSVDownload } = useSharedView()
 const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
@@ -16,7 +17,8 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
-    <SmartsheetToolbarMoreActions v-if="isGrid" />
+    <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
+
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
   </div>
diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index db8027ebc9..e033103bad 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -7,6 +7,7 @@ const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
 const sharedView = ref<ViewType>()
 const sorts = ref<SortType[]>([])
 const password = ref<string | undefined>()
+const allowCSVDownload = ref<boolean>(false)
 
 export function useSharedView() {
   const meta = ref<TableType>(sharedView.value?.model)
@@ -32,6 +33,8 @@ export function useSharedView() {
       },
     })
 
+    allowCSVDownload.value = JSON.parse(viewMeta.meta).allowCSVDownload
+
     if (localPassword) password.value = localPassword
     sharedView.value = viewMeta
 
@@ -97,5 +100,6 @@ export function useSharedView() {
     sorts,
     exportFile,
     formColumns,
+    allowCSVDownload,
   }
 }

From 8f37225eb6dd33cb55063dd67263fa088037f29b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 12:46:58 +0530
Subject: [PATCH 096/106] refactor/added shared-view layout

---
 packages/nc-gui-v2/layouts/shared-view.vue | 45 ++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..5874cba716
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+
+        <a-tooltip placement="left">
+          <template #title> Switch language </template>
+
+          <div class="flex pr-4 items-center">
+            <GeneralLanguage class="cursor-pointer text-2xl" />
+          </div>
+        </a-tooltip>
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>

From c24a946e93b88cea49564d70f7b6a307ea9b0166 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:06:46 +0530
Subject: [PATCH 097/106] refactor/added show and hide all option to shared
 view

---
 .../smartsheet-toolbar/ColumnFilterMenu.vue     |  5 +++--
 .../nc-gui-v2/components/smartsheet/Toolbar.vue |  7 +++----
 .../nc-gui-v2/composables/useViewColumns.ts     | 17 +++++++++++++++++
 3 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 6afb92c9fc..3274d16ecd 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
-import { ActiveViewInj, IsLockedInj } from '~/context'
+import { ActiveViewInj, IsLockedInj, IsPublicInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const isLocked = inject(IsLockedInj)
 const activeView = inject(ActiveViewInj)
+const isPublic = inject(IsPublicInj)
 
 const { filterAutoSave } = useGlobal()
 
@@ -50,7 +51,7 @@ const applyChanges = async () => {
         :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
-        <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
+        <div v-if="!isPublic" class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
           <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 1d92b96763..27cc2fa2c4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -9,16 +9,15 @@ const isPublic = inject(IsPublicInj, ref(false))
 
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
-    <SmartsheetToolbarSearchData v-if="isGrid && !isPublic" class="flex-shrink" />
+    <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
-    <SmartsheetToolbarColumnFilterMenu v-if="(isGrid && !isPublic) || isGallery" />
+    <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
 
-    <SmartsheetToolbarSortListMenu v-if="(isGrid && !isPublic) || isGallery" />
+    <SmartsheetToolbarSortListMenu v-if="isGrid || isGallery" />
 
     <SmartsheetToolbarShareView v-if="(isForm || isGrid) && !isPublic" />
 
     <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
-
     <div class="flex-1" />
     <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
   </div>
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 6cc390ef37..cdd19b9afb 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -55,6 +55,15 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
   }
 
   const showAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: true,
+      }))
+      reloadData?.()
+      return
+    }
+
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.showAllColumn(view.value.id, {
@@ -69,6 +78,14 @@ export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRe
     reloadData?.()
   }
   const hideAll = async (ignoreIds?: any) => {
+    if (isPublic.value) {
+      fields.value = fields.value?.map((field) => ({
+        ...field,
+        show: false,
+      }))
+      reloadData?.()
+      return
+    }
     if (view?.value?.id) {
       if (ignoreIds) {
         await $api.dbView.hideAllColumn(view.value.id, {

From 64f62be536d695141977b7daa66b157d2f87ea8e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:31:23 +0530
Subject: [PATCH 098/106] fix/fixed rebase regressions

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue    | 6 ++----
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 4 ++--
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 115b590036..79566809f2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -82,9 +82,7 @@ const {
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
-onMounted(() => {
-  loadGridViewColumns()
-})
+onMounted(loadGridViewColumns)
 
 provide(IsFormInj, ref(false))
 
@@ -97,8 +95,8 @@ provide(ChangePageInj, changePage)
 provide(ReadonlyInj, !isUIAllowed('xcDatatableEditable'))
 
 reloadViewDataHook?.on(async () => {
-  loadAggCommentsCount()
   await loadData()
+  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 27cc2fa2c4..85f80385a6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -8,7 +8,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 </script>
 
 <template>
-  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
+  <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center h-[48px] px-2 border-b" style="z-index: 7">
     <SmartsheetToolbarFieldsMenu v-if="isGrid || isGallery" :show-system-fields="false" class="ml-1" />
 
     <SmartsheetToolbarColumnFilterMenu v-if="isGrid || isGallery" />
@@ -19,7 +19,7 @@ const isPublic = inject(IsPublicInj, ref(false))
 
     <SmartsheetToolbarMoreActions v-if="(isGrid && !isPublic) || (isGrid && isPublic && allowCSVDownload)" />
     <div class="flex-1" />
-    <SmartsheetToolbarSearchData v-if="isGrid || isGallery" class="shrink mr-2" />
+    <SmartsheetToolbarSearchData v-if="(isGrid || isGallery) && !isPublic" class="shrink mr-2" />
   </div>
 </template>
 

From 9910fc7bbbc1d463036d5e67d8c1e13b27bc7a1a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Sun, 14 Aug 2022 18:40:13 +0530
Subject: [PATCH 099/106] fix/minor import fix

---
 packages/nc-gui-v2/components/shared-view/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 2c7eb73b56..0c4bb3f5d1 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
+import type { TableType } from 'nocodb-sdk'
 
 import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 

From 31b628767e2c74ca5483aa9ef3d8a9dbf405d15b Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 10:08:11 +0530
Subject: [PATCH 100/106] fix/removed unnecassary layout

---
 packages/nc-gui-v2/layouts/shared-view.vue | 45 ----------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
deleted file mode 100644
index 5874cba716..0000000000
--- a/packages/nc-gui-v2/layouts/shared-view.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import { navigateTo } from '#app'
-</script>
-
-<script lang="ts">
-export default {
-  name: 'SharedView',
-}
-</script>
-
-<template>
-  <a-layout id="nc-app">
-    <a-layout class="!flex-col">
-      <a-layout-header class="flex !bg-primary items-center text-white pl-1 pr-4 shadow-lg">
-        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
-          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
-        </div>
-
-        <div class="flex-1" />
-
-        <a-tooltip placement="left">
-          <template #title> Switch language </template>
-
-          <div class="flex pr-4 items-center">
-            <GeneralLanguage class="cursor-pointer text-2xl" />
-          </div>
-        </a-tooltip>
-      </a-layout-header>
-
-      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
-        <slot />
-      </div>
-    </a-layout>
-  </a-layout>
-</template>
-
-<style lang="scss" scoped>
-:deep(.ant-dropdown-menu-item-group-title) {
-  @apply border-b-1;
-}
-
-:deep(.ant-dropdown-menu-item-group-list) {
-  @apply m-0;
-}
-</style>

From 287c145bb02522572f0e5635942b4e0477d83450 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 11:55:23 +0530
Subject: [PATCH 101/106] fix/added shared view layout

---
 .../nc-gui-v2/components/shared-view/Grid.vue |  4 +-
 packages/nc-gui-v2/layouts/shared-view.vue    | 37 +++++++++++++++++++
 .../pages/[projectType]/view/[viewId].vue     |  3 +-
 3 files changed, 41 insertions(+), 3 deletions(-)
 create mode 100644 packages/nc-gui-v2/layouts/shared-view.vue

diff --git a/packages/nc-gui-v2/components/shared-view/Grid.vue b/packages/nc-gui-v2/components/shared-view/Grid.vue
index 0c4bb3f5d1..7a39c09f98 100644
--- a/packages/nc-gui-v2/components/shared-view/Grid.vue
+++ b/packages/nc-gui-v2/components/shared-view/Grid.vue
@@ -18,9 +18,9 @@ useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
 </script>
 
 <template>
-  <div class="nc-container flex flex-col h-full mt-2 px-6">
+  <div class="nc-container flex flex-col h-full mt-4 px-6">
     <SmartsheetToolbar />
-    <SmartsheetGrid />
+    <SmartsheetGrid class="px-3" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/layouts/shared-view.vue b/packages/nc-gui-v2/layouts/shared-view.vue
new file mode 100644
index 0000000000..a6d2aef876
--- /dev/null
+++ b/packages/nc-gui-v2/layouts/shared-view.vue
@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { navigateTo } from '#app'
+</script>
+
+<script lang="ts">
+export default {
+  name: 'SharedView',
+}
+</script>
+
+<template>
+  <a-layout id="nc-app">
+    <a-layout class="!flex-col">
+      <a-layout-header class="flex !bg-primary items-center text-white pl-3 pr-4 shadow-lg">
+        <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105" @click="navigateTo('/')">
+          <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
+        </div>
+
+        <div class="flex-1" />
+      </a-layout-header>
+
+      <div class="w-full overflow-hidden" style="height: calc(100% - var(--header-height))">
+        <slot />
+      </div>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-dropdown-menu-item-group-title) {
+  @apply border-b-1;
+}
+
+:deep(.ant-dropdown-menu-item-group-list) {
+  @apply m-0;
+}
+</style>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 09668bcf02..9ba0c0d68e 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -4,6 +4,7 @@ import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
 import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
+  layout: 'shared-view',
 })
 
 const route = useRoute()
@@ -23,7 +24,7 @@ try {
 </script>
 
 <template>
-  <NuxtLayout id="content" class="flex">
+  <NuxtLayout id="content" class="flex" name="shared-view">
     <div v-if="showPassword">
       <SharedViewAskPassword v-model="showPassword" />
     </div>

From 1c2beca95722f275172c84c8966c8fd50061fbca Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 12:01:35 +0530
Subject: [PATCH 102/106] fix/replaced usage of shared state with useState

---
 packages/nc-gui-v2/composables/useSharedView.ts | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useSharedView.ts b/packages/nc-gui-v2/composables/useSharedView.ts
index e033103bad..ce8faa3d5c 100644
--- a/packages/nc-gui-v2/composables/useSharedView.ts
+++ b/packages/nc-gui-v2/composables/useSharedView.ts
@@ -2,14 +2,17 @@ import type { ColumnType, ExportTypes, FilterType, PaginatedType, SortType, Tabl
 import { UITypes } from 'nocodb-sdk'
 import { useNuxtApp } from '#app'
 
-const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
-const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
-const sharedView = ref<ViewType>()
-const sorts = ref<SortType[]>([])
-const password = ref<string | undefined>()
-const allowCSVDownload = ref<boolean>(false)
-
 export function useSharedView() {
+  const nestedFilters = useState<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>(
+    'nestedFilters',
+    () => [],
+  )
+  const paginationData = useState<PaginatedType>('paginationData', () => ({ page: 1, pageSize: 25 }))
+  const sharedView = useState<ViewType>('sharedView')
+  const sorts = useState<SortType[]>('sorts', () => [])
+  const password = useState<string | undefined>('password')
+  const allowCSVDownload = useState<boolean>('allowCSVDownload', () => false)
+
   const meta = ref<TableType>(sharedView.value?.model)
   const columns = ref<ColumnType[]>(sharedView.value?.model?.columns)
   const formColumns = computed(

From 4745c9d810bdbb90bf1ddfda0f9dc42777c7075f Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 15 Aug 2022 12:06:07 +0530
Subject: [PATCH 103/106] fix/pr review included

---
 packages/nc-gui-v2/components/shared-view/AskPassword.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
index 8dc57a3e71..ef50960515 100644
--- a/packages/nc-gui-v2/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { notification } from 'ant-design-vue'
+import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
@@ -19,9 +19,7 @@ const onFinish = async () => {
     vModel.value = false
   } catch (e: any) {
     console.error(e)
-    notification.error({
-      message: await extractSdkResponseErrorMsg(e),
-    })
+    message.error(await extractSdkResponseErrorMsg(e))
   }
 }
 </script>

From 9a6480928458722ae309ca1f80eea511ea30c303 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 14:11:45 +0530
Subject: [PATCH 104/106] fix/removed unnecassary imports

---
 .../components/shared-view/AskPassword.vue      |  5 +++--
 .../nc-gui-v2/components/shared-view/Form.vue   | 17 ++++-------------
 .../nc-gui-v2/components/smartsheet/Toolbar.vue |  3 +--
 .../nc-gui-v2/composables/useViewColumns.ts     |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts   |  3 ++-
 .../nc-gui-v2/composables/useViewFilters.ts     |  4 +---
 packages/nc-gui-v2/composables/useViewSorts.ts  |  3 +--
 .../pages/[projectType]/form/[viewId].vue       |  9 +++------
 .../pages/[projectType]/view/[viewId].vue       |  3 +--
 9 files changed, 17 insertions(+), 32 deletions(-)

diff --git a/packages/nc-gui-v2/components/shared-view/AskPassword.vue b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
index ef50960515..83f0481245 100644
--- a/packages/nc-gui-v2/components/shared-view/AskPassword.vue
+++ b/packages/nc-gui-v2/components/shared-view/AskPassword.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg } from '~/utils'
-const props = defineProps<Props>()
-const emit = defineEmits(['update:modelValue'])
+
 interface Props {
   modelValue: boolean
 }
+const props = defineProps<Props>()
+const emit = defineEmits(['update:modelValue'])
 
 const route = useRoute()
 const { loadSharedView } = useSharedView()
diff --git a/packages/nc-gui-v2/components/shared-view/Form.vue b/packages/nc-gui-v2/components/shared-view/Form.vue
index 89db748be6..c8ab68b353 100644
--- a/packages/nc-gui-v2/components/shared-view/Form.vue
+++ b/packages/nc-gui-v2/components/shared-view/Form.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { FieldsInj, MetaInj } from '~/context'
+import { FieldsInj, MetaInj } from '#imports'
 
 const fields = inject(FieldsInj, ref([]))
 const meta = inject(MetaInj)
@@ -28,24 +28,15 @@ useSmartsheetStoreOrThrow()
 useProvideSmartsheetRowStore(meta, formState)
 
 const formRef = ref()
-
-watch(
-  () => formState,
-  () => {
-    console.log('formData', formState.value)
-  },
-)
-
-console.log(fields)
 </script>
 
 <template>
   <div class="flex flex-col my-4 space-y-2 mx-32 items-center">
     <div class="flex w-2/3 flex-col mt-10">
       <div class="flex flex-col items-start px-14 py-8 bg-gray-50 rounded-md w-full">
-        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">{{
-          sharedView.view.heading
-        }}</a-typography-title>
+        <a-typography-title class="border-b-1 border-gray-100 w-full pb-3" :level="1">
+          {{ sharedView.view.heading }}
+        </a-typography-title>
         <a-typography class="pl-1 text-sm">{{ sharedView.view.subheading }}</a-typography>
       </div>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 85f80385a6..96d0d002c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { useSmartsheetStoreOrThrow } from '~/composables'
-import { IsPublicInj } from '~/context'
+import { IsPublicInj, useSmartsheetStoreOrThrow } from '#imports'
 
 const { isGrid, isForm, isGallery } = useSmartsheetStoreOrThrow()
 const { allowCSVDownload } = useSharedView()
diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index cdd19b9afb..c775d36dc3 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -3,7 +3,7 @@ import type { ColumnType, TableType, ViewType } from 'nocodb-sdk'
 import { watch } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import { IsPublicInj } from '~/context'
+import { IsPublicInj } from '#imports'
 
 export function useViewColumns(view: Ref<ViewType> | undefined, meta: ComputedRef<TableType>, reloadData?: () => void) {
   const isPublic = inject(IsPublicInj, ref(false))
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 43f6ca6db3..16a769269f 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,7 +1,8 @@
 import type { Api, ColumnType, FormType, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { message } from 'ant-design-vue'
-import { IsPublicInj, NOCO, computed, extractPkFromRow, extractSdkResponseErrorMsg, ref, useNuxtApp, useProject } from '#imports'
+import { useNuxtApp } from '#app'
+import { IsPublicInj, NOCO, extractPkFromRow, extractSdkResponseErrorMsg, useProject } from '#imports'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 6e22b9690e..a5b7e2e199 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -1,8 +1,6 @@
 import type { ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
-import { useNuxtApp, useUIPermission } from '#imports'
-import { useMetas } from '~/composables/useMetas'
-import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj, useMetas, useNuxtApp, useUIPermission } from '#imports'
 import type { Filter } from '~/lib'
 
 export function useViewFilters(
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index a1e8f2bc99..3926eb467c 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -1,7 +1,6 @@
 import type { GalleryType, GridType, KanbanType, SortType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#imports'
-import { IsPublicInj, ReloadViewDataHookInj } from '~/context'
+import { IsPublicInj, ReloadViewDataHookInj, useNuxtApp } from '#imports'
 
 export function useViewSorts(
   view: Ref<(GridType | KanbanType | GalleryType) & { id?: string }> | undefined,
diff --git a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
index ab6206ad97..aa46ab0e85 100644
--- a/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/form/[viewId].vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { TableType } from 'nocodb-sdk/build/main'
+import type { TableType } from 'nocodb-sdk'
+import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj, useRoute } from '#imports'
 
-import { ActiveViewInj, FieldsInj, IsPublicInj, MetaInj, ReloadViewDataHookInj } from '~/context'
-
-import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
 })
@@ -13,7 +11,7 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 const { sharedView, loadSharedView, meta, formColumns } = useSharedView()
-console.log(sharedView)
+
 await loadSharedView(route.params.viewId as string)
 
 provide(ReloadViewDataHookInj, reloadEventHook)
@@ -23,7 +21,6 @@ provide(FieldsInj, formColumns)
 provide(IsPublicInj, ref(true))
 
 useProvideSmartsheetStore(sharedView as Ref<TableType>, meta)
-// useSmartsheetRowStore()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
index 9ba0c0d68e..2be1b26654 100644
--- a/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
+++ b/packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { ReadonlyInj, ReloadViewDataHookInj } from '~/context'
+import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
 
-import { useRoute } from '#imports'
 definePageMeta({
   requiresAuth: false,
   layout: 'shared-view',

From 23cbd6fe98503f85d74810c6db4e032c689c8fc4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 15:17:26 +0530
Subject: [PATCH 105/106] fix/fixed rebase regressions

---
 .../components/smartsheet-toolbar/ColumnFilter.vue    |  4 ++--
 packages/nc-gui-v2/composables/useViewData.ts         |  2 +-
 packages/nc-gui-v2/composables/useViewFilters.ts      |  2 +-
 packages/nc-gui-v2/composables/useViewSorts.ts        | 11 +++--------
 4 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 816ae9c15a..09231feb10 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -15,8 +15,8 @@ const {
   parentId,
   autoSave = true,
   hookId = null,
-  modelValue: Filter[]
-} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string }>()
+  modelValue,
+} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
 
 const emit = defineEmits(['update:filtersLength'])
 
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 16a769269f..8c37a085bf 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -107,7 +107,7 @@ export function useViewData(
     if ((!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) && !isPublic.value) return
 
     const response = !isPublic.value
-      ? await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, {
+      ? await $api.dbViewRow.list('noco', project.value.id!, meta.value.id!, viewMeta!.value.id, {
           ...params,
           where: where?.value,
         })
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index a5b7e2e199..4d1372a460 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -86,7 +86,7 @@ export function useViewFilters(
         }
       }
     }
-    }
+
     reloadData?.()
   }
 
diff --git a/packages/nc-gui-v2/composables/useViewSorts.ts b/packages/nc-gui-v2/composables/useViewSorts.ts
index 3926eb467c..b6a3fa6bc0 100644
--- a/packages/nc-gui-v2/composables/useViewSorts.ts
+++ b/packages/nc-gui-v2/composables/useViewSorts.ts
@@ -68,17 +68,12 @@ export function useViewSorts(
   const deleteSort = async (sort: SortType, i: number) => {
     // TOOD:
     // if (!this.shared && sort.id && this._isUIAllowed('sortSync')) {
-    if (isPublic.value) {
-      sorts.value.splice(i, 1)
-      sorts.value = [...sorts.value]
-      return
-    }
 
-    if (isUIAllowed('sortSync') && sort.id) {
+    if (isUIAllowed('sortSync') && sort.id && !isPublic.value) {
       await $api.dbTableSort.delete(sort.id)
-    } else {
-      sorts.value.splice(i, 1)
     }
+    sorts.value.splice(i, 1)
+    sorts.value = [...sorts.value]
   }
   return { sorts, loadSorts, addSort, deleteSort, saveOrUpdate }
 }

From 6f08a90ec22cac9b738fce295a2338b6953fde8c Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 16 Aug 2022 15:21:44 +0530
Subject: [PATCH 106/106] fix/removed row edit in public mode

---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 79566809f2..8aabffe927 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -356,15 +356,17 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                 <tr class="nc-grid-row">
                   <td key="row-index" class="caption nc-grid-cell pl-5 pr-1">
                     <div class="align-center flex min-w-[80px]">
-                      <div class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-if="!readonly" class="nc-row-no" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div v-else>{{ rowIndex + 1 }}</div>
                       <div
+                        v-if="!readonly"
                         :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
                         class="nc-row-expand-and-checkbox"
                       >
                         <a-checkbox v-model:checked="row.rowMeta.selected" />
                       </div>
                       <span class="flex-1" />
-                      <div class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
+                      <div v-if="!readonly" class="nc-expand" :class="{ 'nc-comment': row.rowMeta?.commentCount }">
                         <span
                           v-if="row.rowMeta?.commentCount"
                           class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"