create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/AdminCard.tsx

@@ -1,166 +1,166 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import ProtectedImage from '@/components/ProtectedImage'
-import AdminEditPage from '@/components/AdminEditPage'
-import { useToast } from '@/components/ui/use-toast'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
-import { trpc } from '@/app/_trpc/client'
-import Image from 'next/image'
-import type { RouterOutputs } from 'nextjs-cms/api'
-export default function AdminCard({
-    admin,
-    action,
-}: {
-    admin: NonNullable<RouterOutputs['admins']['list']['admins']>[number]
-    action: () => void
-}) {
-    const t = useI18n()
-    const { setModal, modal, modalResponse, setModalResponse } = useModal()
-    const { toast } = useToast()
-
-    const deleteMutation = trpc.admins.remove.useMutation({
-        onSuccess: () => {
-            action()
-            setModal(null)
-            setModalResponse(null)
-            toast({
-                variant: 'success',
-                title: t('deleteAdmin'),
-                description: t('adminDeletedSuccessfully'),
-            })
-        },
-        onError: (error) => {
-            toast({
-                variant: 'destructive',
-                title: t('deleteAdmin'),
-                description: error.message,
-            })
-        },
-    })
-
-    const handleDeleteAdmin = async () => {
-        if ([1, '1'].includes(admin.id)) {
-            toast({
-                variant: 'destructive',
-                title: t('deleteAdmin'),
-                description: t('masterAdminCannotBeDeleted'),
-            })
-            return
-        }
-        deleteMutation.mutate({
-            id: admin.id,
-        })
-    }
-
-    return (
-        <Card className='flex flex-col justify-between border border-gray-400 shadow-xs'>
-            <CardHeader>
-                <CardTitle>
-                    <div className='flex flex-row items-center gap-2'>
-                        <div>
-                            {admin.avatar ? (
-                                <ProtectedImage
-                                    section={'admins'}
-                                    photo={admin.avatar}
-                                    isThumb={true}
-                                    alt={'admin'}
-                                    width={50}
-                                    height={50}
-                                />
-                            ) : (
-                                <Image
-                                    src='/blank_avatar.png'
-                                    height={50}
-                                    width={50}
-                                    alt={admin.username}
-                                    className='rounded-full ring-2 ring-amber-300 ring-inset'
-                                />
-                            )}
-                        </div>
-                        <div className='flex flex-col break-all'>
-                            <div className='text-foreground text-sm font-medium'>
-                                <div className='font-bold'>{admin.username}</div>
-                            </div>
-                        </div>
-                    </div>
-                </CardTitle>
-            </CardHeader>
-            <CardContent className='p-1'>
-                <ScrollArea className='bg-accent/50 h-[100px] p-2' type='always'>
-                    <div className='flex flex-wrap gap-2'>
-                        {admin.roles &&
-                            admin.roles.length > 0 &&
-                            admin.roles.map((role, index: number) => (
-                                <Badge key={index} className='border-foreground/30' variant='outline'>
-                                    {role.sectionName} ({role.operations})
-                                </Badge>
-                            ))}
-                    </div>
-                </ScrollArea>
-            </CardContent>
-            <CardFooter className='flex flex-wrap gap-4'>
-                <Button
-                    variant='default'
-                    onClick={() => {
-                        setModal({
-                            title: t('editAdmin'),
-                            body: [1, '1'].includes(admin.id) ? (
-                                <div className='p-4'>{t('masterAdminCannotBeModified')}</div>
-                            ) : (
-                                <div className='p-4'>{<AdminEditPage id={admin.id} action={() => action()} />}</div>
-                            ),
-                            headerColor: 'bg-sky-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                            size: 'xl',
-                        })
-                    }}
-                >
-                    {t('edit')}
-                </Button>
-                <Button
-                    variant='destructive'
-                    onClick={() => {
-                        setModal({
-                            title: t('deleteAdmin'),
-                            body: [1, '1'].includes(admin.id) ? (
-                                <div className='p-4'>{t('masterAdminCannotBeDeleted')}</div>
-                            ) : (
-                                <div className='p-4'>
-                                    <div className='flex flex-col gap-4'>
-                                        <div>{t('deleteAdminText')}</div>
-                                        <div className='flex gap-2'>
-                                            <button
-                                                className='rounded bg-green-600 px-2 py-1 text-white'
-                                                onClick={handleDeleteAdmin}
-                                            >
-                                                {t('yes')}
-                                            </button>
-                                            <button
-                                                className='rounded bg-red-800 px-2 py-1 text-white'
-                                                onClick={() => {
-                                                    setModal(null)
-                                                }}
-                                            >
-                                                {t('no')}
-                                            </button>
-                                        </div>
-                                    </div>
-                                </div>
-                            ),
-                            headerColor: 'bg-red-700',
-                            titleColor: 'text-white',
-                            lang: 'en',
-                        })
-                    }}
-                >
-                    {t('delete')}
-                </Button>
-            </CardFooter>
-        </Card>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import ProtectedImage from '@/components/ProtectedImage'
+import AdminEditPage from '@/components/AdminEditPage'
+import { useToast } from '@/components/ui/use-toast'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { trpc } from '@/app/_trpc/client'
+import Image from 'next/image'
+import type { RouterOutputs } from 'nextjs-cms/api'
+export default function AdminCard({
+    admin,
+    action,
+}: {
+    admin: NonNullable<RouterOutputs['admins']['list']['admins']>[number]
+    action: () => void
+}) {
+    const t = useI18n()
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const { toast } = useToast()
+
+    const deleteMutation = trpc.admins.remove.useMutation({
+        onSuccess: () => {
+            action()
+            setModal(null)
+            setModalResponse(null)
+            toast({
+                variant: 'success',
+                title: t('deleteAdmin'),
+                description: t('adminDeletedSuccessfully'),
+            })
+        },
+        onError: (error) => {
+            toast({
+                variant: 'destructive',
+                title: t('deleteAdmin'),
+                description: error.message,
+            })
+        },
+    })
+
+    const handleDeleteAdmin = async () => {
+        if ([1, '1'].includes(admin.id)) {
+            toast({
+                variant: 'destructive',
+                title: t('deleteAdmin'),
+                description: t('masterAdminCannotBeDeleted'),
+            })
+            return
+        }
+        deleteMutation.mutate({
+            id: admin.id,
+        })
+    }
+
+    return (
+        <Card className='flex flex-col justify-between border border-gray-400 shadow-xs'>
+            <CardHeader>
+                <CardTitle>
+                    <div className='flex flex-row items-center gap-2'>
+                        <div>
+                            {admin.avatar ? (
+                                <ProtectedImage
+                                    section={'admins'}
+                                    photo={admin.avatar}
+                                    isThumb={true}
+                                    alt={'admin'}
+                                    width={50}
+                                    height={50}
+                                />
+                            ) : (
+                                <Image
+                                    src='/blank_avatar.png'
+                                    height={50}
+                                    width={50}
+                                    alt={admin.username}
+                                    className='rounded-full ring-2 ring-amber-300 ring-inset'
+                                />
+                            )}
+                        </div>
+                        <div className='flex flex-col break-all'>
+                            <div className='text-foreground text-sm font-medium'>
+                                <div className='font-bold'>{admin.username}</div>
+                            </div>
+                        </div>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent className='p-1'>
+                <ScrollArea className='bg-accent/50 h-[100px] p-2' type='always'>
+                    <div className='flex flex-wrap gap-2'>
+                        {admin.roles &&
+                            admin.roles.length > 0 &&
+                            admin.roles.map((role, index: number) => (
+                                <Badge key={index} className='border-foreground/30' variant='outline'>
+                                    {role.sectionName} ({role.operations})
+                                </Badge>
+                            ))}
+                    </div>
+                </ScrollArea>
+            </CardContent>
+            <CardFooter className='flex flex-wrap gap-4'>
+                <Button
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: t('editAdmin'),
+                            body: [1, '1'].includes(admin.id) ? (
+                                <div className='p-4'>{t('masterAdminCannotBeModified')}</div>
+                            ) : (
+                                <div className='p-4'>{<AdminEditPage id={admin.id} action={() => action()} />}</div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                            size: 'xl',
+                        })
+                    }}
+                >
+                    {t('edit')}
+                </Button>
+                <Button
+                    variant='destructive'
+                    onClick={() => {
+                        setModal({
+                            title: t('deleteAdmin'),
+                            body: [1, '1'].includes(admin.id) ? (
+                                <div className='p-4'>{t('masterAdminCannotBeDeleted')}</div>
+                            ) : (
+                                <div className='p-4'>
+                                    <div className='flex flex-col gap-4'>
+                                        <div>{t('deleteAdminText')}</div>
+                                        <div className='flex gap-2'>
+                                            <button
+                                                className='rounded bg-green-600 px-2 py-1 text-white'
+                                                onClick={handleDeleteAdmin}
+                                            >
+                                                {t('yes')}
+                                            </button>
+                                            <button
+                                                className='rounded bg-red-800 px-2 py-1 text-white'
+                                                onClick={() => {
+                                                    setModal(null)
+                                                }}
+                                            >
+                                                {t('no')}
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ),
+                            headerColor: 'bg-red-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {t('delete')}
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}

package/templates/default/components/AdminEditPage.tsx

@@ -1,124 +1,124 @@
-import { useI18n } from 'nextjs-cms/translations/client'
-import React from 'react'
-import useModal from '@/hooks/useModal'
-import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from './AdminPrivilegeCard'
-import LoadingSpinners from './LoadingSpinners'
-import { Button } from '@/components/ui/button'
-
-export default function AdminEditPage({ id, action }: { id: string; action: any }) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
-    const utils = trpc.useUtils()
-
-    const submitMutation = trpc.admins.update.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('editAdmin'),
-                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: (data) => {
-            action()
-            utils.admins.get.invalidate(id)
-            setModal({
-                title: t('editAdmin'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
-                        {data.status}
-                    </div>
-                ),
-                headerColor: 'bg-green-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-    })
-
-    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault()
-
-        const data = new FormData(e.currentTarget)
-        const values = Object.fromEntries(data.entries())
-
-        /**
-         * Convert the privileges to an array of objects
-         */
-        const privileges = Object.entries(values).filter(([key]) => key.includes('privileges'))
-        const privilegesArray = privileges.map(([key, value]) => JSON.parse(value as string))
-
-        submitMutation.mutate({
-            id: id,
-            privileges: privilegesArray,
-        })
-    }
-
-    const { data, error, isLoading, isError } = trpc.admins.get.useQuery(id)
-    if (isError) {
-        return <div>{error?.message}</div>
-    }
-    return (
-        <div>
-            <h2>
-                {t('editAdminText')}: {data?.admin.user}
-            </h2>
-            <div>
-                {isLoading ? <LoadingSpinners /> : null}
-                {data && data.allRoles && data.allRoles.length > 0 ? (
-                    <form onSubmit={handleSubmit}>
-                        <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
-                        <div className='flex'>
-                            <Button
-                                className='border border-foreground'
-                                type='button'
-                                variant={allChecked === true ? 'default' : 'secondary'}
-                                onClick={(event) => {
-                                    event.preventDefault()
-                                    event.stopPropagation()
-                                    if (allChecked === true) {
-                                        setAllChecked(false)
-                                    } else {
-                                        setAllChecked(true)
-                                    }
-                                }}
-                            >
-                                {allChecked === true ? t('removeAll') : t('checkAll')}
-                            </Button>
-                        </div>
-                        <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
-                            {data.allRoles.map((role, index: number) => {
-                                const defaultValue = data.adminRoles.find((r) => r.sectionName === role.sectionName)
-                                return (
-                                    <AdminRoleCard
-                                        key={index}
-                                        privilege={role}
-                                        allChecked={allChecked}
-                                        setAllChecked={setAllChecked}
-                                        defaultValue={{
-                                            operations: defaultValue?.operations.toLowerCase() || 'none',
-                                            publisher: defaultValue?.publisher || false,
-                                        }}
-                                    />
-                                )
-                            })}
-                        </div>
-                        <div className='mt-4'>
-                            <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
-                                {t('save')}
-                            </button>
-                        </div>
-                    </form>
-                ) : null}
-            </div>
-        </div>
-    )
-}
+import { useI18n } from 'nextjs-cms/translations/client'
+import React from 'react'
+import useModal from '@/hooks/useModal'
+import { trpc } from '@/app/_trpc/client'
+import AdminRoleCard from './AdminPrivilegeCard'
+import LoadingSpinners from './LoadingSpinners'
+import { Button } from '@/components/ui/button'
+
+export default function AdminEditPage({ id, action }: { id: string; action: any }) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const [allChecked, setAllChecked] = React.useState<boolean | 'edited' | null>(null)
+    const utils = trpc.useUtils()
+
+    const submitMutation = trpc.admins.update.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('editAdmin'),
+                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: (data) => {
+            action()
+            utils.admins.get.invalidate(id)
+            setModal({
+                title: t('editAdmin'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
+                        {data.status}
+                    </div>
+                ),
+                headerColor: 'bg-green-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+    })
+
+    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+
+        const data = new FormData(e.currentTarget)
+        const values = Object.fromEntries(data.entries())
+
+        /**
+         * Convert the privileges to an array of objects
+         */
+        const privileges = Object.entries(values).filter(([key]) => key.includes('privileges'))
+        const privilegesArray = privileges.map(([key, value]) => JSON.parse(value as string))
+
+        submitMutation.mutate({
+            id: id,
+            privileges: privilegesArray,
+        })
+    }
+
+    const { data, error, isLoading, isError } = trpc.admins.get.useQuery(id)
+    if (isError) {
+        return <div>{error?.message}</div>
+    }
+    return (
+        <div>
+            <h2>
+                {t('editAdminText')}: {data?.admin.user}
+            </h2>
+            <div>
+                {isLoading ? <LoadingSpinners /> : null}
+                {data && data.allRoles && data.allRoles.length > 0 ? (
+                    <form onSubmit={handleSubmit}>
+                        <div className='mt-5 w-full font-semibold'>{t('adminPrivileges')}</div>
+                        <div className='flex'>
+                            <Button
+                                className='border border-foreground'
+                                type='button'
+                                variant={allChecked === true ? 'default' : 'secondary'}
+                                onClick={(event) => {
+                                    event.preventDefault()
+                                    event.stopPropagation()
+                                    if (allChecked === true) {
+                                        setAllChecked(false)
+                                    } else {
+                                        setAllChecked(true)
+                                    }
+                                }}
+                            >
+                                {allChecked === true ? t('removeAll') : t('checkAll')}
+                            </Button>
+                        </div>
+                        <div className='mt-2 grid w-full grid-cols-1 gap-2 md-sidebar:grid-cols-2 lg-sidebar:grid-cols-3 xl-sidebar:grid-cols-4 2xl-sidebar:grid-cols-5'>
+                            {data.allRoles.map((role, index: number) => {
+                                const defaultValue = data.adminRoles.find((r) => r.sectionName === role.sectionName)
+                                return (
+                                    <AdminRoleCard
+                                        key={index}
+                                        privilege={role}
+                                        allChecked={allChecked}
+                                        setAllChecked={setAllChecked}
+                                        defaultValue={{
+                                            operations: defaultValue?.operations.toLowerCase() || 'none',
+                                            publisher: defaultValue?.publisher || false,
+                                        }}
+                                    />
+                                )
+                            })}
+                        </div>
+                        <div className='mt-4'>
+                            <button type='submit' className='rounded bg-blue-700 px-2 py-1 font-bold text-white'>
+                                {t('save')}
+                            </button>
+                        </div>
+                    </form>
+                ) : null}
+            </div>
+        </div>
+    )
+}