extract 'show/clear not possible for non-editable columns' logic out into composable

packages/nc-gui/components/virtual-cell/Formula.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
-import { CellValueInj, ColumnInj, computed, handleTZ, inject, ref, refAutoReset, replaceUrlsWithLink, useProject } from '#imports'
+import { CellValueInj, ColumnInj, computed, handleTZ, inject, replaceUrlsWithLink, useProject } from '#imports'
 
 // todo: column type doesn't have required property `error` - throws in typecheck
 const column = inject(ColumnInj) as Ref<ColumnType & { colOptions: { error: any } }>
@@ -14,21 +14,7 @@ const result = computed(() => (isPg.value ? handleTZ(cellValue?.value) : cellVal
 
 const urls = computed(() => replaceUrlsWithLink(result.value))
 
-const timeout = 3000 // in ms
-
-const showEditFormulaWarning = refAutoReset(false, timeout)
-const showClearFormulaWarning = refAutoReset(false, timeout)
-
-useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
-  switch (e.key) {
-    case 'Enter':
-      showEditFormulaWarning.value = true
-      break
-    case 'Delete':
-      showClearFormulaWarning.value = true
-      break
-  }
-})
+const { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning } = useShowNotEditableWarning()
 </script>
 
 <template>
@@ -41,16 +27,16 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
       <span>ERR!</span>
     </a-tooltip>
 
-    <div class="p-2" @dblclick="showEditFormulaWarning = true">
+    <div class="p-2" @dblclick="activateShowEditNonEditableFieldWarning">
       <div v-if="urls" v-html="urls" />
 
       <div v-else>{{ result }}</div>
 
-      <div v-if="showEditFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+      <div v-if="showEditNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
         <!-- TODO: i18n -->
         Warning: Formula fields should be configured in the field menu dropdown.
       </div>
-      <div v-if="showClearFormulaWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+      <div v-if="showClearNonEditableFieldWarning" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
         <!-- TODO: i18n -->
         Warning: Computed field - unable to clear text.
       </div>

packages/nc-gui/composables/useShowNotEditableWarning.ts

@@ -0,0 +1,27 @@
+// import type { Ref } from 'vue'
+// import type { ViewType } from 'nocodb-sdk'
+
+const timeout = 3000 // in ms
+
+// export default function useShowNotEditableWarning(view: Ref<ViewType | undefined>) {
+export default function useShowNotEditableWarning() {
+  //   console.log(view)
+
+  const showEditNonEditableFieldWarning = refAutoReset(false, timeout)
+  const showClearNonEditableFieldWarning = refAutoReset(false, timeout)
+
+  const activateShowEditNonEditableFieldWarning = () => (showEditNonEditableFieldWarning.value = true)
+
+  useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+        showEditNonEditableFieldWarning.value = true
+        break
+      case 'Delete':
+        showClearNonEditableFieldWarning.value = true
+        break
+    }
+  })
+
+  return { showEditNonEditableFieldWarning, showClearNonEditableFieldWarning, activateShowEditNonEditableFieldWarning }
+}