create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/SectionPage.tsx

@@ -1,125 +1,205 @@
-'use client'
-
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RefObject, useEffect, useRef, useState } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { AxiosError } from 'axios'
-import InfoCard from '@/components/InfoCard'
-import { DropzoneHandles } from '@/components/Dropzone'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import Form from '@/components/form/Form'
-import ErrorComponent from './ErrorComponent'
-
-export default function SectionPage({ section }: { section: string }) {
-    const t = useI18n()
-    const [progress, setProgress] = useState(0)
-    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const [response, setResponse] = useState<any>(null)
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-    const { toast } = useToast()
-    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
-
-    const [data, {refetch, error, isError}] = trpc.simpleSections.create.useSuspenseQuery({
-        sectionName: section,
-    })
-
-    const handleSubmit = async (formData: FormData) => {
-        setIsSubmitting(true)
-        if (isSubmitting) return
-        setResponse(null)
-        formData.append('sectionName', section)
-        formData.append('formType', 'edit')
-        formData.append('sectionType', 'has_items')
-        try {
-            const res = await axiosPrivate.put(`/submit/section/simple`, formData, {
-                signal: controller.signal,
-                onUploadProgress: (progressEvent) => {
-                    if (!progressEvent.total) return
-                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
-                    // Update progress bar value here
-                    setProgress(progress)
-
-                    if (progress === 100) {
-                        setProgressVariant('query')
-                    }
-                },
-                headers: {
-                    'Content-Type': 'multipart/form-data',
-                },
-            })
-
-            if (res) {
-                setIsSubmitting(false)
-                setProgress(0)
-                setProgressVariant('determinate')
-                if (res.status === 200) {
-                    toast({
-                        variant: res.data?.errors?.length ? 'warning' : 'success',
-                        title: t('sectionUpdatedSuccessfully'),
-                        description: res.data?.errors?.length
-                            ? t('errorsInSubmit')
-                            : t('sectionUpdatedSuccessfully'),
-                    })
-
-                    // Refetch the page
-                    await refetch()
-                }
-            }
-        } catch (error: AxiosError | any) {
-            setIsSubmitting(false)
-            setProgress(0)
-            setProgressVariant('determinate')
-            if (error?.response?.data) {
-                setResponse(<InfoCard result={{ key: 'danger', title: error.response.data.error, status: false }} />)
-            }
-        }
-    }
-
-    function cancelSubmit() {
-        controller.abort()
-        setIsSubmitting(false)
-        setProgress(0)
-        setProgressVariant('determinate')
-    }
-
-    useEffect(() => {
-        return () => {
-            cancelSubmit()
-        }
-    }, [])
-
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div className='flex w-full flex-col overflow-hidden'>
-            {isError ? <div>{error?.message}</div> : null}
-            {data ? (
-                <div className='flex w-full flex-col'>
-                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
-                        <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
-                        <span>
-                            /{t('edit')} {data.section?.title}
-                        </span>
-                    </div>
-                    <Form
-                        formType='edit'
-                        progressVariant={progressVariant}
-                        response={response}
-                        progress={progress}
-                        data={data}
-                        dropzoneRef={dropzoneRef}
-                        handleSubmit={handleSubmit}
-                        isSubmitting={isSubmitting}
-                    />
-                </div>
-            ) : null}
-        </div>
-    )
-}
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import { DropzoneHandles } from '@/components/Dropzone'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+import ErrorComponent from './ErrorComponent'
+import { useRouter, useSearchParams } from 'next/navigation'
+import LocaleSwitcher from '@/components/LocaleSwitcher'
+import { Trash2 } from 'lucide-react'
+import { Alert, AlertDescription } from './ui/alert'
+
+export default function SectionPage({ section }: { section: string }) {
+    const t = useI18n()
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [submitSuccessCount, setSubmitSuccessCount] = useState(0)
+    const [response, setResponse] = useState<any>(null)
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { toast } = useToast()
+    const router = useRouter()
+    const searchParams = useSearchParams()
+    const locale = searchParams.get('locale') ?? undefined
+    const [formDirty, setFormDirty] = useState(false)
+    const handleDirtyChange = useCallback((isDirty: boolean) => setFormDirty(isDirty), [])
+    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
+
+    const [data, {refetch, error, isError}] = trpc.simpleSections.create.useSuspenseQuery({
+        sectionName: section,
+        locale,
+    })
+    const deleteLocaleMutation = trpc.simpleSections.deleteLocaleTranslation.useMutation()
+
+    const handleDeleteLocale = async () => {
+        if (!locale) return
+        if (!window.confirm(t('deleteLocaleTranslationText'))) return
+
+        try {
+            await deleteLocaleMutation.mutateAsync({
+                sectionName: section,
+                locale,
+            })
+            toast({
+                variant: 'success',
+                description: t('localeTranslationDeleted'),
+            })
+            router.push(`/section/${section}`)
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                description: error?.message ?? t('somethingWentWrong'),
+            })
+        }
+    }
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        setResponse(null)
+        formData.append('sectionName', section)
+        formData.append('formType', 'edit')
+        formData.append('sectionType', 'has_items')
+
+        if (locale) {
+            formData.append('locale', locale)
+        }
+
+        try {
+            const res = await axiosPrivate.put(`/submit/section/simple`, formData, {
+                signal: controller.signal,
+                onUploadProgress: (progressEvent) => {
+                    if (!progressEvent.total) return
+                    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100)
+                    // Update progress bar value here
+                    setProgress(progress)
+
+                    if (progress === 100) {
+                        setProgressVariant('query')
+                    }
+                },
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            })
+
+            if (res) {
+                setIsSubmitting(false)
+                setProgress(0)
+                setProgressVariant('determinate')
+                if (res.status === 200) {
+                    toast({
+                        variant: res.data?.errors?.length ? 'warning' : 'success',
+                        title: t('sectionUpdatedSuccessfully'),
+                        description: res.data?.errors?.length
+                            ? t('errorsInSubmit')
+                            : t('sectionUpdatedSuccessfully'),
+                    })
+
+                    // Refetch the page
+                    await refetch()
+                    setSubmitSuccessCount((currentCount) => currentCount + 1)
+                }
+            }
+        } catch (error: AxiosError | any) {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (error?.response?.data) {
+                setResponse(<InfoCard result={{ key: 'danger', title: error.response.data.error, status: false }} />)
+            }
+        }
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+        setProgress(0)
+        setProgressVariant('determinate')
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div className='flex w-full flex-col overflow-hidden'>
+            {isError ? <div>{error?.message}</div> : null}
+            {data ? (
+                <div className='flex w-full flex-col'>
+                    <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                        <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                        <h1 className='pb-4 text-4xl'>{data.section?.title}</h1>
+                        <span>
+                            /{t('edit')} {data.section?.title}
+                        </span>
+                    </div>
+                    {data.localization && (
+                        <div className="px-8 pt-4">
+                            <LocaleSwitcher
+                                section={section}
+                                currentLocale={data.localization.currentLocale}
+                                defaultLocale={data.localization.defaultLocale}
+                                existingTranslations={data.localization.existingTranslations}
+                                locales={data.localization.locales}
+                                hasUnsavedChanges={formDirty}
+                                basePath={`/section/${section}`}
+                            />
+                            {locale && (
+                                <Alert variant='info' className='mt-2 w-full'>
+                                    <AlertDescription className='text-md font-bold'>
+                                        <div className='flex items-center justify-between'>
+                                        <span>
+                                            {t('editingContentTranslation', { locale })}
+                                        </span>
+                                        {data.localization.existingTranslations.includes(locale) && (
+                                            <button
+                                                type='button'
+                                                onClick={handleDeleteLocale}
+                                                disabled={deleteLocaleMutation.isPending}
+                                                className='inline-flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50'
+                                            >
+                                                <Trash2 className='h-3.5 w-3.5' />
+                                                {deleteLocaleMutation.isPending ? t('loading') : t('deleteLocaleTranslation')}
+                                            </button>
+                                        )}
+                                    </div>
+                                    </AlertDescription>
+                                </Alert>
+                            )}
+                        </div>
+                    )}
+                    <Form
+                        key={locale ?? 'default'}
+                        formType='edit'
+                        progressVariant={progressVariant}
+                        response={response}
+                        progress={progress}
+                        data={data}
+                        dropzoneRef={dropzoneRef}
+                        handleSubmit={handleSubmit}
+                        isSubmitting={isSubmitting}
+                        submitSuccessCount={submitSuccessCount}
+                        contentLocale={data.localization?.currentLocale}
+                        defaultLocale={data.localization?.defaultLocale}
+                        onDirtyChange={handleDirtyChange}
+                    />
+                </div>
+            ) : null}
+        </div>
+    )
+}

package/templates/default/components/SelectBox.tsx

@@ -1,98 +1,98 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Check, ChevronsUpDown } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { Button } from '@/components/ui/button'
-import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
-import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import { SelectOption } from 'nextjs-cms/core/fields'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function SelectBox({
-    items,
-    defaultValue,
-    onChange = () => {},
-    classname,
-}: {
-    items: SelectOption[]
-    defaultValue?: string | number | undefined
-    onChange: any
-    classname: string
-}) {
-    const t = useI18n()
-    const [selected, setSelected] = useState<SelectOption | undefined>(
-        defaultValue !== undefined && defaultValue !== null
-            ? items.find((item) => item.value?.toString() === defaultValue.toString())
-            : items[0],
-    )
-    const [open, setOpen] = useState(false)
-
-    // Update selected item when items or defaultValue changes (e.g., on language change)
-    useEffect(() => {
-        if (defaultValue !== undefined && defaultValue !== null) {
-            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
-            if (foundItem) {
-                setSelected(foundItem)
-            }
-        } else {
-            // If no value is selected, update to the first item (placeholder)
-            // This ensures the placeholder label is updated when language changes
-            setSelected(items[0])
-        }
-    }, [items, defaultValue])
-
-    return (
-        <div className={cn('relative', classname)}>
-            <Popover open={open} onOpenChange={setOpen}>
-                <PopoverTrigger asChild>
-                    <Button
-                        variant='outline'
-                        role='combobox'
-                        aria-expanded={open}
-                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
-                    >
-                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
-                        <ChevronsUpDown className='size-5 opacity-50' />
-                    </Button>
-                </PopoverTrigger>
-                <PopoverContent
-                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
-                    align='start'
-                >
-                    <Command>
-                        <CommandInput placeholder={t('searchDots') as string} className='h-9' />
-                        <CommandList>
-                            <CommandEmpty>{t('noItemFound')}</CommandEmpty>
-                            <CommandGroup>
-                                {items.map((item: SelectOption, index: number) => {
-                                    // Use label for searchable value, but include value in a way that we can identify it
-                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
-                                    const searchableValue = item.label
-                                    const isSelected = selected && item.value && selected.value === item.value
-                                    return (
-                                        <CommandItem
-                                            key={`${item.label}-${index}`}
-                                            value={searchableValue}
-                                            keywords={[item.label]}
-                                            onSelect={() => {
-                                                setSelected(item)
-                                                onChange(item)
-                                                setOpen(false)
-                                            }}
-                                        >
-                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
-                                                {item.label}
-                                            </span>
-                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
-                                        </CommandItem>
-                                    )
-                                })}
-                            </CommandGroup>
-                        </CommandList>
-                    </Command>
-                </PopoverContent>
-            </Popover>
-        </div>
-    )
-}
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { SelectOption } from 'nextjs-cms/core/fields'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function SelectBox({
+    items,
+    defaultValue,
+    onChange = () => {},
+    classname,
+}: {
+    items: SelectOption[]
+    defaultValue?: string | number | undefined
+    onChange: any
+    classname: string
+}) {
+    const t = useI18n()
+    const [selected, setSelected] = useState<SelectOption | undefined>(
+        defaultValue !== undefined && defaultValue !== null
+            ? items.find((item) => item.value?.toString() === defaultValue.toString())
+            : items[0],
+    )
+    const [open, setOpen] = useState(false)
+
+    // Update selected item when items or defaultValue changes (e.g., on language change)
+    useEffect(() => {
+        if (defaultValue !== undefined && defaultValue !== null) {
+            const foundItem = items.find((item) => item.value?.toString() === defaultValue.toString())
+            if (foundItem) {
+                setSelected(foundItem)
+            }
+        } else {
+            // If no value is selected, update to the first item (placeholder)
+            // This ensures the placeholder label is updated when language changes
+            setSelected(items[0])
+        }
+    }, [items, defaultValue])
+
+    return (
+        <div className={cn('relative', classname)}>
+            <Popover open={open} onOpenChange={setOpen}>
+                <PopoverTrigger asChild>
+                    <Button
+                        variant='outline'
+                        role='combobox'
+                        aria-expanded={open}
+                        className='bg-input text-foreground w-full justify-between rounded px-1 py-5 shadow-xs ring-2 ring-gray-300 outline-0 hover:ring-gray-400 focus:ring-2 focus:ring-blue-500 focus:outline-hidden sm:text-sm sm:leading-6'
+                    >
+                        <span className='block truncate'>{selected?.label ? selected.label : ''}</span>
+                        <ChevronsUpDown className='size-5 opacity-50' />
+                    </Button>
+                </PopoverTrigger>
+                <PopoverContent
+                    className='border-foreground/50 w-[var(--radix-popover-trigger-width)] border p-0 shadow-sm'
+                    align='start'
+                >
+                    <Command>
+                        <CommandInput placeholder={t('searchDots') as string} className='h-9' />
+                        <CommandList>
+                            <CommandEmpty>{t('noItemFound')}</CommandEmpty>
+                            <CommandGroup>
+                                {items.map((item: SelectOption, index: number) => {
+                                    // Use label for searchable value, but include value in a way that we can identify it
+                                    // cmdk filters by both value prop and text content, so we use label for value to make search work
+                                    const searchableValue = item.label
+                                    const isSelected = selected && item.value && selected.value === item.value
+                                    return (
+                                        <CommandItem
+                                            key={`${item.label}-${index}`}
+                                            value={searchableValue}
+                                            keywords={[item.label]}
+                                            onSelect={() => {
+                                                setSelected(item)
+                                                onChange(item)
+                                                setOpen(false)
+                                            }}
+                                        >
+                                            <span className={isSelected ? 'font-extrabold' : 'text-foreground'}>
+                                                {item.label}
+                                            </span>
+                                            {isSelected ? <Check strokeWidth={5} size={25} color='green' /> : null}
+                                        </CommandItem>
+                                    )
+                                })}
+                            </CommandGroup>
+                        </CommandList>
+                    </Command>
+                </PopoverContent>
+            </Popover>
+        </div>
+    )
+}