Merge pull request #2971 from nocodb/refactor/gui-v2-improved-email-json-phonenumber-column

vue3: Improved email, json, phonenumber, url, year, time column

packages/nc-gui-v2/components/smartsheet-column/EditOrAdd.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { UITypes } from 'nocodb-sdk'
 import { computed, inject, useColumnCreateStoreOrThrow, useMetas, watchEffect } from '#imports'
 import { MetaInj } from '~/context'
 import { uiTypes } from '~/utils/columnUtils'
@@ -22,6 +23,8 @@ const {
   isEdit,
 } = useColumnCreateStoreOrThrow()
 
+const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
+
 const uiTypesOptions = computed<typeof uiTypes>(() => {
   return [
     ...uiTypes.filter((t) => !isEdit || !t.virtual),
@@ -94,6 +97,15 @@ watchEffect(() => {
         </div>
       </div>
       <div class="overflow-hidden" :class="advancedOptions ? 'h-min' : 'h-0'">
+        <a-checkbox
+          v-if="formState.meta && columnToValidate.includes(formState.uidt)"
+          v-model:checked="formState.meta.validate"
+          class="ml-1 mb-1"
+        >
+          <span class="text-xs text-gray-600">
+            {{ `Accept only valid ${formState.uidt}` }}
+          </span>
+        </a-checkbox>
         <SmartsheetColumnAdvancedOptions />
       </div>
       <a-form-item>

packages/nc-gui-v2/components/smartsheet-header/CellIcon.vue

@@ -5,10 +5,13 @@ import FilePhoneIcon from '~icons/mdi/file-phone'
 import { useColumn } from '#imports'
 import KeyIcon from '~icons/mdi/key-variant'
 import JSONIcon from '~icons/mdi/code-json'
+import ClockIcon from '~icons/mdi/clock-time-five'
 // import FKIcon from '~icons/mdi/link-variant'
+import WebIcon from '~icons/mdi/web'
 import TextAreaIcon from '~icons/mdi/card-text-outline'
 import StringIcon from '~icons/mdi/alpha-a-box-outline'
 import BooleanIcon from '~icons/mdi/check-box-outline'
+import YearIcon from '~icons/mdi/calendar'
 import SingleSelectIcon from '~icons/mdi/radiobox-marked'
 import MultiSelectIcon from '~icons/mdi/checkbox-multiple-marked'
 import DatetimeIcon from '~icons/mdi/calendar-clock'
@@ -17,7 +20,6 @@ import RatingIcon from '~icons/mdi/star'
 import GenericIcon from '~icons/mdi/square-rounded'
 import NumericIcon from '~icons/mdi/numeric'
 import AttachmentIcon from '~icons/mdi/image-multiple-outline'
-import URLIcon from '~icons/mdi/link'
 import EmailIcon from '~icons/mdi/email'
 import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline'
 import PercentIcon from '~icons/mdi/percent-outline'
@@ -48,6 +50,10 @@ const icon = computed(() => {
     return TextAreaIcon
   } else if (additionalColMeta.isEmail) {
     return EmailIcon
+  } else if (additionalColMeta.isYear) {
+    return YearIcon
+  } else if (additionalColMeta.isTime) {
+    return ClockIcon
   } else if (additionalColMeta.isRating) {
     return RatingIcon
   } else if (additionalColMeta.isAttachment) {
@@ -61,7 +67,7 @@ const icon = computed(() => {
   //   return FKIcon
   // }
   else if (additionalColMeta.isURL) {
-    return URLIcon
+    return WebIcon
   } else if (additionalColMeta.isCurrency) {
     return CurrencyIcon
   } else if (additionalColMeta.isPercent) {

packages/nc-gui-v2/utils/columnUtils.ts

@@ -3,6 +3,7 @@ import LinkVariant from '~icons/mdi/link-variant'
 import TableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
 import FormatColorText from '~icons/mdi/format-color-text'
 import TextSubject from '~icons/mdi/text-subject'
+import JSONIcon from '~icons/mdi/code-json'
 import Attachment from '~icons/mdi/attachment'
 import CheckboxMarkedOutline from '~icons/mdi/checkbox-marked-outline'
 import FormatListBulletedSquare from '~icons/mdi/format-list-bulleted-square'
@@ -135,7 +136,7 @@ const uiTypes = [
   },
   {
     name: UITypes.JSON,
-    icon: 'mdi-code-json',
+    icon: JSONIcon,
   },
   {
     name: UITypes.SpecificDBType,