create-nextjs-cms 0.5.8

package/templates/default/components/SelectInputButtons.tsx

@@ -0,0 +1,124 @@
+import getString from 'nextjs-cms/translations'
+import useModal from '@/hooks/useModal'
+import React from 'react'
+import NewPage from '@/components/NewPage'
+import ItemEditPage from '@/components/ItemEditPage'
+import { Button } from '@/components/ui/button'
+import CategoryDeleteConfirmPage from '@/components/CategoryDeleteConfirmPage'
+
+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 { setModal } = useModal()
+    const newCatInit = () => {
+        setModal({
+            title: getString('add_new_item'),
+            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: getString('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: getString('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'>
+                {getString('add')}
+            </Button>
+            <Button variant='secondary' size='sm' onClick={catEditInit} type='button' disabled={value === undefined}>
+                {getString('edit')}
+            </Button>
+            <Button variant='destructive' size='sm' onClick={catDeleteInit} disabled={value === undefined}>
+                {getString('delete')}
+            </Button>
+        </div>
+    )
+}

package/templates/default/components/SettingsPage.tsx

@@ -0,0 +1,238 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import getString from 'nextjs-cms/translations'
+import useModal from '@/hooks/useModal'
+import InfoCard from '@/components/InfoCard'
+import LoadingSpinners from '@/components/LoadingSpinners'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import Form from '@/components/form/Form'
+
+export default function SettingsPage() {
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const { setModal, modal, modalResponse, setModalResponse } = useModal()
+    const controller = new AbortController()
+    const { toast } = useToast()
+
+    const { isLoading, isError, data, error, refetch } = trpc.accountSettings.get.useQuery()
+
+    const passwordChangeMutation = trpc.accountSettings.changePassword.useMutation({
+        onError: (error) => {
+            setIsSubmitting(false)
+            setModal({
+                title: getString('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            setIsSubmitting(false)
+            if (data === true) {
+                // Refetch the page
+                await refetch()
+
+                toast({
+                    title: getString('success'),
+                    description: getString('success'),
+                    duration: 2000,
+                })
+            }
+        },
+    })
+
+    const saveMutation = trpc.accountSettings.save.useMutation({
+        onError: (error) => {
+            setIsSubmitting(false)
+            setModal({
+                title: getString('error'),
+                body: (
+                    <div className='p-4'>
+                        <InfoCard result={{ key: 'danger', title: error.message }} />
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            setIsSubmitting(false)
+            if (data === true) {
+                // Refetch the page
+                await refetch()
+
+                toast({
+                    title: getString('success'),
+                    description: getString('success'),
+                    duration: 2000,
+                })
+            }
+        },
+    })
+
+    const handlePasswordChange = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        passwordChangeMutation.mutate({
+            oldPassword: formData.get('oldPassword') as string,
+            newPassword: formData.get('newPassword') as string,
+            confirmPassword: formData.get('confirmPassword') as string,
+        })
+    }
+
+    const handleSubmit = async (formData: FormData) => {
+        setIsSubmitting(true)
+        if (isSubmitting) return
+        saveMutation.mutate({
+            emailAddress: formData.get('emailAddress') as string,
+            fullName: formData.get('name') as string,
+            phoneNumber: formData.get('phoneNumber') as string,
+        })
+    }
+
+    function cancelSubmit() {
+        controller.abort()
+        setIsSubmitting(false)
+    }
+
+    useEffect(() => {
+        return () => {
+            cancelSubmit()
+        }
+    }, [])
+
+    return (
+        <div>
+            <div className='w-full overflow-hidden bg-background'>
+                <div className='bg-gradient-to-r from-rose-200 via-rose-400 to-sky-400 p-8 font-extrabold text-black'>
+                    <h1 className='text-3xl'>{getString('accountSettings')}</h1>
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='flex flex-col'>
+                        {isLoading ? (
+                            <div>
+                                <LoadingSpinners />
+                            </div>
+                        ) : (
+                            <>
+                                <Form
+                                    buttonType='small'
+                                    data={{
+                                        section: {
+                                            name: 'settings',
+                                        },
+
+                                        inputGroups: [
+                                            {
+                                                groupId: 1,
+                                                groupTitle: getString('adminDetails'),
+                                                groupOrder: 1,
+                                                inputs: [
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: getString('username'),
+                                                        name: 'username',
+                                                        value: data?.username,
+                                                        readonly: true,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: getString('name'),
+                                                        name: 'name',
+                                                        value: data?.fullName,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: getString('emailAddress'),
+                                                        name: 'emailAddress',
+                                                        value: data?.emailAddress,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'text',
+                                                        required: false,
+                                                        label: getString('phoneNumber'),
+                                                        name: 'phoneNumber',
+                                                        value: data?.phoneNumber,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    }}
+                                    handleSubmit={handleSubmit}
+                                    isSubmitting={isSubmitting}
+                                />
+                                <hr />
+                                <Form
+                                    buttonType='small'
+                                    data={{
+                                        section: {
+                                            name: 'settings',
+                                        },
+
+                                        inputGroups: [
+                                            {
+                                                groupId: 1,
+                                                groupTitle: getString('password'),
+                                                groupOrder: 1,
+                                                inputs: [
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: getString('oldPassword'),
+                                                        name: 'oldPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: getString('new_password'),
+                                                        name: 'newPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                    {
+                                                        type: 'password',
+                                                        required: true,
+                                                        label: getString('confirm_new_password'),
+                                                        name: 'confirmPassword',
+                                                        value: undefined,
+                                                        readonly: false,
+                                                        conditionalFields: [],
+                                                    },
+                                                ],
+                                            },
+                                        ],
+                                    }}
+                                    handleSubmit={handlePasswordChange}
+                                    isSubmitting={isSubmitting}
+                                />
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/Sidebar.tsx

@@ -0,0 +1,209 @@
+import React from 'react'
+import classNames from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+import { SidebarProps } from 'nextjs-cms/core/types'
+import SidebarItem from '@/components/SidebarItem'
+import SidebarDropdownItem from '@/components/SidebarDropdownItem'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import getString from 'nextjs-cms/translations'
+import ProtectedImage from '@/components/ProtectedImage'
+import { trpc } from '@/app/_trpc/client'
+import { useToast } from '@/components/ui/use-toast'
+import { logout, useSession } from 'nextjs-cms/auth/react'
+
+const Sidebar = (props: SidebarProps) => {
+    const session = useSession()
+    const { isLoading, isError, data: navItems, error } = trpc.navigation.getSidebar.useQuery()
+    const { toast } = useToast()
+    const handleLogout = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            await logout()
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                title: getString('logoutError'),
+                description: error.message,
+            })
+        }
+    }
+    return (
+        <div
+            className={classNames({
+                'fixed z-20 h-full bg-gradient-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950 md:translate-x-0':
+                    true,
+                'transition-all duration-100 ease-in-out': true,
+                'w-[300px] md:w-[275px]': true,
+                '-translate-x-full': !props.mobileSidebar,
+            })}
+        >
+            <div
+                className={classNames({
+                    'sticky inset-0 flex h-screen flex-col justify-between overflow-auto md:h-full': true,
+                })}
+            >
+                {/* logo and collapse button */}
+                <div
+                    className={classNames({
+                        'sticky top-0 flex h-[65px] items-center bg-indigo-700 transition-none dark:bg-slate-900': true,
+                        'justify-between p-4': true,
+                    })}
+                >
+                    <span className='bg-gray-800 px-2 font-bold tracking-tighter text-amber-200 ring-1 ring-sky-500 transition-all duration-150 hover:bg-transparent hover:font-normal hover:tracking-[1em] hover:ring-0'>
+                        LAZEMNI
+                    </span>
+                </div>
+                <ScrollArea type='always' className='flex-grow'>
+                    <ul
+                        className={classNames({
+                            'my-2 flex flex-col items-stretch gap-2': true,
+                        })}
+                    >
+                        {/*<div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
+                            <h2 className='my-2 text-xs text-gray-300'>Temp</h2>
+                            <SidebarItem
+                                key={123}
+                                item={{
+                                    path: '/temp',
+                                    title: 'Temp',
+                                }}
+                            />
+                        </div>*/}
+                        {navItems && (
+                            <>
+                                {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-primary/40 py-2'>
+                                        <h2 className='my-2 text-xs text-gray-300'>Main</h2>
+                                        {navItems.fixed_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.cat_sections && navItems.cat_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-primary/40 py-2'>
+                                        <h2 className='my-2 text-xs text-gray-300'>Category Sections</h2>
+                                        {navItems.cat_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-primary/40 py-2'>
+                                        <h2 className='my-2 text-xs text-gray-300'>Sections with Items</h2>
+                                        <div className='flex flex-col gap-y-2'>
+                                            {navItems.has_items_sections.map((item, index) => {
+                                                return (
+                                                    <SidebarDropdownItem
+                                                        closeSideBar={props.closeSideBar}
+                                                        key={index}
+                                                        item={item}
+                                                    />
+                                                )
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+                                {navItems.simple_sections && navItems.simple_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
+                                        <h2 className='my-2 text-xs text-gray-300'>Simple Sections</h2>
+                                        {navItems.simple_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+                                <div className='mx-3 flex flex-col py-2'>
+                                    <h2 className='my-2 text-xs text-gray-300'>Settings</h2>
+                                    <SidebarItem
+                                        closeSideBar={props.closeSideBar}
+                                        key={101}
+                                        item={{
+                                            path: '/settings',
+                                            title: getString('accountSettings'),
+                                        }}
+                                    />
+                                    <SidebarItem
+                                        closeSideBar={props.closeSideBar}
+                                        key={102}
+                                        item={{
+                                            path: '/advanced',
+                                            title: getString('advancedSettings'),
+                                        }}
+                                    />
+                                    <Link
+                                        href='#'
+                                        onClick={handleLogout}
+                                        className={classNames({
+                                            'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                                            'transition-colors duration-100': false, //animation
+                                            'gap-4 p-2': true,
+                                        })}
+                                    >
+                                        <span>{getString('logout')}</span>
+                                    </Link>
+                                </div>
+                            </>
+                        )}
+                    </ul>
+                </ScrollArea>
+                <div
+                    className={classNames({
+                        'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
+                    })}
+                >
+                    <div className='flex h-12 items-center gap-4'>
+                        {session?.data?.user.image ? (
+                            <ProtectedImage
+                                section={'admins'}
+                                photo={session.data.user.image}
+                                isThumb={true}
+                                alt={session?.data?.user.name}
+                                width={40}
+                                height={40}
+                                // fill={true}
+                                className='rounded-full ring ring-foreground'
+                            />
+                        ) : (
+                            <Image
+                                src='/blank_avatar.png'
+                                height={36}
+                                width={36}
+                                alt='profile image'
+                                className='rounded-full ring-2 ring-inset ring-amber-300'
+                            />
+                        )}
+
+                        <div className='flex flex-col'>
+                            <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
+                            <Link href='/settings' className='text-sm text-indigo-200'>
+                                {getString('settings')}
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Sidebar

package/templates/default/components/SidebarDropdownItem.tsx

@@ -0,0 +1,74 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+import React, { useState } from 'react'
+import { SidebarItemProps } from 'nextjs-cms/core/types'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusCircleIcon, PlusIcon } from 'lucide-react'
+
+export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
+    const [parent, enableAnimations] = useAutoAnimate(/* optional config */)
+    const [open, setOpen] = useState(false)
+    return (
+        <div ref={parent}>
+            <div
+                className={classNames({
+                    'flex text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                    'transition-colors duration-100': false, //animation
+                    'gap-4 rounded-md p-2': true,
+                    'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
+                })}
+                onClick={() => setOpen((prev) => !prev)}
+            >
+                <li className='relative flex w-full items-center justify-between gap-2'>
+                    {/*<span>{item.icon}</span>*/}
+                    <span>{item.title}</span>
+                    <span>
+                        {open ? <ChevronUpIcon className='h-5 w-5' /> : <ChevronDownIcon className='h-5 w-5' />}
+                    </span>
+                </li>
+            </div>
+            {open && (
+                <div
+                    className={classNames({
+                        'rounded border border-t-0 border-indigo-700/50 text-white dark:border-emerald-600/50': true, //colors
+                        'transition-colors duration-100': false, //animation
+                        'flex flex-col items-stretch rounded-md rounded-t-none py-2': true,
+                    })}
+                >
+                    <Link
+                        onClick={closeSideBar}
+                        href={`/new${item.path}`}
+                        className={classNames({
+                            'flex rounded text-white hover:underline': true, //colors
+                            'transition-colors duration-100': false, //animation
+                            'mx-3 gap-4 p-2': true,
+                        })}
+                    >
+                        <li className='flex flex-row items-center gap-1'>
+                            <span>
+                                <PlusIcon className='size-4' />
+                            </span>
+                            <span>New</span>
+                        </li>
+                    </Link>
+                    <Link
+                        onClick={closeSideBar}
+                        href={`/browse${item.path}`}
+                        className={classNames({
+                            'flex rounded text-white hover:underline': true, //colors
+                            'transition-colors duration-100': false, //animation
+                            'mx-3 gap-4 p-2': true,
+                        })}
+                    >
+                        <li className='flex flex-row items-center gap-1'>
+                            <span>
+                                <FolderIcon className='size-4' />
+                            </span>
+                            <span>Browse</span>
+                        </li>
+                    </Link>
+                </div>
+            )}
+        </div>
+    )
+}

package/templates/default/components/SidebarItem.tsx

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+import { SidebarItemProps } from 'nextjs-cms/core/types'
+
+export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
+    return (
+        <Link
+            onClick={closeSideBar}
+            href={item.path}
+            className={classNames({
+                'rounded-lg text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                'transition-colors duration-100': false, //animation
+                'gap-4 p-2': true,
+            })}
+        >
+            <span>{item.title}</span>
+        </Link>
+    )
+}

package/templates/default/components/TempPage.tsx

@@ -0,0 +1,12 @@
+'use client'
+
+import { trpc } from '@/app/_trpc/client'
+
+export default function TempPage() {
+    const hello = trpc.getHello1.useQuery()
+    return (
+        <div>
+            <p>api data: {JSON.stringify(hello.data)}</p>
+        </div>
+    )
+}