From bc8dee2c604a4264da8f9bfcad4fc46e20913f44 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Thu, 19 May 2022 13:21:50 +0800
Subject: [PATCH] feat: add information message when editing formula cell

---
 .../components/virtualCell/FormulaCell.vue    | 57 ++++++++++++++-----
 1 file changed, 43 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue
index 25f9db470d..4a217ffd4d 100644
--- a/packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue
+++ b/packages/nc-gui/components/project/spreadsheet/components/virtualCell/FormulaCell.vue
@@ -1,17 +1,29 @@
 <template>
-  <v-tooltip
-    v-if="column && column.colOptions&& column.colOptions.error"
-    bottom
-    color="error"
-  >
-    <template #activator="{on}">
-      <span class="caption" v-on="on">ERR<span class="error--text">!</span></span>
-    </template>
-    <span class=" font-weight-bold">{{ column.colOptions.error }}</span>
-  </v-tooltip>
-  <div v-else-if="urls" v-html="urls" />
-  <div v-else>
-    {{ result }}
+  <div>
+    <v-tooltip
+      v-if="
+        column
+          &&
+          column.colOptions&&
+          column.colOptions.error"
+      bottom
+      color="error"
+    >
+      <template #activator="{on}">
+        <span class="caption" v-on="on">ERR<span class="error--text">!</span></span>
+      </template>
+      <span class=" font-weight-bold">{{ column.colOptions.error }}</span>
+    </v-tooltip>
+    <div class="formula-cell-wrapper" @dblclick="showEditFormulaWarningMessage">
+      <div v-if="urls" v-html="urls" />
+      <div v-else>
+        {{ result }}
+      </div>
+      <div v-if="showEditFormulaWarning == true" class="edit-warning">
+        <!-- TODO: i18n -->
+        Warning: Formula fields should be configured in the field menu dropdown.
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,6 +33,9 @@ import dayjs from 'dayjs'
 export default {
   name: 'FormulaCell',
   props: { column: Object, row: Object, client: String },
+  data: () => ({
+    showEditFormulaWarning: false
+  }),
   computed: {
     result() {
       if (this.client === 'pg') {
@@ -53,11 +68,25 @@ export default {
       return val.replace(/((?:-?(?:[1-9][0-9]*)?[0-9]{4})-(?:1[0-2]|0[1-9])-(?:3[01]|0[1-9]|[12][0-9])T(?:2[0-3]|[01][0-9]):(?:[0-5][0-9]):(?:[0-5][0-9])(?:\.[0-9]+)?(?:Z|[+-](?:2[0-3]|[01][0-9]):[0-5][0-9]))/g, (i, v) => {
         return dayjs(v).format('YYYY-MM-DD HH:mm')
       })
+    },
+    showEditFormulaWarningMessage() {
+      this.showEditFormulaWarning = true
+      setTimeout(() => {
+        this.showEditFormulaWarning = false
+      }, 3000)
     }
   }
 }
 </script>
 
-<style scoped>/**/
+<style scoped>
+  .formula-cell-wrapper {
+    padding: 10px;
+  }
 
+  .edit-warning {
+    text-align: left;
+    margin-top: 10px;
+    color: #E65100;
+  }
 </style>