From 8205d2915e5d54d7e7d6e8d7d41ea0a8d7039ab6 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 30 Jul 2022 18:31:35 +0800
Subject: [PATCH] feat(gui-v2): email cell

---
 packages/nc-gui-v2/components/cell/Email.vue  | 27 +++++++++++++++----
 .../components/smartsheet-header/CellIcon.vue |  3 +++
 .../nc-gui-v2/components/smartsheet/Cell.vue  |  2 +-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui-v2/components/cell/Email.vue b/packages/nc-gui-v2/components/cell/Email.vue
index 6c1e985ca7..7c8f3217c7 100644
--- a/packages/nc-gui-v2/components/cell/Email.vue
+++ b/packages/nc-gui-v2/components/cell/Email.vue
@@ -1,15 +1,24 @@
 <script lang="ts" setup>
 import { computed } from '#imports'
-
 import { isEmail } from '~/utils/validation'
 
+const { modelValue: value } = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const editEnabled = inject<boolean>('editEnabled')
+
 interface Props {
   modelValue: string
 }
 
-const { modelValue } = defineProps<Props>()
+const root = ref<HTMLInputElement>()
+const localState = computed({
+  get: () => value,
+  set: (val) => emit('update:modelValue', val),
+})
 
-const validEmail = computed(() => isEmail(modelValue))
+const validEmail = computed(() => isEmail(value))
 </script>
 
 <script lang="ts">
@@ -19,6 +28,14 @@ export default {
 </script>
 
 <template>
-  <a v-if="validEmail" :href="`mailto:${modelValue}`" target="_blank">{{ modelValue }}</a>
-  <span v-else>{{ modelValue }}</span>
+  <input v-if="editEnabled" ref="root" v-model="localState" />
+  <a
+    v-else-if="validEmail"
+    class="caption py-2 text-primary underline hover:opacity-75"
+    :href="`mailto:${value}`"
+    target="_blank"
+  >
+    {{ value }}
+  </a>
+  <span v-else>{{ value }}</span>
 </template>
diff --git a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
index 4984f141f9..c495ba9239 100644
--- a/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
+++ b/packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue
@@ -16,6 +16,7 @@ import RatingIcon from '~icons/mdi/star'
 import GenericIcon from '~icons/mdi/square-rounded'
 import AttachmentIcon from '~icons/mdi/image-multiple-outline'
 import URLIcon from '~icons/mdi/link'
+import EmailIcon from '~icons/mdi/email'
 
 const column = inject(ColumnInj)
 
@@ -38,6 +39,8 @@ const icon = computed(() => {
     return BooleanIcon
   } else if (additionalColMeta.isTextArea) {
     return TextAreaIcon
+  } else if (additionalColMeta.isEmail) {
+    return EmailIcon
   } else if (additionalColMeta.isRating) {
     return RatingIcon
   } else if (additionalColMeta.isAttachment) {
diff --git a/packages/nc-gui-v2/components/smartsheet/Cell.vue b/packages/nc-gui-v2/components/smartsheet/Cell.vue
index c1b4bb7cbb..cf1052744d 100644
--- a/packages/nc-gui-v2/components/smartsheet/Cell.vue
+++ b/packages/nc-gui-v2/components/smartsheet/Cell.vue
@@ -52,7 +52,6 @@ const {
 todo :
  JSONCell
  Currency
- Email
 -->
 
     <!--    <RatingCell -->
@@ -193,6 +192,7 @@ todo :
           v-on="$listeners"
         /> -->
     <CellDuration v-else-if="isDuration" v-model="localState" />
+    <CellEmail v-else-if="isEmail" v-model="localState" />
     <CellUrl v-else-if="isURL" v-model="localState" />
     <!-- v-on="parentListeners"
         />