TZGyn
/
next-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New feature: category table

Browse Source
master
TZGyn 2 years ago
parent 4f0cfae03b
commit f68e17156f
Signed by: TZGyn
GPG Key ID: 122EAF77AE81FD4A
6 changed files with 229 additions and 3 deletions
Show Stats Download Patch File Download Diff File

16
app/api/bookmark_category/route.ts
Unescape Escape View File

@ -2,7 +2,7 @@ import { bookmarkCategorySchema, newBookmarkCategorySchema } from '@/types'
import { NextRequest, NextResponse } from 'next/server'
import { bookmarkCategory } from '@/lib/schema'
import { db } from '@/lib/db'
import { eq } from 'drizzle-orm'
import { eq, and } from 'drizzle-orm'
import { cookies } from 'next/headers'
import { getUser } from '@/lib/auth'
@ -45,10 +45,20 @@ export const PATCH = async (request: NextRequest) => {
export const DELETE = async (request: NextRequest) => {
const body = await request.json()
const token = cookies().get('token')
const session_user = await getUser(token)
const bookmarkId = body.bookmarkCategoryId
await db.delete(bookmarkCategory).where(eq(bookmarkCategory.id, bookmarkId))
await db
.delete(bookmarkCategory)
.where(
and(
eq(bookmarkCategory.id, bookmarkId),
eq(bookmarkCategory.userId, session_user ? session_user.id : 0)
)
)
return NextResponse.json({ message: 'Bookmark Deleted' })
return NextResponse.json({ message: 'Bookmark Category Deleted' })
}

11
app/categories/layout.tsx
Unescape Escape View File

@ -0,0 +1,11 @@
export default function DashboardLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section className='flex flex-col items-center justify-center gap-4 pt-10 sm:pt-16'>
{children}
</section>
)
}

29
app/categories/page.tsx
Unescape Escape View File

@ -0,0 +1,29 @@
import {
bookmarkCategorySchema,
} from '@/types'
import { db } from '@/lib/db'
import { cookies } from 'next/headers'
import { getUser } from '@/lib/auth'
import TableComponent from './table'
export const dynamic = 'force-dynamic'
export const fetchCache = 'force-no-store'
export default async function CategoriesPage() {
const token = cookies().get('token')
const session_user = await getUser(token)
const data = await db.query.bookmarkCategory.findMany({
where: (bookmarkCategory, { eq }) =>
eq(bookmarkCategory.userId, session_user ? session_user.id : 0),
})
const bookmarkCategories = bookmarkCategorySchema.array().parse(data)
return (
<div className='flex w-full max-w-4xl flex-row flex-wrap justify-start gap-6'>
<TableComponent bookmarkCategories={bookmarkCategories} />
</div>
)
}

83
app/categories/table.tsx
Unescape Escape View File

@ -0,0 +1,83 @@
'use client'
import {
Table,
TableHeader,
TableColumn,
TableBody,
TableRow,
TableCell,
Tooltip,
} from '@nextui-org/react'
import { DeleteIcon, EditIcon } from '@/components/icons'
import { BookmarkCategory } from '@/types'
import { useRouter } from 'next/navigation'
const columns = [
{ name: 'NAME', uid: 'name' },
{ name: 'ACTIONS', uid: 'actions' },
]
export default function TableComponent({
bookmarkCategories,
}: {
bookmarkCategories: BookmarkCategory[]
}) {
const router = useRouter()
const deleteCategory = async (id: number) => {
if (!confirm('Do you want to delete this category?')) return
const body = {
bookmarkCategoryId: id,
}
await fetch('/api/bookmark_category', {
method: 'DELETE',
body: JSON.stringify(body),
})
router.refresh()
return
}
return (
<>
<Table>
<TableHeader columns={columns}>
{(column) => (
<TableColumn key={column.uid}>
{column.name}
</TableColumn>
)}
</TableHeader>
<TableBody items={bookmarkCategories}>
{(item) => (
<TableRow key={item.id}>
<TableCell>{item.name}</TableCell>
<TableCell>
<div className='relative flex items-center gap-2'>
<Tooltip content='Edit user'>
<span className='cursor-pointer text-lg text-default-400 active:opacity-50'>
<EditIcon />
</span>
</Tooltip>
<Tooltip
color='danger'
content='Delete user'>
<span
className='cursor-pointer text-lg text-danger active:opacity-50'
onClick={() =>
deleteCategory(item.id)
}>
<DeleteIcon />
</span>
</Tooltip>
</div>
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</>
)
}

85
components/icons.tsx
Unescape Escape View File

@ -230,3 +230,88 @@ export const ChevronDown: React.FC<IconSvgProps> = ({
</svg>
)
}
export const EditIcon: React.FC<IconSvgProps> = (props) => (
<svg
aria-hidden='true'
fill='none'
focusable='false'
height='1em'
role='presentation'
viewBox='0 0 20 20'
width='1em'
{...props}>
<path
d='M11.05 3.00002L4.20835 10.2417C3.95002 10.5167 3.70002 11.0584 3.65002 11.4334L3.34169 14.1334C3.23335 15.1084 3.93335 15.775 4.90002 15.6084L7.58335 15.15C7.95835 15.0834 8.48335 14.8084 8.74168 14.525L15.5834 7.28335C16.7667 6.03335 17.3 4.60835 15.4583 2.86668C13.625 1.14168 12.2334 1.75002 11.05 3.00002Z'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeMiterlimit={10}
strokeWidth={1.5}
/>
<path
d='M9.90833 4.20831C10.2667 6.50831 12.1333 8.26665 14.45 8.49998'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeMiterlimit={10}
strokeWidth={1.5}
/>
<path
d='M2.5 18.3333H17.5'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeMiterlimit={10}
strokeWidth={1.5}
/>
</svg>
)
export const DeleteIcon: React.FC<IconSvgProps> = (props) => (
<svg
aria-hidden='true'
fill='none'
focusable='false'
height='1em'
role='presentation'
viewBox='0 0 20 20'
width='1em'
{...props}>
<path
d='M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={1.5}
/>
<path
d='M7.08331 4.14169L7.26665 3.05002C7.39998 2.25835 7.49998 1.66669 8.90831 1.66669H11.0916C12.5 1.66669 12.6083 2.29169 12.7333 3.05835L12.9166 4.14169'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={1.5}
/>
<path
d='M15.7084 7.61664L15.1667 16.0083C15.075 17.3166 15 18.3333 12.675 18.3333H7.32502C5.00002 18.3333 4.92502 17.3166 4.83335 16.0083L4.29169 7.61664'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={1.5}
/>
<path
d='M8.60834 13.75H11.3833'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={1.5}
/>
<path
d='M7.91669 10.4167H12.0834'
stroke='currentColor'
strokeLinecap='round'
strokeLinejoin='round'
strokeWidth={1.5}
/>
</svg>
)

8
config/site.ts
Unescape Escape View File

@ -12,6 +12,10 @@ export const siteConfig = {
label: 'Dashboard',
href: '/dashboard',
},
{
label: 'Categories',
href: '/categories',
},
],
navMenuItems: [
{
@ -22,6 +26,10 @@ export const siteConfig = {
label: 'Dashboard',
href: '/dashboard',
},
{
label: 'Categories',
href: '/categories',
},
],
links: {
github: 'https://github.com/TZGyn/',

Write Preview
Loading…
Cancel
Save