refactor(nc-gui): switch to parseProp

packages/nc-gui/components/cell/Checkbox.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsFormInj,
+  ReadonlyInj,
+  getMdiIcon,
+  inject,
+  parseProp,
+  useSelectedCellKeyupListener,
+} from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -35,7 +44,7 @@ const checkboxMeta = $computed(() => {
       unchecked: 'mdi-checkbox-blank-circle-outline',
     },
     color: 'primary',
-    ...(typeof column?.value?.meta === 'string' ? JSON.parse(column?.value?.meta) : column?.value?.meta || {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 

packages/nc-gui/components/cell/Currency.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, EditModeInj, computed, inject, useVModel } from '#imports'
+import { ColumnInj, EditModeInj, computed, inject, parseProp, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -35,7 +35,7 @@ const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...((typeof column.value.meta === 'string' ? JSON.parse(column.value.meta) : column.value.meta) || {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 

packages/nc-gui/components/cell/DateTimePicker.vue

@@ -7,6 +7,7 @@ import {
   dateFormats,
   inject,
   isDrawerOrModalExist,
+  parseProp,
   ref,
   timeFormats,
   useProject,
@@ -38,8 +39,8 @@ const column = inject(ColumnInj)!
 let isDateInvalid = $ref(false)
 
 const dateTimeFormat = $computed(() => {
-  const dateFormat = column?.value?.meta?.date_format ?? dateFormats[0]
+  const dateFormat = parseProp(column?.value?.meta)?.date_format ?? dateFormats[0]
-  const timeFormat = column?.value?.meta?.time_format ?? timeFormats[0]
+  const timeFormat = parseProp(column?.value?.meta)?.time_format ?? timeFormats[0]
   return `${dateFormat} ${timeFormat}`
 })
 

packages/nc-gui/components/cell/Duration.vue

@@ -8,6 +8,7 @@ import {
   convertMS2Duration,
   durationOptions,
   inject,
+  parseProp,
   ref,
 } from '#imports'
 
@@ -32,9 +33,7 @@ const durationInMS = ref(0)
 
 const isEdited = ref(false)
 
-const durationType = computed(
+const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
-  () => (typeof column?.value?.meta === 'string' ? JSON.parse(column?.value?.meta) : column?.value?.meta || {})?.duration || 0,
-)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
 

packages/nc-gui/components/cell/attachment/utils.ts

@@ -12,6 +12,7 @@ import {
   inject,
   isImage,
   message,
+  parseProp,
   ref,
   storeToRefs,
   useApi,
@@ -102,7 +103,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
       const attachmentMeta = {
         ...defaultAttachmentMeta,
-        ...(typeof column.value?.meta === 'string' ? JSON.parse(column.value.meta) : column.value?.meta),
+        ...parseProp(column?.value?.meta),
       }
 
       const newAttachments = []

packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue

@@ -5,6 +5,7 @@ import {
   extractSdkResponseErrorMsg,
   message,
   onMounted,
+  parseProp,
   ref,
   useCopy,
   useDashboard,
@@ -70,7 +71,7 @@ const sharedViewUrl = (view: SharedViewType) => {
 
 const renderAllowCSVDownload = (view: SharedViewType) => {
   if (view.type === ViewTypes.GRID) {
-    view.meta = (view.meta && typeof view.meta === 'string' ? JSON.parse(view.meta) : view.meta) as Record<string, any>
+    view.meta = (view.meta && parseProp(view.meta)) as Record<string, any>
     return view.meta?.allowCSVDownload ? '✔️' : '❌'
   } else {
     return 'N/A'

packages/nc-gui/components/virtual-cell/barcode/Barcode.vue

@@ -22,7 +22,7 @@ const showBarcodeModal = () => {
 const barcodeMeta = $computed(() => {
   return {
     barcodeFormat: 'CODE128',
-    ...(typeof column?.value?.meta === 'string' ? JSON.parse(column?.value?.meta) : column?.value?.meta || {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 

packages/nc-gui/components/webhook/Editor.vue

@@ -10,6 +10,7 @@ import {
   inject,
   message,
   onMounted,
+  parseProp,
   reactive,
   ref,
   useApi,
@@ -328,7 +329,7 @@ async function loadPluginList() {
         ...(p as any),
       }
       plugin.tags = p.tags ? p.tags.split(',') : []
-      plugin.parsedInput = typeof p.input === 'string' ? JSON.parse(p.input) : p.input
+      plugin.parsedInput = parseProp(p.input)
       o[plugin.title] = plugin
 
       return o

packages/nc-gui/components/webhook/List.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HookType } from 'nocodb-sdk'
-import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, ref, useI18n, useNuxtApp } from '#imports'
+import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, parseProp, ref, useI18n, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['edit', 'add'])
 
@@ -16,7 +16,7 @@ async function loadHooksList() {
   try {
     const hookList = (await $api.dbTableWebhook.list(meta.value?.id as string)).list as HookType[]
     hooks.value = hookList.map((hook) => {
-      hook.notification = typeof hook.notification === 'string' ? JSON.parse(hook.notification) : hook.notification
+      hook.notification = parseProp(hook.notification)
       return hook
     })
   } catch (e: any) {

packages/nc-gui/composables/useKanbanViewStore.ts

@@ -11,6 +11,7 @@ import {
   getHTMLEncodedText,
   inject,
   message,
+  parseProp,
   provide,
   ref,
   storeToRefs,
@@ -198,8 +199,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       // set groupingField
       groupingFieldColumn.value = !isPublic.value
         ? (meta.value.columns as ColumnType[]).filter((f) => f.id === kanbanMetaData.value.fk_grp_col_id)[0] || {}
-        : ((typeof sharedView.value?.meta === 'string' ? JSON.parse(sharedView.value?.meta) : sharedView.value?.meta)
+        : (parseProp(sharedView.value?.meta).groupingFieldColumn! as ColumnType)
-            .groupingFieldColumn! as ColumnType)
 
       groupingField.value = groupingFieldColumn.value.title!
 

packages/nc-gui/composables/useMultiSelect/convertCellData.ts

@@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { AppInfo } from '~/composables/useGlobal'
+import { parseProp } from '#imports'
 
 export default function convertCellData(
   args: { from: UITypes; to: UITypes; value: any; column: ColumnType; appInfo: AppInfo },
@@ -73,7 +74,7 @@ export default function convertCellData(
     case UITypes.Attachment: {
       let parsedVal
       try {
-        parsedVal = typeof value === 'string' ? JSON.parse(value) : value
+        parsedVal = parseProp(value)
         parsedVal = Array.isArray(parsedVal) ? parsedVal : [parsedVal]
       } catch (e) {
         throw new Error('Invalid attachment data')
@@ -94,7 +95,7 @@ export default function convertCellData(
 
       const attachmentMeta = {
         ...defaultAttachmentMeta,
-        ...(typeof args.column?.meta === 'string' ? JSON.parse(args.column.meta) : args.column?.meta),
+        ...parseProp(args.column?.meta),
       }
 
       const attachments = []

packages/nc-gui/composables/useSharedView.ts

@@ -1,6 +1,6 @@
 import type { ExportTypes, FilterType, KanbanType, PaginatedType, RequestParams, SortType, TableType, ViewType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
-import { computed, storeToRefs, useGlobal, useMetas, useNuxtApp, useState } from '#imports'
+import { computed, parseProp, storeToRefs, useGlobal, useMetas, useNuxtApp, useState } from '#imports'
 
 export function useSharedView() {
   const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -50,7 +50,7 @@ export function useSharedView() {
       },
     })
     try {
-      allowCSVDownload.value = (typeof viewMeta.meta === 'string' ? JSON.parse(viewMeta.meta) : viewMeta.meta)?.allowCSVDownload
+      allowCSVDownload.value = parseProp(viewMeta.meta)?.allowCSVDownload
     } catch {
       allowCSVDownload.value = false
     }

packages/nc-gui/pages/index/index/index.vue

@@ -11,6 +11,7 @@ import {
   message,
   navigateTo,
   onBeforeMount,
+  parseProp,
   projectThemeColors,
   ref,
   themeV2Colors,
@@ -80,7 +81,7 @@ const handleProjectColor = async (projectId: string, color: string) => {
 
     const project: ProjectType = await $api.project.read(projectId)
 
-    const meta = project?.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+    const meta = parseProp(project?.meta)
 
     await $api.project.update(projectId, {
       color,
@@ -113,7 +114,7 @@ const handleProjectColor = async (projectId: string, color: string) => {
 const getProjectPrimary = (project: ProjectType) => {
   if (!project) return
 
-  const meta = project.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+  const meta = parseProp(project.meta)
 
   return meta.theme?.primaryColor || themeV2Colors['royal-blue'].DEFAULT
 }