create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/AdminPrivilegeCard.tsx

@@ -1,185 +1,185 @@
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import { Checkbox } from '@/components/ui/checkbox'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
-import React, { useEffect } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Badge } from '@/components/ui/badge'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import type { RouterOutputs } from 'nextjs-cms/api'
-
-export default function AdminRoleCard({
-    privilege,
-    allChecked,
-    setAllChecked,
-    defaultValue = {
-        operations: 'none',
-        publisher: false,
-    }
-}: {
-    privilege: NonNullable<RouterOutputs['admins']['list']['privileges']>[number]
-    allChecked: boolean | 'edited' | null
-    setAllChecked: React.Dispatch<React.SetStateAction<boolean | 'edited' | null>>
-    defaultValue?: {
-        operations: string
-        publisher: boolean
-    }
-}) {
-    const t = useI18n()
-    const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(defaultValue.operations === 'cud')  
-    const [publisherChecked, setPublisherChecked] = React.useState<boolean>(defaultValue.publisher)
-    const [value, setValue] = React.useState<string>(defaultValue.operations)
-
-    useEffect(() => {
-        if(allChecked === null) return
-        if (allChecked === true) {
-            setChecked(true)
-            setValue('cud')
-            setPublisherChecked(true)
-        } else if (allChecked === false) {
-            setChecked(false)
-            setValue('none')
-            setPublisherChecked(false)
-        }
-    }, [allChecked])
-
-    return (
-        <Card className='flex flex-col'>
-            <CardHeader>
-                <CardTitle>{privilege.title}</CardTitle>
-            </CardHeader>
-            <CardContent>
-                <input
-                    type='hidden'
-                    name={`privileges[${privilege.sectionName}]`}
-                    value={JSON.stringify({
-                        operations: value,
-                        publisher: privilege.sectionType === 'has_items' ? publisherChecked : null,
-                        sectionName: privilege.sectionName,
-                    })}
-                />
-                <div className='flex flex-row'>
-                    <Checkbox
-                        onClick={() => {
-                            setChecked(() => {
-                                switch (checked) {
-                                    case 'indeterminate':
-                                        setValue('none')
-                                        setPublisherChecked(false)
-                                        setAllChecked('edited')
-                                        return false
-                                    case false:
-                                        setValue('cud')
-                                        return true
-                                    case true:
-                                        setValue('none')
-                                        setPublisherChecked(false)
-                                        setAllChecked('edited')
-                                        return false
-                                }
-                            })
-                        }}
-                        checked={checked}
-                        // name={privilege.title}
-                        id={privilege.title + '_new'}
-                    />
-                    <label
-                        htmlFor={privilege.title + '_new'}
-                        className='ms-2 block text-sm font-medium text-foreground'
-                    >
-                        {t('fullAccess')}
-                    </label>
-                </div>
-
-                {privilege.sectionType === 'has_items' ? (
-                    <div className='flex flex-row'>
-                        <Checkbox
-                            disabled={value === 'none'}
-                            onClick={() => {
-                                if (publisherChecked) {
-                                    setAllChecked('edited')
-                                }
-                                setPublisherChecked(!publisherChecked)
-                            }}
-                            checked={value === 'none' ? false : publisherChecked}
-                            // name={`${privilege.title}_publisher`}
-                            id={`${privilege.title}_publisher`}
-                        />
-                        <label
-                            htmlFor={`${privilege.title}_publisher`}
-                            className={`ms-2 block text-sm font-medium text-foreground`}
-                        >
-                            <span className={`${value === 'none' ? 'opacity-40' : ''}`}>{t('publisher')}</span>{' '}
-                            <TooltipProvider delayDuration={0}>
-                                <Tooltip>
-                                    <TooltipTrigger asChild>
-                                        <span>
-                                            <Badge variant='outline'>?</Badge>
-                                        </span>
-                                    </TooltipTrigger>
-                                    <TooltipContent>
-                                        <p>{t('publisherTooltip')}</p>
-                                    </TooltipContent>
-                                </Tooltip>
-                            </TooltipProvider>
-                        </label>
-                    </div>
-                ) : null}
-
-                <div className='mt-2 flex flex-col border-t p-2'>
-                    <div className='text-sm'>{t('customAccess')}</div>
-                    <Select
-                        defaultValue={'none'}
-                        value={value}
-                        onValueChange={(value: string) => {
-                            setValue(value)
-                            switch (value) {
-                                case 'cud':
-                                    setChecked(true)
-                                    break
-                                case 'none':
-                                    setChecked(false)
-                                    setPublisherChecked(false)
-                                    setAllChecked('edited')
-                                    break
-                                default:
-                                    setChecked('indeterminate')
-                                    setAllChecked('edited')
-                                    break
-                            }
-                        }}
-                    >
-                        <SelectTrigger className='w-[180px]'>
-                            <SelectValue placeholder={t('select')} />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectItem value='none'>
-                                <Badge variant='outline'>{t('noAccess')}</Badge>
-                            </SelectItem>
-                            <SelectItem value='c'>
-                                <Badge variant='secondary'>C</Badge> <span className='italic'>{t('create')}</span>
-                            </SelectItem>
-                            <SelectItem value='u'>
-                                <Badge variant='secondary'>U</Badge> <span className='italic'>{t('update')}</span>
-                            </SelectItem>
-                            <SelectItem value='d'>
-                                <Badge variant='secondary'>D</Badge> <span className='italic'>{t('delete')}</span>
-                            </SelectItem>
-                            <SelectItem value='cu'>
-                                <Badge variant='secondary'>C + U</Badge>
-                            </SelectItem>
-                            <SelectItem value='cd'>
-                                <Badge variant='secondary'>C + D</Badge>
-                            </SelectItem>
-                            <SelectItem value='ud'>
-                                <Badge variant='secondary'>U + D</Badge>
-                            </SelectItem>
-                            <SelectItem value='cud'>
-                                <Badge variant='success'>C + U + D</Badge> {t('allPermissions')}
-                            </SelectItem>
-                        </SelectContent>
-                    </Select>
-                </div>
-            </CardContent>
-        </Card>
-    )
-}
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { Checkbox } from '@/components/ui/checkbox'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import React, { useEffect } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import type { RouterOutputs } from 'nextjs-cms/api'
+
+export default function AdminRoleCard({
+    privilege,
+    allChecked,
+    setAllChecked,
+    defaultValue = {
+        operations: 'none',
+        publisher: false,
+    }
+}: {
+    privilege: NonNullable<RouterOutputs['admins']['list']['privileges']>[number]
+    allChecked: boolean | 'edited' | null
+    setAllChecked: React.Dispatch<React.SetStateAction<boolean | 'edited' | null>>
+    defaultValue?: {
+        operations: string
+        publisher: boolean
+    }
+}) {
+    const t = useI18n()
+    const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(defaultValue.operations === 'cud')  
+    const [publisherChecked, setPublisherChecked] = React.useState<boolean>(defaultValue.publisher)
+    const [value, setValue] = React.useState<string>(defaultValue.operations)
+
+    useEffect(() => {
+        if(allChecked === null) return
+        if (allChecked === true) {
+            setChecked(true)
+            setValue('cud')
+            setPublisherChecked(true)
+        } else if (allChecked === false) {
+            setChecked(false)
+            setValue('none')
+            setPublisherChecked(false)
+        }
+    }, [allChecked])
+
+    return (
+        <Card className='flex flex-col'>
+            <CardHeader>
+                <CardTitle>{privilege.title}</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <input
+                    type='hidden'
+                    name={`privileges[${privilege.sectionName}]`}
+                    value={JSON.stringify({
+                        operations: value,
+                        publisher: privilege.sectionType === 'has_items' ? publisherChecked : null,
+                        sectionName: privilege.sectionName,
+                    })}
+                />
+                <div className='flex flex-row'>
+                    <Checkbox
+                        onClick={() => {
+                            setChecked(() => {
+                                switch (checked) {
+                                    case 'indeterminate':
+                                        setValue('none')
+                                        setPublisherChecked(false)
+                                        setAllChecked('edited')
+                                        return false
+                                    case false:
+                                        setValue('cud')
+                                        return true
+                                    case true:
+                                        setValue('none')
+                                        setPublisherChecked(false)
+                                        setAllChecked('edited')
+                                        return false
+                                }
+                            })
+                        }}
+                        checked={checked}
+                        // name={privilege.title}
+                        id={privilege.title + '_new'}
+                    />
+                    <label
+                        htmlFor={privilege.title + '_new'}
+                        className='ms-2 block text-sm font-medium text-foreground'
+                    >
+                        {t('fullAccess')}
+                    </label>
+                </div>
+
+                {privilege.sectionType === 'has_items' ? (
+                    <div className='flex flex-row'>
+                        <Checkbox
+                            disabled={value === 'none'}
+                            onClick={() => {
+                                if (publisherChecked) {
+                                    setAllChecked('edited')
+                                }
+                                setPublisherChecked(!publisherChecked)
+                            }}
+                            checked={value === 'none' ? false : publisherChecked}
+                            // name={`${privilege.title}_publisher`}
+                            id={`${privilege.title}_publisher`}
+                        />
+                        <label
+                            htmlFor={`${privilege.title}_publisher`}
+                            className={`ms-2 block text-sm font-medium text-foreground`}
+                        >
+                            <span className={`${value === 'none' ? 'opacity-40' : ''}`}>{t('publisher')}</span>{' '}
+                            <TooltipProvider delayDuration={0}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span>
+                                            <Badge variant='outline'>?</Badge>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>{t('publisherTooltip')}</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        </label>
+                    </div>
+                ) : null}
+
+                <div className='mt-2 flex flex-col border-t p-2'>
+                    <div className='text-sm'>{t('customAccess')}</div>
+                    <Select
+                        defaultValue={'none'}
+                        value={value}
+                        onValueChange={(value: string) => {
+                            setValue(value)
+                            switch (value) {
+                                case 'cud':
+                                    setChecked(true)
+                                    break
+                                case 'none':
+                                    setChecked(false)
+                                    setPublisherChecked(false)
+                                    setAllChecked('edited')
+                                    break
+                                default:
+                                    setChecked('indeterminate')
+                                    setAllChecked('edited')
+                                    break
+                            }
+                        }}
+                    >
+                        <SelectTrigger className='w-[180px]'>
+                            <SelectValue placeholder={t('select')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value='none'>
+                                <Badge variant='outline'>{t('noAccess')}</Badge>
+                            </SelectItem>
+                            <SelectItem value='c'>
+                                <Badge variant='secondary'>C</Badge> <span className='italic'>{t('create')}</span>
+                            </SelectItem>
+                            <SelectItem value='u'>
+                                <Badge variant='secondary'>U</Badge> <span className='italic'>{t('update')}</span>
+                            </SelectItem>
+                            <SelectItem value='d'>
+                                <Badge variant='secondary'>D</Badge> <span className='italic'>{t('delete')}</span>
+                            </SelectItem>
+                            <SelectItem value='cu'>
+                                <Badge variant='secondary'>C + U</Badge>
+                            </SelectItem>
+                            <SelectItem value='cd'>
+                                <Badge variant='secondary'>C + D</Badge>
+                            </SelectItem>
+                            <SelectItem value='ud'>
+                                <Badge variant='secondary'>U + D</Badge>
+                            </SelectItem>
+                            <SelectItem value='cud'>
+                                <Badge variant='success'>C + U + D</Badge> {t('allPermissions')}
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

package/templates/default/components/AdminsPage.tsx

@@ -1,43 +1,43 @@
-'use client'
-
-import AdminCard from '@/components/AdminCard'
-import { useI18n } from 'nextjs-cms/translations/client'
-import NewAdminForm from '@/components/NewAdminForm'
-import ContainerBox from '@/components/ContainerBox'
-import { trpc } from '@/app/_trpc/client'
-import ErrorComponent from './ErrorComponent'
-
-const AdminsPage = () => {
-    const t = useI18n()
-    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
-
-    if (data.error) {
-        return <ErrorComponent message={data.error.message} />
-    }
-    
-    return (
-        <div className='w-full'>
-            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{t('admins')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={t('createNewAdmin')}>
-                    {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
-                </ContainerBox>
-
-                {data && data.admins && data.admins.length > 0 && (
-                    <ContainerBox title={t('adminsList')}>
-                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
-                            {data.admins.map((admin) => (
-                                <AdminCard key={admin.id} action={() => refetch()} admin={admin} />
-                            ))}
-                        </div>
-                    </ContainerBox>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default AdminsPage
+'use client'
+
+import AdminCard from '@/components/AdminCard'
+import { useI18n } from 'nextjs-cms/translations/client'
+import NewAdminForm from '@/components/NewAdminForm'
+import ContainerBox from '@/components/ContainerBox'
+import { trpc } from '@/app/_trpc/client'
+import ErrorComponent from './ErrorComponent'
+
+const AdminsPage = () => {
+    const t = useI18n()
+    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
+
+    if (data.error) {
+        return <ErrorComponent message={data.error.message} />
+    }
+    
+    return (
+        <div className='w-full'>
+            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{t('admins')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-2 p-4'>
+                <ContainerBox title={t('createNewAdmin')}>
+                    {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
+                </ContainerBox>
+
+                {data && data.admins && data.admins.length > 0 && (
+                    <ContainerBox title={t('adminsList')}>
+                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
+                            {data.admins.map((admin) => (
+                                <AdminCard key={admin.id} action={() => refetch()} admin={admin} />
+                            ))}
+                        </div>
+                    </ContainerBox>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default AdminsPage