From 5974ab71e2936eb39e1e069cce044b01bf92e697 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 17:22:03 +0800
Subject: [PATCH 01/76] chore(gui-v2): remove max width on EditOrAdd component

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 03160906da..648c6f6b02 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -96,7 +96,7 @@ watch(
 </script>
 
 <template>
-  <div class="max-w-[450px] min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
+  <div class="min-w-[350px] w-max max-h-[95vh] bg-white shadow p-4 overflow-auto" @click.stop>
     <a-form v-model="formState" name="column-create-or-edit" layout="vertical">
       <a-form-item :label="$t('labels.columnName')" v-bind="validateInfos.column_name">
         <a-input

From 7a19c8df1c400b3e2fbdc180a0d552638161de0a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 17:22:51 +0800
Subject: [PATCH 02/76] refactor(gui-v2): formula hint layout

---
 .../smartsheet-column/FormulaOptions.vue      | 49 +++++++++----------
 1 file changed, 22 insertions(+), 27 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 0acfc5732b..767f19491f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -101,6 +101,7 @@ const suggestionsList = computed(() => {
         text: c.title,
         type: 'column',
         icon: getUIDTIcon(c.uidt),
+        uidt: c.uidt,
       })),
     ...availableBinOps.map((op: string) => ({
       text: op,
@@ -613,7 +614,7 @@ onMounted(() => {
 <template>
   <div class="formula-wrapper">
     <a-form-item v-bind="validateInfos.formula_raw" label="Formula">
-      <a-input
+      <a-textarea
         ref="formulaRef"
         v-model:value="formState.formula_raw"
         class="mb-2"
@@ -623,21 +624,13 @@ onMounted(() => {
         @change="handleInputDeb"
       />
     </a-form-item>
-    <div class="text-gray-600 mt-2 prose-sm">
+    <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
       >.
     </div>
-    <a-drawer
-      v-model:visible="formulaSuggestionDrawer"
-      :closable="false"
-      :mask="false"
-      :mask-closable="false"
-      placement="right"
-      width="500px"
-      class="h-full overflow-auto"
-    >
+    <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 }">
           <a-list-item
@@ -650,23 +643,25 @@ onMounted(() => {
             @click.prevent.stop="appendText(item)"
           >
             <a-list-item-meta>
-              <template v-if="item.type === 'function'" #description>
-                {{ item.description }} <br /><br />
-                Syntax: <br />
-                {{ item.syntax }} <br /><br />
-                Examples: <br />
-                <div v-for="(example, idx) of item.examples" :key="idx">
-                  <div>({{ idx + 1 }}): {{ example }}</div>
-                </div>
-              </template>
               <template #title>
                 <div class="flex">
-                  <div class="flex-1">
-                    {{ item.text }}
-                  </div>
-                  <div class="">
-                    {{ getFormulaTypeName(item.type) }}
-                  </div>
+                  <a-col :span="6">
+                    <span class="prose-sm text-gray-600">{{ item.text }}</span>
+                  </a-col>
+                  <a-col :span="18">
+                    <div v-if="item.type === 'function'" class="text-xs text-gray-500">
+                      {{ item.description }} <br /><br />
+                      Syntax: <br />
+                      {{ item.syntax }} <br /><br />
+                      Examples: <br />
+                      <div v-for="(example, idx) of item.examples" :key="idx">
+                        <div>({{ idx + 1 }}): {{ example }}</div>
+                      </div>
+                    </div>
+                    <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
+                      <a-badge-ribbon :text="item.uidt" />
+                    </div>
+                  </a-col>
                 </div>
               </template>
               <template #avatar>
@@ -678,6 +673,6 @@ onMounted(() => {
           </a-list-item>
         </template>
       </a-list>
-    </a-drawer>
+    </div>
   </div>
 </template>

From e8a122899a469220182d510d86cf9433c90bd1ba Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 17:25:28 +0800
Subject: [PATCH 03/76] refactor(gui-v2): use autoload icons

---
 .../components/smartsheet-column/FormulaOptions.vue         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 767f19491f..8b1d3f5f36 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -16,8 +16,6 @@ import {
   insertAtCursor,
   validateDateWithUnknownFormat,
 } from '@/utils'
-import MdiFunctionIcon from '~icons/mdi/function'
-import MdiOperatorIcon from '~icons/mdi/calculator'
 
 enum JSEPNode {
   COMPOUND = 'Compound',
@@ -665,8 +663,8 @@ onMounted(() => {
                 </div>
               </template>
               <template #avatar>
-                <MdiFunctionIcon v-if="item.type === 'function'" class="text-lg" />
-                <MdiOperatorIcon v-if="item.type === 'op'" class="text-lg" />
+                <mdi-function v-if="item.type === 'function'" class="text-lg" />
+                <mdi-calculator v-if="item.type === 'op'" class="text-lg" />
                 <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
               </template>
             </a-list-item-meta>

From b2b8e03908f3a68743bccff8fe3e31e4f8efacdc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 17:25:53 +0800
Subject: [PATCH 04/76] chore(gui-v2): sync components.d.ts

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

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 0e5864cd54..eca4ed4f57 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -9,6 +9,7 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
+    ABadgeRibbon: typeof import('ant-design-vue/es')['BadgeRibbon']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']
     ACarousel: typeof import('ant-design-vue/es')['Carousel']
@@ -63,8 +64,11 @@ declare module '@vue/runtime-core' {
     AUploadDragger: typeof import('ant-design-vue/es')['UploadDragger']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
+    MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
+    MdiFunction: typeof import('~icons/mdi/function')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
+    MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

From 080e4acbdec88b9cc5738ac503af1269a243e623 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 17:35:33 +0800
Subject: [PATCH 05/76] fix(gui-v2): default value not showing

---
 .../nc-gui-v2/components/smartsheet-column/FormulaOptions.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 8b1d3f5f36..e3f500554e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -593,7 +593,7 @@ function getFormulaTypeName(type: string) {
 }
 
 // set default value
-formState.value.formula_raw = (column?.colOptions as Record<string, any>)?.formula_raw || ''
+formState.value.formula_raw = (column?.value?.colOptions as Record<string, any>)?.formula_raw || ''
 
 // set additional validations
 setAdditionalValidations({

From c6a529a4cbd1ed4bab364b3e3d2c1a2fa275cb56 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 18:13:57 +0800
Subject: [PATCH 06/76] fix(gui-v2): formula value type issue

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

diff --git a/packages/nc-gui-v2/components/virtual-cell/Formula.vue b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
index bcdf61776d..5dd50bc0d4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Formula.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Formula.vue
@@ -19,7 +19,7 @@ const showEditFormulaWarningMessage = () => {
   }, 3000)
 }
 
-const result = computed(() => (isPg ? handleTZ(value) : value))
+const result = isPg ? handleTZ(value) : value
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 </script>

From f31f92ad479ea2826cfb124b684986f67b5be6cc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 18:28:10 +0800
Subject: [PATCH 07/76] fix(gui-v2): id of undefined in formula

---
 .../nc-gui-v2/components/smartsheet-column/FormulaOptions.vue | 4 ++--
 1 file 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 e3f500554e..081075dcf7 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -93,7 +93,7 @@ const suggestionsList = computed(() => {
     ...columns.value
       .filter(
         (c: Record<string, any>) =>
-          !column || (column.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1)),
+          !column || (column.value.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1)),
       )
       .map((c: any) => ({
         text: c.title,
@@ -257,7 +257,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
     const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
     if (targetFormulaCol) {
       formulaPaths.push({
-        [column.id]: [targetFormulaCol.id],
+        [column?.value?.id as string]: [targetFormulaCol.id],
       })
     }
     const vertices = formulaPaths.length

From b34afd239c347093b16190ef57a2d2ad3a36b535 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Tue, 9 Aug 2022 18:31:39 +0800
Subject: [PATCH 08/76] fix(gui-v2): feed title in case column name is null

---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 648c6f6b02..1691f6f8e1 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -93,6 +93,11 @@ watch(
     }
   },
 )
+
+// for cases like formula
+if (!formState.value?.column_name) {
+  formState.value.column_name = formState.value?.title
+}
 </script>
 
 <template>

From 075105967a3abbc14c0935b12c93a3ab8bc808bc Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 10:31:39 +0530
Subject: [PATCH 09/76] refactor/gui-v2-added basic setup for api snippet but
 httpsnippet config is still broken

---
 package-lock.json                             | 525 ++++++++++++++++--
 package.json                                  |   1 +
 .../smartsheet/sidebar/MenuBottom.vue         |   3 +
 .../smartsheet/sidebar/menu/ApiSnippet.vue    | 151 +++++
 packages/nc-gui-v2/composables/useProject.ts  |   3 +-
 packages/nc-gui-v2/composables/useViewData.ts |   7 +
 packages/nc-gui-v2/nuxt.config.ts             |   1 +
 packages/nc-gui-v2/package.json               |   3 +-
 8 files changed, 641 insertions(+), 53 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue

diff --git a/package-lock.json b/package-lock.json
index 2ee95ba8e6..eb10fc4207 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "root",
       "dependencies": {
         "express": "^4.18.1",
+        "httpsnippet": "^2.0.0",
         "mysql2": "^2.3.3",
         "pg": "^8.7.3",
         "sqlite3": "^5.0.2"
@@ -3032,7 +3033,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3360,8 +3360,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -4309,7 +4308,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5189,7 +5187,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5307,8 +5304,7 @@
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "node_modules/duplexify": {
       "version": "3.7.1",
@@ -5551,7 +5547,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -5577,6 +5572,31 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
+    "node_modules/event-stream/node_modules/split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/eventemitter2": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
@@ -5967,8 +5987,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "node_modules/fast-glob": {
       "version": "2.2.7",
@@ -6012,8 +6031,7 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
@@ -6275,6 +6293,11 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -6345,6 +6368,14 @@
         "minipass": "^2.6.0"
       }
     },
+    "node_modules/fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "dependencies": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
     "node_modules/fs-then-native": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fs-then-native/-/fs-then-native-2.0.0.tgz",
@@ -6396,6 +6427,49 @@
         "safe-buffer": "~5.1.0"
       }
     },
+    "node_modules/fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "dependencies": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/fs-writefile-promise/node_modules/mkdirp-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+      "deprecated": "This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.",
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "mkdirp": ">=0.5.0"
+      }
+    },
+    "node_modules/fs-writefile-promise/node_modules/pinkie": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/fs-writefile-promise/node_modules/pinkie-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+      "dependencies": {
+        "pinkie": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6538,6 +6612,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+    },
     "node_modules/get-pkg-repo": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
@@ -7328,8 +7407,7 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "devOptional": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "node_modules/handlebars": {
       "version": "4.7.7",
@@ -7356,7 +7434,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7366,7 +7443,6 @@
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "deprecated": "this library is no longer supported",
-      "dev": true,
       "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -7395,6 +7471,25 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -7586,6 +7681,109 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "bin": {
+        "httpsnippet": "bin/httpsnippet"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+    },
+    "node_modules/httpsnippet/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/form-data": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
+    "node_modules/httpsnippet/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -8285,7 +8483,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8338,6 +8535,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -8679,8 +8884,7 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
@@ -9199,6 +9403,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
+    },
     "node_modules/map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -10979,6 +11188,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -11302,7 +11519,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -13190,6 +13406,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dependencies": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "node_modules/stream-connect": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stream-connect/-/stream-connect-1.0.2.tgz",
@@ -13297,6 +13521,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13603,8 +13840,7 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "node_modules/through2": {
       "version": "3.0.2",
@@ -13985,7 +14221,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -17154,7 +17389,6 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -17402,8 +17636,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
-      "dev": true
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -18150,7 +18383,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -18846,8 +19078,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
-      "dev": true
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
     },
     "delegates": {
       "version": "1.0.0",
@@ -18937,8 +19168,7 @@
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
-      "dev": true
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
     },
     "duplexify": {
       "version": "3.7.1",
@@ -19151,8 +19381,7 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
-      "dev": true
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
     },
     "esprima": {
       "version": "4.0.1",
@@ -19165,6 +19394,30 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
+    "event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "requires": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      },
+      "dependencies": {
+        "split": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+          "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+          "requires": {
+            "through": "2"
+          }
+        }
+      }
+    },
     "eventemitter2": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
@@ -19484,8 +19737,7 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -19527,8 +19779,7 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
     },
     "fd-slicer": {
       "version": "1.1.0",
@@ -19744,6 +19995,11 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
+    },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -19813,6 +20069,14 @@
         "minipass": "^2.6.0"
       }
     },
+    "fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "requires": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
     "fs-then-native": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fs-then-native/-/fs-then-native-2.0.0.tgz",
@@ -19863,6 +20127,36 @@
         }
       }
     },
+    "fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "requires": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      },
+      "dependencies": {
+        "mkdirp-promise": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+          "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+          "requires": {}
+        },
+        "pinkie": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+          "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q=="
+        },
+        "pinkie-promise": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+          "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+          "requires": {
+            "pinkie": "^1.0.0"
+          }
+        }
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -19980,6 +20274,11 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+    },
     "get-pkg-repo": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
@@ -20606,8 +20905,7 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
-      "devOptional": true
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
     "handlebars": {
       "version": "4.7.7",
@@ -20625,14 +20923,12 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
-      "dev": true
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
     },
     "har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
-      "dev": true,
       "requires": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -20652,6 +20948,21 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
+        }
+      }
+    },
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -20807,6 +21118,87 @@
         }
       }
     },
+    "httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "requires": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
+        }
+      }
+    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -21332,8 +21724,7 @@
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
-      "dev": true
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
     },
     "is-path-inside": {
       "version": "3.0.3",
@@ -21368,6 +21759,11 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA=="
+    },
     "is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -21640,8 +22036,7 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -22053,6 +22448,11 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true
     },
+    "map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
+    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -23504,6 +23904,14 @@
         }
       }
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -23763,8 +24171,7 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
     },
     "q": {
       "version": "1.5.1",
@@ -25256,6 +25663,14 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
+    "stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "requires": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "stream-connect": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stream-connect/-/stream-connect-1.0.2.tgz",
@@ -25344,6 +25759,16 @@
         "es-abstract": "^1.19.5"
       }
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -25576,8 +26001,7 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
     "through2": {
       "version": "3.0.2",
@@ -25886,7 +26310,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
-      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
diff --git a/package.json b/package.json
index 074ce4f335..068ec4e39c 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "express": "^4.18.1",
+    "httpsnippet": "^2.0.0",
     "mysql2": "^2.3.3",
     "pg": "^8.7.3",
     "sqlite3": "^5.0.2"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index 477ee96354..f4b9e81ef0 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -12,9 +12,11 @@ const emits = defineEmits<Emits>()
 const { $e } = useNuxtApp()
 
 const isView = ref(false)
+let showApiSnippet = $ref(false)
 
 function onApiSnippet() {
   // get API snippet
+  showApiSnippet = true
   $e('a:view:api-snippet')
 }
 
@@ -89,6 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
+    <SmartsheetSidebarMenuApiSnippet :model-value="showApiSnippet" @update:model-value="(val) => (showApiSnippet = val)" />
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
new file mode 100644
index 0000000000..b7408fc277
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import HTTPSnippet from 'httpsnippet'
+import { ActiveViewInj, MetaInj } from '~~/context'
+
+interface Props {
+  modelValue: boolean
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+const { project } = $(useProject())
+const meta = $(inject(MetaInj))
+const view = $(inject(ActiveViewInj))
+const { xWhere } = useSmartsheetStoreOrThrow()
+const { queryParams } = $(useViewData(meta, view as any, xWhere))
+
+const { $state, $api } = useNuxtApp()
+let vModel = $(useVModel(props, 'modelValue', emits))
+
+const client = $ref<string | undefined>(undefined)
+
+const appInfo = await $api.utils.appInfo()
+
+const langs = [
+  {
+    lang: 'shell',
+    clients: ['curl', 'wget'],
+  },
+  {
+    lang: 'javascript',
+    clients: ['axios', 'fetch', 'jquery', 'xhr'],
+  },
+  {
+    lang: 'node',
+    clients: ['axios', 'fetch', 'request', 'native', 'unirest'],
+  },
+  {
+    lang: 'nocodb-sdk',
+    clients: ['javascript', 'node'],
+  },
+  {
+    lang: 'php',
+  },
+  {
+    lang: 'python',
+    clients: ['python3', 'requests'],
+  },
+  {
+    lang: 'ruby',
+  },
+  {
+    lang: 'java',
+  },
+  {
+    lang: 'c',
+  },
+]
+
+const activeTabKey = $ref(langs[0].lang)
+const afterVisibleChange = (visible: boolean) => {
+  vModel = visible
+}
+
+const apiUrl = () => {
+  console.log(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`)
+  return new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/')
+    .href
+}
+
+// const apiUrl = $computed(() => {
+//   console.log(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`)
+//   return 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: $state.token.value as string, comment: 'JWT Auth token' }],
+      url: apiUrl(),
+      queryString: Object.entries(queryParams || {}).map(([name, value]) => {
+        return {
+          name,
+          value: String(value),
+        }
+      }),
+    }),
+)
+
+console.log('snippet.value', snippet)
+
+const activeLang = $computed(() => langs.find((lang) => lang.lang === activeTabKey))
+const code = $computed(() => {
+  if (activeLang?.lang === 'nocodb-sdk') {
+    return `
+    ${client === 'node' ? 'const { Api } require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
+
+const api = new Api({
+  baseURL: ${JSON.stringify(apiUrl)},
+  headers: {
+    "xc-auth": ${JSON.stringify($state.token.value as string)}
+  }
+})
+
+api.dbViewRow.list(
+  "noco",
+  ${JSON.stringify(project.title)},
+  ${JSON.stringify(meta.value.title)},
+  ${JSON.stringify(view.value.title)}, ${JSON.stringify(queryParams, null, 4)}).then(function (data) {
+  console.log(data);
+}).catch(function (error) {
+  console.error(error);
+});
+    `
+  }
+
+  return snippet.convert(activeLang?.lang, client || (activeLang?.clients && activeLang?.clients[0]), {})
+})
+
+console.log(code)
+</script>
+
+<template>
+  <a-drawer
+    v-model:visible="vModel"
+    class="custom-class"
+    style="color: red"
+    placement="right"
+    size="large"
+    :closable="false"
+    @after-visible-change="afterVisibleChange"
+  >
+    <div class="flex flex-col">
+      <a-typography-title :level="4">Code Snippet</a-typography-title>
+      <a-tabs v-model:activeKey="activeTabKey" class="!capitalize">
+        <a-tab-pane v-for="item in langs" :key="item.lang">
+          <template #tab>
+            <div class="capitalize select-none">
+              {{ item.lang }}
+            </div>
+          </template>
+          Content of Tab Pane 1
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </a-drawer>
+</template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 7d4fc760db..1e1f5d5b8c 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -11,6 +11,7 @@ export function useProject(projectId?: MaybeRef<string>) {
   const _projectId = $computed(() => unref(projectId))
 
   const project = useState<ProjectType>('project')
+  const appInfo = useState<any>('appInfo')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
 
   async function loadProjectRoles() {
@@ -49,5 +50,5 @@ export function useProject(projectId?: MaybeRef<string>) {
     () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
   )
 
-  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }
+  return { project, tables, loadProjectRoles, loadProject, appInfo, loadTables, isMysql, isPg, sqlUi }
 }
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index a4dc0541a2..fcd2161a19 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -49,6 +49,12 @@ export function useViewData(
     )
     paginationData.value.totalRows = count
   }
+  
+  const queryParams = computed(() => ({
+    offset: (paginationData.value?.page ?? 0) - 1,
+    limit: paginationData.value?.pageSize ?? 25,
+    where: where?.value ?? '',
+  }))
 
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
@@ -246,6 +252,7 @@ export function useViewData(
   return {
     loadData,
     paginationData,
+    queryParams,
     formattedData,
     insertRow,
     updateRowProperty,
diff --git a/packages/nc-gui-v2/nuxt.config.ts b/packages/nc-gui-v2/nuxt.config.ts
index 192dc0d9f6..9a1f297e7b 100644
--- a/packages/nc-gui-v2/nuxt.config.ts
+++ b/packages/nc-gui-v2/nuxt.config.ts
@@ -80,6 +80,7 @@ export default defineNuxtConfig({
     ],
     define: {
       'process.env.DEBUG': 'false',
+      'global': {},
     },
     server: {
       watch: {
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 43f7ec27a7..16a41a640d 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -68,6 +68,7 @@
     "unplugin-vue-components": "^0.21.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^0.18.0",
-    "windicss": "^3.5.6"
+    "windicss": "^3.5.6",
+    "httpsnippet": "^2.0.0",
   }
 }

From 2d9934dfde16506e2fd437101a24de820435cfb9 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 10:36:47 +0530
Subject: [PATCH 10/76] fix/package json typo removed

---
 packages/nc-gui-v2/package-lock.json | 665 ++++++++++++++++++++++++++-
 packages/nc-gui-v2/package.json      |   5 +-
 2 files changed, 664 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 5d95e21cac..c9e24882a8 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -20,6 +20,7 @@
         "socket.io-client": "^4.5.1",
         "sortablejs": "^1.15.0",
         "unique-names-generator": "^4.7.1",
+        "url": "^0.11.0",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuedraggable": "^4.1.0",
@@ -53,6 +54,7 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-prettier": "^4.0.0",
         "happy-dom": "^6.0.3",
+        "httpsnippet": "^2.0.0",
         "less": "^4.1.3",
         "nuxt": "3.0.0-rc.4",
         "nuxt-windicss": "^2.5.0",
@@ -6881,6 +6883,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
     "node_modules/eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -6997,8 +7014,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "node_modules/fast-levenshtein": {
       "version": "2.0.6",
@@ -7298,6 +7314,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "node_modules/fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -7333,6 +7355,28 @@
         "minipass": "^2.6.0"
       }
     },
+    "node_modules/fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "node_modules/fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "dev": true,
+      "dependencies": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7453,6 +7497,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
     "node_modules/get-port": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-6.1.2.tgz",
@@ -7695,6 +7745,51 @@
         "node": ">=12"
       }
     },
+    "node_modules/har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "deprecated": "this library is no longer supported",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/har-validator/node_modules/ajv": {
+      "version": "6.12.6",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/har-validator/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -7707,6 +7802,27 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/has-ansi/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -7996,6 +8112,128 @@
         "node": ">= 6"
       }
     },
+    "node_modules/httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "bin": {
+        "httpsnippet": "bin/httpsnippet"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "dev": true
+    },
+    "node_modules/httpsnippet/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/form-data": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+      "dev": true,
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+      "dev": true
+    },
+    "node_modules/httpsnippet/node_modules/strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/httpsnippet/node_modules/supports-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -8495,6 +8733,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -8551,6 +8798,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -9385,6 +9641,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
+      "dev": true
+    },
     "node_modules/material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -9634,6 +9896,19 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/mkdirp-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+      "deprecated": "This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "mkdirp": ">=0.5.0"
+      }
+    },
     "node_modules/mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -10726,6 +11001,15 @@
         "node": "*"
       }
     },
+    "node_modules/pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "dependencies": {
+        "through": "~2.3"
+      }
+    },
     "node_modules/perfect-debounce": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-0.1.3.tgz",
@@ -10758,6 +11042,27 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pinkie": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pinkie-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+      "dev": true,
+      "dependencies": {
+        "pinkie": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -11591,6 +11896,15 @@
         "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",
@@ -12646,6 +12960,18 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
+    "node_modules/split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dev": true,
+      "dependencies": {
+        "through": "2"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -12694,6 +13020,15 @@
       "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw==",
       "dev": true
     },
+    "node_modules/stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dev": true,
+      "dependencies": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "node_modules/strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -12793,6 +13128,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "dependencies": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13797,6 +14146,20 @@
         "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-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -19889,6 +20252,21 @@
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "dev": true
     },
+    "event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
     "eventemitter3": {
       "version": "4.0.7",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
@@ -19984,8 +20362,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
       "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-      "dev": true,
-      "peer": true
+      "dev": true
     },
     "fast-levenshtein": {
       "version": "2.0.6",
@@ -20201,6 +20578,12 @@
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "dev": true
     },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==",
+      "dev": true
+    },
     "fs-constants": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
@@ -20233,6 +20616,25 @@
         "minipass": "^2.6.0"
       }
     },
+    "fs-readfile-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
+      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "fs-writefile-promise": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
+      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
+      "dev": true,
+      "requires": {
+        "mkdirp-promise": "^1.0.0",
+        "pinkie-promise": "^1.0.0"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -20322,6 +20724,12 @@
         "has-symbols": "^1.0.3"
       }
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
+      "dev": true
+    },
     "get-port": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-6.1.2.tgz",
@@ -20504,6 +20912,42 @@
         }
       }
     },
+    "har-schema": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
+      "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
+      "requires": {
+        "ajv": "^6.12.3",
+        "har-schema": "^2.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+          "dev": true
+        }
+      }
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -20513,6 +20957,23 @@
         "function-bind": "^1.1.1"
       }
     },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        }
+      }
+    },
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -20729,6 +21190,103 @@
         "debug": "4"
       }
     },
+    "httpsnippet": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
+      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.1.1",
+        "commander": "^2.9.0",
+        "debug": "^2.2.0",
+        "event-stream": "3.3.4",
+        "form-data": "3.0.0",
+        "fs-readfile-promise": "^2.0.1",
+        "fs-writefile-promise": "^1.0.3",
+        "har-validator": "^5.0.0",
+        "stringify-object": "^3.3.0"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "commander": {
+          "version": "2.20.3",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+          "dev": true
+        },
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+          "dev": true
+        },
+        "form-data": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
+          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
+          "dev": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
+          "dev": true
+        }
+      }
+    },
     "human-signals": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
@@ -21078,6 +21636,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true
+    },
     "is-plain-object": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-3.0.1.tgz",
@@ -21122,6 +21686,12 @@
         "has-tostringtag": "^1.0.0"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
+      "dev": true
+    },
     "is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -21782,6 +22352,12 @@
         }
       }
     },
+    "map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g==",
+      "dev": true
+    },
     "material-colors": {
       "version": "1.2.6",
       "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz",
@@ -21978,6 +22554,13 @@
       "dev": true,
       "optional": true
     },
+    "mkdirp-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
+      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
+      "dev": true,
+      "requires": {}
+    },
     "mlly": {
       "version": "0.5.5",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-0.5.5.tgz",
@@ -22837,6 +23420,15 @@
       "integrity": "sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==",
       "dev": true
     },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
     "perfect-debounce": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-0.1.3.tgz",
@@ -22860,6 +23452,21 @@
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
       "dev": true
     },
+    "pinkie": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
+      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
+      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
+      "dev": true,
+      "requires": {
+        "pinkie": "^1.0.0"
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -23427,6 +24034,11 @@
         "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",
@@ -24234,6 +24846,15 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
+    "split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
     "split-on-first": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
@@ -24272,6 +24893,15 @@
       "integrity": "sha512-/c645XdExBypL01TpFKiG/3RAa/Qmu+zRi0MwAmrdEkwHNuN0ebo8ccAXBBDa5Z0QOJgBskUIbuCK91x0sCVEw==",
       "dev": true
     },
+    "stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1"
+      }
+    },
     "strict-uri-encode": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
@@ -24344,6 +24974,17 @@
         "es-abstract": "^1.19.5"
       }
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -25070,6 +25711,22 @@
         "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-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 16a41a640d..6726c9fa58 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -26,6 +26,7 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
+    "url": "^0.11.0",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",
@@ -59,6 +60,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
     "happy-dom": "^6.0.3",
+    "httpsnippet": "^2.0.0",
     "less": "^4.1.3",
     "nuxt": "3.0.0-rc.4",
     "nuxt-windicss": "^2.5.0",
@@ -68,7 +70,6 @@
     "unplugin-vue-components": "^0.21.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vitest": "^0.18.0",
-    "windicss": "^3.5.6",
-    "httpsnippet": "^2.0.0",
+    "windicss": "^3.5.6"
   }
 }

From 9a0bd9f4c3941261222a471b546322c3acf90651 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 15:27:21 +0530
Subject: [PATCH 11/76] refactor/gui-v2-added Api snippet

---
 .../nc-gui-v2/components/monaco/Editor.vue    |   4 +-
 .../smartsheet/sidebar/menu/ApiSnippet.vue    | 130 +++++----
 .../nc-gui-v2/composables/useGlobal/types.ts  |   5 +
 packages/nc-gui-v2/package-lock.json          | 265 ++++++++++++------
 packages/nc-gui-v2/package.json               |   1 +
 packages/nc-gui-v2/plugins/state.ts           |   9 +-
 6 files changed, 278 insertions(+), 136 deletions(-)

diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index ac8c0c0641..3554066068 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -12,9 +12,10 @@ interface Props {
   lang?: string
   validate?: boolean
   disableDeepCompare?: boolean
+  readOnly?: boolean
 }
 
-const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue } = defineProps<Props>()
+const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue, readOnly } = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
@@ -92,6 +93,7 @@ onMounted(() => {
       },
       tabSize: 2,
       automaticLayout: true,
+      readOnly,
       minimap: {
         enabled: !hideMinimap,
       },
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 b7408fc277..3d48a88cf3 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,85 +1,80 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
-import { ActiveViewInj, MetaInj } from '~~/context'
+import { useClipboard } from '@vueuse/core'
+import { useToast } from 'vue-toastification'
+import { ActiveViewInj, MetaInj } from '~/context'
+
+const props = defineProps<Props>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const toast = useToast()
 
 interface Props {
   modelValue: boolean
 }
 
-const props = defineProps<Props>()
-
-const emits = defineEmits(['update:modelValue'])
 const { project } = $(useProject())
+const { appInfo } = $(useGlobal())
 const meta = $(inject(MetaInj))
 const view = $(inject(ActiveViewInj))
 const { xWhere } = useSmartsheetStoreOrThrow()
 const { queryParams } = $(useViewData(meta, view as any, xWhere))
+const { copy } = useClipboard()
+const { $state } = useNuxtApp()
 
-const { $state, $api } = useNuxtApp()
 let vModel = $(useVModel(props, 'modelValue', emits))
 
-const client = $ref<string | undefined>(undefined)
-
-const appInfo = await $api.utils.appInfo()
-
 const langs = [
   {
-    lang: 'shell',
+    name: 'shell',
     clients: ['curl', 'wget'],
   },
   {
-    lang: 'javascript',
+    name: 'javascript',
     clients: ['axios', 'fetch', 'jquery', 'xhr'],
   },
   {
-    lang: 'node',
+    name: 'node',
     clients: ['axios', 'fetch', 'request', 'native', 'unirest'],
   },
   {
-    lang: 'nocodb-sdk',
+    name: 'nocodb-sdk',
     clients: ['javascript', 'node'],
   },
   {
-    lang: 'php',
+    name: 'php',
   },
   {
-    lang: 'python',
+    name: 'python',
     clients: ['python3', 'requests'],
   },
   {
-    lang: 'ruby',
+    name: 'ruby',
   },
   {
-    lang: 'java',
+    name: 'java',
   },
   {
-    lang: 'c',
+    name: 'c',
   },
 ]
 
-const activeTabKey = $ref(langs[0].lang)
-const afterVisibleChange = (visible: boolean) => {
-  vModel = visible
-}
+const selectedClient = $ref<string | undefined>(langs[0].clients && langs[0].clients[0])
 
-const apiUrl = () => {
-  console.log(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`)
-  return new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/')
-    .href
-}
+const selectedLangName = $ref(langs[0].name)
 
-// const apiUrl = $computed(() => {
-//   console.log(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`)
-//   return new URL(`/api/v1/db/data/noco/${project.id}/${meta.title}/views/${view.title}`, (appInfo && appInfo.ncSiteUrl) || '/')
-//     .href
-// })
+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: $state.token.value as string, comment: 'JWT Auth token' }],
-      url: apiUrl(),
+      url: apiUrl,
       queryString: Object.entries(queryParams || {}).map(([name, value]) => {
         return {
           name,
@@ -89,14 +84,11 @@ const snippet = $computed(
     }),
 )
 
-console.log('snippet.value', snippet)
+const activeLang = $computed(() => langs.find((lang) => lang.name === selectedLangName))
 
-const activeLang = $computed(() => langs.find((lang) => lang.lang === activeTabKey))
 const code = $computed(() => {
-  if (activeLang?.lang === 'nocodb-sdk') {
-    return `
-    ${client === 'node' ? 'const { Api } require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
-
+  if (activeLang?.name === 'nocodb-sdk') {
+    return `${selectedClient === 'node' ? 'const { Api } require("nocodb-sdk");' : 'import { Api } from "nocodb-sdk";'}
 const api = new Api({
   baseURL: ${JSON.stringify(apiUrl)},
   headers: {
@@ -107,8 +99,8 @@ const api = new Api({
 api.dbViewRow.list(
   "noco",
   ${JSON.stringify(project.title)},
-  ${JSON.stringify(meta.value.title)},
-  ${JSON.stringify(view.value.title)}, ${JSON.stringify(queryParams, null, 4)}).then(function (data) {
+  ${JSON.stringify(meta.title)},
+  ${JSON.stringify(view.title)}, ${JSON.stringify(queryParams, null, 4)}).then(function (data) {
   console.log(data);
 }).catch(function (error) {
   console.error(error);
@@ -116,32 +108,72 @@ api.dbViewRow.list(
     `
   }
 
-  return snippet.convert(activeLang?.lang, client || (activeLang?.clients && activeLang?.clients[0]), {})
+  return snippet.convert(activeLang?.name, selectedClient || (activeLang?.clients && activeLang?.clients[0]), {})
 })
 
-console.log(code)
+const onCopyToClipboard = () => {
+  copy(code)
+  toast.info('Copied to clipboard')
+}
+
+const afterVisibleChange = (visible: boolean) => {
+  vModel = visible
+}
 </script>
 
 <template>
   <a-drawer
     v-model:visible="vModel"
-    class="custom-class"
+    class="h-full relative"
     style="color: red"
     placement="right"
     size="large"
     :closable="false"
     @after-visible-change="afterVisibleChange"
   >
-    <div class="flex flex-col">
+    <div class="flex flex-col w-full h-full">
       <a-typography-title :level="4">Code Snippet</a-typography-title>
-      <a-tabs v-model:activeKey="activeTabKey" class="!capitalize">
-        <a-tab-pane v-for="item in langs" :key="item.lang">
+      <a-tabs v-model:activeKey="selectedLangName" class="!h-full">
+        <a-tab-pane v-for="item in langs" :key="item.name" class="!h-full">
           <template #tab>
             <div class="capitalize select-none">
-              {{ item.lang }}
+              {{ item.name }}
             </div>
           </template>
-          Content of Tab Pane 1
+          <monaco-editor
+            class="h-[60vh] border-1 border-gray-100 py-4 rounded-sm"
+            :model-value="code"
+            :read-only="true"
+            lang="typescript"
+          />
+          <div class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
+            <a-button
+              v-t="[
+                'c:snippet:copy',
+                { client: activeLang?.clients && (selectedClient || activeLang?.clients[0]), lang: activeLang?.name },
+              ]"
+              type="primary"
+              @click="onCopyToClipboard"
+              >Copy to clipboard</a-button
+            >
+            <a-select v-if="activeLang" v-model:value="selectedClient" style="width: 6rem">
+              <a-select-option v-for="(client, i) in activeLang?.clients" :key="i" class="!w-full uppercase" :value="client">
+                {{ client }}
+              </a-select-option>
+            </a-select>
+          </div>
+
+          <div class="absolute bottom-4 flex flex-row justify-center w-[95%]">
+            <a
+              v-t="['e:hiring']"
+              class="px-4 py-3 ! rounded shadow"
+              href="https://angel.co/company/nocodb"
+              target="_blank"
+              @click.stop
+            >
+              🚀 We are Hiring! 🚀
+            </a>
+          </div>
         </a-tab-pane>
       </a-tabs>
     </div>
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 8d0823a47c..7f9e54f94e 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -11,6 +11,10 @@ export interface FeedbackForm {
   lastFormPollDate?: string
 }
 
+export interface AppInfo {
+  ncSiteUrl: string
+}
+
 export interface StoredState {
   token: string | null
   user: User | null
@@ -27,6 +31,7 @@ export type State = ToRefs<Omit<StoredState, 'token'>> & {
   timestamp: Ref<number>
   runningRequests: ReturnType<typeof useCounter>
   error: Ref<any>
+  appInfo: Ref<AppInfo>
 }
 
 export interface Getters {
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index c9e24882a8..a2ac9c9166 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -21,6 +21,7 @@
         "sortablejs": "^1.15.0",
         "unique-names-generator": "^4.7.1",
         "url": "^0.11.0",
+        "util": "^0.12.4",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuedraggable": "^4.1.0",
@@ -3795,6 +3796,17 @@
         "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",
@@ -4031,7 +4043,6 @@
       "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"
@@ -5202,7 +5213,6 @@
       "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"
@@ -5567,7 +5577,6 @@
       "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",
@@ -5621,7 +5630,6 @@
       "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",
@@ -7258,6 +7266,14 @@
         }
       }
     },
+    "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",
@@ -7400,14 +7416,12 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "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",
@@ -7431,7 +7445,6 @@
       "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"
       }
@@ -7487,7 +7500,6 @@
       "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",
@@ -7540,7 +7552,6 @@
       "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"
@@ -7794,7 +7805,6 @@
       "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"
       },
@@ -7827,7 +7837,6 @@
       "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"
       }
@@ -7845,7 +7854,6 @@
       "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"
       },
@@ -7857,7 +7865,6 @@
       "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"
       },
@@ -7869,7 +7876,6 @@
       "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"
       },
@@ -8384,8 +8390,7 @@
     "node_modules/inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/ini": {
       "version": "1.3.8",
@@ -8439,7 +8444,6 @@
       "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",
@@ -8520,6 +8524,21 @@
         "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",
@@ -8530,7 +8549,6 @@
       "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"
       },
@@ -8554,7 +8572,6 @@
       "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"
@@ -8582,7 +8599,6 @@
       "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"
       },
@@ -8606,7 +8622,6 @@
       "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"
       },
@@ -8660,6 +8675,20 @@
         "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",
@@ -8701,7 +8730,6 @@
       "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"
       },
@@ -8722,7 +8750,6 @@
       "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"
       },
@@ -8786,7 +8813,6 @@
       "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"
@@ -8811,7 +8837,6 @@
       "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"
       },
@@ -8844,7 +8869,6 @@
       "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"
       },
@@ -8859,7 +8883,6 @@
       "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"
       },
@@ -8870,6 +8893,24 @@
         "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",
@@ -8886,7 +8927,6 @@
       "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"
       },
@@ -10512,7 +10552,6 @@
       "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"
       }
@@ -10521,7 +10560,6 @@
       "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"
       }
@@ -12195,7 +12233,6 @@
       "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",
@@ -12423,8 +12460,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "node_modules/safe-regex": {
       "version": "2.1.1",
@@ -12733,7 +12769,6 @@
       "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",
@@ -13104,7 +13139,6 @@
       "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",
@@ -13118,7 +13152,6 @@
       "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",
@@ -13809,7 +13842,6 @@
       "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",
@@ -14160,6 +14192,19 @@
       "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",
@@ -14837,7 +14882,6 @@
       "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",
@@ -14849,6 +14893,25 @@
         "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",
@@ -18033,6 +18096,11 @@
         "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",
@@ -18204,7 +18272,6 @@
       "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"
@@ -19105,7 +19172,6 @@
       "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"
@@ -19377,7 +19443,6 @@
       "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",
@@ -19425,7 +19490,6 @@
       "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",
@@ -20541,6 +20605,14 @@
       "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",
@@ -20651,14 +20723,12 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "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",
@@ -20675,8 +20745,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ=="
     },
     "gauge": {
       "version": "3.0.2",
@@ -20717,7 +20786,6 @@
       "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",
@@ -20755,7 +20823,6 @@
       "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"
@@ -20952,7 +21019,6 @@
       "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"
       }
@@ -20977,8 +21043,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ=="
     },
     "has-flag": {
       "version": "4.0.0",
@@ -20990,7 +21055,6 @@
       "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"
       }
@@ -20998,14 +21062,12 @@
     "has-symbols": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
-      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A=="
     },
     "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"
       }
@@ -21389,8 +21451,7 @@
     "inherits": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
-      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-      "dev": true
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "ini": {
       "version": "1.3.8",
@@ -21437,7 +21498,6 @@
       "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",
@@ -21497,6 +21557,15 @@
         "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",
@@ -21507,7 +21576,6 @@
       "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"
       }
@@ -21525,7 +21593,6 @@
       "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"
@@ -21543,8 +21610,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w=="
     },
     "is-core-module": {
       "version": "2.9.0",
@@ -21559,7 +21625,6 @@
       "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"
       }
@@ -21588,6 +21653,14 @@
       "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",
@@ -21618,8 +21691,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA=="
     },
     "is-number": {
       "version": "7.0.0",
@@ -21631,7 +21703,6 @@
       "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"
       }
@@ -21680,7 +21751,6 @@
       "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"
@@ -21696,7 +21766,6 @@
       "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"
       }
@@ -21720,7 +21789,6 @@
       "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"
       }
@@ -21729,11 +21797,22 @@
       "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",
@@ -21744,7 +21823,6 @@
       "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"
       }
@@ -23055,14 +23133,12 @@
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
-      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
-      "dev": true
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ=="
     },
     "object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
-      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true
+      "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
     },
     "object.assign": {
       "version": "4.1.3",
@@ -24261,7 +24337,6 @@
       "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",
@@ -24416,8 +24491,7 @@
     "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==",
-      "dev": true
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
     },
     "safe-regex": {
       "version": "2.1.1",
@@ -24676,7 +24750,6 @@
       "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",
@@ -24956,7 +25029,6 @@
       "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",
@@ -24967,7 +25039,6 @@
       "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",
@@ -25494,7 +25565,6 @@
       "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",
@@ -25727,6 +25797,19 @@
         }
       }
     },
+    "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",
@@ -26199,7 +26282,6 @@
       "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",
@@ -26208,6 +26290,19 @@
         "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 6726c9fa58..56ea93c7ee 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -27,6 +27,7 @@
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
     "url": "^0.11.0",
+    "util": "^0.12.4",
     "vue-i18n": "^9.1.10",
     "vue-toastification": "^2.0.0-rc.5",
     "vuedraggable": "^4.1.0",
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index 21220bf6da..d792e744da 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -13,14 +13,21 @@ import { useDark, useGlobal, watch } from '#imports'
  * console.log($state.lang.value) // 'en'
  * ```
  */
-export default defineNuxtPlugin((nuxtApp) => {
+export default defineNuxtPlugin(async (nuxtApp) => {
   const state = useGlobal()
+  const { $api } = useNuxtApp()
 
   const darkMode = useDark()
 
   /** set i18n locale to stored language */
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
+  try {
+    state.appInfo = await $api.utils.appInfo()
+  } catch (e) {
+    console.error(e)
+  }
+
   /** set current dark mode from storage */
   watch(
     state.darkMode,

From 4fd3ef723e6deb932c560b5e6227fb353f76d3e4 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 15:28:46 +0530
Subject: [PATCH 12/76] fix/fixed icons size of hiring button in ApiSnippet

---
 .../nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3d48a88cf3..b69a3fec5c 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -166,7 +166,7 @@ const afterVisibleChange = (visible: boolean) => {
           <div class="absolute bottom-4 flex flex-row justify-center w-[95%]">
             <a
               v-t="['e:hiring']"
-              class="px-4 py-3 ! rounded shadow"
+              class="px-4 py-2 ! rounded shadow"
               href="https://angel.co/company/nocodb"
               target="_blank"
               @click.stop

From 743db544b01a38312fd76d7db9fef8120231c800 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 15:41:26 +0530
Subject: [PATCH 13/76] fix/reverted root package json changes

---
 package-lock.json | 525 +++++-----------------------------------------
 package.json      |   1 -
 2 files changed, 51 insertions(+), 475 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index eb10fc4207..2ee95ba8e6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,6 @@
       "name": "root",
       "dependencies": {
         "express": "^4.18.1",
-        "httpsnippet": "^2.0.0",
         "mysql2": "^2.3.3",
         "pg": "^8.7.3",
         "sqlite3": "^5.0.2"
@@ -3033,6 +3032,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -3360,7 +3360,8 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "node_modules/at-least-node": {
       "version": "1.0.0",
@@ -4308,6 +4309,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5187,6 +5189,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -5304,7 +5307,8 @@
     "node_modules/duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
     },
     "node_modules/duplexify": {
       "version": "3.7.1",
@@ -5547,6 +5551,7 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
       "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
       "engines": {
         "node": ">=0.8.0"
       }
@@ -5572,31 +5577,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
-      "dependencies": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      }
-    },
-    "node_modules/event-stream/node_modules/split": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-      "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
-      "dependencies": {
-        "through": "2"
-      },
-      "engines": {
-        "node": "*"
-      }
-    },
     "node_modules/eventemitter2": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
@@ -5987,7 +5967,8 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "node_modules/fast-glob": {
       "version": "2.2.7",
@@ -6031,7 +6012,8 @@
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "node_modules/fd-slicer": {
       "version": "1.1.0",
@@ -6293,11 +6275,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
-    },
     "node_modules/from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -6368,14 +6345,6 @@
         "minipass": "^2.6.0"
       }
     },
-    "node_modules/fs-readfile-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
-      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
-      "dependencies": {
-        "graceful-fs": "^4.1.2"
-      }
-    },
     "node_modules/fs-then-native": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fs-then-native/-/fs-then-native-2.0.0.tgz",
@@ -6427,49 +6396,6 @@
         "safe-buffer": "~5.1.0"
       }
     },
-    "node_modules/fs-writefile-promise": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
-      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
-      "dependencies": {
-        "mkdirp-promise": "^1.0.0",
-        "pinkie-promise": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/fs-writefile-promise/node_modules/mkdirp-promise": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
-      "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
-      "deprecated": "This package is broken and no longer maintained. 'mkdirp' itself supports promises now, please switch to that.",
-      "engines": {
-        "node": ">=4"
-      },
-      "peerDependencies": {
-        "mkdirp": ">=0.5.0"
-      }
-    },
-    "node_modules/fs-writefile-promise/node_modules/pinkie": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
-      "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/fs-writefile-promise/node_modules/pinkie-promise": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
-      "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
-      "dependencies": {
-        "pinkie": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6612,11 +6538,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/get-own-enumerable-property-symbols": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
-    },
     "node_modules/get-pkg-repo": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
@@ -7407,7 +7328,8 @@
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "devOptional": true
     },
     "node_modules/handlebars": {
       "version": "4.7.7",
@@ -7434,6 +7356,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
       "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true,
       "engines": {
         "node": ">=4"
       }
@@ -7443,6 +7366,7 @@
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
       "deprecated": "this library is no longer supported",
+      "dev": true,
       "dependencies": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -7471,25 +7395,6 @@
         "node": ">= 0.4.0"
       }
     },
-    "node_modules/has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/has-ansi/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -7681,109 +7586,6 @@
         "ms": "^2.1.1"
       }
     },
-    "node_modules/httpsnippet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
-      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
-      "dependencies": {
-        "chalk": "^1.1.1",
-        "commander": "^2.9.0",
-        "debug": "^2.2.0",
-        "event-stream": "3.3.4",
-        "form-data": "3.0.0",
-        "fs-readfile-promise": "^2.0.1",
-        "fs-writefile-promise": "^1.0.3",
-        "har-validator": "^5.0.0",
-        "stringify-object": "^3.3.0"
-      },
-      "bin": {
-        "httpsnippet": "bin/httpsnippet"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-      "dependencies": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/commander": {
-      "version": "2.20.3",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-    },
-    "node_modules/httpsnippet/node_modules/debug": {
-      "version": "2.6.9",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-      "dependencies": {
-        "ms": "2.0.0"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/form-data": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
-      "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
-      "dependencies": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.8",
-        "mime-types": "^2.1.12"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/ms": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-    },
-    "node_modules/httpsnippet/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/httpsnippet/node_modules/supports-color": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-      "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
-      "engines": {
-        "node": ">=0.8.0"
-      }
-    },
     "node_modules/human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -8483,6 +8285,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -8535,14 +8338,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -8884,7 +8679,8 @@
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "node_modules/json-stringify-safe": {
       "version": "5.0.1",
@@ -9403,11 +9199,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
-    },
     "node_modules/map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -11188,14 +10979,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
-      "dependencies": {
-        "through": "~2.3"
-      }
-    },
     "node_modules/pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -11519,6 +11302,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -13406,14 +13190,6 @@
         "node": ">= 0.8"
       }
     },
-    "node_modules/stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
-      "dependencies": {
-        "duplexer": "~0.1.1"
-      }
-    },
     "node_modules/stream-connect": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stream-connect/-/stream-connect-1.0.2.tgz",
@@ -13521,19 +13297,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "dependencies": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -13840,7 +13603,8 @@
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
     },
     "node_modules/through2": {
       "version": "3.0.2",
@@ -14221,6 +13985,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "dependencies": {
         "punycode": "^2.1.0"
       }
@@ -17389,6 +17154,7 @@
       "version": "6.12.6",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -17636,7 +17402,8 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true
     },
     "at-least-node": {
       "version": "1.0.0",
@@ -18383,6 +18150,7 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -19078,7 +18846,8 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true
     },
     "delegates": {
       "version": "1.0.0",
@@ -19168,7 +18937,8 @@
     "duplexer": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz",
-      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg=="
+      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
+      "dev": true
     },
     "duplexify": {
       "version": "3.7.1",
@@ -19381,7 +19151,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true
     },
     "esprima": {
       "version": "4.0.1",
@@ -19394,30 +19165,6 @@
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
       "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="
     },
-    "event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha512-QHpkERcGsR0T7Qm3HNJSyXKEEj8AHNxkY3PK8TS2KJvQ7NiSHe3DDpwVKKtoYprL/AreyzFBeIkBIWChAqn60g==",
-      "requires": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      },
-      "dependencies": {
-        "split": {
-          "version": "0.3.3",
-          "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-          "integrity": "sha512-wD2AeVmxXRBoX44wAycgjVpMhvbwdI2aZjCkvfNcH1YqHQvJVa1duWc73OyVGJUc05fhFaTZeQ/PYsrmyH0JVA==",
-          "requires": {
-            "through": "2"
-          }
-        }
-      }
-    },
     "eventemitter2": {
       "version": "6.4.5",
       "resolved": "https://registry.npmjs.org/eventemitter2/-/eventemitter2-6.4.5.tgz",
@@ -19737,7 +19484,8 @@
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true
     },
     "fast-glob": {
       "version": "2.2.7",
@@ -19779,7 +19527,8 @@
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
-      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true
     },
     "fd-slicer": {
       "version": "1.1.0",
@@ -19995,11 +19744,6 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="
     },
-    "from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g=="
-    },
     "from2": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
@@ -20069,14 +19813,6 @@
         "minipass": "^2.6.0"
       }
     },
-    "fs-readfile-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/fs-readfile-promise/-/fs-readfile-promise-2.0.1.tgz",
-      "integrity": "sha512-7+P9eOOMnkIOmtxrBWTzWOBQlE7Nz/cBx9EYTX5hm8DzmZ/Fj9YWeUY2O9G+Q8YblScd1hyEkcmNcZMDj5U8Ug==",
-      "requires": {
-        "graceful-fs": "^4.1.2"
-      }
-    },
     "fs-then-native": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/fs-then-native/-/fs-then-native-2.0.0.tgz",
@@ -20127,36 +19863,6 @@
         }
       }
     },
-    "fs-writefile-promise": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/fs-writefile-promise/-/fs-writefile-promise-1.0.3.tgz",
-      "integrity": "sha512-yI+wDwj0FsgX7tyIQJR+EP60R64evMSixtGb9AzGWjJVKlF5tCet95KomfqGBg/aIAG1Dhd6wjCOQe5HbX/qLA==",
-      "requires": {
-        "mkdirp-promise": "^1.0.0",
-        "pinkie-promise": "^1.0.0"
-      },
-      "dependencies": {
-        "mkdirp-promise": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/mkdirp-promise/-/mkdirp-promise-1.1.0.tgz",
-          "integrity": "sha512-xzB0UZFcW1UGS2xkXeDh39jzTP282lb3Vwp4QzCQYmkTn4ysaV5dBdbkOXmhkcE1TQlZebQlgTceaWvDr3oFgw==",
-          "requires": {}
-        },
-        "pinkie": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-1.0.0.tgz",
-          "integrity": "sha512-VFVaU1ysKakao68ktZm76PIdOhvEfoNNRaGkyLln9Os7r0/MCxqHjHyBM7dT3pgTiBybqiPtpqKfpENwdBp50Q=="
-        },
-        "pinkie-promise": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-1.0.0.tgz",
-          "integrity": "sha512-5mvtVNse2Ml9zpFKkWBpGsTPwm3DKhs+c95prO/F6E7d6DN0FPqxs6LONpLNpyD7Iheb7QN4BbUoKJgo+DnkQA==",
-          "requires": {
-            "pinkie": "^1.0.0"
-          }
-        }
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -20274,11 +19980,6 @@
         "has-symbols": "^1.0.3"
       }
     },
-    "get-own-enumerable-property-symbols": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
-      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
-    },
     "get-pkg-repo": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/get-pkg-repo/-/get-pkg-repo-1.4.0.tgz",
@@ -20905,7 +20606,8 @@
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
-      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
+      "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
+      "devOptional": true
     },
     "handlebars": {
       "version": "4.7.7",
@@ -20923,12 +20625,14 @@
     "har-schema": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
-      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q=="
+      "integrity": "sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==",
+      "dev": true
     },
     "har-validator": {
       "version": "5.1.5",
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.1.5.tgz",
       "integrity": "sha512-nmT2T0lljbxdQZfspsno9hgrG3Uir6Ks5afism62poxqBM6sDnMEuPmzTq8XN0OEwqKLLdh1jQI3qyE66Nzb3w==",
+      "dev": true,
       "requires": {
         "ajv": "^6.12.3",
         "har-schema": "^2.0.0"
@@ -20948,21 +20652,6 @@
         "function-bind": "^1.1.1"
       }
     },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
-        }
-      }
-    },
     "has-bigints": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -21118,87 +20807,6 @@
         }
       }
     },
-    "httpsnippet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/httpsnippet/-/httpsnippet-2.0.0.tgz",
-      "integrity": "sha512-Hb2ttfB5OhasYxwChZ8QKpYX3v4plNvwMaMulUIC7M3RHRDf1Op6EMp47LfaU2sgQgfvo5spWK4xRAirMEisrg==",
-      "requires": {
-        "chalk": "^1.1.1",
-        "commander": "^2.9.0",
-        "debug": "^2.2.0",
-        "event-stream": "3.3.4",
-        "form-data": "3.0.0",
-        "fs-readfile-promise": "^2.0.1",
-        "fs-writefile-promise": "^1.0.3",
-        "har-validator": "^5.0.0",
-        "stringify-object": "^3.3.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "commander": {
-          "version": "2.20.3",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
-          "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="
-        },
-        "debug": {
-          "version": "2.6.9",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
-          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "form-data": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-3.0.0.tgz",
-          "integrity": "sha512-CKMFDglpbMi6PyN+brwB9Q/GOw0eAnsrEZDgcsH5Krhz5Od/haKHAX0NmQfha2zPPz0JpWzA7GJHGSnvCRLWsg==",
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.8",
-            "mime-types": "^2.1.12"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
-        }
-      }
-    },
     "human-signals": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
@@ -21724,7 +21332,8 @@
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
-      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg=="
+      "integrity": "sha512-l4RyHgRqGN4Y3+9JHVrNqO+tN0rV5My76uW5/nuO4K1b6vw5G8d/cmFjP9tRfEsdhZNt0IFdZuK/c2Vr4Nb+Qg==",
+      "dev": true
     },
     "is-path-inside": {
       "version": "3.0.3",
@@ -21759,11 +21368,6 @@
         "has-tostringtag": "^1.0.0"
       }
     },
-    "is-regexp": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
-      "integrity": "sha512-7zjFAPO4/gwyQAAgRRmqeEeyIICSdmCqa3tsVHMdBzaXXRiqopZL4Cyghg/XulGWrtABTpbnYYzzIRffLkP4oA=="
-    },
     "is-shared-array-buffer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
@@ -22036,7 +21640,8 @@
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -22448,11 +22053,6 @@
       "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true
     },
-    "map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha512-CkYQrPYZfWnu/DAmVCpTSX/xHpKZ80eKh2lAkyA6AJTef6bW+6JpbQZN5rofum7da+SyN1bi5ctTm+lTfcCW3g=="
-    },
     "map-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/map-visit/-/map-visit-1.0.0.tgz",
@@ -23904,14 +23504,6 @@
         }
       }
     },
-    "pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha512-e3FBlXLmN/D1S+zHzanP4E/4Z60oFAa3O051qt1pxa7DEJWKAyil6upYVXCWadEnuoqa4Pkc9oUx9zsxYeRv8A==",
-      "requires": {
-        "through": "~2.3"
-      }
-    },
     "pend": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
@@ -24171,7 +23763,8 @@
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "dev": true
     },
     "q": {
       "version": "1.5.1",
@@ -25663,14 +25256,6 @@
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
       "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ=="
     },
-    "stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha512-rT00SPnTVyRsaSz5zgSPma/aHSOic5U1prhYdRy5HS2kTZviFpmDgzilbtsJsxiroqACmayynDN/9VzIbX5DOw==",
-      "requires": {
-        "duplexer": "~0.1.1"
-      }
-    },
     "stream-connect": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/stream-connect/-/stream-connect-1.0.2.tgz",
@@ -25759,16 +25344,6 @@
         "es-abstract": "^1.19.5"
       }
     },
-    "stringify-object": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
-      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
-      "requires": {
-        "get-own-enumerable-property-symbols": "^3.0.0",
-        "is-obj": "^1.0.1",
-        "is-regexp": "^1.0.0"
-      }
-    },
     "strip-ansi": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
@@ -26001,7 +25576,8 @@
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
     },
     "through2": {
       "version": "3.0.2",
@@ -26310,6 +25886,7 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
       "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
       "requires": {
         "punycode": "^2.1.0"
       }
diff --git a/package.json b/package.json
index 068ec4e39c..074ce4f335 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
   },
   "dependencies": {
     "express": "^4.18.1",
-    "httpsnippet": "^2.0.0",
     "mysql2": "^2.3.3",
     "pg": "^8.7.3",
     "sqlite3": "^5.0.2"

From a1f6a38a2a65958f5a6dca2ea4387c99ffbc9d89 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 20:30:59 +0530
Subject: [PATCH 14/76] fix/minor cleanup

---
 .../components/smartsheet/sidebar/MenuBottom.vue    |  2 +-
 .../smartsheet/sidebar/menu/ApiSnippet.vue          | 13 +++++--------
 packages/nc-gui-v2/composables/useGlobal/state.ts   |  5 ++++-
 packages/nc-gui-v2/composables/useProject.ts        |  3 +--
 packages/nc-gui-v2/plugins/state.ts                 |  2 +-
 5 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
index f4b9e81ef0..d7e1058a09 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/MenuBottom.vue
@@ -91,7 +91,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
 
-    <SmartsheetSidebarMenuApiSnippet :model-value="showApiSnippet" @update:model-value="(val) => (showApiSnippet = val)" />
+    <SmartsheetSidebarMenuApiSnippet v-model="showApiSnippet" />
     <div class="flex-auto justify-end flex flex-col gap-4 mt-4">
       <button
         class="flex items-center gap-2 w-full mx-3 px-4 py-3 rounded !bg-primary text-white transform translate-x-4 hover:(translate-x-0 shadow-lg) transition duration-150 ease"
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 b69a3fec5c..4c15a689ad 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -1,27 +1,24 @@
 <script setup lang="ts">
 import HTTPSnippet from 'httpsnippet'
 import { useClipboard } from '@vueuse/core'
-import { useToast } from 'vue-toastification'
+import { notification } from 'ant-design-vue'
 import { ActiveViewInj, MetaInj } from '~/context'
 
 const props = defineProps<Props>()
 
 const emits = defineEmits(['update:modelValue'])
 
-const toast = useToast()
-
 interface Props {
   modelValue: boolean
 }
 
 const { project } = $(useProject())
-const { appInfo } = $(useGlobal())
+const { appInfo, token } = $(useGlobal())
 const meta = $(inject(MetaInj))
 const view = $(inject(ActiveViewInj))
 const { xWhere } = useSmartsheetStoreOrThrow()
 const { queryParams } = $(useViewData(meta, view as any, xWhere))
 const { copy } = useClipboard()
-const { $state } = useNuxtApp()
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
@@ -73,7 +70,7 @@ const snippet = $computed(
   () =>
     new HTTPSnippet({
       method: 'GET',
-      headers: [{ name: 'xc-auth', value: $state.token.value as string, comment: 'JWT Auth token' }],
+      headers: [{ name: 'xc-auth', value: token as string, comment: 'JWT Auth token' }],
       url: apiUrl,
       queryString: Object.entries(queryParams || {}).map(([name, value]) => {
         return {
@@ -92,7 +89,7 @@ const code = $computed(() => {
 const api = new Api({
   baseURL: ${JSON.stringify(apiUrl)},
   headers: {
-    "xc-auth": ${JSON.stringify($state.token.value as string)}
+    "xc-auth": ${JSON.stringify(token as string)}
   }
 })
 
@@ -113,7 +110,7 @@ api.dbViewRow.list(
 
 const onCopyToClipboard = () => {
   copy(code)
-  toast.info('Copied to clipboard')
+  notification.info({ message: 'Copied to clipboard' })
 }
 
 const afterVisibleChange = (visible: boolean) => {
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 5de2635183..fdc8c4da9a 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -1,7 +1,7 @@
 import { usePreferredLanguages, useStorage } from '@vueuse/core'
 import { useJwt } from '@vueuse/integrations/useJwt'
 import type { JwtPayload } from 'jwt-decode'
-import type { State, StoredState } from './types'
+import type { AppInfo, State, StoredState } from './types'
 import { computed, ref, toRefs, useCounter, useNuxtApp, useTimestamp } from '#imports'
 import type { User } from '~/lib'
 
@@ -71,6 +71,8 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     set: (val) => (storage.value.token = val),
   })
 
+  const appInfo = ref<AppInfo>({ ncSiteUrl: 'localhost:8080' })
+
   /** reactive token payload */
   const { payload } = useJwt<JwtPayload & User>(token)
 
@@ -88,5 +90,6 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     timestamp,
     runningRequests,
     error,
+    appInfo,
   }
 }
diff --git a/packages/nc-gui-v2/composables/useProject.ts b/packages/nc-gui-v2/composables/useProject.ts
index 1e1f5d5b8c..7d4fc760db 100644
--- a/packages/nc-gui-v2/composables/useProject.ts
+++ b/packages/nc-gui-v2/composables/useProject.ts
@@ -11,7 +11,6 @@ export function useProject(projectId?: MaybeRef<string>) {
   const _projectId = $computed(() => unref(projectId))
 
   const project = useState<ProjectType>('project')
-  const appInfo = useState<any>('appInfo')
   const tables = useState<TableType[]>('tables', () => [] as TableType[])
 
   async function loadProjectRoles() {
@@ -50,5 +49,5 @@ export function useProject(projectId?: MaybeRef<string>) {
     () => SqlUiFactory.create({ client: projectBaseType }) as Exclude<ReturnType<typeof SqlUiFactory['create']>, typeof OracleUi>,
   )
 
-  return { project, tables, loadProjectRoles, loadProject, appInfo, loadTables, isMysql, isPg, sqlUi }
+  return { project, tables, loadProjectRoles, loadProject, loadTables, isMysql, isPg, sqlUi }
 }
diff --git a/packages/nc-gui-v2/plugins/state.ts b/packages/nc-gui-v2/plugins/state.ts
index d792e744da..ea16d99185 100644
--- a/packages/nc-gui-v2/plugins/state.ts
+++ b/packages/nc-gui-v2/plugins/state.ts
@@ -23,7 +23,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   nuxtApp.vueApp.i18n.locale.value = state.lang.value
 
   try {
-    state.appInfo = await $api.utils.appInfo()
+    state.appInfo.value = await $api.utils.appInfo()
   } catch (e) {
     console.error(e)
   }

From ccea47062abf2b2094db1e382a4f9adaaf2b87b2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 9 Aug 2022 20:40:57 +0530
Subject: [PATCH 15/76] fix/fixed merge conflict

---
 .../nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue | 2 ++
 packages/nc-gui-v2/package-lock.json                            | 2 --
 2 files changed, 2 insertions(+), 2 deletions(-)

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 4c15a689ad..4dfb0299a2 100644
--- a/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
+++ b/packages/nc-gui-v2/components/smartsheet/sidebar/menu/ApiSnippet.vue
@@ -142,6 +142,8 @@ const afterVisibleChange = (visible: boolean) => {
             :model-value="code"
             :read-only="true"
             lang="typescript"
+            :validate="false"
+            :disable-deep-compare="true"
           />
           <div class="flex flex-row w-full justify-end space-x-3 mt-4 uppercase">
             <a-button
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index a2ac9c9166..00556dbb97 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -10568,7 +10568,6 @@
       "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",
@@ -23144,7 +23143,6 @@
       "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",

From acb00dc857d612544a976c3970fea86a426ef3f4 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 00:06:54 +0300
Subject: [PATCH 16/76] feat(gui-v2): ColorPicker component

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/general/ColorPicker.vue        | 94 +++++++++++++++++++
 1 file changed, 94 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/ColorPicker.vue

diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
new file mode 100644
index 0000000000..44300663d8
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -0,0 +1,94 @@
+<script lang="ts" setup>
+import { Chrome } from '@ckpack/vue-color'
+import { enumColor } from '@/utils'
+
+interface Props {
+  modelValue: String
+  colors?: String[]
+  rowSize?: number
+  advanced?: Boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: () => enumColor.light[0],
+  colors: () => enumColor.light.concat(enumColor.dark),
+  rowSize: () => 10,
+  advanced: () => true,
+})
+
+const emit = defineEmits(['update:modelValue'])
+const vModel = useVModel(props, 'modelValue', emit)
+
+const picked = ref(props.modelValue || enumColor.light[0])
+
+const select = (color: 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
+}
+</script>
+
+<template>
+  <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)"
+        :key="`color-${colId}-${i}`"
+        class="color-selector"
+        :class="compare(picked, color) ? 'selected' : ''"
+        :style="{ 'background-color': `${color}` }"
+        @click="select(color)"
+      >
+        {{ compare(picked, color) ? '&#10003;' : '' }}
+      </button>
+    </div>
+    <a-card v-if="props.advanced" class="w-full shadow-lg mt-2" :body-style="{ padding: '0px' }">
+      <a-collapse accordion ghost expand-icon-position="right">
+        <a-collapse-panel key="1" header="Advanced" class="">
+          <a-button class="!bg-primary text-white w-full" @click="select(picked)"> Pick Color </a-button>
+          <div class="flex justify-center py-4">
+            <Chrome v-model="picked" />
+          </div>
+        </a-collapse-panel>
+      </a-collapse>
+    </a-card>
+  </div>
+</template>
+
+<style scoped>
+.color-picker {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  background: white;
+  padding: 10px;
+}
+.color-picker-row {
+  display: flex;
+  flex-direction: row;
+}
+.color-selector {
+  position: relative;
+  height: 32px;
+  width: 32px;
+  margin: 10px 5px;
+  border-radius: 5px;
+  -webkit-text-stroke-width: 1px;
+  -webkit-text-stroke-color: white;
+}
+.color-selector:hover {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+.color-selector.selected {
+  filter: brightness(90%);
+  -webkit-filter: brightness(90%);
+}
+</style>

From 8c28ec92e0ec50d844d90ca13614c598d1c536a7 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 03:17:07 +0300
Subject: [PATCH 17/76] feat(gui-v2): select column options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet-column/EditOrAdd.vue           |   1 +
 .../smartsheet-column/SelectOptions.vue       | 104 ++++++++++++++++++
 2 files changed, 105 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 607e899f2d..8a16613123 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -139,6 +139,7 @@ watch(
       />
       <SmartsheetColumnSpecificDBTypeOptions v-if="formState.uidt === UITypes.SpecificDBType" />
       <SmartsheetColumnPercentOptions v-if="formState.uidt === UITypes.Percent" />
+      <SmartsheetColumnSelectOptions v-if="formState.uidt === UITypes.SingleSelect || formState.uidt === UITypes.MultiSelect" />
 
       <div
         v-if="!isVirtualCol(formState.uidt)"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
new file mode 100644
index 0000000000..a81984c94b
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import Draggable from 'vuedraggable'
+import { UITypes } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow } from '#imports'
+import { enumColor } from '@/utils'
+import MdiDragIcon from '~icons/mdi/drag-vertical'
+import MdiArrowDownDropCircle from '~icons/mdi/arrow-down-drop-circle'
+import MdiClose from '~icons/mdi/close'
+import MdiPlusIcon from '~icons/mdi/plus'
+
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+
+let options = $ref<any[]>([])
+const colorMenus = $ref<any>({})
+const colors = $ref(enumColor.light)
+
+const validators = {
+  'colOptions.options': [
+    {
+      validator: (_: any, opt: any) => {
+        return new Promise<void>((resolve, reject) => {
+          for (const opt of options) {
+            if (!opt.title.length) {
+              return reject(new Error("Select options can't be null"))
+            }
+            if (formState.value.uidt === UITypes.MultiSelect && opt.title.includes(',')) {
+              return reject(new Error("MultiSelect columns can't have commas(',')"))
+            }
+            if (options.filter((el) => el.title === opt.title).length !== 1) {
+              return reject(new Error("Select options can't have duplicates"))
+            }
+          }
+          resolve()
+        })
+      },
+    },
+  ],
+}
+
+setAdditionalValidations({
+  ...validators,
+})
+
+const getNextColor = () => {
+  let tempColor = colors[0]
+  if (options.length && options[options.length - 1].color) {
+    const lastColor = colors.indexOf(options[options.length - 1].color)
+    tempColor = colors[(lastColor + 1) % colors.length]
+  }
+  return tempColor
+}
+
+const addNewOption = () => {
+  const tempOption = {
+    title: '',
+    color: getNextColor(),
+  }
+  options.push(tempOption)
+}
+
+const removeOption = (index: number) => {
+  options.splice(index, 1)
+}
+
+onMounted(() => {
+  if (!formState.value.colOptions?.options) {
+    formState.value.colOptions = {
+      options: [],
+    }
+  }
+  options = formState.value.colOptions.options
+  // Support for older options
+  for (const op of options.filter((el) => el.order === null)) {
+    op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+  }
+})
+</script>
+
+<template>
+  <div class="w-full">
+    <draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
+      <template #item="{ element, index }">
+        <div class="flex py-1 align-center">
+          <MdiDragIcon small class="nc-child-draggable-icon handle" />
+          <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
+            <template #overlay>
+              <GeneralColorPicker v-model="element.color" @update:model-value="colorMenus[index] = false" />
+            </template>
+            <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
+          </a-dropdown>
+          <a-input v-model:value="element.title" class="caption" />
+          <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
+        </div>
+      </template>
+      <template #footer>
+        <a-button type="dashed" class="w-full caption mt-2" @click="addNewOption()">
+          <div class="flex align-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
+        </a-button>
+      </template>
+    </draggable>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

From 58b6b9aedc544d9fd9e60b9c422217855edcf276 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 19:16:01 +0300
Subject: [PATCH 18/76] feat(gui-v2): single/multi select cells

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |   1 +
 .../nc-gui-v2/components/cell/MultiSelect.vue | 131 ++++++++++--------
 .../components/cell/SingleSelect.vue          |  74 ++++------
 packages/nocodb-sdk/src/lib/Api.ts            |   8 +-
 scripts/sdk/swagger.json                      |  39 ++++--
 5 files changed, 135 insertions(+), 118 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index e41983c665..c83503cfa4 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -57,6 +57,7 @@ declare module '@vue/runtime-core' {
     ATableColumn: typeof import('ant-design-vue/es')['TableColumn']
     ATabPane: typeof import('ant-design-vue/es')['TabPane']
     ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATimePicker: typeof import('ant-design-vue/es')['TimePicker']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index d33373e547..b80b76e870 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,76 +1,97 @@
 <script lang="ts" setup>
+import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | string[] | undefined
 }
 
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
+const { isMysql } = useProject()
+
 const column = inject(ColumnInj)
 
-const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => {
+  if (column?.colOptions) {
+    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
 
-const localState = computed({
-  get() {
-    return modelValue?.match(/(?:[^',]|\\')+(?='?(?:,|$))/g)?.map((v: string) => v.replace(/\\'/g, "'"))
-  },
-  set(val?: string[]) {
-    emit('update:modelValue', val?.filter((v) => options.value.includes(v)).join(','))
-  },
+const vModel = computed({
+  get: () =>
+    modelValue
+      ? 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)
+              return opa.order - opb.order
+            })
+          : modelValue.split(',')
+        : modelValue
+      : [],
+  set: (val) => emit('update:modelValue', val.join(',')),
 })
 </script>
 
 <template>
-  <!--
-  <v-select
-    v-model="localState"
-    :items="options"
-    hide-details
-    :clearable="!column.rqd"
-    variation="outlined"
-    multiple
-  />
--->
-
-  <v-combobox
-    v-model="localState"
-    :items="options"
-    multiple
-    chips
-    flat
-    dense
-    solo
-    hide-details
-    deletable-chips
-    class="text-center mt-0"
+  <a-select
+    v-model:value="vModel"
+    mode="multiple"
+    class="w-full"
+    placeholder="Select an option"
+    :bordered="false"
+    show-arrow
+    :show-search="false"
   >
-    <!--    <template #selection="data"> -->
-    <!--      <v-chip -->
-    <!--        :key="data.item" -->
-    <!--        small -->
-    <!--        class="ma-1 " -->
-    <!--        :color="colors[setValues.indexOf(data.item) % colors.length]" -->
-    <!--        @click:close="data.parent.selectItem(data.item)" -->
-    <!--      > -->
-    <!--        {{ data.item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-
-    <!--    <template #item="{item}"> -->
-    <!--      <v-chip small :color="colors[setValues.indexOf(item) % colors.length]"> -->
-    <!--        {{ item }} -->
-    <!--      </v-chip> -->
-    <!--    </template> -->
-    <!--    <template #append> -->
-    <!--      <v-icon small class="mt-2"> -->
-    <!--        mdi-menu-down -->
-    <!--      </v-icon> -->
-    <!--    </template> -->
-  </v-combobox>
+    <a-select-option v-for="op of options" :key="op.title" style="cursor: pointer">
+      <a-tag :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+    <template #tagRender="{ value: val, label, onClose }">
+      <a-tag :color="label[0].props.color" :closable="true" @close="onClose">
+        <span class="text-slate-500">{{ val }}</span>
+      </a-tag>
+    </template>
+  </a-select>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.ant-tag-close-icon) {
+  @apply "text-slate-500";
+}
+</style>
+<!--
+/**
+ * @copyright Copyright (c) 2021, Xgene Cloud Ltd
+ *
+ * @author Naveen MR <oof1lab@gmail.com>
+ * @author Pranav C Balan <pranavxc@gmail.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+-->
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 75821474b8..2fd15c71a4 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
 import { ColumnInj } from '~/context'
 
 interface Props {
-  modelValue: string | null
+  modelValue: string | undefined
 }
 
 const { modelValue } = defineProps<Props>()
@@ -13,60 +14,39 @@ const emit = defineEmits(['update:modelValue'])
 const column = inject(ColumnInj)!
 
 const vModel = computed({
-  get: () => modelValue?.replace(/\\'/g, "'").replace(/^'|'$/g, ''),
+  get: () => modelValue,
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column.value.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => {
+  if (column?.colOptions) {
+    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+    for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
+      op.title = op.title.replace(/^'/, '').replace(/'$/, '')
+    }
+    return opts
+  }
+  return []
+})
 </script>
 
 <template>
-  <v-select v-model="vModel" :items="options" hide-details :clearable="!column.rqd" variation="outlined">
-    <!--    v-on="parentListeners"
-    <template #selection="{ item }">
-      <div
-        class="d-100"
-        :class="{
-          'text-center': !isForm,
-        }"
-      >
-        <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]" class="ma-1">
-          {{ item.text }}
-        </v-chip>
-      </div>
-    </template>
-    <template #item="{ item }">
-      <v-chip small :color="enumColor.light[options.indexOf(item) % enumColor.light.length]">
-        {{ item }}
-      </v-chip>
-    </template>
-    <template #append>
-      <v-icon small class="mt-1"> mdi-menu-down</v-icon>
-    </template> -->
-  </v-select>
+  <a-select
+    v-model:value="vModel"
+    class="w-full fill"
+    :allow-clear="!column.rqd"
+    placeholder="Select an option"
+    :bordered="false"
+  >
+    <a-select-option v-for="op of options" :key="op.title">
+      <a-tag :color="op.color">
+        <span class="text-slate-500">{{ op.title }}</span>
+      </a-tag>
+    </a-select-option>
+  </a-select>
 </template>
 
-<style scoped lang="scss">
-/*:deep {
-  .v-select {
-    min-width: 150px;
-  }
-
-  .v-input__slot {
-    padding-right: 0 !important;
-    padding-left: 35px !important;
-  }
-
-  .v-input__icon.v-input__icon--clear {
-    width: 15px !important;
-    min-width: 13px !important;
-
-    .v-icon {
-      font-size: 13px !important;
-    }
-  }
-}*/
-</style>
+<style scoped lang="scss"></style>
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index f3d6548d06..fe836437d6 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -242,7 +242,7 @@ export interface ColumnType {
     | FormulaType
     | RollupType
     | LookupType
-    | SelectOptionsType[]
+    | SelectOptionsType
     | object;
 }
 
@@ -303,9 +303,11 @@ export interface FormulaType {
 }
 
 export interface SelectOptionsType {
+  options: SelectOptionType;
+}
+
+export interface SelectOptionType {
   id?: string;
-  type?: string;
-  virtual?: boolean;
   fk_column_id?: string;
   title?: string;
   color?: string;
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 97f7a52a62..f0d7eda0b9 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6605,10 +6605,7 @@
                 "$ref": "#/components/schemas/Lookup"
               },
               {
-                "type": "array",
-                "items": {
-                  "$ref": "#/components/schemas/SelectOptions"
-                }
+                "$ref": "#/components/schemas/SelectOptions"
               },
               {
                 "type": "object"
@@ -6821,16 +6818,34 @@
       "SelectOptions": {
         "title": "SelectOptions",
         "type": "object",
+        "properties": {
+          "options": {
+            "type": "array",
+            "required": true,
+            "$ref": "#/components/schemas/SelectOption"
+          }
+        },
+        "examples": [
+          {
+            "options": [
+              {
+                "id": "string",
+                "fk_column_id": "string",
+                "title": "string",
+                "color": "string",
+                "order": 1
+              }
+            ]
+          }
+        ]
+      },
+      "SelectOption": {
+        "title": "SelectOption",
+        "type": "object",
         "properties": {
           "id": {
             "type": "string"
           },
-          "type": {
-            "type": "string"
-          },
-          "virtual": {
-            "type": "boolean"
-          },
           "fk_column_id": {
             "type": "string"
           },
@@ -6847,12 +6862,10 @@
         "examples": [
           {
             "id": "string",
-            "type": "string",
-            "virtual": true,
             "fk_column_id": "string",
             "title": "string",
             "color": "string",
-            "order": 0
+            "order": 1
           }
         ]
       },

From afdde78bf0efae9ece23f3939c708d714635fcd1 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 20:46:51 +0300
Subject: [PATCH 19/76] refactor(gui-v2): curved labels

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index b80b76e870..1a45b0b389 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -54,12 +54,12 @@ const vModel = computed({
     :show-search="false"
   >
     <a-select-option v-for="op of options" :key="op.title" style="cursor: pointer">
-      <a-tag :color="op.color">
+      <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
     <template #tagRender="{ value: val, label, onClose }">
-      <a-tag :color="label[0].props.color" :closable="true" @close="onClose">
+      <a-tag class="rounded-tag" :color="label[0].props.color" :closable="true" @close="onClose">
         <span class="text-slate-500">{{ val }}</span>
       </a-tag>
     </template>
@@ -67,6 +67,13 @@ const vModel = computed({
 </template>
 
 <style scoped>
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
 :deep(.ant-tag-close-icon) {
   @apply "text-slate-500";
 }
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 2fd15c71a4..27f19066de 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -39,14 +39,22 @@ const options = computed(() => {
     :bordered="false"
   >
     <a-select-option v-for="op of options" :key="op.title">
-      <a-tag :color="op.color">
+      <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
   </a-select>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.rounded-tag {
+  padding: 0px 12px;
+  border-radius: 12px;
+}
+:deep(.ant-tag) {
+  @apply "rounded-tag";
+}
+</style>
 <!--
 /**
  * @copyright Copyright (c) 2021, Xgene Cloud Ltd

From e09d08ccd2d8ffcc5cb84b0f581fa4a8dc163d09 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Fri, 5 Aug 2022 20:56:44 +0300
Subject: [PATCH 20/76] feat(gui-v2): show close icon only in edit mode for
 multiselect labels

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 1a45b0b389..70e88cb94b 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -59,7 +59,7 @@ const vModel = computed({
       </a-tag>
     </a-select-option>
     <template #tagRender="{ value: val, label, onClose }">
-      <a-tag class="rounded-tag" :color="label[0].props.color" :closable="true" @close="onClose">
+      <a-tag class="rounded-tag" :color="label[0].props.color" :closable="editEnabled" @close="onClose">
         <span class="text-slate-500">{{ val }}</span>
       </a-tag>
     </template>

From 427d9084c07881cb5ecf912edb4cc3a2e9dcaee3 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 6 Aug 2022 12:39:34 +0300
Subject: [PATCH 21/76] feat(gui-v2): implement color picker to rating and
 checkbox options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../smartsheet-column/CheckboxOptions.vue     | 27 +++++++++----------
 .../smartsheet-column/RatingOptions.vue       | 27 +++++++++----------
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index c407b1cd25..2c73e40594 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { enumColor, getMdiIcon } from '@/utils'
+import { getMdiIcon } from '@/utils'
 
 const { formState } = useColumnCreateStoreOrThrow()
 
@@ -37,9 +36,12 @@ const iconList = [
   },
 ]
 
-const advanced = ref(true)
-
-const picked = ref(formState.value.meta.color || enumColor.light[0])
+const picked = computed({
+  get: () => formState.value.meta.color,
+  set: (val) => {
+    formState.value.meta.color = val
+  },
+})
 
 // set default value
 formState.value.meta = {
@@ -92,16 +94,11 @@ watch(
     </a-col>
   </a-row>
   <a-row>
-    <a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
-      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
-        <a-collapse-panel key="1" header="Advanced" class="">
-          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
-          <div class="px-7 py-3">
-            <Sketch v-model="picked" />
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-card>
+    <GeneralColorPicker
+      v-model="picked"
+      :row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
+    />
   </a-row>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index 55e780efac..c9aebc4042 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { Sketch } from '@ckpack/vue-color'
 import { useColumnCreateStoreOrThrow } from '#imports'
-import { enumColor, getMdiIcon } from '@/utils'
+import { getMdiIcon } from '@/utils'
 
 const { formState } = useColumnCreateStoreOrThrow()
 
@@ -29,9 +28,12 @@ const iconList = [
   },
 ]
 
-const advanced = ref(true)
-
-const picked = ref(formState.value.meta.color || enumColor.light[0])
+const picked = computed({
+  get: () => formState.value.meta.color,
+  set: (val) => {
+    formState.value.meta.color = val
+  },
+})
 
 // set default value
 formState.value.meta = {
@@ -95,16 +97,11 @@ watch(
     </a-col>
   </a-row>
   <a-row>
-    <a-card class="w-full shadow-lg mt-2" body-style="padding: 0px">
-      <a-collapse v-model:activeKey="advanced" accordion ghost expand-icon-position="right">
-        <a-collapse-panel key="1" header="Advanced" class="">
-          <a-button class="!bg-primary text-white w-full" @click="formState.meta.color = picked.hex"> Pick Color </a-button>
-          <div class="px-7 py-3">
-            <Sketch v-model="picked" />
-          </div>
-        </a-collapse-panel>
-      </a-collapse>
-    </a-card>
+    <GeneralColorPicker
+      v-model="picked"
+      :row-size="8"
+      :colors="['#fcb401', '#faa307', '#f48c06', '#e85d04', '#dc2f02', '#d00000', '#9d0208', '#777']"
+    />
   </a-row>
 </template>
 

From 57ec5a2a99775203c31cfca8a59954f0d409b62d Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sat, 6 Aug 2022 19:49:59 +0300
Subject: [PATCH 22/76] fix(gui-v2): multiselect option update issues

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 70e88cb94b..43a861b273 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -14,6 +14,9 @@ const emit = defineEmits(['update:modelValue'])
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)
+const isForm = inject<boolean>('isForm', false)
+const editEnabled = inject(EditModeInj, ref(false))
+const selectedIds = ref<string[]>([])
 
 const options = computed(() => {
   if (column?.colOptions) {
@@ -27,20 +30,41 @@ const options = computed(() => {
 })
 
 const vModel = computed({
-  get: () =>
-    modelValue
-      ? 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)
-              return opa.order - opb.order
-            })
-          : modelValue.split(',')
-        : modelValue
-      : [],
+  get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
   set: (val) => emit('update:modelValue', val.join(',')),
 })
+
+const selectedTitles = computed(() =>
+  modelValue
+    ? 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)
+            if (opa && opb) {
+              return opa.order - opb.order
+            }
+            return 0
+          })
+        : modelValue.split(',')
+      : modelValue
+    : [],
+)
+
+onMounted(() => {
+  selectedIds.value = selectedTitles.value.map((el) => {
+    return options.value.find((op: SelectOptionType) => op.title === el).id
+  })
+})
+
+watch(
+  () => modelValue,
+  (n, _o) => {
+    selectedIds.value = selectedTitles.value.map((el) => {
+      return options.value.find((op: SelectOptionType) => op.title === el).id
+    })
+  },
+)
 </script>
 
 <template>
@@ -53,13 +77,19 @@ const vModel = computed({
     show-arrow
     :show-search="false"
   >
-    <a-select-option v-for="op of options" :key="op.title" style="cursor: pointer">
+    <a-select-option v-for="op of options" :key="op.id" :value="op.title" :data-color="op.color">
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
     </a-select-option>
-    <template #tagRender="{ value: val, label, onClose }">
-      <a-tag class="rounded-tag" :color="label[0].props.color" :closable="editEnabled" @close="onClose">
+    <template #tagRender="{ value: val, onClose }">
+      <a-tag
+        v-if="options.find((el: SelectOptionType) => el.title === val)"
+        class="rounded-tag"
+        :color="options.find((el: SelectOptionType) => el.title === val).color"
+        :closable="editEnabled"
+        @close="onClose"
+      >
         <span class="text-slate-500">{{ val }}</span>
       </a-tag>
     </template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 27f19066de..398576fe1d 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -31,13 +31,7 @@ const options = computed(() => {
 </script>
 
 <template>
-  <a-select
-    v-model:value="vModel"
-    class="w-full fill"
-    :allow-clear="!column.rqd"
-    placeholder="Select an option"
-    :bordered="false"
-  >
+  <a-select v-model:value="vModel" class="w-full" :allow-clear="!column.rqd" placeholder="Select an option" :bordered="false">
     <a-select-option v-for="op of options" :key="op.title">
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>

From a1b35baba3d65802ffcc21beb3d7e199ab579508 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 7 Aug 2022 13:23:49 +0300
Subject: [PATCH 23/76] feat(gui-v2): ux improvements for select cells

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/cell/MultiSelect.vue | 10 ++++++----
 .../components/cell/SingleSelect.vue          | 20 +++++++++++++++----
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  7 ++++++-
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  1 +
 4 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 43a861b273..abffd12b0b 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | string[] | undefined
@@ -16,6 +16,8 @@ const { isMysql } = useProject()
 const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
+
 const selectedIds = ref<string[]>([])
 
 const options = computed(() => {
@@ -31,7 +33,7 @@ const options = computed(() => {
 
 const vModel = computed({
   get: () => selectedIds.value.map((el) => options.value.find((op: SelectOptionType) => op.id === el).title),
-  set: (val) => emit('update:modelValue', val.join(',')),
+  set: (val) => emit('update:modelValue', val.length === 0 ? null : val.join(',')),
 })
 
 const selectedTitles = computed(() =>
@@ -59,7 +61,7 @@ onMounted(() => {
 
 watch(
   () => modelValue,
-  (n, _o) => {
+  (_n, _o) => {
     selectedIds.value = selectedTitles.value.map((el) => {
       return options.value.find((op: SelectOptionType) => op.title === el).id
     })
@@ -87,7 +89,7 @@ watch(
         v-if="options.find((el: SelectOptionType) => el.title === val)"
         class="rounded-tag"
         :color="options.find((el: SelectOptionType) => el.title === val).color"
-        :closable="editEnabled"
+        :closable="active && (vModel.length > 1 || !column?.rqd)"
         @close="onClose"
       >
         <span class="text-slate-500">{{ val }}</span>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 398576fe1d..8ddc65e66b 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 { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ColumnInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
   modelValue: string | undefined
@@ -11,11 +11,14 @@ const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-const column = inject(ColumnInj)!
+const column = inject(ColumnInj)
+const isForm = inject<boolean>('isForm', false)
+const editEnabled = inject(EditModeInj, ref(false))
+const active = inject(ActiveCellInj, ref(false))
 
 const vModel = computed({
   get: () => modelValue,
-  set: (val) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val || null),
 })
 
 const options = computed(() => {
@@ -31,7 +34,13 @@ const options = computed(() => {
 </script>
 
 <template>
-  <a-select v-model:value="vModel" class="w-full" :allow-clear="!column.rqd" placeholder="Select an option" :bordered="false">
+  <a-select
+    v-model:value="vModel"
+    class="w-full"
+    :allow-clear="!column.rqd && active"
+    placeholder="Select an option"
+    :bordered="false"
+  >
     <a-select-option v-for="op of options" :key="op.title">
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
@@ -48,6 +57,9 @@ const options = computed(() => {
 :deep(.ant-tag) {
   @apply "rounded-tag";
 }
+:deep(.ant-select-clear) {
+  opacity: 1;
+}
 </style>
 <!--
 /**
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index de3a6763a2..5760bf9283 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -3,7 +3,7 @@ import { UITypes } from 'nocodb-sdk'
 import type { ColumnType } from 'nocodb-sdk'
 import { provide, toRef } from 'vue'
 import { computed, useColumn, useDebounceFn, useVModel } from '#imports'
-import { ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
 import { NavigateDir } from '~/lib'
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
   modelValue: any
   editEnabled: boolean
   rowIndex: number
+  active?: boolean
 }
 
 const props = defineProps<Props>()
@@ -19,10 +20,14 @@ const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editE
 
 const column = toRef(props, 'column')
 
+const active = toRef(props, 'active', false)
+
 provide(ColumnInj, column)
 
 provide(EditModeInj, useVModel(props, 'editEnabled', emit))
 
+provide(ActiveCellInj, active)
+
 let changed = $ref(false)
 
 const syncValue = useDebounceFn(function () {
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 1f7e48bed6..3bea2eaca6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -350,6 +350,7 @@ const onNavigate = (dir: NavigateDir) => {
                     :column="columnObj"
                     :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
                     :row-index="rowIndex"
+                    :active="selected.col === colIndex && selected.row === rowIndex"
                     @update:edit-enabled="editEnabled = false"
                     @save="updateOrSaveRow(row, columnObj.title)"
                     @navigate="onNavigate"

From a794f8a7cecb764c72b56c11352f17b887842604 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 7 Aug 2022 14:21:06 +0300
Subject: [PATCH 24/76] fix(gui-v2): disable grid navigation if column options
 are open

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

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 3879cb06ab..72ad5ac11f 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -72,6 +72,7 @@ onClickOutside(editOrAddCard, () => {
         ref="editOrAddCard"
         :edit-column-dropdown="editColumnDropdown"
         @click.stop
+        @keydown.stop
         @cancel="editColumnDropdown = false"
       />
     </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 3bea2eaca6..a9e8abd4f8 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -297,7 +297,7 @@ const onNavigate = (dir: NavigateDir) => {
                   </div>
 
                   <template #overlay>
-                    <SmartsheetColumnEditOrAdd @click.stop @cancel="addColumnDropdown = false" />
+                    <SmartsheetColumnEditOrAdd @click.stop @keydown.stop @cancel="addColumnDropdown = false" />
                   </template>
                 </a-dropdown>
               </th>

From 3cfeed6c4d8deb3063718ae58fcb29e01dbaf29f Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 7 Aug 2022 15:34:40 +0300
Subject: [PATCH 25/76] feat(gui-v2): consistent select close icon

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../nc-gui-v2/components/cell/MultiSelect.vue | 25 +++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index abffd12b0b..db48493878 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -2,6 +2,7 @@
 import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
 import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
+import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
   modelValue: string | string[] | undefined
@@ -88,8 +89,10 @@ watch(
       <a-tag
         v-if="options.find((el: SelectOptionType) => el.title === val)"
         class="rounded-tag"
+        :style="{ display: 'flex', alignItems: 'center' }"
         :color="options.find((el: SelectOptionType) => el.title === val).color"
         :closable="active && (vModel.length > 1 || !column?.rqd)"
+        :close-icon="h(MdiCloseCircle, { class: ['ms-close-icon'] })"
         @close="onClose"
       >
         <span class="text-slate-500">{{ val }}</span>
@@ -99,6 +102,28 @@ watch(
 </template>
 
 <style scoped>
+.ms-close-icon {
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+  display: flex;
+  font-size: 12px;
+  font-style: normal;
+  height: 12px;
+  line-height: 1;
+  text-align: center;
+  text-transform: none;
+  transition: color 0.3s ease, opacity 0.15s ease;
+  width: 12px;
+  z-index: 1;
+  margin-right: -6px;
+  margin-left: 3px;
+}
+.ms-close-icon:before {
+  display: block;
+}
+.ms-close-icon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
 .rounded-tag {
   padding: 0px 12px;
   border-radius: 12px;

From 469b96c8b21958b0afb4654283e85747147dc7dc Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Sun, 7 Aug 2022 23:09:18 +0300
Subject: [PATCH 26/76] feat(gui-v2): custom mouse and key events for select
 cells

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index db48493878..23a3c22214 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -20,6 +20,8 @@ const editEnabled = inject(EditModeInj, ref(false))
 const active = inject(ActiveCellInj, ref(false))
 
 const selectedIds = ref<string[]>([])
+const aselect = ref<any>(null)
+const isOpen = ref(false)
 
 const options = computed(() => {
   if (column?.colOptions) {
@@ -54,10 +56,36 @@ const selectedTitles = computed(() =>
     : [],
 )
 
+const handleKeys = (e: any) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
+    case 'Enter':
+      e.stopPropagation()
+      break
+  }
+}
+
+const handleClose = (e: any) => {
+  if (aselect.value) {
+    const selectClick = aselect.value.$el.contains(e.target)
+    if (!selectClick) {
+      isOpen.value = false
+    }
+  }
+}
+
 onMounted(() => {
   selectedIds.value = selectedTitles.value.map((el) => {
     return options.value.find((op: SelectOptionType) => op.title === el).id
   })
+  document.addEventListener('click', handleClose)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClose)
 })
 
 watch(
@@ -68,10 +96,20 @@ watch(
     })
   },
 )
+
+watch(
+  () => isOpen.value,
+  (n, _o) => {
+    if (n === false) {
+      aselect.value.blur()
+    }
+  },
+)
 </script>
 
 <template>
   <a-select
+    ref="aselect"
     v-model:value="vModel"
     mode="multiple"
     class="w-full"
@@ -79,8 +117,11 @@ watch(
     :bordered="false"
     show-arrow
     :show-search="false"
+    :open="isOpen"
+    @keydown="handleKeys"
+    @click="isOpen = !isOpen"
   >
-    <a-select-option v-for="op of options" :key="op.id" :value="op.title" :data-color="op.color">
+    <a-select-option v-for="op of options" :key="op.id" :value="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 8ddc65e66b..5d3a6ca6ee 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -16,6 +16,9 @@ const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
 const active = inject(ActiveCellInj, ref(false))
 
+const aselect = ref<any>(null)
+const isOpen = ref(false)
+
 const vModel = computed({
   get: () => modelValue,
   set: (val) => emit('update:modelValue', val || null),
@@ -31,17 +34,58 @@ const options = computed(() => {
   }
   return []
 })
+
+const handleKeys = (e: any) => {
+  switch (e.key) {
+    case 'Escape':
+      e.preventDefault()
+      isOpen.value = false
+      break
+  }
+}
+
+const handleClose = (e: any) => {
+  if (aselect.value) {
+    const selectClick = aselect.value.$el.contains(e.target)
+    if (!selectClick) {
+      isOpen.value = false
+      aselect.value.blur()
+    }
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClose)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClose)
+})
+
+watch(
+  () => isOpen.value,
+  (n, _o) => {
+    if (n === false) {
+      aselect.value.blur()
+    }
+  },
+)
 </script>
 
 <template>
   <a-select
+    ref="aselect"
     v-model:value="vModel"
     class="w-full"
     :allow-clear="!column.rqd && active"
     placeholder="Select an option"
     :bordered="false"
+    :open="isOpen"
+    @select="isOpen = false"
+    @keydown="handleKeys"
+    @click="isOpen = !isOpen"
   >
-    <a-select-option v-for="op of options" :key="op.title">
+    <a-select-option v-for="op of options" :key="op.title" @click.stop>
       <a-tag class="rounded-tag" :color="op.color">
         <span class="text-slate-500">{{ op.title }}</span>
       </a-tag>

From ea0fc22c0834b293cc3d5176b68491fd4ca42a40 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 9 Aug 2022 22:31:05 +0300
Subject: [PATCH 27/76] fix(gui-v2): select cell column refs

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 23a3c22214..795f9003b7 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
 
 interface Props {
@@ -15,8 +15,8 @@ const emit = defineEmits(['update:modelValue'])
 const { isMysql } = useProject()
 
 const column = inject(ColumnInj)
-const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject(EditModeInj, ref(false))
+// const isForm = inject<boolean>('isForm', false)
+// const editEnabled = inject(EditModeInj, ref(false))
 const active = inject(ActiveCellInj, ref(false))
 
 const selectedIds = ref<string[]>([])
@@ -24,8 +24,10 @@ const aselect = ref<any>(null)
 const isOpen = ref(false)
 
 const options = computed(() => {
-  if (column?.colOptions) {
-    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+  if (column?.value.colOptions) {
+    const opts = column.value.colOptions
+      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      : []
     for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 5d3a6ca6ee..94bb62efa3 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 { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
 import { computed, inject } from '#imports'
-import { ActiveCellInj, ColumnInj, EditModeInj } from '~/context'
+import { ActiveCellInj, ColumnInj } from '~/context'
 
 interface Props {
   modelValue: string | undefined
@@ -12,8 +12,8 @@ const { modelValue } = defineProps<Props>()
 const emit = defineEmits(['update:modelValue'])
 
 const column = inject(ColumnInj)
-const isForm = inject<boolean>('isForm', false)
-const editEnabled = inject(EditModeInj, ref(false))
+// const isForm = inject<boolean>('isForm', false)
+// const editEnabled = inject(EditModeInj, ref(false))
 const active = inject(ActiveCellInj, ref(false))
 
 const aselect = ref<any>(null)
@@ -25,8 +25,10 @@ const vModel = computed({
 })
 
 const options = computed(() => {
-  if (column?.colOptions) {
-    const opts = column.colOptions ? column.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || [] : []
+  if (column?.value.colOptions) {
+    const opts = column.value.colOptions
+      ? column.value.colOptions.options.filter((el: SelectOptionType) => el.title !== '') || []
+      : []
     for (const op of opts.filter((el: SelectOptionType) => el.order === null)) {
       op.title = op.title.replace(/^'/, '').replace(/'$/, '')
     }

From 8179de6f84096d221310814b4b9a24788675ab46 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Tue, 9 Aug 2022 22:45:15 +0300
Subject: [PATCH 28/76] fix(gui-v2): pr suggested changes

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

diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 795f9003b7..b8d7f78dc2 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
+import type { Select as AntSelect } from 'ant-design-vue'
+import type { SelectOptionType } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
 import { ActiveCellInj, ColumnInj } from '~/context'
 import MdiCloseCircle from '~icons/mdi/close-circle'
@@ -20,7 +21,7 @@ const column = inject(ColumnInj)
 const active = inject(ActiveCellInj, ref(false))
 
 const selectedIds = ref<string[]>([])
-const aselect = ref<any>(null)
+const aselect = ref<typeof AntSelect>()
 const isOpen = ref(false)
 
 const options = computed(() => {
@@ -58,7 +59,7 @@ const selectedTitles = computed(() =>
     : [],
 )
 
-const handleKeys = (e: any) => {
+const handleKeys = (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Escape':
       e.preventDefault()
@@ -70,12 +71,9 @@ const handleKeys = (e: any) => {
   }
 }
 
-const handleClose = (e: any) => {
-  if (aselect.value) {
-    const selectClick = aselect.value.$el.contains(e.target)
-    if (!selectClick) {
-      isOpen.value = false
-    }
+const handleClose = (e: MouseEvent) => {
+  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
   }
 }
 
@@ -83,12 +81,9 @@ onMounted(() => {
   selectedIds.value = selectedTitles.value.map((el) => {
     return options.value.find((op: SelectOptionType) => op.title === el).id
   })
-  document.addEventListener('click', handleClose)
 })
 
-onUnmounted(() => {
-  document.removeEventListener('click', handleClose)
-})
+useEventListener(document, 'click', handleClose)
 
 watch(
   () => modelValue,
@@ -99,14 +94,11 @@ watch(
   },
 )
 
-watch(
-  () => isOpen.value,
-  (n, _o) => {
-    if (n === false) {
-      aselect.value.blur()
-    }
-  },
-)
+watch(isOpen, (n, _o) => {
+  if (n === false) {
+    aselect.value.blur()
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 94bb62efa3..598b1f584e 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { SelectOptionType } from '~~/../nocodb-sdk/build/main/index.js'
+import type { Select as AntSelect } from 'ant-design-vue'
+import type { SelectOptionType } from 'nocodb-sdk'
 import { computed, inject } from '#imports'
 import { ActiveCellInj, ColumnInj } from '~/context'
 
@@ -16,7 +17,7 @@ const column = inject(ColumnInj)
 // const editEnabled = inject(EditModeInj, ref(false))
 const active = inject(ActiveCellInj, ref(false))
 
-const aselect = ref<any>(null)
+const aselect = ref<typeof AntSelect>()
 const isOpen = ref(false)
 
 const vModel = computed({
@@ -37,7 +38,7 @@ const options = computed(() => {
   return []
 })
 
-const handleKeys = (e: any) => {
+const handleKeys = (e: KeyboardEvent) => {
   switch (e.key) {
     case 'Escape':
       e.preventDefault()
@@ -46,32 +47,20 @@ const handleKeys = (e: any) => {
   }
 }
 
-const handleClose = (e: any) => {
-  if (aselect.value) {
-    const selectClick = aselect.value.$el.contains(e.target)
-    if (!selectClick) {
-      isOpen.value = false
-      aselect.value.blur()
-    }
+const handleClose = (e: MouseEvent) => {
+  if (aselect.value && !aselect.value.$el.contains(e.target)) {
+    isOpen.value = false
+    aselect.value.blur()
   }
 }
 
-onMounted(() => {
-  document.addEventListener('click', handleClose)
-})
+useEventListener(document, 'click', handleClose)
 
-onUnmounted(() => {
-  document.removeEventListener('click', handleClose)
+watch(isOpen, (n, _o) => {
+  if (n === false) {
+    aselect.value.blur()
+  }
 })
-
-watch(
-  () => isOpen.value,
-  (n, _o) => {
-    if (n === false) {
-      aselect.value.blur()
-    }
-  },
-)
 </script>
 
 <template>

From 611b460e49bbd85df2f5410f717be72db9c48294 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 09:47:26 +0300
Subject: [PATCH 29/76] fix(gui-v2): remove onClickOutside call for edit column
 menu

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index 72ad5ac11f..c990f2d5ae 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -56,12 +56,6 @@ function onVisibleChange() {
   // by clicking cancel button
   editColumnDropdown.value = true
 }
-
-const editOrAddCard = ref()
-
-onClickOutside(editOrAddCard, () => {
-  editColumnDropdown.value = false
-})
 </script>
 
 <template>
@@ -69,7 +63,6 @@ onClickOutside(editOrAddCard, () => {
     <span />
     <template #overlay>
       <SmartsheetColumnEditOrAdd
-        ref="editOrAddCard"
         :edit-column-dropdown="editColumnDropdown"
         @click.stop
         @keydown.stop

From 4a163772fb3d122cbe2e66ee34f2bea12fb4f697 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 10:05:17 +0300
Subject: [PATCH 30/76] feat(gui-v2): ColorPicker improved

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/general/ColorPicker.vue        | 32 ++++++++++++++-----
 .../smartsheet-column/CheckboxOptions.vue     |  2 +-
 .../smartsheet-column/RatingOptions.vue       |  2 +-
 .../smartsheet-column/SelectOptions.vue       |  2 +-
 4 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/packages/nc-gui-v2/components/general/ColorPicker.vue b/packages/nc-gui-v2/components/general/ColorPicker.vue
index 44300663d8..c319f83299 100644
--- a/packages/nc-gui-v2/components/general/ColorPicker.vue
+++ b/packages/nc-gui-v2/components/general/ColorPicker.vue
@@ -3,10 +3,11 @@ import { Chrome } from '@ckpack/vue-color'
 import { enumColor } from '@/utils'
 
 interface Props {
-  modelValue: String
-  colors?: String[]
+  modelValue: string | any
+  colors?: string[]
   rowSize?: number
   advanced?: Boolean
+  pickButton?: Boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -14,14 +15,21 @@ const props = withDefaults(defineProps<Props>(), {
   colors: () => enumColor.light.concat(enumColor.dark),
   rowSize: () => 10,
   advanced: () => true,
+  pickButton: () => false,
 })
 
 const emit = defineEmits(['update:modelValue'])
-const vModel = useVModel(props, 'modelValue', emit)
+
+const vModel = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit('update:modelValue', val.hex ? val.hex : val || null)
+  },
+})
 
 const picked = ref(props.modelValue || enumColor.light[0])
 
-const select = (color: any) => {
+const selectColor = (color: any) => {
   picked.value = color.hex ? color.hex : color
   vModel.value = color.hex ? color.hex : color
 }
@@ -32,6 +40,12 @@ const compare = (colorA: String, colorB: String) => {
   }
   return false
 }
+
+watch(picked, (n, _o) => {
+  if (!props.pickButton) {
+    vModel.value = n.hex ? n.hex : n
+  }
+})
 </script>
 
 <template>
@@ -43,17 +57,19 @@ const compare = (colorA: String, colorB: String) => {
         class="color-selector"
         :class="compare(picked, color) ? 'selected' : ''"
         :style="{ 'background-color': `${color}` }"
-        @click="select(color)"
+        @click="selectColor(color)"
       >
         {{ compare(picked, color) ? '&#10003;' : '' }}
       </button>
     </div>
-    <a-card v-if="props.advanced" class="w-full shadow-lg mt-2" :body-style="{ padding: '0px' }">
+    <a-card v-if="props.advanced" class="w-full mt-2" :body-style="{ padding: '0px' }" :bordered="false">
       <a-collapse accordion ghost expand-icon-position="right">
         <a-collapse-panel key="1" header="Advanced" class="">
-          <a-button class="!bg-primary text-white w-full" @click="select(picked)"> Pick Color </a-button>
+          <a-button v-if="props.pickButton" class="!bg-primary text-white w-full" @click="selectColor(picked)">
+            Pick Color
+          </a-button>
           <div class="flex justify-center py-4">
-            <Chrome v-model="picked" />
+            <Chrome v-model="picked" class="!w-full !shadow-none" />
           </div>
         </a-collapse-panel>
       </a-collapse>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
index 2c73e40594..3a14c76172 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/CheckboxOptions.vue
@@ -93,7 +93,7 @@ watch(
       </a-form-item>
     </a-col>
   </a-row>
-  <a-row>
+  <a-row class="w-full justify-center">
     <GeneralColorPicker
       v-model="picked"
       :row-size="8"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
index c9aebc4042..95d3c22668 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/RatingOptions.vue
@@ -96,7 +96,7 @@ watch(
       </a-form-item>
     </a-col>
   </a-row>
-  <a-row>
+  <a-row class="w-full justify-center">
     <GeneralColorPicker
       v-model="picked"
       :row-size="8"
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
index a81984c94b..2b7d9db678 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -84,7 +84,7 @@ onMounted(() => {
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
           <a-dropdown v-model:visible="colorMenus[index]" :trigger="['click']">
             <template #overlay>
-              <GeneralColorPicker v-model="element.color" @update:model-value="colorMenus[index] = false" />
+              <GeneralColorPicker v-model="element.color" :pick-button="true" @update:model-value="colorMenus[index] = false" />
             </template>
             <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
           </a-dropdown>

From dc16eaee2b979aa6aedc0982a71120b279389ed9 Mon Sep 17 00:00:00 2001
From: mertmit <mertmit99@gmail.com>
Date: Wed, 10 Aug 2022 10:51:31 +0300
Subject: [PATCH 31/76] feat(gui-v2): focus new added option on select options

Signed-off-by: mertmit <mertmit99@gmail.com>
---
 .../components/smartsheet-column/SelectOptions.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
index 2b7d9db678..ce37a76836 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -8,16 +8,17 @@ import MdiArrowDownDropCircle from '~icons/mdi/arrow-down-drop-circle'
 import MdiClose from '~icons/mdi/close'
 import MdiPlusIcon from '~icons/mdi/plus'
 
-const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter } = useColumnCreateStoreOrThrow()
+const { formState, setAdditionalValidations } = useColumnCreateStoreOrThrow()
 
 let options = $ref<any[]>([])
 const colorMenus = $ref<any>({})
 const colors = $ref(enumColor.light)
+const inputs = ref()
 
 const validators = {
   'colOptions.options': [
     {
-      validator: (_: any, opt: any) => {
+      validator: (_: any, _opt: any) => {
         return new Promise<void>((resolve, reject) => {
           for (const opt of options) {
             if (!opt.title.length) {
@@ -74,6 +75,13 @@ onMounted(() => {
     op.title = op.title.replace(/^'/, '').replace(/'$/, '')
   }
 })
+
+// focus last created input
+watch(inputs, () => {
+  if (inputs.value?.$el) {
+    inputs.value.$el.focus()
+  }
+})
 </script>
 
 <template>
@@ -88,7 +96,7 @@ onMounted(() => {
             </template>
             <MdiArrowDownDropCircle :style="{ 'font-size': '1.5em', 'color': element.color }" class="mr-2" />
           </a-dropdown>
-          <a-input v-model:value="element.title" class="caption" />
+          <a-input ref="inputs" v-model:value="element.title" class="caption" />
           <MdiClose class="ml-2" :style="{ color: 'red' }" @click="removeOption(index)" />
         </div>
       </template>

From 168c2b5cc839ab74fb74ea618f4fb57c73db700c Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:49:59 +0530
Subject: [PATCH 32/76] test: cy marker for home logo

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 packages/nc-gui-v2/components/general/MiniSidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/general/MiniSidebar.vue b/packages/nc-gui-v2/components/general/MiniSidebar.vue
index 48cd9416c5..9034f44756 100644
--- a/packages/nc-gui-v2/components/general/MiniSidebar.vue
+++ b/packages/nc-gui-v2/components/general/MiniSidebar.vue
@@ -29,7 +29,7 @@ const logout = () => {
     theme="light"
   >
     <a-dropdown placement="bottom" :trigger="['click']">
-      <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105">
+      <div class="transition-all duration-200 p-2 cursor-pointer transform hover:scale-105 nc-noco-brand-icon">
         <img width="35" alt="NocoDB" src="~/assets/img/icons/512x512-trans.png" />
       </div>
 

From ee8330ab03d3fd99d5c0a0a9ae1e46d71b5e6fd9 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 10:42:09 +0200
Subject: [PATCH 33/76] chore(gui-v2): remove `group` class from `tr`

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 1f7e48bed6..9b225dbade 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -304,7 +304,7 @@ const onNavigate = (dir: NavigateDir) => {
             </tr>
           </thead>
           <tbody>
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row group">
+            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
               <td key="row-index" class="caption nc-grid-cell group">
                 <div class="flex items-center w-[80px]">
                   <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>

From d3be38d26d4ac22abc2b8e687152d26b62470f74 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 10:47:40 +0200
Subject: [PATCH 34/76] chore(gui-v2): use overflow-auto

---
 packages/nc-gui-v2/components/cell/attachment/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index 3390e9dc57..dc54d4ce9c 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -57,6 +57,7 @@ onKeyDown('Escape', () => {
 onMounted(() => {
   if (typeof document !== 'undefined') {
     dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement
+    console.log(dropZoneRef.value)
   }
 })
 </script>
@@ -99,7 +100,7 @@ onMounted(() => {
       <div
         ref="sortableRef"
         :class="{ dragging }"
-        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-scroll"
+        class="flex justify-center items-center flex-wrap gap-2 p-1 scrollbar-thin-dull max-h-[150px] overflow-auto"
       >
         <div
           v-for="(item, i) of visibleItems"

From c9fa55d0425f235e92a0b753a8a313e1a1c78d9e Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 10 Aug 2022 17:00:28 +0800
Subject: [PATCH 35/76] fix(gui-v2): reset wordToComplete value and change
 ribbon color

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 7a027955e3..97f0d35d13 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -519,6 +519,7 @@ function appendText(item: Record<string, any>) {
     formState.value.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
+  wordToComplete.value = ''
   if (item.type === 'function' || item.type === 'op') {
     // if function / operator is chosen, display columns only
     suggestion.value = suggestionsList.value.filter((f) => f.type === 'column')
@@ -658,7 +659,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
-                      <a-badge-ribbon :text="item.uidt" />
+                      <a-badge-ribbon :text="item.uidt" color="gray"/>
                     </div>
                   </a-col>
                 </div>

From 00e592c496ac72dbb943449026c04258b8f6b2e5 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:30:49 +0200
Subject: [PATCH 36/76] feat(gui-v2): add cell refs to smartsheet store

---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 23 +++++++++++++++++--
 .../composables/useSmartsheetStore.ts         | 10 ++++----
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 9b225dbade..7fe40b93db 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -7,10 +7,14 @@ import {
   inject,
   onMounted,
   provide,
+  reactive,
+  ref,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
   useSmartsheetStoreOrThrow,
+  useTemplateRefsList,
   useViewData,
+  watch,
 } from '#imports'
 import type { Row } from '~/composables'
 import {
@@ -27,20 +31,32 @@ import {
 import { NavigateDir } from '~/lib'
 
 const meta = inject(MetaInj)
+
 const view = inject(ActiveViewInj)
+
 // 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 isLocked = inject(IsLockedInj, false)
+
+const reloadViewDataHook = inject(ReloadViewDataHookInj)
+
 // 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 })
+
 let editEnabled = $ref(false)
-const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
+
+const { xWhere, isPkAvail, cellRefs } = useSmartsheetStoreOrThrow()
+
 const addColumnDropdown = ref(false)
+
 const contextMenu = ref(false)
+
 const contextMenuTarget = ref(false)
 
 const visibleColLength = $computed(() => fields.value?.length)
@@ -56,7 +72,9 @@ const {
   deleteSelectedRows,
   selectedAllRecords,
 } = useViewData(meta, view as any, xWhere)
+
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
+
 onMounted(loadGridViewColumns)
 
 provide(IsFormInj, false)
@@ -64,7 +82,6 @@ provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-const reloadViewDataHook = inject(ReloadViewDataHookInj)
 reloadViewDataHook?.on(() => {
   loadData()
 })
@@ -87,6 +104,7 @@ watch(
 const onresize = (colID: string, event: any) => {
   updateWidth(colID, event.detail)
 }
+
 const onXcResizing = (cn: string, event: any) => {
   resizingCol.value = cn
   resizingColWidth.value = event.detail
@@ -322,6 +340,7 @@ const onNavigate = (dir: NavigateDir) => {
               </td>
               <td
                 v-for="(columnObj, colIndex) of fields"
+                :ref="cellRefs.set"
                 :key="rowIndex + columnObj.title"
                 class="cell relative cursor-pointer nc-grid-cell"
                 :class="{
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 87f999c6f5..f75856e3c6 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,15 +1,14 @@
-import { computed } from '@vue/reactivity'
 import { ViewTypes } from 'nocodb-sdk'
 import type { TableType, ViewType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { useNuxtApp } from '#app'
-import { useProject } from '#imports'
-import { useInjectionState } from '~/composables/useInjectionState'
+import { computed, reactive, useInjectionState, useNuxtApp, useProject, useTemplateRefsList } from '#imports'
 
 const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
   const { sqlUi } = useProject()
 
+  const cellRefs = useTemplateRefsList<HTMLTableDataCellElement>()
+
   // state
   // todo: move to grid view store
   const search = reactive({
@@ -37,8 +36,6 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     return where
   })
 
-  // actions
-
   return {
     view,
     meta,
@@ -50,6 +47,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view:
     isForm,
     isGrid,
     isGallery,
+    cellRefs,
   }
 }, 'smartsheet-store')
 

From 727b3c59a7d3dff8dec25e1bee997a49d7bfc7de Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 13:31:10 +0200
Subject: [PATCH 37/76] fix(gui-v2): use cellRef for dropzone and teleport

---
 .../components/cell/attachment/index.vue      | 24 +++++++------------
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  6 ++---
 2 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/attachment/index.vue b/packages/nc-gui-v2/components/cell/attachment/index.vue
index dc54d4ce9c..1cd3324173 100644
--- a/packages/nc-gui-v2/components/cell/attachment/index.vue
+++ b/packages/nc-gui-v2/components/cell/attachment/index.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { onKeyDown } from '@vueuse/core'
 import { useProvideAttachmentCell } from './utils'
-import Modal from './Modal.vue'
 import { useSortable } from './sort'
+import Modal from './Modal.vue'
 import Carousel from './Carousel.vue'
-import { onMounted, ref, useDropZone, watch } from '#imports'
+import { computed, ref, useDropZone, useSmartsheetStoreOrThrow, watch } from '#imports'
 import { isImage, openLink } from '~/utils'
 
 interface Props {
@@ -20,16 +20,18 @@ const { modelValue, rowIndex } = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const dropZoneRef = ref<HTMLTableDataCellElement>()
-
 const sortableRef = ref<HTMLDivElement>()
 
+const { cellRefs } = useSmartsheetStoreOrThrow()!
+
 const { column, modalVisible, attachments, visibleItems, onDrop, isLoading, open, FileIcon, selectedImage, isReadonly } =
   useProvideAttachmentCell(updateModelValue)
 
+const currentCellRef = computed(() => cellRefs.value.find((cell) => cell.dataset.key === `${rowIndex}${column.value.id}`))
+
 const { dragging } = useSortable(sortableRef, visibleItems, updateModelValue, isReadonly)
 
-const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+const { isOverDropZone } = useDropZone(currentCellRef, onDrop)
 
 /** on new value, reparse our stored attachments */
 watch(
@@ -52,25 +54,17 @@ onKeyDown('Escape', () => {
   modalVisible.value = false
   isOverDropZone.value = false
 })
-
-/** if possible, on mounted we try to fetch the relevant `td` cell to use as a dropzone */
-onMounted(() => {
-  if (typeof document !== 'undefined') {
-    dropZoneRef.value = document.querySelector(`td[data-key="${rowIndex}${column.value.id}"]`) as HTMLTableDataCellElement
-    console.log(dropZoneRef.value)
-  }
-})
 </script>
 
 <template>
   <div class="nc-attachment-cell relative flex-1 color-transition flex items-center justify-between gap-1">
     <Carousel />
 
-    <template v-if="!isReadonly && !dragging && dropZoneRef">
+    <template v-if="!isReadonly && !dragging && !!currentCellRef">
       <general-overlay
         v-model="isOverDropZone"
         inline
-        :target="`td[data-key='${rowIndex}${column.id}']`"
+        :target="currentCellRef"
         class="text-white text-lg ring ring-pink-500 bg-gray-700/75 flex items-center justify-center gap-2 backdrop-blur-xl"
       >
         <MaterialSymbolsFileCopyOutline class="text-pink-500" /> Drop here
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 7fe40b93db..6a9f3807c7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,18 +1,18 @@
 <script lang="ts" setup>
-import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
+  onClickOutside,
   onMounted,
   provide,
   reactive,
   ref,
+  useEventListener,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
   useSmartsheetStoreOrThrow,
-  useTemplateRefsList,
   useViewData,
   watch,
 } from '#imports'
@@ -341,7 +341,7 @@ const onNavigate = (dir: NavigateDir) => {
               <td
                 v-for="(columnObj, colIndex) of fields"
                 :ref="cellRefs.set"
-                :key="rowIndex + columnObj.title"
+                :key="columnObj.id"
                 class="cell relative cursor-pointer nc-grid-cell"
                 :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,

From b145eaeff830ddba9ce94b22be3c7e9bac29423f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 16:08:27 +0530
Subject: [PATCH 38/76] wip(gui-v2): expanded form view modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/ExpandedForm.vue    | 87 +++++++++++++++++++
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  7 +-
 2 files changed, 93 insertions(+), 1 deletion(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue

diff --git a/packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue b/packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue
new file mode 100644
index 0000000000..06370bd0ae
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { isVirtualCol } from 'nocodb-sdk'
+import { useVModel } from '@vueuse/core'
+import { computed, provide } from 'vue'
+import type { Row } from '~/composables'
+import { FieldsInj, IsFormInj, MetaInj } from '~/context'
+import MdiDoorOpen from '~icons/mdi/door-open'
+import MdiDoorClosed from '~icons/mdi/door-closed'
+
+interface Props {
+  modelValue: string | null
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits(['update:modelValue'])
+const fields = inject(FieldsInj, ref([]))
+const meta = inject(MetaInj)
+
+provide(IsFormInj, true)
+
+// accept as a prop
+const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+
+const commentsDrawer = ref(false)
+
+const isExpanded = useVModel(props, 'modelValue', emits)
+
+const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+</script>
+
+<template>
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" body-style="padding:0" :closable="false">
+    <div class="flex p-2">
+      <div class="flex-grow" />
+      <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    </div>
+    <a-card class="!bg-gray-100">
+      <div class="flex">
+        <div class="flex-grow">
+          <div class="h-550px overflow-auto w-[500px] mx-auto">
+            <div v-for="col in fields" :key="col.title" class="mt-2">
+              <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">
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" />
+                <SmartsheetCell
+                  v-else
+                  v-model="row.row[col.title]"
+                  :column="col"
+                  :edit-enabled="true"
+                  @update:edit-enabled="editEnabled = false"
+                  @cancel="editEnabled = false"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
+          <div class="w-[250px]">
+            dsdsssdsdsdd
+          </div>
+        </div>
+      </div>
+    </a-card>
+  </a-modal>
+</template>
+
+<style scoped lang="scss">
+:deep(input, select, textarea) {
+  @apply !bg-white;
+}
+
+:deep(.ant-modal-body) {
+  @apply !bg-gray-100
+}
+
+.nc-comments-drawer {
+  @apply w-0 transition-width ease-in-out duration-200;
+  overflow: hidden;
+
+  &.active {
+    @apply w-[250px] border-left-1;
+  }
+}
+</style>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index f5a6d52b4b..3b1a67a2de 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -58,6 +58,7 @@ const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 
 const contextMenuTarget = ref(false)
+const expandedFormDlg = ref(false)
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -333,7 +334,10 @@ const onNavigate = (dir: NavigateDir) => {
                     <a-checkbox v-model:checked="row.rowMeta.selected" />
                     <span class="flex-1" />
                     <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                      <MdiArrowExpand class="select-none transform hover:(text-pink-500 scale-120)" />
+                      <MdiArrowExpand
+                        class="select-none transform hover:(text-pink-500 scale-120)"
+                        @click="expandedFormDlg = true"
+                      />
                     </div>
                   </div>
                 </div>
@@ -415,6 +419,7 @@ const onNavigate = (dir: NavigateDir) => {
     </div>
 
     <SmartsheetPagination />
+    <SmartsheetExpandedForm v-model="expandedFormDlg" />
   </div>
 </template>
 

From e991193a5572e25ac24883fb91fa48070d9fdd1a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 17:34:56 +0530
Subject: [PATCH 39/76] refactor(gui-v2): move component into a folder

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue        | 16 ++++++++++++++++
 .../index.vue}                                   |  6 ++----
 .../composables/useExpandedFormStore.ts          | 16 ++++++++++++++++
 3 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
 rename packages/nc-gui-v2/components/smartsheet/{ExpandedForm.vue => expanded-form/index.vue} (96%)
 create mode 100644 packages/nc-gui-v2/composables/useExpandedFormStore.ts

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
new file mode 100644
index 0000000000..e06d4d5269
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const loadComments = async () => {
+  const data = await this.$api.utils.commentList({
+    row_id: this.meta.columns
+      .filter((c) => c.pk)
+      .map((c) => this.localState[c.title])
+      .join('___'),
+    fk_model_id: this.meta.id,
+    comments_only: this.commentsOnly,
+  })
+}
+</script>
+
+<template></template>
+
+<style scoped></style>
diff --git a/packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
similarity index 96%
rename from packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue
rename to packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
index 06370bd0ae..0861f503e7 100644
--- a/packages/nc-gui-v2/components/smartsheet/ExpandedForm.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -58,9 +58,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
         </div>
 
         <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
-          <div class="w-[250px]">
-            dsdsssdsdsdd
-          </div>
+          <div class="w-[250px]">dsdsssdsdsdd</div>
         </div>
       </div>
     </a-card>
@@ -73,7 +71,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
 }
 
 :deep(.ant-modal-body) {
-  @apply !bg-gray-100
+  @apply !bg-gray-100;
 }
 
 .nc-comments-drawer {
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
new file mode 100644
index 0000000000..ba557bc712
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -0,0 +1,16 @@
+import { useInjectionState,  } from '#imports'
+
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(() => {
+
+},'expanded-form-store')
+
+
+
+
+export { useProvideExpandedFormStore }
+
+export function useExpandedFormStoreOrThrow() {
+  const expandedFormStore = useExpandedFormStore()
+  if (expandedFormStore == null) throw new Error('Please call `useExpandedFormStore` on the appropriate parent component')
+  return expandedFormStore
+}

From 7b2ee7921b3d887e30f7085900e724a570867e23 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 00:30:21 +0530
Subject: [PATCH 40/76] chore(swagger): type correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 scripts/sdk/swagger.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index f0d7eda0b9..ae0930d643 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -4448,7 +4448,7 @@
                   "fk_model_id": {
                     "type": "string"
                   },
-                  "comment": {
+                  "description": {
                     "type": "string"
                   }
                 },

From d4fb7a2ec71213f6d471ee68c6082b756db8b75b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 01:07:34 +0530
Subject: [PATCH 41/76] feat(gui-v2): add comments

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   8 +-
 .../smartsheet/expanded-form/Comments.vue     | 103 ++++++++++++++++--
 .../smartsheet/expanded-form/index.vue        |  18 ++-
 packages/nc-gui-v2/composables/index.ts       |   1 +
 .../composables/useExpandedFormStore.ts       |  65 ++++++++++-
 packages/nc-gui-v2/utils/dataUtils.ts         |   8 ++
 packages/nc-gui-v2/utils/index.ts             |   1 +
 packages/nocodb-sdk/src/lib/Api.ts            |   2 +-
 8 files changed, 186 insertions(+), 20 deletions(-)
 create mode 100644 packages/nc-gui-v2/utils/dataUtils.ts

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 3b1a67a2de..d342221f36 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -59,6 +59,7 @@ const contextMenu = ref(false)
 
 const contextMenuTarget = ref(false)
 const expandedFormDlg = ref(false)
+const expandedFormRow = ref<Row>()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -272,6 +273,11 @@ const onNavigate = (dir: NavigateDir) => {
       break
   }
 }
+
+const expandForm = (row: Row) => {
+  expandedFormRow.value = row
+  expandedFormDlg.value = true
+}
 </script>
 
 <template>
@@ -419,7 +425,7 @@ const onNavigate = (dir: NavigateDir) => {
     </div>
 
     <SmartsheetPagination />
-    <SmartsheetExpandedForm v-model="expandedFormDlg" />
+    <SmartsheetExpandedForm v-if="expandedFormRow" v-model="expandedFormDlg" :row="expandedFormRow" />
   </div>
 </template>
 
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 e06d4d5269..8ad66c7dcc 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,16 +1,97 @@
 <script setup lang="ts">
-const loadComments = async () => {
-  const data = await this.$api.utils.commentList({
-    row_id: this.meta.columns
-      .filter((c) => c.pk)
-      .map((c) => this.localState[c.title])
-      .join('___'),
-    fk_model_id: this.meta.id,
-    comments_only: this.commentsOnly,
-  })
-}
+import { useExpandedFormStoreOrThrow } from '#imports'
+import { timeAgo } from '~/utils'
+import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
+import MdiAccountIcon from '~icons/mdi/account-circle'
+import {colors}
+
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow()
+
+await loadCommentsAndLogs()
 </script>
 
-<template></template>
+<template>
+  <div>
+    <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
+
+    <div v-else class="blue-grey">
+      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
+
+
+        <MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/>
+
+        <p class="mb-1 caption edited-text">
+          {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
+          {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+        </p>
+<!--        :style="{ background: colors[2] }" -->
+                 <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" >
+        {{ log.description }}
+      </p>
+
+        <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+
+        <p class="time text-right text-[10px] mb-0">
+          {{ timeAgo(log.created_at) }}
+        </p>
+        </div>
+<!--      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
+        &lt;!&ndash;          <v-list-item-icon class="ma-0 mr-2">
+            <v-icon :color="isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'">
+              mdi-account-circle
+            </v-icon>
+          </v-list-item-icon> &ndash;&gt;
+        <div class="flex-grow-1" style="min-width: 0">
+          <p class="mb-1 caption edited-text">
+            {{ // isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
+            {{ // log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+          </p>
+          &lt;!&ndash;          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" :style="{ background: colors[2] }">
+            {{ log.description }}
+          </p>
+
+          <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+
+          <p class="time text-right mb-0">
+            {{ timeAgo(log.created_at) }}
+          </p> &ndash;&gt;
+        </div>
+      </div>-->
+    </div>
+    <!--  </div> -->
+
+    <!--  <v-spacer />
+  <v-divider />
+  <div class="d-flex align-center justify-center">
+    <v-switch
+      v-model="commentsOnly"
+      v-t="['c:row-expand:comment-only']"
+      class="mt-1"
+      dense
+      hide-details
+      @change="getAuditsAndComments"
+    >
+      <template #label>
+        <span class="caption grey&#45;&#45;text">Comments only</span>
+      </template>
+    </v-switch>
+  </div> -->
+      <div class="flex-shrink-1 mt-2 d-flex pl-4">
+    <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle </v-icon>
+    <a-input
+      v-model="comment"
+      class="caption comment-box"
+      :class="{ focus: showborder }"
+      @focusin="showborder = true"
+      @focusout="showborder = false"
+      @keyup.enter.prevent="saveComment"
+    >
+      <template v-if="comment" #addonAfter>
+        <MdiKeyboardReturnIcon class="text-sm" small @click="saveComment" />
+      </template>
+    </a-input>
+  </div>
+  </div>
+</template>
 
 <style scoped></style>
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 0861f503e7..f14b08cd00 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,33 @@
 <script setup lang="ts">
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
-import { computed, provide } from 'vue'
+import { Ref, computed, provide, toRef } from 'vue'
+import Comments from '~/components/smartsheet/expanded-form/Comments.vue'
+import { useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
+import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
 interface Props {
   modelValue: string | null
+  row: Row
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
 const fields = inject(FieldsInj, ref([]))
-const meta = inject(MetaInj)
+const row = toRef(props, 'row')
+
+const { meta } = useSmartsheetStoreOrThrow()
 
 provide(IsFormInj, true)
 
 // accept as a prop
-const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+// const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
+
+const { loadComments } = useProvideExpandedFormStore(meta, row)
 
 const commentsDrawer = ref(false)
 
@@ -58,7 +66,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
         </div>
 
         <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
-          <div class="w-[250px]">dsdsssdsdsdd</div>
+          <div class="w-[250px]">
+            <Comments />
+          </div>
         </div>
       </div>
     </a-card>
diff --git a/packages/nc-gui-v2/composables/index.ts b/packages/nc-gui-v2/composables/index.ts
index 6ab481b787..b8a5c6339d 100644
--- a/packages/nc-gui-v2/composables/index.ts
+++ b/packages/nc-gui-v2/composables/index.ts
@@ -20,3 +20,4 @@ export * from './useVirtualCell'
 export * from './useColumnCreateStore'
 export * from './useSmartsheetStore'
 export * from './useLTARStore'
+export * from './useExpandedFormStore'
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index ba557bc712..d56285c73f 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -1,12 +1,71 @@
-import { useInjectionState,  } from '#imports'
+import { useNuxtApp } from '#app'
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useInjectionState } from '#imports'
+import { useApi } from '~/composables/useApi'
+import { extractPkFromRow } from '~/utils'
+import { message } from 'ant-design-vue'
 
-const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(() => {
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
+  (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
+    const { $e, $state } = useNuxtApp()
+    const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
+    // { useGlobalInstance: true },
+    const commentsOnly = ref(false)
+    const commentsAndLogs = ref([])
+    const comment = ref('')
 
-},'expanded-form-store')
+    const loadCommentsAndLogs = async () => {
+      if (!row.value) return
+      const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+      if (!rowId) return
+      commentsAndLogs.value = await api.utils.commentList({
+        row_id: rowId,
+        fk_model_id: meta.value.id as string,
+        comments_only: commentsOnly.value,
+      })
+    }
 
+    const  isYou = (email) => {
+      return $state.user?.value?.email === email;
+    }
 
+    const saveComment = async () => {
+      try {
 
 
+        if (!row.value) return
+        const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+        if (!rowId) return
+
+        await api.utils.commentRow({
+          fk_model_id: meta.value?.id as string,
+          row_id: rowId,
+          description: comment.value,
+        })
+
+        comment.value = ''
+        message.success('Comment added successfully')
+        await loadCommentsAndLogs()
+      } catch (e) {
+        message.error(e.message)
+      }
+
+      $e('a:row-expand:comment')
+    }
+    return {
+      commentsOnly,
+      loadCommentsAndLogs,
+      commentsAndLogs,
+      isCommentsLoading,
+      commentsError,
+      saveComment,
+      comment,isYou
+    }
+  },
+  'expanded-form-store',
+)
+
 export { useProvideExpandedFormStore }
 
 export function useExpandedFormStoreOrThrow() {
diff --git a/packages/nc-gui-v2/utils/dataUtils.ts b/packages/nc-gui-v2/utils/dataUtils.ts
new file mode 100644
index 0000000000..14e7e0db6f
--- /dev/null
+++ b/packages/nc-gui-v2/utils/dataUtils.ts
@@ -0,0 +1,8 @@
+import type { ColumnType } from 'nocodb-sdk'
+
+export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
+  return columns
+    ?.filter((c) => c.pk)
+    .map((c) => row?.[c.title as string])
+    .join('___')
+}
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index 67d87f9119..b133011efe 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -15,3 +15,4 @@ export * from './columnUtils'
 export * from './validation'
 export * from './viewUtils'
 export * from './currencyUtils'
+export * from './dataUtils'
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index fe836437d6..f8ff88bfb5 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -3111,7 +3111,7 @@ export class Api<
      * @response `200` `void` OK
      */
     commentRow: (
-      data: { row_id: string; fk_model_id: string; comment: string },
+      data: { row_id: string; fk_model_id: string; description?: string },
       params: RequestParams = {}
     ) =>
       this.request<void, any>({

From d0537ee5660d7c7d7e259ab875643eb9f2e0dd37 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 01:52:23 +0530
Subject: [PATCH 42/76] feat(gui-v2): comment styling and functionality

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue     | 115 +++++++-----------
 .../smartsheet/expanded-form/index.vue        |   8 +-
 .../composables/useExpandedFormStore.ts       |   6 +-
 packages/nc-gui-v2/package.json               |   1 +
 packages/nc-gui-v2/plugins/domPurify.ts       |   7 ++
 .../spreadsheet/components/ExpandedForm.vue   |   1 +
 6 files changed, 63 insertions(+), 75 deletions(-)
 create mode 100644 packages/nc-gui-v2/plugins/domPurify.ts

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 8ad66c7dcc..ac91a28c5e 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -3,9 +3,17 @@ import { useExpandedFormStoreOrThrow } from '#imports'
 import { timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
-import {colors}
+import { enumColor } from '~/utils'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment,isYou } = useExpandedFormStoreOrThrow()
+const {
+  loadCommentsAndLogs,
+  commentsAndLogs,
+  isCommentsLoading,
+  commentsOnly,
+  saveComment,
+  isYou,
+  comment,
+} = useExpandedFormStoreOrThrow()
 
 await loadCommentsAndLogs()
 </script>
@@ -15,83 +23,54 @@ await loadCommentsAndLogs()
     <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
     <div v-else class="blue-grey">
-      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
+      <div v-for="log of commentsAndLogs" :key="log.id" class="flex gap-1 text-xs">
 
 
-        <MdiAccountIcon :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"/>
-
-        <p class="mb-1 caption edited-text">
-          {{ isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
-          {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
-        </p>
-<!--        :style="{ background: colors[2] }" -->
-                 <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" >
-        {{ log.description }}
-      </p>
-
-        <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
-
-        <p class="time text-right text-[10px] mb-0">
-          {{ timeAgo(log.created_at) }}
-        </p>
-        </div>
-<!--      <div v-for="log of commentsAndLogs" :key="log.id" class="d-flex">
-        &lt;!&ndash;          <v-list-item-icon class="ma-0 mr-2">
-            <v-icon :color="isYou(log.user) ? 'pink lighten-2' : 'blue lighten-2'">
-              mdi-account-circle
-            </v-icon>
-          </v-list-item-icon> &ndash;&gt;
-        <div class="flex-grow-1" style="min-width: 0">
-          <p class="mb-1 caption edited-text">
-            {{ // isYou(log.user) ? 'You' : log.user == null ? 'Shared base' : log.user }}
-            {{ // log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+        <MdiAccountIcon 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 }}
+            {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
           </p>
-          &lt;!&ndash;          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip" :style="{ background: colors[2] }">
+          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip w-full min-h-20px"
+             :style="{ backgroundColor: enumColor.light[2] }">
             {{ log.description }}
           </p>
 
           <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
 
-          <p class="time text-right mb-0">
+          <p class="time text-right text-[10px] mb-0">
             {{ timeAgo(log.created_at) }}
-          </p> &ndash;&gt;
+          </p>
         </div>
-      </div>-->
+      </div>
+    </div>
+    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"><span class="text-xs">Comments only</span>
+    </a-checkbox>
+    <div class="flex-shrink-1 mt-2 d-flex pl-4">
+      <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
+      <a-input
+        v-model:value="comment"
+        class="caption comment-box"
+        :class="{ focus: showborder }"
+        @focusin="showborder = true"
+        @focusout="showborder = false"
+        @keyup.enter.prevent="saveComment"
+      >
+        <template #suffix>
+          <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
+        </template>
+      </a-input>
     </div>
-    <!--  </div> -->
-
-    <!--  <v-spacer />
-  <v-divider />
-  <div class="d-flex align-center justify-center">
-    <v-switch
-      v-model="commentsOnly"
-      v-t="['c:row-expand:comment-only']"
-      class="mt-1"
-      dense
-      hide-details
-      @change="getAuditsAndComments"
-    >
-      <template #label>
-        <span class="caption grey&#45;&#45;text">Comments only</span>
-      </template>
-    </v-switch>
-  </div> -->
-      <div class="flex-shrink-1 mt-2 d-flex pl-4">
-    <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle </v-icon>
-    <a-input
-      v-model="comment"
-      class="caption comment-box"
-      :class="{ focus: showborder }"
-      @focusin="showborder = true"
-      @focusout="showborder = false"
-      @keyup.enter.prevent="saveComment"
-    >
-      <template v-if="comment" #addonAfter>
-        <MdiKeyboardReturnIcon class="text-sm" small @click="saveComment" />
-      </template>
-    </a-input>
-  </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+:deep(.red.lighten-4) {
+  @apply bg-red-100
+}
+
+:deep(.green.lighten-4) {
+  @apply bg-green-100
+}
+</style>
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 f14b08cd00..a76ec3cf42 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
 </script>
 
 <template>
-  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" body-style="padding:0" :closable="false">
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{padding:0}" :closable="false">
     <div class="flex p-2">
       <div class="flex-grow" />
       <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@@ -65,9 +65,9 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
           </div>
         </div>
 
-        <div class="nc-comments-drawer min-w-0 h-full" :class="{ active: commentsDrawer }">
-          <div class="w-[250px]">
-            <Comments />
+        <div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
+          <div class="w-[280px]">
+            <Comments v-if="commentsDrawer" />
           </div>
         </div>
       </div>
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index d56285c73f..ed456f831b 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -19,11 +19,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       if (!row.value) return
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
       if (!rowId) return
-      commentsAndLogs.value = await api.utils.commentList({
+      commentsAndLogs.value = (await api.utils.commentList({
         row_id: rowId,
         fk_model_id: meta.value.id as string,
         comments_only: commentsOnly.value,
-      })
+      }))?.reverse?.() || []
     }
 
     const  isYou = (email) => {
@@ -34,7 +34,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       try {
 
 
-        if (!row.value) return
+        if (!row.value || !comment.value) return
         const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
         if (!rowId) return
 
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 56ea93c7ee..9bd7b93ff2 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -26,6 +26,7 @@
     "socket.io-client": "^4.5.1",
     "sortablejs": "^1.15.0",
     "unique-names-generator": "^4.7.1",
+    "vue-dompurify-html": "^3.0.0",
     "url": "^0.11.0",
     "util": "^0.12.4",
     "vue-i18n": "^9.1.10",
diff --git a/packages/nc-gui-v2/plugins/domPurify.ts b/packages/nc-gui-v2/plugins/domPurify.ts
new file mode 100644
index 0000000000..3dd6a6642c
--- /dev/null
+++ b/packages/nc-gui-v2/plugins/domPurify.ts
@@ -0,0 +1,7 @@
+import VueDOMPurifyHTML from 'vue-dompurify-html';
+import { defineNuxtPlugin } from 'nuxt/app'
+
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueDOMPurifyHTML)
+})
diff --git a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
index c7ba552753..757b547d18 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/ExpandedForm.vue
@@ -678,6 +678,7 @@ h5 {
   padding: 8px;
   border-radius: 8px;
 }
+
 </style>
 <!--
 /**

From 3f10da7849454e71c39a28f1b8d7129d2c892f13 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:13:10 +0530
Subject: [PATCH 43/76] feat(gui-v2): hide menu within form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-header/Cell.vue     | 5 +++--
 .../nc-gui-v2/components/smartsheet-header/VirtualCell.vue   | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index b03027765b..90fdef48a7 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -2,7 +2,7 @@
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, toRef } from 'vue'
-import { ColumnInj, MetaInj } from '~/context'
+import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean }>()
@@ -11,6 +11,7 @@ const hideMenu = toRef(props, 'hideMenu')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)
+const isForm = inject(IsFormInj, false)
 
 // instantiate column update store
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
@@ -23,7 +24,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
 
     <template v-if="!hideMenu">
       <div class="flex-1" />
-      <SmartsheetHeaderMenu />
+      <SmartsheetHeaderMenu v-if="!isForm" />
     </template>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 589e9963bf..737f2501b3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -5,7 +5,7 @@ import { toRef } from 'vue'
 import { $computed } from 'vue/macros'
 import type { Ref } from 'vue'
 import { useMetas } from '~/composables'
-import { ColumnInj, MetaInj } from '~/context'
+import { ColumnInj, IsFormInj, MetaInj } from '~/context'
 import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean }>()
@@ -15,6 +15,7 @@ const hideMenu = toRef(props, 'hideMenu')
 provide(ColumnInj, column)
 const { metas } = useMetas()
 const meta = inject(MetaInj)
+const isForm = inject(IsFormInj, false)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)
 
@@ -100,7 +101,7 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
     <template v-if="!hideMenu">
       <v-spacer />
 
-      <SmartsheetHeaderMenu :virtual="true" />
+      <SmartsheetHeaderMenu v-if="!isForm" :virtual="true" />
     </template>
   </div>
 </template>

From d20ccd7f5ae2d365a65346ce3aa166ccfb4e98e0 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:18:28 +0530
Subject: [PATCH 44/76] feat(gui-v2): show LTAR as list view in form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue     | 30 +++++++---------
 .../smartsheet/expanded-form/index.vue        |  9 +++--
 .../components/virtual-cell/HasMany.vue       |  7 +++-
 .../components/ListChildItems.vue             | 17 ++++++---
 .../composables/useExpandedFormStore.ts       | 35 ++++++++++++-------
 packages/nc-gui-v2/plugins/domPurify.ts       |  3 +-
 6 files changed, 60 insertions(+), 41 deletions(-)

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 ac91a28c5e..01f93f2a8a 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,19 +1,11 @@
 <script setup lang="ts">
 import { useExpandedFormStoreOrThrow } from '#imports'
-import { timeAgo } from '~/utils'
+import { enumColor, timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
-import { enumColor } from '~/utils'
 
-const {
-  loadCommentsAndLogs,
-  commentsAndLogs,
-  isCommentsLoading,
-  commentsOnly,
-  saveComment,
-  isYou,
-  comment,
-} = useExpandedFormStoreOrThrow()
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
+  useExpandedFormStoreOrThrow()
 
 await loadCommentsAndLogs()
 </script>
@@ -24,16 +16,17 @@ await loadCommentsAndLogs()
 
     <div v-else class="blue-grey">
       <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 '" />
         <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 }}
             {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
           </p>
-          <p v-if="log.op_type === 'COMMENT'" class="caption mb-0 nc-chip w-full min-h-20px"
-             :style="{ backgroundColor: enumColor.light[2] }">
+          <p
+            v-if="log.op_type === 'COMMENT'"
+            class="caption mb-0 nc-chip w-full min-h-20px"
+            :style="{ backgroundColor: enumColor.light[2] }"
+          >
             {{ log.description }}
           </p>
 
@@ -45,7 +38,8 @@ await loadCommentsAndLogs()
         </div>
       </div>
     </div>
-    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"><span class="text-xs">Comments only</span>
+    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+      ><span class="text-xs">Comments only</span>
     </a-checkbox>
     <div class="flex-shrink-1 mt-2 d-flex pl-4">
       <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
@@ -67,10 +61,10 @@ await loadCommentsAndLogs()
 
 <style scoped>
 :deep(.red.lighten-4) {
-  @apply bg-red-100
+  @apply bg-red-100;
 }
 
 :deep(.green.lighten-4) {
-  @apply bg-green-100
+  @apply bg-green-100;
 }
 </style>
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 a76ec3cf42..9eb4dab0eb 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -37,7 +37,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
 </script>
 
 <template>
-  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{padding:0}" :closable="false">
+  <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <div class="flex p-2">
       <div class="flex-grow" />
       <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
@@ -51,7 +51,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :column="col" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row.row" :column="col" />
                 <SmartsheetCell
                   v-else
                   v-model="row.row[col.title]"
@@ -65,7 +65,10 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
           </div>
         </div>
 
-        <div class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto" :class="{ active: commentsDrawer }">
+        <div
+          class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto"
+          :class="{ active: commentsDrawer }"
+        >
           <div class="w-[280px]">
             <Comments v-if="commentsDrawer" />
           </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 38598dcae0..769055faca 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -7,6 +7,9 @@ import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
+
 const column = inject(ColumnInj)!
 
 const cellValue = inject(CellValueInj)!
@@ -15,6 +18,8 @@ const row = inject(RowInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -42,7 +47,7 @@ const cells = computed(() =>
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
-    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+    <div v-if="!isForm" class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
         <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
 
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 7064741c0a..64002aa5f9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -2,10 +2,10 @@
 import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
-
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
+const isForm = inject(IsFormInj, false)
 
 const {
   childrenList,
@@ -18,8 +18,8 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-watch(vModel, (nextVal) => {
-  if (nextVal) {
+watch([vModel, isForm], (nextVal) => {
+  if (nextVal[0] || nextVal[1]) {
     loadChildrenList()
   }
 })
@@ -29,10 +29,17 @@ const unlinkRow = async (row: Record<string, any>) => {
 
   await loadChildrenList()
 }
+const container = computed(() =>
+  isForm
+    ? h('div', {
+        class: 'w-full p-2',
+      })
+    : Modal,
+)
 </script>
 
 <template>
-  <a-modal v-model:visible="vModel" :footer="null" title="Child list">
+  <component :is="container" v-model:visible="vModel" :footer="null" title="Child list">
     <div class="max-h-[max(calc(100vh_-_300px)_,500px)] flex flex-col">
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
@@ -75,7 +82,7 @@ const unlinkRow = async (row: Record<string, any>) => {
       </template>
       <a-empty v-else class="my-10" />
     </div>
-  </a-modal>
+  </component>
 </template>
 
 <style scoped lang="scss">
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index ed456f831b..ff569c9f2c 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -1,39 +1,49 @@
-import { useNuxtApp } from '#app'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { message } from 'ant-design-vue'
+import { useNuxtApp } from '#app'
 import { useInjectionState } from '#imports'
 import { useApi } from '~/composables/useApi'
+import { useViewData } from '~/composables/useViewData'
+import { ActiveViewInj } from '~/context'
 import { extractPkFromRow } from '~/utils'
-import { message } from 'ant-design-vue'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
   (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
     const { $e, $state } = useNuxtApp()
     const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
     // { useGlobalInstance: true },
+    // state
     const commentsOnly = ref(false)
     const commentsAndLogs = ref([])
     const comment = ref('')
 
+    // todo
+    const activeView = inject(ActiveViewInj)
+
+    const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
+
+    // actions
     const loadCommentsAndLogs = async () => {
       if (!row.value) return
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
       if (!rowId) return
-      commentsAndLogs.value = (await api.utils.commentList({
-        row_id: rowId,
-        fk_model_id: meta.value.id as string,
-        comments_only: commentsOnly.value,
-      }))?.reverse?.() || []
+      commentsAndLogs.value =
+        (
+          await api.utils.commentList({
+            row_id: rowId,
+            fk_model_id: meta.value.id as string,
+            comments_only: commentsOnly.value,
+          })
+        )?.reverse?.() || []
     }
 
-    const  isYou = (email) => {
-      return $state.user?.value?.email === email;
+    const isYou = (email) => {
+      return $state.user?.value?.email === email
     }
 
     const saveComment = async () => {
       try {
-
-
         if (!row.value || !comment.value) return
         const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
         if (!rowId) return
@@ -60,7 +70,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       isCommentsLoading,
       commentsError,
       saveComment,
-      comment,isYou
+      comment,
+      isYou,
     }
   },
   'expanded-form-store',
diff --git a/packages/nc-gui-v2/plugins/domPurify.ts b/packages/nc-gui-v2/plugins/domPurify.ts
index 3dd6a6642c..4dade06bfa 100644
--- a/packages/nc-gui-v2/plugins/domPurify.ts
+++ b/packages/nc-gui-v2/plugins/domPurify.ts
@@ -1,7 +1,6 @@
-import VueDOMPurifyHTML from 'vue-dompurify-html';
+import VueDOMPurifyHTML from 'vue-dompurify-html'
 import { defineNuxtPlugin } from 'nuxt/app'
 
-
 export default defineNuxtPlugin((nuxtApp) => {
   nuxtApp.vueApp.use(VueDOMPurifyHTML)
 })

From efd732edb16048b506bb1b449e66211a90b9f840 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:26:32 +0530
Subject: [PATCH 45/76] feat(gui-v2): LTAR form style correction

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/index.vue      |  2 +-
 .../nc-gui-v2/components/virtual-cell/BelongsTo.vue    | 10 ++++++++--
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue |  7 ++++---
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue   |  6 +++++-
 .../virtual-cell/components/ListChildItems.vue         |  5 ++++-
 5 files changed, 22 insertions(+), 8 deletions(-)

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 9eb4dab0eb..29a5e97138 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -51,7 +51,7 @@ const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : Md
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
-                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row.row" :column="col" />
+                <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else
                   v-model="row.row[col.title]"
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 330393b5aa..192b641578 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj,IsFormInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)
 
@@ -18,7 +18,9 @@ const active = false
 
 const listItemsDlg = ref(false)
 
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const isForm = inject(IsFormInj)
+
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   reloadTrigger.trigger,
@@ -29,6 +31,7 @@ await loadRelatedTableMeta()
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
+    <template v-if="!isForm">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="cellValue">
         <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
@@ -42,6 +45,9 @@ await loadRelatedTableMeta()
     </div>
 
     <ListItems v-model="listItemsDlg" />
+    </template>
+    <ListChildItems />
+    <ListItems v-model="listItemsDlg"  @attach-record="listItemsDlg = true"/>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 769055faca..2739c86fbf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 import { useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
@@ -20,6 +20,8 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -29,7 +31,6 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
   row,
   reloadTrigger.trigger,
 )
-
 await loadRelatedTableMeta()
 
 const cells = computed(() =>
@@ -62,7 +63,7 @@ const cells = computed(() =>
       <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true }" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index aa05726fc0..ea2c5f1596 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -5,7 +5,7 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj,IsFormInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -15,6 +15,8 @@ const cellValue = inject(CellValueInj)!
 
 const reloadTrigger = inject(ReloadViewDataHookInj)!
 
+const isForm = inject(IsFormInj)
+
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
@@ -42,6 +44,7 @@ const cells = computed(() =>
 
 <template>
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
+    <template v-if="!isForm">
     <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
       <template v-if="cellValue">
         <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
@@ -55,6 +58,7 @@ const cells = computed(() =>
 
       <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>
+    </template>
 
     <ListItems v-model="listItemsDlg" />
 
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 64002aa5f9..e31e5873a8 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import { watchEffect } from '@vue/runtime-core'
+import { Modal } from 'ant-design-vue'
+import { IsFormInj } from '~/context'
 import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
@@ -44,7 +47,7 @@ const container = computed(() =>
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
 
-        <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <MdiReload  v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
         <a-button type="primary" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">

From af23010eb514016246f306e3186589a21d38b93b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:28:59 +0530
Subject: [PATCH 46/76] refactor(gui-v2): show as chip view in bt

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 192b641578..656f904eca 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -31,7 +31,6 @@ await loadRelatedTableMeta()
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
-    <template v-if="!isForm">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="cellValue">
         <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
@@ -43,11 +42,7 @@ await loadRelatedTableMeta()
         @click="listItemsDlg = true"
       />
     </div>
-
-    <ListItems v-model="listItemsDlg" />
-    </template>
-    <ListChildItems />
-    <ListItems v-model="listItemsDlg"  @attach-record="listItemsDlg = true"/>
+    <ListItems v-model="listItemsDlg"  @attach-record=" (listItemsDlg = true)"/>
   </div>
 </template>
 

From ad82e3649577cb87f8ff99a37b1d60ae6b98a216 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:32:32 +0530
Subject: [PATCH 47/76] refactor(gui-v2): remove old style

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Cell.vue  | 32 -------------------
 1 file changed, 32 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 5760bf9283..6e2451f4a7 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -141,35 +141,3 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellText v-else v-model="vModel" />
   </div>
 </template>
-
-<style scoped>
-textarea {
-  outline: none;
-}
-
-div {
-  width: 100%;
-  height: 100%;
-  color: var(--v-textColor-base);
-}
-
-.nc-hint {
-  font-size: 0.61rem;
-  color: grey;
-}
-
-.nc-cell {
-  @apply relative h-full;
-  width: inherit;
-  display: inherit;
-}
-
-.nc-locked-overlay {
-  position: absolute;
-  z-index: 2;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-}
-</style>

From c9da515c0d159230c9f034f5235198475793cc7d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 02:42:24 +0530
Subject: [PATCH 48/76] refactor(gui-v2): reload child list on linking

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue | 2 +-
 packages/nc-gui-v2/composables/useLTARStore.ts           | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 656f904eca..35f8b6b943 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -42,7 +42,7 @@ await loadRelatedTableMeta()
         @click="listItemsDlg = true"
       />
     </div>
-    <ListItems v-model="listItemsDlg"  @attach-record=" (listItemsDlg = true)"/>
+    <ListItems v-model="listItemsDlg" @attach-record="listItemsDlg = true" />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 327c01d335..691564bd84 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -93,6 +93,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
 
     const loadChildrenList = async () => {
       try {
+        if (colOptions.type === 'bt') return
+
         childrenList.value = await $api.dbTableRow.nestedList(
           NOCO,
           project.value.id as string,
@@ -198,6 +200,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
+        await loadChildrenList()
       } catch (e: any) {
         notification.error({
           message: 'Linking failed',

From 8cc5c3bec408e9f6fbd6467bca660ce1bd892635 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 11:25:02 +0530
Subject: [PATCH 49/76] refactor(gui-v2): move expanded form header part to a
 component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 19 +++++++++++++++++++
 .../smartsheet/expanded-form/index.vue        | 16 ++++------------
 .../composables/useExpandedFormStore.ts       |  2 ++
 3 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue

diff --git a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
new file mode 100644
index 0000000000..4416b963f9
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { computed } from '#imports'
+import { useExpandedFormStoreOrThrow } from '~/composables'
+import MdiDoorOpen from '~icons/mdi/door-open'
+import MdiDoorClosed from '~icons/mdi/door-closed'
+
+const { commentsDrawer } = useExpandedFormStoreOrThrow()
+
+const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+</script>
+
+<template>
+  <div class="flex p-2">
+    <div class="flex-grow" />
+    <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+  </div>
+</template>
+
+<style scoped></style>
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 29a5e97138..b198372ef2 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -2,13 +2,12 @@
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
 import { Ref, computed, provide, toRef } from 'vue'
-import Comments from '~/components/smartsheet/expanded-form/Comments.vue'
+import Comments from './Comments.vue'
+import Header from './Header.vue'
 import { useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
-import MdiDoorOpen from '~icons/mdi/door-open'
-import MdiDoorClosed from '~icons/mdi/door-closed'
 
 interface Props {
   modelValue: string | null
@@ -27,21 +26,14 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { loadComments } = useProvideExpandedFormStore(meta, row)
-
-const commentsDrawer = ref(false)
+const { loadComments, commentsDrawer } = useProvideExpandedFormStore(meta, row)
 
 const isExpanded = useVModel(props, 'modelValue', emits)
-
-const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 </script>
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <div class="flex p-2">
-      <div class="flex-grow" />
-      <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
-    </div>
+    <Header />
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index ff569c9f2c..2e846307e4 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -17,6 +17,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
     const commentsOnly = ref(false)
     const commentsAndLogs = ref([])
     const comment = ref('')
+    const commentsDrawer = ref(false)
 
     // todo
     const activeView = inject(ActiveViewInj)
@@ -72,6 +73,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       saveComment,
       comment,
       isYou,
+      commentsDrawer,
     }
   },
   'expanded-form-store',

From 20d838d457f33a894458017eed660d9018932543 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 11:40:51 +0530
Subject: [PATCH 50/76] wip(gui-v2): expanded form view header title

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 24 ++++++++++--
 .../composables/useExpandedFormStore.ts       | 39 ++++++++++++++++++-
 2 files changed, 59 insertions(+), 4 deletions(-)

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 4416b963f9..64d45baab6 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,16 +1,34 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { useExpandedFormStoreOrThrow } from '~/composables'
+import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow } from '~/composables'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
+import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
+import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
 
-const { commentsDrawer } = useExpandedFormStoreOrThrow()
+const {meta} = useSmartsheetStoreOrThrow()
+const { commentsDrawer, row, primaryValue } = useExpandedFormStoreOrThrow()
 
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
+
+// todo: accept as a prop / inject
+const iconColor =  '#1890ff'
+
 </script>
 
 <template>
-  <div class="flex p-2">
+  <div class="flex p-2 align-center">
+    <h5 class="text-md font-weight-bold flex align-center gap-1 mb-0">
+      <MdiTableArrowRightIcon :style="{color:iconColor}"/>
+
+      <template v-if="meta">
+        {{ meta.title }}
+      </template>
+      <template v-else>
+        {{ table }}
+      </template>
+      <template v-if="primaryValue">: {{ primaryValue }}</template>
+    </h5>
     <div class="flex-grow" />
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
   </div>
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 2e846307e4..4882035ba0 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -1,3 +1,4 @@
+import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message } from 'ant-design-vue'
@@ -7,6 +8,7 @@ import { useApi } from '~/composables/useApi'
 import { useViewData } from '~/composables/useViewData'
 import { ActiveViewInj } from '~/context'
 import { extractPkFromRow } from '~/utils'
+import dayjs from 'dayjs'
 
 const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
   (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
@@ -24,6 +26,39 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
 
     const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
 
+
+
+    // getters
+   const primaryValue = computed(() => {
+      if (row?.value?.row) {
+        const value= '';
+        const col = meta?.value?.columns?.find(c => c.pv);
+        if (!col) {
+          return;
+        }
+        const uidt = col.uidt;
+        if (uidt == UITypes.Date) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD');
+        } else if (uidt == UITypes.DateTime) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm');
+        } else if (uidt == UITypes.Time) {
+          let dateTime = dayjs(value);
+          if (!dateTime.isValid()) {
+            dateTime = dayjs(value, 'HH:mm:ss');
+          }
+          if (!dateTime.isValid()) {
+            dateTime = dayjs(`1999-01-01 ${value}`);
+          }
+          if (!dateTime.isValid()) {
+            return value;
+          }
+          return dateTime.format('HH:mm:ss');
+        }
+        return value;
+      }
+    })
+
+
     // actions
     const loadCommentsAndLogs = async () => {
       if (!row.value) return
@@ -58,7 +93,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
         comment.value = ''
         message.success('Comment added successfully')
         await loadCommentsAndLogs()
-      } catch (e) {
+      } catch (e: any) {
         message.error(e.message)
       }
 
@@ -74,6 +109,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       comment,
       isYou,
       commentsDrawer,
+      row,
+      primaryValue
     }
   },
   'expanded-form-store',

From 4f5aefc9019e1ed5671255ca9eaa0edd6ba86791 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 11:55:15 +0530
Subject: [PATCH 51/76] feat(gui-v2): show primary value in expanded form view
 header

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       | 20 +++++---
 .../composables/useExpandedFormStore.ts       | 46 +++++++++++--------
 2 files changed, 42 insertions(+), 24 deletions(-)

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 64d45baab6..616cc945c8 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,13 +1,12 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow } from '~/composables'
+import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
-import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
-import MdiTableArrowRightIcon from '~icons/mdi/table-arrow-right'
 
 const {meta} = useSmartsheetStoreOrThrow()
-const { commentsDrawer, row, primaryValue } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, row, primaryValue, save } = useExpandedFormStoreOrThrow()
+const { isUIAllowed} =useUIPermission()
 
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 
@@ -17,9 +16,9 @@ const iconColor =  '#1890ff'
 </script>
 
 <template>
-  <div class="flex p-2 align-center">
+  <div class="flex p-2 align-center gap-2">
     <h5 class="text-md font-weight-bold flex align-center gap-1 mb-0">
-      <MdiTableArrowRightIcon :style="{color:iconColor}"/>
+      <mdi-table-arrow-right :style="{color:iconColor}"/>
 
       <template v-if="meta">
         {{ meta.title }}
@@ -30,7 +29,16 @@ const iconColor =  '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
+    <mdi-reload/>
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    <a-button size="small" class="!text">
+      <!-- Cancel -->
+      {{ $t('general.cancel') }}
+    </a-button>
+    <a-button size="small" :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
+      <!--Save Row-->
+      {{ $t('activity.saveRow') }}
+    </a-button>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 4882035ba0..721e218ec7 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -27,34 +27,33 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
     const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
 
 
-
     // getters
-   const primaryValue = computed(() => {
+    const primaryValue = computed(() => {
       if (row?.value?.row) {
-        const value= '';
-        const col = meta?.value?.columns?.find(c => c.pv);
+        const col = meta?.value?.columns?.find(c => c.pv)
         if (!col) {
-          return;
+          return
         }
-        const uidt = col.uidt;
-        if (uidt == UITypes.Date) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD');
-        } else if (uidt == UITypes.DateTime) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm');
-        } else if (uidt == UITypes.Time) {
-          let dateTime = dayjs(value);
+        const value = row.value.row?.[col.title as string]
+        const uidt = col.uidt
+        if (uidt === UITypes.Date) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+        } else if (uidt === UITypes.DateTime) {
+          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
+        } else if (uidt === UITypes.Time) {
+          let dateTime = dayjs(value)
           if (!dateTime.isValid()) {
-            dateTime = dayjs(value, 'HH:mm:ss');
+            dateTime = dayjs(value, 'HH:mm:ss')
           }
           if (!dateTime.isValid()) {
-            dateTime = dayjs(`1999-01-01 ${value}`);
+            dateTime = dayjs(`1999-01-01 ${value}`)
           }
           if (!dateTime.isValid()) {
-            return value;
+            return value
           }
-          return dateTime.format('HH:mm:ss');
+          return dateTime.format('HH:mm:ss')
         }
-        return value;
+        return value
       }
     })
 
@@ -99,6 +98,17 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
 
       $e('a:row-expand:comment')
     }
+
+    const save = async () => {
+      // try {
+      //   await updateOrSaveRow(row.value.row)
+      //   message.success('Saved successfully')
+      // } catch (e: any) {
+      //   message.error(e.message)
+      // }
+    }
+
+
     return {
       commentsOnly,
       loadCommentsAndLogs,
@@ -110,7 +120,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
       isYou,
       commentsDrawer,
       row,
-      primaryValue
+      primaryValue, save,
     }
   },
   'expanded-form-store',

From c0a12602beb29acfb589361e7865e040889e542f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 12:01:04 +0530
Subject: [PATCH 52/76] feat(gui-v2): add save/update action

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Header.vue       |  18 +-
 .../smartsheet/expanded-form/index.vue        |   5 +-
 .../composables/useExpandedFormStore.ts       | 274 +++++++++++-------
 3 files changed, 181 insertions(+), 116 deletions(-)

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 616cc945c8..236321daca 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,24 +1,22 @@
 <script lang="ts" setup>
-import { computed } from '#imports'
-import { useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
+import { computed, useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
-const {meta} = useSmartsheetStoreOrThrow()
+const { meta } = useSmartsheetStoreOrThrow()
 const { commentsDrawer, row, primaryValue, save } = useExpandedFormStoreOrThrow()
-const { isUIAllowed} =useUIPermission()
+const { isUIAllowed } = useUIPermission()
 
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 
 // todo: accept as a prop / inject
-const iconColor =  '#1890ff'
-
+const iconColor = '#1890ff'
 </script>
 
 <template>
   <div class="flex p-2 align-center gap-2">
-    <h5 class="text-md font-weight-bold flex align-center gap-1 mb-0">
-      <mdi-table-arrow-right :style="{color:iconColor}"/>
+    <h5 class="text-lg font-weight-medium flex align-center gap-1 mb-0">
+      <mdi-table-arrow-right :style="{ color: iconColor }" />
 
       <template v-if="meta">
         {{ meta.title }}
@@ -29,14 +27,14 @@ const iconColor =  '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
-    <mdi-reload/>
+    <mdi-reload />
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
     <a-button size="small" class="!text">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>
     <a-button size="small" :disabled="!isUIAllowed('tableRowUpdate')" type="primary" @click="save">
-      <!--Save Row-->
+      <!-- Save Row -->
       {{ $t('activity.saveRow') }}
     </a-button>
   </div>
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 b198372ef2..f9a23a63f7 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -26,7 +26,7 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { loadComments, commentsDrawer } = useProvideExpandedFormStore(meta, row)
+const { commentsDrawer, changedColumns } = useProvideExpandedFormStore(meta, row)
 
 const isExpanded = useVModel(props, 'modelValue', emits)
 </script>
@@ -49,8 +49,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
                   v-model="row.row[col.title]"
                   :column="col"
                   :edit-enabled="true"
-                  @update:edit-enabled="editEnabled = false"
-                  @cancel="editEnabled = false"
+                  @update:modelValue="changedColumns.push(col.title)"
                 />
               </div>
             </div>
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 721e218ec7..8ebf4b7662 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -1,130 +1,198 @@
 import { UITypes } from 'nocodb-sdk'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { message } from 'ant-design-vue'
+import { message, notification } from 'ant-design-vue'
+import dayjs from 'dayjs'
+import { NOCO } from '~/lib'
+import getPlainText from '../../nc-gui/components/project/spreadsheet/helpers/getPlainText'
 import { useNuxtApp } from '#app'
 import { useInjectionState } from '#imports'
 import { useApi } from '~/composables/useApi'
-import { useViewData } from '~/composables/useViewData'
+import type { Row } from '~/composables/useViewData'
 import { ActiveViewInj } from '~/context'
-import { extractPkFromRow } from '~/utils'
-import dayjs from 'dayjs'
-
-const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState(
-  (meta: Ref<TableType>, row: Ref<Record<string, any>>) => {
-    const { $e, $state } = useNuxtApp()
-    const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
-    // { useGlobalInstance: true },
-    // state
-    const commentsOnly = ref(false)
-    const commentsAndLogs = ref([])
-    const comment = ref('')
-    const commentsDrawer = ref(false)
-
-    // todo
-    const activeView = inject(ActiveViewInj)
-
-    const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
-
-
-    // getters
-    const primaryValue = computed(() => {
-      if (row?.value?.row) {
-        const col = meta?.value?.columns?.find(c => c.pv)
-        if (!col) {
-          return
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
+
+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('')
+  const commentsDrawer = ref(false)
+  const changedColumns = reactive(new Set<string>())
+  const { project } = useProject()
+
+  // todo
+  // const activeView = inject(ActiveViewInj)
+
+  // const { updateOrSaveRow, insertRow } = useViewData(meta, activeView as any)
+
+  // getters
+  const primaryValue = computed(() => {
+    if (row?.value?.row) {
+      const col = meta?.value?.columns?.find((c) => c.pv)
+      if (!col) {
+        return
+      }
+      const value = row.value.row?.[col.title as string]
+      const uidt = col.uidt
+      if (uidt === UITypes.Date) {
+        return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
+      } else if (uidt === UITypes.DateTime) {
+        return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
+      } else if (uidt === UITypes.Time) {
+        let dateTime = dayjs(value)
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(value, 'HH:mm:ss')
+        }
+        if (!dateTime.isValid()) {
+          dateTime = dayjs(`1999-01-01 ${value}`)
         }
-        const value = row.value.row?.[col.title as string]
-        const uidt = col.uidt
-        if (uidt === UITypes.Date) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD')
-        } else if (uidt === UITypes.DateTime) {
-          return (/^\d+$/.test(value) ? dayjs(+value) : dayjs(value)).format('YYYY-MM-DD HH:mm')
-        } else if (uidt === UITypes.Time) {
-          let dateTime = dayjs(value)
-          if (!dateTime.isValid()) {
-            dateTime = dayjs(value, 'HH:mm:ss')
-          }
-          if (!dateTime.isValid()) {
-            dateTime = dayjs(`1999-01-01 ${value}`)
-          }
-          if (!dateTime.isValid()) {
-            return value
-          }
-          return dateTime.format('HH:mm:ss')
+        if (!dateTime.isValid()) {
+          return value
         }
-        return value
+        return dateTime.format('HH:mm:ss')
       }
-    })
+      return value
+    }
+  })
+
+  // actions
+  const loadCommentsAndLogs = async () => {
+    if (!row.value) return
+    const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
+    if (!rowId) return
+    commentsAndLogs.value =
+      (
+        await api.utils.commentList({
+          row_id: rowId,
+          fk_model_id: meta.value.id as string,
+          comments_only: commentsOnly.value,
+        })
+      )?.reverse?.() || []
+  }
 
+  const isYou = (email:string) => {
+    return $state.user?.value?.email === email
+  }
 
-    // actions
-    const loadCommentsAndLogs = async () => {
-      if (!row.value) return
+  const saveComment = async () => {
+    try {
+      if (!row.value || !comment.value) return
       const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
       if (!rowId) return
-      commentsAndLogs.value =
-        (
-          await api.utils.commentList({
-            row_id: rowId,
-            fk_model_id: meta.value.id as string,
-            comments_only: commentsOnly.value,
-          })
-        )?.reverse?.() || []
-    }
 
-    const isYou = (email) => {
-      return $state.user?.value?.email === email
+      await api.utils.commentRow({
+        fk_model_id: meta.value?.id as string,
+        row_id: rowId,
+        description: comment.value,
+      })
+
+      comment.value = ''
+      message.success('Comment added successfully')
+      await loadCommentsAndLogs()
+    } catch (e: any) {
+      message.error(e.message)
     }
 
-    const saveComment = async () => {
-      try {
-        if (!row.value || !comment.value) return
-        const rowId = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
-        if (!rowId) return
+    $e('a:row-expand:comment')
+  }
+
+  const save = async () => {
+    try {
+      // todo:
+      // if (this.presetValues) {
+      //   // cater presetValues
+      //   for (const k in this.presetValues) {
+      //     this.$set(this.changedColumns, k, true);
+      //   }
+      // }
+
+      const updateOrInsertObj = [...changedColumns].reduce((obj, col) => {
+        obj[col] = row.value.row[col]
+        return obj
+      }, {} as Record<string, any>)
+
+      if (row.value.rowMeta.new) {
+        const data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
+
+        /* todo:
+           // save hasmany and manytomany relations from local state
+            if (this.$refs.virtual && Array.isArray(this.$refs.virtual)) {
+              for (const vcell of this.$refs.virtual) {
+                if (vcell.save) {
+                  await vcell.save(this.localState);
+                }
+              }
+            } */
+
+        row.value = {
+          row: data,
+          rowMeta: {},
+          oldRow: { ...data },
+        }
 
-        await api.utils.commentRow({
-          fk_model_id: meta.value?.id as string,
-          row_id: rowId,
-          description: comment.value,
-        })
+        /// todo:
+        // await this.reload();
+      } else if (Object.keys(updateOrInsertObj).length) {
+        const id = extractPkFromRow(row.value.row, meta.value.columns as ColumnType[])
 
-        comment.value = ''
-        message.success('Comment added successfully')
-        await loadCommentsAndLogs()
-      } catch (e: any) {
-        message.error(e.message)
+        if (!id) {
+          return message.info("Update not allowed for table which doesn't have primary Key")
+        }
+        await $api.dbTableRow.update(NOCO, project.value.title as string, meta.value.title, id, updateOrInsertObj)
+        for (const key of Object.keys(updateOrInsertObj)) {
+          // audit
+          $api.utils
+            .auditRowUpdate(id, {
+              fk_model_id: meta.value.id,
+              column_name: key,
+              row_id: id,
+              value: getPlainText(updateOrInsertObj[key]),
+              prev_value: getPlainText(row.value.oldRow[key]),
+            })
+            .then(() => {
+            })
+        }
+      } else {
+        return message.info('No columns to update')
       }
 
-      $e('a:row-expand:comment')
-    }
-
-    const save = async () => {
-      // try {
-      //   await updateOrSaveRow(row.value.row)
-      //   message.success('Saved successfully')
-      // } catch (e: any) {
-      //   message.error(e.message)
-      // }
-    }
+      // this.$emit('update:oldRow', { ...this.localState });
+      // this.changedColumns = {};
+      // this.$emit('input', this.localState);
+      // this.$emit('update:isNew', false);
 
+      notification.success({
+        message: `${this.primaryValue() || 'Row'} updated successfully.`,
+        // position: 'bottom-right',
+      })
 
-    return {
-      commentsOnly,
-      loadCommentsAndLogs,
-      commentsAndLogs,
-      isCommentsLoading,
-      commentsError,
-      saveComment,
-      comment,
-      isYou,
-      commentsDrawer,
-      row,
-      primaryValue, save,
+      changedColumns.clear()
+    } catch (e: any) {
+      notification.error({ message: `Failed to update row`, description: await extractSdkResponseErrorMsg(e) })
     }
-  },
-  'expanded-form-store',
-)
+    $e('a:row-expand:add')
+  }
+
+  return {
+    commentsOnly,
+    loadCommentsAndLogs,
+    commentsAndLogs,
+    isCommentsLoading,
+    commentsError,
+    saveComment,
+    comment,
+    isYou,
+    commentsDrawer,
+    row,
+    primaryValue,
+    save,
+    changedColumns,
+  }
+}, 'expanded-form-store')
 
 export { useProvideExpandedFormStore }
 

From 5fa33d4c7301cfc5c43cc407d2d42dfc70f2e292 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 15:53:01 +0530
Subject: [PATCH 53/76] feat(gui-v2): integrate save/update with api

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/index.vue  |  3 ++-
 .../nc-gui-v2/composables/useExpandedFormStore.ts  | 14 ++++++--------
 2 files changed, 8 insertions(+), 9 deletions(-)

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 f9a23a63f7..a04a1a3e8a 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -43,13 +43,14 @@ const isExpanded = useVModel(props, 'modelValue', emits)
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
+
                 <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else
                   v-model="row.row[col.title]"
                   :column="col"
                   :edit-enabled="true"
-                  @update:modelValue="changedColumns.push(col.title)"
+                  @update:modelValue="changedColumns.add(col.title)"
                 />
               </div>
             </div>
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index 8ebf4b7662..eb5dcd411d 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -6,13 +6,12 @@ import dayjs from 'dayjs'
 import { NOCO } from '~/lib'
 import getPlainText from '../../nc-gui/components/project/spreadsheet/helpers/getPlainText'
 import { useNuxtApp } from '#app'
-import { useInjectionState } from '#imports'
+import { useInjectionState,useProject } from '#imports'
 import { useApi } from '~/composables/useApi'
 import type { Row } from '~/composables/useViewData'
-import { ActiveViewInj } from '~/context'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
-const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>, ) => {
   const { $e, $state, $api } = useNuxtApp()
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
   // { useGlobalInstance: true },
@@ -21,9 +20,8 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const commentsAndLogs = ref([])
   const comment = ref('')
   const commentsDrawer = ref(false)
-  const changedColumns = reactive(new Set<string>())
+  const changedColumns = ref(new Set<string>())
   const { project } = useProject()
-
   // todo
   // const activeView = inject(ActiveViewInj)
 
@@ -110,7 +108,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       //   }
       // }
 
-      const updateOrInsertObj = [...changedColumns].reduce((obj, col) => {
+      const updateOrInsertObj = [...changedColumns.value].reduce((obj, col) => {
         obj[col] = row.value.row[col]
         return obj
       }, {} as Record<string, any>)
@@ -166,11 +164,11 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       // this.$emit('update:isNew', false);
 
       notification.success({
-        message: `${this.primaryValue() || 'Row'} updated successfully.`,
+        message: `${primaryValue.value || 'Row'} updated successfully.`,
         // position: 'bottom-right',
       })
 
-      changedColumns.clear()
+      changedColumns.value = new Set()
     } catch (e: any) {
       notification.error({ message: `Failed to update row`, description: await extractSdkResponseErrorMsg(e) })
     }

From 56dca1166a71ae87a9279764176666298ed2be1b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 17:36:04 +0530
Subject: [PATCH 54/76] feat(gui-v2): keep row level state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  9 +++
 .../nc-gui-v2/components/smartsheet/Row.vue   | 79 +++++++++++++++++++
 .../smartsheet/expanded-form/index.vue        |  1 -
 .../components/virtual-cell/HasMany.vue       |  2 +
 .../composables/useExpandedFormStore.ts       | 14 ++--
 .../composables/useSmartsheetRowStore.ts      | 28 +++++++
 7 files changed, 128 insertions(+), 7 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/smartsheet/Row.vue
 create mode 100644 packages/nc-gui-v2/composables/useSmartsheetRowStore.ts

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index cd5b18371e..ad183207f6 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -80,6 +80,8 @@ declare module '@vue/runtime-core' {
     MdiApi: typeof import('~icons/mdi/api')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
+    MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
+    MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index d342221f36..e7827e1239 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -329,6 +329,14 @@ const expandForm = (row: Row) => {
             </tr>
           </thead>
           <tbody>
+            <SmartsheetRow
+              v-for="(row, rowIndex) in data"
+              :key="row.id"
+              :row="row"
+              :row-index="rowIndex"
+              :selected="selected"
+              :edit-enabled="editEnabled"
+            >
             <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
               <td key="row-index" class="caption nc-grid-cell group">
                 <div class="flex items-center w-[80px]">
@@ -388,6 +396,7 @@ const expandForm = (row: Row) => {
                 </div>
               </td>
             </tr>
+            </SmartsheetRow>
 
             <tr v-if="!isLocked">
               <td
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
new file mode 100644
index 0000000000..4b8e072800
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { isVirtualCol } from 'nocodb-sdk'
+import type { Row } from '~/composables'
+import { useSmartsheetStoreOrThrow } from '~/composables'
+import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
+import { FieldsInj } from '~/context'
+
+interface Props {
+  row: Row
+  selected: { col?: number; row?: number }
+  rowIndex: number
+  editEnabled: boolean
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
+
+const row = toRef(props, 'row')
+const rowIndex = toRef(props, 'rowIndex')
+const editEnabled = toRef(props, 'editEnabled')
+
+// todo : from props / inject
+const isPublicView = false
+
+const fields = inject(FieldsInj, ref([]))
+const { meta } = useSmartsheetStoreOrThrow()
+
+const { isNew } = useProvideSmartsheetRowStore(meta, row)
+</script>
+
+<template>
+  <tr class="nc-grid-row group">
+    <td key="row-index" class="caption nc-grid-cell">
+      <div class="align-center flex w-[80px]">
+        <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+        <div :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" class="group-hover:flex w-full align-center">
+          <a-checkbox v-model:checked="row.rowMeta.selected" />
+          <span class="flex-1" />
+          <mdi-arrow-expand class="text-sm text-pink hidden group-hover:inline-block" @click="emit('expandForm')" />
+        </div>
+      </div>
+    </td>
+    <td
+      v-for="(columnObj, colIndex) in fields"
+      :key="columnObj.title"
+      class="cell pointer nc-grid-cell"
+      :class="{
+        active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+      }"
+      :data-col="columnObj.id"
+      @click="emit('selectCell', rowIndex, colIndex)"
+      @dblclick="editEnabled = true"
+      @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+    >
+      <div class="w-full h-full">
+        <SmartsheetVirtualCell
+          v-if="isVirtualCol(columnObj)"
+          v-model="row.row[columnObj.title]"
+          :column="columnObj"
+          :active="selected.col === colIndex && selected.row === rowIndex"
+          :row="row"
+          @navigate="emit('navigate', $event)"
+        />
+
+        <SmartsheetCell
+          v-else
+          v-model="row.row[columnObj.title]"
+          :column="columnObj"
+          :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+          @update:edit-enabled="editEnabled = false"
+          @save="emit('updateOrSaveRow', row, columnObj.title)"
+          @navigate="emit('navigate', $event)"
+          @cancel="emit('cancel')"
+        />
+      </div>
+    </td>
+  </tr>
+</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 a04a1a3e8a..566d29982f 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -43,7 +43,6 @@ const isExpanded = useVModel(props, 'modelValue', emits)
               <SmartsheetHeaderCell v-else :column="col" />
 
               <div class="!bg-white rounded px-1 min-h-[35px] flex align-center">
-
                 <SmartsheetVirtualCell v-if="isVirtualCol(col)" v-model="row.row[col.title]" :row="row" :column="col" />
                 <SmartsheetCell
                   v-else
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 2739c86fbf..94c19a84c2 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,6 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
+import { useProvideSmartsheetRowStore, useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
@@ -26,6 +27,7 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { localState, isNew } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index eb5dcd411d..c6b9d2a9fa 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -3,15 +3,16 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message, notification } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import { NOCO } from '~/lib'
 import getPlainText from '../../nc-gui/components/project/spreadsheet/helpers/getPlainText'
+import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
+import { NOCO } from '~/lib'
 import { useNuxtApp } from '#app'
-import { useInjectionState,useProject } from '#imports'
+import { useInjectionState, useProject } from '#imports'
 import { useApi } from '~/composables/useApi'
 import type { Row } from '~/composables/useViewData'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
-const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>, ) => {
+const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   const { $e, $state, $api } = useNuxtApp()
   const { api, isLoading: isCommentsLoading, error: commentsError } = useApi()
   // { useGlobalInstance: true },
@@ -22,6 +23,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   const commentsDrawer = ref(false)
   const changedColumns = ref(new Set<string>())
   const { project } = useProject()
+  const rowStore = useProvideSmartsheetRowStore(meta, row)
   // todo
   // const activeView = inject(ActiveViewInj)
 
@@ -72,7 +74,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       )?.reverse?.() || []
   }
 
-  const isYou = (email:string) => {
+  const isYou = (email: string) => {
     return $state.user?.value?.email === email
   }
 
@@ -151,8 +153,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
               value: getPlainText(updateOrInsertObj[key]),
               prev_value: getPlainText(row.value.oldRow[key]),
             })
-            .then(() => {
-            })
+            .then(() => {})
         }
       } else {
         return message.info('No columns to update')
@@ -176,6 +177,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   return {
+    ...rowStore,
     commentsOnly,
     loadCommentsAndLogs,
     commentsAndLogs,
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
new file mode 100644
index 0000000000..67bb0f78b3
--- /dev/null
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -0,0 +1,28 @@
+import type { TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { useInjectionState } from '#imports'
+import type { Row } from '~/composables/useViewData'
+
+const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+  // state
+  const localState = reactive({})
+
+  // getters
+  const isNew = computed(() => row.value?.rowMeta?.new)
+
+  // actions
+
+  return {
+    row,
+    localState,
+    isNew,
+  }
+}, 'smartsheet-row-store')
+
+export { useProvideSmartsheetRowStore }
+
+export function useSmartsheetRowStoreOrThrow() {
+  const smartsheetRowStore = useSmartsheetRowStore()
+  if (smartsheetRowStore == null) throw new Error('Please call `useSmartsheetRowStore` on the appropriate parent component')
+  return smartsheetRowStore
+}

From 32ca054ac2abdb2392cc03ba2ac25b987b7cfce3 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 15:36:20 +0530
Subject: [PATCH 55/76] refactor(gui-v2): simplify Row component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 131 ++++++++----------
 .../nc-gui-v2/components/smartsheet/Row.vue   |  66 +--------
 .../composables/useSmartsheetRowStore.ts      |   2 +-
 3 files changed, 67 insertions(+), 132 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e7827e1239..5249014afe 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -288,7 +288,7 @@ const expandForm = (row: Row) => {
           <thead>
             <tr>
               <th>
-                <div class="flex align-center w-[80px]">
+                <div class="flex align-center w-[80px] px-1">
                   <div class="group-hover:hidden" :class="{ hidden: selectedAllRecords }">#</div>
                   <div
                     :class="{ hidden: !selectedAllRecords, flex: selectedAllRecords }"
@@ -329,73 +329,66 @@ const expandForm = (row: Row) => {
             </tr>
           </thead>
           <tbody>
-            <SmartsheetRow
-              v-for="(row, rowIndex) in data"
-              :key="row.id"
-              :row="row"
-              :row-index="rowIndex"
-              :selected="selected"
-              :edit-enabled="editEnabled"
-            >
-            <tr v-for="(row, rowIndex) of data" :key="rowIndex" class="nc-grid-row">
-              <td key="row-index" class="caption nc-grid-cell group">
-                <div class="flex items-center w-[80px]">
-                  <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                  <div
-                    :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                    class="group-hover:flex w-full items-center justify-between p-1"
-                  >
-                    <a-checkbox v-model:checked="row.rowMeta.selected" />
-                    <span class="flex-1" />
-                    <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                      <MdiArrowExpand
-                        class="select-none transform hover:(text-pink-500 scale-120)"
-                        @click="expandedFormDlg = true"
-                      />
+            <SmartsheetRow v-for="(row, rowIndex) in data" :key="rowIndex" :row="row">
+              <tr class="nc-grid-row">
+                <td key="row-index" class="caption nc-grid-cell group">
+                  <div class="flex items-center w-[80px]">
+                    <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                    <div
+                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                      class="group-hover:flex w-full items-center justify-between p-1"
+                    >
+                      <a-checkbox v-model:checked="row.rowMeta.selected" />
+                      <span class="flex-1" />
+                      <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                        <MdiArrowExpand
+                          class="select-none transform hover:(text-pink-500 scale-120)"
+                          @click="expandedFormDlg = true"
+                        />
+                      </div>
                     </div>
                   </div>
-                </div>
-              </td>
-              <td
-                v-for="(columnObj, colIndex) of fields"
-                :ref="cellRefs.set"
-                :key="columnObj.id"
-                class="cell relative cursor-pointer nc-grid-cell"
-                :class="{
+                </td>
+                <td
+                  v-for="(columnObj, colIndex) of fields"
+                  :ref="cellRefs.set"
+                  :key="columnObj.id"
+                  class="cell relative cursor-pointer nc-grid-cell"
+                  :class="{
                   active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
                 }"
-                :data-key="rowIndex + columnObj.id"
-                :data-col="columnObj.id"
-                :data-title="columnObj.title"
-                @click="selectCell(rowIndex, colIndex)"
-                @dblclick="makeEditable(row, columnObj)"
-                @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-              >
-                <div class="w-full h-full">
-                  <SmartsheetVirtualCell
-                    v-if="isVirtualCol(columnObj)"
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :active="selected.col === colIndex && selected.row === rowIndex"
-                    :row="row"
-                    @navigate="onNavigate"
-                  />
-
-                  <SmartsheetCell
-                    v-else
-                    v-model="row.row[columnObj.title]"
-                    :column="columnObj"
-                    :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                    :row-index="rowIndex"
-                    :active="selected.col === colIndex && selected.row === rowIndex"
-                    @update:edit-enabled="editEnabled = false"
-                    @save="updateOrSaveRow(row, columnObj.title)"
-                    @navigate="onNavigate"
-                    @cancel="editEnabled = false"
-                  />
-                </div>
-              </td>
-            </tr>
+                  :data-key="rowIndex + columnObj.id"
+                  :data-col="columnObj.id"
+                  :data-title="columnObj.title"
+                  @click="selectCell(rowIndex, colIndex)"
+                  @dblclick="makeEditable(row, columnObj)"
+                  @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                >
+                  <div class="w-full h-full">
+                    <SmartsheetVirtualCell
+                      v-if="isVirtualCol(columnObj)"
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :active="selected.col === colIndex && selected.row === rowIndex"
+                      :row="row"
+                      @navigate="onNavigate"
+                    />
+
+                    <SmartsheetCell
+                      v-else
+                      v-model="row.row[columnObj.title]"
+                      :column="columnObj"
+                      :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                      :row-index="rowIndex"
+                      :active="selected.col === colIndex && selected.row === rowIndex"
+                      @update:edit-enabled="editEnabled = false"
+                      @save="updateOrSaveRow(row, columnObj.title)"
+                      @navigate="onNavigate"
+                      @cancel="editEnabled = false"
+                    />
+                  </div>
+                </td>
+              </tr>
             </SmartsheetRow>
 
             <tr v-if="!isLocked">
@@ -450,13 +443,11 @@ const expandForm = (row: Row) => {
     min-height: 41px !important;
     height: 41px !important;
     position: relative;
-    //padding: 0 5px;
+  }
 
-    & > div {
-      overflow: hidden;
-      @apply flex align-center h-auto;
-      padding: 0 5px;
-    }
+  td > div {
+    overflow: hidden;
+    @apply flex align-center h-auto px-1;
   }
 
   table,
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index 4b8e072800..043894959a 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -1,79 +1,23 @@
 <script lang="ts" setup>
-import { isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '~/composables'
 import { useSmartsheetStoreOrThrow } from '~/composables'
 import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
-import { FieldsInj } from '~/context'
 
 interface Props {
   row: Row
-  selected: { col?: number; row?: number }
-  rowIndex: number
-  editEnabled: boolean
 }
 
 const props = defineProps<Props>()
-
 const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
-
 const row = toRef(props, 'row')
-const rowIndex = toRef(props, 'rowIndex')
-const editEnabled = toRef(props, 'editEnabled')
-
-// todo : from props / inject
-const isPublicView = false
 
-const fields = inject(FieldsInj, ref([]))
 const { meta } = useSmartsheetStoreOrThrow()
-
-const { isNew } = useProvideSmartsheetRowStore(meta, row)
+const { isNew, localState } = useProvideSmartsheetRowStore(meta, row)
+watch(row, () => {
+  localState.value = {}
+})
 </script>
 
 <template>
-  <tr class="nc-grid-row group">
-    <td key="row-index" class="caption nc-grid-cell">
-      <div class="align-center flex w-[80px]">
-        <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-        <div :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }" class="group-hover:flex w-full align-center">
-          <a-checkbox v-model:checked="row.rowMeta.selected" />
-          <span class="flex-1" />
-          <mdi-arrow-expand class="text-sm text-pink hidden group-hover:inline-block" @click="emit('expandForm')" />
-        </div>
-      </div>
-    </td>
-    <td
-      v-for="(columnObj, colIndex) in fields"
-      :key="columnObj.title"
-      class="cell pointer nc-grid-cell"
-      :class="{
-        active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-      }"
-      :data-col="columnObj.id"
-      @click="emit('selectCell', rowIndex, colIndex)"
-      @dblclick="editEnabled = true"
-      @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-    >
-      <div class="w-full h-full">
-        <SmartsheetVirtualCell
-          v-if="isVirtualCol(columnObj)"
-          v-model="row.row[columnObj.title]"
-          :column="columnObj"
-          :active="selected.col === colIndex && selected.row === rowIndex"
-          :row="row"
-          @navigate="emit('navigate', $event)"
-        />
-
-        <SmartsheetCell
-          v-else
-          v-model="row.row[columnObj.title]"
-          :column="columnObj"
-          :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-          @update:edit-enabled="editEnabled = false"
-          @save="emit('updateOrSaveRow', row, columnObj.title)"
-          @navigate="emit('navigate', $event)"
-          @cancel="emit('cancel')"
-        />
-      </div>
-    </td>
-  </tr>
+  <slot />
 </template>
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 67bb0f78b3..6b5ced2dc2 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -5,7 +5,7 @@ import type { Row } from '~/composables/useViewData'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const localState = reactive({})
+  const localState = ref({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)

From 8a4939eb070cd1ca786fb24bcb329b974864f035 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 15:50:59 +0530
Subject: [PATCH 56/76] refactor(gui-v2): rename `localstate` to `state`

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Row.vue        | 4 ++--
 packages/nc-gui-v2/composables/useSmartsheetRowStore.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index 043894959a..2775b1fe68 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -12,9 +12,9 @@ const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'naviga
 const row = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { isNew, localState } = useProvideSmartsheetRowStore(meta, row)
+const { isNew, state } = useProvideSmartsheetRowStore(meta, row)
 watch(row, () => {
-  localState.value = {}
+  state.value = {}
 })
 </script>
 
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 6b5ced2dc2..c0112bc790 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -5,7 +5,7 @@ import type { Row } from '~/composables/useViewData'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const localState = ref({})
+  const state = ref({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)
@@ -14,7 +14,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
 
   return {
     row,
-    localState,
+    state,
     isNew,
   }
 }, 'smartsheet-row-store')

From c6bf2e458459dbc7696516d88da35720a4f5ae29 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 16:04:55 +0530
Subject: [PATCH 57/76] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 5249014afe..6b0172e0a2 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -329,7 +329,7 @@ const expandForm = (row: Row) => {
             </tr>
           </thead>
           <tbody>
-            <SmartsheetRow v-for="(row, rowIndex) in data" :key="rowIndex" :row="row">
+            <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <tr class="nc-grid-row">
                 <td key="row-index" class="caption nc-grid-cell group">
                   <div class="flex items-center w-[80px]">

From 3e9e44ce7a7416c1b6dee2fe1fef512fe6d62f9f Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 16:21:21 +0530
Subject: [PATCH 58/76] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/expanded-form/index.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 566d29982f..6ae6138697 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -49,7 +49,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
                   v-model="row.row[col.title]"
                   :column="col"
                   :edit-enabled="true"
-                  @update:modelValue="changedColumns.add(col.title)"
+                  @update:model-value="changedColumns.add(col.title)"
                 />
               </div>
             </div>

From 616244570ffc24ac897255787f4841fd7fc73601 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 17:24:13 +0530
Subject: [PATCH 59/76] feat(gui-v2): if new row add linked record to local
 state of row

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue     | 16 +++++-
 .../components/virtual-cell/HasMany.vue       | 51 +++++++++++------
 .../components/virtual-cell/ManyToMany.vue    | 38 +++++++++----
 .../components/ListChildItems.vue             | 19 +++++--
 .../virtual-cell/components/ListItems.vue     | 25 ++++++---
 .../nc-gui-v2/composables/useLTARStore.ts     | 55 +++++++++++++------
 .../composables/useSmartsheetRowStore.ts      | 16 +++++-
 7 files changed, 158 insertions(+), 62 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 35f8b6b943..edb8fbafd3 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,6 +3,9 @@ import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj,IsFormInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
@@ -27,13 +30,22 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
 )
 
 await loadRelatedTableMeta()
+const { state, isNew } = useSmartsheetRowStoreOrThrow()
+const value = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return null
+})
 </script>
 
 <template>
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
-      <template v-if="cellValue">
-        <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue)" />
+      <template v-if="value">
+        <ItemChip :item="value" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 94c19a84c2..49fe4b00ad 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -27,16 +27,26 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
-const { localState, isNew } = useSmartsheetRowStoreOrThrow()
-const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { state, isNew } = useSmartsheetRowStoreOrThrow()
+
+const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   reloadTrigger.trigger,
 )
 await loadRelatedTableMeta()
 
+const localCellValue = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return []
+})
+
 const cells = computed(() =>
-  cellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc: any[], curr: any) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -50,20 +60,27 @@ const cells = computed(() =>
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
-    <div v-if="!isForm" class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="cellValue">
-        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
-
-        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
-      </template>
-    </div>
-    <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiArrowExpand
-        class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
-        @click="childListDlg = true"
-      />
-      <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-    </div>
+    <template v-if="!isForm">
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="cells">
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+
+          <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
+            >more...
+          </span>
+        </template>
+      </div>
+      <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
+        <MdiArrowExpand
+          class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="childListDlg = true"
+        />
+        <MdiPlus
+          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
+          @click="listItemsDlg = true"
+        />
+      </div>
+    </template>
     <ListItems v-model="listItemsDlg" />
     <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true }" />
   </div>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index ea2c5f1596..779ccc5453 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,6 +4,9 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { useProvideLTARStore } from '#imports'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj,IsFormInj, RowInj } from '~/context'
 
@@ -29,8 +32,19 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
+const { state, isNew } = useSmartsheetRowStoreOrThrow()
+
+const localCellValue = computed(() => {
+  if (cellValue?.value) {
+    return cellValue?.value
+  } else if (isNew.value) {
+    return state?.value?.[column?.value.title as string]
+  }
+  return []
+})
+
 const cells = computed(() =>
-  cellValue.value.reduce((acc: any[], curr: any) => {
+  localCellValue.value.reduce((acc: any[], curr: any) => {
     if (!relatedTablePrimaryValueProp.value) return acc
 
     const value = curr[relatedTablePrimaryValueProp.value]
@@ -45,24 +59,24 @@ const cells = computed(() =>
 <template>
   <div class="flex align-center gap-1 w-full h-full chips-wrapper">
     <template v-if="!isForm">
-    <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
-      <template v-if="cellValue">
-        <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+      <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
+        <template v-if="cells">
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
 
-        <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
-      </template>
-    </div>
+          <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
+        </template>
+      </div>
 
-    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
-      <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
+      <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
+        <MdiArrowExpand class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
 
-      <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
-    </div>
+        <MdiPlus class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
+      </div>
     </template>
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" @attach-record=";(childListDlg = false), (listItemsDlg = true)" />
+    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true; }" />
   </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 e31e5873a8..0c31e3deae 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,6 +1,9 @@
 <script lang="ts" setup>
 import { watchEffect } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
+import { useLTARStoreOrThrow, useVModel } from '#imports'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { ColumnInj, IsFormInj } from '~/context'
 import { IsFormInj } from '~/context'
 import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
@@ -9,6 +12,7 @@ const emit = defineEmits(['update:modelValue', 'attachRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 const isForm = inject(IsFormInj, false)
+const column = inject(ColumnInj)
 
 const {
   childrenList,
@@ -21,6 +25,8 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
+const { isNew, state } = useSmartsheetRowStoreOrThrow()
+
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
     loadChildrenList()
@@ -51,15 +57,18 @@ const container = computed(() =>
 
         <a-button type="primary" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
-            <!-- todo: row is not defined? @click="unlinkRow(row)" -->
-            <MdiLinkVariantRemove class="text-xs text-white" />
+            <MdiLinkVariantRemove class="text-xs text-white" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
           </div>
         </a-button>
       </div>
-      <template v-if="childrenList?.pageInfo?.totalRows">
+      <template v-if="(isNew && state?.[column?.title]?.length) || childrenList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
-          <a-card v-for="(row, i) of childrenList?.list ?? []" :key="i" class="ma-2 hover:(!bg-gray-200/50 shadow-md)">
+          <a-card
+            v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
+            :key="i"
+            class="ma-2 hover:(!bg-gray-200/50 shadow-md)"
+          >
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
                 {{ row[relatedTablePrimaryValueProp]
@@ -74,7 +83,7 @@ const container = computed(() =>
           </a-card>
         </div>
         <a-pagination
-          v-if="childrenList?.pageInfo"
+          v-if="!isNew && childrenList?.pageInfo"
           v-model:current="childrenListPagination.page"
           v-model:page-size="childrenListPagination.size"
           class="mt-2 mx-auto"
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 82ae0ae503..696e196fad 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
+import type { ColumnType } from 'nocodb-sdk'
+import { useLTARStoreOrThrow, useVModel } from '#imports'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { ColumnInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
 
@@ -7,6 +10,8 @@ const emit = defineEmits(['update:modelValue', 'addNewRecord'])
 
 const vModel = useVModel(props, 'modelValue', emit)
 
+const column = inject(ColumnInj)
+
 const {
   childrenExcludedList,
   loadChildrenExcludedList,
@@ -16,16 +21,22 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-watch(vModel, (nextVal) => {
-  if (nextVal) {
-    loadChildrenExcludedList()
-  }
-})
+const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
 
 const linkRow = async (row: Record<string, any>) => {
-  await link(row)
+  if (isNew.value) {
+    addLTARRef(row, column?.value as ColumnType)
+  } else {
+    await link(row)
+  }
   vModel.value = false
 }
+
+watch(vModel, () => {
+  if (vModel.value) {
+    loadChildrenExcludedList(isNew.value)
+  }
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 691564bd84..436a1b40ea 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -61,28 +61,49 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
     const relatedTablePrimaryValueProp = computed(() => {
       return (relatedTableMeta?.value?.columns?.find((c) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
+
+    const relatedTablePrimaryKeyProps = computed(() => {
+      return relatedTableMeta?.value?.columns?.filter((c) => c.pk)?.map((c) => c.title) ?? []
+    })
     const primaryValueProp = computed(() => {
       return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
-    const loadChildrenExcludedList = async () => {
+    const loadChildrenExcludedList = async (isNewRow = false) => {
       try {
-        childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
-          NOCO,
-          project.value.id as string,
-          meta.value.id,
-          rowId.value,
-          colOptions.type as 'mm' | 'hm',
-          column?.value?.title,
-          // todo: swagger type correction
-          {
-            limit: childrenExcludedListPagination.size,
-            offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
-            where:
-              childrenExcludedListPagination.query &&
-              `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
-          } as any,
-        )
+        /** if new row load all records */
+        if (isNewRow) {
+          childrenExcludedList.value = await $api.dbTableRow.list(
+            NOCO,
+            project.value.id as string,
+            relatedTableMeta?.value?.id as string,
+            {
+              limit: childrenExcludedListPagination.size,
+              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              where:
+                childrenExcludedListPagination.query &&
+                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+              fields: [relatedTablePrimaryValueProp.value, ...relatedTablePrimaryKeyProps.value],
+            } as any,
+          )
+        } else {
+          childrenExcludedList.value = await $api.dbTableRow.nestedChildrenExcludedList(
+            NOCO,
+            project.value.id as string,
+            meta.value.id,
+            rowId.value,
+            colOptions.type as 'mm' | 'hm',
+            column?.value?.title,
+            // todo: swagger type correction
+            {
+              limit: childrenExcludedListPagination.size,
+              offset: childrenExcludedListPagination.size * (childrenExcludedListPagination.page - 1),
+              where:
+                childrenExcludedListPagination.query &&
+                `(${relatedTablePrimaryValueProp.value},like,${childrenExcludedListPagination.query})`,
+            } as any,
+          )
+        }
       } catch (e: any) {
         notification.error({
           message: 'Failed to load list',
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index c0112bc790..6c8f5e2bda 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -1,21 +1,33 @@
-import type { TableType } from 'nocodb-sdk'
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useInjectionState } from '#imports'
 import type { Row } from '~/composables/useViewData'
+import { useVirtualCell } from '~/composables/useVirtualCell'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const state = ref({})
+  const state = ref<Record<string, Record<string, any> | Record<string, any>[]>>({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)
 
   // actions
+  const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const { isHm, isMm } = useVirtualCell(ref(column))
+    if (isHm || isMm) {
+      state.value[column.title!] = state.value[column.title!] || []
+      state.value[column.title!].push(value)
+    } else {
+      state.value[column.title!] = value
+    }
+  }
 
   return {
     row,
     state,
     isNew,
+    // todo: use better name
+    addLTARRef,
   }
 }, 'smartsheet-row-store')
 

From f4976d9aa6ce0025b840e217a80267c7e5705d29 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 17:27:52 +0530
Subject: [PATCH 60/76] fix(gui-v2): correction in bt local state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue | 2 +-
 packages/nc-gui-v2/composables/useSmartsheetRowStore.ts  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index edb8fbafd3..d0b04677f9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -45,7 +45,7 @@ const value = computed(() => {
   <div class="flex w-full chips-wrapper align-center" :class="{ active }">
     <div class="chips d-flex align-center flex-grow">
       <template v-if="value">
-        <ItemChip :item="value" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 6c8f5e2bda..14dcc1f06f 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -13,7 +13,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
 
   // actions
   const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm } = useVirtualCell(ref(column))
+    const { isHm, isMm } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!] = state.value[column.title!] || []
       state.value[column.title!].push(value)

From 747d1e9ee765ca7ec16f342073cafab50b67ce4c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 17:44:27 +0530
Subject: [PATCH 61/76] feat(gui-v2): integrate unlink with local state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/BelongsTo.vue         | 13 +++++++++++--
 .../nc-gui-v2/components/virtual-cell/HasMany.vue | 13 ++++++++++++-
 .../components/virtual-cell/ManyToMany.vue        | 14 ++++++++++++--
 .../virtual-cell/components/ItemChip.vue          |  8 +++++---
 .../virtual-cell/components/ListChildItems.vue    | 13 +++++++++----
 .../composables/useSmartsheetRowStore.ts          | 15 +++++++++++++--
 6 files changed, 62 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index d0b04677f9..2bbeb3cf85 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -30,7 +30,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
 )
 
 await loadRelatedTableMeta()
-const { state, isNew } = useSmartsheetRowStoreOrThrow()
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const value = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
@@ -39,13 +40,21 @@ const value = computed(() => {
   }
   return null
 })
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <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">
-        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlink(value)" />
+        <ItemChip :item="value" :value="value[relatedTablePrimaryValueProp]" @unlink="unlinkRef(value)" />
       </template>
     </div>
     <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 49fe4b00ad..2b4924e2bf 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -36,6 +36,8 @@ const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, un
 )
 await loadRelatedTableMeta()
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
+
 const localCellValue = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
@@ -56,6 +58,15 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
@@ -63,7 +74,7 @@ const cells = computed(() =>
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 779ccc5453..9bd8e8abed 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -32,7 +32,7 @@ const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvid
 
 await loadRelatedTableMeta()
 
-const { state, isNew } = useSmartsheetRowStoreOrThrow()
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 const localCellValue = computed(() => {
   if (cellValue?.value) {
@@ -54,6 +54,16 @@ const cells = computed(() =>
     return [...acc, { value, item: curr }]
   }, [] as any[]),
 )
+
+
+
+const unlinkRef = async (rec: Record<string, any>) => {
+  if (isNew.value) {
+    removeLTARRef(rec, column?.value as ColumnType)
+  } else {
+    await unlink(rec)
+  }
+}
 </script>
 
 <template>
@@ -61,7 +71,7 @@ const cells = computed(() =>
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlink(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
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 5364d09b76..a7c90766ea 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,21 +1,23 @@
 <script setup lang="ts">
-import { ActiveCellInj, ReadonlyInj } from '~/context'
+import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
   value?: string | number | boolean
+  item?: any
 }
 
-const { value } = defineProps<Props>()
+const { value, item } = defineProps<Props>()
 const emit = defineEmits(['unlink'])
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, ref(false))
+const isForm = inject(IsFormInj)
 </script>
 
 <template>
   <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
     <span class="name">{{ value }}</span>
-    <div v-show="active" v-if="!readonly" class="flex align-center">
+    <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
       <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
     </div>
   </div>
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 0c31e3deae..091b0ec0fe 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { watchEffect } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
+import type { ColumnType } from 'nocodb-sdk'
 import { useLTARStoreOrThrow, useVModel } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj, IsFormInj } from '~/context'
@@ -25,7 +26,7 @@ const {
   getRelatedTableRowId,
 } = useLTARStoreOrThrow()
 
-const { isNew, state } = useSmartsheetRowStoreOrThrow()
+const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
@@ -34,10 +35,14 @@ watch([vModel, isForm], (nextVal) => {
 })
 
 const unlinkRow = async (row: Record<string, any>) => {
-  await unlink(row)
-
-  await loadChildrenList()
+  if (isNew.value) {
+    removeLTARRef(row, column?.value as ColumnType)
+  } else {
+    await unlink(row)
+    await loadChildrenList()
+  }
 }
+
 const container = computed(() =>
   isForm
     ? h('div', {
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 14dcc1f06f..20a5352596 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -6,7 +6,7 @@ import { useVirtualCell } from '~/composables/useVirtualCell'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
   // state
-  const state = ref<Record<string, Record<string, any> | Record<string, any>[]>>({})
+  const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
   // getters
   const isNew = computed(() => row.value?.rowMeta?.new)
@@ -16,18 +16,29 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     const { isHm, isMm } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!] = state.value[column.title!] || []
-      state.value[column.title!].push(value)
+      state.value[column.title!]!.push(value)
     } else {
       state.value[column.title!] = value
     }
   }
 
+  // actions
+  const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
+    const { isHm, isMm } = $(useVirtualCell(ref(column)))
+    if (isHm || isMm) {
+      state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
+    } else {
+      state.value[column.title!] = null
+    }
+  }
+
   return {
     row,
     state,
     isNew,
     // todo: use better name
     addLTARRef,
+    removeLTARRef,
   }
 }, 'smartsheet-row-store')
 

From b88517d696e244394cf4041bc6faa4ad8902cb4c Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 17:51:15 +0530
Subject: [PATCH 62/76] fix(gui-v2): pass isNewRow reference to LTAR store

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue | 3 ++-
 packages/nc-gui-v2/components/virtual-cell/HasMany.vue   | 9 +++------
 .../nc-gui-v2/components/virtual-cell/ManyToMany.vue     | 4 ++--
 .../components/virtual-cell/components/ListItems.vue     | 2 +-
 packages/nc-gui-v2/composables/useLTARStore.ts           | 8 ++++----
 5 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 2bbeb3cf85..a894fbd2cb 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -23,14 +23,15 @@ const listItemsDlg = ref(false)
 
 const isForm = inject(IsFormInj)
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
 
 await loadRelatedTableMeta()
-const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 const value = computed(() => {
   if (cellValue?.value) {
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 2b4924e2bf..ebe91458fe 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,10 +4,9 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useProvideSmartsheetRowStore, useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
-
 import { useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
@@ -27,17 +26,15 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
-const { state, isNew } = useSmartsheetRowStoreOrThrow()
-
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
 await loadRelatedTableMeta()
 
-const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-
 const localCellValue = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 9bd8e8abed..b5c793ddc1 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -24,16 +24,16 @@ const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
+const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
+  isNew,
   reloadTrigger.trigger,
 )
 
 await loadRelatedTableMeta()
 
-const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-
 const localCellValue = computed(() => {
   if (cellValue?.value) {
     return cellValue?.value
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 696e196fad..dde6acad7e 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -34,7 +34,7 @@ const linkRow = async (row: Record<string, any>) => {
 
 watch(vModel, () => {
   if (vModel.value) {
-    loadChildrenExcludedList(isNew.value)
+    loadChildrenExcludedList()
   }
 })
 </script>
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index 436a1b40ea..d3928940bf 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -1,5 +1,5 @@
 import type { ColumnType, LinkToAnotherRecordType, PaginatedType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
 import { Modal, notification } from 'ant-design-vue'
 import { useInjectionState, useMetas, useProject } from '#imports'
 import { NOCO } from '~/lib'
@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
@@ -69,10 +69,10 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       return (meta?.value?.columns?.find((c: Required<ColumnType>) => c.pv) || relatedTableMeta?.value?.columns?.[0])?.title
     })
 
-    const loadChildrenExcludedList = async (isNewRow = false) => {
+    const loadChildrenExcludedList = async () => {
       try {
         /** if new row load all records */
-        if (isNewRow) {
+        if (isNewRow?.value) {
           childrenExcludedList.value = await $api.dbTableRow.list(
             NOCO,
             project.value.id as string,

From 6ac0bf8d39b1d5141c535a86682033566b0b6944 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 20:21:19 +0530
Subject: [PATCH 63/76] feat(guiv2): save record(new) with LTAR cell using
 expanded form

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 15 +++-
 .../nc-gui-v2/components/smartsheet/Row.vue   | 15 ++--
 .../smartsheet/expanded-form/Header.vue       | 16 ++++-
 .../smartsheet/expanded-form/index.vue        | 18 ++++-
 .../components/ListChildItems.vue             |  2 +-
 .../composables/useExpandedFormStore.ts       |  5 +-
 .../composables/useSmartsheetRowStore.ts      | 72 +++++++++++++++++--
 7 files changed, 124 insertions(+), 19 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6b0172e0a2..f9294d87c3 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -60,6 +60,7 @@ const contextMenu = ref(false)
 const contextMenuTarget = ref(false)
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<Row>()
+const expandedFormRowState = ref<Record<string, any>>()
 
 const visibleColLength = $computed(() => fields.value?.length)
 
@@ -274,8 +275,9 @@ const onNavigate = (dir: NavigateDir) => {
   }
 }
 
-const expandForm = (row: Row) => {
+const expandForm = (row: Row, state: Record<string, any>) => {
   expandedFormRow.value = row
+  expandedFormRowState.value = state
   expandedFormDlg.value = true
 }
 </script>
@@ -330,6 +332,7 @@ const expandForm = (row: Row) => {
           </thead>
           <tbody>
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
+              <template #default="{ state }">
               <tr class="nc-grid-row">
                 <td key="row-index" class="caption nc-grid-cell group">
                   <div class="flex items-center w-[80px]">
@@ -343,7 +346,7 @@ const expandForm = (row: Row) => {
                       <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                         <MdiArrowExpand
                           class="select-none transform hover:(text-pink-500 scale-120)"
-                          @click="expandedFormDlg = true"
+                          @click="expandForm(row, state)"
                         />
                       </div>
                     </div>
@@ -389,6 +392,7 @@ const expandForm = (row: Row) => {
                   </div>
                 </td>
               </tr>
+              </template>
             </SmartsheetRow>
 
             <tr v-if="!isLocked">
@@ -427,7 +431,12 @@ const expandForm = (row: Row) => {
     </div>
 
     <SmartsheetPagination />
-    <SmartsheetExpandedForm v-if="expandedFormRow" v-model="expandedFormDlg" :row="expandedFormRow" />
+    <SmartsheetExpandedForm
+      v-if="expandedFormRow"
+      v-model="expandedFormDlg"
+      :row="expandedFormRow"
+      :state="expandedFormRowState"
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index 2775b1fe68..b96120b655 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -12,12 +12,19 @@ const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'naviga
 const row = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { isNew, state } = useProvideSmartsheetRowStore(meta, row)
-watch(row, () => {
-  state.value = {}
+const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, row)
+
+// on changing isNew(new record insert) status sync LTAR cell values
+watch(isNew, async (nextVal, prevVal) => {
+  if (prevVal && !nextVal) {
+    await syncLTARRefs(row.value.row)
+    // update row values without invoking api
+    row.value.row = { ...row.value.row, ...state.value }
+    row.value.oldRow = { ...row.value.row, ...state.value }
+  }
 })
 </script>
 
 <template>
-  <slot />
+  <slot :state="state" />
 </template>
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 236321daca..d559bacb81 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,12 +1,24 @@
 <script lang="ts" setup>
-import { computed, useExpandedFormStoreOrThrow, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
+import { computed, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
+import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { useExpandedFormStoreOrThrow } from '~/composables/useExpandedFormStore'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { commentsDrawer, row, primaryValue, save } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
+const save = async () => {
+  if (isNew.value) {
+    const data = await _save()
+    await syncLTARRefs(data)
+  } else {
+    await _save()
+  }
+}
+
 const drawerToggleIcon = computed(() => (commentsDrawer.value ? MdiDoorOpen : MdiDoorClosed))
 
 // todo: accept as a prop / inject
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 6ae6138697..c3f45ab26b 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
-import { Ref, computed, provide, toRef } from 'vue'
+import { Ref, computed, provide, toRef, watch } from 'vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
 import { useSmartsheetStoreOrThrow } from '~/composables'
@@ -12,12 +12,14 @@ import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 interface Props {
   modelValue: string | null
   row: Row
+  state?: Record<string, any> | null
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
 const fields = inject(FieldsInj, ref([]))
 const row = toRef(props, 'row')
+const state = toRef(props, 'state')
 
 const { meta } = useSmartsheetStoreOrThrow()
 
@@ -26,7 +28,19 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { commentsDrawer, changedColumns } = useProvideExpandedFormStore(meta, row)
+const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+
+watch(
+  state,
+  () => {
+    if (state.value) {
+      rowState.value = state.value
+    } else {
+      rowState.value = {}
+    }
+  },
+  { immediate: true },
+)
 
 const isExpanded = useVModel(props, 'modelValue', emits)
 </script>
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 091b0ec0fe..6544cc9794 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -60,7 +60,7 @@ const container = computed(() =>
 
         <MdiReload  v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
-        <a-button type="primary" size="small" @click="emit('attachRecord')">
+        <a-button type="primary" class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
             <MdiLinkVariantRemove class="text-xs text-white" @click="unlinkRow(row)" />
             Link to '{{ meta.title }}'
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index c6b9d2a9fa..db29be43ef 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -101,6 +101,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const save = async () => {
+    let data;
     try {
       // todo:
       // if (this.presetValues) {
@@ -116,7 +117,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }, {} as Record<string, any>)
 
       if (row.value.rowMeta.new) {
-        const data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
+         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         /* todo:
            // save hasmany and manytomany relations from local state
@@ -127,7 +128,6 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
                 }
               }
             } */
-
         row.value = {
           row: data,
           rowMeta: {},
@@ -174,6 +174,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       notification.error({ message: `Failed to update row`, description: await extractSdkResponseErrorMsg(e) })
     }
     $e('a:row-expand:add')
+    return data
   }
 
   return {
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 20a5352596..49df3c57e2 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -1,10 +1,21 @@
-import type { ColumnType, TableType } from 'nocodb-sdk'
+import { notification } from 'ant-design-vue'
+import { UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
+import { useNuxtApp } from '#app'
 import { useInjectionState } from '#imports'
+import { useMetas } from '~/composables/useMetas'
+import { useProject } from '~/composables/useProject'
 import type { Row } from '~/composables/useViewData'
 import { useVirtualCell } from '~/composables/useVirtualCell'
+import { NOCO } from '~/lib'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
 const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState((meta: Ref<TableType>, row: Ref<Row>) => {
+  const { $api } = useNuxtApp()
+  const { project } = useProject()
+  const { metas } = useMetas()
+
   // state
   const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
@@ -13,25 +24,75 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
 
   // actions
   const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm } = $(useVirtualCell(ref(column)))
+    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!] = state.value[column.title!] || []
       state.value[column.title!]!.push(value)
-    } else {
+    } else if (isBt) {
       state.value[column.title!] = value
     }
   }
 
   // actions
   const removeLTARRef = async (value: Record<string, any>, column: ColumnType) => {
-    const { isHm, isMm } = $(useVirtualCell(ref(column)))
+    const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
     if (isHm || isMm) {
       state.value[column.title!]?.splice(state.value[column.title!]?.indexOf(value), 1)
-    } else {
+    } else if (isBt) {
       state.value[column.title!] = null
     }
   }
 
+  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type) => {
+    try {
+      await $api.dbTableRow.nestedAdd(
+        NOCO,
+        project.value.title as string,
+        meta.value.title as string,
+        rowId,
+        type,
+        column.title as string,
+        relatedRowId,
+      )
+    } catch (e) {
+      notification.error({
+        message: 'Linking failed',
+        description: await extractSdkResponseErrorMsg(e),
+      })
+    }
+  }
+
+  /** sync LTAR relations kept in local state */
+  const syncLTARRefs = async (row: Record<string, any>) => {
+    const id = extractPkFromRow(row, meta.value.columns as ColumnType[])
+    for (const column of meta?.value?.columns ?? []) {
+      if (column.uidt !== UITypes.LinkToAnotherRecord) continue
+      const colOptions = column?.colOptions as LinkToAnotherRecordType
+
+      const { isHm, isMm, isBt } = $(useVirtualCell(ref(column)))
+      const relatedTableMeta = metas.value?.[colOptions?.fk_related_model_id as string]
+
+      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,
+          )
+        }
+      } else if (isBt && state.value?.[column.title!]) {
+        await linkRecord(
+          id,
+          extractPkFromRow(state.value?.[column.title!], relatedTableMeta.columns as ColumnType[]),
+          column,
+          colOptions.type,
+        )
+      }
+    }
+  }
+
   return {
     row,
     state,
@@ -39,6 +100,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     // todo: use better name
     addLTARRef,
     removeLTARRef,
+    syncLTARRefs,
   }
 }, 'smartsheet-row-store')
 

From 001cb8080411229c88337bfe34c9748f2b19e0d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 01:15:14 +0530
Subject: [PATCH 64/76] feat(migration): integrate expanded form cancel button

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            | 27 +++++++++++++++++++
 .../smartsheet/expanded-form/Header.vue       |  4 ++-
 .../smartsheet/expanded-form/index.vue        |  2 +-
 3 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index ad183207f6..3f5208c2af 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -74,12 +74,19 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
+    CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
+    CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
+    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
+    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
+    MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
+    MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['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']
+    MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
     MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
@@ -96,6 +103,10 @@ declare module '@vue/runtime-core' {
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
+    MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
+    MdiContentSave: typeof import('~icons/mdi/content-save')['default']
+    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -110,6 +121,13 @@ declare module '@vue/runtime-core' {
     MdiInformation: typeof import('~icons/mdi/information')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
+    MdiDownload: typeof import('~icons/mdi/download')['default']
+    MdiDrag: typeof import('~icons/mdi/drag')['default']
+    MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
+    MdiFlag: typeof import('~icons/mdi/flag')['default']
+    MdiHeart: typeof import('~icons/mdi/heart')['default']
+    MdiHook: typeof import('~icons/mdi/hook')['default']
+    MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
@@ -120,6 +138,11 @@ declare module '@vue/runtime-core' {
     MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
+    MdiMagnify: typeof import('~icons/mdi/magnify')['default']
+    MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
+    MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
+    MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
+    MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
     MdiSearch: typeof import('~icons/mdi/search')['default']
     MdiShieldLockOutline: typeof import('~icons/mdi/shield-lock-outline')['default']
@@ -131,6 +154,10 @@ declare module '@vue/runtime-core' {
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
+    MdiStar: typeof import('~icons/mdi/star')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
+    MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
+    MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
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 d559bacb81..77316418b2 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -10,6 +10,8 @@ const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreO
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
+const emit = defineEmits(['cancel'])
+
 const save = async () => {
   if (isNew.value) {
     const data = await _save()
@@ -41,7 +43,7 @@ const iconColor = '#1890ff'
     <div class="flex-grow" />
     <mdi-reload />
     <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
-    <a-button size="small" class="!text">
+    <a-button size="small" class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
     </a-button>
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 c3f45ab26b..35e7d796b5 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -47,7 +47,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <Header />
+    <Header  @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">

From d65aaa687fa62717309fa639279d6ccea4351f07 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 02:28:26 +0530
Subject: [PATCH 65/76] feat(migration): show expanded form on clicking chips

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  1 +
 .../smartsheet/expanded-form/Header.vue       |  7 ++--
 .../smartsheet/expanded-form/index.vue        | 41 ++++++++++++++++---
 .../components/virtual-cell/HasMany.vue       |  8 +++-
 .../components/virtual-cell/ManyToMany.vue    |  8 +++-
 .../virtual-cell/components/ItemChip.vue      | 22 +++++++++-
 .../composables/useExpandedFormStore.ts       |  4 +-
 .../composables/useSmartsheetRowStore.ts      |  7 +---
 8 files changed, 77 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index f9294d87c3..95a9dbd81b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -436,6 +436,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
       v-model="expandedFormDlg"
       :row="expandedFormRow"
       :state="expandedFormRowState"
+      :meta="meta"
     />
   </div>
 </template>
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 77316418b2..b0240deaac 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -5,13 +5,12 @@ import { useExpandedFormStoreOrThrow } from '~/composables/useExpandedFormStore'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
+const emit = defineEmits(['cancel'])
 const { meta } = useSmartsheetStoreOrThrow()
 const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
-const emit = defineEmits(['cancel'])
-
 const save = async () => {
   if (isNew.value) {
     const data = await _save()
@@ -41,8 +40,8 @@ const iconColor = '#1890ff'
       <template v-if="primaryValue">: {{ primaryValue }}</template>
     </h5>
     <div class="flex-grow" />
-    <mdi-reload />
-    <component :is="drawerToggleIcon" class="" @click="commentsDrawer = !commentsDrawer" />
+    <mdi-reload class="cursor-pointer select-none" />
+    <component :is="drawerToggleIcon" class="cursor-pointer select-none" @click="commentsDrawer = !commentsDrawer" />
     <a-button size="small" class="!text" @click="emit('cancel')">
       <!-- Cancel -->
       {{ $t('general.cancel') }}
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 35e7d796b5..f7dec4359e 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import type { ColumnType, TableType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { useVModel } from '@vueuse/core'
-import { Ref, computed, provide, toRef, watch } from 'vue'
+import { computed, provide, toRef, watch } from 'vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
-import { useSmartsheetStoreOrThrow } from '~/composables'
+import { NOCO } from '~/lib'
+import { extractPkFromRow } from '~/utils'
+import { useNuxtApp } from '#app'
+import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
@@ -13,15 +17,42 @@ interface Props {
   modelValue: string | null
   row: Row
   state?: Record<string, any> | null
+  meta: TableType
+  loadRow?: boolean
+
+  useMetaFields ?:boolean
 }
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
-const fields = inject(FieldsInj, ref([]))
+const _fields = inject(FieldsInj, ref([]))
 const row = toRef(props, 'row')
 const state = toRef(props, 'state')
+const meta = toRef(props, 'meta')
+
+const fields = computed(() => {
+  if (props.useMetaFields) {
+    return meta.value.columns ?? []
+  }
+  return _fields.value
+})
+
+provide(MetaInj, meta)
+
+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 = {}
+}
 
-const { meta } = useSmartsheetStoreOrThrow()
+useProvideSmartsheetStore(ref({}) as any, meta)
 
 provide(IsFormInj, true)
 
@@ -47,7 +78,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
 
 <template>
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
-    <Header  @cancel="isExpanded = false" />
+    <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
       <div class="flex">
         <div class="flex-grow">
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index ebe91458fe..e74210c260 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -71,8 +71,12 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
-
+          <ItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="ch"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)" />
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...
           </span>
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index b5c793ddc1..3bb4ed0994 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -71,7 +71,13 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip v-for="(cell, i) of cells" :key="i" :value="cell.value" @unlink="unlinkRef(cell.item)" />
+          <ItemChip
+            v-for="(cell, i) of cells"
+            :key="i"
+            :item="ch"
+            :value="cell.value"
+            @unlink="unlinkRef(cell.item)"
+          />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
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 a7c90766ea..fb9220120f 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useLTARStoreOrThrow } from '~/composables'
 import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
 import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
@@ -8,18 +9,37 @@ interface Props {
 }
 
 const { value, item } = defineProps<Props>()
+
 const emit = defineEmits(['unlink'])
+
+const { relatedTableMeta } = useLTARStoreOrThrow()
+
 const readonly = inject(ReadonlyInj, false)
 const active = inject(ActiveCellInj, ref(false))
 const isForm = inject(IsFormInj)
+
+const expandedFormDlg = ref(false)
 </script>
 
 <template>
-  <div class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]" :class="{ active }">
+  <div
+    class="group py-1 px-2 flex align-center gap-1 bg-gray-200/50 hover:bg-gray-200 rounded-[20px]"
+    :class="{ active }"
+    @click="expandedFormDlg = true"
+  >
     <span class="name">{{ value }}</span>
     <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
       <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
     </div>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg"
+      v-model="expandedFormDlg"
+      :row="{ row: item }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index db29be43ef..b0a359e459 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -101,7 +101,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
   }
 
   const save = async () => {
-    let data;
+    let data
     try {
       // todo:
       // if (this.presetValues) {
@@ -117,7 +117,7 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       }, {} as Record<string, any>)
 
       if (row.value.rowMeta.new) {
-         data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
+        data = await $api.dbTableRow.create('noco', project.value.title as string, meta.value.title, updateOrInsertObj)
 
         /* todo:
            // save hasmany and manytomany relations from local state
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 49df3c57e2..5442f81f0f 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -75,12 +75,7 @@ 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)
         }
       } else if (isBt && state.value?.[column.title!]) {
         await linkRecord(

From 2740382c0dc23814f0cc702ca938228ca7da5df1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 03:02:16 +0530
Subject: [PATCH 66/76] feat(migration): add row option in list modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/index.vue        |  6 +-
 .../components/virtual-cell/HasMany.vue       |  1 +
 .../virtual-cell/components/ItemChip.vue      |  2 +-
 .../components/ListChildItems.vue             | 27 ++++++++-
 .../virtual-cell/components/ListItems.vue     | 55 ++++++++++++++++++-
 5 files changed, 83 insertions(+), 8 deletions(-)

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 f7dec4359e..7676b079b5 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -20,7 +20,7 @@ interface Props {
   meta: TableType
   loadRow?: boolean
 
-  useMetaFields ?:boolean
+  useMetaFields?: boolean
 }
 
 const props = defineProps<Props>()
@@ -39,6 +39,8 @@ const fields = computed(() => {
 
 provide(MetaInj, meta)
 
+const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
+
 const { $api } = useNuxtApp()
 if (props.loadRow) {
   const { project } = useProject()
@@ -59,8 +61,6 @@ provide(IsFormInj, true)
 // accept as a prop
 // const row: Row = { row: {}, rowMeta: {}, oldRow: {} }
 
-const { commentsDrawer, changedColumns, state: rowState } = useProvideExpandedFormStore(meta, row)
-
 watch(
   state,
   () => {
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index e74210c260..d5b61a6e61 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -68,6 +68,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
+    {{isNew}}
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
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 fb9220120f..b9efafd542 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -29,7 +29,7 @@ const expandedFormDlg = ref(false)
   >
     <span class="name">{{ value }}</span>
     <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click="emit('unlink')" />
+      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <SmartsheetExpandedForm
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 6544cc9794..5dbff2bc06 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -24,12 +24,14 @@ const {
   relatedTablePrimaryValueProp,
   unlink,
   getRelatedTableRowId,
+  relatedTableMeta,
 } = useLTARStoreOrThrow()
 
 const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
+    debugger
     loadChildrenList()
   }
 })
@@ -50,6 +52,9 @@ const container = computed(() =>
       })
     : Modal,
 )
+
+const expandedFormDlg = ref(false)
+const expandedFormRow = ref()
 </script>
 
 <template>
@@ -73,6 +78,12 @@ const container = computed(() =>
             v-for="(row, i) of childrenList?.list ?? state?.[column?.title] ?? []"
             :key="i"
             class="ma-2 hover:(!bg-gray-200/50 shadow-md)"
+            @click="
+              () => {
+                expandedFormRow = row
+                expandedFormDlg = true
+              }
+            "
           >
             <div class="flex align-center">
               <div class="flex-grow overflow-hidden min-w-0">
@@ -81,8 +92,11 @@ const container = computed(() =>
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="unlinkRow(row)" />
-                <MdiDeleteOutline class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click="deleteRelatedRow(row)" />
+                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click.stop="unlinkRow(row)" />
+                <MdiDeleteOutline
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="deleteRelatedRow(row)"
+                />
               </div>
             </div>
           </a-card>
@@ -99,6 +113,15 @@ const container = computed(() =>
       </template>
       <a-empty v-else class="my-10" />
     </div>
+
+    <SmartsheetExpandedForm
+      v-if="expandedFormDlg && expandedFormRow"
+      v-model="expandedFormDlg"
+      :row="{ row: expandedFormRow }"
+      :meta="relatedTableMeta"
+      load-row
+      use-meta-fields
+    />
   </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 dde6acad7e..8d3e6130de 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import type { ColumnType } from 'nocodb-sdk'
+import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
+import { computed } from 'vue'
 import { useLTARStoreOrThrow, useVModel } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj } from '~/context'
@@ -19,6 +21,9 @@ const {
   relatedTablePrimaryValueProp,
   link,
   getRelatedTableRowId,
+  relatedTableMeta,
+  meta,
+  row,
 } = useLTARStoreOrThrow()
 
 const { addLTARRef, isNew } = useSmartsheetRowStoreOrThrow()
@@ -37,6 +42,42 @@ watch(vModel, () => {
     loadChildrenExcludedList()
   }
 })
+
+const expandedFormDlg = ref(false)
+
+/** populate initial state for a new row which is parent/child of current record */
+const newRowState = computed(() => {
+  const colOpt = (column?.value as ColumnType)?.colOptions as LinkToAnotherRecordType
+  const colInRelatedTable: ColumnType = relatedTableMeta.value?.columns?.find((col) => {
+    if (col.uidt !== UITypes.LinkToAnotherRecord) return false
+    if (col?.colOptions?.fk_related_model_id !== meta.value.id) return false
+
+    if (colOpt.type === RelationTypes.MANY_TO_MANY && col?.colOptions?.type === RelationTypes.MANY_TO_MANY) {
+      return (
+        colOpt.fk_parent_column_id === col.colOptions.fk_child_column_id &&
+        colOpt.fk_child_column_id === col.colOptions.fk_parent_column_id
+      )
+    } else {
+      return (
+        colOpt.fk_parent_column_id === col.colOptions.fk_parent_column_id &&
+        colOpt.fk_child_column_id === col.colOptions.fk_child_column_id
+      )
+    }
+    return false
+  })
+  const relatedTableColOpt = colInRelatedTable?.colOptions as LinkToAnotherRecordType
+  if (!relatedTableColOpt) return {}
+
+  if (relatedTableColOpt.type === RelationTypes.BELONGS_TO) {
+    return {
+      [colInRelatedTable.title as string]: row,
+    }
+  } else {
+    return {
+      [colInRelatedTable.title as string]: [row],
+    }
+  }
+})
 </script>
 
 <template>
@@ -51,7 +92,7 @@ watch(vModel, () => {
         ></a-input>
         <div class="flex-1" />
         <MdiReload class="cursor-pointer text-gray-500" @click="loadChildrenExcludedList" />
-        <a-button type="primary" size="small" @click="emit('addNewRecord')">Add new record</a-button>
+        <a-button type="primary" size="small" @click="expandedFormDlg = true">Add new record</a-button>
       </div>
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
@@ -78,6 +119,16 @@ watch(vModel, () => {
         />
       </template>
       <a-empty v-else class="my-10" />
+
+      <SmartsheetExpandedForm
+        v-if="expandedFormDlg"
+        v-model="expandedFormDlg"
+        :meta="relatedTableMeta"
+        :row="{ row: {}, oldRow: {}, rowMeta: {new:true} }"
+        :state="newRowState"
+        load-row
+        use-meta-fields
+      />
     </div>
   </a-modal>
 </template>

From 0ea5f3683e2020da1faad03c16d5faeb2f70e252 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 11:48:11 +0530
Subject: [PATCH 67/76] refactor(gui-v2): form view scrollbar

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/expanded-form/index.vue     | 11 ++++++++---
 .../nc-gui-v2/components/virtual-cell/HasMany.vue     |  1 -
 .../virtual-cell/components/ListChildItems.vue        |  1 -
 .../components/virtual-cell/components/ListItems.vue  |  2 +-
 4 files changed, 9 insertions(+), 6 deletions(-)

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 7676b079b5..2d86bbef69 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -80,9 +80,9 @@ const isExpanded = useVModel(props, 'modelValue', emits)
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
-      <div class="flex">
-        <div class="flex-grow">
-          <div class="h-550px overflow-auto w-[500px] mx-auto">
+      <div class="flex h-full nc-form-wrapper">
+        <div class="flex-grow f-full overflow-auto">
+          <div class="w-[500px] mx-auto">
             <div v-for="col in fields" :key="col.title" class="mt-2">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
               <SmartsheetHeaderCell v-else :column="col" />
@@ -131,4 +131,9 @@ const isExpanded = useVModel(props, 'modelValue', emits)
     @apply w-[250px] border-left-1;
   }
 }
+
+.nc-form-wrapper {
+  max-height: max(calc(90vh - 100px), 600px);
+  height: max-content !important;
+}
 </style>
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index d5b61a6e61..e74210c260 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -68,7 +68,6 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
 <template>
   <div class="flex align-center items-center gap-1 w-full chips-wrapper">
-    {{isNew}}
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
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 5dbff2bc06..1178fc29b6 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -31,7 +31,6 @@ const { isNew, state, removeLTARRef } = useSmartsheetRowStoreOrThrow()
 
 watch([vModel, isForm], (nextVal) => {
   if (nextVal[0] || nextVal[1]) {
-    debugger
     loadChildrenList()
   }
 })
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 8d3e6130de..7977f36c89 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -124,7 +124,7 @@ const newRowState = computed(() => {
         v-if="expandedFormDlg"
         v-model="expandedFormDlg"
         :meta="relatedTableMeta"
-        :row="{ row: {}, oldRow: {}, rowMeta: {new:true} }"
+        :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
         :state="newRowState"
         load-row
         use-meta-fields

From 0cbb4dc451c7e9af3c8a01794ab61fe0eeb0954e Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 12:20:49 +0530
Subject: [PATCH 68/76] refactor(gui-v2): auto scroll to last comment or audit

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue     | 97 +++++++++++--------
 .../smartsheet/expanded-form/index.vue        |  8 +-
 2 files changed, 62 insertions(+), 43 deletions(-)

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 01f93f2a8a..8c23a1f763 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,60 +1,79 @@
 <script setup lang="ts">
 import { useExpandedFormStoreOrThrow } from '#imports'
+import { nextTick } from '#imports'
 import { enumColor, timeAgo } from '~/utils'
 import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, row } =
   useExpandedFormStoreOrThrow()
 
+const commentsWrapperEl = ref<HTMLDivElement>()
+
+
 await loadCommentsAndLogs()
+
+watch(
+  commentsAndLogs,
+  () => {
+  nextTick(() => {
+    if (commentsWrapperEl.value)
+      commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
+  })
+}, { immediate: true })
+
 </script>
 
 <template>
-  <div>
-    <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
+  <div class="h-full d-flex flex-column w-full">
+    <div class="flex-grow-1 min-h-[100px] overflow-y-auto p-2" ref="commentsWrapperEl">
+      <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
-    <div v-else class="blue-grey">
-      <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 '" />
-        <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 }}
-            {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
-          </p>
-          <p
-            v-if="log.op_type === 'COMMENT'"
-            class="caption mb-0 nc-chip w-full min-h-20px"
-            :style="{ backgroundColor: enumColor.light[2] }"
-          >
-            {{ log.description }}
-          </p>
+      <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 '" />
+          <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 }}
+              {{ log.op_type === 'COMMENT' ? 'commented' : log.op_sub_type === 'INSERT' ? 'created' : 'edited' }}
+            </p>
+            <p
+              v-if="log.op_type === 'COMMENT'"
+              class="caption mb-0 nc-chip w-full min-h-20px"
+              :style="{ backgroundColor: enumColor.light[2] }"
+            >
+              {{ log.description }}
+            </p>
 
-          <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
+            <p v-else v-dompurify-html="log.details" class="caption mb-0" style="word-break: break-all" />
 
-          <p class="time text-right text-[10px] mb-0">
-            {{ timeAgo(log.created_at) }}
-          </p>
+            <p class="time text-right text-[10px] mb-0">
+              {{ timeAgo(log.created_at) }}
+            </p>
+          </div>
         </div>
-      </div>
+      </template>
     </div>
-    <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+    <div class="border-1 my-2 w-full ml-6" />
+    <div class="p-2">
+      <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
       ><span class="text-xs">Comments only</span>
-    </a-checkbox>
-    <div class="flex-shrink-1 mt-2 d-flex pl-4">
-      <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
-      <a-input
-        v-model:value="comment"
-        class="caption comment-box"
-        :class="{ focus: showborder }"
-        @focusin="showborder = true"
-        @focusout="showborder = false"
-        @keyup.enter.prevent="saveComment"
-      >
-        <template #suffix>
-          <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
-        </template>
-      </a-input>
+      </a-checkbox>
+      <div class="flex-shrink-1 mt-2 d-flex pl-4">
+        <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
+        <a-input
+          v-model:value="comment"
+          class="caption comment-box"
+          :class="{ focus: showborder }"
+          @focusin="showborder = true"
+          @focusout="showborder = false"
+          @keyup.enter.prevent="saveComment"
+        >
+          <template #suffix>
+            <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
+          </template>
+        </a-input>
+      </div>
     </div>
   </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 2d86bbef69..e91710c8d0 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -80,8 +80,8 @@ const isExpanded = useVModel(props, 'modelValue', emits)
   <a-modal v-model:visible="isExpanded" :footer="null" width="min(90vw,1000px)" :body-style="{ padding: 0 }" :closable="false">
     <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
-      <div class="flex h-full nc-form-wrapper">
-        <div class="flex-grow f-full overflow-auto">
+      <div class="flex h-full nc-form-wrapper items-stretch">
+        <div class="flex-grow overflow-auto">
           <div class="w-[500px] mx-auto">
             <div v-for="col in fields" :key="col.title" class="mt-2">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
@@ -102,10 +102,10 @@ const isExpanded = useVModel(props, 'modelValue', emits)
         </div>
 
         <div
-          class="nc-comments-drawer pr-3 min-w-0 max-h-[calc(90vh_-_100px)] overflow-y-auto"
+          class="nc-comments-drawer min-w-0 min-h-full max-h-full"
           :class="{ active: commentsDrawer }"
         >
-          <div class="w-[280px]">
+          <div class="h-full">
             <Comments v-if="commentsDrawer" />
           </div>
         </div>

From 18d318e0473f0a4a195f6b4589bb59dd7b26eb21 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 12:35:25 +0530
Subject: [PATCH 69/76] refactor(gui-v2): row comment ui improvements

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  |  2 +-
 .../smartsheet/expanded-form/Comments.vue     | 36 ++++++++++---------
 .../smartsheet/expanded-form/index.vue        |  7 ++--
 3 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 95a9dbd81b..6aad87d22b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -432,7 +432,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
 
     <SmartsheetPagination />
     <SmartsheetExpandedForm
-      v-if="expandedFormRow"
+      v-if="expandedFormRow && expandedFormDlg"
       v-model="expandedFormDlg"
       :row="expandedFormRow"
       :state="expandedFormRowState"
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 8c23a1f763..a2a7ab180d 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
-import { useExpandedFormStoreOrThrow } from '#imports'
-import { nextTick } from '#imports'
+import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
 import { enumColor, timeAgo } from '~/utils'
-import MdiKeyboardReturnIcon from '~icons/mdi/keyboard-return'
 import MdiAccountIcon from '~icons/mdi/account-circle'
 
 const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, row } =
@@ -10,23 +8,22 @@ const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, s
 
 const commentsWrapperEl = ref<HTMLDivElement>()
 
-
 await loadCommentsAndLogs()
 
 watch(
   commentsAndLogs,
   () => {
-  nextTick(() => {
-    if (commentsWrapperEl.value)
-      commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
-  })
-}, { immediate: true })
-
+    nextTick(() => {
+      if (commentsWrapperEl.value) commentsWrapperEl.value.scrollTop = commentsWrapperEl.value?.scrollHeight
+    })
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
   <div class="h-full d-flex flex-column w-full">
-    <div class="flex-grow-1 min-h-[100px] overflow-y-auto p-2" ref="commentsWrapperEl">
+    <div ref="commentsWrapperEl" class="flex-grow-1 min-h-[100px] overflow-y-auto scrollbar-thin-primary p-2">
       <v-skeleton-loader v-if="isCommentsLoading && !commentsAndLogs" type="list-item-avatar-two-line@8" />
 
       <template v-else>
@@ -55,22 +52,29 @@ watch(
       </template>
     </div>
     <div class="border-1 my-2 w-full ml-6" />
-    <div class="p-2">
+    <div class="p-0">
+      <div class="flex justify-center">
       <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
-      ><span class="text-xs">Comments only</span>
+        ><span class="text-[11px]">Comments only</span>
       </a-checkbox>
+      </div>
       <div class="flex-shrink-1 mt-2 d-flex pl-4">
-        <v-icon color="pink lighten-2" class="mr-2"> mdi-account-circle</v-icon>
         <a-input
           v-model:value="comment"
-          class="caption comment-box"
+          class="!text-xs"
+          ghost
           :class="{ focus: showborder }"
           @focusin="showborder = true"
           @focusout="showborder = false"
           @keyup.enter.prevent="saveComment"
         >
+          <template #addonBefore>
+            <div class="flex align-center">
+            <mdi-account-circle class="text-lg  text-pink-300" small @click="saveComment" />
+            </div>
+          </template>
           <template #suffix>
-            <MdiKeyboardReturnIcon v-if="comment" class="text-sm" small @click="saveComment" />
+            <mdi-keyboard-return v-if="comment" class="text-sm" small @click="saveComment" />
           </template>
         </a-input>
       </div>
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 e91710c8d0..a8d13e3908 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -81,7 +81,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
     <Header @cancel="isExpanded = false" />
     <a-card class="!bg-gray-100">
       <div class="flex h-full nc-form-wrapper items-stretch">
-        <div class="flex-grow overflow-auto">
+        <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">
               <SmartsheetHeaderVirtualCell v-if="isVirtualCol(col)" :column="col" />
@@ -101,10 +101,7 @@ const isExpanded = useVModel(props, 'modelValue', emits)
           </div>
         </div>
 
-        <div
-          class="nc-comments-drawer min-w-0 min-h-full max-h-full"
-          :class="{ active: commentsDrawer }"
-        >
+        <div class="nc-comments-drawer min-w-0 min-h-full max-h-full" :class="{ active: commentsDrawer }">
           <div class="h-full">
             <Comments v-if="commentsDrawer" />
           </div>

From 9372f7715cbc24230ddaafe61050b57489099300 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 12:45:38 +0530
Subject: [PATCH 70/76] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet/expanded-form/Comments.vue     |  8 +++----
 .../virtual-cell/components/ListItems.vue     | 23 +++++++++----------
 2 files changed, 15 insertions(+), 16 deletions(-)

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 a2a7ab180d..5bd3638f16 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -54,9 +54,9 @@ watch(
     <div class="border-1 my-2 w-full ml-6" />
     <div class="p-0">
       <div class="flex justify-center">
-      <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
-        ><span class="text-[11px]">Comments only</span>
-      </a-checkbox>
+        <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
+          ><span class="text-[11px]">Comments only</span>
+        </a-checkbox>
       </div>
       <div class="flex-shrink-1 mt-2 d-flex pl-4">
         <a-input
@@ -70,7 +70,7 @@ watch(
         >
           <template #addonBefore>
             <div class="flex align-center">
-            <mdi-account-circle class="text-lg  text-pink-300" small @click="saveComment" />
+              <mdi-account-circle class="text-lg text-pink-300" small @click="saveComment" />
             </div>
           </template>
           <template #suffix>
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 7977f36c89..4fa82d0926 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -48,23 +48,22 @@ const expandedFormDlg = ref(false)
 /** populate initial state for a new row which is parent/child of current record */
 const newRowState = computed(() => {
   const colOpt = (column?.value as ColumnType)?.colOptions as LinkToAnotherRecordType
-  const colInRelatedTable: ColumnType = relatedTableMeta.value?.columns?.find((col) => {
+  const colInRelatedTable: ColumnType | undefined = relatedTableMeta?.value?.columns?.find((col) => {
     if (col.uidt !== UITypes.LinkToAnotherRecord) return false
-    if (col?.colOptions?.fk_related_model_id !== meta.value.id) return false
+    const colOpt1 = col?.colOptions as LinkToAnotherRecordType
+    if (colOpt1?.fk_related_model_id !== meta.value.id) return false
 
-    if (colOpt.type === RelationTypes.MANY_TO_MANY && col?.colOptions?.type === RelationTypes.MANY_TO_MANY) {
+    if (colOpt.type === RelationTypes.MANY_TO_MANY && colOpt1?.type === RelationTypes.MANY_TO_MANY) {
       return (
-        colOpt.fk_parent_column_id === col.colOptions.fk_child_column_id &&
-        colOpt.fk_child_column_id === col.colOptions.fk_parent_column_id
+        colOpt.fk_parent_column_id === colOpt1.fk_child_column_id && colOpt.fk_child_column_id === colOpt1.fk_parent_column_id
       )
     } else {
       return (
-        colOpt.fk_parent_column_id === col.colOptions.fk_parent_column_id &&
-        colOpt.fk_child_column_id === col.colOptions.fk_child_column_id
+        colOpt.fk_parent_column_id === colOpt1.fk_parent_column_id && colOpt.fk_child_column_id === colOpt1.fk_child_column_id
       )
     }
-    return false
   })
+  if (!colInRelatedTable) return {}
   const relatedTableColOpt = colInRelatedTable?.colOptions as LinkToAnotherRecordType
   if (!relatedTableColOpt) return {}
 
@@ -97,14 +96,14 @@ const newRowState = computed(() => {
       <template v-if="childrenExcludedList?.pageInfo?.totalRows">
         <div class="flex-1 overflow-auto min-h-0">
           <a-card
-            v-for="(row, i) in childrenExcludedList?.list ?? []"
+            v-for="(refRow, i) in childrenExcludedList?.list ?? []"
             :key="i"
             class="ma-2 cursor-pointer hover:(!bg-gray-200/50 shadow-md) group"
-            @click="linkRow(row)"
+            @click="linkRow(refRow)"
           >
-            {{ row[relatedTablePrimaryValueProp]
+            {{ refRow[relatedTablePrimaryValueProp]
             }}<span class="hidden group-hover:(inline) text-gray-400 text-[11px] ml-1"
-              >(Primary key : {{ getRelatedTableRowId(row) }})</span
+              >(Primary key : {{ getRelatedTableRowId(refRow) }})</span
             >
           </a-card>
         </div>

From d0aa549cfea737e26b19988eb43be726415d2f0b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 13:11:00 +0530
Subject: [PATCH 71/76] fix(gui-v2): add new row option in row list modal

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/virtual-cell/components/ListItems.vue         | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

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 4fa82d0926..0391df401c 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -69,11 +69,11 @@ const newRowState = computed(() => {
 
   if (relatedTableColOpt.type === RelationTypes.BELONGS_TO) {
     return {
-      [colInRelatedTable.title as string]: row,
+      [colInRelatedTable.title as string]: row?.value?.row,
     }
   } else {
     return {
-      [colInRelatedTable.title as string]: [row],
+      [colInRelatedTable.title as string]: row?.value && [row.value.row],
     }
   }
 })
@@ -125,7 +125,6 @@ const newRowState = computed(() => {
         :meta="relatedTableMeta"
         :row="{ row: {}, oldRow: {}, rowMeta: { new: true } }"
         :state="newRowState"
-        load-row
         use-meta-fields
       />
     </div>

From 347dc2f09701e0e4f492cc5e8cc3144ce1a435be Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Tue, 9 Aug 2022 14:56:40 +0530
Subject: [PATCH 72/76] feat(gui-v2): load row comments count

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 43 ++++++++++-------
 .../smartsheet/expanded-form/Comments.vue     |  2 +-
 packages/nc-gui-v2/composables/useViewData.ts | 46 +++++++++++++++++--
 3 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 6aad87d22b..1ad61fdc50 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -30,6 +30,8 @@ import {
 } from '~/context'
 import { NavigateDir } from '~/lib'
 
+import { enumColor } from '~/utils'
+
 const meta = inject(MetaInj)
 
 const view = inject(ActiveViewInj)
@@ -74,6 +76,7 @@ const {
   deleteRow,
   deleteSelectedRows,
   selectedAllRecords,
+  loadAggCommentsCount,
 } = useViewData(meta, view as any, xWhere)
 
 const { loadGridViewColumns, updateWidth, resizingColWidth, resizingCol } = useGridViewColumnWidth(view as any)
@@ -85,8 +88,9 @@ provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-reloadViewDataHook?.on(() => {
-  loadData()
+reloadViewDataHook?.on(async () => {
+  await loadData()
+  loadAggCommentsCount()
 })
 
 const selectCell = (row: number, col: number) => {
@@ -333,21 +337,28 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <tbody>
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
-              <tr class="nc-grid-row">
-                <td key="row-index" class="caption nc-grid-cell group">
-                  <div class="flex items-center w-[80px]">
-                    <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
-                    <div
-                      :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
-                      class="group-hover:flex w-full items-center justify-between p-1"
-                    >
-                      <a-checkbox v-model:checked="row.rowMeta.selected" />
-                      <span class="flex-1" />
-                      <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
-                        <MdiArrowExpand
-                          class="select-none transform hover:(text-pink-500 scale-120)"
+                <tr class="nc-grid-row">
+                  <td key="row-index" class="caption nc-grid-cell">
+                    <div class="align-center flex w-[80px]">
+                      <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
+                      <div
+                        :class="{ hidden: !row.rowMeta.selected, flex: row.rowMeta.selected }"
+                        class="group-hover:flex w-full items-center justify-between p-1"
+                      >
+                        <a-checkbox v-model:checked="row.rowMeta.selected" />
+                        <span class="flex-1" />
+                        <span
+                          v-if="row.rowMeta?.commentCount"
+                          class="py-1 px-3 rounded-full text-[11px]"
+                          :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
-                        />
+                        >{{ row.rowMeta.commentCount }}</span>
+                        <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
+                          <MdiArrowExpand
+                            class="select-none transform hover:(text-pink-500 scale-120)"
+                            @click="expandForm(row, state)"
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
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 5bd3638f16..3bac516e22 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -55,7 +55,7 @@ watch(
     <div class="p-0">
       <div class="flex justify-center">
         <a-checkbox v-model:checked="commentsOnly" @change="loadCommentsAndLogs"
-          ><span class="text-[11px]">Comments only</span>
+          ><span class="text-[11px] text-gray-500">Comments only</span>
         </a-checkbox>
       </div>
       <div class="flex-shrink-1 mt-2 d-flex pl-4">
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index fcd2161a19..2443d7c1b6 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -1,10 +1,10 @@
-import type { Api, GalleryType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
+import type { Api, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import type { ComputedRef, Ref } from 'vue'
 import { notification } from 'ant-design-vue'
 import { useNuxtApp } from '#app'
 import { useProject } from '#imports'
 import { NOCO } from '~/lib'
-import { extractSdkResponseErrorMsg } from '~/utils'
+import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
 const formatData = (list: Record<string, any>[]) =>
   list.map((row) => ({
@@ -16,7 +16,10 @@ const formatData = (list: Record<string, any>[]) =>
 export interface Row {
   row: Record<string, any>
   oldRow: Record<string, any>
-  rowMeta?: any
+  rowMeta: {
+    new?: boolean
+    commentCount?: number
+  }
 }
 
 export function useViewData(
@@ -24,8 +27,13 @@ export function useViewData(
   viewMeta: Ref<ViewType & { id: string }> | ComputedRef<ViewType & { id: string }> | undefined,
   where?: ComputedRef<string | undefined>,
 ) {
+  if (!meta) {
+    throw new Error('Table meta is not available')
+  }
+
   const formattedData = ref<Row[]>([])
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
+  const aggCommentCount = ref<Record<string, number>>({})
   const galleryData = ref<GalleryType | undefined>(undefined)
 
   const { project } = useProject()
@@ -49,13 +57,39 @@ export function useViewData(
     )
     paginationData.value.totalRows = count
   }
-  
+
   const queryParams = computed(() => ({
     offset: (paginationData.value?.page ?? 0) - 1,
     limit: paginationData.value?.pageSize ?? 25,
     where: where?.value ?? '',
   }))
 
+  /** load row comments count */
+  const loadAggCommentsCount = async () => {
+    // todo: handle in public api
+    // if (this.isPublicView) {
+    //   return;
+    // }
+
+    const ids = formattedData.value
+      ?.filter(({ rowMeta: { new: isNew } }) => !isNew)
+      ?.map(({ row }) => {
+        return extractPkFromRow(row, meta?.value?.columns as ColumnType[])
+      })
+
+    if (!ids?.length) return
+
+    aggCommentCount.value = await $api.utils.commentCount({
+      ids,
+      fk_model_id: meta.value.id as string,
+    })
+
+    for (const row of formattedData.value) {
+      const id = extractPkFromRow(row.row, meta?.value?.columns as ColumnType[])
+      row.rowMeta.commentCount = aggCommentCount.value?.find((c) => c.row_id === id)?.count || 0
+    }
+  }
+
   const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
     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, {
@@ -64,6 +98,8 @@ export function useViewData(
     })
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
+
+    loadAggCommentsCount()
   }
 
   const loadGalleryData = async () => {
@@ -265,5 +301,7 @@ export function useViewData(
     syncCount,
     galleryData,
     loadGalleryData,
+    aggCommentCount,
+    loadAggCommentsCount,
   }
 }

From 04db065153ca76fd0e25c16da21d307caa31b3af Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 01:17:45 +0530
Subject: [PATCH 73/76] chore(gui-v2): linting and other corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            | 33 +------
 .../smartsheet-column/FormulaOptions.vue      |  2 +-
 .../smartsheet-column/SelectOptions.vue       |  4 +-
 .../components/smartsheet-header/Menu.vue     |  1 -
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 89 ++++++++++---------
 .../nc-gui-v2/components/smartsheet/Row.vue   |  1 -
 .../smartsheet/expanded-form/Comments.vue     |  2 +-
 .../smartsheet/expanded-form/Header.vue       |  2 +-
 .../smartsheet/expanded-form/index.vue        |  2 +-
 .../components/virtual-cell/BelongsTo.vue     |  8 +-
 .../components/virtual-cell/HasMany.vue       | 29 +++---
 .../components/virtual-cell/ManyToMany.vue    | 24 +++--
 .../components/ListChildItems.vue             | 12 +--
 .../nc-gui-v2/composables/useLTARStore.ts     |  2 +-
 .../composables/useSmartsheetRowStore.ts      |  8 +-
 packages/nc-gui-v2/package-lock.json          | 30 +++++++
 packages/nc-gui-v2/utils/dataUtils.ts         | 11 ++-
 17 files changed, 128 insertions(+), 132 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 3f5208c2af..1b40185183 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -74,21 +74,14 @@ declare module '@vue/runtime-core' {
     MaterialSymbolsChevronLeftRounded: typeof import('~icons/material-symbols/chevron-left-rounded')['default']
     MaterialSymbolsChevronRightRounded: typeof import('~icons/material-symbols/chevron-right-rounded')['default']
     MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
-    CilFullscreen: typeof import('~icons/cil/fullscreen')['default']
-    CilFullscreenExit: typeof import('~icons/cil/fullscreen-exit')['default']
-    IcOutlineInsertDriveFile: typeof import('~icons/ic/outline-insert-drive-file')['default']
-    IcRoundKeyboardArrowDown: typeof import('~icons/ic/round-keyboard-arrow-down')['default']
-    MaterialSymbolsAttachFile: typeof import('~icons/material-symbols/attach-file')['default']
-    MaterialSymbolsFileCopyOutline: typeof import('~icons/material-symbols/file-copy-outline')['default']
     MaterialSymbolsMenu: typeof import('~icons/material-symbols/menu')['default']
     MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
+    MdiAccountCircle: typeof import('~icons/mdi/account-circle')['default']
     MdiAccountGroup: typeof import('~icons/mdi/account-group')['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']
-    MaterialSymbolsTranslate: typeof import('~icons/material-symbols/translate')['default']
-    MdiArrowExpand: typeof import('~icons/mdi/arrow-expand')['default']
     MdiArrowExpandIcon: typeof import('~icons/mdi/arrow-expand-icon')['default']
+    MdiArrowLeftBold: typeof import('~icons/mdi/arrow-left-bold')['default']
     MdiAt: typeof import('~icons/mdi/at')['default']
     MdiCalculator: typeof import('~icons/mdi/calculator')['default']
     MdiCardsHeart: typeof import('~icons/mdi/cards-heart')['default']
@@ -103,10 +96,6 @@ declare module '@vue/runtime-core' {
     MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDiscord: typeof import('~icons/mdi/discord')['default']
     MdiDotsHorizontal: typeof import('~icons/mdi/dots-horizontal')['default']
-    MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
-    MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
-    MdiContentSave: typeof import('~icons/mdi/content-save')['default']
-    MdiDeleteOutline: typeof import('~icons/mdi/delete-outline')['default']
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiDownload: typeof import('~icons/mdi/download')['default']
     MdiDrag: typeof import('~icons/mdi/drag')['default']
@@ -119,15 +108,9 @@ declare module '@vue/runtime-core' {
     MdiHeart: typeof import('~icons/mdi/heart')['default']
     MdiHook: typeof import('~icons/mdi/hook')['default']
     MdiInformation: typeof import('~icons/mdi/information')['default']
+    MdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return')['default']
     MdiLink: typeof import('~icons/mdi/link')['default']
     MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
-    MdiDownload: typeof import('~icons/mdi/download')['default']
-    MdiDrag: typeof import('~icons/mdi/drag')['default']
-    MdiEyeOffOutline: typeof import('~icons/mdi/eye-off-outline')['default']
-    MdiFlag: typeof import('~icons/mdi/flag')['default']
-    MdiHeart: typeof import('~icons/mdi/heart')['default']
-    MdiHook: typeof import('~icons/mdi/hook')['default']
-    MdiLinkVariantRemove: typeof import('~icons/mdi/link-variant-remove')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiMagnify: typeof import('~icons/mdi/magnify')['default']
     MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
@@ -138,26 +121,18 @@ declare module '@vue/runtime-core' {
     MdiOperator: typeof import('~icons/mdi/operator')['default']
     MdiPlus: typeof import('~icons/mdi/plus')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
-    MdiMagnify: typeof import('~icons/mdi/magnify')['default']
-    MdiMenuDown: typeof import('~icons/mdi/menu-down')['default']
-    MdiMoonFull: typeof import('~icons/mdi/moon-full')['default']
-    MdiOpenInNew: typeof import('~icons/mdi/open-in-new')['default']
-    MdiPlus: typeof import('~icons/mdi/plus')['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']
     MdiStore: typeof import('~icons/mdi/store')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     MdiTableBorder: typeof import('~icons/mdi/table-border')['default']
     MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
     MdiTrashCan: typeof import('~icons/mdi/trash-can')['default']
     MdiWhatsapp: typeof import('~icons/mdi/whatsapp')['default']
     MdiXml: typeof import('~icons/mdi/xml')['default']
-    MdiStar: typeof import('~icons/mdi/star')['default']
-    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
-    MdiThumbUp: typeof import('~icons/mdi/thumb-up')['default']
-    MdiXml: typeof import('~icons/mdi/xml')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 97f0d35d13..6538e28b78 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -659,7 +659,7 @@ onMounted(() => {
                       </div>
                     </div>
                     <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
-                      <a-badge-ribbon :text="item.uidt" color="gray"/>
+                      <a-badge-ribbon :text="item.uidt" color="gray" />
                     </div>
                   </a-col>
                 </div>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
index ce37a76836..23ae9d21b4 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/SelectOptions.vue
@@ -86,7 +86,7 @@ watch(inputs, () => {
 
 <template>
   <div class="w-full">
-    <draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
+    <Draggable :list="options" item-key="id" handle=".nc-child-draggable-icon">
       <template #item="{ element, index }">
         <div class="flex py-1 align-center">
           <MdiDragIcon small class="nc-child-draggable-icon handle" />
@@ -105,7 +105,7 @@ watch(inputs, () => {
           <div class="flex align-center"><MdiPlusIcon /><span class="flex-auto">Add option</span></div>
         </a-button>
       </template>
-    </draggable>
+    </Draggable>
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index c990f2d5ae..f8f5634e7b 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
 import { Modal } from 'ant-design-vue'
 import { inject } from 'vue'
 import { useI18n } from 'vue-i18n'
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 1ad61fdc50..2cd1c6af5d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -337,7 +337,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
           <tbody>
             <SmartsheetRow v-for="(row, rowIndex) of data" :key="rowIndex" :row="row">
               <template #default="{ state }">
-                <tr class="nc-grid-row">
+                <tr class="nc-grid-row group">
                   <td key="row-index" class="caption nc-grid-cell">
                     <div class="align-center flex w-[80px]">
                       <div class="group-hover:hidden" :class="{ hidden: row.rowMeta.selected }">{{ rowIndex + 1 }}</div>
@@ -352,7 +352,8 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                           class="py-1 px-3 rounded-full text-[11px]"
                           :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
-                        >{{ row.rowMeta.commentCount }}</span>
+                          >{{ row.rowMeta.commentCount }}</span
+                        >
                         <div class="cursor-pointer flex items-center border-1 active:ring rounded p-1 hover:bg-primary/10">
                           <MdiArrowExpand
                             class="select-none transform hover:(text-pink-500 scale-120)"
@@ -361,48 +362,47 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         </div>
                       </div>
                     </div>
-                  </div>
-                </td>
-                <td
-                  v-for="(columnObj, colIndex) of fields"
-                  :ref="cellRefs.set"
-                  :key="columnObj.id"
-                  class="cell relative cursor-pointer nc-grid-cell"
-                  :class="{
-                  active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
-                }"
-                  :data-key="rowIndex + columnObj.id"
-                  :data-col="columnObj.id"
-                  :data-title="columnObj.title"
-                  @click="selectCell(rowIndex, colIndex)"
-                  @dblclick="makeEditable(row, columnObj)"
-                  @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
-                >
-                  <div class="w-full h-full">
-                    <SmartsheetVirtualCell
-                      v-if="isVirtualCol(columnObj)"
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      :row="row"
-                      @navigate="onNavigate"
-                    />
-
-                    <SmartsheetCell
-                      v-else
-                      v-model="row.row[columnObj.title]"
-                      :column="columnObj"
-                      :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
-                      :row-index="rowIndex"
-                      :active="selected.col === colIndex && selected.row === rowIndex"
-                      @update:edit-enabled="editEnabled = false"
-                      @save="updateOrSaveRow(row, columnObj.title)"
-                      @navigate="onNavigate"
-                      @cancel="editEnabled = false"
-                    />
-                  </div>
-                </td>
-              </tr>
+                  </td>
+                  <td
+                    v-for="(columnObj, colIndex) of fields"
+                    :ref="cellRefs.set"
+                    :key="columnObj.id"
+                    class="cell relative cursor-pointer nc-grid-cell"
+                    :class="{
+                      active: !isPublicView && selected.col === colIndex && selected.row === rowIndex,
+                    }"
+                    :data-key="rowIndex + columnObj.id"
+                    :data-col="columnObj.id"
+                    :data-title="columnObj.title"
+                    @click="selectCell(rowIndex, colIndex)"
+                    @dblclick="makeEditable(row, columnObj)"
+                    @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
+                  >
+                    <div class="w-full h-full">
+                      <SmartsheetVirtualCell
+                        v-if="isVirtualCol(columnObj)"
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        :row="row"
+                        @navigate="onNavigate"
+                      />
+
+                      <SmartsheetCell
+                        v-else
+                        v-model="row.row[columnObj.title]"
+                        :column="columnObj"
+                        :edit-enabled="editEnabled && selected.col === colIndex && selected.row === rowIndex"
+                        :row-index="rowIndex"
+                        :active="selected.col === colIndex && selected.row === rowIndex"
+                        @update:edit-enabled="editEnabled = false"
+                        @save="updateOrSaveRow(row, columnObj.title)"
+                        @navigate="onNavigate"
+                        @cancel="editEnabled = false"
+                      />
+                    </div>
+                  </td>
+                </tr>
               </template>
             </SmartsheetRow>
 
@@ -442,6 +442,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
     </div>
 
     <SmartsheetPagination />
+
     <SmartsheetExpandedForm
       v-if="expandedFormRow && expandedFormDlg"
       v-model="expandedFormDlg"
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index b96120b655..68e79f1a88 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -8,7 +8,6 @@ interface Props {
 }
 
 const props = defineProps<Props>()
-const emit = defineEmits(['expandForm', 'selectCell', 'updateOrSaveRow', 'navigate'])
 const row = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
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 3bac516e22..7aecd34155 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Comments.vue
@@ -3,7 +3,7 @@ import { nextTick, useExpandedFormStoreOrThrow } from '#imports'
 import { enumColor, timeAgo } from '~/utils'
 import MdiAccountIcon from '~icons/mdi/account-circle'
 
-const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, row } =
+const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment } =
   useExpandedFormStoreOrThrow()
 
 const commentsWrapperEl = ref<HTMLDivElement>()
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 b0240deaac..8af72be3bf 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -7,7 +7,7 @@ import MdiDoorClosed from '~icons/mdi/door-closed'
 
 const emit = defineEmits(['cancel'])
 const { meta } = useSmartsheetStoreOrThrow()
-const { commentsDrawer, row, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
+const { commentsDrawer, primaryValue, save: _save } = useExpandedFormStoreOrThrow()
 const { isNew, syncLTARRefs } = useSmartsheetRowStoreOrThrow()
 const { isUIAllowed } = useUIPermission()
 
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 a8d13e3908..11f4264a3a 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -8,7 +8,7 @@ import Header from './Header.vue'
 import { NOCO } from '~/lib'
 import { extractPkFromRow } from '~/utils'
 import { useNuxtApp } from '#app'
-import { useProvideSmartsheetStore, useSmartsheetStoreOrThrow } from '~/composables'
+import { useProvideSmartsheetStore } from '~/composables'
 import type { Row } from '~/composables'
 import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index a894fbd2cb..58dbc63748 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -4,10 +4,8 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj,IsFormInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)
 
@@ -21,10 +19,8 @@ const active = false
 
 const listItemsDlg = ref(false)
 
-const isForm = inject(IsFormInj)
-
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index e74210c260..44e81dfe9a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -7,8 +7,6 @@ import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -20,14 +18,12 @@ const reloadTrigger = inject(ReloadViewDataHookInj)!
 
 const isForm = inject(IsFormInj)
 
-const isForm = inject(IsFormInj)
-
 const listItemsDlg = ref(false)
 
 const childListDlg = ref(false)
 
 const { state, isNew, removeLTARRef } = useSmartsheetRowStoreOrThrow()
-const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
+const { loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
   column as Ref<Required<ColumnType>>,
   row,
   isNew,
@@ -56,7 +52,6 @@ const cells = computed(() =>
   }, [] as any[]),
 )
 
-
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
     removeLTARRef(rec, column?.value as ColumnType)
@@ -71,12 +66,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip
-            v-for="(cell, i) of cells"
-            :key="i"
-            :item="ch"
-            :value="cell.value"
-            @unlink="unlinkRef(cell.item)" />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
           <span v-if="cellValue?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true"
             >more...
           </span>
@@ -87,14 +77,19 @@ const unlinkRef = async (rec: Record<string, any>) => {
           class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
           @click="childListDlg = true"
         />
-        <MdiPlus
-          class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
-          @click="listItemsDlg = true"
-        />
+        <MdiPlus class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
       </div>
     </template>
     <ListItems v-model="listItemsDlg" />
-    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true }" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </div>
 </template>
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 3bb4ed0994..74da7c9476 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -5,10 +5,8 @@ import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 import { computed, inject, ref, useProvideLTARStore } from '#imports'
-import { CellValueInj, ColumnInj, ReloadViewDataHookInj,IsFormInj, RowInj } from '~/context'
+import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
 
@@ -55,8 +53,6 @@ const cells = computed(() =>
   }, [] as any[]),
 )
 
-
-
 const unlinkRef = async (rec: Record<string, any>) => {
   if (isNew.value) {
     removeLTARRef(rec, column?.value as ColumnType)
@@ -71,13 +67,7 @@ const unlinkRef = async (rec: Record<string, any>) => {
     <template v-if="!isForm">
       <div class="chips flex align-center img-container flex-grow hm-items flex-nowrap min-w-0 overflow-hidden">
         <template v-if="cells">
-          <ItemChip
-            v-for="(cell, i) of cells"
-            :key="i"
-            :item="ch"
-            :value="cell.value"
-            @unlink="unlinkRef(cell.item)"
-          />
+          <ItemChip v-for="(cell, i) of cells" :key="i" :item="ch" :value="cell.value" @unlink="unlinkRef(cell.item)" />
 
           <span v-if="value?.length === 10" class="caption pointer ml-1 grey--text" @click="childListDlg = true">more... </span>
         </template>
@@ -92,7 +82,15 @@ const unlinkRef = async (rec: Record<string, any>) => {
 
     <ListItems v-model="listItemsDlg" />
 
-    <ListChildItems v-model="childListDlg" @attach-record="() => { childListDlg = false; listItemsDlg = true; }" />
+    <ListChildItems
+      v-model="childListDlg"
+      @attach-record="
+        () => {
+          childListDlg = false
+          listItemsDlg = true
+        }
+      "
+    />
   </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 1178fc29b6..868a56d750 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,9 @@
 <script lang="ts" setup>
-import { watchEffect } from '@vue/runtime-core'
 import { Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { useLTARStoreOrThrow, useVModel } from '#imports'
+import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
 import { ColumnInj, IsFormInj } from '~/context'
-import { IsFormInj } from '~/context'
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
 
 const props = defineProps<{ modelValue?: boolean }>()
 const emit = defineEmits(['update:modelValue', 'attachRecord'])
@@ -62,7 +59,7 @@ const expandedFormRow = ref()
       <div class="flex mb-4 align-center gap-2">
         <div class="flex-1" />
 
-        <MdiReload  v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
+        <MdiReload v-if="!isForm" class="cursor-pointer text-gray-500" @click="loadChildrenList" />
 
         <a-button type="primary" class="!text-xs" size="small" @click="emit('attachRecord')">
           <div class="flex align-center gap-1">
@@ -91,7 +88,10 @@ const expandedFormRow = ref()
               </div>
               <div class="flex-1"></div>
               <div class="flex gap-2">
-                <MdiLinkVariantRemove class="text-xs text-grey hover:(!text-red-500) cursor-pointer" @click.stop="unlinkRow(row)" />
+                <MdiLinkVariantRemove
+                  class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
+                  @click.stop="unlinkRow(row)"
+                />
                 <MdiDeleteOutline
                   class="text-xs text-grey hover:(!text-red-500) cursor-pointer"
                   @click.stop="deleteRelatedRow(row)"
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index d3928940bf..4a77b149de 100644
--- a/packages/nc-gui-v2/composables/useLTARStore.ts
+++ b/packages/nc-gui-v2/composables/useLTARStore.ts
@@ -13,7 +13,7 @@ interface DataApiResponse {
 
 /** Store for managing Link to another cells */
 const [useProvideLTARStore, useLTARStore] = useInjectionState(
-  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, isNewRow: ComputedRef<boolean> | Ref<boolean>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index 5442f81f0f..da4dfea60e 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -20,7 +20,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
   const state = ref<Record<string, Record<string, any> | Record<string, any>[] | null>>({})
 
   // getters
-  const isNew = computed(() => row.value?.rowMeta?.new)
+  const isNew = computed(() => row.value?.rowMeta?.new ?? false)
 
   // actions
   const addLTARRef = async (value: Record<string, any>, column: ColumnType) => {
@@ -54,7 +54,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         column.title as string,
         relatedRowId,
       )
-    } catch (e) {
+    } catch (e: any) {
       notification.error({
         message: 'Linking failed',
         description: await extractSdkResponseErrorMsg(e),
@@ -77,10 +77,10 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
         for (const relatedRow of relatedRows) {
           await linkRecord(id, extractPkFromRow(relatedRow, relatedTableMeta.columns as ColumnType[]), column, colOptions.type)
         }
-      } else if (isBt && state.value?.[column.title!]) {
+      } else if (isBt && state?.value?.[column.title!]) {
         await linkRecord(
           id,
-          extractPkFromRow(state.value?.[column.title!], relatedTableMeta.columns as ColumnType[]),
+          extractPkFromRow(state.value?.[column.title!] as Record<string, any>, relatedTableMeta.columns as ColumnType[]),
           column,
           colOptions.type,
         )
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 00556dbb97..edebf89eaa 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -22,6 +22,7 @@
         "unique-names-generator": "^4.7.1",
         "url": "^0.11.0",
         "util": "^0.12.4",
+        "vue-dompurify-html": "^3.0.0",
         "vue-i18n": "^9.1.10",
         "vue-toastification": "^2.0.0-rc.5",
         "vuedraggable": "^4.1.0",
@@ -5389,6 +5390,11 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
+    "node_modules/dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "node_modules/domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -14534,6 +14540,17 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "node_modules/vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "dependencies": {
+        "dompurify": "^2.3.4"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
@@ -19300,6 +19317,11 @@
         "domelementtype": "^2.2.0"
       }
     },
+    "dompurify": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.3.10.tgz",
+      "integrity": "sha512-o7Fg/AgC7p/XpKjf/+RC3Ok6k4St5F7Q6q6+Nnm3p2zGWioAY6dh0CbbuwOhH2UcSzKsdniE/YnE2/92JcsA+g=="
+    },
     "domutils": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
@@ -26034,6 +26056,14 @@
         "bundle-runner": "^0.0.1"
       }
     },
+    "vue-dompurify-html": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/vue-dompurify-html/-/vue-dompurify-html-3.0.0.tgz",
+      "integrity": "sha512-S6PMeJU7S3w0TnxMWWd4iydc7oPdOER1GmW9rsgiRwHvcw+nUi2v6BgERcFBULlM+x6PXsfu5P/Rm4reVvWH5A==",
+      "requires": {
+        "dompurify": "^2.3.4"
+      }
+    },
     "vue-eslint-parser": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.0.3.tgz",
diff --git a/packages/nc-gui-v2/utils/dataUtils.ts b/packages/nc-gui-v2/utils/dataUtils.ts
index 14e7e0db6f..290d445aca 100644
--- a/packages/nc-gui-v2/utils/dataUtils.ts
+++ b/packages/nc-gui-v2/utils/dataUtils.ts
@@ -1,8 +1,11 @@
 import type { ColumnType } from 'nocodb-sdk'
 
 export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
-  return columns
-    ?.filter((c) => c.pk)
-    .map((c) => row?.[c.title as string])
-    .join('___')
+  return (
+    row &&
+    columns
+      ?.filter((c) => c.pk)
+      .map((c) => row?.[c.title as string])
+      .join('___')
+  )
 }

From 8c883fe1e16ff0a30c576fc155c965e5d8d39dc8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 01:30:24 +0530
Subject: [PATCH 74/76] refactor(gui-v2): lint and other corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet/Grid.vue   |  2 +-
 packages/nc-gui-v2/components/smartsheet/Row.vue    | 13 ++++++-------
 .../components/smartsheet/expanded-form/Header.vue  | 10 +++++++---
 .../components/smartsheet/expanded-form/index.vue   | 11 ++++-------
 4 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 2cd1c6af5d..44f7fb4db0 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -349,7 +349,7 @@ const expandForm = (row: Row, state: Record<string, any>) => {
                         <span class="flex-1" />
                         <span
                           v-if="row.rowMeta?.commentCount"
-                          class="py-1 px-3 rounded-full text-[11px]"
+                          class="py-1 px-3 rounded-full text-xs"
                           :style="{ backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length] }"
                           @click="expandForm(row, state)"
                           >{{ row.rowMeta.commentCount }}</span
diff --git a/packages/nc-gui-v2/components/smartsheet/Row.vue b/packages/nc-gui-v2/components/smartsheet/Row.vue
index 68e79f1a88..efeea50ef1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Row.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Row.vue
@@ -1,25 +1,24 @@
 <script lang="ts" setup>
 import type { Row } from '~/composables'
-import { useSmartsheetStoreOrThrow } from '~/composables'
-import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
+import { useProvideSmartsheetRowStore, useSmartsheetStoreOrThrow } from '#imports'
 
 interface Props {
   row: Row
 }
 
 const props = defineProps<Props>()
-const row = toRef(props, 'row')
+const currentRow = toRef(props, 'row')
 
 const { meta } = useSmartsheetStoreOrThrow()
-const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, row)
+const { isNew, state, syncLTARRefs } = useProvideSmartsheetRowStore(meta, currentRow)
 
 // on changing isNew(new record insert) status sync LTAR cell values
 watch(isNew, async (nextVal, prevVal) => {
   if (prevVal && !nextVal) {
-    await syncLTARRefs(row.value.row)
+    await syncLTARRefs(currentRow.value.row)
     // update row values without invoking api
-    row.value.row = { ...row.value.row, ...state.value }
-    row.value.oldRow = { ...row.value.row, ...state.value }
+    currentRow.value.row = { ...currentRow.value.row, ...state.value }
+    currentRow.value.oldRow = { ...currentRow.value.row, ...state.value }
   }
 })
 </script>
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 8af72be3bf..8a9f6dc12c 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/Header.vue
@@ -1,7 +1,11 @@
 <script lang="ts" setup>
-import { computed, useSmartsheetStoreOrThrow, useUIPermission } from '#imports'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { useExpandedFormStoreOrThrow } from '~/composables/useExpandedFormStore'
+import {
+  computed,
+  useExpandedFormStoreOrThrow,
+  useSmartsheetRowStoreOrThrow,
+  useSmartsheetStoreOrThrow,
+  useUIPermission,
+} from '#imports'
 import MdiDoorOpen from '~icons/mdi/door-open'
 import MdiDoorClosed from '~icons/mdi/door-closed'
 
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 11f4264a3a..07e23bb93c 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
+import { computedInject } from '@vueuse/core'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
-import { useVModel } from '@vueuse/core'
-import { computed, provide, toRef, watch } from 'vue'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
+import { provide, toRef, useProvideExpandedFormStore, useProvideSmartsheetStore, useVModel, watch } from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow } from '~/utils'
 import { useNuxtApp } from '#app'
-import { useProvideSmartsheetStore } from '~/composables'
 import type { Row } from '~/composables'
-import { useProvideExpandedFormStore } from '~/composables/useExpandedFormStore'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 
 interface Props {
@@ -25,16 +23,15 @@ interface Props {
 
 const props = defineProps<Props>()
 const emits = defineEmits(['update:modelValue'])
-const _fields = inject(FieldsInj, ref([]))
 const row = toRef(props, 'row')
 const state = toRef(props, 'state')
 const meta = toRef(props, 'meta')
 
-const fields = computed(() => {
+const _fields = computedInject(FieldsInj, (_fields) => {
   if (props.useMetaFields) {
     return meta.value.columns ?? []
   }
-  return _fields.value
+  return _fields?.value ?? []
 })
 
 provide(MetaInj, meta)

From df9fb1f3ee367ec632235f67653d296349b8ac75 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 11 Aug 2022 01:46:56 +0530
Subject: [PATCH 75/76] chore(gui-v2): lint

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts                |  1 +
 .../components/smartsheet/expanded-form/index.vue |  1 -
 .../components/virtual-cell/BelongsTo.vue         |  3 +--
 .../nc-gui-v2/components/virtual-cell/HasMany.vue |  3 +--
 .../components/virtual-cell/ManyToMany.vue        |  3 +--
 .../virtual-cell/components/ItemChip.vue          |  5 ++---
 .../virtual-cell/components/ListChildItems.vue    |  3 +--
 .../virtual-cell/components/ListItems.vue         |  4 +---
 .../nc-gui-v2/composables/useExpandedFormStore.ts | 15 ++++++++++-----
 .../composables/useSmartsheetRowStore.ts          |  9 +++------
 10 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 1b40185183..66d7e13522 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' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
+    MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiContentCopy: typeof import('~icons/mdi/content-copy')['default']
     MdiContentSave: typeof import('~icons/mdi/content-save')['default']
     MdiDatabase: typeof import('~icons/mdi/database')['default']
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 07e23bb93c..e9aa0a1782 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -17,7 +17,6 @@ interface Props {
   state?: Record<string, any> | null
   meta: TableType
   loadRow?: boolean
-
   useMetaFields?: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 58dbc63748..90eab444a0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -3,8 +3,7 @@ import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { inject, ref, useProvideLTARStore } from '#imports'
+import { inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
 import { CellValueInj, ColumnInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = 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 44e81dfe9a..ae69d0f2e9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -4,8 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { computed, inject, ref, useProvideLTARStore } from '#imports'
+import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index 74da7c9476..5275a8d3ba 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -4,8 +4,7 @@ import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
-import { computed, inject, ref, useProvideLTARStore } from '#imports'
+import { computed, inject, ref, useProvideLTARStore, useSmartsheetRowStoreOrThrow } from '#imports'
 import { CellValueInj, ColumnInj, IsFormInj, ReloadViewDataHookInj, RowInj } from '~/context'
 
 const column = inject(ColumnInj)!
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 b9efafd542..e7f0a5a7f7 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ItemChip.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useLTARStoreOrThrow } from '~/composables'
+import { useLTARStoreOrThrow } from '#imports'
 import { ActiveCellInj, IsFormInj, ReadonlyInj } from '~/context'
-import MdiCloseThickIcon from '~icons/mdi/close-thick'
 
 interface Props {
   value?: string | number | boolean
@@ -29,7 +28,7 @@ const expandedFormDlg = ref(false)
   >
     <span class="name">{{ value }}</span>
     <div v-show="active || isForm" v-if="!readonly" class="flex align-center">
-      <MdiCloseThickIcon class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
+      <MdiCloseThick class="unlink-icon text-xs text-gray-500/50 group-hover:text-gray-500" @click.stop="emit('unlink')" />
     </div>
 
     <SmartsheetExpandedForm
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 868a56d750..b23650caa3 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListChildItems.vue
@@ -1,8 +1,7 @@
 <script lang="ts" setup>
 import { Modal } from 'ant-design-vue'
 import type { ColumnType } from 'nocodb-sdk'
-import { useLTARStoreOrThrow, useVModel, watch } from '#imports'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel, watch } from '#imports'
 import { ColumnInj, IsFormInj } from '~/context'
 
 const props = defineProps<{ modelValue?: boolean }>()
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 0391df401c..0bda4eb1d0 100644
--- a/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/components/ListItems.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
-import { computed } from 'vue'
-import { useLTARStoreOrThrow, useVModel } from '#imports'
-import { useSmartsheetRowStoreOrThrow } from '~/composables/useSmartsheetRowStore'
+import { computed, useLTARStoreOrThrow, useSmartsheetRowStoreOrThrow, useVModel } from '#imports'
 import { ColumnInj } from '~/context'
 
 const props = defineProps<{ modelValue: boolean }>()
diff --git a/packages/nc-gui-v2/composables/useExpandedFormStore.ts b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
index b0a359e459..6c78f9f150 100644
--- a/packages/nc-gui-v2/composables/useExpandedFormStore.ts
+++ b/packages/nc-gui-v2/composables/useExpandedFormStore.ts
@@ -3,12 +3,9 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { message, notification } from 'ant-design-vue'
 import dayjs from 'dayjs'
-import getPlainText from '../../nc-gui/components/project/spreadsheet/helpers/getPlainText'
-import { useProvideSmartsheetRowStore } from '~/composables/useSmartsheetRowStore'
+import { useApi, useInjectionState, useProject, useProvideSmartsheetRowStore } from '#imports'
 import { NOCO } from '~/lib'
 import { useNuxtApp } from '#app'
-import { useInjectionState, useProject } from '#imports'
-import { useApi } from '~/composables/useApi'
 import type { Row } from '~/composables/useViewData'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
@@ -87,8 +84,9 @@ const [useProvideExpandedFormStore, useExpandedFormStore] = useInjectionState((m
       await api.utils.commentRow({
         fk_model_id: meta.value?.id as string,
         row_id: rowId,
+        // todo: swagger type correction
         description: comment.value,
-      })
+      } as any)
 
       comment.value = ''
       message.success('Comment added successfully')
@@ -202,3 +200,10 @@ export function useExpandedFormStoreOrThrow() {
   if (expandedFormStore == null) throw new Error('Please call `useExpandedFormStore` on the appropriate parent component')
   return expandedFormStore
 }
+
+// todo: move to utils
+function getPlainText(htmlString: string) {
+  const div = document.createElement('div')
+  div.textContent = htmlString || ''
+  return div.innerHTML
+}
diff --git a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
index da4dfea60e..c07b52ae79 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetRowStore.ts
@@ -1,13 +1,10 @@
 import { notification } from 'ant-design-vue'
 import { UITypes } from 'nocodb-sdk'
-import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, RelationTypes, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
-import { useInjectionState } from '#imports'
-import { useMetas } from '~/composables/useMetas'
-import { useProject } from '~/composables/useProject'
+import { useInjectionState, useMetas, useProject, useVirtualCell } from '#imports'
 import type { Row } from '~/composables/useViewData'
-import { useVirtualCell } from '~/composables/useVirtualCell'
 import { NOCO } from '~/lib'
 import { extractPkFromRow, extractSdkResponseErrorMsg } from '~/utils'
 
@@ -43,7 +40,7 @@ const [useProvideSmartsheetRowStore, useSmartsheetRowStore] = useInjectionState(
     }
   }
 
-  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type) => {
+  const linkRecord = async (rowId: string, relatedRowId: string, column: ColumnType, type: RelationTypes) => {
     try {
       await $api.dbTableRow.nestedAdd(
         NOCO,

From d30fa7f2fec58aca41d59e0d4204315d4e8f6de6 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Wed, 10 Aug 2022 22:24:35 +0200
Subject: [PATCH 76/76] chore(gui-v2): imports cleanup

---
 .../components/smartsheet-header/VirtualCell.vue    |  5 +----
 packages/nc-gui-v2/components/smartsheet/Grid.vue   |  1 -
 .../components/smartsheet/expanded-form/index.vue   | 13 ++++++++++---
 packages/nc-gui-v2/tsconfig.json                    |  1 -
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 737f2501b3..0385b34647 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,12 +1,9 @@
 <script setup lang="ts">
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
 import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType, TableType } from 'nocodb-sdk'
-import { toRef } from 'vue'
-import { $computed } from 'vue/macros'
 import type { Ref } from 'vue'
-import { useMetas } from '~/composables'
 import { ColumnInj, IsFormInj, MetaInj } from '~/context'
-import { provide, useProvideColumnCreateStore } from '#imports'
+import { provide, toRef, useMetas, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any }; hideMenu?: boolean }>()
 const column = toRef(props, 'column')
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 44f7fb4db0..178530aab6 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -29,7 +29,6 @@ import {
   ReloadViewDataHookInj,
 } from '~/context'
 import { NavigateDir } from '~/lib'
-
 import { enumColor } from '~/utils'
 
 const meta = inject(MetaInj)
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 e9aa0a1782..fdb11c7f0f 100644
--- a/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui-v2/components/smartsheet/expanded-form/index.vue
@@ -1,13 +1,20 @@
 <script setup lang="ts">
-import { computedInject } from '@vueuse/core'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import Comments from './Comments.vue'
 import Header from './Header.vue'
-import { provide, toRef, useProvideExpandedFormStore, useProvideSmartsheetStore, useVModel, watch } from '#imports'
+import {
+  computedInject,
+  provide,
+  toRef,
+  useNuxtApp,
+  useProvideExpandedFormStore,
+  useProvideSmartsheetStore,
+  useVModel,
+  watch,
+} from '#imports'
 import { NOCO } from '~/lib'
 import { extractPkFromRow } from '~/utils'
-import { useNuxtApp } from '#app'
 import type { Row } from '~/composables'
 import { FieldsInj, IsFormInj, MetaInj } from '~/context'
 
diff --git a/packages/nc-gui-v2/tsconfig.json b/packages/nc-gui-v2/tsconfig.json
index 00a959cd82..7815bfba85 100644
--- a/packages/nc-gui-v2/tsconfig.json
+++ b/packages/nc-gui-v2/tsconfig.json
@@ -11,7 +11,6 @@
     "strictNullChecks": true,
     "forceConsistentCasingInFileNames": true,
     "types": [
-      "@nuxt/types",
       "@intlify/vite-plugin-vue-i18n/client",
       "vue-i18n",
       "unplugin-icons/types/vue",