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

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

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

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

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

diff --git a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
index 0acfc5732b..767f19491f 100644
--- a/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
+++ b/packages/nc-gui-v2/components/smartsheet-column/FormulaOptions.vue
@@ -101,6 +101,7 @@ const suggestionsList = computed(() => {
         text: c.title,
         type: 'column',
         icon: getUIDTIcon(c.uidt),
+        uidt: c.uidt,
       })),
     ...availableBinOps.map((op: string) => ({
       text: op,
@@ -613,7 +614,7 @@ onMounted(() => {
 <template>
   <div class="formula-wrapper">
     <a-form-item v-bind="validateInfos.formula_raw" label="Formula">
-      <a-input
+      <a-textarea
         ref="formulaRef"
         v-model:value="formState.formula_raw"
         class="mb-2"
@@ -623,21 +624,13 @@ onMounted(() => {
         @change="handleInputDeb"
       />
     </a-form-item>
-    <div class="text-gray-600 mt-2 prose-sm">
+    <div class="text-gray-600 mt-2 mb-4 prose-sm">
       Hint: Use {} to reference columns, e.g: {column_name}. For more, please check out
       <a class="prose-sm" href="https://docs.nocodb.com/setup-and-usages/formulas#available-formula-features" target="_blank"
         >Formulas</a
       >.
     </div>
-    <a-drawer
-      v-model:visible="formulaSuggestionDrawer"
-      :closable="false"
-      :mask="false"
-      :mask-closable="false"
-      placement="right"
-      width="500px"
-      class="h-full overflow-auto"
-    >
+    <div class="h-[250px] overflow-auto scrollbar-thin-primary">
       <a-list ref="sugListRef" :data-source="suggestion" :locale="{ emptyText: 'No suggested formula was found' }">
         <template #renderItem="{ item, index }">
           <a-list-item
@@ -650,23 +643,25 @@ onMounted(() => {
             @click.prevent.stop="appendText(item)"
           >
             <a-list-item-meta>
-              <template v-if="item.type === 'function'" #description>
-                {{ item.description }} <br /><br />
-                Syntax: <br />
-                {{ item.syntax }} <br /><br />
-                Examples: <br />
-                <div v-for="(example, idx) of item.examples" :key="idx">
-                  <div>({{ idx + 1 }}): {{ example }}</div>
-                </div>
-              </template>
               <template #title>
                 <div class="flex">
-                  <div class="flex-1">
-                    {{ item.text }}
-                  </div>
-                  <div class="">
-                    {{ getFormulaTypeName(item.type) }}
-                  </div>
+                  <a-col :span="6">
+                    <span class="prose-sm text-gray-600">{{ item.text }}</span>
+                  </a-col>
+                  <a-col :span="18">
+                    <div v-if="item.type === 'function'" class="text-xs text-gray-500">
+                      {{ item.description }} <br /><br />
+                      Syntax: <br />
+                      {{ item.syntax }} <br /><br />
+                      Examples: <br />
+                      <div v-for="(example, idx) of item.examples" :key="idx">
+                        <div>({{ idx + 1 }}): {{ example }}</div>
+                      </div>
+                    </div>
+                    <div v-if="item.type === 'column'" class="float-right mr-5 -mt-2">
+                      <a-badge-ribbon :text="item.uidt" />
+                    </div>
+                  </a-col>
                 </div>
               </template>
               <template #avatar>
@@ -678,6 +673,6 @@ onMounted(() => {
           </a-list-item>
         </template>
       </a-list>
-    </a-drawer>
+    </div>
   </div>
 </template>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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