feat: [SPMVP-6575] karbon support dropdown reference type (#279)

Author: SidStraw

packages/custom-field/model/field.ts

@@ -11,6 +11,7 @@ export enum FieldType {
   RichText = 'RICHTEXT',
   Json = 'JSON',
   Ref = 'REF',
+  Select = 'SELECT',
 }
 
 export interface FieldTypeMap {
@@ -24,6 +25,7 @@ export interface FieldTypeMap {
   [FieldType.RichText]: unknown
   [FieldType.Json]: unknown
   [FieldType.Ref]: unknown
+  [FieldType.Select]: unknown
 }
 
 const VALID_TYPE = new Set<string>(values(FieldType))

packages/custom-field/model/index.ts

@@ -1,5 +1,6 @@
 export { CUSTOM_FIELD_KEY, CUSTOM_FIELD_EDITOR_BLOCK_KEY } from './constants'
-export { useField } from './storage'
+export { useField, normalizeOptions } from './storage'
+export type { UseFieldReturn, UseFieldOptions } from './storage'
 export {
   useFieldStorage,
   storageCtx,

packages/custom-field/model/storage.ts

@@ -64,7 +64,7 @@ export function useField(
   })
 }
 
-function normalizeOptions<Type extends FieldType, IsAll extends boolean = false>(
+export function normalizeOptions<Type extends FieldType, IsAll extends boolean = false>(
   type?: Type | UseFieldOptions<Type, IsAll>,
   all?: IsAll,
 ): UseFieldOptions<Type, IsAll> {

packages/karbon/src/runtime/api/article.ts

@@ -180,6 +180,39 @@ const GetArticle = gql`
             id
             jsonValue: value
           }
+          ... on CustomFieldReferenceValue {
+            id
+            referenceValue: value {
+              ... on Article {
+                __typename
+                id
+                articleId: id
+                title
+              }
+              ... on Desk {
+                __typename
+                id
+                deskId: id
+                name
+              }
+              ... on Tag {
+                __typename
+                id
+                tagId: id
+                name
+              }
+              ... on User {
+                __typename
+                id
+                userId: id
+                full_name
+              }
+            }
+          }
+          ... on CustomFieldSelectValue {
+            id
+            selectValue: value
+          }
         }
         group {
           id
@@ -238,6 +271,39 @@ const GetArticle = gql`
             id
             jsonValue: value
           }
+          ... on CustomFieldReferenceValue {
+            id
+            referenceValue: value {
+              ... on Article {
+                __typename
+                id
+                articleId: id
+                title
+              }
+              ... on Desk {
+                __typename
+                id
+                deskId: id
+                name
+              }
+              ... on Tag {
+                __typename
+                id
+                tagId: id
+                name
+              }
+              ... on User {
+                __typename
+                id
+                userId: id
+                full_name
+              }
+            }
+          }
+          ... on CustomFieldSelectValue {
+            id
+            selectValue: value
+          }
         }
         group {
           id

packages/karbon/src/runtime/composables/custom-field.ts

@@ -1 +1,70 @@
-export { useField, FieldType } from '@storipress/custom-field'
+import type { UseFieldOptions, UseFieldReturn } from '@storipress/custom-field'
+import { FieldType, useField as _useField, normalizeOptions } from '@storipress/custom-field'
+import type { ResourceID } from '../types'
+import { useResourceResolver } from './resources'
+
+interface ReferenceValue {
+  articleId?: string
+  deskId?: string
+  tagId?: string
+  userId?: string
+}
+
+function getReferenceResourceID({ articleId, deskId, tagId, userId }: ReferenceValue = {}): ResourceID {
+  if (articleId) return { type: 'article', id: articleId }
+  if (deskId) return { type: 'desk', id: deskId }
+  if (tagId) return { type: 'tag', id: tagId }
+  if (userId) return { type: 'author', id: userId }
+
+  return null as never
+}
+
+export function useField(key: string): UseFieldReturn<undefined, false>
+export function useField<Type extends FieldType>(key: string, type: Type): UseFieldReturn<Type, false>
+export function useField<Type extends FieldType, IsAll extends boolean>(
+  key: string,
+  type: Type,
+  all: IsAll,
+): UseFieldReturn<Type, IsAll>
+export function useField<Type extends FieldType, IsAll extends boolean>(
+  key: string,
+  options: UseFieldOptions<Type, IsAll>,
+  _all?: IsAll,
+): UseFieldReturn<Type, IsAll>
+export function useField(
+  key: string,
+  type_?: FieldType | UseFieldOptions<FieldType, boolean>,
+  all_ = false,
+): Ref<unknown> {
+  const { type } = normalizeOptions(type_, all_)
+
+  const field = _useField(key, type_ as FieldType, all_)
+  if (!field.value) return field
+
+  if (type === FieldType.Ref) {
+    const { resolveFromID } = useResourceResolver()
+
+    const { data } = useAsyncData(
+      `resource-meta-${key}::${type}`,
+      async () => {
+        const refValue = field.value as ReferenceValue[]
+        const promises = refValue.map((value) => {
+          const resourceID = getReferenceResourceID(value)
+          return resolveFromID(resourceID)
+        })
+        return await Promise.all(promises)
+      },
+      {
+        watch: [field],
+      },
+    )
+
+    return computed(() => {
+      return data.value?.map((resource) => resource?.meta)
+    })
+  }
+
+  return field
+}
+
+export { FieldType }

packages/karbon/src/runtime/routes/payload-handler.ts

@@ -1,5 +1,6 @@
 import { filter, first, pipe } from 'remeda'
 import { setHeader } from 'h3'
+import { FieldType } from '@storipress/custom-field'
 import type { Identifiable } from '../types'
 import {
   ALL_RESOURCE_JSON_PATH,
@@ -11,20 +12,18 @@ import {
 import { NOT_FOUND, defineSnapshotHandler } from './snapshot-handler'
 import { shouldBypassCache } from './cache-control'
 
-export enum FieldType {
-  Text = 'TEXT',
-  Number = 'NUM',
-  Bool = 'BOOL',
-  File = 'FILE',
-  URL = 'URL',
-  Color = 'COLOR',
-  Date = 'DATE',
-  RichText = 'RICHTEXT',
-  Json = 'JSON',
-  Ref = 'REF',
-}
-
-type CustomFieldType = 'text' | 'number' | 'color' | 'url' | 'boolean' | 'richText' | 'file' | 'date' | 'json'
+type CustomFieldType =
+  | 'text'
+  | 'number'
+  | 'color'
+  | 'url'
+  | 'boolean'
+  | 'richText'
+  | 'file'
+  | 'date'
+  | 'json'
+  | 'reference'
+  | 'select'
 enum FieldTypeMap {
   boolean = 'Bool',
   color = 'Color',
@@ -35,6 +34,8 @@ enum FieldTypeMap {
   richText = 'RichText',
   text = 'Text',
   url = 'URL',
+  reference = 'Ref',
+  select = 'Select',
 }
 interface MetaFieldValue {
   __typename: string
@@ -145,6 +146,8 @@ const SWITCH_VALUE_MAP: Record<string, string> = {
   CustomFieldRichTextValue: 'jsonValue',
   CustomFieldFileValue: 'fileValue',
   CustomFieldDateValue: 'dateValue',
+  CustomFieldReferenceValue: 'referenceValue',
+  CustomFieldSelectValue: 'selectValue',
 }
 function getFieldValue(value: MetaFieldValue) {
   const valueKey = SWITCH_VALUE_MAP[value.__typename]