create-nextjs-cms 0.7.0 → 0.7.2

package/templates/default/components/InfoCard.tsx

@@ -1,93 +1,93 @@
-'use client'
-
-import Link from 'next/link'
-import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
-
-type result = {
-    key: string
-    title: string
-    status?: boolean
-    icon?: boolean
-    action?: {
-        text: string
-        link: string
-    }
-}
-
-export default function InfoCard({ result, className }: { result: result; className?: string }) {
-    let bgColor
-    let iconBgColor
-    let textColor
-    let buttonColor
-    switch (result.key) {
-        case 'success':
-            bgColor = 'bg-green-100'
-            iconBgColor = 'bg-green-200'
-            textColor = 'text-green-800'
-            buttonColor = 'bg-green-500 hover:bg-green-400'
-
-            break
-        case 'danger':
-            bgColor = 'bg-rose-100'
-            iconBgColor = 'bg-rose-200'
-            textColor = 'text-red-800'
-            buttonColor = 'bg-rose-600 hover:bg-red-500'
-
-            break
-        case 'warning':
-            bgColor = 'bg-orange-100'
-            iconBgColor = 'bg-orange-200'
-            textColor = 'text-orange-800'
-            buttonColor = 'bg-orange-500 hover:bg-orange-400'
-            break
-        case 'info':
-            bgColor = 'bg-sky-100'
-            iconBgColor = 'bg-sky-200'
-            textColor = 'text-blue-900'
-            buttonColor = 'bg-blue-500 hover:bg-blue-400'
-            break
-        default:
-            break
-    }
-    return (
-        <div className={className}>
-            <div className='col-span-full relative w-full overflow-hidden rounded-lg bg-white text-left border border-sky-700 transition-all'>
-                <div className=''>
-                    <div className=''>
-                        <div className={`w-full ${bgColor}`}>
-                            <div className={`flex items-center text-md font-semibold ${textColor} py-1 px-2`}>
-                                {result.icon && (
-                                    <div
-                                        className={` flex h-10 w-10 p-1 shrink-0 items-center justify-center rounded-full ${iconBgColor}`}
-                                    >
-                                        {result.key === 'success' ? (
-                                            <CheckCircle />
-                                        ) : result.key === 'danger' ? (
-                                            <OctagonIcon />
-                                        ) : result.key === 'warning' ? (
-                                            <TriangleIcon />
-                                        ) : (
-                                            <OctagonIcon />
-                                        )}
-                                    </div>
-                                )}
-                                <div className='ps-2 py-2'>
-                                    <div dangerouslySetInnerHTML={{ __html: result.title }}></div>
-                                    {result.action && (
-                                        <Link
-                                            href={result.action.link}
-                                            type='link'
-                                            className={`justify-center text-sm font-bold ms-2 text-blue-600`}
-                                        >
-                                            {result.action.text}
-                                        </Link>
-                                    )}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import Link from 'next/link'
+import { CheckCircle, OctagonIcon, TriangleIcon } from 'lucide-react'
+
+type result = {
+    key: string
+    title: string
+    status?: boolean
+    icon?: boolean
+    action?: {
+        text: string
+        link: string
+    }
+}
+
+export default function InfoCard({ result, className }: { result: result; className?: string }) {
+    let bgColor
+    let iconBgColor
+    let textColor
+    let buttonColor
+    switch (result.key) {
+        case 'success':
+            bgColor = 'bg-green-100'
+            iconBgColor = 'bg-green-200'
+            textColor = 'text-green-800'
+            buttonColor = 'bg-green-500 hover:bg-green-400'
+
+            break
+        case 'danger':
+            bgColor = 'bg-rose-100'
+            iconBgColor = 'bg-rose-200'
+            textColor = 'text-red-800'
+            buttonColor = 'bg-rose-600 hover:bg-red-500'
+
+            break
+        case 'warning':
+            bgColor = 'bg-orange-100'
+            iconBgColor = 'bg-orange-200'
+            textColor = 'text-orange-800'
+            buttonColor = 'bg-orange-500 hover:bg-orange-400'
+            break
+        case 'info':
+            bgColor = 'bg-sky-100'
+            iconBgColor = 'bg-sky-200'
+            textColor = 'text-blue-900'
+            buttonColor = 'bg-blue-500 hover:bg-blue-400'
+            break
+        default:
+            break
+    }
+    return (
+        <div className={className}>
+            <div className='col-span-full relative w-full overflow-hidden rounded-lg bg-white text-left border border-sky-700 transition-all'>
+                <div className=''>
+                    <div className=''>
+                        <div className={`w-full ${bgColor}`}>
+                            <div className={`flex items-center text-md font-semibold ${textColor} py-1 px-2`}>
+                                {result.icon && (
+                                    <div
+                                        className={` flex h-10 w-10 p-1 shrink-0 items-center justify-center rounded-full ${iconBgColor}`}
+                                    >
+                                        {result.key === 'success' ? (
+                                            <CheckCircle />
+                                        ) : result.key === 'danger' ? (
+                                            <OctagonIcon />
+                                        ) : result.key === 'warning' ? (
+                                            <TriangleIcon />
+                                        ) : (
+                                            <OctagonIcon />
+                                        )}
+                                    </div>
+                                )}
+                                <div className='ps-2 py-2'>
+                                    <div dangerouslySetInnerHTML={{ __html: result.title }}></div>
+                                    {result.action && (
+                                        <Link
+                                            href={result.action.link}
+                                            type='link'
+                                            className={`justify-center text-sm font-bold ms-2 text-blue-600`}
+                                        >
+                                            {result.action.text}
+                                        </Link>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/ItemEditPage.tsx

@@ -1,214 +1,214 @@
-'use client'
-
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RefObject, useEffect, useRef, useState } from 'react'
-import { SectionType } from 'nextjs-cms/core/types'
-import { useI18n } from 'nextjs-cms/translations/client'
-import useModal from '@/hooks/useModal'
-import { AxiosError } from 'axios'
-import InfoCard from '@/components/InfoCard'
-import { useRouter } from 'next/navigation'
-import { useToast } from '@/components/ui/use-toast'
-import { DropzoneHandles } from '@/components/Dropzone'
-import { VariantHandles } from '@/components/NewVariantComponent'
-import { trpc } from '@/app/_trpc/client'
-import Form from '@/components/form/Form'
-import ErrorComponent from '@/components/ErrorComponent'
-
-export default function ItemEditPage({
-    section,
-    sectionType,
-    itemId,
-    hiddenInputs,
-    action,
-}: {
-    section: string
-    sectionType: SectionType
-    itemId: string
-    hiddenInputs?: {
-        name: string
-        value: any
-    }[]
-    action?: any
-}) {
-    const t = useI18n()
-    const [response, setResponse] = useState<any>(null)
-    const [progress, setProgress] = useState(0)
-    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
-    const [isSubmitting, setIsSubmitting] = useState(false)
-    const { setModal } = useModal()
-    const axiosPrivate = useAxiosPrivate()
-    const controller = new AbortController()
-    const { toast } = useToast()
-    const router = useRouter()
-    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
-    const variantRef: RefObject<VariantHandles[]> = useRef([])
-    const [data, {refetch}] = trpc.hasItemsSections.editItem.useSuspenseQuery({
-        sectionName: section,
-        sectionItemId: itemId,
-    })
-
-    const handleSubmit = async (formData: FormData) => {
-        setIsSubmitting(true)
-        if (isSubmitting) return
-        setResponse(null)
-
-        formData.append('sectionName', section)
-        formData.append('formType', 'edit')
-        formData.append('sectionType', sectionType)
-
-        // Retrieve the files from the Dropzone's state
-        if (dropzoneRef.current) {
-            const files: File[] = dropzoneRef.current.getFiles()
-            // Add files to the body
-            files.forEach((file, index) => {
-                formData.append(`dropzoneFiles`, file)
-            })
-        }
-
-        // Retrieve the variants from the variants component
-        // For now, only one variant is allowed
-        const variantsObject: any[] = []
-        if (variantRef.current && data?.section?.variants?.length && data?.section?.variants[0]) {
-            // Add variants to the body
-            variantRef.current.map((ref, index) => {
-                variantsObject.push({
-                    // @ts-ignore
-                    variant: data.section.variants[index],
-                    items: ref.getVariants(),
-                })
-            })
-
-            formData.append(`variantItems`, JSON.stringify(variantsObject))
-        }
-
-        // Check if there are any hidden inputs passed to the component
-        if (hiddenInputs) {
-            // Add hidden inputs to the body
-            hiddenInputs.forEach((input) => {
-                if (!input.value) return
-                formData.append(input.name, input.value)
-            })
-        }
-
-        // const body = Object.fromEntries(formData.entries())
-        try {
-            const res = await axiosPrivate.put(`/submit/section/item/${itemId}`, 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) {
-                    // Refetch the page
-                    // Clear Dropzone
-                    if (dropzoneRef.current) {
-                        dropzoneRef.current.removeFiles()
-                    }
-
-                    // Clear Variants
-                    if (variantRef.current) {
-                        variantRef.current.map((ref) => {
-                            ref.removeVariants()
-                        })
-                    }
-                    await refetch()
-                    switch (sectionType) {
-                        case 'categorized':
-                            // Just close the modal and refetch the page
-                            setModal(null)
-                            toast({
-                                variant: 'success',
-                                description: t('itemUpdatedSuccessfully'),
-                            })
-                            if (action) {
-                                await action().then(() => {
-                                    setModal(null)
-                                    router.refresh()
-                                })
-                            } else {
-                                setModal(null)
-                            }
-                            break
-
-                        case 'has_items':
-                            setResponse(null)
-                            toast({
-                                variant: 'success',
-                                description: t('itemUpdatedSuccessfully'),
-                            })
-
-                            // Redirect to the edit page
-                            // router.push(`/edit/${section}/${res.data.identifier}`)
-                            // Or redirect to the browse page
-                            break
-                    }
-                }
-            }
-        } 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'>
-            <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.section}</h1>
-                    <span>
-                        /{t('edit')} {data.section?.title.singular}
-                    </span>
-                </div>
-                <Form
-                    formType='edit'
-                    progressVariant={progressVariant}
-                    response={response}
-                    progress={progress}
-                    data={data}
-                    dropzoneRef={dropzoneRef}
-                    variantRef={variantRef}
-                    handleSubmit={handleSubmit}
-                    isSubmitting={isSubmitting}
-                />
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { RefObject, useEffect, useRef, useState } from 'react'
+import { SectionType } from 'nextjs-cms/core/types'
+import { useI18n } from 'nextjs-cms/translations/client'
+import useModal from '@/hooks/useModal'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import { useRouter } from 'next/navigation'
+import { useToast } from '@/components/ui/use-toast'
+import { DropzoneHandles } from '@/components/Dropzone'
+import { VariantHandles } from '@/components/NewVariantComponent'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+import ErrorComponent from '@/components/ErrorComponent'
+
+export default function ItemEditPage({
+    section,
+    sectionType,
+    itemId,
+    hiddenInputs,
+    action,
+}: {
+    section: string
+    sectionType: SectionType
+    itemId: string
+    hiddenInputs?: {
+        name: string
+        value: any
+    }[]
+    action?: any
+}) {
+    const t = useI18n()
+    const [response, setResponse] = useState<any>(null)
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const { setModal } = useModal()
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { toast } = useToast()
+    const router = useRouter()
+    const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
+    const variantRef: RefObject<VariantHandles[]> = useRef([])
+    const [data, {refetch}] = trpc.hasItemsSections.editItem.useSuspenseQuery({
+        sectionName: section,
+        sectionItemId: itemId,
+    })
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        setResponse(null)
+
+        formData.append('sectionName', section)
+        formData.append('formType', 'edit')
+        formData.append('sectionType', sectionType)
+
+        // Retrieve the files from the Dropzone's state
+        if (dropzoneRef.current) {
+            const files: File[] = dropzoneRef.current.getFiles()
+            // Add files to the body
+            files.forEach((file, index) => {
+                formData.append(`dropzoneFiles`, file)
+            })
+        }
+
+        // Retrieve the variants from the variants component
+        // For now, only one variant is allowed
+        const variantsObject: any[] = []
+        if (variantRef.current && data?.section?.variants?.length && data?.section?.variants[0]) {
+            // Add variants to the body
+            variantRef.current.map((ref, index) => {
+                variantsObject.push({
+                    // @ts-ignore
+                    variant: data.section.variants[index],
+                    items: ref.getVariants(),
+                })
+            })
+
+            formData.append(`variantItems`, JSON.stringify(variantsObject))
+        }
+
+        // Check if there are any hidden inputs passed to the component
+        if (hiddenInputs) {
+            // Add hidden inputs to the body
+            hiddenInputs.forEach((input) => {
+                if (!input.value) return
+                formData.append(input.name, input.value)
+            })
+        }
+
+        // const body = Object.fromEntries(formData.entries())
+        try {
+            const res = await axiosPrivate.put(`/submit/section/item/${itemId}`, 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) {
+                    // Refetch the page
+                    // Clear Dropzone
+                    if (dropzoneRef.current) {
+                        dropzoneRef.current.removeFiles()
+                    }
+
+                    // Clear Variants
+                    if (variantRef.current) {
+                        variantRef.current.map((ref) => {
+                            ref.removeVariants()
+                        })
+                    }
+                    await refetch()
+                    switch (sectionType) {
+                        case 'categorized':
+                            // Just close the modal and refetch the page
+                            setModal(null)
+                            toast({
+                                variant: 'success',
+                                description: t('itemUpdatedSuccessfully'),
+                            })
+                            if (action) {
+                                await action().then(() => {
+                                    setModal(null)
+                                    router.refresh()
+                                })
+                            } else {
+                                setModal(null)
+                            }
+                            break
+
+                        case 'has_items':
+                            setResponse(null)
+                            toast({
+                                variant: 'success',
+                                description: t('itemUpdatedSuccessfully'),
+                            })
+
+                            // Redirect to the edit page
+                            // router.push(`/edit/${section}/${res.data.identifier}`)
+                            // Or redirect to the browse page
+                            break
+                    }
+                }
+            }
+        } 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'>
+            <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.section}</h1>
+                    <span>
+                        /{t('edit')} {data.section?.title.singular}
+                    </span>
+                </div>
+                <Form
+                    formType='edit'
+                    progressVariant={progressVariant}
+                    response={response}
+                    progress={progress}
+                    data={data}
+                    dropzoneRef={dropzoneRef}
+                    variantRef={variantRef}
+                    handleSubmit={handleSubmit}
+                    isSubmitting={isSubmitting}
+                />
+            </div>
+        </div>
+    )
+}