create-nextjs-cms 0.5.8

package/templates/default/components/AdminCard.tsx

@@ -0,0 +1,163 @@
+import getString from 'nextjs-cms/translations'
+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 { 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 { RouterOutputs } from 'nextjs-cms/api'
+
+export default function AdminCard({
+    admin,
+    action,
+}: {
+    admin: RouterOutputs['admins']['list']['admins'][0]
+    action: any
+}) {
+    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: getString('delete_admin'),
+                description: getString('adminDeletedSuccessfully'),
+            })
+        },
+        onError: (error) => {
+            toast({
+                variant: 'destructive',
+                title: getString('delete_admin'),
+                description: error.message,
+            })
+        },
+    })
+
+    const handleDeleteAdmin = async () => {
+        if ([1, '1'].includes(admin.id)) {
+            toast({
+                variant: 'destructive',
+                title: getString('delete_admin'),
+                description: getString('masterAdminCannotBeDeleted'),
+            })
+            return
+        }
+        deleteMutation.mutate({
+            id: admin.id,
+        })
+    }
+
+    return (
+        <Card className='flex flex-col justify-between border border-gray-400 shadow-sm'>
+            <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-inset ring-amber-300'
+                                />
+                            )}
+                        </div>
+                        <div className='flex flex-col break-all'>
+                            <div className='text-sm font-medium text-foreground'>
+                                <div className='font-bold'>{admin.username}</div>
+                            </div>
+                        </div>
+                    </div>
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <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' variant='secondary'>
+                                {role.sectionName} ({role.operations})
+                            </Badge>
+                        ))}
+                </div>
+            </CardContent>
+            <CardFooter className='flex flex-wrap gap-4'>
+                <Button
+                    variant='default'
+                    onClick={() => {
+                        setModal({
+                            title: getString('edit_admin'),
+                            body: [1, '1'].includes(admin.id) ? (
+                                <div className='p-4'>{getString('masterAdminCannotBeModified')}</div>
+                            ) : (
+                                <div className='p-4'>{<AdminEditPage id={admin.id} action={() => action()} />}</div>
+                            ),
+                            headerColor: 'bg-sky-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                            size: 'xl',
+                        })
+                    }}
+                >
+                    {getString('edit')}
+                </Button>
+                <Button
+                    variant='destructive'
+                    onClick={() => {
+                        setModal({
+                            title: getString('delete_admin'),
+                            body: [1, '1'].includes(admin.id) ? (
+                                <div className='p-4'>{getString('masterAdminCannotBeDeleted')}</div>
+                            ) : (
+                                <div className='p-4'>
+                                    <div className='flex flex-col gap-4'>
+                                        <div>{getString('delete_admin_text')}</div>
+                                        <div className='flex gap-2'>
+                                            <button
+                                                className='rounded bg-green-600 px-2 py-1 text-white'
+                                                onClick={handleDeleteAdmin}
+                                            >
+                                                Yes
+                                            </button>
+                                            <button
+                                                className='rounded bg-red-800 px-2 py-1 text-white'
+                                                onClick={() => {
+                                                    setModal(null)
+                                                }}
+                                            >
+                                                No
+                                            </button>
+                                        </div>
+                                    </div>
+                                </div>
+                            ),
+                            headerColor: 'bg-red-700',
+                            titleColor: 'text-white',
+                            lang: 'en',
+                        })
+                    }}
+                >
+                    {getString('delete')}
+                </Button>
+            </CardFooter>
+        </Card>
+    )
+}

package/templates/default/components/AdminEditPage.tsx

@@ -0,0 +1,123 @@
+import getString from 'nextjs-cms/translations'
+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 { 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: getString('edit_admin'),
+                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: getString('edit_admin'),
+                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>
+                {getString('edit_admin_text')}: {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'>{getString('admin_privileges')}</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 ? getString('removeAll') : getString('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'>
+                                {getString('save')}
+                            </button>
+                        </div>
+                    </form>
+                ) : null}
+            </div>
+        </div>
+    )
+}

package/templates/default/components/AdminPrivilegeCard.tsx

@@ -0,0 +1,184 @@
+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 getString from 'nextjs-cms/translations'
+import { Badge } from '@/components/ui/badge'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { RouterOutputs } from 'nextjs-cms/api'
+
+export default function AdminRoleCard({
+    privilege,
+    allChecked,
+    setAllChecked,
+    defaultValue = {
+        operations: 'none',
+        publisher: false,
+    }
+}: {
+    privilege: RouterOutputs['admins']['list']['privileges'][0]
+    allChecked: boolean | 'edited' | null
+    setAllChecked: React.Dispatch<React.SetStateAction<boolean | 'edited' | null>>
+    defaultValue?: {
+        operations: string
+        publisher: boolean
+    }
+}) {
+    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'
+                    >
+                        Full Access
+                    </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' : ''}`}>Publisher</span>{' '}
+                            <TooltipProvider delayDuration={0}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span>
+                                            <Badge variant='outline'>?</Badge>
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        <p>Only publishers can publish/unpublish items</p>
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
+                        </label>
+                    </div>
+                ) : null}
+
+                <div className='mt-2 flex flex-col border-t p-2'>
+                    <div className='text-sm'>Custom:</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={getString('select')} />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value='none'>
+                                <Badge variant='outline'>No Access</Badge>
+                            </SelectItem>
+                            <SelectItem value='c'>
+                                <Badge variant='secondary'>C</Badge> <span className='italic'>Create</span>
+                            </SelectItem>
+                            <SelectItem value='u'>
+                                <Badge variant='secondary'>U</Badge> <span className='italic'>Update</span>
+                            </SelectItem>
+                            <SelectItem value='d'>
+                                <Badge variant='secondary'>D</Badge> <span className='italic'>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> (All)
+                            </SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

package/templates/default/components/AdminsPage.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import AdminCard from '@/components/AdminCard'
+import getString from 'nextjs-cms/translations'
+import NewAdminForm from '@/components/NewAdminForm'
+import ContainerBox from '@/components/ContainerBox'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { trpc } from '@/app/_trpc/client'
+
+const AdminsPage = () => {
+    const { isLoading, isError, data, error, refetch } = trpc.admins.list.useQuery()
+
+    return (
+        <div className='w-full'>
+            <div className='bg-gradient-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'>{getString('admins')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-2 p-4'>
+                <ContainerBox title={getString('create_new_admin')}>
+                    {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
+                </ContainerBox>
+
+                {isLoading && (
+                    <div>
+                        <LoadingSpinners />
+                    </div>
+                )}
+                {data && data.admins && data.admins.length > 0 && (
+                    <ContainerBox title={getString('admins_list')}>
+                        <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