create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/pagination/pagination-buttons.tsx

@@ -1,147 +1,147 @@
-import React from 'react'
-import Link from 'next/link'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function PaginationButtons({
-    page,
-    totalCount,
-    limit,
-    route,
-    lang = 'ar',
-    paginationLinksToShow = 5,
-    searchParams = null,
-    useLangInRoute = false,
-}: {
-    page: number
-    totalCount: number
-    limit: number
-    route: string
-    lang?: string
-    paginationLinksToShow?: number
-    searchParams?: string | null
-    useLangInRoute?: boolean
-}) {
-    const t = useI18n()
-    // Remove first and trailing slashes from route
-    route = route.replace(/^\/|\/$/g, '')
-    const paginationLinksCount = Math.ceil(totalCount / limit)
-    let paginationLinksArray = []
-    switch (page) {
-        case 1: // If first page
-            for (let i = 1; i <= paginationLinksToShow; i++) {
-                if (i > paginationLinksCount) {
-                    continue
-                }
-
-                paginationLinksArray[i] = {
-                    route: route + '/' + i,
-                    html: i,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-                disabled: true,
-            }
-
-            let lastDisabled = true
-            if (paginationLinksCount > 1) {
-                lastDisabled = false
-            }
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-                disabled: lastDisabled,
-            }
-            break
-        case paginationLinksCount: // If last page
-            let j = paginationLinksCount
-            for (j; j > paginationLinksCount - paginationLinksToShow; j--) {
-                if (j < 1) {
-                    continue
-                }
-                paginationLinksArray[j] = {
-                    route: route + '/' + j,
-                    html: j,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-            }
-
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-                disabled: true,
-            }
-            break
-        default: // If in between
-            let start = Math.max(1, page - Math.floor(paginationLinksToShow / 2))
-            let end = Math.min(paginationLinksCount, start + paginationLinksToShow - 1)
-            start = Math.max(1, end - paginationLinksToShow + 1) // Adjust start if end is less than paginationLinksToShow
-
-            for (let i = start; i <= end; i++) {
-                paginationLinksArray[i] = {
-                    route: route + '/' + i,
-                    html: i,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-            }
-
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-            }
-            break
-    }
-
-    if (paginationLinksCount === 0) {
-        paginationLinksArray = []
-    }
-
-    return (
-        <>
-            {paginationLinksArray.map((item, i) => {
-                const href = useLangInRoute ? `${lang}/${item.route}` : item.route
-                if (i === page) {
-                    return (
-                        <div
-                            className='active rounded border border-neutral-400 bg-blue-950 px-3 py-1 text-amber-50 dark:border-neutral-100'
-                            key={i.toString()}
-                        >
-                            <span className='page-link'>{item.html}</span>
-                        </div>
-                    )
-                } else {
-                    if (item.disabled) {
-                        return (
-                            <div
-                                className='active rounded border border-neutral-400 bg-gray-300 px-3 py-1 text-black/40 opacity-70 dark:border-neutral-100 dark:bg-black dark:text-gray-500/60'
-                                key={i.toString()}
-                            >
-                                {item.html}
-                            </div>
-                        )
-                    } else {
-                        return (
-                            <Link
-                                href={searchParams ? `/${href}?${searchParams}` : `/${href}`}
-                                className='active rounded border border-neutral-400 bg-white px-3 py-1 text-blue-950 hover:bg-emerald-100 dark:border-neutral-100 dark:bg-neutral-800 dark:text-gray-50 dark:hover:bg-neutral-600'
-                                key={i.toString()}
-                            >
-                                {item.html}
-                            </Link>
-                        )
-                    }
-                }
-            })}
-        </>
-    )
-}
+import React from 'react'
+import Link from 'next/link'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function PaginationButtons({
+    page,
+    totalCount,
+    limit,
+    route,
+    lang = 'ar',
+    paginationLinksToShow = 5,
+    searchParams = null,
+    useLangInRoute = false,
+}: {
+    page: number
+    totalCount: number
+    limit: number
+    route: string
+    lang?: string
+    paginationLinksToShow?: number
+    searchParams?: string | null
+    useLangInRoute?: boolean
+}) {
+    const t = useI18n()
+    // Remove first and trailing slashes from route
+    route = route.replace(/^\/|\/$/g, '')
+    const paginationLinksCount = Math.ceil(totalCount / limit)
+    let paginationLinksArray = []
+    switch (page) {
+        case 1: // If first page
+            for (let i = 1; i <= paginationLinksToShow; i++) {
+                if (i > paginationLinksCount) {
+                    continue
+                }
+
+                paginationLinksArray[i] = {
+                    route: route + '/' + i,
+                    html: i,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+                disabled: true,
+            }
+
+            let lastDisabled = true
+            if (paginationLinksCount > 1) {
+                lastDisabled = false
+            }
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+                disabled: lastDisabled,
+            }
+            break
+        case paginationLinksCount: // If last page
+            let j = paginationLinksCount
+            for (j; j > paginationLinksCount - paginationLinksToShow; j--) {
+                if (j < 1) {
+                    continue
+                }
+                paginationLinksArray[j] = {
+                    route: route + '/' + j,
+                    html: j,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+            }
+
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+                disabled: true,
+            }
+            break
+        default: // If in between
+            let start = Math.max(1, page - Math.floor(paginationLinksToShow / 2))
+            let end = Math.min(paginationLinksCount, start + paginationLinksToShow - 1)
+            start = Math.max(1, end - paginationLinksToShow + 1) // Adjust start if end is less than paginationLinksToShow
+
+            for (let i = start; i <= end; i++) {
+                paginationLinksArray[i] = {
+                    route: route + '/' + i,
+                    html: i,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+            }
+
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+            }
+            break
+    }
+
+    if (paginationLinksCount === 0) {
+        paginationLinksArray = []
+    }
+
+    return (
+        <>
+            {paginationLinksArray.map((item, i) => {
+                const href = useLangInRoute ? `${lang}/${item.route}` : item.route
+                if (i === page) {
+                    return (
+                        <div
+                            className='active rounded border border-neutral-400 bg-blue-950 px-3 py-1 text-amber-50 dark:border-neutral-100'
+                            key={i.toString()}
+                        >
+                            <span className='page-link'>{item.html}</span>
+                        </div>
+                    )
+                } else {
+                    if (item.disabled) {
+                        return (
+                            <div
+                                className='active rounded border border-neutral-400 bg-gray-300 px-3 py-1 text-black/40 opacity-70 dark:border-neutral-100 dark:bg-black dark:text-gray-500/60'
+                                key={i.toString()}
+                            >
+                                {item.html}
+                            </div>
+                        )
+                    } else {
+                        return (
+                            <Link
+                                href={searchParams ? `/${href}?${searchParams}` : `/${href}`}
+                                className='active rounded border border-neutral-400 bg-white px-3 py-1 text-blue-950 hover:bg-emerald-100 dark:border-neutral-100 dark:bg-neutral-800 dark:text-gray-50 dark:hover:bg-neutral-600'
+                                key={i.toString()}
+                            >
+                                {item.html}
+                            </Link>
+                        )
+                    }
+                }
+            })}
+        </>
+    )
+}

package/templates/default/components/pagination/pagination.tsx

@@ -1,36 +1,36 @@
-import React from 'react'
-import PaginationButtons from '@/components/pagination/pagination-buttons'
-
-export default function Pagination({
-    page,
-    totalCount,
-    limit,
-    route,
-    lang = 'ar',
-    paginationLinksToShow,
-    searchParams = null,
-}: {
-    page: number
-    totalCount: number
-    limit: number
-    route: string
-    lang?: string
-    paginationLinksToShow?: number
-    searchParams?: string | null
-}) {
-    return (
-        <>
-            <div className='my-3 flex w-full items-center justify-center gap-1 p-3 text-center font-bold'>
-                <PaginationButtons
-                    paginationLinksToShow={paginationLinksToShow}
-                    page={page}
-                    totalCount={totalCount}
-                    limit={limit}
-                    route={route}
-                    lang={lang}
-                    searchParams={searchParams}
-                />
-            </div>
-        </>
-    )
-}
+import React from 'react'
+import PaginationButtons from '@/components/pagination/pagination-buttons'
+
+export default function Pagination({
+    page,
+    totalCount,
+    limit,
+    route,
+    lang = 'ar',
+    paginationLinksToShow,
+    searchParams = null,
+}: {
+    page: number
+    totalCount: number
+    limit: number
+    route: string
+    lang?: string
+    paginationLinksToShow?: number
+    searchParams?: string | null
+}) {
+    return (
+        <>
+            <div className='my-3 flex w-full items-center justify-center gap-1 p-3 text-center font-bold'>
+                <PaginationButtons
+                    paginationLinksToShow={paginationLinksToShow}
+                    page={page}
+                    totalCount={totalCount}
+                    limit={limit}
+                    route={route}
+                    lang={lang}
+                    searchParams={searchParams}
+                />
+            </div>
+        </>
+    )
+}

package/templates/default/components/sections/category-delete-confirm-page.tsx

@@ -1,130 +1,130 @@
-import LoadingSpinners from '@/components/feedback/loading-spinners'
-import InfoCard from '@/components/feedback/info-card'
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Button } from '@/components/ui/button'
-import { useModal } from '@/components/feedback/modal-context'
-import { useToast } from '@/components/ui/use-toast'
-import { trpc } from '@/app/_trpc/client'
-import { Switch } from '@/components/ui/switch'
-import { Label } from '@/components/ui/label'
-
-export default function CategoryDeleteConfirmPage({
-    section,
-    sectionTitle,
-    id,
-    action,
-    allowRecursiveDelete,
-}: {
-    section: string
-    sectionTitle: string
-    id: string
-    action: any
-    allowRecursiveDelete: boolean
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const { toast } = useToast()
-
-    // TODO: implement this? Basically we're getting the associated items with the category,
-    // and displaying their count to notify the admin,
-    // for now we will not delete the items, only the category
-
-    /*
-    const { isLoading, isError, data, error, refetch } = useQuery({
-        queryKey: ['confirmCategoryDeletion', section, id],
-        queryFn: () => confirmCategoryDeletion(section, id, axiosPrivate, controller),
-    })
-    */
-
-    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
-                        {error.message}
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            await action()
-            setModal(null)
-            toast({
-                title: t('delete'),
-                description: t('itemDeletedSuccessfully'),
-                variant: 'success',
-            })
-        },
-    })
-    const handleDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: section,
-            sectionItemId: id,
-        })
-    }
-
-    return (
-        <div className='flex flex-col'>
-            <div className='flex flex-col gap-3'>
-                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-red-300 via-rose-500 to-pink-400'></div>
-                    <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
-                    <span>/{t('delete')}</span>
-                </div>
-                <div className='flex flex-col gap-2 px-8 py-4'>
-                    <div className='mb-4 text-2xl'>{t('catDeleteTextLight')}</div>
-                    {deleteMutation.isPending ? (
-                        <div className='flex w-full items-center justify-center text-center'>
-                            <LoadingSpinners />
-                        </div>
-                    ) : null}
-                    <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
-                        <InfoCard
-                            result={{
-                                key: 'info',
-                                title: `${t('catDeleteWarningLight')}`,
-                                status: false,
-                            }}
-                        />
-                    </div>
-                    {allowRecursiveDelete ? (
-                        <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
-                            <InfoCard
-                                result={{
-                                    key: 'info',
-                                    title: `${t('recursiveCategoryDeleteWarning')}`,
-                                    status: false,
-                                }}
-                            />
-                            <div className='flex items-center space-x-2'>
-                                <Switch id='recursive-category-delete' />
-                                <Label htmlFor='airplane-mode'>{t('recursiveCategoryDelete')}</Label>
-                            </div>
-                        </div>
-                    ) : null}
-
-                    <div className='mt-2 flex flex-wrap gap-2'>
-                        <Button variant='destructive' onClick={handleDelete}>
-                            {t('delete')}
-                        </Button>
-
-                        <Button
-                            variant='outline'
-                            onClick={() => {
-                                setModal(null)
-                            }}
-                        >
-                            {t('cancel')}
-                        </Button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+import LoadingSpinners from '@/components/feedback/loading-spinners'
+import InfoCard from '@/components/feedback/info-card'
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Button } from '@/components/ui/button'
+import { useModal } from '@/components/feedback/modal-context'
+import { useToast } from '@/components/ui/use-toast'
+import { trpc } from '@/app/_trpc/client'
+import { Switch } from '@/components/ui/switch'
+import { Label } from '@/components/ui/label'
+
+export default function CategoryDeleteConfirmPage({
+    section,
+    sectionTitle,
+    id,
+    action,
+    allowRecursiveDelete,
+}: {
+    section: string
+    sectionTitle: string
+    id: string
+    action: any
+    allowRecursiveDelete: boolean
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const { toast } = useToast()
+
+    // TODO: implement this? Basically we're getting the associated items with the category,
+    // and displaying their count to notify the admin,
+    // for now we will not delete the items, only the category
+
+    /*
+    const { isLoading, isError, data, error, refetch } = useQuery({
+        queryKey: ['confirmCategoryDeletion', section, id],
+        queryFn: () => confirmCategoryDeletion(section, id, axiosPrivate, controller),
+    })
+    */
+
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
+                        {error.message}
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            await action()
+            setModal(null)
+            toast({
+                title: t('delete'),
+                description: t('itemDeletedSuccessfully'),
+                variant: 'success',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: section,
+            sectionItemId: id,
+        })
+    }
+
+    return (
+        <div className='flex flex-col'>
+            <div className='flex flex-col gap-3'>
+                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-red-300 via-rose-500 to-pink-400'></div>
+                    <h1 className='pb-4 text-3xl'>{sectionTitle}</h1>
+                    <span>/{t('delete')}</span>
+                </div>
+                <div className='flex flex-col gap-2 px-8 py-4'>
+                    <div className='mb-4 text-2xl'>{t('catDeleteTextLight')}</div>
+                    {deleteMutation.isPending ? (
+                        <div className='flex w-full items-center justify-center text-center'>
+                            <LoadingSpinners />
+                        </div>
+                    ) : null}
+                    <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
+                        <InfoCard
+                            result={{
+                                key: 'info',
+                                title: `${t('catDeleteWarningLight')}`,
+                                status: false,
+                            }}
+                        />
+                    </div>
+                    {allowRecursiveDelete ? (
+                        <div className='flex flex-col gap-3 rounded p-2 ring-3 ring-sky-300'>
+                            <InfoCard
+                                result={{
+                                    key: 'info',
+                                    title: `${t('recursiveCategoryDeleteWarning')}`,
+                                    status: false,
+                                }}
+                            />
+                            <div className='flex items-center space-x-2'>
+                                <Switch id='recursive-category-delete' />
+                                <Label htmlFor='airplane-mode'>{t('recursiveCategoryDelete')}</Label>
+                            </div>
+                        </div>
+                    ) : null}
+
+                    <div className='mt-2 flex flex-wrap gap-2'>
+                        <Button variant='destructive' onClick={handleDelete}>
+                            {t('delete')}
+                        </Button>
+
+                        <Button
+                            variant='outline'
+                            onClick={() => {
+                                setModal(null)
+                            }}
+                        >
+                            {t('cancel')}
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}