create-nextjs-cms 0.9.6 → 0.9.8

package/templates/default/components/CategorizedSectionPage.tsx

@@ -1,31 +1,31 @@
-'use client'
-
-import { trpc } from '@/app/_trpc/client'
-import CategorySectionSelectInput from '@/components/CategorySectionSelectInput'
-import ErrorComponent from '@/components/ErrorComponent'
-
-export default function CategorizedSectionPage({ section }: { section: string }) {
-    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
-        sectionName: section,
-    })
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div>
-            <div className='w-full'>
-                <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-rose-200 via-rose-400 to-sky-400'></div>{' '}
-                    {data && data.section && <h1 className='text-3xl'>{data?.section?.title.section}</h1>}
-                </div>
-                <div className='flex w-full flex-col'>
-                    <div className='rounded-xl p-4 shadow-sm'>
-                        {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import { trpc } from '@/app/_trpc/client'
+import CategorySectionSelectInput from '@/components/CategorySectionSelectInput'
+import ErrorComponent from '@/components/ErrorComponent'
+
+export default function CategorizedSectionPage({ section }: { section: string }) {
+    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
+        sectionName: section,
+    })
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div>
+            <div className='w-full'>
+                <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-rose-200 via-rose-400 to-sky-400'></div>{' '}
+                    {data && data.section && <h1 className='text-3xl'>{data?.section?.title.section}</h1>}
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='rounded-xl p-4 shadow-sm'>
+                        {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/CategoryDeleteConfirmPage.tsx

@@ -1,130 +1,130 @@
-import LoadingSpinners from '@/components/LoadingSpinners'
-import InfoCard from '@/components/InfoCard'
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Button } from '@/components/ui/button'
-import useModal from '@/hooks/useModal'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import { Switch } from './ui/switch'
-import { Label } from '@/components/ui/label'
-
-export default function CategoryDeleteConfirmPage({
-    section,
-    sectionTitle,
-    id,
-    action,
-    allowRecursiveDelete,
-}: {
-    section: string
-    sectionTitle: string
-    id: string
-    action: any
-    allowRecursiveDelete: boolean
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const { toast } = useToast()
-
-    // TODO: implement this? Basically we're getting the associated items with the category,
-    // and displaying their count to notify the admin,
-    // for now we will not delete the items, only the category
-
-    /*
-    const { isLoading, isError, data, error, refetch } = useQuery({
-        queryKey: ['confirmCategoryDeletion', section, id],
-        queryFn: () => confirmCategoryDeletion(section, id, axiosPrivate, controller),
-    })
-    */
-
-    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
-                        {error.message}
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            await action()
-            setModal(null)
-            toast({
-                title: t('delete'),
-                description: t('itemDeletedSuccessfully'),
-                variant: 'success',
-            })
-        },
-    })
-    const handleDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: section,
-            sectionItemId: id,
-        })
-    }
-
-    return (
-        <div className='flex flex-col'>
-            <div className='flex flex-col gap-3'>
-                <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-red-300 via-rose-500 to-pink-400'></div>
-                    <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
-                    <span>/{t('delete')}</span>
-                </div>
-                <div className='flex flex-col gap-2 px-8 py-4'>
-                    <div className='mb-4 text-2xl'>{t('catDeleteTextLight')}</div>
-                    {deleteMutation.isPending ? (
-                        <div className='flex w-full items-center justify-center text-center'>
-                            <LoadingSpinners />
-                        </div>
-                    ) : null}
-                    <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
-                        <InfoCard
-                            result={{
-                                key: 'info',
-                                title: `${t('catDeleteWarningLight')}`,
-                                status: false,
-                            }}
-                        />
-                    </div>
-                    {allowRecursiveDelete ? (
-                        <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
-                            <InfoCard
-                                result={{
-                                    key: 'info',
-                                    title: `${t('recursiveCategoryDeleteWarning')}`,
-                                    status: false,
-                                }}
-                            />
-                            <div className='flex items-center space-x-2'>
-                                <Switch id='recursive-category-delete' />
-                                <Label htmlFor='airplane-mode'>{t('recursiveCategoryDelete')}</Label>
-                            </div>
-                        </div>
-                    ) : null}
-
-                    <div className='mt-2 flex flex-wrap gap-2'>
-                        <Button variant='destructive' onClick={handleDelete}>
-                            {t('delete')}
-                        </Button>
-
-                        <Button
-                            variant='outline'
-                            onClick={() => {
-                                setModal(null)
-                            }}
-                        >
-                            {t('cancel')}
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+import LoadingSpinners from '@/components/LoadingSpinners'
+import InfoCard from '@/components/InfoCard'
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Button } from '@/components/ui/button'
+import useModal from '@/hooks/useModal'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import { Switch } from './ui/switch'
+import { Label } from '@/components/ui/label'
+
+export default function CategoryDeleteConfirmPage({
+    section,
+    sectionTitle,
+    id,
+    action,
+    allowRecursiveDelete,
+}: {
+    section: string
+    sectionTitle: string
+    id: string
+    action: any
+    allowRecursiveDelete: boolean
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const { toast } = useToast()
+
+    // TODO: implement this? Basically we're getting the associated items with the category,
+    // and displaying their count to notify the admin,
+    // for now we will not delete the items, only the category
+
+    /*
+    const { isLoading, isError, data, error, refetch } = useQuery({
+        queryKey: ['confirmCategoryDeletion', section, id],
+        queryFn: () => confirmCategoryDeletion(section, id, axiosPrivate, controller),
+    })
+    */
+
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
+                        {error.message}
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            await action()
+            setModal(null)
+            toast({
+                title: t('delete'),
+                description: t('itemDeletedSuccessfully'),
+                variant: 'success',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: section,
+            sectionItemId: id,
+        })
+    }
+
+    return (
+        <div className='flex flex-col'>
+            <div className='flex flex-col gap-3'>
+                <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-red-300 via-rose-500 to-pink-400'></div>
+                    <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
+                    <span>/{t('delete')}</span>
+                </div>
+                <div className='flex flex-col gap-2 px-8 py-4'>
+                    <div className='mb-4 text-2xl'>{t('catDeleteTextLight')}</div>
+                    {deleteMutation.isPending ? (
+                        <div className='flex w-full items-center justify-center text-center'>
+                            <LoadingSpinners />
+                        </div>
+                    ) : null}
+                    <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
+                        <InfoCard
+                            result={{
+                                key: 'info',
+                                title: `${t('catDeleteWarningLight')}`,
+                                status: false,
+                            }}
+                        />
+                    </div>
+                    {allowRecursiveDelete ? (
+                        <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
+                            <InfoCard
+                                result={{
+                                    key: 'info',
+                                    title: `${t('recursiveCategoryDeleteWarning')}`,
+                                    status: false,
+                                }}
+                            />
+                            <div className='flex items-center space-x-2'>
+                                <Switch id='recursive-category-delete' />
+                                <Label htmlFor='airplane-mode'>{t('recursiveCategoryDelete')}</Label>
+                            </div>
+                        </div>
+                    ) : null}
+
+                    <div className='mt-2 flex flex-wrap gap-2'>
+                        <Button variant='destructive' onClick={handleDelete}>
+                            {t('delete')}
+                        </Button>
+
+                        <Button
+                            variant='outline'
+                            onClick={() => {
+                                setModal(null)
+                            }}
+                        >
+                            {t('cancel')}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/CategorySectionSelectInput.tsx

@@ -1,140 +1,140 @@
-import React, { useEffect, useState } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import SelectBox from '@/components/SelectBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
-import { useAutoAnimate } from '@formkit/auto-animate/react'
-import SelectInputButtons from '@/components/SelectInputButtons'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { trpc } from '@/app/_trpc/client'
-import { SelectOption } from 'nextjs-cms/core/fields'
-import type { RouterOutputs } from 'nextjs-cms/api'
-import { nanoid } from 'nanoid'
-
-type CategorySelect = RouterOutputs['categorySections']['get']['data']
-
-export default function CategorySectionSelectInput({
-    input,
-    refetch,
-    isChild = false,
-}: {
-    input: CategorySelect
-    refetch?: any
-    isChild?: boolean
-}) {
-    const t = useI18n()
-    /**
-     * Check and add the select option if it does not exist, the select option has a value of undefined
-     */
-    const exists = input?.options?.filter((option) => option.value === undefined)
-    if (!exists || exists.length === 0) {
-        if (input?.options) {
-            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
-            input.options.unshift({ value: undefined, label: t('select') })
-        }
-    }
-
-    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
-    const [isLoading, setIsLoading] = useState<boolean>(false)
-    const [hasMounted, setHasMounted] = useState<boolean>(false)
-    const [value, setValue] = useState<string | number | undefined>(/*getValue(input?.value)*/)
-    const [child, setChild] = useState<CategorySelect | null>(null)
-    const [randomKey, setRandomKey] = useState<string>(nanoid())
-
-    useEffect(() => {
-        if (input) {
-            setChild(null)
-            if (input.depth && input.depth <= 1) return
-            if (value === undefined) {
-                return
-            }
-            setIsLoading(true)
-            childrenMutation.mutate({
-                parentId: value,
-                sectionName: input.sectionName,
-                level: input.level,
-            })
-        }
-    }, [value])
-
-    if (!input) return null
-
-    const childrenMutation = trpc.categorySections.getChildren.useMutation({
-        onSuccess: (data) => {
-            if (data && data.options) {
-                const childInput: CategorySelect = {
-                    parentId: data.parentId,
-                    sectionName: input.sectionName,
-                    required: input.required,
-                    label: input.label,
-                    name: input.name,
-                    options: data.options,
-                    level: data.level,
-                    depth: input.depth,
-                    value: hasMounted ? undefined : input.value,
-                    allowRecursiveDelete: input.allowRecursiveDelete,
-                }
-                setChild(childInput)
-            } else {
-                setChild(null)
-            }
-
-            setIsLoading(false)
-            setHasMounted(true)
-        },
-        onError: (error) => {},
-        // console.log('Error', error)
-    })
-
-    return (
-        <>
-            {/* @ts-ignore no need for validations in this case */}
-            <FormInputElement label={isChild ? '|->' : input.label} required={input.required}>
-                <SelectBox
-                    // The key is to tell react to re-render the select
-                    // box whenever we change the randomKey value
-                    // (we're doing this after deleting an item from the select)
-                    key={randomKey}
-                    items={input.options ? input.options : []}
-                    onChange={(value: SelectOption | undefined) => {
-                        setValue(value?.value)
-                    }}
-                    classname='w-full shadow-xs'
-                />
-
-                <SelectInputButtons
-                    value={value}
-                    level={input.level}
-                    sectionTitle={input.label}
-                    section={input.name}
-                    parentId={input.parentId}
-                    refetch={() => {
-                        refetch()
-                    }}
-                    reset={() => {
-                        setValue(undefined)
-                        setRandomKey(nanoid())
-                    }}
-                    allowRecursiveDelete={input.allowRecursiveDelete ?? false}
-                />
-            </FormInputElement>
-            <div ref={parent}>
-                {isLoading && <LoadingSpinners />}
-                {child && (
-                    <div className='ps-4'>
-                        <CategorySectionSelectInput
-                            refetch={() => {
-                                childrenMutation.mutate({
-                                    parentId: value,
-                                    sectionName: input.sectionName,
-                                    level: input.level,
-                                })
-                            }}
-                            isChild={true}
-                            input={child}
-                        />
-                    </div>
-                )}
-            </div>
-        </>
-    )
-}
+import React, { useEffect, useState } from 'react'
+import FormInputElement from '@/components/form/FormInputElement'
+import SelectBox from '@/components/SelectBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import SelectInputButtons from '@/components/SelectInputButtons'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { trpc } from '@/app/_trpc/client'
+import { SelectOption } from 'nextjs-cms/core/fields'
+import type { RouterOutputs } from 'nextjs-cms/api'
+import { nanoid } from 'nanoid'
+
+type CategorySelect = RouterOutputs['categorySections']['get']['data']
+
+export default function CategorySectionSelectInput({
+    input,
+    refetch,
+    isChild = false,
+}: {
+    input: CategorySelect
+    refetch?: any
+    isChild?: boolean
+}) {
+    const t = useI18n()
+    /**
+     * Check and add the select option if it does not exist, the select option has a value of undefined
+     */
+    const exists = input?.options?.filter((option) => option.value === undefined)
+    if (!exists || exists.length === 0) {
+        if (input?.options) {
+            // @ts-ignore - This is a type-hack to add the placeholder `select` option to the options array
+            input.options.unshift({ value: undefined, label: t('select') })
+        }
+    }
+
+    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
+    const [isLoading, setIsLoading] = useState<boolean>(false)
+    const [hasMounted, setHasMounted] = useState<boolean>(false)
+    const [value, setValue] = useState<string | number | undefined>(/*getValue(input?.value)*/)
+    const [child, setChild] = useState<CategorySelect | null>(null)
+    const [randomKey, setRandomKey] = useState<string>(nanoid())
+
+    useEffect(() => {
+        if (input) {
+            setChild(null)
+            if (input.depth && input.depth <= 1) return
+            if (value === undefined) {
+                return
+            }
+            setIsLoading(true)
+            childrenMutation.mutate({
+                parentId: value,
+                sectionName: input.sectionName,
+                level: input.level,
+            })
+        }
+    }, [value])
+
+    if (!input) return null
+
+    const childrenMutation = trpc.categorySections.getChildren.useMutation({
+        onSuccess: (data) => {
+            if (data && data.options) {
+                const childInput: CategorySelect = {
+                    parentId: data.parentId,
+                    sectionName: input.sectionName,
+                    required: input.required,
+                    label: input.label,
+                    name: input.name,
+                    options: data.options,
+                    level: data.level,
+                    depth: input.depth,
+                    value: hasMounted ? undefined : input.value,
+                    allowRecursiveDelete: input.allowRecursiveDelete,
+                }
+                setChild(childInput)
+            } else {
+                setChild(null)
+            }
+
+            setIsLoading(false)
+            setHasMounted(true)
+        },
+        onError: (error) => {},
+        // console.log('Error', error)
+    })
+
+    return (
+        <>
+            {/* @ts-ignore no need for validations in this case */}
+            <FormInputElement label={isChild ? '|->' : input.label} required={input.required}>
+                <SelectBox
+                    // The key is to tell react to re-render the select
+                    // box whenever we change the randomKey value
+                    // (we're doing this after deleting an item from the select)
+                    key={randomKey}
+                    items={input.options ? input.options : []}
+                    onChange={(value: SelectOption | undefined) => {
+                        setValue(value?.value)
+                    }}
+                    classname='w-full shadow-xs'
+                />
+
+                <SelectInputButtons
+                    value={value}
+                    level={input.level}
+                    sectionTitle={input.label}
+                    section={input.name}
+                    parentId={input.parentId}
+                    refetch={() => {
+                        refetch()
+                    }}
+                    reset={() => {
+                        setValue(undefined)
+                        setRandomKey(nanoid())
+                    }}
+                    allowRecursiveDelete={input.allowRecursiveDelete ?? false}
+                />
+            </FormInputElement>
+            <div ref={parent}>
+                {isLoading && <LoadingSpinners />}
+                {child && (
+                    <div className='ps-4'>
+                        <CategorySectionSelectInput
+                            refetch={() => {
+                                childrenMutation.mutate({
+                                    parentId: value,
+                                    sectionName: input.sectionName,
+                                    level: input.level,
+                                })
+                            }}
+                            isChild={true}
+                            input={child}
+                        />
+                    </div>
+                )}
+            </div>
+        </>
+    )
+}