create-nextjs-cms 0.5.8

package/templates/default/components/NewPage.tsx

@@ -0,0 +1,206 @@
+'use client'
+
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import React, { RefObject, useEffect, useRef, useState } from 'react'
+import { SectionType } from 'nextjs-cms/core/types'
+import getString from 'nextjs-cms/translations'
+import useModal from '@/hooks/useModal'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useToast } from '@/components/ui/use-toast'
+import { useRouter } from 'next/navigation'
+import { DropzoneHandles } from '@/components/Dropzone'
+import { VariantHandles } from '@/components/NewVariantComponent'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+
+export default function NewPage({
+    section,
+    sectionType,
+    hiddenInputs,
+    action,
+}: {
+    section: string
+    sectionType: SectionType
+    hiddenInputs?: {
+        name: string
+        value: any
+    }[]
+    action?: any
+}) {
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [response, setResponse] = useState<any>(null)
+    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 utils = trpc.useUtils()
+
+    const { isLoading, isError, data, error } = trpc.hasItemsSections.newItem.useQuery({
+        sectionName: section,
+    })
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        setResponse(null)
+        formData.append('sectionName', section)
+        formData.append('formType', 'new')
+        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.post(`/submit/section/item`, 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: getString('itemCreatedSuccessfully'),
+                        description: res.data?.errors?.length
+                            ? getString('errorsInSubmit')
+                            : getString('itemCreatedSuccessfully'),
+                    })
+
+                    switch (sectionType) {
+                        case 'categorized':
+                            // Just close the modal and refetch the page
+                            setModal(null)
+
+                            if (action) {
+                                await action().then(() => {
+                                    setModal(null)
+                                    router.refresh()
+                                })
+                            }
+
+                            break
+
+                        case 'has_items':
+                            // Just display a success toast and refetch the page
+                            setResponse(null)
+                            // Redirect to the edit page
+                            // router.push(`/edit/${section}/${res.data.identifier}`)
+                            // Or redirect to the browse page
+                            await utils.hasItemsSections.listItems.invalidate({
+                                sectionName: section,
+                            })
+                            router.push(`/browse/${section}`)
+                            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()
+        }
+    }, [])
+
+    return (
+        <div className='flex w-full flex-col overflow-hidden'>
+            {isLoading ? (
+                <div>
+                    <LoadingSpinners />
+                </div>
+            ) : null}
+            {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-gradient-to-r from-emerald-800 via-emerald-400 to-sky-600'></div>
+                        <h1 className='pb-4 text-4xl'>{data.section?.title.section}</h1>
+                        <span>
+                            /{getString('new')} {data.section?.title.singular}
+                        </span>
+                    </div>
+                    <Form
+                        formType='new'
+                        progressVariant={progressVariant}
+                        response={response}
+                        progress={progress}
+                        data={data}
+                        dropzoneRef={dropzoneRef}
+                        variantRef={variantRef}
+                        handleSubmit={handleSubmit}
+                        isSubmitting={isSubmitting}
+                    />
+                </div>
+            ) : null}
+        </div>
+    )
+}

package/templates/default/components/NewVariantComponent.tsx

@@ -0,0 +1,228 @@
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import React, { forwardRef, Ref, useEffect, useImperativeHandle, useState } from 'react'
+import ContainerBox from '@/components/ContainerBox'
+import getString from 'nextjs-cms/translations'
+import { Button } from '@/components/ui/button'
+import { useQuery } from '@tanstack/react-query'
+import { getNewVariantPage } from '@/lib/apiHelpers'
+import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { InputGroup, Variant, VariantItem } from 'nextjs-cms/core/types'
+import FormInputs from '@/components/form/FormInputs'
+import classNames from 'classnames'
+import ProgressBar from '@/components/ProgressBar'
+import { AxiosError } from 'axios'
+import InfoCard from '@/components/InfoCard'
+import { useToast } from '@/components/ui/use-toast'
+import { nanoid } from 'nanoid'
+import { MinusIcon } from '@radix-ui/react-icons'
+
+export interface VariantHandles {
+    getVariants: () => VariantItem[]
+    removeVariants: () => void
+}
+
+function NewVariantComponent(
+    {
+        section,
+        variantInfo,
+        xsrfToken,
+    }: {
+        section: string
+        variantInfo: Variant
+        xsrfToken: string
+    },
+    ref: Ref<VariantHandles>,
+) {
+    const [open, setOpen] = React.useState(false)
+    const axiosPrivate = useAxiosPrivate()
+    const controller = new AbortController()
+    const { isLoading, isError, data, error } = useQuery({
+        queryKey: ['newVariant', variantInfo.variant_name],
+        queryFn: () => getNewVariantPage(section, variantInfo.variant_name, axiosPrivate, controller),
+    })
+
+    const [variants, setVariants] = useState<VariantItem[]>([])
+    const [progress, setProgress] = useState(0)
+    const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [response, setResponse] = useState<any>(null)
+    const { toast } = useToast()
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        setIsSubmitting(true)
+        e.preventDefault()
+        e.stopPropagation()
+        setResponse(null)
+        const formData = new FormData(e.currentTarget)
+
+        formData.append('section', section)
+        formData.append('variant', variantInfo.variant_name)
+        formData.append('preSubmit', 'true')
+        formData.append('form_type', 'new')
+
+        const body = Object.fromEntries(formData.entries())
+        try {
+            const res = await axiosPrivate.post(`/api-submit`, body, {
+                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.data.code === 200) {
+                    setOpen(false)
+                    // Handle closure
+                    setResponse(null)
+
+                    // Add the new variant to the list
+                    // But first, let's remove the 'preSubmit' key
+                    delete body.preSubmit
+                    setVariants([
+                        ...variants,
+                        {
+                            id: nanoid(),
+                            // @ts-ignore
+                            title: formData.get(data?.variant.heading_input_name),
+                            data: body,
+                        } as VariantItem,
+                    ])
+                }
+            }
+        } catch (error: AxiosError | any) {
+            setIsSubmitting(false)
+            setProgress(0)
+            setProgressVariant('determinate')
+            if (error?.response?.data) {
+                setResponse(
+                    <InfoCard result={{ key: 'danger', title: error.response.data.error.message, status: false }} />,
+                )
+            }
+        }
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+        setProgress(0)
+        setProgressVariant('determinate')
+    }
+
+    useEffect(() => {
+        // console.log('variants', variants)
+        return () => {
+            cancelSubmit()
+        }
+    }, [variants])
+
+    useImperativeHandle(ref, () => ({
+        getVariants: () => variants,
+        removeVariants: () => {
+            setVariants([])
+        },
+    }))
+
+    return (
+        <ContainerBox title={`${getString('add')} ${variantInfo.variant_html_name_en}`}>
+            <div className='mb-4 grid grid-cols-1 gap-4 rounded-2xl border-4 border-dashed border-gray-400 bg-accent p-2 md:grid-cols-2 lg:grid-cols-4'>
+                {variants.map((v) => (
+                    <ContainerBox title={v.title} key={v.id}>
+                        {/* Delete Button */}
+                        <button
+                            type='button'
+                            className='absolute end-1 top-1 rounded-lg bg-red-500 p-1'
+                            onClick={() => {
+                                setVariants((prev) =>
+                                    prev.filter((prevVariant) => {
+                                        if (prevVariant.id !== v.id) {
+                                            return prevVariant
+                                        }
+                                    }),
+                                )
+                            }}
+                        >
+                            <MinusIcon className='text-white' />
+                        </button>
+                        <div className='truncate'>{JSON.stringify(v.data)}</div>
+                    </ContainerBox>
+                ))}
+            </div>
+            <Sheet open={open} onOpenChange={setOpen}>
+                <SheetTrigger>
+                    <Button type='button'>{getString('add')} +</Button>
+                </SheetTrigger>
+                <SheetContent className='w-1/2 max-w-[2/3] sm:w-[940px] sm:max-w-full'>
+                    <SheetHeader>
+                        <SheetTitle>{getString('newVariant')}</SheetTitle>
+                        <SheetDescription>
+                            <form onSubmit={handleSubmit}>
+                                <div className=''>
+                                    {isLoading && (
+                                        <div>
+                                            <LoadingSpinners />
+                                        </div>
+                                    )}
+
+                                    {data && data.inputGroups && (
+                                        <div className='flex flex-col gap-4'>
+                                            {data?.inputGroups?.length > 0 &&
+                                                data?.inputGroups?.map((inputGroup: InputGroup, index: number) => {
+                                                    return (
+                                                        <ContainerBox title={inputGroup.groupTitle} key={index}>
+                                                            <FormInputs
+                                                                inputs={[]}
+                                                                sectionName={variantInfo.variant_name}
+                                                            />
+                                                        </ContainerBox>
+                                                    )
+                                                })}
+                                        </div>
+                                    )}
+                                    <div className='my-4 flex flex-col gap-3 p-4'>
+                                        <div className='mt-5'>
+                                            <button
+                                                className={classNames({
+                                                    'w-full rounded bg-gradient-to-r p-2 font-bold text-white drop-shadow':
+                                                        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 ? getString('loading') : getString('create')}
+                                            </button>
+                                            {isSubmitting && (
+                                                <div className='mt-0.5'>
+                                                    <ProgressBar variant={progressVariant} value={progress} />
+                                                </div>
+                                            )}
+                                        </div>
+                                        {response && <div className='w-full'>{response}</div>}
+                                    </div>
+                                </div>
+                            </form>
+                        </SheetDescription>
+                    </SheetHeader>
+                </SheetContent>
+            </Sheet>
+        </ContainerBox>
+    )
+}
+
+export default forwardRef(NewVariantComponent)

package/templates/default/components/PhotoGallery.tsx

@@ -0,0 +1,35 @@
+import getString from 'nextjs-cms/translations'
+import { PhotoGalleryItem } from 'nextjs-cms/core/types'
+import GalleryPhoto from '@/components/GalleryPhoto'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import ContainerBox from '@/components/ContainerBox'
+import React from 'react'
+
+const PhotoGallery = ({ sectionName, gallery }: { sectionName: string; gallery: PhotoGalleryItem[] }) => {
+    return (
+        <ContainerBox title={getString('gallery')}>
+            {gallery && gallery.length > 0 ? (
+                <div className='flex flex-wrap gap-4'>
+                    {gallery.map((photo: PhotoGalleryItem, index: number) => (
+                        <GalleryPhoto
+                            item={photo}
+                            sectionName={sectionName}
+                            key={photo.photo}
+                            action={() => {
+                                // This is the action that will be executed when the user removes a photo from the gallery
+                                // Remove the removed photo from the gallery
+                                gallery.splice(index, 1)
+                            }}
+                        />
+                    ))}
+                </div>
+            ) : (
+                <Alert variant='light' className='mt-4'>
+                    <AlertDescription className='font-bold'>{getString('noItems')}</AlertDescription>
+                </Alert>
+            )}
+        </ContainerBox>
+    )
+}
+
+export default PhotoGallery

package/templates/default/components/PieChartBox.tsx

@@ -0,0 +1,101 @@
+import React from 'react'
+import { PieChartDataItem, PieChartTitles } from 'nextjs-cms/core/types'
+import ContainerBox from '@/components/ContainerBox'
+import { Badge } from '@/components/ui/badge'
+import { ResponsiveContainer, PieChart, Pie, Legend } from 'recharts'
+import LoadingSpinners from '@/components/LoadingSpinners'
+
+const RADIAN = Math.PI / 180
+const renderCustomizedLabel = ({
+    cx,
+    cy,
+    midAngle,
+    innerRadius,
+    outerRadius,
+    percent,
+    index,
+    name,
+}: {
+    cx: number
+    cy: number
+    midAngle: number
+    innerRadius: number
+    outerRadius: number
+    percent: number
+    index: number
+    name: string
+}) => {
+    const radius = innerRadius + (outerRadius - innerRadius) * 0.5
+    const x = cx + radius * Math.cos(-midAngle * RADIAN)
+    const y = cy + radius * Math.sin(-midAngle * RADIAN)
+
+    return (
+        <text
+            x={x}
+            y={y}
+            fill='white'
+            className='font-semibold'
+            textAnchor={x > cx ? 'start' : 'end'}
+            dominantBaseline='central'
+        >
+            {`${(percent * 100).toFixed(0)}%`}
+        </text>
+    )
+}
+
+export default function PieChartBox({
+    chartData,
+    chartBoxTitles,
+    height = 300,
+    legend = true,
+    isLoading,
+}: {
+    chartData: PieChartDataItem[]
+    chartBoxTitles: PieChartTitles
+    height?: number
+    legend?: boolean
+    isLoading?: boolean
+}) {
+    return (
+        <ContainerBox title={chartBoxTitles.mainTitle}>
+            {isLoading ? (
+                <LoadingSpinners single={true} />
+            ) : (
+                <>
+                    <div className='text-muted-foreground'>
+                        {chartBoxTitles.totalUnitSubtitle && (
+                            <div>
+                                {`${chartBoxTitles.totalUnitSubtitle.key}: `}{' '}
+                                <Badge variant='secondary'>{chartBoxTitles.totalUnitSubtitle.value}</Badge>
+                            </div>
+                        )}
+
+                        {chartBoxTitles.usedUnitSubtitle && (
+                            <div>
+                                {`${chartBoxTitles.usedUnitSubtitle.key}: `}
+                                <Badge variant='secondary'>{chartBoxTitles.usedUnitSubtitle.value}</Badge>
+                            </div>
+                        )}
+                    </div>
+                    <div>
+                        <div style={{ width: '100%', height: height }}>
+                            <ResponsiveContainer>
+                                <PieChart>
+                                    {legend && <Legend />}
+                                    <Pie
+                                        dataKey='value'
+                                        data={chartData}
+                                        fill='#8884d8'
+                                        label={renderCustomizedLabel}
+                                        labelLine={false}
+                                        startAngle={-180}
+                                    />
+                                </PieChart>
+                            </ResponsiveContainer>
+                        </div>
+                    </div>
+                </>
+            )}
+        </ContainerBox>
+    )
+}

package/templates/default/components/ProgressBar.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { styled } from '@mui/material/styles'
+import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'
+
+const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({
+    height: 10,
+    borderRadius: 5,
+    [`&.${linearProgressClasses.colorPrimary}`]: {
+        backgroundColor: theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+        borderRadius: 5,
+        backgroundColor: theme.palette.mode === 'light' ? '#1a90ff' : '#308fe8',
+    },
+}))
+export default function ProgressBar({
+    value,
+    variant,
+}: {
+    value: number
+    variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query'
+}) {
+    return <BorderLinearProgress variant={variant} value={value} />
+}

package/templates/default/components/ProtectedDocument.tsx

@@ -0,0 +1,78 @@
+import React, { useEffect } from 'react'
+import { trpc } from '@/app/_trpc/client'
+import { base64ToBlob } from 'nextjs-cms/utils'
+
+const ProtectedDocument = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+    displayAs = 'base64',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+    displayAs?: 'blob' | 'base64'
+}) => {
+    const [srcUrl, setSrcUrl] = React.useState<string | null>(null)
+    const { data, error, isLoading } = trpc.files.getDocument.useQuery({
+        name: file,
+        sectionName: section,
+        fieldName: fieldName,
+    })
+
+    useEffect(() => {
+        if (!data) return
+        if (error) return
+        switch (displayAs) {
+            case 'blob':
+                setSrcUrl(
+                    URL.createObjectURL(
+                        base64ToBlob({
+                            base64: data.base64,
+                            contentType: data.mimeType,
+                            stripHeader: true,
+                        }),
+                    ),
+                )
+                break
+            case 'base64':
+                setSrcUrl(data.base64)
+                break
+        }
+
+        return () => {
+            setSrcUrl(null)
+            if (displayAs === 'blob' && srcUrl) {
+                URL.revokeObjectURL(srcUrl)
+            }
+        }
+    }, [data])
+    return (
+        <div className={className}>
+            {srcUrl ? (
+                <embed
+                    src={srcUrl}
+                    className='max-w-full'
+                    width={width}
+                    height={height}
+                    onLoad={(e) => {
+                        // Revoke the blob url after the image is loaded
+                        if (displayAs === 'blob' && srcUrl) {
+                            URL.revokeObjectURL(srcUrl)
+                        }
+                    }}
+                />
+            ) : (
+                <div className='animate-pulse bg-gray-500' style={{ width, height }} />
+            )}
+        </div>
+    )
+}
+
+export default ProtectedDocument