Resume
/
subman-nextjs
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add genre badges

This commit is contained in:
andrzej 2024-06-19 13:14:12 +02:00
parent 4b7549020e
commit e05142999f
2 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/app/story/columns.tsx
View File

@ -1,14 +1,15 @@
"use client" "use client"
import { ColumnDef } from "@tanstack/react-table" import { ColumnDef, createColumnHelper } from "@tanstack/react-table"
import { Genre, Story } from "@prisma/client" import { StoryWithGenres } from "./page"
import { ArrowUpDown, MoreHorizontal } from "lucide-react" import { ArrowUpDown, MoreHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [ import { Badge } from "@/components/ui/badge"
// {
// accessorKey: "id",
// header: "Id",
// enableHiding: true, const columnHelper = createColumnHelper<StoryWithGenres>()
// },
export const columns: ColumnDef<StoryWithGenres>[] = [
{ {
accessorKey: "title", accessorKey: "title",
header: ({ column }) => { header: ({ column }) => {
@ -39,18 +40,25 @@ export const columns: ColumnDef<Story & { genres: Array<Genre> }>[] = [
}, },
enableColumnFilter: false enableColumnFilter: false
}, },
{ // {
accessorFn: row => { // accessorFn: row => {
let unpacked = "" // let unpacked = ""
for (let i = 0; i < row.genres.length; i++) { // for (let i = 0; i < row.genres.length; i++) {
unpacked = unpacked + " " + row.genres[i].name // unpacked = unpacked + " " + row.genres[i].name
} // }
return unpacked // return unpacked
}, // },
header: "Genres" // header: "Genres"
//
//
}, // },
columnHelper.accessor("genres", {
cell: props => {
const genres = props.getValue()
.map(e => <Badge>{e.name}</Badge>)
return genres
}
})
// { // {
// accessorKey: "deleted", // accessorKey: "deleted",
// header: "Deleted" // header: "Deleted"

4
src/app/ui/forms/genresTrigger.tsx
View File

@ -3,6 +3,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@radix-ui/react-popover
import { Checkbox } from "@radix-ui/react-checkbox" import { Checkbox } from "@radix-ui/react-checkbox"
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button"
import { cn } from "@/lib/utils" import { cn } from "@/lib/utils"
import { Badge } from "@/components/ui/badge"
export default function GenresTrigger({ value, genres }) { export default function GenresTrigger({ value, genres }) {
return ( return (
<> <>
@ -15,8 +16,7 @@ export default function GenresTrigger({ value, genres }) {
)} )}
> >
{value.length !== 0 ? ( {value.length !== 0 ? (
value.map((e, i) => genres.find(f => e === f.id).name + value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
(i < value.length - 1 ? ', ' : ''))
) : ( ) : (
<FormLabel>Genres</FormLabel> <FormLabel>Genres</FormLabel>
)} )}