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

implement create pubs popup

This commit is contained in:
andrzej 2024-06-26 19:32:18 +02:00
parent 527b0d2aac
commit 61d956b9cd
9 changed files with 113 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/app/lib/create.ts
View File

@ -26,4 +26,24 @@ export async function createStory(data) {
}
export async function createPub(data) {
"use server"
const genresArray = data.genres.map(e => { return { id: e } })
const res = await prisma.pub.create({
data: {
title: data.title,
link: data.link,
query_after_days: data.query_after_days
}
})
console.log(res)
const genresRes = await prisma.pub.update({
where: { id: res.id },
data:
{ genres: { set: genresArray } }
})
console.log(genresRes)
revalidatePath("/publication")
redirect("/publication")
}

30
src/app/publication/create.tsx Normal file
View File

@ -0,0 +1,30 @@
"use client"
import { Dialog, DialogHeader, DialogTrigger, DialogContent, DialogClose, DialogTitle, DialogFooter, DialogDescription } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { ComponentProps } from "react";
import { Genre } from "@prisma/client";
import { createPub } from "app/lib/create";
import PubForm from "app/ui/forms/pub";
export default function CreatePubDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
return (
<Dialog>
<DialogTrigger asChild>
<Button>Create new Publication</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>New publication</DialogTitle>
<DialogDescription>Create an entry for a new publication i.e. a place you intend to submit stories to.</DialogDescription>
</DialogHeader>
<PubForm createPub={createPub} genres={genres} />
<DialogFooter>
<Button form="pubform">Submit</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
}

40
src/app/publication/create/page.tsx
View File

@ -1,40 +0,0 @@
import PubForm from "app/ui/forms/pub";
import { getGenres } from "app/lib/get";
import prisma from "app/lib/db";
import { CreateContainer, CreateContainerContent, CreateContainerDescription, CreateContainerHeader } from "app/ui/createContainer";
import { revalidatePath } from "next/cache";
import { redirect } from "next/navigation";
export default async function Page() {
async function createPub(data) {
"use server"
const genresArray = data.genres.map(e => { return { id: e } })
const res = await prisma.pub.create({
data: {
title: data.title,
link: data.link,
query_after_days: data.query_after_days
}
})
console.log(res)
const genresRes = await prisma.pub.update({
where: { id: res.id },
data:
{ genres: { set: genresArray } }
})
console.log(genresRes)
revalidatePath("/publication")
redirect("/publication")
}
const genres = await getGenres()
return (
<CreateContainer>
<CreateContainerHeader>New publication</CreateContainerHeader>
<CreateContainerContent>
<CreateContainerDescription>
Create a new entry for a publication i.e. a place you intend to submit to.
</CreateContainerDescription>
<PubForm genres={genres} createPub={createPub} className="mt-6" />
</CreateContainerContent>
</CreateContainer>
)
}

10
src/app/publication/page.tsx
View File

@ -1,15 +1,21 @@
import { Genre, Pub } from "@prisma/client";
import { getPubsWithGenres } from "app/lib/get";
import { getGenres, getPubsWithGenres } from "app/lib/get";
import { columns } from "./columns";
import { DataTable } from "app/ui/tables/data-table";
import CreatePubDialog from "./create";
export type PubsWithGenres = Pub & { genres: Array<Genre> }
export default async function Page() {
const genres = await getGenres()
const pubs = await getPubsWithGenres()
return (
<div className="container mx-auto">
<DataTable data={pubs} columns={columns} type="publication" />
<DataTable data={pubs} columns={columns} type="publication">
<CreatePubDialog genres={genres} />
</DataTable>
</div>
)

7
src/app/story/create.tsx
View File

@ -7,9 +7,8 @@ import { Genre } from "@prisma/client";
import StoryForm from "app/ui/forms/story";
export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Array<Genre> }) {
export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & { genres: Genre[] }) {
console.log(genres)
return (
<Dialog>
<DialogTrigger asChild>
@ -21,7 +20,9 @@ export default function CreateStoryDialog({ genres }: ComponentProps<"div"> & {
<DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription>
</DialogHeader>
<StoryForm createStory={createStory} genres={genres} />
<DialogFooter>
<Button form="storyform">Submit</Button>
</DialogFooter>
</DialogContent>
</Dialog>

35
src/app/ui/forms/genrePicker.tsx
View File

@ -1,19 +1,20 @@
import { FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { FormField, FormItem, FormLabel, FormMessage, FormControl } from "@/components/ui/form"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Checkbox } from "@/components/ui/checkbox"
import { cn } from "@/lib/utils"
import GenreCheckbox from "./genreCheckbox"
export default function GenrePicker({ genres, form }) {
return (
<Popover modal={true}>
<FormField
control={form.control}
name="genres"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="h-5">Genres</FormLabel>
<Popover modal={true}>
<PopoverTrigger asChild>
<Button
variant={"outline"}
@ -23,7 +24,7 @@ export default function GenrePicker({ genres, form }) {
)}
>
{field.value.length !== 0 ? (
field.value.map((e, i) => (<Badge>{genres.find(f => e === f.id).name}</Badge>))
field.value.map((e, i) => (<Badge key={i}>{genres.find(f => e === f.id).name}</Badge>))
) : (
<p>Select</p>
)}
@ -34,25 +35,45 @@ export default function GenrePicker({ genres, form }) {
<PopoverContent align="start">
{genres.map((item) => (
<FormField
< FormField
key={item.id}
control={form.control}
name="genres"
render={({ field }) => {
return (
<GenreCheckbox field={field} item={item} />
<FormItem
key={item.id}
className="flex flex-row items-start space-x-3 space-y-0"
>
<FormControl>
<Checkbox
checked={field.value?.includes(item.id)}
onCheckedChange={(checked) => {
return checked
? field.onChange([...field.value, item.id])
: field.onChange(
field.value?.filter(
(value) => value !== item.id
)
)
}}
/>
</FormControl>
<FormLabel className="text-sm font-normal">
{item.name}
</FormLabel>
</FormItem>
)
}}
/>
))}
<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
</Popover>
)
}

34
src/app/ui/forms/pub.tsx
View File

@ -25,6 +25,7 @@ import GenreCheckbox from "./genreCheckbox"
import { randomPublicationTitle } from "app/lib/shortStoryTitleGenerator"
import { ComponentProps } from "react"
import { Genre } from "@prisma/client"
import GenrePicker from "./genrePicker"
const formSchema = z.object({
title: z.string().min(2).max(50),
@ -79,7 +80,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
return (
<div className={className}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<form id="pubform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<FormField
control={form.control}
name="title"
@ -109,35 +110,7 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
/>
<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 max-w-full h-fit">
<FormField
control={form.control}
name="genres"
render={({ field }) => (
<FormItem className="flex flex-col flex-wrap">
<FormLabel className="h-5">Genres</FormLabel>
<Popover>
<GenresTrigger value={field.value} genres={genres} />
<PopoverContent align="start">
{genres.map((item) => (
<FormField
key={item.id}
control={form.control}
name="genres"
render={({ field }) => {
return (
<GenreCheckbox field={field} item={item} />
)
}}
/>
))}
<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
/>
<GenrePicker genres={genres} form={form} />
<FormField
control={form.control}
@ -154,7 +127,6 @@ export default function PubForm({ genres, createPub, className }: ComponentProps
/>
</div>
<Button type="submit">Submit</Button>
</form>
</Form>
</div>

40
src/app/ui/forms/story.tsx
View File

@ -20,12 +20,11 @@ import {
Popover,
PopoverContent,
} from "@/components/ui/popover"
import GenresTrigger from "./genresTrigger"
import GenreCheckbox from "./genreCheckbox"
import { ComponentProps } from "react"
import { Genre } from "@prisma/client"
import { randomStoryTitle } from "app/lib/shortStoryTitleGenerator"
import { usePathname } from "next/navigation"
import GenrePicker from "./genrePicker"
const formSchema = z.object({
title: z.string().min(2).max(50),
@ -73,12 +72,10 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
console.log(JSON.stringify(errors))
}
const pathname = usePathname()
return (
<div className={className}>
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8">
<form onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8" id="storyform">
<FormField
control={form.control}
name="title"
@ -95,35 +92,9 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
<div className="inline-flex flex-wrap w-full gap-x-16 gap-y-8 items-baseline max-w-full">
<FormField
control={form.control}
name="genres"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormLabel className="h-5">Genres</FormLabel>
<Popover>
<GenresTrigger value={field.value} genres={genres} />
<PopoverContent align="start">
{genres.map((item) => (
<FormField
key={item.id}
control={form.control}
name="genres"
render={({ field }) => {
return (
<GenreCheckbox field={field} item={item} />
)
}}
/>
))}
<Button variant="link" className="p-0" onClick={() => form.setValue("genres", [])}>Clear</Button>
</PopoverContent>
</Popover>
<FormMessage />
</FormItem>
)}
<GenrePicker
genres={genres}
form={form}
/>
<FormField
@ -142,7 +113,6 @@ export default function StoryForm({ genres, createStory, className }: ComponentP
</div>
<Button type="submit" className="">Submit</Button>
</form>

13
src/app/ui/tables/data-table.tsx
View File

@ -9,7 +9,7 @@ import {
DropdownMenuRadioGroup
} from "@/components/ui/dropdown-menu"
import { Input } from "@/components/ui/input"
import { useState } from "react"
import { Component, ComponentProps, useState } from "react"
import {
ColumnDef,
flexRender,
@ -33,8 +33,6 @@ import {
} from "@/components/ui/table"
import { EyeIcon } from "lucide-react"
import { usePathname } from "next/navigation"
import { useRouter } from "next/navigation"
import Link from "next/link"
interface DataTableProps<TData, TValue> {
columns: ColumnDef<TData, TValue>[]
@ -45,8 +43,8 @@ interface DataTableProps<TData, TValue> {
export function DataTable<TData, TValue>({
columns,
data,
type
}: DataTableProps<TData, TValue> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
children
}: DataTableProps<TData, TValue> & ComponentProps<"div"> & { type: "publication" | "submission" | "story" | "genre" | "response" }) {
//STATE
const [sorting, setSorting] = useState<SortingState>([])
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
@ -107,9 +105,8 @@ export function DataTable<TData, TValue>({
/>
</div>
<Link href={pathname + "/create"}>
<Button>Create new {type}</Button>
</Link>
{children}
<DropdownMenu>
<DropdownMenuTrigger asChild>