create-nextjs-cms 0.9.28 → 0.9.30

package/templates/default/components/sections/section-item-card.tsx

@@ -1,144 +1,144 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { useModal } from '@/components/feedback/modal-context'
-import ProtectedImage from '@/components/media/protected-image'
-import SectionItemStatusBadge from '@/components/sections/section-item-status-badge'
-import { displayDateFromString } from 'nextjs-cms/utils'
-import Link from 'next/link'
-import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { PersonIcon } from '@radix-ui/react-icons'
-import { trpc } from '@/app/_trpc/client'
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { useModal } from '@/components/feedback/modal-context'
+import ProtectedImage from '@/components/media/protected-image'
+import SectionItemStatusBadge from '@/components/sections/section-item-status-badge'
+import { displayDateFromString } from 'nextjs-cms/utils'
+import Link from 'next/link'
+import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { PersonIcon } from '@radix-ui/react-icons'
+import { trpc } from '@/app/_trpc/client'
 import type { RouterOutputs } from '@/app/_trpc/types'
-
-// Used to get elements of array types as types
-type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
-
-export default function SectionItemCard({
-    sectionName,
-    item,
-    action,
-}: {
-    sectionName: string
-    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
-    action: any
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const utils = trpc.useUtils()
-    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 utils.hasItemsSections.listItems.invalidate({
-                sectionName: sectionName,
-            })
-            action()
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
-                        {t('itemDeletedSuccessfully')}
-                    </div>
-                ),
-                headerColor: 'bg-green-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-    })
-    const handleDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: sectionName,
-            sectionItemId: item.id,
-        })
-    }
-
-    return (
-        <>
-            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
-                {item.coverPhoto ? (
-                    <div className='relative h-[200px]'>
-                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
-                        <ProtectedImage
-                            className='h-64 w-full object-cover'
-                            photo={item.coverPhoto}
-                            section={sectionName}
-                            isThumb={true}
-                            alt={'item'}
-                            width={100}
-                            height={50}
-                            fill={true}
-                        />
-                    </div>
-                ) : null}
-                <CardHeader className='p-6'>
-                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
-                </CardHeader>
-                <CardContent className='mt-2'>
-                    <div className='flex flex-row flex-wrap gap-1'>
-                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
-                        {displayDateFromString(item.createdAt, 'en', false, ',')}
-                    </div>
-                </CardContent>
-                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
-                    <Link
-                        href={`/edit/${sectionName}/${item.id}`}
-                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
-                    >
-                        {t('edit')}
-                    </Link>
-                    <Button
-                        onClick={() => {
-                            setModal({
-                                title: t('delete'),
-                                body: (
-                                    <div className='p-4'>
-                                        <div className='flex flex-col gap-4'>
-                                            <div>{t('deleteItemText')}</div>
-                                            <div className='flex gap-2'>
-                                                <button
-                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
-                                                    onClick={handleDelete}
-                                                >
-                                                    Yes
-                                                </button>
-                                                <button
-                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
-                                                    onClick={() => {
-                                                        setModal(null)
-                                                    }}
-                                                >
-                                                    No
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ),
-                                headerColor: 'bg-red-700',
-                                titleColor: 'text-white',
-                                lang: 'en',
-                            })
-                        }}
-                        variant='destructive'
-                        className='rounded px-3 py-1 font-semibold'
-                    >
-                        {t('delete')}
-                    </Button>
-                </CardFooter>
-            </Card>
-        </>
-    )
-}
+
+// Used to get elements of array types as types
+type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
+
+export default function SectionItemCard({
+    sectionName,
+    item,
+    action,
+}: {
+    sectionName: string
+    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
+    action: any
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const utils = trpc.useUtils()
+    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 utils.hasItemsSections.listItems.invalidate({
+                sectionName: sectionName,
+            })
+            action()
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
+                        {t('itemDeletedSuccessfully')}
+                    </div>
+                ),
+                headerColor: 'bg-green-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: sectionName,
+            sectionItemId: item.id,
+        })
+    }
+
+    return (
+        <>
+            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
+                {item.coverPhoto ? (
+                    <div className='relative h-[200px]'>
+                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
+                        <ProtectedImage
+                            className='h-64 w-full object-cover'
+                            photo={item.coverPhoto}
+                            section={sectionName}
+                            isThumb={true}
+                            alt={'item'}
+                            width={100}
+                            height={50}
+                            fill={true}
+                        />
+                    </div>
+                ) : null}
+                <CardHeader className='p-6'>
+                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
+                </CardHeader>
+                <CardContent className='mt-2'>
+                    <div className='flex flex-row flex-wrap gap-1'>
+                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
+                        {displayDateFromString(item.createdAt, 'en', false, ',')}
+                    </div>
+                </CardContent>
+                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
+                    <Link
+                        href={`/edit/${sectionName}/${item.id}`}
+                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
+                    >
+                        {t('edit')}
+                    </Link>
+                    <Button
+                        onClick={() => {
+                            setModal({
+                                title: t('delete'),
+                                body: (
+                                    <div className='p-4'>
+                                        <div className='flex flex-col gap-4'>
+                                            <div>{t('deleteItemText')}</div>
+                                            <div className='flex gap-2'>
+                                                <button
+                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
+                                                    onClick={handleDelete}
+                                                >
+                                                    Yes
+                                                </button>
+                                                <button
+                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
+                                                    onClick={() => {
+                                                        setModal(null)
+                                                    }}
+                                                >
+                                                    No
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ),
+                                headerColor: 'bg-red-700',
+                                titleColor: 'text-white',
+                                lang: 'en',
+                            })
+                        }}
+                        variant='destructive'
+                        className='rounded px-3 py-1 font-semibold'
+                    >
+                        {t('delete')}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </>
+    )
+}

package/templates/default/components/sections/section-item-status-badge.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Badge } from '@/components/ui/badge'
-
-const SectionItemStatusBadge = ({ status }: { status: number }) => {
-    const t = useI18n()
-    return (
-        <Badge
-            variant={status === 1 ? 'success' : 'destructive'}
-            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
-        >
-            {status === 1 ? t('approved') : t('pendingApproval')}
-        </Badge>
-    )
-}
-
-export default SectionItemStatusBadge
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Badge } from '@/components/ui/badge'
+
+const SectionItemStatusBadge = ({ status }: { status: number }) => {
+    const t = useI18n()
+    return (
+        <Badge
+            variant={status === 1 ? 'success' : 'destructive'}
+            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
+        >
+            {status === 1 ? t('approved') : t('pendingApproval')}
+        </Badge>
+    )
+}
+
+export default SectionItemStatusBadge

package/templates/default/components/sections/select-input-buttons.tsx

@@ -1,125 +1,125 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import { useModal } from '@/components/feedback/modal-context'
-import React from 'react'
-import NewPage from '@/components/pages/new-page'
-import ItemEditPage from '@/components/pages/item-edit-page'
-import { Button } from '@/components/ui/button'
-import CategoryDeleteConfirmPage from '@/components/sections/category-delete-confirm-page'
-
-export default function SelectInputButtons({
-    section,
-    sectionTitle,
-    value,
-    parentId,
-    level,
-    refetch,
-    reset,
-    allowRecursiveDelete,
-}: {
-    section: string
-    sectionTitle: string
-    value: string | number | undefined
-    parentId: string | number | undefined
-    level: number
-    refetch: any
-    reset: any
-    allowRecursiveDelete: boolean
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const newCatInit = () => {
-        setModal({
-            title: t('addNewItem'),
-            body: (
-                <NewPage
-                    section={section}
-                    action={refetch}
-                    sectionType='categorized'
-                    hiddenInputs={[
-                        {
-                            name: 'parent_id',
-                            value: parentId,
-                        },
-                        {
-                            name: 'level',
-                            value: level.toString(),
-                        },
-                    ]}
-                />
-            ),
-            headerColor: 'bg-emerald-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'xl',
-        })
-    }
-
-    const catEditInit = () => {
-        if (value === undefined) return
-        setModal({
-            title: t('edit'),
-            body: (
-                <ItemEditPage
-                    sectionType='categorized'
-                    action={() => {
-                        refetch()
-                        reset()
-                    }}
-                    itemId={value.toString()}
-                    section={section}
-                    hiddenInputs={[
-                        {
-                            name: 'parent_id',
-                            value: parentId,
-                        },
-                        {
-                            name: 'level',
-                            value: level.toString(),
-                        },
-                    ]}
-                />
-            ),
-            headerColor: 'bg-blue-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'xl',
-        })
-    }
-
-    const catDeleteInit = () => {
-        if (value === undefined) return
-        setModal({
-            title: t('delete'),
-            body: (
-                <CategoryDeleteConfirmPage
-                    action={() => {
-                        refetch()
-                        reset()
-                    }}
-                    allowRecursiveDelete={allowRecursiveDelete}
-                    sectionTitle={sectionTitle}
-                    section={section}
-                    id={value.toString()}
-                />
-            ),
-            headerColor: 'bg-red-700',
-            titleColor: 'text-white',
-            lang: 'en',
-            size: 'lg',
-        })
-    }
-
-    return (
-        <div className='flex flex-row gap-1 pt-1'>
-            <Button variant='default' size='sm' onClick={newCatInit} type='button'>
-                {t('add')}
-            </Button>
-            <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
-                {t('edit')}
-            </Button>
-            <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
-                {t('delete')}
-            </Button>
-        </div>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import { useModal } from '@/components/feedback/modal-context'
+import React from 'react'
+import NewPage from '@/components/pages/new-page'
+import ItemEditPage from '@/components/pages/item-edit-page'
+import { Button } from '@/components/ui/button'
+import CategoryDeleteConfirmPage from '@/components/sections/category-delete-confirm-page'
+
+export default function SelectInputButtons({
+    section,
+    sectionTitle,
+    value,
+    parentId,
+    level,
+    refetch,
+    reset,
+    allowRecursiveDelete,
+}: {
+    section: string
+    sectionTitle: string
+    value: string | number | undefined
+    parentId: string | number | undefined
+    level: number
+    refetch: any
+    reset: any
+    allowRecursiveDelete: boolean
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const newCatInit = () => {
+        setModal({
+            title: t('addNewItem'),
+            body: (
+                <NewPage
+                    section={section}
+                    action={refetch}
+                    sectionType='categorized'
+                    hiddenInputs={[
+                        {
+                            name: 'parent_id',
+                            value: parentId,
+                        },
+                        {
+                            name: 'level',
+                            value: level.toString(),
+                        },
+                    ]}
+                />
+            ),
+            headerColor: 'bg-emerald-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'xl',
+        })
+    }
+
+    const catEditInit = () => {
+        if (value === undefined) return
+        setModal({
+            title: t('edit'),
+            body: (
+                <ItemEditPage
+                    sectionType='categorized'
+                    action={() => {
+                        refetch()
+                        reset()
+                    }}
+                    itemId={value.toString()}
+                    section={section}
+                    hiddenInputs={[
+                        {
+                            name: 'parent_id',
+                            value: parentId,
+                        },
+                        {
+                            name: 'level',
+                            value: level.toString(),
+                        },
+                    ]}
+                />
+            ),
+            headerColor: 'bg-blue-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'xl',
+        })
+    }
+
+    const catDeleteInit = () => {
+        if (value === undefined) return
+        setModal({
+            title: t('delete'),
+            body: (
+                <CategoryDeleteConfirmPage
+                    action={() => {
+                        refetch()
+                        reset()
+                    }}
+                    allowRecursiveDelete={allowRecursiveDelete}
+                    sectionTitle={sectionTitle}
+                    section={section}
+                    id={value.toString()}
+                />
+            ),
+            headerColor: 'bg-red-700',
+            titleColor: 'text-white',
+            lang: 'en',
+            size: 'lg',
+        })
+    }
+
+    return (
+        <div className='flex flex-row gap-1 pt-1'>
+            <Button variant='default' size='sm' onClick={newCatInit} type='button'>
+                {t('add')}
+            </Button>
+            <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
+                {t('edit')}
+            </Button>
+            <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
+                {t('delete')}
+            </Button>
+        </div>
+    )
+}