From c05e64435d53a8a2e0084a5d3140f8959b95a12d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 19:48:11 +0800
Subject: [PATCH 01/89] feat(gui-v2): include SmartsheetColumnFormulaOptions

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index c1aa52e34d..d6e698339a 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -87,6 +87,7 @@ watchEffect(() => {
         </a-select>
       </a-form-item>
 
+      <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" />
       <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
 

From bf88b78ba61b13ef7ddbb29e4e5f77600f9ff6df Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 19:48:29 +0800
Subject: [PATCH 02/89] feat(gui-v2): add formula utils

---
 packages/nc-gui-v2/utils/formulaUtils.ts | 494 +++++++++++++++++++++++
 packages/nc-gui-v2/utils/index.ts        |   1 +
 2 files changed, 495 insertions(+)
 create mode 100644 packages/nc-gui-v2/utils/formulaUtils.ts

diff --git a/packages/nc-gui-v2/utils/formulaUtils.ts b/packages/nc-gui-v2/utils/formulaUtils.ts
new file mode 100644
index 0000000000..80306d8394
--- /dev/null
+++ b/packages/nc-gui-v2/utils/formulaUtils.ts
@@ -0,0 +1,494 @@
+const formulaTypes = {
+    NUMERIC: "numeric",
+    STRING: "string",
+    DATE: "date",
+    LOGICAL: "logical",
+    COND_EXP: "conditional_expression"
+}
+
+const formulas = {
+    AVG: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'Average of input parameters',
+        syntax: 'AVG(value1, [value2, ...])',
+        examples: [
+            'AVG(10, 5) => 7.5',
+            'AVG({column1}, {column2})',
+            'AVG({column1}, {column2}, {column3})'
+        ]
+    },
+    ADD: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'Sum of input parameters',
+        syntax: 'ADD(value1, [value2, ...])',
+        examples: [
+            'ADD(5, 5) => 10',
+            'ADD({column1}, {column2})',
+            'ADD({column1}, {column2}, {column3})'
+        ]
+    },
+    DATEADD: {
+        type: formulaTypes.DATE,
+        validation: {
+            args: {
+                rqd: 3
+            }
+        },
+        description: 'Adds a "count" units to Datetime.',
+        syntax: 'DATEADD(date | datetime, value, ["day" | "week" | "month" | "year"])',
+        examples: [
+            'DATEADD({column1}, 2, "day")',
+            'DATEADD({column1}, -2, "day")',
+            'DATEADD({column1}, 2, "week")',
+            'DATEADD({column1}, -2, "week")',
+            'DATEADD({column1}, 2, "month")',
+            'DATEADD({column1}, -2, "month")',
+            'DATEADD({column1}, 2, "year")',
+            'DATEADD({column1}, -2, "year")'
+        ]
+    },
+    AND: {
+        type: formulaTypes.COND_EXP,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'TRUE if all expr evaluate to TRUE',
+        syntax: 'AND(expr1, [expr2, ...])',
+        examples: [
+            'AND(5 > 2, 5 < 10) => 1',
+            'AND({column1} > 2, {column2} < 10)'
+        ]
+    },
+    OR: {
+        type: formulaTypes.COND_EXP,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'TRUE if at least one expr evaluates to TRUE',
+        syntax: 'OR(expr1, [expr2, ...])',
+        examples: [
+            'OR(5 > 2, 5 < 10) => 1',
+            'OR({column1} > 2, {column2} < 10)'
+        ]
+    },
+    CONCAT: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'Concatenated string of input parameters',
+        syntax: 'CONCAT(str1, [str2, ...])',
+        examples: [
+            'CONCAT("AA", "BB", "CC") => "AABBCC"',
+            'CONCAT({column1}, {column2}, {column3})'
+        ]
+    },
+    TRIM: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Remove trailing and leading whitespaces from input parameter',
+        syntax: 'TRIM(str)',
+        examples: [
+            'TRIM("         HELLO WORLD  ") => "HELLO WORLD"',
+            'TRIM({column1})'
+        ]
+    },
+    UPPER: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Upper case converted string of input parameter',
+        syntax: 'UPPER(str)',
+        examples: [
+            'UPPER("nocodb") => "NOCODB"',
+            'UPPER({column1})'
+        ]
+    },
+    LOWER: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Lower case converted string of input parameter',
+        syntax: 'LOWER(str)',
+        examples: [
+            'LOWER("NOCODB") => "nocodb"',
+            'LOWER({column1})'
+        ]
+    },
+    LEN: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Input parameter character length',
+        syntax: 'LEN(value)',
+        examples: [
+            'LEN("NocoDB") => 6',
+            'LEN({column1})'
+        ]
+    },
+    MIN: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'Minimum value amongst input parameters',
+        syntax: 'MIN(value1, [value2, ...])',
+        examples: [
+            'MIN(1000, 2000) => 1000',
+            'MIN({column1}, {column2})'
+        ]
+    },
+    MAX: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                min: 1
+            }
+        },
+        description: 'Maximum value amongst input parameters',
+        syntax: 'MAX(value1, [value2, ...])',
+        examples: [
+            'MAX(1000, 2000) => 2000',
+            'MAX({column1}, {column2})'
+        ]
+    },
+    CEILING: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Rounded next largest integer value of input parameter',
+        syntax: 'CEILING(value)',
+        examples: [
+            'CEILING(1.01) => 2',
+            'CEILING({column1})'
+        ]
+    },
+    FLOOR: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Rounded largest integer less than or equal to input parameter',
+        syntax: 'FLOOR(value)',
+        examples: [
+            'FLOOR(3.1415) => 3',
+            'FLOOR({column1})'
+        ]
+    },
+    ROUND: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Nearest integer to the input parameter',
+        syntax: 'ROUND(value)',
+        examples: [
+            'ROUND(3.1415) => 3',
+            'ROUND({column1})'
+        ]
+    },
+    MOD: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'Remainder after integer division of input parameters',
+        syntax: 'MOD(value1, value2)',
+        examples: [
+            'MOD(1024, 1000) => 24',
+            'MOD({column}, 2)'
+        ]
+    },
+    REPEAT: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'Specified copies of the input parameter string concatenated together',
+        syntax: 'REPEAT(str, count)',
+        examples: [
+            'REPEAT("A", 5) => "AAAAA"',
+            'REPEAT({column}, 5)'
+        ]
+    },
+    LOG: {
+        type: formulaTypes.NUMERIC,
+        validation: {},
+        description: 'Logarithm of input parameter to the base (default = e) specified',
+        syntax: 'LOG([base], value)',
+        examples: [
+            'LOG(2, 1024) => 10',
+            'LOG(2, {column1})'
+        ]
+    },
+    EXP: {
+        type: formulaTypes.NUMERIC,
+        validation: {},
+        description: 'Exponential value of input parameter (e ^ power)',
+        syntax: 'EXP(power)',
+        examples: [
+            'EXP(1) => 2.718281828459045',
+            'EXP({column1})'
+        ]
+    },
+    POWER: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'base to the exponent power, as in base ^ exponent',
+        syntax: 'POWER(base, exponent)',
+        examples: [
+            'POWER(2, 10) => 1024',
+            'POWER({column1}, 10)'
+        ]
+    },
+    SQRT: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Square root of the input parameter',
+        syntax: 'SQRT(value)',
+        examples: [
+            'SQRT(100) => 10',
+            'SQRT({column1})'
+        ]
+    },
+    ABS: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Absolute value of the input parameter',
+        syntax: 'ABS(value)',
+        examples: [
+            'ABS({column1})'
+        ]
+    },
+    NOW: {
+        type: formulaTypes.DATE,
+        validation: {
+            args: {
+                rqd: 0
+            }
+        },
+        description: 'Returns the current time and day',
+        syntax: 'NOW()',
+        examples: [
+            'NOW() => 2022-05-19 17:20:43'
+        ]
+    },
+    REPLACE: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 3
+            }
+        },
+        description: 'String, after replacing all occurrences of srchStr with rplcStr',
+        syntax: 'REPLACE(str, srchStr, rplcStr)',
+        examples: [
+            'REPLACE("AABBCC", "AA", "BB") => "BBBBCC"',
+            'REPLACE({column1}, {column2}, {column3})'
+        ]
+    },
+    SEARCH: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'Index of srchStr specified if found, 0 otherwise',
+        syntax: 'SEARCH(str, srchStr)',
+        examples: [
+            'SEARCH("HELLO WORLD", "WORLD") => 7',
+            'SEARCH({column1}, "abc")'
+        ]
+    },
+    INT: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Integer value of input parameter',
+        syntax: 'INT(value)',
+        examples: [
+            'INT(3.1415) => 3',
+            'INT({column1})'
+        ]
+    },
+    RIGHT: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'n characters from the end of input parameter',
+        syntax: 'RIGHT(str, n)',
+        examples: [
+            'RIGHT("HELLO WORLD", 5) => WORLD',
+            'RIGHT({column1}, 3)'
+        ]
+    },
+    LEFT: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 2
+            }
+        },
+        description: 'n characters from the beginning of input parameter',
+        syntax: 'LEFT(str, n)',
+        examples: [
+            'LEFT({column1}, 2)',
+            'LEFT("ABCD", 2) => "AB"'
+        ]
+    },
+    SUBSTR: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                min: 2,
+                max: 3
+            }
+        },
+        description: 'Substring of length n of input string from the postition specified',
+        syntax: '	SUBTR(str, position, [n])',
+        examples: [
+            'SUBSTR("HELLO WORLD", 7) => WORLD',
+            'SUBSTR("HELLO WORLD", 7, 3) => WOR',
+            'SUBSTR({column1}, 7, 5)'
+        ]
+    },
+    MID: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 3
+            }
+        },
+        description: 'Alias for SUBSTR',
+        syntax: 'MID(str, position, [count])',
+        examples: [
+            'MID("NocoDB", 3, 2) => "co"',
+            'MID({column1}, 3, 2)'
+        ]
+    },
+    IF: {
+        type: formulaTypes.COND_EXP,
+        validation: {
+            args: {
+                min: 2,
+                max: 3
+            }
+        },
+        description: 'SuccessCase if expr evaluates to TRUE, elseCase otherwise',
+        syntax: 'IF(expr, successCase, elseCase)',
+        examples: [
+            'IF(5 > 1, "YES", "NO") => "YES"',
+            'IF({column} > 1, "YES", "NO")'
+        ]
+    },
+    SWITCH: {
+        type: formulaTypes.COND_EXP,
+        validation: {
+            args: {
+                min: 3
+            }
+        },
+        description: 'Switch case value based on expr output',
+        syntax: 'SWITCH(expr, [pattern, value, ..., default])',
+        examples: [
+            'SWITCH(1, 1, "One", 2, "Two", "N/A") => "One""',
+            'SWITCH(2, 1, "One", 2, "Two", "N/A") => "Two"',
+            'SWITCH(3, 1, "One", 2, "Two", "N/A") => "N/A"',
+            'SWITCH({column1}, 1, "One", 2, "Two", "N/A")'
+        ]
+    },
+    URL: {
+        type: formulaTypes.STRING,
+        validation: {
+            args: {
+                rqd: 1
+            }
+        },
+        description: 'Convert to a hyperlink if it is a valid URL',
+        syntax: 'URL(str)',
+        examples: [
+            'URL("https://github.com/nocodb/nocodb")',
+            'URL({column1})'
+        ]
+    },
+    WEEKDAY: {
+        type: formulaTypes.NUMERIC,
+        validation: {
+            args: {
+                min: 1,
+                max: 2,
+            }
+        },
+        description: 'Returns the day of the week as an integer between 0 and 6 inclusive starting from Monday by default',
+        syntax: 'WEEKDAY(date, [startDayOfWeek])',
+        examples: [
+            'WEEKDAY("2021-06-09")',
+            'WEEKDAY(NOW(), "sunday")'
+        ]
+    }
+}
+
+const formulaList = Object.keys(formulas)
+
+export { formulaList, formulas, formulaTypes }
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index fb53c2b25d..51b714866d 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -1,6 +1,7 @@
 export * from './colorsUtils'
 export * from './dateTimeUtils'
 export * from './deepCompare'
+export * from './formulaUtils'
 export * from './durationUtils'
 export * from './errorUtils'
 export * from './fileUtils'

From 6150d4785a893a05ab593488b943f63f2b069c98 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 19:48:41 +0800
Subject: [PATCH 03/89] wip(gui-v2): formula options

---
 .../smartsheet-column/FormulaOptions.vue      | 123 ++++++++++++++++++
 1 file changed, 123 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
new file mode 100644
index 0000000000..680a763c1a
--- /dev/null
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import jsep from 'jsep';
+import { UITypes, jsepCurlyHook } from 'nocodb-sdk';
+import { formulaList, formulas, formulaTypes } from '@/utils'
+
+
+const formula = ref({})
+
+const availableFunctions = formulaList
+
+const availableBinOps = ['+', '-', '*', '/', '>', '<', '==', '<=', '>=', '!=']
+
+const autocomplete = ref(false)
+
+const suggestion = ref()
+
+const wordToComplete = ref('')
+
+const selected = ref(0)
+
+const tooltip = ref(true)
+
+const sortOrder = {
+  column: 0,
+  function: 1,
+  op: 2,
+}
+</script>
+
+<template>
+  <div class="formula-wrapper">
+    <a-text-field
+      ref="input"
+      v-model:value="formula.value"
+      dense
+      outlined
+      class="caption"
+      hide-details="auto"
+      label="Formula"
+      :rules="[(v) => !!v || 'Required', (v) => parseAndValidateFormula(v)]"
+      autocomplete="off"
+      @input="handleInputDeb"
+      @keydown.down.prevent="suggestionListDown"
+      @keydown.up.prevent="suggestionListUp"
+      @keydown.enter.prevent="selectText"
+    />
+    <div class="hint">
+      Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
+      <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.
+    </div>
+    <v-card v-if="suggestion && suggestion.length" class="formula-suggestion">
+      <v-card-text>Suggestions</v-card-text>
+      <v-divider />
+      <v-list ref="sugList" dense max-height="50vh" style="overflow: auto">
+        <v-list-item-group v-model="selected" color="primary">
+          <v-list-item
+            v-for="(it, i) in suggestion"
+            :key="i"
+            ref="sugOptions"
+            dense
+            selectable
+            @mousedown.prevent="appendText(it)"
+          >
+            <!-- Function -->
+            <template v-if="it.type === 'function'">
+              <v-tooltip right offset-x nudge-right="100">
+                <template #activator="{ on }">
+                  <v-list-item-content v-on="on">
+                    <span class="caption primary--text text--lighten-2 font-weight-bold">
+                      <v-icon color="primary lighten-2" small class="mr-1"> mdi-function </v-icon>
+                      {{ it.text }}
+                    </span>
+                  </v-list-item-content>
+                  <v-list-item-action>
+                    <span class="caption"> Function </span>
+                  </v-list-item-action>
+                </template>
+                <div>
+                  {{ it.description }} <br /><br />
+                  Syntax: <br />
+                  {{ it.syntax }} <br /><br />
+                  Examples: <br />
+                  <div v-for="(example, idx) in it.examples" :key="idx">
+                    <pre>({{ idx + 1 }}): {{ example }}</pre>
+                  </div>
+                </div>
+              </v-tooltip>
+            </template>
+
+            <!-- Column -->
+            <template v-if="it.type === 'column'">
+              <v-list-item-content>
+                <span class="caption text--darken-3 font-weight-bold">
+                  <v-icon color="grey darken-4" small class="mr-1">
+                    {{ it.icon }}
+                  </v-icon>
+                  {{ it.text }}
+                </span>
+              </v-list-item-content>
+              <v-list-item-action>
+                <span class="caption"> Column </span>
+              </v-list-item-action>
+            </template>
+
+            <!-- Operator -->
+            <template v-if="it.type === 'op'">
+              <v-list-item-content>
+                <span class="caption indigo--text text--darken-3 font-weight-bold">
+                  <v-icon color="indigo darken-3" small class="mr-1"> mdi-calculator-variant </v-icon>
+                  {{ it.text }}
+                </span>
+              </v-list-item-content>
+
+              <v-list-item-action>
+                <span class="caption"> Operator </span>
+              </v-list-item-action>
+            </template>
+          </v-list-item>
+        </v-list-item-group>
+      </v-list>
+    </v-card>
+  </div>
+</template>

From 34bee526cf1d2a862a4a730af61b849eb878cfa5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 20:19:28 +0800
Subject: [PATCH 04/89] feat(gui-v2): add jsep

---
 packages/nc-gui-v2/package-lock.json | 14 ++++++++++++++
 packages/nc-gui-v2/package.json      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index 082fb125b8..eab7b55eac 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -11,6 +11,7 @@
         "ant-design-vue": "^3.2.10",
         "dayjs": "^1.11.3",
         "file-saver": "^2.0.5",
+        "jsep": "^1.3.6",
         "jwt-decode": "^3.1.2",
         "locale-codes": "^1.3.1",
         "monaco-editor": "^0.33.0",
@@ -8785,6 +8786,14 @@
         "node": ">=12"
       }
     },
+    "node_modules/jsep": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/jsep/-/jsep-1.3.6.tgz",
+      "integrity": "sha512-o7fP1eZVROIChADx7HKiwGRVI0tUqgUUGhaok6DP7cMxpDeparuooREDBDeNk2G5KIB49MBSkRYsCOu4PmZ+1w==",
+      "engines": {
+        "node": ">= 10.16.0"
+      }
+    },
     "node_modules/jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
@@ -21278,6 +21287,11 @@
         }
       }
     },
+    "jsep": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/jsep/-/jsep-1.3.6.tgz",
+      "integrity": "sha512-o7fP1eZVROIChADx7HKiwGRVI0tUqgUUGhaok6DP7cMxpDeparuooREDBDeNk2G5KIB49MBSkRYsCOu4PmZ+1w=="
+    },
     "jsesc": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index 30894765ad..a03599eec8 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -17,6 +17,7 @@
     "ant-design-vue": "^3.2.10",
     "dayjs": "^1.11.3",
     "file-saver": "^2.0.5",
+    "jsep": "^1.3.6",
     "jwt-decode": "^3.1.2",
     "locale-codes": "^1.3.1",
     "monaco-editor": "^0.33.0",

From 721a8c8dfe2dfddacb622a19b064ad1129f8bde5 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 20:26:03 +0800
Subject: [PATCH 05/89] feat(gui-v2): export column in useColumnCreateStore

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

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 50328a7b0e..535f6c522f 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -211,6 +211,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     addOrUpdate,
     generateNewColumnMeta,
     isEdit: !!column?.id,
+    column
   }
 })
 

From 9e57d8fcd90c368b6ef9013f7ac5dac6036efcbe Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 20:26:37 +0800
Subject: [PATCH 06/89] feat(gui-v2): add useProvideColumnCreateStore

---
 .../components/smartsheet-header/VirtualCell.vue    | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 187b30cb6d..3d89d148f0 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
-import { ColumnInj } from '~/context'
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { ColumnInj, MetaInj } from '~/context'
 import { provide } from '#imports'
 
 const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+
 provide(ColumnInj, column)
+
+const meta = inject(MetaInj)
+
+useProvideColumnCreateStore(meta as Ref<TableType>, column)
+
 // import { UITypes } from 'nocodb-sdk'
 // import { getUIDTIcon } from '../helpers/uiTypes'
 // import EditVirtualColumn from '~/components/project/spreadsheet/components/EditVirtualColumn'
@@ -156,4 +163,4 @@ provide(ColumnInj, column)
   overflow: hidden;
   text-overflow: ellipsis;
 }
-</style>
+</style>
\ No newline at end of file

From 8d76f194516f2828b8688a5844dde53a838802fc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Wed, 3 Aug 2022 20:26:59 +0800
Subject: [PATCH 07/89] feat(gui-v2): allow virtual column to edit

---
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 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 a4e3b6dcc2..a232f64456 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -62,7 +62,7 @@ const setAsPrimaryValue = async () => {
     <MdiMenuDownIcon class="text-grey" />
     <template #overlay>
       <div class="shadow bg-white">
-        <div v-if="!virtual" class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
+        <div class="nc-column-edit nc-menu-item" @click="editColumnDropdown = true">
           <MdiEditIcon class="text-primary" />
           <!-- Edit -->
           {{ $t('general.edit') }}

From 2bcfd7c7e5643670bba08c4ea24785f9d431b0c0 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:10:54 +0800
Subject: [PATCH 08/89] feat(gui-v2): include getWordUntilCaret &
 insertAtCursor in formula utils

---
 packages/nc-gui-v2/utils/formulaUtils.ts | 939 +++++++++++------------
 1 file changed, 453 insertions(+), 486 deletions(-)

diff --git a/packages/nc-gui-v2/utils/formulaUtils.ts b/packages/nc-gui-v2/utils/formulaUtils.ts
index 80306d8394..6a67337529 100644
--- a/packages/nc-gui-v2/utils/formulaUtils.ts
+++ b/packages/nc-gui-v2/utils/formulaUtils.ts
@@ -1,494 +1,461 @@
+import type { Input as AntInput } from 'ant-design-vue'
+
 const formulaTypes = {
-    NUMERIC: "numeric",
-    STRING: "string",
-    DATE: "date",
-    LOGICAL: "logical",
-    COND_EXP: "conditional_expression"
+  NUMERIC: 'numeric',
+  STRING: 'string',
+  DATE: 'date',
+  LOGICAL: 'logical',
+  COND_EXP: 'conditional_expression',
 }
 
 const formulas = {
-    AVG: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'Average of input parameters',
-        syntax: 'AVG(value1, [value2, ...])',
-        examples: [
-            'AVG(10, 5) => 7.5',
-            'AVG({column1}, {column2})',
-            'AVG({column1}, {column2}, {column3})'
-        ]
-    },
-    ADD: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'Sum of input parameters',
-        syntax: 'ADD(value1, [value2, ...])',
-        examples: [
-            'ADD(5, 5) => 10',
-            'ADD({column1}, {column2})',
-            'ADD({column1}, {column2}, {column3})'
-        ]
-    },
-    DATEADD: {
-        type: formulaTypes.DATE,
-        validation: {
-            args: {
-                rqd: 3
-            }
-        },
-        description: 'Adds a "count" units to Datetime.',
-        syntax: 'DATEADD(date | datetime, value, ["day" | "week" | "month" | "year"])',
-        examples: [
-            'DATEADD({column1}, 2, "day")',
-            'DATEADD({column1}, -2, "day")',
-            'DATEADD({column1}, 2, "week")',
-            'DATEADD({column1}, -2, "week")',
-            'DATEADD({column1}, 2, "month")',
-            'DATEADD({column1}, -2, "month")',
-            'DATEADD({column1}, 2, "year")',
-            'DATEADD({column1}, -2, "year")'
-        ]
-    },
-    AND: {
-        type: formulaTypes.COND_EXP,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'TRUE if all expr evaluate to TRUE',
-        syntax: 'AND(expr1, [expr2, ...])',
-        examples: [
-            'AND(5 > 2, 5 < 10) => 1',
-            'AND({column1} > 2, {column2} < 10)'
-        ]
-    },
-    OR: {
-        type: formulaTypes.COND_EXP,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'TRUE if at least one expr evaluates to TRUE',
-        syntax: 'OR(expr1, [expr2, ...])',
-        examples: [
-            'OR(5 > 2, 5 < 10) => 1',
-            'OR({column1} > 2, {column2} < 10)'
-        ]
-    },
-    CONCAT: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'Concatenated string of input parameters',
-        syntax: 'CONCAT(str1, [str2, ...])',
-        examples: [
-            'CONCAT("AA", "BB", "CC") => "AABBCC"',
-            'CONCAT({column1}, {column2}, {column3})'
-        ]
-    },
-    TRIM: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Remove trailing and leading whitespaces from input parameter',
-        syntax: 'TRIM(str)',
-        examples: [
-            'TRIM("         HELLO WORLD  ") => "HELLO WORLD"',
-            'TRIM({column1})'
-        ]
-    },
-    UPPER: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Upper case converted string of input parameter',
-        syntax: 'UPPER(str)',
-        examples: [
-            'UPPER("nocodb") => "NOCODB"',
-            'UPPER({column1})'
-        ]
-    },
-    LOWER: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Lower case converted string of input parameter',
-        syntax: 'LOWER(str)',
-        examples: [
-            'LOWER("NOCODB") => "nocodb"',
-            'LOWER({column1})'
-        ]
-    },
-    LEN: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Input parameter character length',
-        syntax: 'LEN(value)',
-        examples: [
-            'LEN("NocoDB") => 6',
-            'LEN({column1})'
-        ]
-    },
-    MIN: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'Minimum value amongst input parameters',
-        syntax: 'MIN(value1, [value2, ...])',
-        examples: [
-            'MIN(1000, 2000) => 1000',
-            'MIN({column1}, {column2})'
-        ]
-    },
-    MAX: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                min: 1
-            }
-        },
-        description: 'Maximum value amongst input parameters',
-        syntax: 'MAX(value1, [value2, ...])',
-        examples: [
-            'MAX(1000, 2000) => 2000',
-            'MAX({column1}, {column2})'
-        ]
-    },
-    CEILING: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Rounded next largest integer value of input parameter',
-        syntax: 'CEILING(value)',
-        examples: [
-            'CEILING(1.01) => 2',
-            'CEILING({column1})'
-        ]
-    },
-    FLOOR: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Rounded largest integer less than or equal to input parameter',
-        syntax: 'FLOOR(value)',
-        examples: [
-            'FLOOR(3.1415) => 3',
-            'FLOOR({column1})'
-        ]
-    },
-    ROUND: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Nearest integer to the input parameter',
-        syntax: 'ROUND(value)',
-        examples: [
-            'ROUND(3.1415) => 3',
-            'ROUND({column1})'
-        ]
-    },
-    MOD: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'Remainder after integer division of input parameters',
-        syntax: 'MOD(value1, value2)',
-        examples: [
-            'MOD(1024, 1000) => 24',
-            'MOD({column}, 2)'
-        ]
-    },
-    REPEAT: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'Specified copies of the input parameter string concatenated together',
-        syntax: 'REPEAT(str, count)',
-        examples: [
-            'REPEAT("A", 5) => "AAAAA"',
-            'REPEAT({column}, 5)'
-        ]
-    },
-    LOG: {
-        type: formulaTypes.NUMERIC,
-        validation: {},
-        description: 'Logarithm of input parameter to the base (default = e) specified',
-        syntax: 'LOG([base], value)',
-        examples: [
-            'LOG(2, 1024) => 10',
-            'LOG(2, {column1})'
-        ]
-    },
-    EXP: {
-        type: formulaTypes.NUMERIC,
-        validation: {},
-        description: 'Exponential value of input parameter (e ^ power)',
-        syntax: 'EXP(power)',
-        examples: [
-            'EXP(1) => 2.718281828459045',
-            'EXP({column1})'
-        ]
-    },
-    POWER: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'base to the exponent power, as in base ^ exponent',
-        syntax: 'POWER(base, exponent)',
-        examples: [
-            'POWER(2, 10) => 1024',
-            'POWER({column1}, 10)'
-        ]
-    },
-    SQRT: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Square root of the input parameter',
-        syntax: 'SQRT(value)',
-        examples: [
-            'SQRT(100) => 10',
-            'SQRT({column1})'
-        ]
-    },
-    ABS: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Absolute value of the input parameter',
-        syntax: 'ABS(value)',
-        examples: [
-            'ABS({column1})'
-        ]
-    },
-    NOW: {
-        type: formulaTypes.DATE,
-        validation: {
-            args: {
-                rqd: 0
-            }
-        },
-        description: 'Returns the current time and day',
-        syntax: 'NOW()',
-        examples: [
-            'NOW() => 2022-05-19 17:20:43'
-        ]
-    },
-    REPLACE: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 3
-            }
-        },
-        description: 'String, after replacing all occurrences of srchStr with rplcStr',
-        syntax: 'REPLACE(str, srchStr, rplcStr)',
-        examples: [
-            'REPLACE("AABBCC", "AA", "BB") => "BBBBCC"',
-            'REPLACE({column1}, {column2}, {column3})'
-        ]
-    },
-    SEARCH: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'Index of srchStr specified if found, 0 otherwise',
-        syntax: 'SEARCH(str, srchStr)',
-        examples: [
-            'SEARCH("HELLO WORLD", "WORLD") => 7',
-            'SEARCH({column1}, "abc")'
-        ]
-    },
-    INT: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Integer value of input parameter',
-        syntax: 'INT(value)',
-        examples: [
-            'INT(3.1415) => 3',
-            'INT({column1})'
-        ]
-    },
-    RIGHT: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'n characters from the end of input parameter',
-        syntax: 'RIGHT(str, n)',
-        examples: [
-            'RIGHT("HELLO WORLD", 5) => WORLD',
-            'RIGHT({column1}, 3)'
-        ]
-    },
-    LEFT: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 2
-            }
-        },
-        description: 'n characters from the beginning of input parameter',
-        syntax: 'LEFT(str, n)',
-        examples: [
-            'LEFT({column1}, 2)',
-            'LEFT("ABCD", 2) => "AB"'
-        ]
-    },
-    SUBSTR: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                min: 2,
-                max: 3
-            }
-        },
-        description: 'Substring of length n of input string from the postition specified',
-        syntax: '	SUBTR(str, position, [n])',
-        examples: [
-            'SUBSTR("HELLO WORLD", 7) => WORLD',
-            'SUBSTR("HELLO WORLD", 7, 3) => WOR',
-            'SUBSTR({column1}, 7, 5)'
-        ]
-    },
-    MID: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 3
-            }
-        },
-        description: 'Alias for SUBSTR',
-        syntax: 'MID(str, position, [count])',
-        examples: [
-            'MID("NocoDB", 3, 2) => "co"',
-            'MID({column1}, 3, 2)'
-        ]
-    },
-    IF: {
-        type: formulaTypes.COND_EXP,
-        validation: {
-            args: {
-                min: 2,
-                max: 3
-            }
-        },
-        description: 'SuccessCase if expr evaluates to TRUE, elseCase otherwise',
-        syntax: 'IF(expr, successCase, elseCase)',
-        examples: [
-            'IF(5 > 1, "YES", "NO") => "YES"',
-            'IF({column} > 1, "YES", "NO")'
-        ]
-    },
-    SWITCH: {
-        type: formulaTypes.COND_EXP,
-        validation: {
-            args: {
-                min: 3
-            }
-        },
-        description: 'Switch case value based on expr output',
-        syntax: 'SWITCH(expr, [pattern, value, ..., default])',
-        examples: [
-            'SWITCH(1, 1, "One", 2, "Two", "N/A") => "One""',
-            'SWITCH(2, 1, "One", 2, "Two", "N/A") => "Two"',
-            'SWITCH(3, 1, "One", 2, "Two", "N/A") => "N/A"',
-            'SWITCH({column1}, 1, "One", 2, "Two", "N/A")'
-        ]
-    },
-    URL: {
-        type: formulaTypes.STRING,
-        validation: {
-            args: {
-                rqd: 1
-            }
-        },
-        description: 'Convert to a hyperlink if it is a valid URL',
-        syntax: 'URL(str)',
-        examples: [
-            'URL("https://github.com/nocodb/nocodb")',
-            'URL({column1})'
-        ]
-    },
-    WEEKDAY: {
-        type: formulaTypes.NUMERIC,
-        validation: {
-            args: {
-                min: 1,
-                max: 2,
-            }
-        },
-        description: 'Returns the day of the week as an integer between 0 and 6 inclusive starting from Monday by default',
-        syntax: 'WEEKDAY(date, [startDayOfWeek])',
-        examples: [
-            'WEEKDAY("2021-06-09")',
-            'WEEKDAY(NOW(), "sunday")'
-        ]
-    }
+  AVG: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'Average of input parameters',
+    syntax: 'AVG(value1, [value2, ...])',
+    examples: ['AVG(10, 5) => 7.5', 'AVG({column1}, {column2})', 'AVG({column1}, {column2}, {column3})'],
+  },
+  ADD: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'Sum of input parameters',
+    syntax: 'ADD(value1, [value2, ...])',
+    examples: ['ADD(5, 5) => 10', 'ADD({column1}, {column2})', 'ADD({column1}, {column2}, {column3})'],
+  },
+  DATEADD: {
+    type: formulaTypes.DATE,
+    validation: {
+      args: {
+        rqd: 3,
+      },
+    },
+    description: 'Adds a "count" units to Datetime.',
+    syntax: 'DATEADD(date | datetime, value, ["day" | "week" | "month" | "year"])',
+    examples: [
+      'DATEADD({column1}, 2, "day")',
+      'DATEADD({column1}, -2, "day")',
+      'DATEADD({column1}, 2, "week")',
+      'DATEADD({column1}, -2, "week")',
+      'DATEADD({column1}, 2, "month")',
+      'DATEADD({column1}, -2, "month")',
+      'DATEADD({column1}, 2, "year")',
+      'DATEADD({column1}, -2, "year")',
+    ],
+  },
+  AND: {
+    type: formulaTypes.COND_EXP,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'TRUE if all expr evaluate to TRUE',
+    syntax: 'AND(expr1, [expr2, ...])',
+    examples: ['AND(5 > 2, 5 < 10) => 1', 'AND({column1} > 2, {column2} < 10)'],
+  },
+  OR: {
+    type: formulaTypes.COND_EXP,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'TRUE if at least one expr evaluates to TRUE',
+    syntax: 'OR(expr1, [expr2, ...])',
+    examples: ['OR(5 > 2, 5 < 10) => 1', 'OR({column1} > 2, {column2} < 10)'],
+  },
+  CONCAT: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'Concatenated string of input parameters',
+    syntax: 'CONCAT(str1, [str2, ...])',
+    examples: ['CONCAT("AA", "BB", "CC") => "AABBCC"', 'CONCAT({column1}, {column2}, {column3})'],
+  },
+  TRIM: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Remove trailing and leading whitespaces from input parameter',
+    syntax: 'TRIM(str)',
+    examples: ['TRIM("         HELLO WORLD  ") => "HELLO WORLD"', 'TRIM({column1})'],
+  },
+  UPPER: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Upper case converted string of input parameter',
+    syntax: 'UPPER(str)',
+    examples: ['UPPER("nocodb") => "NOCODB"', 'UPPER({column1})'],
+  },
+  LOWER: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Lower case converted string of input parameter',
+    syntax: 'LOWER(str)',
+    examples: ['LOWER("NOCODB") => "nocodb"', 'LOWER({column1})'],
+  },
+  LEN: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Input parameter character length',
+    syntax: 'LEN(value)',
+    examples: ['LEN("NocoDB") => 6', 'LEN({column1})'],
+  },
+  MIN: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'Minimum value amongst input parameters',
+    syntax: 'MIN(value1, [value2, ...])',
+    examples: ['MIN(1000, 2000) => 1000', 'MIN({column1}, {column2})'],
+  },
+  MAX: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        min: 1,
+      },
+    },
+    description: 'Maximum value amongst input parameters',
+    syntax: 'MAX(value1, [value2, ...])',
+    examples: ['MAX(1000, 2000) => 2000', 'MAX({column1}, {column2})'],
+  },
+  CEILING: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Rounded next largest integer value of input parameter',
+    syntax: 'CEILING(value)',
+    examples: ['CEILING(1.01) => 2', 'CEILING({column1})'],
+  },
+  FLOOR: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Rounded largest integer less than or equal to input parameter',
+    syntax: 'FLOOR(value)',
+    examples: ['FLOOR(3.1415) => 3', 'FLOOR({column1})'],
+  },
+  ROUND: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Nearest integer to the input parameter',
+    syntax: 'ROUND(value)',
+    examples: ['ROUND(3.1415) => 3', 'ROUND({column1})'],
+  },
+  MOD: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'Remainder after integer division of input parameters',
+    syntax: 'MOD(value1, value2)',
+    examples: ['MOD(1024, 1000) => 24', 'MOD({column}, 2)'],
+  },
+  REPEAT: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'Specified copies of the input parameter string concatenated together',
+    syntax: 'REPEAT(str, count)',
+    examples: ['REPEAT("A", 5) => "AAAAA"', 'REPEAT({column}, 5)'],
+  },
+  LOG: {
+    type: formulaTypes.NUMERIC,
+    validation: {},
+    description: 'Logarithm of input parameter to the base (default = e) specified',
+    syntax: 'LOG([base], value)',
+    examples: ['LOG(2, 1024) => 10', 'LOG(2, {column1})'],
+  },
+  EXP: {
+    type: formulaTypes.NUMERIC,
+    validation: {},
+    description: 'Exponential value of input parameter (e ^ power)',
+    syntax: 'EXP(power)',
+    examples: ['EXP(1) => 2.718281828459045', 'EXP({column1})'],
+  },
+  POWER: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'base to the exponent power, as in base ^ exponent',
+    syntax: 'POWER(base, exponent)',
+    examples: ['POWER(2, 10) => 1024', 'POWER({column1}, 10)'],
+  },
+  SQRT: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Square root of the input parameter',
+    syntax: 'SQRT(value)',
+    examples: ['SQRT(100) => 10', 'SQRT({column1})'],
+  },
+  ABS: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Absolute value of the input parameter',
+    syntax: 'ABS(value)',
+    examples: ['ABS({column1})'],
+  },
+  NOW: {
+    type: formulaTypes.DATE,
+    validation: {
+      args: {
+        rqd: 0,
+      },
+    },
+    description: 'Returns the current time and day',
+    syntax: 'NOW()',
+    examples: ['NOW() => 2022-05-19 17:20:43'],
+  },
+  REPLACE: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 3,
+      },
+    },
+    description: 'String, after replacing all occurrences of srchStr with rplcStr',
+    syntax: 'REPLACE(str, srchStr, rplcStr)',
+    examples: ['REPLACE("AABBCC", "AA", "BB") => "BBBBCC"', 'REPLACE({column1}, {column2}, {column3})'],
+  },
+  SEARCH: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'Index of srchStr specified if found, 0 otherwise',
+    syntax: 'SEARCH(str, srchStr)',
+    examples: ['SEARCH("HELLO WORLD", "WORLD") => 7', 'SEARCH({column1}, "abc")'],
+  },
+  INT: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Integer value of input parameter',
+    syntax: 'INT(value)',
+    examples: ['INT(3.1415) => 3', 'INT({column1})'],
+  },
+  RIGHT: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'n characters from the end of input parameter',
+    syntax: 'RIGHT(str, n)',
+    examples: ['RIGHT("HELLO WORLD", 5) => WORLD', 'RIGHT({column1}, 3)'],
+  },
+  LEFT: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 2,
+      },
+    },
+    description: 'n characters from the beginning of input parameter',
+    syntax: 'LEFT(str, n)',
+    examples: ['LEFT({column1}, 2)', 'LEFT("ABCD", 2) => "AB"'],
+  },
+  SUBSTR: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        min: 2,
+        max: 3,
+      },
+    },
+    description: 'Substring of length n of input string from the postition specified',
+    syntax: '	SUBTR(str, position, [n])',
+    examples: ['SUBSTR("HELLO WORLD", 7) => WORLD', 'SUBSTR("HELLO WORLD", 7, 3) => WOR', 'SUBSTR({column1}, 7, 5)'],
+  },
+  MID: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 3,
+      },
+    },
+    description: 'Alias for SUBSTR',
+    syntax: 'MID(str, position, [count])',
+    examples: ['MID("NocoDB", 3, 2) => "co"', 'MID({column1}, 3, 2)'],
+  },
+  IF: {
+    type: formulaTypes.COND_EXP,
+    validation: {
+      args: {
+        min: 2,
+        max: 3,
+      },
+    },
+    description: 'SuccessCase if expr evaluates to TRUE, elseCase otherwise',
+    syntax: 'IF(expr, successCase, elseCase)',
+    examples: ['IF(5 > 1, "YES", "NO") => "YES"', 'IF({column} > 1, "YES", "NO")'],
+  },
+  SWITCH: {
+    type: formulaTypes.COND_EXP,
+    validation: {
+      args: {
+        min: 3,
+      },
+    },
+    description: 'Switch case value based on expr output',
+    syntax: 'SWITCH(expr, [pattern, value, ..., default])',
+    examples: [
+      'SWITCH(1, 1, "One", 2, "Two", "N/A") => "One""',
+      'SWITCH(2, 1, "One", 2, "Two", "N/A") => "Two"',
+      'SWITCH(3, 1, "One", 2, "Two", "N/A") => "N/A"',
+      'SWITCH({column1}, 1, "One", 2, "Two", "N/A")',
+    ],
+  },
+  URL: {
+    type: formulaTypes.STRING,
+    validation: {
+      args: {
+        rqd: 1,
+      },
+    },
+    description: 'Convert to a hyperlink if it is a valid URL',
+    syntax: 'URL(str)',
+    examples: ['URL("https://github.com/nocodb/nocodb")', 'URL({column1})'],
+  },
+  WEEKDAY: {
+    type: formulaTypes.NUMERIC,
+    validation: {
+      args: {
+        min: 1,
+        max: 2,
+      },
+    },
+    description: 'Returns the day of the week as an integer between 0 and 6 inclusive starting from Monday by default',
+    syntax: 'WEEKDAY(date, [startDayOfWeek])',
+    examples: ['WEEKDAY("2021-06-09")', 'WEEKDAY(NOW(), "sunday")'],
+  },
 }
 
 const formulaList = Object.keys(formulas)
 
-export { formulaList, formulas, formulaTypes }
+// ref : https://stackoverflow.com/a/11077016
+function insertAtCursor(myField: typeof AntInput, myValue: string, len = 0, b = 0) {
+  // IE support
+  if (document) {
+    myField.focus()
+    const sel = document.createRange() as any
+    sel.text = myValue
+  } // MOZILLA and others
+  else if (myField.selectionStart || myField.selectionStart == '0') {
+    const startPos = myField.selectionStart
+    const endPos = myField.selectionEnd
+    myField.value = myField.value.substring(0, startPos - len) + myValue + myField.value.substring(endPos, myField.value.length)
+
+    const pos = +startPos - len + myValue.length - b
+    // https://stackoverflow.com/a/4302688
+    if (myField.setSelectionRange) {
+      myField.focus()
+      myField.setSelectionRange(pos, pos)
+    } else if (myField.createTextRange) {
+      const range = myField.createTextRange()
+      range.collapse(true)
+      range.moveEnd('character', pos)
+      range.moveStart('character', pos)
+      range.select()
+    }
+  } else {
+    myField.value += myValue
+  }
+  return myField.value
+}
+
+function ReturnWord(text: string, caretPos: number) {
+  const preText = text.substring(0, caretPos)
+  if (preText.indexOf(' ') > 0) {
+    const words = preText.split(' ')
+    return words[words.length - 1] // return last word
+  } else {
+    return preText
+  }
+}
+
+function getWordUntilCaret(ctrl: typeof AntInput) {
+  const caretPos = GetCaretPosition(ctrl)
+  const word = ReturnWord(ctrl.value, caretPos)
+  return word || ''
+}
+
+function GetCaretPosition(ctrl: typeof AntInput) {
+  let CaretPos = 0 // IE Support
+  if (document) {
+    ctrl.focus()
+    const Sel = document.createRange() as any
+    Sel.moveStart('character', -ctrl.value.length)
+    CaretPos = Sel.text.length
+  }
+  // Firefox support
+  else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
+    CaretPos = ctrl.selectionStart
+  }
+  return CaretPos
+}
+
+export { formulaList, formulas, formulaTypes, getWordUntilCaret, insertAtCursor }

From 28dd7145b1209f60cee4d65c19da8d303721b92f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:33:31 +0800
Subject: [PATCH 09/89] feat(gui-v2): add NcAutocompleteTree

---
 .../nc-gui-v2/utils/NcAutocompleteTree.ts     | 87 +++++++++++++++++++
 packages/nc-gui-v2/utils/index.ts             |  1 +
 2 files changed, 88 insertions(+)
 create mode 100644 packages/nc-gui-v2/utils/NcAutocompleteTree.ts

diff --git a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
new file mode 100644
index 0000000000..8af01f9812
--- /dev/null
+++ b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
@@ -0,0 +1,87 @@
+// ref : https://medium.com/weekly-webtips/js-implementing-auto-complete-f4c5a5d5c009
+
+interface Node {
+  value: []
+  isLeaf: boolean
+  children: Record<string, Node>
+}
+
+export class NcAutocompleteTree {
+  trie: Record<string, any>
+  suggestions: string[]
+
+  constructor() {
+    this.trie = {}
+    this.suggestions = []
+  }
+
+  newNode(): Node {
+    return {
+      value: [],
+      isLeaf: false,
+      children: {},
+    }
+  }
+
+  add(word: Record<string, any>) {
+    if (!this.trie) {
+      this.trie = this.newNode()
+    }
+
+    let root = this.trie
+    for (const letter of word.text.toLowerCase()) {
+      if (!(letter in root.children)) {
+        root.children[letter] = this.newNode()
+      }
+      root = root.children[letter]
+    }
+    root.value = root.value || []
+    root.value.push(word)
+  }
+
+  find(word: string) {
+    let root = this.trie
+    for (const letter of word) {
+      if (letter in root.children) {
+        root = root.children[letter]
+      } else {
+        return null // if not found return null
+      }
+    }
+
+    return root // return the root where it ends search
+  }
+
+  traverse(root: Node) {
+    if (root.value && root.value.length) {
+      this.suggestions.push(...root.value)
+    }
+
+    for (const letter in root.children) {
+      this.traverse(root.children[letter])
+    }
+  }
+
+  complete(word: string, CHILDREN = null) {
+    this.suggestions = []
+    const root = this.find(word.toLowerCase())
+
+    if (!root) {
+      return this.suggestions
+    } // cannot suggest anything
+
+    const children = root.children
+
+    let spread = 0
+    for (const letter in children) {
+      this.traverse(children[letter])
+      spread++
+
+      if (CHILDREN && spread === CHILDREN) {
+        break
+      }
+    }
+
+    return this.suggestions
+  }
+}
diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index 48125eb024..309388f94b 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -1,3 +1,4 @@
+export * from './NcAutocompleteTree'
 export * from './colorsUtils'
 export * from './dateTimeUtils'
 export * from './deepCompare'

From 5220ecc6a0f93501bda279463c826bd87b0fed04 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:33:41 +0800
Subject: [PATCH 10/89] fix(gui-v2): lint

---
 packages/nc-gui-v2/utils/formulaUtils.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/utils/formulaUtils.ts b/packages/nc-gui-v2/utils/formulaUtils.ts
index 6a67337529..9c64b3ae73 100644
--- a/packages/nc-gui-v2/utils/formulaUtils.ts
+++ b/packages/nc-gui-v2/utils/formulaUtils.ts
@@ -8,7 +8,7 @@ const formulaTypes = {
   COND_EXP: 'conditional_expression',
 }
 
-const formulas = {
+const formulas: Record<string, any> = {
   AVG: {
     type: formulaTypes.NUMERIC,
     validation: {
@@ -404,7 +404,7 @@ function insertAtCursor(myField: typeof AntInput, myValue: string, len = 0, b =
     const sel = document.createRange() as any
     sel.text = myValue
   } // MOZILLA and others
-  else if (myField.selectionStart || myField.selectionStart == '0') {
+  else if (myField.selectionStart || myField.selectionStart === '0') {
     const startPos = myField.selectionStart
     const endPos = myField.selectionEnd
     myField.value = myField.value.substring(0, startPos - len) + myValue + myField.value.substring(endPos, myField.value.length)
@@ -452,7 +452,7 @@ function GetCaretPosition(ctrl: typeof AntInput) {
     CaretPos = Sel.text.length
   }
   // Firefox support
-  else if (ctrl.selectionStart || ctrl.selectionStart == '0') {
+  else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
     CaretPos = ctrl.selectionStart
   }
   return CaretPos

From 7eee37baf2f40267c15f3fd41a8bf14888e7d369 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:33:53 +0800
Subject: [PATCH 11/89] chore(gui-v2): lint

---
 packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue | 2 +-
 packages/nc-gui-v2/composables/useColumnCreateStore.ts          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 3d89d148f0..efb873fe0c 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -163,4 +163,4 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
   overflow: hidden;
   text-overflow: ellipsis;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index b475bed327..bdf0764e3e 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -215,7 +215,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     addOrUpdate,
     generateNewColumnMeta,
     isEdit: !!column?.id,
-    column
+    column,
   }
 })
 

From b115098edef0d7503c57ed70476185996e7cb5d7 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:41:43 +0800
Subject: [PATCH 12/89] wip(gui-v2): formula functions

---
 .../smartsheet-column/FormulaOptions.vue      | 401 +++++++++++++++++-
 1 file changed, 380 insertions(+), 21 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 680a763c1a..f5f835efe0 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -1,10 +1,28 @@
 <script setup lang="ts">
-import jsep from 'jsep';
-import { UITypes, jsepCurlyHook } from 'nocodb-sdk';
-import { formulaList, formulas, formulaTypes } from '@/utils'
+import jsep from 'jsep'
+import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
+import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
+import { NcAutocompleteTree, formulaList, formulaTypes, formulas, getWordUntilCaret, insertAtCursor } from '@/utils'
 
+const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter, column } =
+  useColumnCreateStoreOrThrow()
 
-const formula = ref({})
+const validators = {
+  'colOptions.formula': [
+    {
+      validator: (_: any, formual: any) => {
+        return new Promise<void>((resolve, reject) => {
+          // if (!parseAndValidateFormula(formual)) {
+          //   return reject(new Error('Invalid formual'))
+          // }
+          resolve()
+        })
+      },
+    },
+  ],
+}
+
+const formula = ref()
 
 const availableFunctions = formulaList
 
@@ -14,36 +32,377 @@ const autocomplete = ref(false)
 
 const suggestion = ref()
 
-const wordToComplete = ref('')
+const formulaRef = ref()
+
+const sugListRef = ref()
+
+const sugOptionsRef = ref()
+
+const wordToComplete = ref<string | undefined>('')
 
 const selected = ref(0)
 
 const tooltip = ref(true)
 
-const sortOrder = {
+const sortOrder: Record<string, number> = {
   column: 0,
   function: 1,
   op: 2,
 }
+
+const suggestionsList = computed(() => {
+  return []
+  // const unsupportedFnList = sqlUi.getUnsupportedFnList();
+  // return [
+  //   ...availableFunctions
+  //       .filter(fn => !unsupportedFnList.includes(fn))
+  //       .map(fn => ({
+  //         text: fn + '()',
+  //         type: 'function',
+  //         description: formulas[fn].description,
+  //         syntax: formulas[fn].syntax,
+  //         examples: formulas[fn].examples,
+  //       })),
+  //   ...meta.columns
+  //       .filter(
+  //           (c: Record<string, any>) =>
+  //               !column || (column.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1))
+  //       )
+  //       .map(c => ({
+  //         text: c.title,
+  //         type: 'column',
+  //         icon: getUIDTIcon(c.uidt),
+  //         c,
+  //       })),
+  //   ...availableBinOps.map((op: string) => ({
+  //     text: op,
+  //     type: 'op',
+  //   })),
+  // ];
+})
+
+const acTree = computed(() => {
+  const ref = new NcAutocompleteTree()
+  for (const sug of suggestionsList.value) {
+    ref.add(sug)
+  }
+  return ref
+})
+
+function parseAndValidateFormula(formula: string) {
+  try {
+    const parsedTree = jsep(formula)
+    const metaErrors = validateAgainstMeta(parsedTree)
+    if (metaErrors.length) {
+      return [...metaErrors].join(', ')
+    }
+    return true
+  } catch (e: any) {
+    return e.message
+  }
+}
+
+function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = new Set()) {
+  return []
+  //   if (parsedTree.type === jsep.CALL_EXP) {
+  //     // validate function name
+  //     if (!this.availableFunctions.includes(parsedTree.callee.name)) {
+  //       errors.add(`'${parsedTree.callee.name}' function is not available`);
+  //     }
+  //     // validate arguments
+  //     const validation = formulas[parsedTree.callee.name] && formulas[parsedTree.callee.name].validation;
+  //     if (validation && validation.args) {
+  //       if (validation.args.rqd !== undefined && validation.args.rqd !== parsedTree.arguments.length) {
+  //         errors.add(`'${parsedTree.callee.name}' required ${validation.args.rqd} arguments`);
+  //       } else if (validation.args.min !== undefined && validation.args.min > parsedTree.arguments.length) {
+  //         errors.add(`'${parsedTree.callee.name}' required minimum ${validation.args.min} arguments`);
+  //       } else if (validation.args.max !== undefined && validation.args.max < parsedTree.arguments.length) {
+  //         errors.add(`'${parsedTree.callee.name}' required maximum ${validation.args.max} arguments`);
+  //       }
+  //     }
+  //     parsedTree.arguments.map(arg => this.validateAgainstMeta(arg, errors));
+  //
+  //     // validate data type
+  //     if (parsedTree.callee.type === jsep.IDENTIFIER) {
+  //       const expectedType = formulas[parsedTree.callee.name].type;
+  //       if (expectedType === formulaTypes.NUMERIC) {
+  //         if (parsedTree.callee.name === 'WEEKDAY') {
+  //           // parsedTree.arguments[0] = date
+  //           this.validateAgainstType(
+  //               parsedTree.arguments[0],
+  //               formulaTypes.DATE,
+  //               v => {
+  //                 if (!validateDateWithUnknownFormat(v)) {
+  //                   typeErrors.add('The first parameter of WEEKDAY() should have date value');
+  //                 }
+  //               },
+  //               typeErrors
+  //           );
+  //           // parsedTree.arguments[1] = startDayOfWeek (optional)
+  //           this.validateAgainstType(
+  //               parsedTree.arguments[1],
+  //               formulaTypes.STRING,
+  //               v => {
+  //                 if (
+  //                     typeof v !== 'string' ||
+  //                     !['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].includes(
+  //                         v.toLowerCase()
+  //                     )
+  //                 ) {
+  //                   typeErrors.add(
+  //                       'The second parameter of WEEKDAY() should have the value either "sunday", "monday", "tuesday", "wednesday", "thursday", "friday" or "saturday"'
+  //                   );
+  //                 }
+  //               },
+  //               typeErrors
+  //           );
+  //         } else {
+  //           parsedTree.arguments.map(arg => this.validateAgainstType(arg, expectedType, null, typeErrors));
+  //         }
+  //       } else if (expectedType === formulaTypes.DATE) {
+  //         if (parsedTree.callee.name === 'DATEADD') {
+  //           // parsedTree.arguments[0] = date
+  //           this.validateAgainstType(
+  //               parsedTree.arguments[0],
+  //               formulaTypes.DATE,
+  //               v => {
+  //                 if (!validateDateWithUnknownFormat(v)) {
+  //                   typeErrors.add('The first parameter of DATEADD() should have date value');
+  //                 }
+  //               },
+  //               typeErrors
+  //           );
+  //           // parsedTree.arguments[1] = numeric
+  //           this.validateAgainstType(
+  //               parsedTree.arguments[1],
+  //               formulaTypes.NUMERIC,
+  //               v => {
+  //                 if (typeof v !== 'number') {
+  //                   typeErrors.add('The second parameter of DATEADD() should have numeric value');
+  //                 }
+  //               },
+  //               typeErrors
+  //           );
+  //           // parsedTree.arguments[2] = ["day" | "week" | "month" | "year"]
+  //           this.validateAgainstType(
+  //               parsedTree.arguments[2],
+  //               formulaTypes.STRING,
+  //               v => {
+  //                 if (!['day', 'week', 'month', 'year'].includes(v)) {
+  //                   typeErrors.add(
+  //                       'The third parameter of DATEADD() should have the value either "day", "week", "month" or "year"'
+  //                   );
+  //                 }
+  //               },
+  //               typeErrors
+  //           );
+  //         }
+  //       }
+  //     }
+  //
+  //     errors = new Set([...errors, ...typeErrors]);
+  //   } else if (parsedTree.type === jsep.IDENTIFIER) {
+  //     if (
+  //         this.meta.columns.filter(c => !this.column || this.column.id !== c.id).every(c => c.title !== parsedTree.name)
+  //     ) {
+  //       errors.add(`Column '${parsedTree.name}' is not available`);
+  //     }
+  //
+  //     // check circular reference
+  //     // e.g. formula1 -> formula2 -> formula1 should return circular reference error
+  //
+  //     // get all formula columns excluding itself
+  //     const formulaPaths = this.meta.columns
+  //         .filter(c => c.id !== this.column.id && c.uidt === UITypes.Formula)
+  //         .reduce((res, c) => {
+  //           // in `formula`, get all the target neighbours
+  //           // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
+  //           const neighbours = (c.colOptions.formula.match(/cl_\w{14}/g) || []).filter(
+  //               colId => this.meta.columns.filter(col => col.id === colId && col.uidt === UITypes.Formula).length
+  //           );
+  //           if (neighbours.length > 0) {
+  //             // e.g. formula column 1 -> [formula column 2, formula column3]
+  //             res.push({ [c.id]: neighbours });
+  //           }
+  //           return res;
+  //         }, []);
+  //     // include target formula column (i.e. the one to be saved if applicable)
+  //     const targetFormulaCol = this.meta.columns.find(c => c.title === parsedTree.name && c.uidt === UITypes.Formula);
+  //     if (targetFormulaCol) {
+  //       formulaPaths.push({
+  //         [this.column.id]: [targetFormulaCol.id],
+  //       });
+  //     }
+  //     const vertices = formulaPaths.length;
+  //     if (vertices > 0) {
+  //       // perform kahn's algo for cycle detection
+  //       const adj = new Map();
+  //       const inDegrees = new Map();
+  //       // init adjacency list & indegree
+  //       for (const [_, v] of Object.entries(formulaPaths)) {
+  //         const src = Object.keys(v)[0];
+  //         const neighbours = v[src];
+  //         inDegrees.set(src, inDegrees.get(src) || 0);
+  //         for (const neighbour of neighbours) {
+  //           adj.set(src, (adj.get(src) || new Set()).add(neighbour));
+  //           inDegrees.set(neighbour, (inDegrees.get(neighbour) || 0) + 1);
+  //         }
+  //       }
+  //       const queue = [];
+  //       // put all vertices with in-degree = 0 (i.e. no incoming edges) to queue
+  //       inDegrees.forEach((inDegree, col) => {
+  //         if (inDegree === 0) {
+  //           // in-degree = 0 means we start traversing from this node
+  //           queue.push(col);
+  //         }
+  //       });
+  //       // init count of visited vertices
+  //       let visited = 0;
+  //       // BFS
+  //       while (queue.length !== 0) {
+  //         // remove a vertex from the queue
+  //         const src = queue.shift();
+  //         // if this node has neighbours, increase visited by 1
+  //         const neighbours = adj.get(src) || new Set();
+  //         if (neighbours.size > 0) {
+  //           visited += 1;
+  //         }
+  //         // iterate each neighbouring nodes
+  //         neighbours.forEach(neighbour => {
+  //           // decrease in-degree of its neighbours by 1
+  //           inDegrees.set(neighbour, inDegrees.get(neighbour) - 1);
+  //           // if in-degree becomes 0
+  //           if (inDegrees.get(neighbour) === 0) {
+  //             // then put the neighboring node to the queue
+  //             queue.push(neighbour);
+  //           }
+  //         });
+  //       }
+  //       // vertices not same as visited = cycle found
+  //       if (vertices !== visited) {
+  //         errors.add('Can’t save field because it causes a circular reference');
+  //       }
+  //     }
+  //   } else if (parsedTree.type === jsep.BINARY_EXP) {
+  //     if (!this.availableBinOps.includes(parsedTree.operator)) {
+  //       errors.add(`'${parsedTree.operator}' operation is not available`);
+  //     }
+  //     this.validateAgainstMeta(parsedTree.left, errors);
+  //     this.validateAgainstMeta(parsedTree.right, errors);
+  //   } else if (parsedTree.type === jsep.LITERAL || parsedTree.type === jsep.UNARY_EXP) {
+  //     // do nothing
+  //   } else if (parsedTree.type === jsep.COMPOUND) {
+  //     if (parsedTree.body.length) {
+  //       errors.add('Can’t save field because the formula is invalid');
+  //     }
+  //   } else {
+  //     errors.add('Can’t save field because the formula is invalid');
+  //   }
+  //   return errors;
+}
+
+function isCurlyBracketBalanced() {
+  // count number of opening curly brackets and closing curly brackets
+  const cntCurlyBrackets = (formulaRef.value.value.match(/\{|}/g) || []).reduce((acc: Record<number, number>, cur: number) => {
+    acc[cur] = (acc[cur] || 0) + 1
+    return acc
+  }, {})
+  return (cntCurlyBrackets['{'] || 0) === (cntCurlyBrackets['}'] || 0)
+}
+
+function appendText(it: Record<string, any>) {
+  const text = it.text
+  const len = wordToComplete.value?.length || 0
+  if (it.type === 'function') {
+    formula.value = insertAtCursor(formula.value, text, len, 1)
+  } else if (it.type === 'column') {
+    formula.value = insertAtCursor(formula.value, `{${text}}`, len + +!isCurlyBracketBalanced())
+  } else {
+    formula.value = insertAtCursor(formula.value, text, len)
+  }
+  autocomplete.value = false
+  suggestion.value = null
+}
+
+const handleInputDeb = useDebounceFn(function () {
+  handleInput()
+}, 250)
+
+function handleInput() {
+  selected.value = 0
+  suggestion.value = null
+  const query = getWordUntilCaret(formulaRef.value)
+  const parts = query.split(/\W+/)
+  wordToComplete.value = parts.pop() || ''
+  suggestion.value = acTree.value.complete(wordToComplete.value)?.sort((x, y) => sortOrder[x.type] - sortOrder[y.type]) // TODO: check .type
+  if (!isCurlyBracketBalanced()) {
+    suggestion.value = suggestion.value.filter((v: Record<string, any>) => v.type === 'column')
+  }
+  autocomplete.value = !!suggestion.value.length
+}
+
+function selectText() {
+  if (suggestion && selected.value > -1 && selected.value < suggestion.value.length) {
+    appendText(suggestion.value[selected.value])
+  }
+}
+
+function suggestionListUp() {
+  if (suggestion.value) {
+    selected.value = --selected.value > -1 ? selected.value : suggestion.value.length - 1
+    scrollToSelectedOption()
+  }
+}
+
+function suggestionListDown() {
+  if (suggestion.value) {
+    selected.value = ++selected.value % suggestion.value.length
+    scrollToSelectedOption()
+  }
+}
+
+function scrollToSelectedOption() {
+  nextTick(() => {
+    if (sugOptionsRef.value[selected.value]) {
+      try {
+        sugListRef.value.$el.scrollTo({
+          top: sugOptionsRef.value[selected.value].$el.offsetTop,
+          behavior: 'smooth',
+        })
+      } catch (e) {}
+    }
+  })
+}
+
+// set default value
+formState.value.colOptions = {
+  formula: '',
+  formula_raw: '',
+  ...column?.colOptions,
+}
 </script>
 
 <template>
   <div class="formula-wrapper">
-    <a-text-field
-      ref="input"
-      v-model:value="formula.value"
-      dense
-      outlined
-      class="caption"
-      hide-details="auto"
-      label="Formula"
-      :rules="[(v) => !!v || 'Required', (v) => parseAndValidateFormula(v)]"
-      autocomplete="off"
-      @input="handleInputDeb"
-      @keydown.down.prevent="suggestionListDown"
-      @keydown.up.prevent="suggestionListUp"
-      @keydown.enter.prevent="selectText"
-    />
+    {{ formState }}
+    <a-form-item v-bind="validateInfos['meta.formula']" label="Formula">
+      <a-input ref="formulaRef" v-model:value="formState.colOptions.formula_raw" @keydown.down.prevent="suggestionListDown" />
+    </a-form-item>
+    <!--    <a-text-field -->
+    <!--      ref="input" -->
+    <!--      v-model:value="formula.value" -->
+    <!--      dense -->
+    <!--      outlined -->
+    <!--      class="caption" -->
+    <!--      hide-details="auto" -->
+    <!--      label="Formula" -->
+    <!--      :rules="[(v) => !!v || 'Required', (v) => parseAndValidateFormula(v)]" -->
+    <!--      autocomplete="off" -->
+    <!--      @input="handleInputDeb" -->
+    <!--      @keydown.down.prevent="suggestionListDown" -->
+    <!--      @keydown.up.prevent="suggestionListUp" -->
+    <!--      @keydown.enter.prevent="selectText" -->
+    <!--    /> -->
     <div class="hint">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.

From 3c8611743769049c4fc1bfee47dd462f99a89945 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:52:45 +0800
Subject: [PATCH 13/89] feat(gui-v2): export column utils

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

diff --git a/packages/nc-gui-v2/utils/index.ts b/packages/nc-gui-v2/utils/index.ts
index 309388f94b..67d87f9119 100644
--- a/packages/nc-gui-v2/utils/index.ts
+++ b/packages/nc-gui-v2/utils/index.ts
@@ -11,6 +11,7 @@ export * from './filterUtils'
 export * from './generateName'
 export * from './projectCreateUtils'
 export * from './urlUtils'
+export * from './columnUtils'
 export * from './validation'
 export * from './viewUtils'
 export * from './currencyUtils'

From 90f3684eb1326e6602eb37b510329ad73e0e6014 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:54:28 +0800
Subject: [PATCH 14/89] feat(gui-v2): inject meta & add suggestionsList

---
 .../smartsheet-column/FormulaOptions.vue      | 80 ++++++++++---------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index f5f835efe0..168f79a5e5 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -2,19 +2,24 @@
 import jsep from 'jsep'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
-import { NcAutocompleteTree, formulaList, formulaTypes, formulas, getWordUntilCaret, insertAtCursor } from '@/utils'
+import { MetaInj } from '~/context'
+import { NcAutocompleteTree, formulaList, formulaTypes, formulas, getUIDTIcon, getWordUntilCaret, insertAtCursor } from '@/utils'
 
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter, column } =
   useColumnCreateStoreOrThrow()
 
+const meta = inject(MetaInj)
+
+const columns = computed(() => meta?.value?.columns || [])
+
 const validators = {
-  'colOptions.formula': [
+  'colOptions.formula_raw': [
     {
-      validator: (_: any, formual: any) => {
+      validator: (_: any, formula: any) => {
         return new Promise<void>((resolve, reject) => {
-          // if (!parseAndValidateFormula(formual)) {
-          //   return reject(new Error('Invalid formual'))
-          // }
+          if (!parseAndValidateFormula(formula)) {
+            return reject(new Error('Invalid formula'))
+          }
           resolve()
         })
       },
@@ -51,34 +56,33 @@ const sortOrder: Record<string, number> = {
 }
 
 const suggestionsList = computed(() => {
-  return []
-  // const unsupportedFnList = sqlUi.getUnsupportedFnList();
-  // return [
-  //   ...availableFunctions
-  //       .filter(fn => !unsupportedFnList.includes(fn))
-  //       .map(fn => ({
-  //         text: fn + '()',
-  //         type: 'function',
-  //         description: formulas[fn].description,
-  //         syntax: formulas[fn].syntax,
-  //         examples: formulas[fn].examples,
-  //       })),
-  //   ...meta.columns
-  //       .filter(
-  //           (c: Record<string, any>) =>
-  //               !column || (column.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1))
-  //       )
-  //       .map(c => ({
-  //         text: c.title,
-  //         type: 'column',
-  //         icon: getUIDTIcon(c.uidt),
-  //         c,
-  //       })),
-  //   ...availableBinOps.map((op: string) => ({
-  //     text: op,
-  //     type: 'op',
-  //   })),
-  // ];
+  const unsupportedFnList = sqlUi.value.getUnsupportedFnList()
+  return [
+    ...availableFunctions
+      .filter((fn) => !unsupportedFnList.includes(fn))
+      .map((fn) => ({
+        text: `${fn}()`,
+        type: 'function',
+        description: formulas[fn].description,
+        syntax: formulas[fn].syntax,
+        examples: formulas[fn].examples,
+      })),
+    ...columns.value
+      .filter(
+        (c: Record<string, any>) =>
+          !column || (column.id !== c.id && !(c.uidt === UITypes.LinkToAnotherRecord && c.system === 1)),
+      )
+      .map((c: any) => ({
+        text: c.title,
+        type: 'column',
+        icon: getUIDTIcon(c.uidt),
+        c,
+      })),
+    ...availableBinOps.map((op: string) => ({
+      text: op,
+      type: 'op',
+    })),
+  ]
 })
 
 const acTree = computed(() => {
@@ -384,8 +388,8 @@ formState.value.colOptions = {
 
 <template>
   <div class="formula-wrapper">
-    {{ formState }}
-    <a-form-item v-bind="validateInfos['meta.formula']" label="Formula">
+    {{ formState.colOptions }}
+    <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
       <a-input ref="formulaRef" v-model:value="formState.colOptions.formula_raw" @keydown.down.prevent="suggestionListDown" />
     </a-form-item>
     <!--    <a-text-field -->
@@ -407,7 +411,7 @@ formState.value.colOptions = {
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.
     </div>
-    <v-card v-if="suggestion && suggestion.length" class="formula-suggestion">
+    <a-card v-if="suggestion && suggestion.length" class="formula-suggestion">
       <v-card-text>Suggestions</v-card-text>
       <v-divider />
       <v-list ref="sugList" dense max-height="50vh" style="overflow: auto">
@@ -477,6 +481,6 @@ formState.value.colOptions = {
           </v-list-item>
         </v-list-item-group>
       </v-list>
-    </v-card>
+    </a-card>
   </div>
 </template>

From 685d282528108474b4d1720da82989dc037b2908 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 12:57:32 +0800
Subject: [PATCH 15/89] feat(gui-v2): add keydown events to formula input

---
 .../smartsheet-column/FormulaOptions.vue      | 24 +++++++------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 168f79a5e5..dff8e0577a 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -390,23 +390,15 @@ formState.value.colOptions = {
   <div class="formula-wrapper">
     {{ formState.colOptions }}
     <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
-      <a-input ref="formulaRef" v-model:value="formState.colOptions.formula_raw" @keydown.down.prevent="suggestionListDown" />
+      <a-input
+        ref="formulaRef"
+        v-model:value="formState.colOptions.formula_raw"
+        @keydown.down.prevent="suggestionListDown"
+        @keydown.up.prevent="suggestionListUp"
+        @keydown.enter.prevent="selectText"
+        @change="handleInputDeb"
+      />
     </a-form-item>
-    <!--    <a-text-field -->
-    <!--      ref="input" -->
-    <!--      v-model:value="formula.value" -->
-    <!--      dense -->
-    <!--      outlined -->
-    <!--      class="caption" -->
-    <!--      hide-details="auto" -->
-    <!--      label="Formula" -->
-    <!--      :rules="[(v) => !!v || 'Required', (v) => parseAndValidateFormula(v)]" -->
-    <!--      autocomplete="off" -->
-    <!--      @input="handleInputDeb" -->
-    <!--      @keydown.down.prevent="suggestionListDown" -->
-    <!--      @keydown.up.prevent="suggestionListUp" -->
-    <!--      @keydown.enter.prevent="selectText" -->
-    <!--    /> -->
     <div class="hint">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.

From 75164d167ae702f5b57667cfed80fce8ff95a8fe Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 13:46:50 +0800
Subject: [PATCH 16/89] feat(gui-v2): formula suggestion

---
 .../smartsheet-column/FormulaOptions.vue      | 127 ++++++++----------
 1 file changed, 57 insertions(+), 70 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index dff8e0577a..a0edac2ef8 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -4,6 +4,9 @@ import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
 import { MetaInj } from '~/context'
 import { NcAutocompleteTree, formulaList, formulaTypes, formulas, getUIDTIcon, getWordUntilCaret, insertAtCursor } from '@/utils'
+import MdiFunctionIcon from '~icons/mdi/function'
+import MdiColumnIcon from '~icons/mdi/view-column-outline'
+import MdiOperatorIcon from '~icons/mdi/calculator'
 
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter, column } =
   useColumnCreateStoreOrThrow()
@@ -29,6 +32,8 @@ const validators = {
 
 const formula = ref()
 
+const formulaSuggestionDrawer = ref(true)
+
 const availableFunctions = formulaList
 
 const availableBinOps = ['+', '-', '*', '/', '>', '<', '==', '<=', '>=', '!=']
@@ -378,6 +383,19 @@ function scrollToSelectedOption() {
   })
 }
 
+function getFormulaTypeName(type: string) {
+  switch (type) {
+    case 'function':
+      return 'Function'
+    case 'op':
+      return 'Operator'
+    case 'column':
+      return 'Column'
+    default:
+      return ''
+  }
+}
+
 // set default value
 formState.value.colOptions = {
   formula: '',
@@ -388,7 +406,6 @@ formState.value.colOptions = {
 
 <template>
   <div class="formula-wrapper">
-    {{ formState.colOptions }}
     <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
       <a-input
         ref="formulaRef"
@@ -403,76 +420,46 @@ formState.value.colOptions = {
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.
     </div>
-    <a-card v-if="suggestion && suggestion.length" class="formula-suggestion">
-      <v-card-text>Suggestions</v-card-text>
-      <v-divider />
-      <v-list ref="sugList" dense max-height="50vh" style="overflow: auto">
-        <v-list-item-group v-model="selected" color="primary">
-          <v-list-item
-            v-for="(it, i) in suggestion"
-            :key="i"
-            ref="sugOptions"
-            dense
-            selectable
-            @mousedown.prevent="appendText(it)"
-          >
-            <!-- Function -->
-            <template v-if="it.type === 'function'">
-              <v-tooltip right offset-x nudge-right="100">
-                <template #activator="{ on }">
-                  <v-list-item-content v-on="on">
-                    <span class="caption primary--text text--lighten-2 font-weight-bold">
-                      <v-icon color="primary lighten-2" small class="mr-1"> mdi-function </v-icon>
-                      {{ it.text }}
-                    </span>
-                  </v-list-item-content>
-                  <v-list-item-action>
-                    <span class="caption"> Function </span>
-                  </v-list-item-action>
-                </template>
-                <div>
-                  {{ it.description }} <br /><br />
-                  Syntax: <br />
-                  {{ it.syntax }} <br /><br />
-                  Examples: <br />
-                  <div v-for="(example, idx) in it.examples" :key="idx">
-                    <pre>({{ idx + 1 }}): {{ example }}</pre>
+    <a-drawer
+      v-model:visible="formulaSuggestionDrawer"
+      :closable="false"
+      placement="right"
+      width="500px"
+      class="h-full overflow-auto"
+    >
+      <!-- TODO: add back v-if="suggestion && suggestion.length" -->
+      <a-list :data-source="suggestionsList" class="">
+        <template #renderItem="{ item }">
+          <a-list-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>
                 </div>
-              </v-tooltip>
-            </template>
-
-            <!-- Column -->
-            <template v-if="it.type === 'column'">
-              <v-list-item-content>
-                <span class="caption text--darken-3 font-weight-bold">
-                  <v-icon color="grey darken-4" small class="mr-1">
-                    {{ it.icon }}
-                  </v-icon>
-                  {{ it.text }}
-                </span>
-              </v-list-item-content>
-              <v-list-item-action>
-                <span class="caption"> Column </span>
-              </v-list-item-action>
-            </template>
-
-            <!-- Operator -->
-            <template v-if="it.type === 'op'">
-              <v-list-item-content>
-                <span class="caption indigo--text text--darken-3 font-weight-bold">
-                  <v-icon color="indigo darken-3" small class="mr-1"> mdi-calculator-variant </v-icon>
-                  {{ it.text }}
-                </span>
-              </v-list-item-content>
-
-              <v-list-item-action>
-                <span class="caption"> Operator </span>
-              </v-list-item-action>
-            </template>
-          </v-list-item>
-        </v-list-item-group>
-      </v-list>
-    </a-card>
+              </template>
+              <template #avatar>
+                <MdiFunctionIcon v-if="item.type === 'function'" class="text-lg" />
+                <MdiOperatorIcon v-if="item.type === 'op'" class="text-lg" />
+                <MdiColumnIcon v-if="item.type === 'column'" class="text-lg" />
+              </template>
+            </a-list-item-meta>
+          </a-list-item>
+        </template>
+      </a-list>
+    </a-drawer>
   </div>
 </template>

From be8efc66d9af387f8954163412751ad71e263272 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 15:55:49 +0800
Subject: [PATCH 17/89] feat(gui-v2): sugListRef & sugOptionsRef

---
 .../smartsheet-column/FormulaOptions.vue         | 16 ++++++++++++----
 1 file changed, 12 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 a0edac2ef8..2d99de0b94 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
@@ -46,7 +47,7 @@ const formulaRef = ref()
 
 const sugListRef = ref()
 
-const sugOptionsRef = ref()
+const sugOptionsRef = ref<typeof AntListItem[]>([])
 
 const wordToComplete = ref<string | undefined>('')
 
@@ -428,9 +429,16 @@ formState.value.colOptions = {
       class="h-full overflow-auto"
     >
       <!-- TODO: add back v-if="suggestion && suggestion.length" -->
-      <a-list :data-source="suggestionsList" class="">
-        <template #renderItem="{ item }">
-          <a-list-item>
+      <a-list ref="sugListRef" :data-source="suggestionsList">
+        <template #renderItem="{ item, index }">
+          <a-list-item
+            :ref="
+              (el) => {
+                sugOptionsRef[index] = el
+              }
+            "
+            @mousedown.prevent="appendText(item)"
+          >
             <a-list-item-meta>
               <template v-if="item.type === 'function'" #description>
                 {{ item.description }} <br /><br />

From 8c87d2ee21ff758acbac1a9e5d98cea9367ddade Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 16:19:47 +0800
Subject: [PATCH 18/89] fix(gui-v2): remove IE insertAtCursor logic

---
 packages/nc-gui-v2/utils/formulaUtils.ts | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/utils/formulaUtils.ts b/packages/nc-gui-v2/utils/formulaUtils.ts
index 9c64b3ae73..2a07bb6e2d 100644
--- a/packages/nc-gui-v2/utils/formulaUtils.ts
+++ b/packages/nc-gui-v2/utils/formulaUtils.ts
@@ -398,17 +398,11 @@ const formulaList = Object.keys(formulas)
 
 // ref : https://stackoverflow.com/a/11077016
 function insertAtCursor(myField: typeof AntInput, myValue: string, len = 0, b = 0) {
-  // IE support
-  if (document) {
-    myField.focus()
-    const sel = document.createRange() as any
-    sel.text = myValue
-  } // MOZILLA and others
-  else if (myField.selectionStart || myField.selectionStart === '0') {
+  // MOZILLA and others
+  if (myField.selectionStart || myField.selectionStart === 0) {
     const startPos = myField.selectionStart
     const endPos = myField.selectionEnd
     myField.value = myField.value.substring(0, startPos - len) + myValue + myField.value.substring(endPos, myField.value.length)
-
     const pos = +startPos - len + myValue.length - b
     // https://stackoverflow.com/a/4302688
     if (myField.setSelectionRange) {

From e7da0fc798993106af5c1bc9699f828d14e65842 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 16:20:08 +0800
Subject: [PATCH 19/89] fix(gui-v2): insertAtCursor logic

---
 .../smartsheet-column/FormulaOptions.vue      | 24 ++++++++++++-------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 2d99de0b94..d39ef8330f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -313,10 +313,13 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
 
 function isCurlyBracketBalanced() {
   // count number of opening curly brackets and closing curly brackets
-  const cntCurlyBrackets = (formulaRef.value.value.match(/\{|}/g) || []).reduce((acc: Record<number, number>, cur: number) => {
-    acc[cur] = (acc[cur] || 0) + 1
-    return acc
-  }, {})
+  const cntCurlyBrackets = (formulaRef.value.$el.value.match(/\{|}/g) || []).reduce(
+    (acc: Record<number, number>, cur: number) => {
+      acc[cur] = (acc[cur] || 0) + 1
+      return acc
+    },
+    {},
+  )
   return (cntCurlyBrackets['{'] || 0) === (cntCurlyBrackets['}'] || 0)
 }
 
@@ -324,11 +327,11 @@ function appendText(it: Record<string, any>) {
   const text = it.text
   const len = wordToComplete.value?.length || 0
   if (it.type === 'function') {
-    formula.value = insertAtCursor(formula.value, text, len, 1)
+    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len, 1)
   } else if (it.type === 'column') {
-    formula.value = insertAtCursor(formula.value, `{${text}}`, len + +!isCurlyBracketBalanced())
+    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, `{${text}}`, len + +!isCurlyBracketBalanced())
   } else {
-    formula.value = insertAtCursor(formula.value, text, len)
+    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
   suggestion.value = null
@@ -341,7 +344,7 @@ const handleInputDeb = useDebounceFn(function () {
 function handleInput() {
   selected.value = 0
   suggestion.value = null
-  const query = getWordUntilCaret(formulaRef.value)
+  const query = getWordUntilCaret(formulaRef.value.$el)
   const parts = query.split(/\W+/)
   wordToComplete.value = parts.pop() || ''
   suggestion.value = acTree.value.complete(wordToComplete.value)?.sort((x, y) => sortOrder[x.type] - sortOrder[y.type]) // TODO: check .type
@@ -421,9 +424,11 @@ formState.value.colOptions = {
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.
     </div>
+    <!-- TODO: close drawer when EditOrAdd is closed -->
     <a-drawer
       v-model:visible="formulaSuggestionDrawer"
       :closable="false"
+      :mask-closable="false"
       placement="right"
       width="500px"
       class="h-full overflow-auto"
@@ -437,7 +442,8 @@ formState.value.colOptions = {
                 sugOptionsRef[index] = el
               }
             "
-            @mousedown.prevent="appendText(item)"
+            class="cursor-pointer"
+            @mousedown.stop="appendText(item)"
           >
             <a-list-item-meta>
               <template v-if="item.type === 'function'" #description>

From 59b6be25b1444b738f5f532ede28f080579bec71 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 16:54:21 +0800
Subject: [PATCH 20/89] fix(gui-v2): init trie in AC tree

---
 packages/nc-gui-v2/utils/NcAutocompleteTree.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
index 8af01f9812..eee03ecb1e 100644
--- a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
+++ b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
@@ -24,7 +24,7 @@ export class NcAutocompleteTree {
   }
 
   add(word: Record<string, any>) {
-    if (!this.trie) {
+    if (Object.keys(this.trie).length === 0) {
       this.trie = this.newNode()
     }
 

From ed0b97ab460e47dcfdf0a829ce1f907d86c590b9 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 16:54:36 +0800
Subject: [PATCH 21/89] fix(gui-v2): drop IE logic in GetCaretPosition

---
 packages/nc-gui-v2/utils/formulaUtils.ts | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/packages/nc-gui-v2/utils/formulaUtils.ts b/packages/nc-gui-v2/utils/formulaUtils.ts
index 2a07bb6e2d..63b89a94e2 100644
--- a/packages/nc-gui-v2/utils/formulaUtils.ts
+++ b/packages/nc-gui-v2/utils/formulaUtils.ts
@@ -438,15 +438,8 @@ function getWordUntilCaret(ctrl: typeof AntInput) {
 }
 
 function GetCaretPosition(ctrl: typeof AntInput) {
-  let CaretPos = 0 // IE Support
-  if (document) {
-    ctrl.focus()
-    const Sel = document.createRange() as any
-    Sel.moveStart('character', -ctrl.value.length)
-    CaretPos = Sel.text.length
-  }
-  // Firefox support
-  else if (ctrl.selectionStart || ctrl.selectionStart === '0') {
+  let CaretPos = 0
+  if (ctrl.selectionStart || ctrl.selectionStart === 0) {
     CaretPos = ctrl.selectionStart
   }
   return CaretPos

From 1d094d690b346689fdf68951612513ca439ca090 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 16:58:27 +0800
Subject: [PATCH 22/89] fix(gui-v2): fix suggestion type

---
 packages/nc-gui-v2/utils/NcAutocompleteTree.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
index eee03ecb1e..23faeaca4f 100644
--- a/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
+++ b/packages/nc-gui-v2/utils/NcAutocompleteTree.ts
@@ -8,7 +8,7 @@ interface Node {
 
 export class NcAutocompleteTree {
   trie: Record<string, any>
-  suggestions: string[]
+  suggestions: Record<string, any>[]
 
   constructor() {
     this.trie = {}

From fbf463f8c170762fac52396d4184d34ca389013a Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 17:00:10 +0800
Subject: [PATCH 23/89] fix(gui-v2): disable mask & set default suggestion list

---
 .../components/smartsheet-column/FormulaOptions.vue  | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index d39ef8330f..6bc31a6fd9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { Ref } from 'vue'
 import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
@@ -41,8 +42,6 @@ const availableBinOps = ['+', '-', '*', '/', '>', '<', '==', '<=', '>=', '!=']
 
 const autocomplete = ref(false)
 
-const suggestion = ref()
-
 const formulaRef = ref()
 
 const sugListRef = ref()
@@ -91,6 +90,9 @@ const suggestionsList = computed(() => {
   ]
 })
 
+// set default suggestion list
+const suggestion: Ref<Record<string, any>[] | null> = ref(suggestionsList.value)
+
 const acTree = computed(() => {
   const ref = new NcAutocompleteTree()
   for (const sug of suggestionsList.value) {
@@ -355,7 +357,7 @@ function handleInput() {
 }
 
 function selectText() {
-  if (suggestion && selected.value > -1 && selected.value < suggestion.value.length) {
+  if (suggestion.value && selected.value > -1 && selected.value < suggestion.value.length) {
     appendText(suggestion.value[selected.value])
   }
 }
@@ -428,13 +430,13 @@ formState.value.colOptions = {
     <a-drawer
       v-model:visible="formulaSuggestionDrawer"
       :closable="false"
+      :mask="false"
       :mask-closable="false"
       placement="right"
       width="500px"
       class="h-full overflow-auto"
     >
-      <!-- TODO: add back v-if="suggestion && suggestion.length" -->
-      <a-list ref="sugListRef" :data-source="suggestionsList">
+      <a-list ref="sugListRef" :data-source="suggestion">
         <template #renderItem="{ item, index }">
           <a-list-item
             :ref="

From 3c42fc49cdd030e466afb7352bd4d7e8cf533cc2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 17:27:38 +0800
Subject: [PATCH 24/89] feat(gui-v2): add empty text

---
 .../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 6bc31a6fd9..40022e7f36 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -436,7 +436,7 @@ formState.value.colOptions = {
       width="500px"
       class="h-full overflow-auto"
     >
-      <a-list ref="sugListRef" :data-source="suggestion">
+      <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
         <template #renderItem="{ item, index }">
           <a-list-item
             :ref="

From bb9ae844a16e3165249dfe01f31dded2d12d5c07 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 18:50:54 +0800
Subject: [PATCH 25/89] fix(gui-v2): undefined is not iterable

---
 .../components/smartsheet-column/FormulaOptions.vue      | 9 +++++----
 1 file changed, 5 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 40022e7f36..b2c3c4f8f5 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -91,7 +91,7 @@ const suggestionsList = computed(() => {
 })
 
 // set default suggestion list
-const suggestion: Ref<Record<string, any>[] | null> = ref(suggestionsList.value)
+const suggestion: Ref<Record<string, any>[]> = ref(suggestionsList.value)
 
 const acTree = computed(() => {
   const ref = new NcAutocompleteTree()
@@ -328,6 +328,7 @@ function isCurlyBracketBalanced() {
 function appendText(it: Record<string, any>) {
   const text = it.text
   const len = wordToComplete.value?.length || 0
+
   if (it.type === 'function') {
     formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len, 1)
   } else if (it.type === 'column') {
@@ -336,7 +337,7 @@ function appendText(it: Record<string, any>) {
     formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
-  suggestion.value = null
+  suggestion.value = suggestionsList.value
 }
 
 const handleInputDeb = useDebounceFn(function () {
@@ -345,7 +346,7 @@ const handleInputDeb = useDebounceFn(function () {
 
 function handleInput() {
   selected.value = 0
-  suggestion.value = null
+  suggestion.value = []
   const query = getWordUntilCaret(formulaRef.value.$el)
   const parts = query.split(/\W+/)
   wordToComplete.value = parts.pop() || ''
@@ -445,7 +446,7 @@ formState.value.colOptions = {
               }
             "
             class="cursor-pointer"
-            @mousedown.stop="appendText(item)"
+            @click.prevent.stop="appendText(item)"
           >
             <a-list-item-meta>
               <template v-if="item.type === 'function'" #description>

From c1ee1dab56d7ad63d065d3858661618f38f5fe08 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 18:52:09 +0800
Subject: [PATCH 26/89] feat(gui-v2): register jsep curly hook

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index b2c3c4f8f5..91d6dc4319 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -409,6 +409,10 @@ formState.value.colOptions = {
   formula_raw: '',
   ...column?.colOptions,
 }
+
+onMounted(() => {
+  jsep.plugins.register(jsepCurlyHook)
+})
 </script>
 
 <template>

From d422ac742b26a0946024ae6b9755bef6afc2c7a3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 19:11:07 +0800
Subject: [PATCH 27/89] wip(gui-v2): validateAgainstMeta

---
 .../smartsheet-column/FormulaOptions.vue      | 417 +++++++++---------
 1 file changed, 216 insertions(+), 201 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 91d6dc4319..c12ef07adf 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -2,10 +2,20 @@
 import type { Ref } from 'vue'
 import type { ListItem as AntListItem } from 'ant-design-vue'
 import jsep from 'jsep'
+import type { ColumnType } from 'nocodb-sdk'
 import { UITypes, jsepCurlyHook } from 'nocodb-sdk'
 import { useColumnCreateStoreOrThrow, useDebounceFn } from '#imports'
 import { MetaInj } from '~/context'
-import { NcAutocompleteTree, formulaList, formulaTypes, formulas, getUIDTIcon, getWordUntilCaret, insertAtCursor } from '@/utils'
+import {
+  NcAutocompleteTree,
+  formulaList,
+  formulaTypes,
+  formulas,
+  getUIDTIcon,
+  getWordUntilCaret,
+  insertAtCursor,
+  validateDateWithUnknownFormat,
+} from '@/utils'
 import MdiFunctionIcon from '~icons/mdi/function'
 import MdiColumnIcon from '~icons/mdi/view-column-outline'
 import MdiOperatorIcon from '~icons/mdi/calculator'
@@ -22,8 +32,10 @@ const validators = {
     {
       validator: (_: any, formula: any) => {
         return new Promise<void>((resolve, reject) => {
-          if (!parseAndValidateFormula(formula)) {
-            return reject(new Error('Invalid formula'))
+          const res = parseAndValidateFormula(formula)
+          console.log(res)
+          if (res !== true) {
+            return reject(new Error(res))
           }
           resolve()
         })
@@ -105,7 +117,7 @@ function parseAndValidateFormula(formula: string) {
   try {
     const parsedTree = jsep(formula)
     const metaErrors = validateAgainstMeta(parsedTree)
-    if (metaErrors.length) {
+    if (metaErrors.size) {
       return [...metaErrors].join(', ')
     }
     return true
@@ -115,202 +127,199 @@ function parseAndValidateFormula(formula: string) {
 }
 
 function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = new Set()) {
-  return []
-  //   if (parsedTree.type === jsep.CALL_EXP) {
-  //     // validate function name
-  //     if (!this.availableFunctions.includes(parsedTree.callee.name)) {
-  //       errors.add(`'${parsedTree.callee.name}' function is not available`);
-  //     }
-  //     // validate arguments
-  //     const validation = formulas[parsedTree.callee.name] && formulas[parsedTree.callee.name].validation;
-  //     if (validation && validation.args) {
-  //       if (validation.args.rqd !== undefined && validation.args.rqd !== parsedTree.arguments.length) {
-  //         errors.add(`'${parsedTree.callee.name}' required ${validation.args.rqd} arguments`);
-  //       } else if (validation.args.min !== undefined && validation.args.min > parsedTree.arguments.length) {
-  //         errors.add(`'${parsedTree.callee.name}' required minimum ${validation.args.min} arguments`);
-  //       } else if (validation.args.max !== undefined && validation.args.max < parsedTree.arguments.length) {
-  //         errors.add(`'${parsedTree.callee.name}' required maximum ${validation.args.max} arguments`);
-  //       }
-  //     }
-  //     parsedTree.arguments.map(arg => this.validateAgainstMeta(arg, errors));
-  //
-  //     // validate data type
-  //     if (parsedTree.callee.type === jsep.IDENTIFIER) {
-  //       const expectedType = formulas[parsedTree.callee.name].type;
-  //       if (expectedType === formulaTypes.NUMERIC) {
-  //         if (parsedTree.callee.name === 'WEEKDAY') {
-  //           // parsedTree.arguments[0] = date
-  //           this.validateAgainstType(
-  //               parsedTree.arguments[0],
-  //               formulaTypes.DATE,
-  //               v => {
-  //                 if (!validateDateWithUnknownFormat(v)) {
-  //                   typeErrors.add('The first parameter of WEEKDAY() should have date value');
-  //                 }
-  //               },
-  //               typeErrors
-  //           );
-  //           // parsedTree.arguments[1] = startDayOfWeek (optional)
-  //           this.validateAgainstType(
-  //               parsedTree.arguments[1],
-  //               formulaTypes.STRING,
-  //               v => {
-  //                 if (
-  //                     typeof v !== 'string' ||
-  //                     !['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].includes(
-  //                         v.toLowerCase()
-  //                     )
-  //                 ) {
-  //                   typeErrors.add(
-  //                       'The second parameter of WEEKDAY() should have the value either "sunday", "monday", "tuesday", "wednesday", "thursday", "friday" or "saturday"'
-  //                   );
-  //                 }
-  //               },
-  //               typeErrors
-  //           );
-  //         } else {
-  //           parsedTree.arguments.map(arg => this.validateAgainstType(arg, expectedType, null, typeErrors));
-  //         }
-  //       } else if (expectedType === formulaTypes.DATE) {
-  //         if (parsedTree.callee.name === 'DATEADD') {
-  //           // parsedTree.arguments[0] = date
-  //           this.validateAgainstType(
-  //               parsedTree.arguments[0],
-  //               formulaTypes.DATE,
-  //               v => {
-  //                 if (!validateDateWithUnknownFormat(v)) {
-  //                   typeErrors.add('The first parameter of DATEADD() should have date value');
-  //                 }
-  //               },
-  //               typeErrors
-  //           );
-  //           // parsedTree.arguments[1] = numeric
-  //           this.validateAgainstType(
-  //               parsedTree.arguments[1],
-  //               formulaTypes.NUMERIC,
-  //               v => {
-  //                 if (typeof v !== 'number') {
-  //                   typeErrors.add('The second parameter of DATEADD() should have numeric value');
-  //                 }
-  //               },
-  //               typeErrors
-  //           );
-  //           // parsedTree.arguments[2] = ["day" | "week" | "month" | "year"]
-  //           this.validateAgainstType(
-  //               parsedTree.arguments[2],
-  //               formulaTypes.STRING,
-  //               v => {
-  //                 if (!['day', 'week', 'month', 'year'].includes(v)) {
-  //                   typeErrors.add(
-  //                       'The third parameter of DATEADD() should have the value either "day", "week", "month" or "year"'
-  //                   );
-  //                 }
-  //               },
-  //               typeErrors
-  //           );
-  //         }
-  //       }
-  //     }
-  //
-  //     errors = new Set([...errors, ...typeErrors]);
-  //   } else if (parsedTree.type === jsep.IDENTIFIER) {
-  //     if (
-  //         this.meta.columns.filter(c => !this.column || this.column.id !== c.id).every(c => c.title !== parsedTree.name)
-  //     ) {
-  //       errors.add(`Column '${parsedTree.name}' is not available`);
-  //     }
-  //
-  //     // check circular reference
-  //     // e.g. formula1 -> formula2 -> formula1 should return circular reference error
-  //
-  //     // get all formula columns excluding itself
-  //     const formulaPaths = this.meta.columns
-  //         .filter(c => c.id !== this.column.id && c.uidt === UITypes.Formula)
-  //         .reduce((res, c) => {
-  //           // in `formula`, get all the target neighbours
-  //           // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
-  //           const neighbours = (c.colOptions.formula.match(/cl_\w{14}/g) || []).filter(
-  //               colId => this.meta.columns.filter(col => col.id === colId && col.uidt === UITypes.Formula).length
-  //           );
-  //           if (neighbours.length > 0) {
-  //             // e.g. formula column 1 -> [formula column 2, formula column3]
-  //             res.push({ [c.id]: neighbours });
-  //           }
-  //           return res;
-  //         }, []);
-  //     // include target formula column (i.e. the one to be saved if applicable)
-  //     const targetFormulaCol = this.meta.columns.find(c => c.title === parsedTree.name && c.uidt === UITypes.Formula);
-  //     if (targetFormulaCol) {
-  //       formulaPaths.push({
-  //         [this.column.id]: [targetFormulaCol.id],
-  //       });
-  //     }
-  //     const vertices = formulaPaths.length;
-  //     if (vertices > 0) {
-  //       // perform kahn's algo for cycle detection
-  //       const adj = new Map();
-  //       const inDegrees = new Map();
-  //       // init adjacency list & indegree
-  //       for (const [_, v] of Object.entries(formulaPaths)) {
-  //         const src = Object.keys(v)[0];
-  //         const neighbours = v[src];
-  //         inDegrees.set(src, inDegrees.get(src) || 0);
-  //         for (const neighbour of neighbours) {
-  //           adj.set(src, (adj.get(src) || new Set()).add(neighbour));
-  //           inDegrees.set(neighbour, (inDegrees.get(neighbour) || 0) + 1);
-  //         }
-  //       }
-  //       const queue = [];
-  //       // put all vertices with in-degree = 0 (i.e. no incoming edges) to queue
-  //       inDegrees.forEach((inDegree, col) => {
-  //         if (inDegree === 0) {
-  //           // in-degree = 0 means we start traversing from this node
-  //           queue.push(col);
-  //         }
-  //       });
-  //       // init count of visited vertices
-  //       let visited = 0;
-  //       // BFS
-  //       while (queue.length !== 0) {
-  //         // remove a vertex from the queue
-  //         const src = queue.shift();
-  //         // if this node has neighbours, increase visited by 1
-  //         const neighbours = adj.get(src) || new Set();
-  //         if (neighbours.size > 0) {
-  //           visited += 1;
-  //         }
-  //         // iterate each neighbouring nodes
-  //         neighbours.forEach(neighbour => {
-  //           // decrease in-degree of its neighbours by 1
-  //           inDegrees.set(neighbour, inDegrees.get(neighbour) - 1);
-  //           // if in-degree becomes 0
-  //           if (inDegrees.get(neighbour) === 0) {
-  //             // then put the neighboring node to the queue
-  //             queue.push(neighbour);
-  //           }
-  //         });
-  //       }
-  //       // vertices not same as visited = cycle found
-  //       if (vertices !== visited) {
-  //         errors.add('Can’t save field because it causes a circular reference');
-  //       }
-  //     }
-  //   } else if (parsedTree.type === jsep.BINARY_EXP) {
-  //     if (!this.availableBinOps.includes(parsedTree.operator)) {
-  //       errors.add(`'${parsedTree.operator}' operation is not available`);
-  //     }
-  //     this.validateAgainstMeta(parsedTree.left, errors);
-  //     this.validateAgainstMeta(parsedTree.right, errors);
-  //   } else if (parsedTree.type === jsep.LITERAL || parsedTree.type === jsep.UNARY_EXP) {
-  //     // do nothing
-  //   } else if (parsedTree.type === jsep.COMPOUND) {
-  //     if (parsedTree.body.length) {
-  //       errors.add('Can’t save field because the formula is invalid');
-  //     }
-  //   } else {
-  //     errors.add('Can’t save field because the formula is invalid');
-  //   }
-  //   return errors;
+  if (parsedTree.type === jsep.CALL_EXP) {
+    // validate function name
+    if (!availableFunctions.includes(parsedTree.callee.name)) {
+      errors.add(`'${parsedTree.callee.name}' function is not available`)
+    }
+    // validate arguments
+    const validation = formulas[parsedTree.callee.name] && formulas[parsedTree.callee.name].validation
+    if (validation && validation.args) {
+      if (validation.args.rqd !== undefined && validation.args.rqd !== parsedTree.arguments.length) {
+        errors.add(`'${parsedTree.callee.name}' required ${validation.args.rqd} arguments`)
+      } else if (validation.args.min !== undefined && validation.args.min > parsedTree.arguments.length) {
+        errors.add(`'${parsedTree.callee.name}' required minimum ${validation.args.min} arguments`)
+      } else if (validation.args.max !== undefined && validation.args.max < parsedTree.arguments.length) {
+        errors.add(`'${parsedTree.callee.name}' required maximum ${validation.args.max} arguments`)
+      }
+    }
+    parsedTree.arguments.map((arg: Record<string, any>) => validateAgainstMeta(arg, errors))
+
+    // validate data type
+    if (parsedTree.callee.type === jsep.IDENTIFIER) {
+      const expectedType = formulas[parsedTree.callee.name].type
+      if (expectedType === formulaTypes.NUMERIC) {
+        if (parsedTree.callee.name === 'WEEKDAY') {
+          // parsedTree.arguments[0] = date
+          validateAgainstType(
+            parsedTree.arguments[0],
+            formulaTypes.DATE,
+            (v: any) => {
+              if (!validateDateWithUnknownFormat(v)) {
+                typeErrors.add('The first parameter of WEEKDAY() should have date value')
+              }
+            },
+            typeErrors,
+          )
+          // parsedTree.arguments[1] = startDayOfWeek (optional)
+          validateAgainstType(
+            parsedTree.arguments[1],
+            formulaTypes.STRING,
+            (v: any) => {
+              if (
+                typeof v !== 'string' ||
+                !['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'].includes(v.toLowerCase())
+              ) {
+                typeErrors.add(
+                  'The second parameter of WEEKDAY() should have the value either "sunday", "monday", "tuesday", "wednesday", "thursday", "friday" or "saturday"',
+                )
+              }
+            },
+            typeErrors,
+          )
+        } else {
+          parsedTree.arguments.map((arg: Record<string, any>) => validateAgainstType(arg, expectedType, null, typeErrors))
+        }
+      } else if (expectedType === formulaTypes.DATE) {
+        if (parsedTree.callee.name === 'DATEADD') {
+          // parsedTree.arguments[0] = date
+          validateAgainstType(
+            parsedTree.arguments[0],
+            formulaTypes.DATE,
+            (v: any) => {
+              if (!validateDateWithUnknownFormat(v)) {
+                typeErrors.add('The first parameter of DATEADD() should have date value')
+              }
+            },
+            typeErrors,
+          )
+          // parsedTree.arguments[1] = numeric
+          validateAgainstType(
+            parsedTree.arguments[1],
+            formulaTypes.NUMERIC,
+            (v: any) => {
+              if (typeof v !== 'number') {
+                typeErrors.add('The second parameter of DATEADD() should have numeric value')
+              }
+            },
+            typeErrors,
+          )
+          // parsedTree.arguments[2] = ["day" | "week" | "month" | "year"]
+          validateAgainstType(
+            parsedTree.arguments[2],
+            formulaTypes.STRING,
+            (v: any) => {
+              if (!['day', 'week', 'month', 'year'].includes(v)) {
+                typeErrors.add('The third parameter of DATEADD() should have the value either "day", "week", "month" or "year"')
+              }
+            },
+            typeErrors,
+          )
+        }
+      }
+    }
+
+    errors = new Set([...errors, ...typeErrors])
+  } else if (parsedTree.type === jsep.IDENTIFIER) {
+    if (
+      columns.value
+        .filter((c: Record<string, any>) => !column || column.id !== c.id)
+        .every((c: Record<string, any>) => c.title !== parsedTree.name)
+    ) {
+      errors.add(`Column '${parsedTree.name}' is not available`)
+    }
+
+    // check circular reference
+    // e.g. formula1 -> formula2 -> formula1 should return circular reference error
+
+    // get all formula columns excluding itself
+    const formulaPaths = columns.value
+      .filter((c: Record<string, any>) => c.id !== column?.id && c.uidt === UITypes.Formula)
+      .reduce((res: Record<string, any>[], c: Record<string, any>) => {
+        // in `formula`, get all the target neighbours
+        // i.e. all column id (e.g. cl_xxxxxxxxxxxxxx) with formula type
+        const neighbours = (c.colOptions.formula.match(/cl_\w{14}/g) || []).filter(
+          (colId: string) => columns.value.filter((col: ColumnType) => col.id === colId && col.uidt === UITypes.Formula).length,
+        )
+        if (neighbours.length > 0) {
+          // e.g. formula column 1 -> [formula column 2, formula column3]
+          res.push({ [c.id]: neighbours })
+        }
+        return res
+      }, [])
+    // include target formula column (i.e. the one to be saved if applicable)
+    const targetFormulaCol = columns.value.find((c: ColumnType) => c.title === parsedTree.name && c.uidt === UITypes.Formula)
+    if (targetFormulaCol) {
+      formulaPaths.push({
+        [column.id]: [targetFormulaCol.id],
+      })
+    }
+    const vertices = formulaPaths.length
+    if (vertices > 0) {
+      // perform kahn's algo for cycle detection
+      const adj = new Map()
+      const inDegrees = new Map()
+      // init adjacency list & indegree
+      for (const [_, v] of Object.entries(formulaPaths)) {
+        const src = Object.keys(v)[0]
+        const neighbours = v[src]
+        inDegrees.set(src, inDegrees.get(src) || 0)
+        for (const neighbour of neighbours) {
+          adj.set(src, (adj.get(src) || new Set()).add(neighbour))
+          inDegrees.set(neighbour, (inDegrees.get(neighbour) || 0) + 1)
+        }
+      }
+      const queue: string[] = []
+      // put all vertices with in-degree = 0 (i.e. no incoming edges) to queue
+      inDegrees.forEach((inDegree, col) => {
+        if (inDegree === 0) {
+          // in-degree = 0 means we start traversing from this node
+          queue.push(col)
+        }
+      })
+      // init count of visited vertices
+      let visited = 0
+      // BFS
+      while (queue.length !== 0) {
+        // remove a vertex from the queue
+        const src = queue.shift()
+        // if this node has neighbours, increase visited by 1
+        const neighbours = adj.get(src) || new Set()
+        if (neighbours.size > 0) {
+          visited += 1
+        }
+        // iterate each neighbouring nodes
+        neighbours.forEach((neighbour: string) => {
+          // decrease in-degree of its neighbours by 1
+          inDegrees.set(neighbour, inDegrees.get(neighbour) - 1)
+          // if in-degree becomes 0
+          if (inDegrees.get(neighbour) === 0) {
+            // then put the neighboring node to the queue
+            queue.push(neighbour)
+          }
+        })
+      }
+      // vertices not same as visited = cycle found
+      if (vertices !== visited) {
+        errors.add('Can’t save field because it causes a circular reference')
+      }
+    }
+  } else if (parsedTree.type === jsep.BINARY_EXP) {
+    if (!availableBinOps.includes(parsedTree.operator)) {
+      errors.add(`'${parsedTree.operator}' operation is not available`)
+    }
+    validateAgainstMeta(parsedTree.left, errors)
+    validateAgainstMeta(parsedTree.right, errors)
+  } else if (parsedTree.type === jsep.LITERAL || parsedTree.type === jsep.UNARY_EXP) {
+    // do nothing
+  } else if (parsedTree.type === jsep.COMPOUND) {
+    if (parsedTree.body.length) {
+      errors.add('Can’t save field because the formula is invalid')
+    }
+  } else {
+    errors.add('Can’t save field because the formula is invalid')
+  }
+  return errors
 }
 
 function isCurlyBracketBalanced() {
@@ -410,6 +419,11 @@ formState.value.colOptions = {
   ...column?.colOptions,
 }
 
+// set additional validations
+setAdditionalValidations({
+  ...validators,
+})
+
 onMounted(() => {
   jsep.plugins.register(jsepCurlyHook)
 })
@@ -417,6 +431,7 @@ onMounted(() => {
 
 <template>
   <div class="formula-wrapper">
+    {{ validateInfos }}
     <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
       <a-input
         ref="formulaRef"
@@ -483,4 +498,4 @@ onMounted(() => {
       </a-list>
     </a-drawer>
   </div>
-</template>
+</template>
\ No newline at end of file

From d94adf038ce1375de5dde1f58c584d80a6b6605d Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 19:36:03 +0800
Subject: [PATCH 28/89] feat(gui-v2): add date function for formulas

---
 packages/nc-gui-v2/utils/dateTimeUtils.ts | 26 +++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/packages/nc-gui-v2/utils/dateTimeUtils.ts b/packages/nc-gui-v2/utils/dateTimeUtils.ts
index 2becbb5bca..62e3cf32e9 100644
--- a/packages/nc-gui-v2/utils/dateTimeUtils.ts
+++ b/packages/nc-gui-v2/utils/dateTimeUtils.ts
@@ -1,4 +1,6 @@
 import dayjs from 'dayjs'
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+dayjs.extend(customParseFormat)
 
 export const timeAgo = (date: any) => {
   return dayjs.utc(date).fromNow()
@@ -18,3 +20,27 @@ export const handleTZ = (val: any) => {
     },
   )
 }
+
+export const dateFormat = [
+  'DD-MM-YYYY',
+  'MM-DD-YYYY',
+  'YYYY-MM-DD',
+  'DD/MM/YYYY',
+  'MM/DD/YYYY',
+  'YYYY/MM/DD',
+  'DD MM YYYY',
+  'MM DD YYYY',
+  'YYYY MM DD',
+]
+
+export function validateDateFormat(v: string) {
+  return dateFormat.includes(v)
+}
+
+export function validateDateWithUnknownFormat(v: string) {
+  let res = 0
+  for (const format of dateFormat) {
+    res |= dayjs(v, format, true).isValid() as any
+  }
+  return res
+}

From c313739beb88e6e573f34e37615f948537c14b9c Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 19:36:22 +0800
Subject: [PATCH 29/89] feat(gui-v2): add validateAgainstType & getRootDataType

---
 .../smartsheet-column/FormulaOptions.vue      | 168 +++++++++++++++++-
 1 file changed, 167 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 c12ef07adf..23729d802e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -322,6 +322,172 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
   return errors
 }
 
+function validateAgainstType(parsedTree: any, expectedType: string, func: any, typeErrors = new Set()) {
+  if (parsedTree === false || typeof parsedTree === 'undefined') {
+    return typeErrors
+  }
+  if (parsedTree.type === jsep.LITERAL) {
+    if (typeof func === 'function') {
+      func(parsedTree.value)
+    } else if (expectedType === formulaTypes.NUMERIC) {
+      if (typeof parsedTree.value !== 'number') {
+        typeErrors.add('Numeric type is expected')
+      }
+    } else if (expectedType === formulaTypes.STRING) {
+      if (typeof parsedTree.value !== 'string') {
+        typeErrors.add('string type is expected')
+      }
+    }
+  } else if (parsedTree.type === jsep.IDENTIFIER) {
+    const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
+    if (col === undefined) {
+      return
+    }
+    if (col.uidt === UITypes.Formula) {
+      const foundType = getRootDataType(jsep(col?.colOptions?.formula_raw))
+      if (foundType === 'N/A') {
+        typeErrors.add(`Not supported to reference column ${col.title}`)
+      } else if (expectedType !== foundType) {
+        typeErrors.add(`Type ${expectedType} is expected but found Type ${foundType}`)
+      }
+    } else {
+      switch (col.uidt) {
+        // string
+        case UITypes.SingleLineText:
+        case UITypes.LongText:
+        case UITypes.MultiSelect:
+        case UITypes.SingleSelect:
+        case UITypes.PhoneNumber:
+        case UITypes.Email:
+        case UITypes.URL:
+          if (expectedType !== formulaTypes.STRING) {
+            typeErrors.add(
+              `Column '${parsedTree.name}' with ${formulaTypes.STRING} type is found but ${expectedType} type is expected`,
+            )
+          }
+          break
+
+        // numeric
+        case UITypes.Year:
+        case UITypes.Number:
+        case UITypes.Decimal:
+        case UITypes.Rating:
+        case UITypes.Count:
+        case UITypes.AutoNumber:
+        case UITypes.Currency:
+          if (expectedType !== formulaTypes.NUMERIC) {
+            typeErrors.add(
+              `Column '${parsedTree.name}' with ${formulaTypes.NUMERIC} type is found but ${expectedType} type is expected`,
+            )
+          }
+          break
+
+        // date
+        case UITypes.Date:
+        case UITypes.DateTime:
+        case UITypes.CreateTime:
+        case UITypes.LastModifiedTime:
+          if (expectedType !== formulaTypes.DATE) {
+            typeErrors.add(
+              `Column '${parsedTree.name}' with ${formulaTypes.DATE} type is found but ${expectedType} type is expected`,
+            )
+          }
+          break
+
+        // not supported
+        case UITypes.ForeignKey:
+        case UITypes.Attachment:
+        case UITypes.ID:
+        case UITypes.Time:
+        case UITypes.Percent:
+        case UITypes.Duration:
+        case UITypes.Rollup:
+        case UITypes.Lookup:
+        case UITypes.Barcode:
+        case UITypes.Button:
+        case UITypes.Checkbox:
+        case UITypes.Collaborator:
+        default:
+          typeErrors.add(`Not supported to reference column '${parsedTree.name}'`)
+          break
+      }
+    }
+  } else if (parsedTree.type === jsep.UNARY_EXP || parsedTree.type === jsep.BINARY_EXP) {
+    if (expectedType !== formulaTypes.NUMERIC) {
+      // parsedTree.name won't be available here
+      typeErrors.add(`${formulaTypes.NUMERIC} type is found but ${expectedType} type is expected`)
+    }
+  } else if (parsedTree.type === jsep.CALL_EXP) {
+    if (formulas[parsedTree.callee.name]?.type && expectedType !== formulas[parsedTree.callee.name].type) {
+      typeErrors.add(`${expectedType} not matched with ${formulas[parsedTree.callee.name].type}`)
+    }
+  }
+  return typeErrors
+}
+
+function getRootDataType(parsedTree: any): any {
+  // given a parse tree, return the data type of it
+  if (parsedTree.type === jsep.CALL_EXP) {
+    return formulas[parsedTree.callee.name].type
+  } else if (parsedTree.type === jsep.IDENTIFIER) {
+    const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
+    if (col?.uidt === UITypes.Formula) {
+      return getRootDataType(jsep(col?.colOptions?.formula_raw))
+    } else {
+      switch (col?.uidt) {
+        // string
+        case UITypes.SingleLineText:
+        case UITypes.LongText:
+        case UITypes.MultiSelect:
+        case UITypes.SingleSelect:
+        case UITypes.PhoneNumber:
+        case UITypes.Email:
+        case UITypes.URL:
+          return formulaTypes.STRING
+
+        // numeric
+        case UITypes.Year:
+        case UITypes.Number:
+        case UITypes.Decimal:
+        case UITypes.Rating:
+        case UITypes.Count:
+        case UITypes.AutoNumber:
+          return formulaTypes.NUMERIC
+
+        // date
+        case UITypes.Date:
+        case UITypes.DateTime:
+        case UITypes.CreateTime:
+        case UITypes.LastModifiedTime:
+          return formulaTypes.DATE
+
+        // not supported
+        case UITypes.ForeignKey:
+        case UITypes.Attachment:
+        case UITypes.ID:
+        case UITypes.Time:
+        case UITypes.Currency:
+        case UITypes.Percent:
+        case UITypes.Duration:
+        case UITypes.Rollup:
+        case UITypes.Lookup:
+        case UITypes.Barcode:
+        case UITypes.Button:
+        case UITypes.Checkbox:
+        case UITypes.Collaborator:
+        default:
+          return 'N/A'
+      }
+    }
+  } else if (parsedTree.type === jsep.BINARY_EXP || parsedTree.type === jsep.UNARY_EXP) {
+    return formulaTypes.NUMERIC
+  } else if (parsedTree.type === jsep.LITERAL) {
+    return typeof parsedTree.value
+  } else {
+    return 'N/A'
+  }
+}
+
 function isCurlyBracketBalanced() {
   // count number of opening curly brackets and closing curly brackets
   const cntCurlyBrackets = (formulaRef.value.$el.value.match(/\{|}/g) || []).reduce(
@@ -498,4 +664,4 @@ onMounted(() => {
       </a-list>
     </a-drawer>
   </div>
-</template>
\ No newline at end of file
+</template>

From a8d89309b62ded986efbc51a26e4728a077aac3b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 4 Aug 2022 20:07:21 +0800
Subject: [PATCH 30/89] fix(gui-v2): type-related issues in formula option

---
 .../smartsheet-column/FormulaOptions.vue      | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 23729d802e..081d2dae61 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -20,6 +20,18 @@ import MdiFunctionIcon from '~icons/mdi/function'
 import MdiColumnIcon from '~icons/mdi/view-column-outline'
 import MdiOperatorIcon from '~icons/mdi/calculator'
 
+enum JSEPNode {
+  COMPOUND = 'Compound',
+  IDENTIFIER = 'Identifier',
+  MEMBER_EXP = 'MemberExpression',
+  LITERAL = 'Literal',
+  THIS_EXP = 'ThisExpression',
+  CALL_EXP = 'CallExpression',
+  UNARY_EXP = 'UnaryExpression',
+  BINARY_EXP = 'BinaryExpression',
+  ARRAY_EXP = 'ArrayExpression',
+}
+
 const { formState, validateInfos, setAdditionalValidations, sqlUi, onDataTypeChange, onAlter, column } =
   useColumnCreateStoreOrThrow()
 
@@ -76,8 +88,8 @@ const suggestionsList = computed(() => {
   const unsupportedFnList = sqlUi.value.getUnsupportedFnList()
   return [
     ...availableFunctions
-      .filter((fn) => !unsupportedFnList.includes(fn))
-      .map((fn) => ({
+      .filter((fn: string) => !unsupportedFnList.includes(fn))
+      .map((fn: string) => ({
         text: `${fn}()`,
         type: 'function',
         description: formulas[fn].description,
@@ -127,7 +139,7 @@ function parseAndValidateFormula(formula: string) {
 }
 
 function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = new Set()) {
-  if (parsedTree.type === jsep.CALL_EXP) {
+  if (parsedTree.type === JSEPNode.CALL_EXP) {
     // validate function name
     if (!availableFunctions.includes(parsedTree.callee.name)) {
       errors.add(`'${parsedTree.callee.name}' function is not available`)
@@ -146,7 +158,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
     parsedTree.arguments.map((arg: Record<string, any>) => validateAgainstMeta(arg, errors))
 
     // validate data type
-    if (parsedTree.callee.type === jsep.IDENTIFIER) {
+    if (parsedTree.callee.type === JSEPNode.IDENTIFIER) {
       const expectedType = formulas[parsedTree.callee.name].type
       if (expectedType === formulaTypes.NUMERIC) {
         if (parsedTree.callee.name === 'WEEKDAY') {
@@ -220,7 +232,7 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
     }
 
     errors = new Set([...errors, ...typeErrors])
-  } else if (parsedTree.type === jsep.IDENTIFIER) {
+  } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     if (
       columns.value
         .filter((c: Record<string, any>) => !column || column.id !== c.id)
@@ -304,15 +316,15 @@ function validateAgainstMeta(parsedTree: any, errors = new Set(), typeErrors = n
         errors.add('Can’t save field because it causes a circular reference')
       }
     }
-  } else if (parsedTree.type === jsep.BINARY_EXP) {
+  } else if (parsedTree.type === JSEPNode.BINARY_EXP) {
     if (!availableBinOps.includes(parsedTree.operator)) {
       errors.add(`'${parsedTree.operator}' operation is not available`)
     }
     validateAgainstMeta(parsedTree.left, errors)
     validateAgainstMeta(parsedTree.right, errors)
-  } else if (parsedTree.type === jsep.LITERAL || parsedTree.type === jsep.UNARY_EXP) {
+  } else if (parsedTree.type === JSEPNode.LITERAL || parsedTree.type === JSEPNode.UNARY_EXP) {
     // do nothing
-  } else if (parsedTree.type === jsep.COMPOUND) {
+  } else if (parsedTree.type === JSEPNode.COMPOUND) {
     if (parsedTree.body.length) {
       errors.add('Can’t save field because the formula is invalid')
     }
@@ -326,7 +338,7 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
   if (parsedTree === false || typeof parsedTree === 'undefined') {
     return typeErrors
   }
-  if (parsedTree.type === jsep.LITERAL) {
+  if (parsedTree.type === JSEPNode.LITERAL) {
     if (typeof func === 'function') {
       func(parsedTree.value)
     } else if (expectedType === formulaTypes.NUMERIC) {
@@ -338,7 +350,7 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
         typeErrors.add('string type is expected')
       }
     }
-  } else if (parsedTree.type === jsep.IDENTIFIER) {
+  } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
     if (col === undefined) {
       return
@@ -412,12 +424,12 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
           break
       }
     }
-  } else if (parsedTree.type === jsep.UNARY_EXP || parsedTree.type === jsep.BINARY_EXP) {
+  } else if (parsedTree.type === JSEPNode.UNARY_EXP || parsedTree.type === JSEPNode.BINARY_EXP) {
     if (expectedType !== formulaTypes.NUMERIC) {
       // parsedTree.name won't be available here
       typeErrors.add(`${formulaTypes.NUMERIC} type is found but ${expectedType} type is expected`)
     }
-  } else if (parsedTree.type === jsep.CALL_EXP) {
+  } else if (parsedTree.type === JSEPNode.CALL_EXP) {
     if (formulas[parsedTree.callee.name]?.type && expectedType !== formulas[parsedTree.callee.name].type) {
       typeErrors.add(`${expectedType} not matched with ${formulas[parsedTree.callee.name].type}`)
     }
@@ -427,9 +439,9 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
 
 function getRootDataType(parsedTree: any): any {
   // given a parse tree, return the data type of it
-  if (parsedTree.type === jsep.CALL_EXP) {
+  if (parsedTree.type === JSEPNode.CALL_EXP) {
     return formulas[parsedTree.callee.name].type
-  } else if (parsedTree.type === jsep.IDENTIFIER) {
+  } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
     if (col?.uidt === UITypes.Formula) {
       return getRootDataType(jsep(col?.colOptions?.formula_raw))
@@ -479,9 +491,9 @@ function getRootDataType(parsedTree: any): any {
           return 'N/A'
       }
     }
-  } else if (parsedTree.type === jsep.BINARY_EXP || parsedTree.type === jsep.UNARY_EXP) {
+  } else if (parsedTree.type === JSEPNode.BINARY_EXP || parsedTree.type === JSEPNode.UNARY_EXP) {
     return formulaTypes.NUMERIC
-  } else if (parsedTree.type === jsep.LITERAL) {
+  } else if (parsedTree.type === JSEPNode.LITERAL) {
     return typeof parsedTree.value
   } else {
     return 'N/A'
@@ -525,7 +537,9 @@ function handleInput() {
   const query = getWordUntilCaret(formulaRef.value.$el)
   const parts = query.split(/\W+/)
   wordToComplete.value = parts.pop() || ''
-  suggestion.value = acTree.value.complete(wordToComplete.value)?.sort((x, y) => sortOrder[x.type] - sortOrder[y.type]) // TODO: check .type
+  suggestion.value = acTree.value
+    .complete(wordToComplete.value)
+    ?.sort((x: Record<string, any>, y: Record<string, any>) => sortOrder[x.type] - sortOrder[y.type])
   if (!isCurlyBracketBalanced()) {
     suggestion.value = suggestion.value.filter((v: Record<string, any>) => v.type === 'column')
   }
@@ -597,7 +611,6 @@ onMounted(() => {
 
 <template>
   <div class="formula-wrapper">
-    {{ validateInfos }}
     <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
       <a-input
         ref="formulaRef"
@@ -608,9 +621,11 @@ onMounted(() => {
         @change="handleInputDeb"
       />
     </a-form-item>
-    <div class="hint">
+    <div class="text-gray-600 mt-2 prose-sm">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
-      <a href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank">Formulas</a>.
+      <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
+        >Formulas</a
+      >.
     </div>
     <!-- TODO: close drawer when EditOrAdd is closed -->
     <a-drawer

From 9f1ab16095c24396f3c0e047f2a44374c625e69b Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 12:38:47 +0800
Subject: [PATCH 31/89] fix(gui-v2): only allow to close the EditOrAdd
 component by clicking cancel button

---
 .../nc-gui-v2/components/smartsheet-header/Menu.vue    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index a232f64456..ff328c67a1 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -13,7 +13,7 @@ import MdiDeleteIcon from '~icons/mdi/delete-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const { virtual = false } = defineProps<{ virtual?: boolean }>()
-const editColumnDropdown = $ref(false)
+const editColumnDropdown = ref(false)
 
 const column = inject(ColumnInj)
 const meta = inject(MetaInj)
@@ -49,10 +49,16 @@ const setAsPrimaryValue = async () => {
     toast.error('Failed to update primary column')
   }
 }
+
+function onVisibleChange() {
+  // only allow to close the EditOrAdd component
+  // by clicking cancel button
+  editColumnDropdown.value = true
+}
 </script>
 
 <template>
-  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']">
+  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" :on-visible-change="onVisibleChange">
     <span />
     <template #overlay>
       <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />

From 03db3144dac98d2ddbc7108288465ea09eb77be3 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 12:39:00 +0800
Subject: [PATCH 32/89] chore(gui-v2): lint

---
 .../components/smartsheet-column/LookupOptions.vue     |  1 -
 packages/nc-gui-v2/components/virtual-cell/Lookup.vue  | 10 ++++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
index 117923c280..6724440fdd 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/LookupOptions.vue
@@ -45,7 +45,6 @@ const columns = $computed(() => {
 
   return metas[selectedTable.id].columns.filter((c) => !isSystemColumn(c))
 })
-
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
index 59ac0dd3cb..66f45f10e4 100644
--- a/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/Lookup.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
-import { RelationTypes, isVirtualCol, UITypes } from 'nocodb-sdk'
+import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useColumn } from '~/composables'
 import { ColumnInj, MetaInj, ReadonlyInj, ValueInj } from '~/context'
 
@@ -48,12 +48,14 @@ const lookupColumnMetaProps = useColumn(lookupColumn)
       <!-- Render normal cell -->
       <template v-else>
         <!-- For attachment cell avoid adding chip style -->
-        <div v-for="(v, i) in arrValue" :key="i"
-             :class="{'bg-gray-100 px-2 rounded-full':!lookupColumnMetaProps.isAttachment}">
+        <div
+          v-for="(v, i) in arrValue"
+          :key="i"
+          :class="{ 'bg-gray-100 px-2 rounded-full': !lookupColumnMetaProps.isAttachment }"
+        >
           <SmartsheetCell :model-value="v" :column="lookupColumn" :edit-enabled="false" />
         </div>
       </template>
-
     </template>
   </div>
 </template>

From 5a383046a47843790553a21b4389e54f13e3fff2 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 12:56:45 +0800
Subject: [PATCH 33/89] fix(gui-v2): wrong function name on dropdown

---
 packages/nc-gui-v2/components/smartsheet-header/Menu.vue | 2 +-
 1 file changed, 1 insertion(+), 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 ff328c67a1..a76dc423e8 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -58,7 +58,7 @@ function onVisibleChange() {
 </script>
 
 <template>
-  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" :on-visible-change="onVisibleChange">
+  <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
     <span />
     <template #overlay>
       <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />

From aff4cf4b8df4d4f3aba6e46b5a6679c89fcb15a1 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 13:09:21 +0800
Subject: [PATCH 34/89] feat(gui-v2): fix formula drawer display

---
 .../smartsheet-column/EditOrAdd.vue           | 34 +++++++++++++++++--
 .../smartsheet-column/FormulaOptions.vue      |  7 ++--
 .../components/smartsheet-header/Menu.vue     |  2 +-
 3 files changed, 38 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 29ce9f57f8..4dc4ec94db 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -6,11 +6,22 @@ import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
 
+interface Props {
+  editColumnDropdown: boolean
+}
+
+const { editColumnDropdown } = defineProps<Props>()
+
 const emit = defineEmits(['cancel'])
+
 const meta = inject(MetaInj)
+
 const advancedOptions = ref(false)
+
 const { getMeta } = useMetas()
 
+const formulaOptionsRef = ref()
+
 const {
   formState,
   resetFields,
@@ -44,6 +55,14 @@ const reloadMeta = () => {
   getMeta(meta?.value.id as string, true)
 }
 
+function onCancel() {
+  emit('cancel')
+  if (formState.value.uidt === UITypes.Formula) {
+    // close formula drawer
+    formulaOptionsRef.value.formulaSuggestionDrawer = false
+  }
+}
+
 // create column meta if it's a new column
 watchEffect(() => {
   if (!isEdit) {
@@ -62,6 +81,17 @@ watchEffect(() => {
     }, 300)
   }
 })
+
+watch(
+  () => editColumnDropdown,
+  (v) => {
+    if (v) {
+      if (formState.value.uidt === UITypes.Formula) {
+        formulaOptionsRef.value.formulaSuggestionDrawer = true
+      }
+    }
+  },
+)
 </script>
 
 <template>
@@ -87,7 +117,7 @@ watchEffect(() => {
         </a-select>
       </a-form-item>
 
-      <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" />
+      <SmartsheetColumnFormulaOptions v-if="formState.uidt === UITypes.Formula" ref="formulaOptionsRef" />
       <SmartsheetColumnCurrencyOptions v-if="formState.uidt === UITypes.Currency" />
       <SmartsheetColumnDurationOptions v-if="formState.uidt === UITypes.Duration" />
       <SmartsheetColumnRatingOptions v-if="formState.uidt === UITypes.Rating" />
@@ -117,7 +147,7 @@ watchEffect(() => {
       </div>
       <a-form-item>
         <div class="flex justify-end gap-1 mt-4">
-          <a-button html-type="button" size="small" @click="emit('cancel')">
+          <a-button html-type="button" size="small" @click="onCancel">
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 081d2dae61..ceb8401e37 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -45,7 +45,6 @@ const validators = {
       validator: (_: any, formula: any) => {
         return new Promise<void>((resolve, reject) => {
           const res = parseAndValidateFormula(formula)
-          console.log(res)
           if (res !== true) {
             return reject(new Error(res))
           }
@@ -604,6 +603,10 @@ setAdditionalValidations({
   ...validators,
 })
 
+defineExpose({
+  formulaSuggestionDrawer,
+})
+
 onMounted(() => {
   jsep.plugins.register(jsepCurlyHook)
 })
@@ -615,6 +618,7 @@ onMounted(() => {
       <a-input
         ref="formulaRef"
         v-model:value="formState.colOptions.formula_raw"
+        class="mb-2"
         @keydown.down.prevent="suggestionListDown"
         @keydown.up.prevent="suggestionListUp"
         @keydown.enter.prevent="selectText"
@@ -627,7 +631,6 @@ onMounted(() => {
         >Formulas</a
       >.
     </div>
-    <!-- TODO: close drawer when EditOrAdd is closed -->
     <a-drawer
       v-model:visible="formulaSuggestionDrawer"
       :closable="false"
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index a76dc423e8..df81e9cdf6 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -61,7 +61,7 @@ function onVisibleChange() {
   <a-dropdown v-model:visible="editColumnDropdown" :trigger="['click']" @visible-change="onVisibleChange">
     <span />
     <template #overlay>
-      <SmartsheetColumnEditOrAdd @click.stop @cancel="editColumnDropdown = false" />
+      <SmartsheetColumnEditOrAdd :edit-column-dropdown="editColumnDropdown" @click.stop @cancel="editColumnDropdown = false" />
     </template>
   </a-dropdown>
   <a-dropdown :trigger="['hover']">

From a4630cc2515a56a457c3f238ba25abfeaeee3a55 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 13:38:45 +0800
Subject: [PATCH 35/89] feat(gui-v2): display columns when func or ops are
 chosen

---
 .../smartsheet-column/FormulaOptions.vue         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index ceb8401e37..dbe3c9116f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -511,19 +511,25 @@ function isCurlyBracketBalanced() {
   return (cntCurlyBrackets['{'] || 0) === (cntCurlyBrackets['}'] || 0)
 }
 
-function appendText(it: Record<string, any>) {
-  const text = it.text
+function appendText(item: Record<string, any>) {
+  const text = item.text
   const len = wordToComplete.value?.length || 0
 
-  if (it.type === 'function') {
+  if (item.type === 'function') {
     formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len, 1)
-  } else if (it.type === 'column') {
+  } else if (item.type === 'column') {
     formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, `{${text}}`, len + +!isCurlyBracketBalanced())
   } else {
     formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
-  suggestion.value = suggestionsList.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')
+  } else {
+    // show all options if column is chosen
+    suggestion.value = suggestionsList.value
+  }
 }
 
 const handleInputDeb = useDebounceFn(function () {

From 9237339e20054685e00a08dbce98613a563a75dc Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 13:50:29 +0800
Subject: [PATCH 36/89] feat(gui-v2): add icons to column utils

---
 packages/nc-gui-v2/utils/columnUtils.ts | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/utils/columnUtils.ts b/packages/nc-gui-v2/utils/columnUtils.ts
index 1020e60851..f890022dab 100644
--- a/packages/nc-gui-v2/utils/columnUtils.ts
+++ b/packages/nc-gui-v2/utils/columnUtils.ts
@@ -24,6 +24,9 @@ import MathIntegral from '~icons/mdi/math-integral'
 import MovieRoll from '~icons/mdi/movie-roll'
 import Counter from '~icons/mdi/counter'
 import CalendarClock from '~icons/mdi/calendar-clock'
+import ID from '~icons/mdi/identifier'
+import DatabaseSettings from '~icons/mdi/database-settings'
+import RulerSquareCompass from '~icons/mdi/ruler-square-compass'
 
 const uiTypes = [
   {
@@ -132,7 +135,7 @@ const uiTypes = [
   },
   {
     name: UITypes.Geometry,
-    icon: 'mdi-ruler-square-compass',
+    icon: RulerSquareCompass,
   },
   {
     name: UITypes.JSON,
@@ -140,7 +143,7 @@ const uiTypes = [
   },
   {
     name: UITypes.SpecificDBType,
-    icon: 'mdi-database-settings',
+    icon: DatabaseSettings,
   },
 ]
 
@@ -150,15 +153,15 @@ const getUIDTIcon = (uidt: UITypes) => {
       ...uiTypes,
       {
         name: UITypes.CreateTime,
-        icon: 'mdi-calendar-clock',
+        icon: CalendarClock,
       },
       {
         name: UITypes.ID,
-        icon: 'mdi-identifier',
+        icon: ID,
       },
       {
         name: UITypes.ForeignKey,
-        icon: 'mdi-link-variant',
+        icon: LinkVariant,
       },
     ].find((t) => t.name === uidt) || {}
   ).icon

From dbada1571473c40bc57a8bc76c842bcd757632aa Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 13:52:05 +0800
Subject: [PATCH 37/89] feat(gui-v2): render column icons

---
 .../nc-gui-v2/components/smartsheet-column/FormulaOptions.vue  | 3 +--
 1 file changed, 1 insertion(+), 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 dbe3c9116f..271e49d2d9 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -104,7 +104,6 @@ const suggestionsList = computed(() => {
         text: c.title,
         type: 'column',
         icon: getUIDTIcon(c.uidt),
-        c,
       })),
     ...availableBinOps.map((op: string) => ({
       text: op,
@@ -680,7 +679,7 @@ onMounted(() => {
               <template #avatar>
                 <MdiFunctionIcon v-if="item.type === 'function'" class="text-lg" />
                 <MdiOperatorIcon v-if="item.type === 'op'" class="text-lg" />
-                <MdiColumnIcon v-if="item.type === 'column'" class="text-lg" />
+                <component :is="item.icon" v-if="item.type === 'column'" class="text-lg" />
               </template>
             </a-list-item-meta>
           </a-list-item>

From 0e6a8cb43d956c41ce7cee7056c50f5468ab581f Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Fri, 5 Aug 2022 14:07:43 +0800
Subject: [PATCH 38/89] fix(gui-v2): move formula_raw to upper level

---
 .../smartsheet-column/FormulaOptions.vue      | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 271e49d2d9..0acfc5732b 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -17,7 +17,6 @@ import {
   validateDateWithUnknownFormat,
 } from '@/utils'
 import MdiFunctionIcon from '~icons/mdi/function'
-import MdiColumnIcon from '~icons/mdi/view-column-outline'
 import MdiOperatorIcon from '~icons/mdi/calculator'
 
 enum JSEPNode {
@@ -40,7 +39,7 @@ const meta = inject(MetaInj)
 const columns = computed(() => meta?.value?.columns || [])
 
 const validators = {
-  'colOptions.formula_raw': [
+  formula_raw: [
     {
       validator: (_: any, formula: any) => {
         return new Promise<void>((resolve, reject) => {
@@ -55,8 +54,6 @@ const validators = {
   ],
 }
 
-const formula = ref()
-
 const formulaSuggestionDrawer = ref(true)
 
 const availableFunctions = formulaList
@@ -354,7 +351,7 @@ function validateAgainstType(parsedTree: any, expectedType: string, func: any, t
       return
     }
     if (col.uidt === UITypes.Formula) {
-      const foundType = getRootDataType(jsep(col?.colOptions?.formula_raw))
+      const foundType = getRootDataType(jsep(col?.formula_raw))
       if (foundType === 'N/A') {
         typeErrors.add(`Not supported to reference column ${col.title}`)
       } else if (expectedType !== foundType) {
@@ -442,7 +439,7 @@ function getRootDataType(parsedTree: any): any {
   } else if (parsedTree.type === JSEPNode.IDENTIFIER) {
     const col = columns.value.find((c) => c.title === parsedTree.name) as Record<string, any>
     if (col?.uidt === UITypes.Formula) {
-      return getRootDataType(jsep(col?.colOptions?.formula_raw))
+      return getRootDataType(jsep(col?.formula_raw))
     } else {
       switch (col?.uidt) {
         // string
@@ -515,11 +512,11 @@ function appendText(item: Record<string, any>) {
   const len = wordToComplete.value?.length || 0
 
   if (item.type === 'function') {
-    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len, 1)
+    formState.value.formula_raw = insertAtCursor(formulaRef.value.$el, text, len, 1)
   } else if (item.type === 'column') {
-    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, `{${text}}`, len + +!isCurlyBracketBalanced())
+    formState.value.formula_raw = insertAtCursor(formulaRef.value.$el, `{${text}}`, len + +!isCurlyBracketBalanced())
   } else {
-    formState.value.colOptions.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
+    formState.value.formula_raw = insertAtCursor(formulaRef.value.$el, text, len)
   }
   autocomplete.value = false
   if (item.type === 'function' || item.type === 'op') {
@@ -597,11 +594,7 @@ function getFormulaTypeName(type: string) {
 }
 
 // set default value
-formState.value.colOptions = {
-  formula: '',
-  formula_raw: '',
-  ...column?.colOptions,
-}
+formState.value.formula_raw = (column?.colOptions as Record<string, any>)?.formula_raw || ''
 
 // set additional validations
 setAdditionalValidations({
@@ -619,10 +612,10 @@ onMounted(() => {
 
 <template>
   <div class="formula-wrapper">
-    <a-form-item v-bind="validateInfos['colOptions.formula_raw']" label="Formula">
+    <a-form-item v-bind="validateInfos.formula_raw" label="Formula">
       <a-input
         ref="formulaRef"
-        v-model:value="formState.colOptions.formula_raw"
+        v-model:value="formState.formula_raw"
         class="mb-2"
         @keydown.down.prevent="suggestionListDown"
         @keydown.up.prevent="suggestionListUp"

From 7095344bb7ef1777ee76996f47bddacddb992183 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:06:56 +0530
Subject: [PATCH 39/89] refactor(gui-v2): replace column with reactive object

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/cell/Checkbox.vue    |   2 +-
 .../nc-gui-v2/components/cell/Currency.vue    |   2 +-
 .../nc-gui-v2/components/cell/DatePicker.vue  |   2 +-
 .../nc-gui-v2/components/cell/Duration.vue    |   2 +-
 .../nc-gui-v2/components/cell/MultiSelect.vue |   2 +-
 .../nc-gui-v2/components/cell/Percent.vue     |   4 +-
 packages/nc-gui-v2/components/cell/Rating.vue |   2 +-
 .../components/cell/SingleSelect.vue          |   2 +-
 packages/nc-gui-v2/components/cell/Url.vue    |   2 +-
 .../components/cell/attachment/utils.ts       |   2 +-
 .../components/smartsheet-header/Cell.vue     |   6 +-
 .../components/smartsheet-header/CellIcon.vue |  10 +-
 .../components/smartsheet-header/Menu.vue     |   6 +-
 .../smartsheet-header/VirtualCell.vue         |   4 +-
 .../smartsheet-header/VirtualCellIcon.vue     |  10 +-
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  10 +-
 .../components/smartsheet/VirtualCell.vue     |   3 +-
 .../composables/useColumnCreateStore.ts       | 352 +++++++++---------
 .../nc-gui-v2/composables/useVirtualCell.ts   |  22 +-
 packages/nc-gui-v2/context/index.ts           |   2 +-
 20 files changed, 228 insertions(+), 219 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Checkbox.vue b/packages/nc-gui-v2/components/cell/Checkbox.vue
index ec6fb56386..f24d797de5 100644
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/packages/nc-gui-v2/components/cell/Checkbox.vue
@@ -26,7 +26,7 @@ const checkboxMeta = $computed(() => {
       unchecked: 'mdi-checkbox-blank-circle-outline',
     },
     color: 'primary',
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 </script>
diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index fe99200482..71c1e639d0 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -22,7 +22,7 @@ const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...(column && column.meta ? column.meta : {}),
+    ...(column?.value?.meta ? column?.value?.meta : {}),
   }
 })
 const currency = computed(() => {
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index 19e59b98a6..ee373db17b 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -14,7 +14,7 @@ const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isDateInvalid = $ref(false)
-const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD'
+const dateFormat = columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD'
 
 const localState = $computed({
   get() {
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 9a19351556..5ef2e9a2e3 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -16,7 +16,7 @@ const column = inject(ColumnInj)
 const showWarningMessage = ref(false)
 const durationInMS = ref(0)
 const isEdited = ref(false)
-const durationType = ref(column?.meta?.duration || 0)
+const durationType = ref(column?.value?.meta?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
 const localState = computed({
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index fffc9f347c..12260eb12f 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -14,7 +14,7 @@ const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm', false)
 const editEnabled = inject(EditModeInj, ref(false))
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 
 const localState = computed({
   get() {
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index dde455185c..746e86739c 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -17,7 +17,7 @@ const percent = ref()
 
 const isEdited = ref(false)
 
-const percentType = computed(() => column?.meta?.precision || 0)
+const percentType = computed(() => column?.value?.meta?.precision || 0)
 
 const percentStep = computed(() => getPercentStep(percentType.value))
 
@@ -27,7 +27,7 @@ const localState = computed({
   },
   set: (val) => {
     if (val === null) val = 0
-    if (isValidPercent(val, column?.meta?.negative)) {
+    if (isValidPercent(val, column?.value?.meta?.negative)) {
       percent.value = val / 100
     }
   },
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index 08bce5f227..fe4b782d64 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -26,7 +26,7 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column?.meta || {}),
+    ...(column?.value?.meta || {}),
   }
 })
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index 66570ef61c..c63efc7d2d 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -19,7 +19,7 @@ const vModel = computed({
   set: (val) => emit('update:modelValue', val),
 })
 
-const options = computed(() => column?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
+const options = computed(() => column?.value?.dtxp?.split(',').map((v) => v.replace(/\\'/g, "'").replace(/^'|'$/g, '')) || [])
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 46bb61dd3e..ca15fb0b11 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -18,7 +18,7 @@ const editEnabled = inject(EditModeInj, ref(false))
 const vModel = computed({
   get: () => value,
   set: (val) => {
-    if (!(column && column.meta && column.meta.validate) || isValidURL(val)) {
+    if (!column?.value?.meta?.validate || isValidURL(val)) {
       emit('update:modelValue', val)
     }
   },
diff --git a/packages/nc-gui-v2/components/cell/attachment/utils.ts b/packages/nc-gui-v2/components/cell/attachment/utils.ts
index e97275449a..7d9bf002ab 100644
--- a/packages/nc-gui-v2/components/cell/attachment/utils.ts
+++ b/packages/nc-gui-v2/components/cell/attachment/utils.ts
@@ -78,7 +78,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
         try {
           const data = await api.storage.upload(
             {
-              path: [NOCO, project.value.title, meta.value.title, column.title].join('/'),
+              path: [NOCO, project.value.title, meta.value.title, column.value.title].join('/'),
             },
             {
               files: file,
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
index b1bdbc047e..26cb6cf922 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Cell.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { inject } from 'vue'
+import { inject, toRef } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { useProvideColumnCreateStore } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
-
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 provide(ColumnInj, column)
 
 const meta = inject(MetaInj)
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 8b3a41f476..25f2c9b4c0 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -24,14 +25,15 @@ import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 import PercentIcon from '~icons/mdi/percent-outline'
 import DecimalIcon from '~icons/mdi/decimal'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
 
-const column = inject(ColumnInj, columnMeta)
+const columnMeta = toRef(props, 'columnMeta')
+const column = inject(ColumnInj, ref(columnMeta))
 
-const additionalColMeta = useColumn(column as ColumnType)
+const additionalColMeta = useColumn(column.value as ColumnType)
 
 const icon = computed(() => {
-  if (column?.pk) {
+  if (column?.value?.pk) {
     return KeyIcon
   } else if (additionalColMeta.isJSON) {
     return JSONIcon
diff --git a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
index df81e9cdf6..83c4a5ac87 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/Menu.vue
@@ -25,13 +25,13 @@ const { getMeta } = useMetas()
 
 const deleteColumn = () =>
   Modal.confirm({
-    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.title]), ' column ?']),
+    title: h('div', ['Do you want to delete ', h('span', { class: 'font-weight-bold' }, [column?.value?.title]), ' column ?']),
     okText: t('general.delete'),
     okType: 'danger',
     cancelText: t('general.cancel'),
     async onOk() {
       try {
-        await $api.dbTableColumn.delete(column?.id as string)
+        await $api.dbTableColumn.delete(column?.value?.id as string)
         getMeta(meta?.value?.id as string, true)
       } catch (e) {
         toast.error(await extractSdkResponseErrorMsg(e))
@@ -41,7 +41,7 @@ const deleteColumn = () =>
 
 const setAsPrimaryValue = async () => {
   try {
-    await $api.dbTableColumn.primaryColumnSet(column?.id as string)
+    await $api.dbTableColumn.primaryColumnSet(column?.value?.id as string)
     getMeta(meta?.value?.id as string, true)
     toast.success('Successfully updated as primary column')
   } catch (e) {
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index efb873fe0c..018ad1d8c6 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
+import { toRef } from 'vue'
 import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { ColumnInj, MetaInj } from '~/context'
 import { provide } from '#imports'
 
-const { column } = defineProps<{ column: ColumnType & { meta: any } }>()
+const props = defineProps<{ column: ColumnType & { meta: any } }>()
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 
diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
index 5caf418e77..99b6eb6aca 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import GenericIcon from '~icons/mdi/square-rounded'
 import HMIcon from '~icons/mdi/table-arrow-right'
@@ -11,14 +12,15 @@ import RollupIcon from '~icons/mdi/movie-roll'
 import CountIcon from '~icons/mdi/counter'
 import SpecificDBTypeIcon from '~icons/mdi/database-settings'
 
-const { columnMeta } = defineProps<{ columnMeta?: ColumnType }>()
+const props = defineProps<{ columnMeta?: ColumnType }>()
+const columnMeta = toRef(props, 'columnMeta')
 
-const column = inject(ColumnInj, columnMeta)
+const column = inject(ColumnInj, ref(columnMeta))
 
 const icon = computed(() => {
-  switch (column?.uidt) {
+  switch (column?.value?.uidt) {
     case UITypes.LinkToAnotherRecord:
-      switch ((column?.colOptions as LinkToAnotherRecordType)?.type) {
+      switch ((column?.value?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
           return MMIcon
         case RelationTypes.HAS_MANY:
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index bc725b74fa..9c395b40aa 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -16,9 +16,9 @@ interface Emits {
   (event: 'update:modelValue', value: any): void
 }
 
-const { column, ...props } = defineProps<Props>()
-
+const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'save', 'navigate', 'update:editEnabled'])
+const column = toRef(props, 'column')
 
 provide(ColumnInj, column)
 
@@ -44,11 +44,11 @@ const isAutoSaved = $computed(() => {
     UITypes.AutoNumber,
     UITypes.SpecificDBType,
     UITypes.Geometry,
-  ].includes(column.uidt as UITypes)
+  ].includes(column?.value?.uidt as UITypes)
 })
 
 const isManualSaved = $computed(() => {
-  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column.uidt as UITypes)
+  return [UITypes.Currency, UITypes.Year, UITypes.Time, UITypes.Duration].includes(column?.value?.uidt as UITypes)
 })
 
 const vModel = computed({
@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column)
+} = useColumn(column?.value)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {
diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index b385f6aca8..67fc79aece 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -14,12 +14,11 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column, modelValue: value } = props
+const { column } = props
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
 provide(ColumnInj, column)
-provide(CellValueInj, value)
 provide(ActiveCellInj, active)
 provide(RowInj, row)
 provide(CellValueInj, toRef(props, 'modelValue'))
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 53c5d2abe7..1904773ae6 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -20,205 +20,207 @@ const useForm = Form.useForm
 
 const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
-const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState((meta: Ref<TableType>, column?: ColumnType) => {
-  const { sqlUi } = useProject()
-  const { $api } = useNuxtApp()
+const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState(
+  (meta: Ref<TableType>, column?: Ref<ColumnType>) => {
+    const { sqlUi } = useProject()
+    const { $api } = useNuxtApp()
+
+    const toast = useToast()
+
+    const idType = null
+
+    // state
+    // todo: give proper type - ColumnType
+    const formState = ref<Partial<Record<string, any>>>({
+      title: 'title',
+      uidt: UITypes.SingleLineText,
+      ...(column?.value || {}),
+      // todo: swagger json update - include meta
+      meta: (column?.value as any)?.meta || {},
+    })
+
+    const additionalValidations = ref<Record<string, any>>({})
+
+    const validators = computed(() => {
+      return {
+        column_name: [
+          {
+            required: true,
+            message: 'Column name is required',
+          },
+          // validation for unique column name
+          {
+            validator: (rule: any, value: any) => {
+              return new Promise<void>((resolve, reject) => {
+                if (
+                  meta.value?.columns?.some(
+                    (c) =>
+                      c.id !== formState.value.id && // ignore current column
+                      // compare against column_name and title
+                      ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
+                        (value || '').toLowerCase() === (c.title || '').toLowerCase()),
+                  )
+                ) {
+                  return reject(new Error('Duplicate column name'))
+                }
+                resolve()
+              })
+            },
+          },
+        ],
+        uidt: [
+          {
+            required: true,
+            message: 'UI Datatype is required',
+          },
+        ],
+        ...(additionalValidations?.value || {}),
+      }
+    })
 
-  const toast = useToast()
+    const { resetFields, validate, validateInfos } = useForm(formState, validators)
 
-  const idType = null
+    const setAdditionalValidations = (validations: Record<string, any>) => {
+      additionalValidations.value = validations
+    }
 
-  // state
-  // todo: give proper type - ColumnType
-  const formState = ref<Partial<Record<string, any>>>({
-    title: 'title',
-    uidt: UITypes.SingleLineText,
-    ...(column || {}),
-    // todo: swagger json update - include meta
-    meta: (column as any)?.meta || {},
-  })
+    // actions
+    const generateNewColumnMeta = () => {
+      setAdditionalValidations({})
+      formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
+    }
 
-  const additionalValidations = ref<Record<string, any>>({})
+    const onUidtOrIdTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
+      formState.value = {
+        ...formState.value,
+        meta: {},
+        rqd: false,
+        pk: false,
+        ai: false,
+        cdf: null,
+        un: false,
+        dtx: 'specificType',
+        ...colProp,
+      }
 
-  const validators = computed(() => {
-    return {
-      column_name: [
-        {
-          required: true,
-          message: 'Column name is required',
-        },
-        // validation for unique column name
-        {
-          validator: (rule: any, value: any) => {
-            return new Promise<void>((resolve, reject) => {
-              if (
-                meta.value?.columns?.some(
-                  (c) =>
-                    c.id !== formState.value.id && // ignore current column
-                    // compare against column_name and title
-                    ((value || '').toLowerCase() === (c.column_name || '').toLowerCase() ||
-                      (value || '').toLowerCase() === (c.title || '').toLowerCase()),
-                )
-              ) {
-                return reject(new Error('Duplicate column name'))
-              }
-              resolve()
-            })
-          },
-        },
-      ],
-      uidt: [
-        {
-          required: true,
-          message: 'UI Datatype is required',
-        },
-      ],
-      ...(additionalValidations?.value || {}),
-    }
-  })
-
-  const { resetFields, validate, validateInfos } = useForm(formState, validators)
-
-  const setAdditionalValidations = (validations: Record<string, any>) => {
-    additionalValidations.value = validations
-  }
-
-  // actions
-  const generateNewColumnMeta = () => {
-    setAdditionalValidations({})
-    formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
-  }
-
-  const onUidtOrIdTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
-
-    const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
-    formState.value = {
-      ...formState.value,
-      meta: {},
-      rqd: false,
-      pk: false,
-      ai: false,
-      cdf: null,
-      un: false,
-      dtx: 'specificType',
-      ...colProp,
-    }
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value?.uidt as UITypes)) {
+        formState.value.dtxp = column?.value?.dtxp
+      }
 
-    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
-    }
+      if (columnToValidate.includes(formState.value.uidt)) {
+        formState.value.meta = {
+          validate: formState.value.meta && formState.value.meta.validate,
+        }
+      }
 
-    if (columnToValidate.includes(formState.value.uidt)) {
-      formState.value.meta = {
-        validate: formState.value.meta && formState.value.meta.validate,
+      if (isCurrency) {
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
+        } else {
+          formState.value.dtxp = 19
+          formState.value.dtxs = 2
+        }
       }
+
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
+    const onDataTypeChange = () => {
+      const { isCurrency } = useColumn(formState.value as ColumnType)
+
+      formState.value.rqd = false
+      if (formState.value.uidt !== UITypes.ID) {
+        formState.value.primaryKey = false
       }
-    }
+      formState.value.ai = false
+      formState.value.cdf = null
+      formState.value.un = false
+      formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
+      formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
 
-    formState.value.altered = formState.value.altered || 2
-  }
+      formState.value.dtx = 'specificType'
 
-  const onDataTypeChange = () => {
-    const { isCurrency } = useColumn(formState.value as ColumnType)
+      const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
+      if (column?.value && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column?.value.uidt as UITypes)) {
+        formState.value.dtxp = column?.value.dtxp
+      }
 
-    formState.value.rqd = false
-    if (formState.value.uidt !== UITypes.ID) {
-      formState.value.primaryKey = false
-    }
-    formState.value.ai = false
-    formState.value.cdf = null
-    formState.value.un = false
-    formState.value.dtxp = sqlUi.value.getDefaultLengthForDatatype(formState.value.dt)
-    formState.value.dtxs = sqlUi.value.getDefaultScaleForDatatype(formState.value.dt)
+      if (isCurrency) {
+        if (column?.value?.uidt === UITypes.Currency) {
+          formState.value.dtxp = column.value.dtxp
+          formState.value.dtxs = column.value.dtxs
+        } else {
+          formState.value.dtxp = 19
+          formState.value.dtxs = 2
+        }
+      }
 
-    formState.value.dtx = 'specificType'
+      // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
 
-    const selectTypes = [UITypes.MultiSelect, UITypes.SingleSelect]
-    if (column && selectTypes.includes(formState.value.uidt) && selectTypes.includes(column.uidt as UITypes)) {
-      formState.value.dtxp = column.dtxp
+      formState.value.altered = formState.value.altered || 2
     }
 
-    if (isCurrency) {
-      if (column?.uidt === UITypes.Currency) {
-        formState.value.dtxp = column.dtxp
-        formState.value.dtxs = column.dtxs
-      } else {
-        formState.value.dtxp = 19
-        formState.value.dtxs = 2
-      }
+    const onAlter = (val = 2, cdf = false) => {
+      formState.value.altered = formState.value.altered || val
+      if (cdf) formState.value.cdf = formState.value.cdf || null
     }
 
-    // this.$set(formState.value, 'uidt', sqlUi.value.getUIType(formState.value));
-
-    formState.value.altered = formState.value.altered || 2
-  }
-
-  const onAlter = (val = 2, cdf = false) => {
-    formState.value.altered = formState.value.altered || val
-    if (cdf) formState.value.cdf = formState.value.cdf || null
-  }
-
-  const addOrUpdate = async (onSuccess: () => {}) => {
-    try {
-      console.log(formState, validators)
-      if (!(await validate())) return
-
-      formState.value.table_name = meta.value.table_name
-      formState.value.title = formState.value.column_name
-      if (column) {
-        await $api.dbTableColumn.update(column.id as string, formState.value)
-        toast.success('Column updated')
-      } else {
-        // todo : set additional meta for auto generated string id
-        if (formState.value.uidt === UITypes.ID) {
-          // based on id column type set autogenerated meta prop
-          // if (isAutoGenId) {
-          //   this.newColumn.meta = {
-          //     ag: 'nc',
-          //   };
-          // }
+    const addOrUpdate = async (onSuccess: () => {}) => {
+      try {
+        console.log(formState, validators)
+        if (!(await validate())) return
+
+        formState.value.table_name = meta.value.table_name
+        formState.value.title = formState.value.column_name
+        if (column?.value) {
+          await $api.dbTableColumn.update(column?.value?.id as string, formState.value)
+          toast.success('Column updated')
+        } else {
+          // todo : set additional meta for auto generated string id
+          if (formState.value.uidt === UITypes.ID) {
+            // based on id column type set autogenerated meta prop
+            // if (isAutoGenId) {
+            //   this.newColumn.meta = {
+            //     ag: 'nc',
+            //   };
+            // }
+          }
+          await $api.dbTableColumn.create(meta.value.id as string, formState.value)
+
+          toast.success('Column created')
         }
-        await $api.dbTableColumn.create(meta.value.id as string, formState.value)
-
-        toast.success('Column created')
+        onSuccess()
+      } catch (e: any) {
+        const error = await extractSdkResponseErrorMsg(e)
+        if (error) toast.error(await extractSdkResponseErrorMsg(e))
       }
-      onSuccess()
-    } catch (e: any) {
-      const error = await extractSdkResponseErrorMsg(e)
-      if (error) toast.error(await extractSdkResponseErrorMsg(e))
     }
-  }
-
-  return {
-    formState,
-    resetFields,
-    validate,
-    validateInfos,
-    setAdditionalValidations,
-    onUidtOrIdTypeChange,
-    sqlUi,
-    onDataTypeChange,
-    onAlter,
-    addOrUpdate,
-    generateNewColumnMeta,
-    isEdit: !!column?.id,
-    column,
-  }
-})
+
+    return {
+      formState,
+      resetFields,
+      validate,
+      validateInfos,
+      setAdditionalValidations,
+      onUidtOrIdTypeChange,
+      sqlUi,
+      onDataTypeChange,
+      onAlter,
+      addOrUpdate,
+      generateNewColumnMeta,
+      isEdit: computed(() => !!column?.value?.id),
+      column,
+    }
+  },
+)
 
 export { useProvideColumnCreateStore }
 
diff --git a/packages/nc-gui-v2/composables/useVirtualCell.ts b/packages/nc-gui-v2/composables/useVirtualCell.ts
index 1c8a06c44d..856b3d0143 100644
--- a/packages/nc-gui-v2/composables/useVirtualCell.ts
+++ b/packages/nc-gui-v2/composables/useVirtualCell.ts
@@ -1,26 +1,28 @@
 import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { computed } from '#imports'
 
-export function useVirtualCell(column: ColumnType) {
+export function useVirtualCell(column: Ref<ColumnType>) {
   const isHm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord && (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.HAS_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.HAS_MANY,
   )
   const isMm = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.MANY_TO_MANY,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.MANY_TO_MANY,
   )
   const isBt = computed(
     () =>
-      column.uidt === UITypes.LinkToAnotherRecord &&
-      (<LinkToAnotherRecordType>column.colOptions).type === RelationTypes.BELONGS_TO,
+      column?.value?.uidt === UITypes.LinkToAnotherRecord &&
+      (<LinkToAnotherRecordType>column?.value?.colOptions).type === RelationTypes.BELONGS_TO,
   )
-  const isLookup = computed(() => column.uidt === UITypes.Lookup)
-  const isRollup = computed(() => column.uidt === UITypes.Rollup)
-  const isFormula = computed(() => column.uidt === UITypes.Formula)
-  const isCount = computed(() => column.uidt === UITypes.Count)
+  const isLookup = computed(() => column?.value?.uidt === UITypes.Lookup)
+  const isRollup = computed(() => column?.value?.uidt === UITypes.Rollup)
+  const isFormula = computed(() => column?.value?.uidt === UITypes.Formula)
+  const isCount = computed(() => column?.value?.uidt === UITypes.Count)
 
   return {
     isHm,
diff --git a/packages/nc-gui-v2/context/index.ts b/packages/nc-gui-v2/context/index.ts
index c5c5aa9cdd..4ef530da15 100644
--- a/packages/nc-gui-v2/context/index.ts
+++ b/packages/nc-gui-v2/context/index.ts
@@ -8,7 +8,7 @@ import type { TabItem } from '~/composables/useTabs'
 export const EditEnabledInj: InjectionKey<boolean> = Symbol('edit-enabled')
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
-export const ColumnInj: InjectionKey<ColumnType & { meta: any }> = Symbol('column-injection')
+export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =

From 33af6f18aa8e9ed688208c795b621dc5b2176b3a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:11:28 +0530
Subject: [PATCH 40/89] fix(gui-v2): use right injection key

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

diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 677c482042..b2f15151a6 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, inject, onMounted, ref } from '#imports'
+import { EditModeInj } from '~/context'
 
 interface Props {
   modelValue: number | null
@@ -13,7 +14,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-const editEnabled = inject<boolean>('editEnabled')
+const editEnabled = inject<boolean>(EditModeInj)
 
 const root = ref<HTMLInputElement>()
 

From a26128837f2b8409beead8cd7e4746e27f0dce75 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:14:10 +0530
Subject: [PATCH 41/89] refactor(gui-v2): accept null prop value in cell
 component

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue         | 2 +-
 packages/nc-gui-v2/components/cell/DatePicker.vue       | 7 +++----
 packages/nc-gui-v2/components/cell/DateTimePicker.vue   | 8 ++++----
 packages/nc-gui-v2/components/cell/Duration.vue         | 2 +-
 packages/nc-gui-v2/components/cell/Float.vue            | 2 +-
 packages/nc-gui-v2/components/cell/JsonEditableCell.vue | 2 +-
 packages/nc-gui-v2/components/cell/MultiSelect.vue      | 2 +-
 packages/nc-gui-v2/components/cell/Percent.vue          | 2 +-
 packages/nc-gui-v2/components/cell/Rating.vue           | 2 +-
 packages/nc-gui-v2/components/cell/SingleSelect.vue     | 2 +-
 packages/nc-gui-v2/components/cell/TimePicker.vue       | 8 ++++----
 packages/nc-gui-v2/components/cell/Url.vue              | 2 +-
 packages/nc-gui-v2/components/cell/YearPicker.vue       | 8 ++++----
 13 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index 71c1e639d0..b9984f8499 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -3,7 +3,7 @@ import { computed, inject, ref, useVModel } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 const props = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/DatePicker.vue b/packages/nc-gui-v2/components/cell/DatePicker.vue
index ee373db17b..d69202b6ee 100644
--- a/packages/nc-gui-v2/components/cell/DatePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DatePicker.vue
@@ -2,14 +2,13 @@
 import dayjs from 'dayjs'
 import { ColumnInj, ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const columnMeta = inject(ColumnInj, null)
 const readOnlyMode = inject(ReadonlyInj, false)
 
diff --git a/packages/nc-gui-v2/components/cell/DateTimePicker.vue b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
index 68f4a9087a..038e218c95 100644
--- a/packages/nc-gui-v2/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/DateTimePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)
diff --git a/packages/nc-gui-v2/components/cell/Duration.vue b/packages/nc-gui-v2/components/cell/Duration.vue
index 5ef2e9a2e3..aa888120cd 100644
--- a/packages/nc-gui-v2/components/cell/Duration.vue
+++ b/packages/nc-gui-v2/components/cell/Duration.vue
@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { convertDurationToSeconds, convertMS2Duration, durationOptions } from '~/utils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 6e029c67de..16ba6db0f9 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -3,7 +3,7 @@ import { inject, ref, useVModel } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number
+  modelValue: number | null
 }
 
 interface Emits {
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
index acf815fc54..f92bd346ca 100644
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
@@ -4,7 +4,7 @@ import { computed, inject } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string | Record<string, any>
+  modelValue: string | Record<string, any> | null
   isForm: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/cell/MultiSelect.vue b/packages/nc-gui-v2/components/cell/MultiSelect.vue
index 12260eb12f..f43f62fc8f 100644
--- a/packages/nc-gui-v2/components/cell/MultiSelect.vue
+++ b/packages/nc-gui-v2/components/cell/MultiSelect.vue
@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Percent.vue b/packages/nc-gui-v2/components/cell/Percent.vue
index 746e86739c..4b25a11f50 100644
--- a/packages/nc-gui-v2/components/cell/Percent.vue
+++ b/packages/nc-gui-v2/components/cell/Percent.vue
@@ -4,7 +4,7 @@ import { ColumnInj } from '~/context'
 import { getPercentStep, isValidPercent, renderPercent } from '@/utils/percentUtils'
 
 interface Props {
-  modelValue: number | string
+  modelValue: number | string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/Rating.vue b/packages/nc-gui-v2/components/cell/Rating.vue
index fe4b782d64..cc23e23db1 100644
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/packages/nc-gui-v2/components/cell/Rating.vue
@@ -8,7 +8,7 @@ import MdiThumbUpIcon from '~icons/mdi/thumb-up'
 import MdiFlagIcon from '~icons/mdi/flag'
 
 interface Props {
-  modelValue?: number
+  modelValue?: number | null
   readOnly?: boolean
 }
 
diff --git a/packages/nc-gui-v2/components/cell/SingleSelect.vue b/packages/nc-gui-v2/components/cell/SingleSelect.vue
index c63efc7d2d..2511d3404a 100644
--- a/packages/nc-gui-v2/components/cell/SingleSelect.vue
+++ b/packages/nc-gui-v2/components/cell/SingleSelect.vue
@@ -3,7 +3,7 @@ import { computed, inject } from '#imports'
 import { ColumnInj, EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/TimePicker.vue b/packages/nc-gui-v2/components/cell/TimePicker.vue
index 1e2fa406d0..ec36b5774a 100644
--- a/packages/nc-gui-v2/components/cell/TimePicker.vue
+++ b/packages/nc-gui-v2/components/cell/TimePicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: string
-}
-
 const { isMysql } = useProject()
 
 const readOnlyMode = inject(ReadonlyInj, false)
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index ca15fb0b11..97d9c5fe19 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -4,7 +4,7 @@ import { ColumnInj, EditModeInj } from '~/context'
 import { isValidURL } from '~/utils'
 
 interface Props {
-  modelValue: string
+  modelValue: string | null
 }
 
 const { modelValue: value } = defineProps<Props>()
diff --git a/packages/nc-gui-v2/components/cell/YearPicker.vue b/packages/nc-gui-v2/components/cell/YearPicker.vue
index a167dab5ed..1b8133bfca 100644
--- a/packages/nc-gui-v2/components/cell/YearPicker.vue
+++ b/packages/nc-gui-v2/components/cell/YearPicker.vue
@@ -2,14 +2,14 @@
 import dayjs from 'dayjs'
 import { ReadonlyInj } from '~/context'
 
+interface Props {
+  modelValue: number | string | null
+}
+
 const { modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:modelValue'])
 
-interface Props {
-  modelValue: number
-}
-
 const readOnlyMode = inject(ReadonlyInj, false)
 
 let isYearInvalid = $ref(false)

From f7dffa501258f99a44f24bc139d0bae79584b8b4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 15:46:40 +0530
Subject: [PATCH 42/89] refactor(gui-v2): convert to reactive

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

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 25f2c9b4c0..fd20703ac3 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { toRef } from 'vue'
+import { Ref, toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
@@ -28,9 +28,9 @@ import DecimalIcon from '~icons/mdi/decimal'
 const props = defineProps<{ columnMeta?: ColumnType }>()
 
 const columnMeta = toRef(props, 'columnMeta')
-const column = inject(ColumnInj, ref(columnMeta))
+const column = inject(ColumnInj, columnMeta)
 
-const additionalColMeta = useColumn(column.value as ColumnType)
+const additionalColMeta = useColumn(column as Ref<ColumnType>)
 
 const icon = computed(() => {
   if (column?.value?.pk) {
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 9c395b40aa..90c24001c1 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -89,7 +89,7 @@ const {
   isMultiSelect,
   isPercent,
   isPhoneNumber,
-} = useColumn(column?.value)
+} = useColumn(column)
 
 const syncAndNavigate = (dir: NavigateDir) => {
   if (changed) {
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 07d82ea9a5..8bce6fbd0a 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -1,16 +1,17 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { useProject } from '#imports'
+import { Ref } from 'vue'
 
-export function useColumn(column: ColumnType) {
+export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = (column && column.uidt) as UITypes
-  const abstractType = isVirtualCol(column)
+  const uiDatatype: UITypes = (column?.value?.uidt) as UITypes
+  const abstractType = isVirtualCol(column?.value)
     ? null
-    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column)
+    : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value)
 
-  const dataTypeLow = column && column.dt && column.dt.toLowerCase()
+  const dataTypeLow = column?.value?.dt?.toLowerCase()
   const isBoolean = abstractType === 'boolean'
   const isString = abstractType === 'string'
   const isTextArea = uiDatatype === UITypes.LongText
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index 1904773ae6..f5d92c3aef 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -91,7 +91,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onUidtOrIdTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       const colProp = sqlUi?.value.getDataTypeForUiType(formState?.value as any, idType as any)
       formState.value = {
@@ -134,7 +134,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     }
 
     const onDataTypeChange = () => {
-      const { isCurrency } = useColumn(formState.value as ColumnType)
+      const { isCurrency } = useColumn(ref(formState.value as ColumnType))
 
       formState.value.rqd = false
       if (formState.value.uidt !== UITypes.ID) {

From 48552f52c9050a9b25063929701fdcff35cd45dd Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 17:12:15 +0530
Subject: [PATCH 43/89] refactor(gui-v2): hide plus icon in tab header

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useColumnCreateStore.ts  | 1 +
 packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index f5d92c3aef..b1e24b7bde 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -87,6 +87,7 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     // actions
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
+      debugger
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
     }
 
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index 6ff2fa5455..c19d34de54 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -162,4 +162,8 @@ function openQuickImportDialog(type: string) {
 :deep(.ant-menu-submenu::after) {
   @apply !border-none;
 }
+
+:deep(.ant-tabs-nav-add){
+  @apply !hidden;
+}
 </style>

From c4b10a432959bf1cb37db61e141e311e2f0c912d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 17:17:05 +0530
Subject: [PATCH 44/89] fix(gui-v2): populate default column name and type

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue | 2 +-
 packages/nc-gui-v2/composables/useColumnCreateStore.ts        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index cff836c888..286b1353f5 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -65,7 +65,7 @@ function onCancel() {
 
 // create column meta if it's a new column
 watchEffect(() => {
-  if (!isEdit) {
+  if (!isEdit?.value) {
     generateNewColumnMeta()
   }
 })
diff --git a/packages/nc-gui-v2/composables/useColumnCreateStore.ts b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
index b1e24b7bde..f5d92c3aef 100644
--- a/packages/nc-gui-v2/composables/useColumnCreateStore.ts
+++ b/packages/nc-gui-v2/composables/useColumnCreateStore.ts
@@ -87,7 +87,6 @@ const [useProvideColumnCreateStore, useColumnCreateStore] = createInjectionState
     // actions
     const generateNewColumnMeta = () => {
       setAdditionalValidations({})
-      debugger
       formState.value = { meta: {}, ...sqlUi.value.getNewColumn((meta.value?.columns?.length || 0) + 1) }
     }
 

From c68ace833dcf5f02c8029b07fd3ff583cc10cab4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 18:02:37 +0530
Subject: [PATCH 45/89] fix(gui-v2): add copy to clipboard

- on typing make cell editable
- on cmd/ctrl + c copy cell content

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/CellIcon.vue |  3 +-
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 55 +++++++++++++++++--
 packages/nc-gui-v2/composables/useColumn.ts   |  4 +-
 .../pages/nc/[projectId]/index/index.vue      |  2 +-
 4 files changed, 56 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index fd20703ac3..a65e979ca4 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { Ref, toRef } from 'vue'
+import type { Ref } from 'vue'
+import { toRef } from 'vue'
 import { ColumnInj } from '~/context'
 import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index da6c1fa2f6..85150c31c5 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { onClickOutside } from '@vueuse/core'
 import { isVirtualCol } from 'nocodb-sdk'
+import { message } from 'ant-design-vue'
 import {
   inject,
   onKeyStroke,
   onMounted,
+  onUnmounted,
   provide,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
@@ -103,9 +106,7 @@ defineExpose({
 })
 
 // instantiate column create store
-// watchEffect(() => {
 if (meta) useProvideColumnCreateStore(meta)
-// })
 
 // reset context menu target on hide
 watch(contextMenu, () => {
@@ -114,6 +115,8 @@ watch(contextMenu, () => {
   }
 })
 
+const isPkAvail = $computed(() => meta?.value?.columns?.some((c) => c.pk))
+
 const clearCell = async (ctx: { row: number; col: number }) => {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
@@ -127,8 +130,10 @@ const clearCell = async (ctx: { row: number; col: number }) => {
   await updateOrSaveRow(rowObj, columnObj.title)
 }
 
+const { copy } = useClipboard()
+
 /** handle keypress events */
-onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'], async (e: KeyboardEvent) => {
+const onKeyDown = async (e: KeyboardEvent) => {
   if (selected.row === null || selected.col === null) return
   /** on tab key press navigate through cells */
   switch (e.key) {
@@ -177,7 +182,49 @@ onKeyStroke(['Tab', 'Shift', 'Enter', 'Delete', 'ArrowDown', 'ArrowUp', 'ArrowLe
       e.preventDefault()
       if (selected.row < data.value.length - 1) selected.row++
       break
+    default:
+      {
+        const rowObj = data.value[selected.row]
+        const columnObj = fields.value[selected.col]
+
+        if (e.metaKey || e.ctrlKey) {
+          switch (e.keyCode) {
+            // copy - ctrl/cmd +c
+            case 67:
+              await copy(rowObj.row[columnObj.title] || '')
+              break
+          }
+        }
+
+        if (editEnabled || e.ctrlKey || e.altKey || e.metaKey) {
+          return
+        }
+
+        /** on letter key press make cell editable and empty */
+        if (e?.key?.length === 1) {
+          if (!isPkAvail && !rowObj.rowMeta.new) {
+            return message.info("Update not allowed for table which doesn't have primary Key")
+          }
+          rowObj.row[columnObj.title] = ''
+          editEnabled = true
+        }
+      }
+      break
   }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeyDown)
+})
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeyDown)
+})
+
+/** On clicking outside of table reset active cell  */
+const smartTable = ref(null)
+onClickOutside(smartTable, (event) => {
+  selected.row = null
+  selected.col = null
 })
 
 const onNavigate = (dir: NavigateDir) => {
@@ -207,7 +254,7 @@ const onNavigate = (dir: NavigateDir) => {
   <div class="flex flex-col h-100 min-h-0 w-100">
     <div class="nc-grid-wrapper min-h-0 flex-1 scrollbar-thin-primary">
       <a-dropdown v-model:visible="contextMenu" :trigger="['contextmenu']">
-        <table class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
+        <table ref="smartTable" class="xc-row-table nc-grid backgroundColorDefault" @contextmenu.prevent="contextMenu = true">
           <thead>
             <tr class="group">
               <th>
diff --git a/packages/nc-gui-v2/composables/useColumn.ts b/packages/nc-gui-v2/composables/useColumn.ts
index 8bce6fbd0a..51ac14531e 100644
--- a/packages/nc-gui-v2/composables/useColumn.ts
+++ b/packages/nc-gui-v2/composables/useColumn.ts
@@ -1,12 +1,12 @@
 import type { ColumnType } from 'nocodb-sdk'
 import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import { useProject } from '#imports'
-import { Ref } from 'vue'
 
 export function useColumn(column: Ref<ColumnType>) {
   const { project } = useProject()
 
-  const uiDatatype: UITypes = (column?.value?.uidt) as UITypes
+  const uiDatatype: UITypes = column?.value?.uidt as UITypes
   const abstractType = isVirtualCol(column?.value)
     ? null
     : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column?.value)
diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
index c19d34de54..b7c54f9937 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index/index.vue
@@ -163,7 +163,7 @@ function openQuickImportDialog(type: string) {
   @apply !border-none;
 }
 
-:deep(.ant-tabs-nav-add){
+:deep(.ant-tabs-nav-add) {
   @apply !hidden;
 }
 </style>

From 8dfb1f4853870ada17a9be776423b19294498ee6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 18:19:10 +0530
Subject: [PATCH 46/89] fix(gui-v2): bind column default property

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/AdvancedOptions.vue     | 9 ++-------
 packages/nc-gui-v2/components/smartsheet/Grid.vue        | 2 +-
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
index 26bf40e44f..85d1378b55 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/AdvancedOptions.vue
@@ -77,13 +77,8 @@ formState.value.au = !!formState.value.au
       <a-input v-model="formState.dtxs" :disabled="!sqlUi.columnEditable(formState)" size="small" @input="onAlter" />
     </a-form-item>
     <a-form-item :label="$t('placeholder.defaultValue')">
-      <a-textarea
-        v-model="formState.cdf"
-        :help="sqlUi.getDefaultValueForDatatype(formState.dt)"
-        size="small"
-        auto-size
-        @input="onAlter(2, true)"
-      />
+      <a-textarea v-model:value="formState.cdf" size="small" auto-size @input="onAlter(2, true)" />
+      <span class="text-gray-400 text-xs">{{ sqlUi.getDefaultValueForDatatype(formState.dt) }}</span>
     </a-form-item>
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 85150c31c5..e04d35096d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -284,7 +284,7 @@ const onNavigate = (dir: NavigateDir) => {
               <!-- v-if="!isLocked && !isVirtual && !isPublicView && _isUIAllowed('add-column')" -->
               <th v-t="['c:column:add']" @click="addColumnDropdown = true">
                 <a-dropdown v-model:visible="addColumnDropdown" :trigger="['click']">
-                  <div class="h-full w-full flex align-center justify-center">
+                  <div class="h-full w-[60px] flex align-center justify-center">
                     <MdiPlusIcon class="text-sm" />
                   </div>
                   <template #overlay>

From 95de96b6b4363c8f3a70c442e03a03a3b4c18462 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:28:50 +0530
Subject: [PATCH 47/89] fix(gui-v2): focus decimal cell on edit enabled

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

diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index b2f15151a6..77b0a2f7a3 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -3,7 +3,7 @@ import { computed, inject, onMounted, ref } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: number | null
+  modelValue: number | null | string
 }
 
 interface Emits {
@@ -20,15 +20,13 @@ const root = ref<HTMLInputElement>()
 
 const vModel = useVModel(props, 'modelValue', emits)
 
-onMounted(() => {
-  root.value?.focus()
-})
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
   <input
     v-if="editEnabled"
-    ref="root"
+    :ref="focus"
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 90c24001c1..42d7b28f35 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -102,7 +102,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
 
 <template>
   <div
-    class="nc-cell"
+    class="nc-cell w-full-h-full"
     @keydown.stop.left
     @keydown.stop.right
     @keydown.stop.up

From c4c2e477bd0c4cd6a0e1abe7dc48f562afc2852d Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:36:23 +0530
Subject: [PATCH 48/89] fix(gui-v2): on blur event reset editable value

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components/cell/Currency.vue | 10 +++++++++-
 packages/nc-gui-v2/components/cell/Decimal.vue  |  1 +
 packages/nc-gui-v2/components/cell/Email.vue    |  2 +-
 packages/nc-gui-v2/components/cell/Float.vue    |  1 +
 packages/nc-gui-v2/components/cell/Integer.vue  |  1 +
 packages/nc-gui-v2/components/cell/Url.vue      |  2 +-
 6 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Currency.vue b/packages/nc-gui-v2/components/cell/Currency.vue
index b9984f8499..54bfdc53d2 100644
--- a/packages/nc-gui-v2/components/cell/Currency.vue
+++ b/packages/nc-gui-v2/components/cell/Currency.vue
@@ -37,10 +37,18 @@ const currency = computed(() => {
     return vModel.value
   }
 })
+
+const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" />
+  <input
+    v-if="editEnabled"
+    :ref="focus"
+    v-model="vModel"
+    class="w-full h-full border-none outline-none"
+    @blur="editEnabled = false"
+  />
   <span v-else-if="vModel">{{ currency }}</span>
   <span v-else />
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Decimal.vue b/packages/nc-gui-v2/components/cell/Decimal.vue
index 77b0a2f7a3..7f1ef4c114 100644
--- a/packages/nc-gui-v2/components/cell/Decimal.vue
+++ b/packages/nc-gui-v2/components/cell/Decimal.vue
@@ -31,6 +31,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 33407812bd..ab10f0aebb 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -25,7 +25,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" />
+  <input v-if="editEnabled" ref="root" v-model="vModel" class="outline-none prose-sm" @blur="editEnabled = false" />
   <a v-else-if="validEmail" class="prose-sm underline hover:opacity-75" :href="`mailto:${vModel}`" target="_blank">
     {{ vModel }}
   </a>
diff --git a/packages/nc-gui-v2/components/cell/Float.vue b/packages/nc-gui-v2/components/cell/Float.vue
index 16ba6db0f9..ff836dcad5 100644
--- a/packages/nc-gui-v2/components/cell/Float.vue
+++ b/packages/nc-gui-v2/components/cell/Float.vue
@@ -29,6 +29,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
     step="0.1"
+    @blur="editEnabled = false"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/cell/Integer.vue b/packages/nc-gui-v2/components/cell/Integer.vue
index 38691d0fa2..f62ef8e345 100644
--- a/packages/nc-gui-v2/components/cell/Integer.vue
+++ b/packages/nc-gui-v2/components/cell/Integer.vue
@@ -32,6 +32,7 @@ function onKeyDown(evt: KeyboardEvent) {
     v-model="vModel"
     class="outline-none pa-0 border-none w-full h-full prose-sm"
     type="number"
+    @blur="editEnabled = false"
     @keydown="onKeyDown"
   />
   <span v-else class="prose-sm">{{ vModel }}</span>
diff --git a/packages/nc-gui-v2/components/cell/Url.vue b/packages/nc-gui-v2/components/cell/Url.vue
index 97d9c5fe19..1bfcdb39df 100644
--- a/packages/nc-gui-v2/components/cell/Url.vue
+++ b/packages/nc-gui-v2/components/cell/Url.vue
@@ -30,7 +30,7 @@ const focus = (el: HTMLInputElement) => el?.focus()
 </script>
 
 <template>
-  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" />
+  <input v-if="editEnabled" :ref="focus" v-model="vModel" class="outline-none" @blur="editEnabled = false" />
   <nuxt-link v-else-if="isValid" class="py-2 underline hover:opacity-75" :to="value" target="_blank">{{ value }}</nuxt-link>
   <span v-else>{{ value }}</span>
 </template>

From cbd1f1718592713e586570fedff75e622d0fe859 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Thu, 4 Aug 2022 22:42:37 +0530
Subject: [PATCH 49/89] fix(gui-v2): reload data after column add/update

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/EditOrAdd.vue | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 286b1353f5..d0dd9ebfec 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
-import { MetaInj } from '~/context'
+import { MetaInj, ReloadViewDataHookInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
@@ -13,11 +13,9 @@ interface Props {
 const { editColumnDropdown } = defineProps<Props>()
 
 const emit = defineEmits(['cancel'])
-
 const meta = inject(MetaInj)
-
+const reloadDataTrigger = inject(ReloadViewDataHookInj)
 const advancedOptions = ref(false)
-
 const { getMeta } = useMetas()
 
 const formulaOptionsRef = ref()
@@ -50,9 +48,10 @@ const uiTypesOptions = computed<typeof uiTypes>(() => {
   ]
 })
 
-const reloadMeta = () => {
+const reloadMetaAndData = () => {
   emit('cancel')
   getMeta(meta?.value.id as string, true)
+  reloadDataTrigger?.trigger()
 }
 
 function onCancel() {
@@ -144,7 +143,7 @@ watch(
           v-model:checked="formState.meta.validate"
           class="ml-1 mb-1"
         >
-          <span class="text-xs text-gray-600">
+          <span class="text-[10px] text-gray-600">
             {{ `Accept only valid ${formState.uidt}` }}
           </span>
         </a-checkbox>
@@ -156,7 +155,12 @@ watch(
             <!-- Cancel -->
             {{ $t('general.cancel') }}
           </a-button>
-          <a-button html-type="submit" type="primary" size="small" @click="addOrUpdate(reloadMeta), (advancedOptions = false)">
+          <a-button
+            html-type="submit"
+            type="primary"
+            size="small"
+            @click="addOrUpdate(reloadMetaAndData), (advancedOptions = false)"
+          >
             <!-- Save -->
             {{ $t('general.save') }}
           </a-button>

From 9518a25a06414ca89b91eaccc2ccd85034e182f1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 19:29:08 +0530
Subject: [PATCH 50/89] refactor(gui-v2): update LTAR columns

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet/VirtualCell.vue      |  3 ++-
 .../components/virtual-cell/BelongsTo.vue      |  3 ++-
 .../components/virtual-cell/HasMany.vue        |  3 ++-
 .../components/virtual-cell/ManyToMany.vue     |  3 ++-
 packages/nc-gui-v2/composables/useLTARStore.ts | 18 +++++++++---------
 5 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
index 67fc79aece..f47831b164 100644
--- a/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/VirtualCell.vue
@@ -14,7 +14,8 @@ interface Props {
 
 const props = defineProps<Props>()
 const emit = defineEmits(['update:modelValue', 'navigate'])
-const { column } = props
+
+const column = toRef(props, 'column')
 const active = toRef(props, 'active', false)
 const row = toRef(props, 'row')
 
diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index 1e417e3caf..e2dcae0d5a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListItems from './components/ListItems.vue'
 import { useProvideLTARStore } from '#imports'
@@ -15,7 +16,7 @@ const localState = null
 const listItemsDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index 95f4cf2172..c453834e55 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index c1fc3abf1e..af82ed0f65 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import ItemChip from './components/ItemChip.vue'
 import ListChildItems from './components/ListChildItems.vue'
 import ListItems from './components/ListItems.vue'
@@ -17,7 +18,7 @@ const listItemsDlg = ref(false)
 const childListDlg = ref(false)
 
 const { relatedTableMeta, loadRelatedTableMeta, relatedTablePrimaryValueProp, unlink } = useProvideLTARStore(
-  column as Required<ColumnType>,
+  column as Ref<Required<ColumnType>>,
   row,
   () => reloadTrigger?.trigger(),
 )
diff --git a/packages/nc-gui-v2/composables/useLTARStore.ts b/packages/nc-gui-v2/composables/useLTARStore.ts
index d4a7b18c4b..8366cf13e7 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: Required<ColumnType>, row?: Ref<Row>, reloadData = () => {}) => {
+  (column: Ref<Required<ColumnType>>, row?: Ref<Row>, reloadData = () => {}) => {
     // state
     const { metas, getMeta } = useMetas()
     const { project } = useProject()
@@ -31,12 +31,12 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
       size: 10,
     })
 
-    const colOptions = column.colOptions as LinkToAnotherRecordType
+    const colOptions = $computed(() => column?.value.colOptions as LinkToAnotherRecordType)
 
     // getters
-    const meta = computed(() => metas?.value?.[column.fk_model_id as string])
+    const meta = computed(() => metas?.value?.[column?.value?.fk_model_id as string])
     const relatedTableMeta = computed<TableType>(() => {
-      return metas.value?.[(column.colOptions as any)?.fk_related_model_id as string]
+      return metas.value?.[colOptions?.fk_related_model_id as string]
     })
 
     const rowId = computed(() =>
@@ -72,8 +72,8 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           project.value.id as string,
           meta.value.id,
           rowId.value,
-          (column.colOptions as LinkToAnotherRecordType).type as 'mm' | 'hm',
-          column.title,
+          colOptions.type as 'mm' | 'hm',
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenExcludedListPagination.size,
@@ -99,7 +99,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.id,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           // todo: swagger type correction
           {
             limit: childrenListPagination.size,
@@ -157,7 +157,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {
@@ -195,7 +195,7 @@ const [useProvideLTARStore, useLTARStore] = useInjectionState(
           meta.value.title as string,
           rowId.value,
           colOptions.type as 'mm' | 'hm',
-          column.title,
+          column?.value?.title,
           getRelatedTableRowId(row) as string,
         )
       } catch (e) {

From 3eeffc69a667f49e14fe696734865f90ce6e0591 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Fri, 5 Aug 2022 19:32:01 +0530
Subject: [PATCH 51/89] refactor(gui-v2): clear tabs on load

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/pages/nc/[projectId]/index.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
index 4c70c5f50d..824e1eb099 100644
--- a/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/nc/[projectId]/index.vue
@@ -4,9 +4,10 @@ import { TabType } from '~/composables'
 
 const route = useRoute()
 const { loadProject, loadTables } = useProject(route.params.projectId as string)
-const { addTab } = useTabs()
+const { addTab, clearTabs } = useTabs()
 const { $state } = useNuxtApp()
 
+clearTabs()
 if (!route.params.type) {
   addTab({ type: TabType.AUTH, title: 'Team & Auth' })
 }

From 996d91ef49d48655c092b8bc0ec0e245ef09a7e2 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 12:27:16 +0530
Subject: [PATCH 52/89] fix(gui-v2): allow id column creation if pk missing

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue     | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index d0dd9ebfec..cfdf4cf23e 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -5,6 +5,7 @@ import { MetaInj, ReloadViewDataHookInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
 import MdiPlusIcon from '~icons/mdi/plus-circle-outline'
 import MdiMinusIcon from '~icons/mdi/minus-circle-outline'
+import MdiIdentifierIcon from '~icons/mdi/identifier'
 
 interface Props {
   editColumnDropdown: boolean
@@ -37,7 +38,7 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
     ...uiTypes.filter((t) => !isEdit || !t.virtual),
-    ...(!isEdit && meta?.value?.columns?.every((c) => !c.pk)
+    ...(!isEdit?.value && meta?.value?.columns?.every((c) => !c.pk)
       ? [
           {
             name: 'ID',
@@ -107,7 +108,7 @@ watch(
       </a-form-item>
       <a-form-item :label="$t('labels.columnType')">
         <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
-          <a-select-option v-for="opt in uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
+          <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
             <div class="flex gap-1 align-center text-xs">
               <component :is="opt.icon" class="text-grey" />
               {{ opt.name }}

From d1b0b7cca3656d4d19c38bc4b736dd0224f72e19 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sat, 6 Aug 2022 12:40:43 +0530
Subject: [PATCH 53/89] fix(gui-v2): block user from editing pk and ai values

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  2 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  | 42 +++++++++++++------
 .../composables/useSmartsheetStore.ts         |  2 +
 3 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index ca9f1693ce..1b71a9a17f 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,6 +7,7 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -66,6 +67,7 @@ declare module '@vue/runtime-core' {
     MdiDotsVertical: typeof import('~icons/mdi/dots-vertical')['default']
     MdiLogout: typeof import('~icons/mdi/logout')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
+    MdiTableArrowRight: typeof import('~icons/mdi/table-arrow-right')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e04d35096d..e9547fc51f 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onClickOutside } from '@vueuse/core'
+import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
@@ -13,6 +14,7 @@ import {
   useSmartsheetStoreOrThrow,
   useViewData,
 } from '#imports'
+import type { Row } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
@@ -37,11 +39,12 @@ const fields = inject(FieldsInj, ref([]))
 const isLocked = inject(IsLockedInj, false)
 // 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 { sqlUi } = useProject()
-const { xWhere } = useSmartsheetStoreOrThrow()
+const { xWhere, isPkAvail } = useSmartsheetStoreOrThrow()
 const addColumnDropdown = ref(false)
 const contextMenu = ref(false)
 const contextMenuTarget = ref(false)
@@ -77,12 +80,6 @@ const selectCell = (row: number, col: number) => {
   selected.col = col
 }
 
-onKeyStroke(['Enter'], (e) => {
-  if (selected.row !== null && selected.col !== null) {
-    editEnabled = true
-  }
-})
-
 watch(
   () => (view?.value as any)?.id,
   async (n?: string, o?: string) => {
@@ -115,8 +112,6 @@ watch(contextMenu, () => {
   }
 })
 
-const isPkAvail = $computed(() => meta?.value?.columns?.some((c) => c.pk))
-
 const clearCell = async (ctx: { row: number; col: number }) => {
   const rowObj = data.value[ctx.row]
   const columnObj = fields.value[ctx.col]
@@ -132,6 +127,25 @@ const clearCell = async (ctx: { row: number; col: number }) => {
 
 const { copy } = useClipboard()
 
+const makeEditable = (row: Row, col: ColumnType) => {
+  if (isPublicView || editEnabled || isView) {
+    return
+  }
+  if (!isPkAvail.value && !row.rowMeta.new) {
+    message.info("Update not allowed for table which doesn't have primary Key")
+    return
+  }
+  if (col.ai) {
+    message.info('Auto Increment field is not editable')
+    return
+  }
+  if (col.pk && !row.rowMeta.new) {
+    message.info('Editing primary key not supported')
+    return
+  }
+  return (editEnabled = true)
+}
+
 /** handle keypress events */
 const onKeyDown = async (e: KeyboardEvent) => {
   if (selected.row === null || selected.col === null) return
@@ -158,7 +172,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
     /** on enter key press make cell editable */
     case 'Enter':
       e.preventDefault()
-      editEnabled = true
+      makeEditable(data.value[selected.row], fields.value[selected.col])
       break
     /** on delete key press clear cell */
     case 'Delete':
@@ -205,8 +219,10 @@ const onKeyDown = async (e: KeyboardEvent) => {
           if (!isPkAvail && !rowObj.rowMeta.new) {
             return message.info("Update not allowed for table which doesn't have primary Key")
           }
-          rowObj.row[columnObj.title] = ''
-          editEnabled = true
+          if (makeEditable(rowObj, columnObj)) {
+            rowObj.row[columnObj.title] = ''
+          }
+          // editEnabled = true
         }
       }
       break
@@ -319,7 +335,7 @@ const onNavigate = (dir: NavigateDir) => {
                 :data-col="columnObj.id"
                 :data-title="columnObj.title"
                 @click="selectCell(rowIndex, colIndex)"
-                @dblclick="editEnabled = true"
+                @dblclick="makeEditable(row, columnObj)"
                 @contextmenu="contextMenuTarget = { row: rowIndex, col: colIndex }"
               >
                 <div class="w-full h-full">
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 082b027807..24038cde3b 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -18,6 +18,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
 
   // getters
   const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
+  const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
@@ -41,6 +42,7 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     $api,
     search,
     xWhere,
+    isPkAvail,
   }
 })
 

From ac046a24a941c975ec36aa303fe0624d9a1021ab Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 14:29:03 +0530
Subject: [PATCH 54/89] filter(gui-v2): correction in filter delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/components.d.ts            |  1 -
 .../smartsheet-toolbar/ColumnFilter.vue       |  2 +-
 .../nc-gui-v2/composables/useViewFilters.ts   | 27 +++++++++++--------
 3 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/packages/nc-gui-v2/components.d.ts b/packages/nc-gui-v2/components.d.ts
index 1b71a9a17f..0e5864cd54 100644
--- a/packages/nc-gui-v2/components.d.ts
+++ b/packages/nc-gui-v2/components.d.ts
@@ -7,7 +7,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '(fix(gui-v2)': block user from editing pk and ai values)
     AAlert: typeof import('ant-design-vue/es')['Alert']
     AAutoComplete: typeof import('ant-design-vue/es')['AutoComplete']
     AButton: typeof import('ant-design-vue/es')['Button']
diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
index 87d4bb03c8..8cc8d66b30 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue
@@ -124,7 +124,7 @@ defineExpose({
               v-if="!filter.readOnly"
               :key="i"
               small
-              class="nc-filter-item-remove-btn text-grey"
+              class="nc-filter-item-remove-btn cursor-pointer text-grey"
               @click.stop="deleteFilter(filter, i)"
             />
             <span v-else :key="`${i}dummy`" />
diff --git a/packages/nc-gui-v2/composables/useViewFilters.ts b/packages/nc-gui-v2/composables/useViewFilters.ts
index 11b633fd7e..1007b3ba92 100644
--- a/packages/nc-gui-v2/composables/useViewFilters.ts
+++ b/packages/nc-gui-v2/composables/useViewFilters.ts
@@ -43,19 +43,24 @@ export function useViewFilters(
   }
 
   const deleteFilter = async (filter: FilterType & { status: string }, i: number) => {
+    // if shared or sync permission not allowed simply remove it from array
     if (shared || !isUIAllowed('filterSync')) {
-      const _filters = unref(filters.value)
-      _filters.splice(i, 1)
-      filters.value = _filters
-    } else if (filter.id) {
-      if (!autoApply?.value) {
-        filter.status = 'delete'
+      filters.value.splice(i, 1)
+      reloadData?.()
+    } else {
+      if (filter.id) {
+        // if auto-apply disabled mark it as disabled
+        if (!autoApply?.value) {
+          filter.status = 'delete'
+          // if auto-apply enabled invoke delete api and remove from array
+        } else {
+          await $api.dbTableFilter.delete(filter.id)
+          reloadData?.()
+          filters.value.splice(i, 1)
+        }
+        // if not synced yet remove it from array
       } else {
-        await $api.dbTableFilter.delete(filter.id)
-        const _filters = unref(filters.value)
-        _filters.splice(i, 1)
-        filters.value = _filters
-        reloadData?.()
+        filters.value.splice(i, 1)
       }
     }
   }

From bf96039c5e665a46ab858c9924674274ad93dff7 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 14:48:08 +0530
Subject: [PATCH 55/89] fix(gui-v2): handle renaming of active tab

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useTabs.ts | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 8498b6d975..449abc7897 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -26,7 +26,7 @@ export function useTabs() {
   const tabs = useState<TabItem[]>('tabs', () => [])
 
   const route = useRoute()
-
+  const router = useRouter()
   const { tables } = useProject()
 
   const activeTabIndex: WritableComputedRef<number> = computed({
@@ -36,6 +36,8 @@ export function useTabs() {
 
         const id = tables.value?.find((t) => t.title === tab.title)?.id
 
+        if (!id) return -1
+
         tab.id = id as string
 
         let index = tabs.value.findIndex((t) => t.id === tab.id)
@@ -108,7 +110,14 @@ export function useTabs() {
   const updateTab = (key: number | Partial<TabItem>, newTabItemProps: Partial<TabItem>) => {
     const tab = typeof key === 'number' ? tabs.value[key] : tabs.value.find(getPredicate(key))
     if (tab) {
+      const isActive = tabs.value.indexOf(tab) === activeTabIndex.value
       Object.assign(tab, newTabItemProps)
+      if (isActive && tab.title)
+        router.replace({
+          params: {
+            title: tab.title,
+          },
+        })
     }
   }
 

From 22b91cfafc8dc53d2b627ee0b76f4e0118519b17 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 15:36:26 +0530
Subject: [PATCH 56/89] wip(gui-v2): virtual column header tooltip

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-header/VirtualCell.vue         | 206 +++++++-----------
 scripts/sdk/swagger.json                      |   5 +-
 2 files changed, 79 insertions(+), 132 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 018ad1d8c6..d3ae873a9d 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,143 +1,82 @@
 <script setup lang="ts">
+import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
+import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import { toRef } from 'vue'
-import type { ColumnType, TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
+import { $computed } from 'vue/macros'
+import { useMetas } from '~/composables'
 import { ColumnInj, MetaInj } from '~/context'
-import { provide } from '#imports'
+import type { TableType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any } }>()
 const column = toRef(props, 'column')
-
 provide(ColumnInj, column)
-
+const { metas } = useMetas()
 const meta = inject(MetaInj)
 
-useProvideColumnCreateStore(meta as Ref<TableType>, column)
+const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualCell(column)
+
+const colOptions = $computed(() => column.value?.colOptions)
+const tableTile = $computed(() => meta?.value?.title)
+const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
+  if (isMm || isHm || isBt) {
+    return column.value?.colOptions as LinkToAnotherRecordType
+  } else if ((column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id) {
+    return meta?.value?.columns?.find(
+      (c) => c.id === (column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id,
+    )?.colOptions as LinkToAnotherRecordType
+  }
+  return null
+})
 
-// import { UITypes } from 'nocodb-sdk'
-// import { getUIDTIcon } from '../helpers/uiTypes'
-// import EditVirtualColumn from '~/components/project/spreadsheet/components/EditVirtualColumn'
-//
-// export default {
-//   name: 'VirtualHeaderCell',
-//   components: { EditVirtualColumn },
-//   props: ['column', 'nodes', 'meta', 'isForm', 'isPublicView', 'sqlUi', 'required', 'isLocked', 'isVirtual'],
-//   data: () => ({
-//     columnDeleteDialog: false,
-//     editColumnMenu: false,
-//     rollupIcon: getUIDTIcon('Rollup'),
-//     rels: ['bt', 'hm', 'mm']
-//   }),
-//   computed: {
-//     alias() {
-//       // return this.column.lk ? `${this.column.lk._lcn} <small class="grey--text text--darken-1">(from ${this.column.lk._ltn})</small>` : this.column.title
-//       return this.column.title
-//     },
-//     type() {
-//       if (this.column?.colOptions?.type) {
-//         return this.column.colOptions.type
-//       }
-//       if (this.column?.colOptions?.formula) {
-//         return 'formula'
-//       }
-//       if (this.column.uidt === UITypes.Lookup) {
-//         return 'lk'
-//       }
-//       if (this.column.uidt === UITypes.Rollup) {
-//         return 'rl'
-//       }
-//       return ''
-//     },
-//     relation() {
-//       if (this.rels.includes(this.type)) {
-//         return this.column
-//       } else if (this.column.colOptions?.fk_relation_column_id) {
-//         return this.meta.columns.find(c => c.id === this.column.colOptions?.fk_relation_column_id)
-//       }
-//       return undefined
-//     },
-//     relationType() {
-//       return this.relation?.colOptions?.type
-//     },
-//     relationMeta() {
-//       if (this.rels.includes(this.type)) {
-//         return this.getMeta(this.column.colOptions.fk_related_model_id)
-//       } else if (this.relation) {
-//         return this.getMeta(this.relation.colOptions.fk_related_model_id)
-//       }
-//       return undefined
-//     },
-//     childColumn() {
-//       if (this.relationMeta?.columns) {
-//         if (this.type === 'rl') {
-//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_rollup_column_id)
-//           return ch
-//         }
-//         if (this.type === 'lk') {
-//           const ch = this.relationMeta.columns.find(c => c.id === this.column.colOptions.fk_lookup_column_id)
-//           return ch
-//         }
-//       }
-//       return ''
-//     },
-//     childTable() {
-//       if (this.relationMeta?.title) {
-//         return this.relationMeta.title
-//       }
-//       return ''
-//     },
-//     parentTable() {
-//       if (this.rels.includes(this.type)) {
-//         return this.meta.title
-//       }
-//       return ''
-//     },
-//     parentColumn() {
-//       if (this.rels.includes(this.type)) {
-//         return this.column.title
-//       }
-//       return ''
-//     },
-//     tooltipMsg() {
-//       if (!this.column) {
-//         return ''
-//       }
-//       if (this.type === 'hm') {
-//         return `'${this.parentTable}' has many '${this.childTable}'`
-//       } else if (this.type === 'mm') {
-//         return `'${this.childTable}' & '${this.parentTable}' have <br>many to many relation`
-//       } else if (this.type === 'bt') {
-//         return `'${this.column.title}' belongs to '${this.childTable}'`
-//       } else if (this.type === 'lk') {
-//         return `'${this.childColumn.title}' from '${this.childTable}' (${this.childColumn.uidt})`
-//       } else if (this.type === 'formula') {
-//         return `Formula - ${this.column.colOptions.formula}`
-//       } else if (this.type === 'rl') {
-//         return `'${this.childColumn.title}' of '${this.childTable}' (${this.childColumn.uidt})`
-//       }
-//       return ''
-//     }
-//   },
-//   methods: {
-//     getMeta(id) {
-//       return this.$store.state.meta.metas[id] || {}
-//     },
-//     async deleteColumn() {
-//       try {
-//         await this.$api.dbTableColumn.delete(this.column.id)
-//
-//         if (this.column.uidt === UITypes.LinkToAnotherRecord && this.column.colOptions) {
-//           this.$store.dispatch('meta/ActLoadMeta', { force: true, id: this.column.colOptions.fk_related_model_id }).then(() => {})
-//         }
-//
-//         this.$emit('saved')
-//         this.columnDeleteDialog = false
-//       } catch (e) {
-//         this.$toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
-//       }
-//     }
-//   }
-// }
+const relatedTableMeta = $computed(
+  () => relationColumn && relationColumn?.fk_related_model_id && metas.value?.[relationColumn?.fk_related_model_id as string],
+)
+
+const relatedTableTitle = $computed(() => relatedTableMeta?.title)
+
+const childColumn = $computed(() => {
+  if (relatedTableMeta?.columns) {
+    if (isRollup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
+      return ch
+    }
+    if (isLookup) {
+      const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
+      return ch
+    }
+  }
+  return ''
+})
+
+const tooltipMsg = computed(() => {
+  if (!column.value) {
+    return ''
+  }
+  if (isHm.value) {
+    return `'${tableTile}' has many '${relatedTableTitle}'`
+  } else if (isMm.value) {
+    return `'${tableTile}' & '${relatedTableTitle}' have many to many relation`
+  } else if (isBt.value) {
+    return `'${column?.value?.title}' belongs to '${relatedTableTitle}'`
+  } else if (isLookup.value) {
+    return `'${childColumn.title}' from '${relatedTableTitle}' (${childColumn.uidt})`
+  } else if (isFormula.value) {
+    const formula = substituteColumnIdWithAliasInFormula(
+      (column.value?.colOptions as FormulaType)?.formula,
+      meta?.value?.columns as ColumnType[],
+      (column.value?.colOptions as any)?.formula_raw,
+    )
+    return `Formula - ${formula}`
+  } else if (isRollup.value) {
+    return `'${childColumn.title}' of '${relatedTableTitle}' (${childColumn.uidt})`
+  }
+  return ''
+})
+
+
+useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 
 <template>
@@ -147,7 +86,12 @@ useProvideColumnCreateStore(meta as Ref<TableType>, column)
           todo: bring tooltip
           -->
     <SmartsheetHeaderVirtualCellIcon v-if="column" />
-    <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    <a-tooltip placement="bottom">
+      <template #title>
+        {{ tooltipMsg }}
+      </template>
+      <span class="name" style="white-space: nowrap" :title="column.title"> {{ column.title }}</span>
+    </a-tooltip>
     <span v-if="column.rqd" class="error--text text--lighten-1">&nbsp;*</span>
 
     <!--    <span class="caption" v-html="tooltipMsg" /> -->
diff --git a/scripts/sdk/swagger.json b/scripts/sdk/swagger.json
index 5bd209698c..741f09f841 100644
--- a/scripts/sdk/swagger.json
+++ b/scripts/sdk/swagger.json
@@ -6778,7 +6778,7 @@
         }
       },
       "Formula": {
-        "title": "Lookup",
+        "title": "Formula",
         "type": "object",
         "properties": {
           "id": {
@@ -6796,6 +6796,9 @@
           "formula": {
             "type": "string"
           },
+          "formula_raw": {
+            "type": "string"
+          },
           "deleted": {
             "type": "string"
           },

From d6b9a77d5924fbbe5bc787c1ac3b862a4e89ece6 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:33:08 +0530
Subject: [PATCH 57/89] fix(gui-v2): virtual column header tooltip correction -
 lookup/rollup

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-header/VirtualCell.vue       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index d3ae873a9d..9b9cdfc801 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -19,8 +19,8 @@ const { isLookup, isBt, isRollup, isMm, isHm, isFormula, isCount } = useVirtualC
 
 const colOptions = $computed(() => column.value?.colOptions)
 const tableTile = $computed(() => meta?.value?.title)
-const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
-  if (isMm || isHm || isBt) {
+const relationColumnOptions = $computed<LinkToAnotherRecordType | null>(() => {
+  if (isMm.value || isHm.value || isBt.value) {
     return column.value?.colOptions as LinkToAnotherRecordType
   } else if ((column?.value?.colOptions as LookupType | RollupType)?.fk_relation_column_id) {
     return meta?.value?.columns?.find(
@@ -31,18 +31,18 @@ const relationColumn = $computed<LinkToAnotherRecordType | null>(() => {
 })
 
 const relatedTableMeta = $computed(
-  () => relationColumn && relationColumn?.fk_related_model_id && metas.value?.[relationColumn?.fk_related_model_id as string],
+  () => relationColumnOptions?.fk_related_model_id && metas.value?.[relationColumnOptions?.fk_related_model_id as string],
 )
 
 const relatedTableTitle = $computed(() => relatedTableMeta?.title)
 
 const childColumn = $computed(() => {
   if (relatedTableMeta?.columns) {
-    if (isRollup) {
+    if (isRollup.value) {
       const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as RollupType).fk_rollup_column_id)
       return ch
     }
-    if (isLookup) {
+    if (isLookup.value) {
       const ch = relatedTableMeta?.columns.find((c: ColumnType) => c.id === (colOptions as LookupType).fk_lookup_column_id)
       return ch
     }

From 7f3e92d63f9f14478315197dd6b2e51817923d2b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:40:10 +0530
Subject: [PATCH 58/89] fix(gui-v2): reload data after system field toggle

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useViewColumns.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 44d62505c8..4bfe8e52c0 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -99,10 +99,12 @@ export function useViewColumns(
     },
     set(v) {
       if (view?.value?.id) {
-        $api.dbView.update(view.value.id, {
-          // todo: update swagger
-          show_system_fields: v,
-        } as any)
+        $api.dbView
+          .update(view.value.id, {
+            // todo: update swagger
+            show_system_fields: v,
+          } as any)
+          .finally(() => reloadData?.())
         ;(view.value as any).show_system_fields = v
       }
     },

From 0c61a273a665a78b1dc60f192af74e41d9b03c30 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:42:31 +0530
Subject: [PATCH 59/89] refactor(gui-v2): show search option in uidt

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue  | 8 +++++++-
 1 file changed, 7 insertions(+), 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 cfdf4cf23e..35dd0fd9fc 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -107,7 +107,13 @@ watch(
         />
       </a-form-item>
       <a-form-item :label="$t('labels.columnType')">
-        <a-select v-model:value="formState.uidt" size="small" class="nc-column-name-input" @change="onUidtOrIdTypeChange">
+        <a-select
+          v-model:value="formState.uidt"
+          show-search
+          size="small"
+          class="nc-column-name-input"
+          @change="onUidtOrIdTypeChange"
+        >
           <a-select-option v-for="opt of uiTypesOptions" :key="opt.name" :value="opt.name" v-bind="validateInfos.uidt">
             <div class="flex gap-1 align-center text-xs">
               <component :is="opt.icon" class="text-grey" />

From b9eafb04e7a68c126f3dd2fbff16e117458b8788 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:50:36 +0530
Subject: [PATCH 60/89] refactor(gui-v2): enter key navigation correction

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index e9547fc51f..01ed8dd11b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -5,7 +5,6 @@ import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
-  onKeyStroke,
   onMounted,
   onUnmounted,
   provide,
@@ -18,7 +17,6 @@ import type { Row } from '~/composables'
 import {
   ActiveViewInj,
   ChangePageInj,
-  EditModeInj,
   FieldsInj,
   IsFormInj,
   IsGridInj,
@@ -247,19 +245,13 @@ const onNavigate = (dir: NavigateDir) => {
   if (selected.row === null || selected.col === null) return
   switch (dir) {
     case NavigateDir.NEXT:
-      if (selected.col < visibleColLength - 1) {
-        selected.col++
-      } else if (selected.row < data.value.length - 1) {
+      if (selected.row < data.value.length - 1) {
         selected.row++
-        selected.col = 0
       }
       break
     case NavigateDir.PREV:
-      if (selected.col > 0) {
-        selected.col--
-      } else if (selected.row > 0) {
+      if (selected.row > 0) {
         selected.row--
-        selected.col = visibleColLength - 1
       }
       break
   }

From e1c208d42d56568df50ae9a53c408247964cbc57 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Sun, 7 Aug 2022 23:53:40 +0530
Subject: [PATCH 61/89] refactor(gui-v2): keep loading in navbar static

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 5ae49b4f84..6f6c80b80e 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -30,20 +30,21 @@ const toggleSidebar = () => {
 
       <div class="flex-1" />
 
-      <div class="ml-4 flex justify-center flex-1">
+      <div class="ml-4 flex justify-center flex-shrink">
         <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>
         </div>
 
+      </div>
+
+      <div class="flex-1 text-left">
         <div v-show="state.isLoading.value" class="flex items-center gap-2 ml-3">
           {{ $t('general.loading') }}
           <mdi-reload :class="{ 'animate-infinite animate-spin': state.isLoading.value }" />
         </div>
       </div>
 
-      <div class="flex-1" />
-
       <div class="flex justify-end gap-4">
         <general-language class="mr-3" />
 

From af9cf09baa32600586edd72f8832ec81b966ccc5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 00:05:12 +0530
Subject: [PATCH 62/89] fix(gui-v2): exclude deleted fields from fields list

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

diff --git a/packages/nc-gui-v2/composables/useViewColumns.ts b/packages/nc-gui-v2/composables/useViewColumns.ts
index 4bfe8e52c0..5f4fb26b7d 100644
--- a/packages/nc-gui-v2/composables/useViewColumns.ts
+++ b/packages/nc-gui-v2/composables/useViewColumns.ts
@@ -135,7 +135,7 @@ export function useViewColumns(
         ) {
           return false
         }
-        return c.show
+        return c.show && metaColumnById?.value?.[c.fk_column_id!]
       })
       ?.sort((a, b) => a.order - b.order)
       ?.map((c) => metaColumnById?.value?.[c.fk_column_id!]) || []) as ColumnType[]

From f335d3d418db837eeb6c482750e1fc7e2cb270d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:37:47 +0530
Subject: [PATCH 63/89] fix(gui-v2): hide share view from gallery

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/app.vue                           | 1 -
 packages/nc-gui-v2/components/smartsheet/Toolbar.vue | 9 ++++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 6f6c80b80e..791784ddca 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -35,7 +35,6 @@ const toggleSidebar = () => {
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>
         </div>
-
       </div>
 
       <div class="flex-1 text-left">
diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 93135792eb..49b4eac4bc 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { IsFormInj, IsGridInj } from '~/context'
+
+const isForm = inject(IsFormInj)
+const isGrid = inject(IsGridInj)
+</script>
+
 <template>
   <div class="nc-table-toolbar w-full py-1 flex gap-1 items-center" style="z-index: 7">
     <SmartsheetToolbarSearchData class="flex-shrink" />
@@ -8,7 +15,7 @@
 
     <SmartsheetToolbarSortListMenu />
 
-    <SmartsheetToolbarShareView />
+    <SmartsheetToolbarShareView v-if="isForm || isGrid" />
 
     <SmartsheetToolbarMoreActions />
 

From 15a382ef4d555bb5dd0f54bf02f68958f9c410e4 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:46:03 +0530
Subject: [PATCH 64/89] fix(gui-v2): hide share view from gallery

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet/Toolbar.vue     |  5 ++---
 packages/nc-gui-v2/components/tabs/Smartsheet.vue   |  8 ++++----
 .../nc-gui-v2/composables/useSmartsheetStore.ts     | 13 ++++++++++---
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
index 49b4eac4bc..0fde0f591b 100644
--- a/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Toolbar.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
-import { IsFormInj, IsGridInj } from '~/context'
+import { useSmartsheetStoreOrThrow } from '~/composables'
 
-const isForm = inject(IsFormInj)
-const isGrid = inject(IsGridInj)
+const { isGrid, isForm } = useSmartsheetStoreOrThrow()
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/tabs/Smartsheet.vue b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
index 57ed384d0b..7882ed2a5f 100644
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/packages/nc-gui-v2/components/tabs/Smartsheet.vue
@@ -37,7 +37,7 @@ provide(ReloadViewDataHookInj, reloadEventHook)
 provide(FieldsInj, fields)
 provide(RightSidebarInj, ref(true))
 
-useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
+const { isGallery, isGrid, isForm } = useProvideSmartsheetStore(activeView as Ref<TableType>, meta)
 
 watch(tabMeta, async (newTabMeta, oldTabMeta) => {
   if (newTabMeta !== oldTabMeta && newTabMeta?.id) await getMeta(newTabMeta.id)
@@ -52,11 +52,11 @@ watch(tabMeta, async (newTabMeta, oldTabMeta) => {
       <template v-if="meta">
         <div class="flex flex-1 min-h-0">
           <div v-if="activeView" class="h-full flex-grow min-w-0 min-h-0">
-            <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" :ref="el" />
+            <SmartsheetGrid v-if="isGrid" :ref="el" />
 
-            <SmartsheetGallery v-else-if="activeView.type === ViewTypes.GALLERY" />
+            <SmartsheetGallery v-else-if="isGallery" />
 
-            <SmartsheetForm v-else-if="activeView.type === ViewTypes.FORM" />
+            <SmartsheetForm v-else-if="isForm" />
           </div>
         </div>
 
diff --git a/packages/nc-gui-v2/composables/useSmartsheetStore.ts b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
index 24038cde3b..87f999c6f5 100644
--- a/packages/nc-gui-v2/composables/useSmartsheetStore.ts
+++ b/packages/nc-gui-v2/composables/useSmartsheetStore.ts
@@ -1,11 +1,12 @@
 import { computed } from '@vue/reactivity'
-import { createInjectionState } from '@vueuse/core'
+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'
 
-const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
+const [useProvideSmartsheetStore, useSmartsheetStore] = useInjectionState((view: Ref<ViewType>, meta: Ref<TableType>) => {
   const { $api } = useNuxtApp()
   const { sqlUi } = useProject()
 
@@ -19,6 +20,9 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
   // getters
   const isLocked = computed(() => (view?.value as any)?.lock_type === 'locked')
   const isPkAvail = computed(() => meta?.value?.columns?.some((c) => c.pk))
+  const isGrid = computed(() => (view?.value as any)?.type === ViewTypes.GRID)
+  const isForm = computed(() => (view?.value as any)?.type === ViewTypes.FORM)
+  const isGallery = computed(() => (view?.value as any)?.type === ViewTypes.GALLERY)
   const xWhere = computed(() => {
     let where
     const col = meta?.value?.columns?.find(({ id }) => id === search.field) || meta?.value?.columns?.find((v) => v.pv)
@@ -43,8 +47,11 @@ const [useProvideSmartsheetStore, useSmartsheetStore] = createInjectionState((vi
     search,
     xWhere,
     isPkAvail,
+    isForm,
+    isGrid,
+    isGallery,
   }
-})
+}, 'smartsheet-store')
 
 export { useProvideSmartsheetStore }
 

From 598f1abf49a140df95657ac759587aa1da1c260d Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Mon, 8 Aug 2022 11:49:19 +0530
Subject: [PATCH 65/89] fix: email/url validation error handling

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

diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 9ee4a5b735..0fc55ae203 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -85,7 +85,7 @@ export function useViewData(
         .map((c) => row[c.title as string])
         .join('___') as string
 
-      return $api.dbViewRow.update(
+      return await $api.dbViewRow.update(
         NOCO,
         project?.value.id as string,
         meta?.value.id as string,

From bc1de4be2d59f1acf25f9601880859b74c0df1c8 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 11:56:18 +0530
Subject: [PATCH 66/89] fix(gui-v2): on delete remove tab from state

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 packages/nc-gui-v2/composables/useTabs.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui-v2/composables/useTabs.ts b/packages/nc-gui-v2/composables/useTabs.ts
index 449abc7897..384e20e15f 100644
--- a/packages/nc-gui-v2/composables/useTabs.ts
+++ b/packages/nc-gui-v2/composables/useTabs.ts
@@ -18,8 +18,8 @@ export interface TabItem {
 function getPredicate(key: Partial<TabItem>) {
   return (tab: TabItem) =>
     (!('id' in key) || tab.id === key.id) &&
-    (!('title' in key) || tab.title === key.id) &&
-    (!('type' in key) || tab.type === key.id)
+    (!('title' in key) || tab.title === key.title) &&
+    (!('type' in key) || tab.type === key.type)
 }
 
 export function useTabs() {

From 26eec067308b1630ffab0463d8c0faa75a1b6b63 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:03:26 +0530
Subject: [PATCH 67/89] fix(gui-v2): use windicss utility classes

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

diff --git a/packages/nc-gui-v2/app.vue b/packages/nc-gui-v2/app.vue
index 791784ddca..3fe585a1a1 100644
--- a/packages/nc-gui-v2/app.vue
+++ b/packages/nc-gui-v2/app.vue
@@ -30,7 +30,7 @@ const toggleSidebar = () => {
 
       <div class="flex-1" />
 
-      <div class="ml-4 flex justify-center flex-shrink">
+      <div class="ml-4 flex justify-center shrink">
         <div class="flex items-center gap-2 cursor-pointer nc-noco-brand-icon" @click="navigateTo('/')">
           <img width="35" src="~/assets/img/icons/512x512-trans.png" />
           <span class="prose-xl">NocoDB</span>

From 40041b863658bab9f9a81f744f819f720c864e5b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:07:21 +0530
Subject: [PATCH 68/89] refactor(gui-v2): remove unnecessary optional chaining

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-column/EditOrAdd.vue        | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
index 35dd0fd9fc..e941476439 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -37,12 +37,13 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
-    ...uiTypes.filter((t) => !isEdit || !t.virtual),
-    ...(!isEdit?.value && meta?.value?.columns?.every((c) => !c.pk)
+    ...uiTypes.filter((t) => !isEdit.value || !t.virtual),
+    ...(!isEdit.value && meta?.value?.columns?.every((c) => !c.pk)
       ? [
           {
-            name: 'ID',
-            icon: 'mdi-identifier',
+            name: UITypes.ID,
+            icon: MdiIdentifierIcon,
+            virtual: 0,
           },
         ]
       : []),
@@ -65,7 +66,7 @@ function onCancel() {
 
 // create column meta if it's a new column
 watchEffect(() => {
-  if (!isEdit?.value) {
+  if (!isEdit.value) {
     generateNewColumnMeta()
   }
 })

From 62c83c3c8d00b7af8f45a2f31000c0524e7517de Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:09:22 +0530
Subject: [PATCH 69/89] refactor(gui-v2): replace comma separated statement
 with inline function

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../nc-gui-v2/components/smartsheet-column/EditOrAdd.vue   | 7 ++++++-
 1 file changed, 6 insertions(+), 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 e941476439..03160906da 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue
@@ -167,7 +167,12 @@ watch(
             html-type="submit"
             type="primary"
             size="small"
-            @click="addOrUpdate(reloadMetaAndData), (advancedOptions = false)"
+            @click="
+              () => {
+                addOrUpdate(reloadMetaAndData)
+                advancedOptions = false
+              }
+            "
           >
             <!-- Save -->
             {{ $t('general.save') }}

From 49fe82546bd078aee8313af4235f7aaf0e97da9b Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:10:01 +0530
Subject: [PATCH 70/89] refactor(gui-v2): remove unused event args

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 01ed8dd11b..d74590f500 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -236,7 +236,7 @@ onUnmounted(() => {
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
-onClickOutside(smartTable, (event) => {
+onClickOutside(smartTable, () => {
   selected.row = null
   selected.col = null
 })

From 91565b0ce7aa895d7ffdab93f299d7a6346dd8d5 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:13:03 +0530
Subject: [PATCH 71/89] refactor(gui-v2): use `useEventListener` for binding
 event handler

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

diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index d74590f500..542e0b8bd9 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -1,12 +1,11 @@
 <script lang="ts" setup>
-import { onClickOutside } from '@vueuse/core'
+import { onClickOutside, useEventListener } from '@vueuse/core'
 import type { ColumnType } from 'nocodb-sdk'
 import { isVirtualCol } from 'nocodb-sdk'
 import { message } from 'ant-design-vue'
 import {
   inject,
   onMounted,
-  onUnmounted,
   provide,
   useGridViewColumnWidth,
   useProvideColumnCreateStore,
@@ -227,12 +226,7 @@ const onKeyDown = async (e: KeyboardEvent) => {
   }
 }
 
-onMounted(() => {
-  document.addEventListener('keydown', onKeyDown)
-})
-onUnmounted(() => {
-  document.removeEventListener('keydown', onKeyDown)
-})
+useEventListener(document, 'keydown', onKeyDown)
 
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)

From f454422d39a8cd4158fcabc74417f296bce40dba Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:22:16 +0530
Subject: [PATCH 72/89] chore(gui-v2): lint

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

diff --git a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
index 9b9cdfc801..5ecb20bbab 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/VirtualCell.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { substituteColumnIdWithAliasInFormula } from 'nocodb-sdk'
-import type { ColumnType, FormulaType, LinkToAnotherRecordType, LookupType, RollupType } 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, MetaInj } from '~/context'
-import type { TableType } from 'nocodb-sdk'
-import type { Ref } from 'vue'
 import { provide, useProvideColumnCreateStore } from '#imports'
 
 const props = defineProps<{ column: ColumnType & { meta: any } }>()
@@ -75,7 +74,6 @@ const tooltipMsg = computed(() => {
   return ''
 })
 
-
 useProvideColumnCreateStore(meta as Ref<TableType>, column)
 </script>
 

From 525ed41ea4b6bbea540d0679d7384b926e5894ce Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:47:47 +0530
Subject: [PATCH 73/89] feat(gui-v2): persist autosave option in localstorage

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue     | 17 ++++++++++++++---
 .../nc-gui-v2/composables/useGlobal/state.ts    |  1 +
 .../nc-gui-v2/composables/useGlobal/types.ts    |  1 +
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 2f5483407a..bf6e502f67 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 // todo: move to persisted state
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
@@ -9,10 +11,18 @@ import MdiMenuDownIcon from '~icons/mdi/menu-down'
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
+const { $state } = useNuxtApp()
+
 // todo: emit from child
 const filtersLength = ref(0)
 // todo: sync with store
-const autosave = ref(true)
+const autosave = computed({
+  get() {
+    return $state.filterAutoSave.value
+  }, set(value: boolean) {
+    $state.filterAutoSave.value = value
+  },
+})
 
 const filterComp = ref<typeof ColumnFilter>()
 
@@ -42,7 +52,8 @@ const applyChanges = async () => {
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details
+                      dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
@@ -50,7 +61,7 @@ const applyChanges = async () => {
           </a-checkbox>
 
           <div class="flex-1" />
-          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes </a-button>
+          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes</a-button>
         </div>
       </SmartsheetToolbarColumnFilter>
     </template>
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 344bcce2ab..51d365ccc0 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -56,6 +56,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
       createdAt: new Date('2020-01-01T00:00:00.000Z').toISOString(),
       isHidden: false,
     },
+    filterAutoSave: true,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 5a615a9179..62441d462a 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -17,6 +17,7 @@ export interface StoredState {
   lang: string
   darkMode: boolean
   feedbackForm: FeedbackForm
+  filterAutoSave :boolean
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {

From f0fff78f150f1e076388dfc815a1c937c9e66c89 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 12:51:29 +0530
Subject: [PATCH 74/89] fix(gui-v2): merge any missing default values with
 localstorage

- this to avoid missing properties when adding new state variables

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../components/smartsheet-toolbar/ColumnFilterMenu.vue      | 6 +++---
 packages/nc-gui-v2/composables/useGlobal/state.ts           | 2 +-
 packages/nc-gui-v2/composables/useGlobal/types.ts           | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index bf6e502f67..295840cec2 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -19,7 +19,8 @@ const filtersLength = ref(0)
 const autosave = computed({
   get() {
     return $state.filterAutoSave.value
-  }, set(value: boolean) {
+  },
+  set(value: boolean) {
     $state.filterAutoSave.value = value
   },
 })
@@ -52,8 +53,7 @@ const applyChanges = async () => {
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details
-                      dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
diff --git a/packages/nc-gui-v2/composables/useGlobal/state.ts b/packages/nc-gui-v2/composables/useGlobal/state.ts
index 51d365ccc0..83f493fb0f 100644
--- a/packages/nc-gui-v2/composables/useGlobal/state.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/state.ts
@@ -60,7 +60,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
-  const storage = useStorage<StoredState>(storageKey, initialState)
+  const storage = useStorage<StoredState>(storageKey, initialState, localStorage, { mergeDefaults: true })
 
   /** force turn off of dark mode, regardless of previously stored settings */
   storage.value.darkMode = false
diff --git a/packages/nc-gui-v2/composables/useGlobal/types.ts b/packages/nc-gui-v2/composables/useGlobal/types.ts
index 62441d462a..e35310ad0d 100644
--- a/packages/nc-gui-v2/composables/useGlobal/types.ts
+++ b/packages/nc-gui-v2/composables/useGlobal/types.ts
@@ -17,7 +17,7 @@ export interface StoredState {
   lang: string
   darkMode: boolean
   feedbackForm: FeedbackForm
-  filterAutoSave :boolean
+  filterAutoSave: boolean
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {

From bcac0f860c65c4ac88366e00d3c4c0f10cce752a Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 13:08:56 +0530
Subject: [PATCH 75/89] refactor(gui-v2): remove unnecessary computed

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue   | 20 ++++---------------
 1 file changed, 4 insertions(+), 16 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 295840cec2..4264c42ddc 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-
-// todo: move to persisted state
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
 import { IsLockedInj } from '~/context'
@@ -11,19 +8,10 @@ import MdiMenuDownIcon from '~icons/mdi/menu-down'
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
 
-const { $state } = useNuxtApp()
+const { filterAutoSave } = useGlobal()
 
 // todo: emit from child
 const filtersLength = ref(0)
-// todo: sync with store
-const autosave = computed({
-  get() {
-    return $state.filterAutoSave.value
-  },
-  set(value: boolean) {
-    $state.filterAutoSave.value = value
-  },
-})
 
 const filterComp = ref<typeof ColumnFilter>()
 
@@ -49,11 +37,11 @@ const applyChanges = async () => {
       <SmartsheetToolbarColumnFilter
         ref="filterComp"
         class="nc-table-toolbar-menu"
-        :auto-save="autosave"
+        :auto-save="filterAutoSave"
         @update:filters-length="filtersLength = $event"
       >
         <div class="d-flex align-end mt-2 min-h-[30px]" @click.stop>
-          <a-checkbox id="col-filter-checkbox" v-model:checked="autosave" class="col-filter-checkbox" hide-details dense>
+          <a-checkbox id="col-filter-checkbox" v-model:checked="filterAutoSave" class="col-filter-checkbox" hide-details dense>
             <span class="text-grey text-xs">
               {{ $t('msg.info.filterAutoApply') }}
               <!-- Auto apply -->
@@ -61,7 +49,7 @@ const applyChanges = async () => {
           </a-checkbox>
 
           <div class="flex-1" />
-          <a-button v-show="!autosave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes</a-button>
+          <a-button v-show="!filterAutoSave" size="small" class="text-xs ml-2" @click="applyChanges"> Apply changes </a-button>
         </div>
       </SmartsheetToolbarColumnFilter>
     </template>

From 60037b8baee2ac24bcd4921106f1e09ac5a22b25 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 13:41:18 +0530
Subject: [PATCH 76/89] fix(gui-v2): highlight filter button if at-least one
 filter present

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue       | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 4264c42ddc..9ae67dd4e4 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,21 +1,26 @@
 <script setup lang="ts">
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
-import { IsLockedInj } from '~/context'
+import { ActiveViewInj, IsLockedInj } from '~/context'
 import MdiFilterIcon from '~icons/mdi/filter-outline'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 
 const autoApplyFilter = useState('autoApplyFilter', () => false)
 const isLocked = inject(IsLockedInj)
+const activeView = inject(ActiveViewInj)
 
 const { filterAutoSave } = useGlobal()
 
-// todo: emit from child
-const filtersLength = ref(0)
-
+// todo: avoid duplicate api call by keeping a filter store
+const { filters, loadFilters } = useViewFilters(
+  activeView,
+  undefined,
+  computed(() => false),
+)
+await loadFilters()
+const filtersLength = ref(filters?.value?.length ?? 0)
 const filterComp = ref<typeof ColumnFilter>()
 
-// todo: implement
 const applyChanges = async () => {
   await filterComp?.value?.applyChanges()
 }

From 47ccda1614ebdd891c8ff10e05fc311eb840f1e1 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 14:05:41 +0530
Subject: [PATCH 77/89] fix(gui-v2): reload rows count on row insert/delete

Signed-off-by: Pranav C <pranavxc@gmail.com>
---
 .../smartsheet-toolbar/ColumnFilterMenu.vue       | 11 +++++++++--
 packages/nc-gui-v2/composables/useViewData.ts     | 15 ++++++++++++++-
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
index 9ae67dd4e4..40b644614e 100644
--- a/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilterMenu.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { watchEffect } from '@vue/runtime-core'
 import type ColumnFilter from './ColumnFilter.vue'
 import { useState } from '#app'
 import { ActiveViewInj, IsLockedInj } from '~/context'
@@ -17,8 +18,14 @@ const { filters, loadFilters } = useViewFilters(
   undefined,
   computed(() => false),
 )
-await loadFilters()
-const filtersLength = ref(filters?.value?.length ?? 0)
+
+const filtersLength = ref(0)
+watchEffect(async () => {
+  if (activeView?.value) {
+    await loadFilters()
+    filtersLength.value = filters?.value?.length ?? 0
+  }
+})
 const filterComp = ref<typeof ColumnFilter>()
 
 const applyChanges = async () => {
diff --git a/packages/nc-gui-v2/composables/useViewData.ts b/packages/nc-gui-v2/composables/useViewData.ts
index 0fc55ae203..950833a1f1 100644
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/packages/nc-gui-v2/composables/useViewData.ts
@@ -39,6 +39,16 @@ export function useViewData(
     },
   })
 
+  const syncCount = async () => {
+    const { count } = await $api.dbViewRow.count(
+      NOCO,
+      project?.value?.title as string,
+      meta?.value?.id as string,
+      viewMeta?.value?.id as string,
+    )
+    paginationData.value.totalRows = count
+  }
+
   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, {
@@ -70,6 +80,7 @@ export function useViewData(
         rowMeta: {},
         oldRow: { ...insertedData },
       })
+      syncCount()
     } catch (error: any) {
       notification.error({
         message: 'Row insert failed',
@@ -167,7 +178,6 @@ export function useViewData(
       })
       return false
     }
-
     return true
   }
 
@@ -186,6 +196,7 @@ export function useViewData(
         }
       }
       formattedData.value.splice(rowIndex, 1)
+      syncCount()
     } catch (e: any) {
       notification.error({
         message: 'Failed to delete row',
@@ -221,6 +232,7 @@ export function useViewData(
         })
       }
     }
+    syncCount()
   }
 
   return {
@@ -235,5 +247,6 @@ export function useViewData(
     deleteSelectedRows,
     updateOrSaveRow,
     selectedAllRecords,
+    syncCount,
   }
 }

From ed64d28faf34b6554ec4274e47d1ba7ca5c85f9a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 11:48:25 +0530
Subject: [PATCH 78/89] refactor/gui-v2-added-json

---
 packages/nc-gui-v2/components/cell/Json.vue   | 101 +++++++++++++++
 .../components/cell/JsonEditableCell.vue      | 119 ------------------
 .../nc-gui-v2/components/monaco/Editor.vue    |  68 +++++-----
 .../nc-gui-v2/components/smartsheet/Cell.vue  |   1 +
 .../nc-gui-v2/components/smartsheet/Grid.vue  |   1 -
 packages/nc-gui-v2/package-lock.json          |  19 +++
 packages/nc-gui-v2/package.json               |   1 +
 7 files changed, 159 insertions(+), 151 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/cell/Json.vue
 delete mode 100644 packages/nc-gui-v2/components/cell/JsonEditableCell.vue

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
new file mode 100644
index 0000000000..b4fb09e740
--- /dev/null
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { Modal as AModal } from 'ant-design-vue'
+import Editor from '~/components/monaco/Editor.vue'
+import FullScreenIcon from '~icons/cil/fullscreen'
+import FullScreenExitIcon from '~icons/cil/fullscreen-exit'
+import { inject, onMounted } from '#imports'
+import { EditModeInj } from '~/context'
+
+interface Props {
+  modelValue: any
+}
+
+interface Emits {
+  (event: 'update:modelValue', model: any): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+let editEnabled = $(inject(EditModeInj))
+
+let vModel = $(useVModel(props, 'modelValue', emits))
+
+let localValue = $ref({})
+let error = $ref<string | undefined>(undefined)
+let isExpanded = $ref(false)
+
+const onError = (e: any) => {
+  error = e
+}
+
+const clear = () => {
+  error = undefined
+  isExpanded = false
+  editEnabled = false
+
+  localValue = JSON.parse(vModel)
+}
+
+const onSave = () => {
+  vModel = JSON.stringify(localValue)
+  isExpanded = false
+}
+
+const resetError = () => {
+  error = undefined
+}
+
+onMounted(() => {
+  localValue = JSON.parse(vModel)
+})
+
+watch(
+  () => editEnabled,
+  () => {
+    isExpanded = false
+    localValue = JSON.parse(vModel)
+  },
+)
+</script>
+
+<template>
+  <component :is="isExpanded ? AModal : 'div'" v-model:visible="isExpanded" :closable="false" centered :footer="null">
+    <div v-if="editEnabled" class="flex flex-col w-full">
+      <div class="flex flex-row justify-between pt-1 pb-2">
+        <a-button type="text" size="small" @click="isExpanded = !isExpanded">
+          <FullScreenExitIcon v-if="isExpanded" class="h-2.5" />
+          <FullScreenIcon v-else class="h-2.5" />
+        </a-button>
+        <div class="flex flex-row">
+          <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
+          <a-button type="primary" size="small" :disabled="!!error"><div class="text-xs" :onclick="onSave">Save</div></a-button>
+        </div>
+      </div>
+      <Editor
+        :model-value="localValue"
+        class="min-w-full w-80"
+        :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
+        :hide-minimap="true"
+        @validation-error="onError"
+        @update:model-value="localValue = $event"
+        @value-changed="resetError"
+      />
+      <span v-if="error" class="text-xs w-full py-1 text-red-500">
+        {{ error?.toString() }}
+      </span>
+    </div>
+    <span v-else>{{ vModel }}</span>
+  </component>
+</template>
+
+<style scoped lang="scss">
+.expanded-editor {
+  min-height: min(600px, 80vh);
+}
+
+.editor {
+  min-height: min(200px, 10vh);
+}
+</style>
diff --git a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue b/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
deleted file mode 100644
index f92bd346ca..0000000000
--- a/packages/nc-gui-v2/components/cell/JsonEditableCell.vue
+++ /dev/null
@@ -1,119 +0,0 @@
-<script lang="ts" setup>
-import MonacoJsonObjectEditor from '@/components/monaco/Editor.vue'
-import { computed, inject } from '#imports'
-import { EditModeInj } from '~/context'
-
-interface Props {
-  modelValue: string | Record<string, any> | null
-  isForm: boolean
-}
-
-const props = defineProps<Props>()
-
-const emits = defineEmits(['update:modelValue', 'cancel'])
-
-const editEnabled = inject(EditModeInj)
-
-let expand = $ref(false)
-
-let isValid = $ref(true)
-
-let error = $ref()
-
-const vModel = computed({
-  get: () => (typeof props.modelValue === 'string' ? JSON.parse(props.modelValue) : props.modelValue),
-  set: (val) => {
-    if (props.isForm) {
-      emits('update:modelValue', JSON.stringify(val))
-    }
-  },
-})
-
-function save() {
-  expand = false
-  emits('update:modelValue', JSON.stringify(vModel.value))
-}
-
-function validate(n: boolean, e: any) {
-  isValid = n
-  error = e
-}
-</script>
-
-<script lang="ts">
-export default {
-  name: 'JsonEditableCell',
-}
-</script>
-
-<template>
-  <v-dialog :is="expand ? 'v-dialog' : 'div'" v-model="expand" max-width="800px" class="cell-container" @keydown.stop.enter>
-    <div class="d-flex pa-1" :class="{ backgroundColor: expand }">
-      <v-spacer />
-      <v-icon small class="mr-2" @click="expand = !expand">
-        {{ expand ? 'mdi-arrow-collapse' : 'mdi-arrow-expand' }}
-      </v-icon>
-      <template v-if="!isForm">
-        <v-btn outlined x-small class="mr-1" @click="$emit('cancel')">
-          <!-- Cancel -->
-          {{ $t('general.cancel') }}
-        </v-btn>
-        <v-btn x-small color="primary" :disabled="!isValid" @click="save">
-          <!-- Save -->
-          {{ $t('general.save') }}
-        </v-btn>
-      </template>
-      <v-btn v-else-if="expand" x-small @click="expand = false">
-        <!-- Close -->
-        {{ $t('general.close') }}
-      </v-btn>
-    </div>
-    <MonacoJsonObjectEditor
-      v-if="expand"
-      v-model="vModel"
-      class="text-left caption"
-      style="width: 300px; min-height: min(600px, 80vh); min-width: 100%"
-      @validate="validate"
-    />
-    <MonacoJsonObjectEditor
-      v-else
-      v-model="vModel"
-      class="text-left caption"
-      style="width: 300px; min-height: 200px; min-width: 100%"
-      @validate="validate"
-    />
-    <div v-show="error" class="px-2 py-1 text-left caption error--text">
-      {{ error }}
-    </div>
-  </v-dialog>
-</template>
-
-<style scoped>
-.cell-container {
-  width: 100%;
-}
-</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/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index 371b466590..a833718c64 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -7,14 +7,22 @@ import { onMounted } from '#imports'
 import { deepCompare } from '~/utils'
 
 interface Props {
-  modelValue: string
-  lang?: string
-  validate?: boolean
+  modelValue: any
+  hideMinimap?: boolean
 }
 
-const { modelValue, lang = 'json', validate = true } = defineProps<Props>()
+interface Emits {
+  (event: 'update:modelValue', model: any): void
+  (event: 'validationError', error: any): void
+  (event: 'valueChanged'): void
+}
+
+const props = defineProps<Props>()
+const emits = defineEmits<Emits>()
+
+const { hideMinimap } = props
 
-const emit = defineEmits(['update:modelValue'])
+let vModel = $(useVModel(props, 'modelValue', emits))
 
 const isValid = ref(true)
 
@@ -48,14 +56,13 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (root.value && lang) {
-    const model = monaco.editor.createModel(JSON.stringify(modelValue, null, 2), lang)
-    if (lang === 'json') {
-      // configure the JSON language support with schemas and schema associations
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-        validate: validate as boolean,
-      })
-    }
+  if (root.value) {
+    const model = monaco.editor.createModel(JSON.stringify(vModel, null, 2), 'json')
+
+    // configure the JSON language support with schemas and schema associations
+    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+    })
 
     editor = monaco.editor.create(root.value, {
       model,
@@ -68,22 +75,20 @@ onMounted(() => {
       },
       tabSize: 2,
       automaticLayout: true,
+      minimap: {
+        enabled: !hideMinimap,
+      },
     })
 
     editor.onDidChangeModelContent(async (e) => {
       try {
         isValid.value = true
-
-        const value = editor?.getValue()
-        if (typeof modelValue === 'object') {
-          if (!value || !deepCompare(modelValue, JSON.parse(value))) {
-            emit('update:modelValue', JSON.stringify(modelValue, null, 2))
-          }
-        } else {
-          if (value !== modelValue) emit('update:modelValue', value)
-        }
+        const obj = JSON.parse(editor.getValue())
+        emits('valueChanged')
+        if (!deepCompare(vModel, obj)) vModel = obj
       } catch (e) {
         isValid.value = false
+        emits('validationError', e)
         console.log(e)
       }
     })
@@ -91,17 +96,18 @@ onMounted(() => {
 })
 
 watch(
-  () => modelValue,
+  () => vModel,
   (v) => {
-    if (editor && v) {
-      const value = editor?.getValue()
-      if (typeof v === 'object') {
-        if (!value || !deepCompare(v, JSON.parse(value))) {
-          editor.setValue(JSON.stringify(v, null, 2))
-        }
-      } else {
-        if (value !== v) editor.setValue(v)
+    if (!editor || !v) {
+      return
+    }
+
+    try {
+      if (!deepCompare(v, JSON.parse(editor?.getValue() as string))) {
+        editor.setValue(JSON.stringify(v, null, 2))
       }
+    } catch (e) {
+      editor.setValue(JSON.stringify(v, null, 2))
     }
   },
 )
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 42d7b28f35..9f7793761a 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -130,6 +130,7 @@ const syncAndNavigate = (dir: NavigateDir) => {
     <CellFloat v-else-if="isFloat" v-model="vModel" />
     <CellText v-else-if="isString" v-model="vModel" />
     <CellPercent v-else-if="isPercent" v-model="vModel" />
+    <CellJson v-else-if="isJSON" v-model="vModel" />
     <CellText v-else v-model="vModel" />
   </div>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet/Grid.vue b/packages/nc-gui-v2/components/smartsheet/Grid.vue
index 542e0b8bd9..6a060b1d17 100644
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Grid.vue
@@ -420,7 +420,6 @@ const onNavigate = (dir: NavigateDir) => {
 
   td {
     text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   td.active::after,
diff --git a/packages/nc-gui-v2/package-lock.json b/packages/nc-gui-v2/package-lock.json
index eab7b55eac..0588364b3a 100644
--- a/packages/nc-gui-v2/package-lock.json
+++ b/packages/nc-gui-v2/package-lock.json
@@ -28,6 +28,7 @@
       },
       "devDependencies": {
         "@antfu/eslint-config": "^0.25.2",
+        "@iconify-json/cil": "^1.1.2",
         "@iconify-json/clarity": "^1.1.4",
         "@iconify-json/eva": "^1.1.2",
         "@iconify-json/ic": "^1.1.7",
@@ -990,6 +991,15 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@iconify-json/cil": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
+      "integrity": "sha512-fu9x1f+A2H5qGWnApU1aw0EREAKqg5EP2Z6cWHV11XchlKgzY+jWQCalctkV+Jsef2M2m3C2DX/ukgyhMclIcw==",
+      "dev": true,
+      "dependencies": {
+        "@iconify/types": "*"
+      }
+    },
     "node_modules/@iconify-json/clarity": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/clarity/-/clarity-1.1.4.tgz",
@@ -15502,6 +15512,15 @@
       "dev": true,
       "peer": true
     },
+    "@iconify-json/cil": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@iconify-json/cil/-/cil-1.1.2.tgz",
+      "integrity": "sha512-fu9x1f+A2H5qGWnApU1aw0EREAKqg5EP2Z6cWHV11XchlKgzY+jWQCalctkV+Jsef2M2m3C2DX/ukgyhMclIcw==",
+      "dev": true,
+      "requires": {
+        "@iconify/types": "*"
+      }
+    },
     "@iconify-json/clarity": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@iconify-json/clarity/-/clarity-1.1.4.tgz",
diff --git a/packages/nc-gui-v2/package.json b/packages/nc-gui-v2/package.json
index a03599eec8..5fa76f2658 100644
--- a/packages/nc-gui-v2/package.json
+++ b/packages/nc-gui-v2/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@antfu/eslint-config": "^0.25.2",
+    "@iconify-json/cil": "^1.1.2",
     "@iconify-json/clarity": "^1.1.4",
     "@iconify-json/eva": "^1.1.2",
     "@iconify-json/ic": "^1.1.7",

From 3a51d80ed2ca74ad0865dacb9739a045ab4c5c62 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 12:07:24 +0530
Subject: [PATCH 79/89] chore/gui-v2-json-minor-cleanup

---
 packages/nc-gui-v2/components/cell/Json.vue     | 4 ++--
 packages/nc-gui-v2/components/monaco/Editor.vue | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index b4fb09e740..fad7d4248e 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -80,10 +80,10 @@ watch(
         :hide-minimap="true"
         @validation-error="onError"
         @update:model-value="localValue = $event"
-        @value-changed="resetError"
+        @text-changed="resetError"
       />
       <span v-if="error" class="text-xs w-full py-1 text-red-500">
-        {{ error?.toString() }}
+        {{ error.toString() }}
       </span>
     </div>
     <span v-else>{{ vModel }}</span>
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index a833718c64..bbf99fabbb 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -14,7 +14,7 @@ interface Props {
 interface Emits {
   (event: 'update:modelValue', model: any): void
   (event: 'validationError', error: any): void
-  (event: 'valueChanged'): void
+  (event: 'textChanged'): void
 }
 
 const props = defineProps<Props>()
@@ -84,7 +84,7 @@ onMounted(() => {
       try {
         isValid.value = true
         const obj = JSON.parse(editor.getValue())
-        emits('valueChanged')
+        emits('textChanged')
         if (!deepCompare(vModel, obj)) vModel = obj
       } catch (e) {
         isValid.value = false
@@ -107,6 +107,7 @@ watch(
         editor.setValue(JSON.stringify(v, null, 2))
       }
     } catch (e) {
+      console.log(e)
       editor.setValue(JSON.stringify(v, null, 2))
     }
   },

From 8b08f8ac8713d47ad248da7038cd8303c37b9057 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 15:14:38 +0530
Subject: [PATCH 80/89] refactor/refactored-editor-and-integrated-to-json-cell

---
 packages/nc-gui-v2/components/cell/Json.vue   | 41 ++++++----
 .../nc-gui-v2/components/monaco/Editor.vue    | 82 +++++++++++--------
 2 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index fad7d4248e..17b64deea7 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -7,11 +7,11 @@ import { inject, onMounted } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: any
+  modelValue: string
 }
 
 interface Emits {
-  (event: 'update:modelValue', model: any): void
+  (event: 'update:modelValue', model: string): void
 }
 
 const props = defineProps<Props>()
@@ -22,40 +22,44 @@ let editEnabled = $(inject(EditModeInj))
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
-let localValue = $ref({})
+let localValue = $ref<string>('{}')
 let error = $ref<string | undefined>(undefined)
 let isExpanded = $ref(false)
 
-const onError = (e: any) => {
-  error = e
-}
-
 const clear = () => {
   error = undefined
   isExpanded = false
   editEnabled = false
 
-  localValue = JSON.parse(vModel)
+  localValue = vModel
 }
 
 const onSave = () => {
-  vModel = JSON.stringify(localValue)
+  vModel = localValue
   isExpanded = false
 }
 
-const resetError = () => {
-  error = undefined
-}
-
 onMounted(() => {
-  localValue = JSON.parse(vModel)
+  localValue = vModel
 })
 
+watch(
+  () => localValue,
+  (val) => {
+    try {
+      JSON.parse(val)
+      error = undefined
+    } catch (e: any) {
+      error = e
+    }
+  },
+)
+
 watch(
   () => editEnabled,
   () => {
     isExpanded = false
-    localValue = JSON.parse(vModel)
+    localValue = vModel
   },
 )
 </script>
@@ -70,7 +74,9 @@ watch(
         </a-button>
         <div class="flex flex-row">
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
-          <a-button type="primary" size="small" :disabled="!!error"><div class="text-xs" :onclick="onSave">Save</div></a-button>
+          <a-button type="primary" size="small" :disabled="!!error || localValue === vModel"
+            ><div class="text-xs" :onclick="onSave">Save</div></a-button
+          >
         </div>
       </div>
       <Editor
@@ -78,9 +84,8 @@ watch(
         class="min-w-full w-80"
         :class="{ 'expanded-editor': isExpanded, 'editor': !isExpanded }"
         :hide-minimap="true"
-        @validation-error="onError"
+        :disable-deep-compare="true"
         @update:model-value="localValue = $event"
-        @text-changed="resetError"
       />
       <span v-if="error" class="text-xs w-full py-1 text-red-500">
         {{ error.toString() }}
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index bbf99fabbb..d6c5a912e8 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -7,22 +7,37 @@ import { onMounted } from '#imports'
 import { deepCompare } from '~/utils'
 
 interface Props {
-  modelValue: any
+  modelValue: string | Record<string, any>
   hideMinimap?: boolean
+  lang?: string
+  validate?: boolean
+  disableDeepCompare?: boolean
 }
 
-interface Emits {
-  (event: 'update:modelValue', model: any): void
-  (event: 'validationError', error: any): void
-  (event: 'textChanged'): void
-}
-
-const props = defineProps<Props>()
-const emits = defineEmits<Emits>()
+const { hideMinimap, lang = 'json', validate = true, disableDeepCompare = false, modelValue } = defineProps<Props>()
 
-const { hideMinimap } = props
+const emits = defineEmits(['update:modelValue'])
 
-let vModel = $(useVModel(props, 'modelValue', emits))
+let vModel = $computed<string>({
+  get: () => {
+    if (typeof modelValue === 'object') {
+      return JSON.stringify(modelValue, null, 2)
+    } else {
+      return modelValue
+    }
+  },
+  set: (newVal: string | Record<string, any>) => {
+    if (typeof modelValue === 'object') {
+      try {
+        emits('update:modelValue', typeof newVal === 'object' ? newVal : JSON.parse(newVal))
+      } catch (e) {
+        console.error(e)
+      }
+    } else {
+      emits('update:modelValue', newVal)
+    }
+  },
+})
 
 const isValid = ref(true)
 
@@ -56,13 +71,15 @@ defineExpose({
 })
 
 onMounted(() => {
-  if (root.value) {
-    const model = monaco.editor.createModel(JSON.stringify(vModel, null, 2), 'json')
-
-    // configure the JSON language support with schemas and schema associations
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: true,
-    })
+  if (root.value && lang) {
+    const model = monaco.editor.createModel(vModel, lang)
+
+    if (lang === 'json') {
+      // configure the JSON language support with schemas and schema associations
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: validate as boolean,
+      })
+    }
 
     editor = monaco.editor.create(root.value, {
       model,
@@ -80,15 +97,18 @@ onMounted(() => {
       },
     })
 
-    editor.onDidChangeModelContent(async (e) => {
+    editor.onDidChangeModelContent(async () => {
       try {
         isValid.value = true
-        const obj = JSON.parse(editor.getValue())
-        emits('textChanged')
-        if (!deepCompare(vModel, obj)) vModel = obj
+
+        if (disableDeepCompare) {
+          vModel = editor.getValue()
+        } else {
+          const obj = JSON.parse(editor.getValue())
+          if (!obj || !deepCompare(vModel, obj)) vModel = obj
+        }
       } catch (e) {
         isValid.value = false
-        emits('validationError', e)
         console.log(e)
       }
     })
@@ -98,17 +118,15 @@ onMounted(() => {
 watch(
   () => vModel,
   (v) => {
-    if (!editor || !v) {
-      return
-    }
+    if (!editor || !v) return
 
-    try {
-      if (!deepCompare(v, JSON.parse(editor?.getValue() as string))) {
-        editor.setValue(JSON.stringify(v, null, 2))
+    const editorValue = editor?.getValue()
+    if (!disableDeepCompare) {
+      if (!editorValue || !deepCompare(JSON.parse(v), JSON.parse(editorValue))) {
+        editor.setValue(v)
       }
-    } catch (e) {
-      console.log(e)
-      editor.setValue(JSON.stringify(v, null, 2))
+    } else {
+      if (editorValue !== v) editor.setValue(v)
     }
   },
 )

From 0640e1f594c02d0d1797d0b0c5013130e21947a2 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 21:28:50 +0530
Subject: [PATCH 81/89] fix/gui-v2-json-bug-fix

---
 packages/nc-gui-v2/components/cell/Json.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 17b64deea7..d9f48dba69 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -7,7 +7,7 @@ import { inject, onMounted } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
-  modelValue: string
+  modelValue: string | Record<string, any> | undefined
 }
 
 interface Emits {
@@ -31,16 +31,17 @@ const clear = () => {
   isExpanded = false
   editEnabled = false
 
-  localValue = vModel
+  localValue = JSON.stringify(vModel)
 }
 
 const onSave = () => {
-  vModel = localValue
   isExpanded = false
+  vModel = localValue
 }
 
 onMounted(() => {
-  localValue = vModel
+  console.log('mount', vModel)
+  localValue = JSON.stringify(vModel)
 })
 
 watch(
@@ -59,7 +60,7 @@ watch(
   () => editEnabled,
   () => {
     isExpanded = false
-    localValue = vModel
+    localValue = JSON.stringify(vModel)
   },
 )
 </script>

From a9942d431fdc64b60db7976cc82bc71fc4cb826a Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Tue, 2 Aug 2022 21:31:51 +0530
Subject: [PATCH 82/89] fix/gui-v2-json-bug-fix

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

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index d9f48dba69..776c398777 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -40,10 +40,16 @@ const onSave = () => {
 }
 
 onMounted(() => {
-  console.log('mount', vModel)
   localValue = JSON.stringify(vModel)
 })
 
+watch(
+  () => vModel,
+  (val) => {
+    localValue = JSON.stringify(val)
+  },
+)
+
 watch(
   () => localValue,
   (val) => {

From f35d7888eba5cc85a3e64e153c1f5b4dec5347e6 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 11:47:23 +0530
Subject: [PATCH 83/89] fix/gui-v2-json-bug-fix

---
 packages/nc-gui-v2/components/cell/Json.vue | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 776c398777..ea8d2d1f87 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -22,7 +22,16 @@ let editEnabled = $(inject(EditModeInj))
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
-let localValue = $ref<string>('{}')
+let localValueState = $ref<string | undefined>(undefined)
+let localValue = $(
+  computed<string | undefined>({
+    get: () => localValueState,
+    set: (val: undefined | string | Record<string, any>) => {
+      localValueState = typeof val === 'object' ? JSON.stringify(val) : val
+    },
+  }),
+)
+
 let error = $ref<string | undefined>(undefined)
 let isExpanded = $ref(false)
 
@@ -31,7 +40,7 @@ const clear = () => {
   isExpanded = false
   editEnabled = false
 
-  localValue = JSON.stringify(vModel)
+  localValue = vModel
 }
 
 const onSave = () => {
@@ -40,13 +49,13 @@ const onSave = () => {
 }
 
 onMounted(() => {
-  localValue = JSON.stringify(vModel)
+  localValue = vModel
 })
 
 watch(
   () => vModel,
   (val) => {
-    localValue = JSON.stringify(val)
+    localValue = val
   },
 )
 
@@ -66,7 +75,7 @@ watch(
   () => editEnabled,
   () => {
     isExpanded = false
-    localValue = JSON.stringify(vModel)
+    localValue = vModel
   },
 )
 </script>

From 084e626d00ca64eb060dc7b9c1634a2da0184e08 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 3 Aug 2022 20:53:06 +0530
Subject: [PATCH 84/89] fix/gui-v2-json-cell-rebase-issue-minor-fix

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

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index ea8d2d1f87..612c8151ab 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -18,7 +18,7 @@ const props = defineProps<Props>()
 
 const emits = defineEmits<Emits>()
 
-let editEnabled = $(inject(EditModeInj))
+const editEnabled = inject(EditModeInj, ref(false))
 
 let vModel = $(useVModel(props, 'modelValue', emits))
 
@@ -38,7 +38,7 @@ let isExpanded = $ref(false)
 const clear = () => {
   error = undefined
   isExpanded = false
-  editEnabled = false
+  editEnabled.value = false
 
   localValue = vModel
 }

From dfcd7b693a98bbaed9c128d7720b83cd7d08c6d8 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Thu, 4 Aug 2022 16:53:12 +0530
Subject: [PATCH 85/89] chore/added disabling edit mode after saving in json
 cell

---
 packages/nc-gui-v2/components/cell/Json.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 612c8151ab..523c88b03c 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -45,6 +45,7 @@ const clear = () => {
 
 const onSave = () => {
   isExpanded = false
+  editEnabled.value = false
   vModel = localValue
 }
 

From ad7358ccdfaf8e46484e187d935feeda78951d92 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 5 Aug 2022 10:42:59 +0530
Subject: [PATCH 86/89] chore/removed enter to save for json cells and added
 formatting after save

---
 packages/nc-gui-v2/components/cell/Json.vue       | 11 ++++++++++-
 packages/nc-gui-v2/components/smartsheet/Cell.vue |  2 ++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 523c88b03c..3168185ce6 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -27,7 +27,7 @@ let localValue = $(
   computed<string | undefined>({
     get: () => localValueState,
     set: (val: undefined | string | Record<string, any>) => {
-      localValueState = typeof val === 'object' ? JSON.stringify(val) : val
+      localValueState = typeof val === 'object' ? JSON.stringify(val, null, 2) : val
     },
   }),
 )
@@ -43,9 +43,18 @@ const clear = () => {
   localValue = vModel
 }
 
+const formatJson = (json: string) => {
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2)
+  } catch (e) {
+    return json
+  }
+}
+
 const onSave = () => {
   isExpanded = false
   editEnabled.value = false
+  localValue = localValue ? formatJson(localValue) : localValue
   vModel = localValue
 }
 
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index 9f7793761a..76fd005ab4 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -92,6 +92,8 @@ const {
 } = useColumn(column)
 
 const syncAndNavigate = (dir: NavigateDir) => {
+  if (isJSON) return
+
   if (changed) {
     emit('save')
     changed = false

From 7899ee1bfeec87a1c0d538ae6b449f684e837e9d Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 16:00:15 +0530
Subject: [PATCH 87/89] fix/removed unnecassry onmount and getter function in
 watchers

---
 packages/nc-gui-v2/components/cell/Json.vue   | 39 +++++++------------
 .../nc-gui-v2/components/monaco/Editor.vue    | 25 ++++++------
 2 files changed, 26 insertions(+), 38 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index 3168185ce6..fb840fdcbb 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -3,7 +3,7 @@ import { Modal as AModal } from 'ant-design-vue'
 import Editor from '~/components/monaco/Editor.vue'
 import FullScreenIcon from '~icons/cil/fullscreen'
 import FullScreenExitIcon from '~icons/cil/fullscreen-exit'
-import { inject, onMounted } from '#imports'
+import { inject } from '#imports'
 import { EditModeInj } from '~/context'
 
 interface Props {
@@ -58,36 +58,27 @@ const onSave = () => {
   vModel = localValue
 }
 
-onMounted(() => {
-  localValue = vModel
-})
-
 watch(
-  () => vModel,
+  $$(vModel),
   (val) => {
     localValue = val
   },
+  { immediate: true },
 )
 
-watch(
-  () => localValue,
-  (val) => {
-    try {
-      JSON.parse(val)
-      error = undefined
-    } catch (e: any) {
-      error = e
-    }
-  },
-)
+watch($$(localValue), (val) => {
+  try {
+    JSON.parse(val)
+    error = undefined
+  } catch (e: any) {
+    error = e
+  }
+})
 
-watch(
-  () => editEnabled,
-  () => {
-    isExpanded = false
-    localValue = vModel
-  },
-)
+watch(editEnabled, () => {
+  isExpanded = false
+  localValue = vModel
+})
 </script>
 
 <template>
diff --git a/packages/nc-gui-v2/components/monaco/Editor.vue b/packages/nc-gui-v2/components/monaco/Editor.vue
index d6c5a912e8..ac8c0c0641 100644
--- a/packages/nc-gui-v2/components/monaco/Editor.vue
+++ b/packages/nc-gui-v2/components/monaco/Editor.vue
@@ -115,21 +115,18 @@ onMounted(() => {
   }
 })
 
-watch(
-  () => vModel,
-  (v) => {
-    if (!editor || !v) return
-
-    const editorValue = editor?.getValue()
-    if (!disableDeepCompare) {
-      if (!editorValue || !deepCompare(JSON.parse(v), JSON.parse(editorValue))) {
-        editor.setValue(v)
-      }
-    } else {
-      if (editorValue !== v) editor.setValue(v)
+watch($$(vModel), (v) => {
+  if (!editor || !v) return
+
+  const editorValue = editor?.getValue()
+  if (!disableDeepCompare) {
+    if (!editorValue || !deepCompare(JSON.parse(v), JSON.parse(editorValue))) {
+      editor.setValue(v)
     }
-  },
-)
+  } else {
+    if (editorValue !== v) editor.setValue(v)
+  }
+})
 </script>
 
 <template>

From 14dfa3ac7255ca270473662e49b68ab45c77a57e Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Mon, 8 Aug 2022 16:01:13 +0530
Subject: [PATCH 88/89] fix/formatting fix

---
 packages/nc-gui-v2/components/cell/Json.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Json.vue b/packages/nc-gui-v2/components/cell/Json.vue
index fb840fdcbb..cf98c46c49 100644
--- a/packages/nc-gui-v2/components/cell/Json.vue
+++ b/packages/nc-gui-v2/components/cell/Json.vue
@@ -91,9 +91,9 @@ watch(editEnabled, () => {
         </a-button>
         <div class="flex flex-row">
           <a-button type="text" size="small" :onclick="clear"><div class="text-xs">Cancel</div></a-button>
-          <a-button type="primary" size="small" :disabled="!!error || localValue === vModel"
-            ><div class="text-xs" :onclick="onSave">Save</div></a-button
-          >
+          <a-button type="primary" size="small" :disabled="!!error || localValue === vModel">
+            <div class="text-xs" :onclick="onSave">Save</div>
+          </a-button>
         </div>
       </div>
       <Editor

From dcc210e3ac03c09845fac797ba55f72f441ace56 Mon Sep 17 00:00:00 2001
From: Pranav C <pranavxc@gmail.com>
Date: Mon, 8 Aug 2022 16:12:00 +0530
Subject: [PATCH 89/89] fix(gui-v2): show expand/add icon even if cell is empty

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

diff --git a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
index e2dcae0d5a..54acdc9264 100644
--- a/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue
@@ -30,7 +30,7 @@ await loadRelatedTableMeta()
         <ItemChip :item="cellValue" :value="cellValue[relatedTablePrimaryValueProp]" @unlink="unlink(cellValue || localState)" />
       </template>
     </div>
-    <div class="flex-1 flex justify-end gap-1">
+    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <MdiExpandIcon
         class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 select-none group-hover:(text-gray-500)"
         @click="listItemsDlg = true"
diff --git a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
index c453834e55..151a9d374a 100644
--- a/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/HasMany.vue
@@ -26,14 +26,14 @@ await loadRelatedTableMeta()
 </script>
 
 <template>
-  <div class="flex align-center gap-1 w-full min-full chips-wrapper">
+  <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">
       <template v-if="cellValue">
         <ItemChip v-for="(ch, i) in cellValue" :key="i" :value="ch[relatedTablePrimaryValueProp]" @unlink="unlink(ch)" />
         <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">
+    <div class="flex-grow flex justify-end gap-1 min-h-[30px] align-center">
       <MdiExpandIcon
         class="select-none transform text-sm nc-action-icon text-gray-500/50 hover:text-gray-500"
         @click="childListDlg = true"
diff --git a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
index af82ed0f65..a08a3c80d9 100644
--- a/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
+++ b/packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue
@@ -36,7 +36,7 @@ await loadRelatedTableMeta()
         <span v-if="cellValue?.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">
+    <div class="flex-1 flex justify-end gap-1 min-h-[30px] align-center">
       <MdiExpandIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="childListDlg = true" />
       <MdiPlusIcon class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500" @click="listItemsDlg = true" />
     </div>