create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/form/Form.tsx

@@ -1,317 +1,360 @@
-export const revalidate = 1
-
-import ContainerBox from '@/components/ContainerBox'
-import { useI18n } from 'nextjs-cms/translations/client'
-import FormInputs from '@/components/form/FormInputs'
-import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
-import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
-import classNames from 'classnames'
-import ProgressBar from '@/components/ProgressBar'
-import React, { RefObject, useEffect } from 'react'
-import type { RouterOutputs } from 'nextjs-cms/api'
-import * as z from 'zod'
-import { zodResolver } from '@hookform/resolvers/zod'
-import { useForm, FormProvider } from 'react-hook-form'
-import {
-    CheckboxFieldClientConfig,
-    ColorFieldClientConfig,
-    DateFieldClientConfig,
-    DocumentFieldClientConfig,
-    MapFieldClientConfig,
-    NumberFieldClientConfig,
-    PasswordFieldClientConfig,
-    PhotoFieldClientConfig,
-    RichTextFieldClientConfig,
-    SelectFieldClientConfig,
-    SelectMultipleFieldClientConfig,
-    SlugFieldClientConfig,
-    TextAreaFieldClientConfig,
-    TextFieldClientConfig,
-    VideoFieldClientConfig,
-} from 'nextjs-cms/core/fields'
-
-import {
-    numberFieldSchema,
-    textFieldSchema,
-    selectFieldSchema,
-    selectMultipleFieldSchema,
-    dateFieldSchema,
-    checkboxFieldSchema,
-    textareaFieldSchema,
-    richTextFieldSchema,
-    photoFieldSchema,
-    documentFieldSchema,
-    videoFieldSchema,
-    colorFieldSchema,
-    mapFieldSchema,
-    passwordFieldSchema,
-    slugFieldSchema,
-} from 'nextjs-cms/validators'
-
-import { ConditionalField, FieldType } from 'nextjs-cms/core/types'
-import { configLastUpdated } from '@/components/form/helpers/util'
-import PhotoGallery from '../PhotoGallery'
-import { useSession } from 'nextjs-cms/auth/react'
-
-export default function Form({
-    formType,
-    data,
-    dropzoneRef,
-    variantRef,
-    handleSubmit,
-    isSubmitting,
-    response,
-    progress,
-    progressVariant,
-    buttonType = 'big',
-}: {
-    formType?: 'new' | 'edit'
-    data:
-        | RouterOutputs['hasItemsSections']['newItem']
-        | RouterOutputs['hasItemsSections']['editItem']
-        | RouterOutputs['simpleSections']['create']
-        | {
-              section: {
-                  name: string
-                  gallery?: boolean
-              }
-              inputGroups:
-                  | {
-                        groupId: number | undefined
-                        groupTitle: string
-                        groupOrder: number
-                        inputs: {
-                            type: FieldType
-                            name: string
-                            label: string
-                            required: boolean
-                            conditionalFields: ConditionalField[]
-                            placeholder?: string
-                            readonly: boolean
-                            value: any
-                        }[]
-                    }[]
-                  | undefined
-          }
-    dropzoneRef?: RefObject<DropzoneHandles | null>
-    variantRef?: RefObject<VariantHandles[]>
-    handleSubmit: any
-    isSubmitting: boolean
-    response?: any
-    progress?: number
-    progressVariant?: 'determinate' | 'query'
-    buttonType?: 'big' | 'small'
-}) {
-    const t = useI18n()
-    const session = useSession()
-    const locale = session?.data?.user?.locale
-
-    let schema = z.object({})
-    /**
-     * Construct the schema for the form
-     */
-    data.inputGroups?.forEach((inputGroup) => {
-        inputGroup.inputs.forEach((input) => {
-            if (input.readonly) return
-            switch (input.type) {
-                case 'select_multiple':
-                    schema = schema.extend({
-                        [input.name]: selectMultipleFieldSchema(input as SelectMultipleFieldClientConfig, locale),
-                    })
-                    break
-                case 'select':
-                    schema = schema.extend({
-                        [input.name]: selectFieldSchema(input as SelectFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'date':
-                    schema = schema.extend({
-                        [input.name]: dateFieldSchema(input as DateFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'checkbox':
-                    schema = schema.extend({
-                        [input.name]: checkboxFieldSchema(input as CheckboxFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'text':
-                    schema = schema.extend({
-                        [input.name]: textFieldSchema(input as TextFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'textarea':
-                    schema = schema.extend({
-                        [input.name]: textareaFieldSchema(input as TextAreaFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'rich_text':
-                    schema = schema.extend({
-                        [input.name]: richTextFieldSchema(input as RichTextFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'photo':
-                    if (formType === 'edit' && !!input.value) break
-                    schema = schema.extend({
-                        [input.name]: photoFieldSchema(input as PhotoFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'document':
-                    if (formType === 'edit' && !!input.value) break
-                    schema = schema.extend({
-                        [input.name]: documentFieldSchema(input as DocumentFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'video':
-                    if (formType === 'edit' && !!input.value) break
-                    schema = schema.extend({
-                        [input.name]: videoFieldSchema(input as VideoFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'number':
-                    schema = schema.extend({
-                        [input.name]: numberFieldSchema(input as NumberFieldClientConfig, locale),
-                    })
-                    break
-                case 'color':
-                    schema = schema.extend({
-                        [input.name]: colorFieldSchema(input as ColorFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'map':
-                    schema = schema.extend({
-                        [input.name]: mapFieldSchema(input as MapFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'password':
-                    schema = schema.extend({
-                        [input.name]: passwordFieldSchema(input as PasswordFieldClientConfig, locale),
-                    })
-                    break
-
-                case 'slug':
-                    schema = schema.extend({
-                        [input.name]: slugFieldSchema(input as SlugFieldClientConfig, locale),
-                    })
-                    break
-            }
-        })
-    })
-
-    const methods = useForm({
-        resolver: zodResolver(schema),
-    })
-
-    return (
-        <FormProvider {...methods}>
-            <form
-                method='post'
-                onSubmit={(e) => {
-                    e.preventDefault()
-                    // e.stopPropagation()
-                    methods.handleSubmit((data) => {
-                        handleSubmit(new FormData(e.target as HTMLFormElement))
-                    })(e)
-                }}
-                encType='multipart/form-data'
-            >
-                <div className='w-full' data-section-schema-version={configLastUpdated}>
-                    {/*<ContainerBox title={formType ? t(formType === 'new' ? 'add_new' : 'edit') : undefined}>*/}
-                    <div className='p-4'>
-                        <div className=''>
-                            {data.inputGroups ? (
-                                <div className='flex flex-col gap-4'>
-                                    {data.inputGroups.length > 0
-                                        ? data.inputGroups.map((inputGroup, index: number) => {
-                                              return (
-                                                  <ContainerBox title={inputGroup.groupTitle} key={index}>
-                                                      <FormInputs
-                                                          inputs={inputGroup.inputs}
-                                                          sectionName={data.section.name}
-                                                      />
-                                                  </ContainerBox>
-                                              )
-                                          })
-                                        : null}
-                                    {data.section.gallery ? (
-                                        <>
-                                        <div className='w-full'>
-                                            <PhotoGallery sectionName={data.section.name} gallery={data.gallery} />
-                                        </div>
-                                        <div className='w-full'>
-                                            <Dropzone ref={dropzoneRef} />
-                                        </div>
-                                        </>
-                                    ) : null}
-
-                                    {/*{data.section.variants && data.section.variants.length > 0 ? (
-                                            <div className='w-full'>
-                                                <div className='flex flex-col gap-4'>
-                                                    {data.section.variants.map((variant, index) => {
-                                                        // Only one variant is allowed for now
-                                                        // I have to find a way to make multiple variantRef in order to handle multiple variants
-                                                        if (index > 0) return
-
-                                                        return (
-                                                            <NewVariantComponent
-                                                                ref={(el) => (variantRef.current[index] = el)}
-                                                                key={index}
-                                                                section={section}
-                                                                variantInfo={variant.info}
-                                                                xsrfToken={xsrfToken}
-                                                            />
-                                                        )
-                                                    })}
-                                                </div>
-                                            </div>
-                                        ) : null}*/}
-
-                                    <div className='flex flex-col gap-3 pb-4'>
-                                        <div className=''>
-                                            <button
-                                                className={classNames({
-                                                    'w-full': buttonType === 'big',
-                                                    'float-end': buttonType === 'small',
-                                                    'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
-                                                        true,
-                                                    'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
-                                                        !isSubmitting,
-                                                    'from-gray-600 via-gray-500 to-gray-400': isSubmitting,
-                                                })}
-                                                type='submit'
-                                                disabled={isSubmitting}
-                                            >
-                                                {isSubmitting
-                                                    ? t('loading')
-                                                    : t(formType === 'new' ? 'create' : 'save')}
-                                            </button>
-                                            {progressVariant && progress ? (
-                                                isSubmitting ? (
-                                                    <div className='mt-0.5'>
-                                                        <ProgressBar variant={progressVariant} value={progress} />
-                                                    </div>
-                                                ) : null
-                                            ) : null}
-                                        </div>
-                                        {response ? <div className='w-full'>{response}</div> : null}
-                                    </div>
-                                </div>
-                            ) : null}
-                        </div>
-                    </div>
-                    {/*</ContainerBox>*/}
-                </div>
-            </form>
-        </FormProvider>
-    )
-}
+export const revalidate = 1
+
+import ContainerBox from '@/components/ContainerBox'
+import { useI18n } from 'nextjs-cms/translations/client'
+import FormInputs from '@/components/form/FormInputs'
+import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
+import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
+import classNames from 'classnames'
+import ProgressBar from '@/components/ProgressBar'
+import React, { RefObject, useCallback, useEffect } from 'react'
+import type { RouterOutputs } from 'nextjs-cms/api'
+import * as z from 'zod'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useForm, FormProvider } from 'react-hook-form'
+import {
+    CheckboxFieldClientConfig,
+    ColorFieldClientConfig,
+    DateFieldClientConfig,
+    DocumentFieldClientConfig,
+    MapFieldClientConfig,
+    NumberFieldClientConfig,
+    PasswordFieldClientConfig,
+    PhotoFieldClientConfig,
+    RichTextFieldClientConfig,
+    SelectFieldClientConfig,
+    SelectMultipleFieldClientConfig,
+    SlugFieldClientConfig,
+    TextAreaFieldClientConfig,
+    TextFieldClientConfig,
+    VideoFieldClientConfig,
+} from 'nextjs-cms/core/fields'
+
+import {
+    numberFieldSchema,
+    textFieldSchema,
+    selectFieldSchema,
+    selectMultipleFieldSchema,
+    dateFieldSchema,
+    checkboxFieldSchema,
+    textareaFieldSchema,
+    richTextFieldSchema,
+    photoFieldSchema,
+    documentFieldSchema,
+    videoFieldSchema,
+    colorFieldSchema,
+    mapFieldSchema,
+    passwordFieldSchema,
+    slugFieldSchema,
+} from 'nextjs-cms/validators'
+
+import { ConditionalField, FieldType } from 'nextjs-cms/core/types'
+import { configLastUpdated } from '@/components/form/helpers/util'
+import PhotoGallery from '../PhotoGallery'
+import { useSession } from 'nextjs-cms/auth/react'
+import { LocalizationProvider } from '@/components/form/ContentLocaleContext'
+
+export default function Form({
+    formType,
+    data,
+    dropzoneRef,
+    variantRef,
+    handleSubmit,
+    isSubmitting,
+    response,
+    progress,
+    progressVariant,
+    buttonType = 'big',
+    submitSuccessCount = 0,
+    contentLocale,
+    defaultLocale,
+    onDirtyChange,
+}: {
+    formType?: 'new' | 'edit'
+    data:
+        | RouterOutputs['hasItemsSections']['newItem']
+        | RouterOutputs['hasItemsSections']['editItem']
+        | RouterOutputs['simpleSections']['create']
+        | {
+              section: {
+                  name: string
+                  gallery?: boolean
+              }
+              inputGroups:
+                  | {
+                        groupId: number | undefined
+                        groupTitle: string
+                        groupOrder: number
+                        inputs: {
+                            type: FieldType
+                            name: string
+                            label: string
+                            required: boolean
+                            conditionalFields: ConditionalField[]
+                            placeholder?: string
+                            readonly: boolean
+                            value: any
+                        }[]
+                    }[]
+                  | undefined
+          }
+    dropzoneRef?: RefObject<DropzoneHandles | null>
+    variantRef?: RefObject<VariantHandles[]>
+    handleSubmit: any
+    isSubmitting: boolean
+    response?: any
+    progress?: number
+    progressVariant?: 'determinate' | 'query'
+    buttonType?: 'big' | 'small'
+    submitSuccessCount?: number
+    contentLocale?: { code: string; label: string; rtl?: boolean }
+    defaultLocale?: { code: string; label: string; rtl?: boolean }
+    onDirtyChange?: (isDirty: boolean) => void
+}) {
+    const t = useI18n()
+    const session = useSession()
+    const locale = session?.data?.user?.language
+
+    // When editing a non-default locale, only show fields marked as localized
+    const isTranslationMode = !!(contentLocale && defaultLocale && contentLocale.code !== defaultLocale.code)
+
+    const filterInputsForLocale = <T,>(inputs: T[]): T[] => {
+        if (!isTranslationMode) return inputs
+        return inputs.filter((input) => (input as any).localized)
+    }
+
+    const hasNoLocalizedFields =
+        isTranslationMode &&
+        (data.inputGroups?.every((g) => filterInputsForLocale(g.inputs as any[]).length === 0) ?? true)
+
+    let schema = z.object({})
+    /**
+     * Construct the schema for the form
+     */
+    data.inputGroups?.forEach((inputGroup) => {
+        filterInputsForLocale(inputGroup.inputs as any[]).forEach((input: any) => {
+            if (input.readonly) return
+            switch (input.type) {
+                case 'select_multiple':
+                    schema = schema.extend({
+                        [input.name]: selectMultipleFieldSchema(input as SelectMultipleFieldClientConfig, locale),
+                    })
+                    break
+                case 'select':
+                    schema = schema.extend({
+                        [input.name]: selectFieldSchema(input as SelectFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'date':
+                    schema = schema.extend({
+                        [input.name]: dateFieldSchema(input as DateFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'checkbox':
+                    schema = schema.extend({
+                        [input.name]: checkboxFieldSchema(input as CheckboxFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'text':
+                    schema = schema.extend({
+                        [input.name]: textFieldSchema(input as TextFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'textarea':
+                    schema = schema.extend({
+                        [input.name]: textareaFieldSchema(input as TextAreaFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'rich_text':
+                    schema = schema.extend({
+                        [input.name]: richTextFieldSchema(input as RichTextFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'photo':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: photoFieldSchema(input as PhotoFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'document':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: documentFieldSchema(input as DocumentFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'video':
+                    if (formType === 'edit' && !!input.value) break
+                    schema = schema.extend({
+                        [input.name]: videoFieldSchema(input as VideoFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'number':
+                    schema = schema.extend({
+                        [input.name]: numberFieldSchema(input as NumberFieldClientConfig, locale),
+                    })
+                    break
+                case 'color':
+                    schema = schema.extend({
+                        [input.name]: colorFieldSchema(input as ColorFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'map':
+                    schema = schema.extend({
+                        [input.name]: mapFieldSchema(input as MapFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'password':
+                    schema = schema.extend({
+                        [input.name]: passwordFieldSchema(input as PasswordFieldClientConfig, locale),
+                    })
+                    break
+
+                case 'slug':
+                    schema = schema.extend({
+                        [input.name]: slugFieldSchema(input as SlugFieldClientConfig, locale),
+                    })
+                    break
+            }
+        })
+    })
+
+    const methods = useForm({
+        resolver: zodResolver(schema),
+    })
+
+    const { dirtyFields } = methods.formState
+    const hasDirtyFields = Object.keys(dirtyFields).length > 0
+    useEffect(() => {
+        onDirtyChange?.(hasDirtyFields)
+    }, [hasDirtyFields, onDirtyChange])
+
+    return (
+        <LocalizationProvider value={contentLocale ?? null}>
+        <FormProvider {...methods}>
+            <form
+                method='post'
+                onSubmit={(e) => {
+                    e.preventDefault()
+                    // e.stopPropagation()
+                    methods.handleSubmit((data) => {
+                        handleSubmit(new FormData(e.target as HTMLFormElement))
+                    })(e)
+                }}
+                encType='multipart/form-data'
+            >
+                <div className='w-full' data-section-schema-version={configLastUpdated}>
+                    {/*<ContainerBox title={formType ? t(formType === 'new' ? 'add_new' : 'edit') : undefined}>*/}
+                    <div className='p-4'>
+                        <div className=''>
+                            {data.inputGroups ? (
+                                <div className='flex flex-col gap-4'>
+                                    {hasNoLocalizedFields ? (
+                                        <div className='rounded border border-amber-300 bg-amber-50 p-4 text-amber-800 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-300'>
+                                            <h3 className='font-semibold'>{t('noLocalizedFields')}</h3>
+                                            <p className='mt-1'>
+                                                {t('noLocalizedFieldsHint', { section: data.section.title.section, file: data.section.configFile })}
+                                            </p>
+                                        </div>
+                                    ) : (
+                                        <>
+                                    {data.inputGroups.length > 0
+                                        ? data.inputGroups.map((inputGroup, index: number) => {
+                                              const filteredInputs = filterInputsForLocale(inputGroup.inputs as any[])
+                                              if (filteredInputs.length === 0) return null
+                                              return (
+                                                  <ContainerBox title={inputGroup.groupTitle} key={index}>
+                                                      <FormInputs
+                                                          inputs={filteredInputs}
+                                                          sectionName={data.section.name}
+                                                          submitSuccessCount={submitSuccessCount}
+                                                      />
+                                                  </ContainerBox>
+                                              )
+                                          })
+                                        : null}
+                                    {data.section.gallery && !isTranslationMode ? (
+                                        <>
+                                        <div className='w-full'>
+                                            <PhotoGallery sectionName={data.section.name} gallery={data.gallery} />
+                                        </div>
+                                        <div className='w-full'>
+                                            <Dropzone ref={dropzoneRef} />
+                                        </div>
+                                        </>
+                                    ) : null}
+
+                                    {/*{data.section.variants && data.section.variants.length > 0 ? (
+                                            <div className='w-full'>
+                                                <div className='flex flex-col gap-4'>
+                                                    {data.section.variants.map((variant, index) => {
+                                                        // Only one variant is allowed for now
+                                                        // I have to find a way to make multiple variantRef in order to handle multiple variants
+                                                        if (index > 0) return
+
+                                                        return (
+                                                            <NewVariantComponent
+                                                                ref={(el) => (variantRef.current[index] = el)}
+                                                                key={index}
+                                                                section={section}
+                                                                variantInfo={variant.info}
+                                                                xsrfToken={xsrfToken}
+                                                            />
+                                                        )
+                                                    })}
+                                                </div>
+                                            </div>
+                                        ) : null}*/}
+
+                                    <div className='flex flex-col gap-3 pb-4'>
+                                        <div className=''>
+                                            <button
+                                                className={classNames({
+                                                    'w-full': buttonType === 'big',
+                                                    'float-end': buttonType === 'small',
+                                                    'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
+                                                        true,
+                                                    'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
+                                                        !isSubmitting,
+                                                    'from-gray-600 via-gray-500 to-gray-400': isSubmitting,
+                                                })}
+                                                type='submit'
+                                                disabled={isSubmitting}
+                                            >
+                                                {isSubmitting
+                                                    ? t('loading')
+                                                    : t(formType === 'new' ? 'create' : 'save')}
+                                            </button>
+                                            {progressVariant && progress ? (
+                                                isSubmitting ? (
+                                                    <div className='mt-0.5'>
+                                                        <ProgressBar variant={progressVariant} value={progress} />
+                                                    </div>
+                                                ) : null
+                                            ) : null}
+                                        </div>
+                                        {response ? <div className='w-full'>{response}</div> : null}
+                                    </div>
+                                        </>
+                                    )}
+                                </div>
+                            ) : null}
+                        </div>
+                    </div>
+                    {/*</ContainerBox>*/}
+                </div>
+            </form>
+        </FormProvider>
+        </LocalizationProvider>
+    )
+}