@wikex/admin-kit 0.2.0

package/src/live-preview/GlobalInlineInspector.tsx

@@ -0,0 +1,334 @@
+'use client'
+
+import React, { useEffect, useMemo, useState } from 'react'
+
+export type EditableGlobalScope = 'footer' | 'header' | 'settings'
+
+export type GlobalInspectorSelection = {
+  fieldPath: string
+  href?: string
+  scope: EditableGlobalScope
+  supportsLink: boolean
+  text: string
+}
+
+type GlobalFieldUpdate = {
+  path: string
+  value: unknown
+}
+
+export type InspectorValues = {
+  backgroundColor: string
+  text: string
+  textColor: string
+  url: string
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === 'object' && !Array.isArray(value)
+
+const readValueAtPath = (source: unknown, fieldPath: string) => {
+  return fieldPath.split('.').reduce<unknown>((current, segment) => {
+    if (Array.isArray(current)) return current[Number(segment)]
+    if (isRecord(current)) return current[segment]
+    return undefined
+  }, source)
+}
+
+const setValueAtPath = (source: unknown, segments: string[], value: unknown): unknown => {
+  if (!segments.length) return value
+
+  const [segment, ...remainingSegments] = segments
+  const arrayIndex = Number(segment)
+
+  if (Number.isInteger(arrayIndex) && String(arrayIndex) === segment) {
+    const nextArray = Array.isArray(source) ? [...source] : []
+    nextArray[arrayIndex] = setValueAtPath(nextArray[arrayIndex], remainingSegments, value)
+    return nextArray
+  }
+
+  const nextRecord = isRecord(source) ? { ...source } : {}
+  nextRecord[segment] = setValueAtPath(nextRecord[segment], remainingSegments, value)
+  return nextRecord
+}
+
+const getErrorMessage = async (response: Response) => {
+  try {
+    const body = (await response.json()) as { errors?: { message?: string }[]; message?: string }
+    return body.errors?.[0]?.message || body.message
+  } catch {
+    return undefined
+  }
+}
+
+export const readGlobal = async (scope: EditableGlobalScope, signal?: AbortSignal) => {
+  const response = await fetch(`/api/globals/${scope}?depth=0&draft=true`, {
+    credentials: 'include',
+    signal,
+  })
+
+  if (!response.ok) {
+    throw new Error((await getErrorMessage(response)) || `Không thể đọc ${scope}.`)
+  }
+
+  return (await response.json()) as Record<string, unknown>
+}
+
+export const updateGlobalFields = async (
+  scope: EditableGlobalScope,
+  updates: GlobalFieldUpdate[],
+) => {
+  const currentGlobal = await readGlobal(scope)
+  const patch: Record<string, unknown> = { _status: 'draft' }
+
+  for (const { path, value } of updates) {
+    const [rootField, ...remainingSegments] = path.split('.')
+    const currentRoot = Object.hasOwn(patch, rootField)
+      ? patch[rootField]
+      : currentGlobal[rootField]
+    patch[rootField] = setValueAtPath(currentRoot, remainingSegments, value)
+  }
+
+  const response = await fetch(`/api/globals/${scope}?depth=0&draft=true&autosave=true`, {
+    body: JSON.stringify(patch),
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+    method: 'POST',
+  })
+
+  if (!response.ok) {
+    throw new Error((await getErrorMessage(response)) || `Không thể cập nhật ${scope}.`)
+  }
+}
+
+const getLinkBasePath = (fieldPath: string) => {
+  if (fieldPath.endsWith('.label')) return fieldPath.slice(0, -'.label'.length)
+  if (fieldPath === 'announcement.text') return 'announcement'
+  return undefined
+}
+
+const normalizeInspectorColor = (value: unknown) =>
+  typeof value === 'string' && /^#[0-9A-F]{6}$/i.test(value) ? value.toUpperCase() : ''
+
+export const GlobalInlineInspector = ({
+  onApply,
+  selection,
+}: {
+  onApply: (values: InspectorValues) => void
+  selection: GlobalInspectorSelection
+}) => {
+  const linkBasePath = useMemo(() => getLinkBasePath(selection.fieldPath), [selection.fieldPath])
+  const [values, setValues] = useState<InspectorValues>({
+    backgroundColor: '',
+    text: selection.text,
+    textColor: '',
+    url: selection.href || '',
+  })
+  const [status, setStatus] = useState<'error' | 'idle' | 'loading' | 'saving' | 'success'>(
+    'loading',
+  )
+  const [linkContext, setLinkContext] = useState({ initialURL: selection.href || '', type: '' })
+  const [message, setMessage] = useState('Đang tải thuộc tính…')
+
+  useEffect(() => {
+    const controller = new AbortController()
+    setStatus('loading')
+    setMessage('Đang tải thuộc tính…')
+
+    void readGlobal(selection.scope, controller.signal)
+      .then((global) => {
+        const storedURL = linkBasePath
+          ? String(readValueAtPath(global, `${linkBasePath}.url`) ?? selection.href ?? '')
+          : ''
+
+        setValues({
+          backgroundColor: linkBasePath
+            ? normalizeInspectorColor(readValueAtPath(global, `${linkBasePath}.backgroundColor`))
+            : '',
+          text:
+            String(readValueAtPath(global, selection.fieldPath) ?? selection.text) ||
+            selection.text,
+          textColor: linkBasePath
+            ? normalizeInspectorColor(readValueAtPath(global, `${linkBasePath}.textColor`))
+            : '',
+          url: storedURL,
+        })
+        setLinkContext({
+          initialURL: storedURL,
+          type: linkBasePath ? String(readValueAtPath(global, `${linkBasePath}.type`) ?? '') : '',
+        })
+        setStatus('idle')
+        setMessage('')
+      })
+      .catch((error: unknown) => {
+        if (controller.signal.aborted) return
+        setStatus('error')
+        setMessage(error instanceof Error ? error.message : 'Không thể tải thuộc tính.')
+      })
+
+    return () => controller.abort()
+  }, [linkBasePath, selection])
+
+  const save = async () => {
+    const textColor = normalizeInspectorColor(values.textColor)
+    const backgroundColor = normalizeInspectorColor(values.backgroundColor)
+
+    if ((values.textColor && !textColor) || (values.backgroundColor && !backgroundColor)) {
+      setStatus('error')
+      setMessage('Màu tùy chỉnh cần dùng mã HEX đầy đủ, ví dụ #172019.')
+      return
+    }
+
+    setStatus('saving')
+    setMessage('Đang lưu…')
+
+    const savedValues = { ...values, backgroundColor, textColor }
+
+    const updates: GlobalFieldUpdate[] = [{ path: selection.fieldPath, value: values.text }]
+
+    if (selection.supportsLink && linkBasePath) {
+      updates.push(
+        { path: `${linkBasePath}.textColor`, value: textColor || null },
+        { path: `${linkBasePath}.backgroundColor`, value: backgroundColor || null },
+      )
+
+      if (!linkBasePath.includes('.link') || linkContext.type === 'custom') {
+        updates.push({ path: `${linkBasePath}.url`, value: values.url })
+      } else if (values.url !== linkContext.initialURL) {
+        updates.push(
+          { path: `${linkBasePath}.type`, value: 'custom' },
+          { path: `${linkBasePath}.url`, value: values.url },
+        )
+      }
+    }
+
+    try {
+      await updateGlobalFields(selection.scope, updates)
+      setValues(savedValues)
+      onApply(savedValues)
+      setStatus('success')
+      setMessage('Đã lưu vào nội dung dùng chung.')
+    } catch (error) {
+      setStatus('error')
+      setMessage(error instanceof Error ? error.message : 'Không thể lưu thay đổi.')
+    }
+  }
+
+  const disabled = status === 'loading' || status === 'saving'
+  const scopeLabel =
+    selection.scope === 'header'
+      ? 'Đầu trang'
+      : selection.scope === 'footer'
+        ? 'Chân trang'
+        : 'Thông tin website'
+
+  return (
+    <section aria-label={`Thuộc tính ${scopeLabel}`} className="wikex-global-inspector">
+      <div className="wikex-global-inspector__eyebrow">Nội dung dùng chung</div>
+      <h2>{scopeLabel}</h2>
+      <p className="wikex-global-inspector__path">{selection.fieldPath}</p>
+
+      <label className="wikex-global-inspector__field">
+        <span>Nội dung</span>
+        <textarea
+          disabled={disabled}
+          onChange={(event) => setValues((current) => ({ ...current, text: event.target.value }))}
+          rows={3}
+          value={values.text}
+        />
+      </label>
+
+      {selection.supportsLink && linkBasePath && (
+        <>
+          <label className="wikex-global-inspector__field">
+            <span>Đường dẫn</span>
+            <input
+              disabled={disabled}
+              onChange={(event) =>
+                setValues((current) => ({ ...current, url: event.target.value }))
+              }
+              placeholder="/contact hoặc https://…"
+              type="text"
+              value={values.url}
+            />
+          </label>
+
+          <div className="wikex-global-inspector__colors">
+            <label className="wikex-global-inspector__field">
+              <span>Màu chữ</span>
+              <div className="wikex-global-inspector__color-control">
+                <input
+                  aria-label="Chọn màu chữ"
+                  disabled={disabled}
+                  onChange={(event) =>
+                    setValues((current) => ({ ...current, textColor: event.target.value }))
+                  }
+                  type="color"
+                  value={normalizeInspectorColor(values.textColor) || '#FFFFFF'}
+                />
+                <input
+                  disabled={disabled}
+                  maxLength={7}
+                  onChange={(event) =>
+                    setValues((current) => ({ ...current, textColor: event.target.value }))
+                  }
+                  placeholder="Mặc định"
+                  type="text"
+                  value={values.textColor}
+                />
+              </div>
+            </label>
+            <label className="wikex-global-inspector__field">
+              <span>Màu nền</span>
+              <div className="wikex-global-inspector__color-control">
+                <input
+                  aria-label="Chọn màu nền"
+                  disabled={disabled}
+                  onChange={(event) =>
+                    setValues((current) => ({ ...current, backgroundColor: event.target.value }))
+                  }
+                  type="color"
+                  value={normalizeInspectorColor(values.backgroundColor) || '#172019'}
+                />
+                <input
+                  disabled={disabled}
+                  maxLength={7}
+                  onChange={(event) =>
+                    setValues((current) => ({ ...current, backgroundColor: event.target.value }))
+                  }
+                  placeholder="Mặc định"
+                  type="text"
+                  value={values.backgroundColor}
+                />
+              </div>
+            </label>
+          </div>
+        </>
+      )}
+
+      <div className="wikex-global-inspector__actions">
+        <button
+          disabled={disabled || !values.text.trim()}
+          onClick={() => void save()}
+          type="button"
+        >
+          {status === 'saving' ? 'Đang lưu…' : 'Lưu thay đổi'}
+        </button>
+        {selection.supportsLink && linkBasePath && (
+          <button
+            className="wikex-global-inspector__reset"
+            disabled={disabled}
+            onClick={() =>
+              setValues((current) => ({ ...current, backgroundColor: '', textColor: '' }))
+            }
+            type="button"
+          >
+            Dùng màu mặc định
+          </button>
+        )}
+      </div>
+
+      {message && <p className={`wikex-global-inspector__status is-${status}`}>{message}</p>}
+    </section>
+  )
+}