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

style table and dialog

This commit is contained in:
andrzej 2024-06-28 12:31:48 +02:00
parent 97a537f5a2
commit 16e2300019
10 changed files with 180 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
prisma/dev.db
View File

Binary file not shown.

4
src/app/publication/columns.tsx
View File

@ -49,13 +49,15 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
.map(e => <Badge>{e.name}</Badge>) .map(e => <Badge>{e.name}</Badge>)
return genres return genres
}, },
header: "Genres",
filterFn: "arrIncludes" filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects //TODO - write custom filter function, to account for an array of objects
}), }),
{ {
accessorKey: "query_after_days", accessorKey: "query_after_days",
header: "Query After (days)" header: "Query After (days)",
cell: props => <p className="w-full text-center">{props.getValue()}</p>
}, },

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

@ -38,13 +38,16 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
</Button> </Button>
) )
}, },
enableColumnFilter: false enableColumnFilter: false,
cell: props => <p className="w-full text-center">{props.getValue()}</p>
}, },
columnHelper.accessor("genres", { columnHelper.accessor("genres", {
cell: props => { cell: props => {
const genres = props.getValue() const genres = props.getValue()
return <GenreBadges genres={genres} /> return <GenreBadges genres={genres} />
}, },
header: "Genres",
filterFn: "arrIncludes" filterFn: "arrIncludes"
//TODO - write custom filter function, to account for an array of objects //TODO - write custom filter function, to account for an array of objects
}), }),

8
src/app/submission/columns.tsx
View File

@ -18,14 +18,14 @@ export const columns: ColumnDef<SubComplete>[] = [
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
Date Submitted Submitted
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</Button> </Button>
) )
}, },
enableColumnFilter: false, enableColumnFilter: false,
sortingFn: "datetime", sortingFn: "datetime",
cell: props => { return props.getValue().toLocaleDateString() } cell: props => { return <p className="w-full text-center">{props.getValue().toLocaleDateString()}</p> }
}, },
{ {
accessorFn: row => row.responded ? new Date(row.responded) : null, accessorFn: row => row.responded ? new Date(row.responded) : null,
@ -36,14 +36,14 @@ export const columns: ColumnDef<SubComplete>[] = [
variant="ghost" variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")} onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
> >
Date Responded Responded
<ArrowUpDown className="ml-2 h-4 w-4" /> <ArrowUpDown className="ml-2 h-4 w-4" />
</Button> </Button>
) )
}, },
enableColumnFilter: false, enableColumnFilter: false,
sortingFn: "datetime", sortingFn: "datetime",
cell: props => props.getValue() ? props.getValue().toLocaleDateString() : '-' cell: props => <p className="w-full text-center">{props.getValue() ? props.getValue().toLocaleDateString() : '-'}</p>
}, },
{ {
accessorFn: row => { accessorFn: row => {

4
src/app/submission/create.tsx
View File

@ -17,10 +17,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
<DialogTrigger asChild> <DialogTrigger asChild>
<Button>Create new submission</Button> <Button>Create new submission</Button>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent className="max-w-fit">
<DialogHeader> <DialogHeader>
<DialogTitle>New submission</DialogTitle> <DialogTitle>New submission</DialogTitle>
<DialogDescription>Create an entry for a new story i.e. a thing you intend to submit for publication.</DialogDescription> <DialogDescription>Create an entry for a new submission.</DialogDescription>
</DialogHeader> </DialogHeader>
<SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} /> <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
<DialogFooter> <DialogFooter>

62
src/app/tailwind.css
View File

@ -984,6 +984,23 @@ body {
max-width: 24rem; max-width: 24rem;
} }
.max-w-fit {
max-width: -moz-fit-content;
max-width: fit-content;
}
.max-w-24 {
max-width: 6rem;
}
.max-w-96 {
max-width: 24rem;
}
.max-w-52 {
max-width: 13rem;
}
.shrink-0 { .shrink-0 {
flex-shrink: 0; flex-shrink: 0;
} }
@ -1108,6 +1125,10 @@ body {
gap: 1rem; gap: 1rem;
} }
.gap-6 {
gap: 1.5rem;
}
.gap-x-16 { .gap-x-16 {
-moz-column-gap: 4rem; -moz-column-gap: 4rem;
column-gap: 4rem; column-gap: 4rem;
@ -1121,6 +1142,27 @@ body {
row-gap: 2rem; row-gap: 2rem;
} }
.gap-x-1 {
-moz-column-gap: 0.25rem;
column-gap: 0.25rem;
}
.gap-y-4 {
row-gap: 1rem;
}
.gap-y-40 {
row-gap: 10rem;
}
.gap-y-6 {
row-gap: 1.5rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) { .space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0; --tw-space-x-reverse: 0;
margin-right: calc(0.25rem * var(--tw-space-x-reverse)); margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@ -1181,6 +1223,18 @@ body {
margin-bottom: calc(2rem * var(--tw-space-y-reverse)); margin-bottom: calc(2rem * var(--tw-space-y-reverse));
} }
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.justify-self-end { .justify-self-end {
justify-self: end; justify-self: end;
} }
@ -1458,6 +1512,10 @@ body {
line-height: 1.5rem; line-height: 1.5rem;
} }
.text-clamp {
font-size: clamp(0.75rem, 5vw, 1rem);
}
.text-lg { .text-lg {
font-size: 1.125rem; font-size: 1.125rem;
line-height: 1.75rem; line-height: 1.75rem;
@ -2390,6 +2448,10 @@ body {
border-bottom-width: 0px; border-bottom-width: 0px;
} }
.\[\&_\*\]\:text-clamp * {
font-size: clamp(0.75rem, 5vw, 1rem);
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child { .\[\&_tr\:last-child\]\:border-0 tr:last-child {
border-width: 0px; border-width: 0px;
} }

191
src/app/ui/forms/sub.tsx
View File

@ -31,7 +31,8 @@ import {
SelectTrigger, SelectTrigger,
SelectValue, SelectValue,
} from "@/components/ui/select" } from "@/components/ui/select"
import { useState } from "react" import { ComponentProps, useState } from "react"
import { Pub, Story } from "@prisma/client"
const FormSchema = z.object({ const FormSchema = z.object({
storyId: z.coerce.number(), storyId: z.coerce.number(),
@ -66,7 +67,12 @@ const FormSchema = z.object({
) )
export default function SubmissionForm({ stories, pubs, responses, createSub }) { export default function SubmissionForm({ className, stories, pubs, responses, createSub }: ComponentProps<"form"> & {
stories: Story[],
pubs: Pub[],
responses: Response[],
createSub: (arg0: any) => void
}) {
const form = useForm<z.infer<typeof FormSchema>>({ const form = useForm<z.infer<typeof FormSchema>>({
resolver: zodResolver(FormSchema), resolver: zodResolver(FormSchema),
defaultValues: { defaultValues: {
@ -123,7 +129,8 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
return ( return (
<Form {...form}> <Form {...form}>
<form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className="space-y-8"> <form id="subform" onSubmit={form.handleSubmit(onSubmit, onErrors)} className={className + " " + "space-y-8"}
>
<FormField <FormField
control={form.control} control={form.control}
name="storyId" name="storyId"
@ -171,95 +178,97 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
)} )}
/> />
<FormField <div className="flex flex-row gap-6">
control={form.control} <FormField
name="submitted" control={form.control}
render={({ field }) => ( name="submitted"
<FormItem className="flex flex-col"> render={({ field }) => (
<FormLabel>Date of submission</FormLabel> <FormItem className="inline-flex flex-col">
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}> <FormLabel>Date of submission</FormLabel>
<PopoverTrigger asChild> <Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<FormControl> <PopoverTrigger asChild>
<Button <FormControl>
variant={"outline"} <Button
className={cn( variant={"outline"}
"w-[240px] pl-3 text-left font-normal", className={cn(
!field.value && "text-muted-foreground" "w-[240px] pl-3 text-left font-normal",
)} !field.value && "text-muted-foreground"
> )}
{field.value ? ( >
format(field.value, "PPP") {field.value ? (
) : ( format(field.value, "PPP")
<span>Pick a date</span> ) : (
)} <span>Pick a date</span>
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> )}
</Button> <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</FormControl> </Button>
</PopoverTrigger> </FormControl>
<PopoverContent className="w-auto p-0" align="start"> </PopoverTrigger>
<Calendar <PopoverContent className="w-auto p-0" align="start">
mode="single" <Calendar
selected={field.value} mode="single"
onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }} selected={field.value}
disabled={(date) => onSelect={(e) => { field.onChange(e); setIsSubCalendarOpen(false); }}
date > new Date() || date < new Date("1900-01-01") disabled={(date) =>
} date > new Date() || date < new Date("1900-01-01")
initialFocus }
/> initialFocus
</PopoverContent> />
</Popover> </PopoverContent>
<FormDescription> </Popover>
The date you sent it <FormDescription>
</FormDescription> The date you sent it
<FormMessage /> </FormDescription>
</FormItem> <FormMessage />
)} </FormItem>
/> )}
/>
<FormField <FormField
control={form.control} control={form.control}
name="responded" name="responded"
render={({ field }) => ( render={({ field }) => (
<FormItem className="flex flex-col"> <FormItem className="inline-flex flex-col">
<FormLabel>Date of response</FormLabel> <FormLabel>Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}> <Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild> <PopoverTrigger asChild>
<FormControl> <FormControl>
<Button <Button
variant={"outline"} variant={"outline"}
className={cn( className={cn(
"w-[240px] pl-3 text-left font-normal", "w-[240px] pl-3 text-left font-normal",
!field.value && "text-muted-foreground" !field.value && "text-muted-foreground"
)} )}
> >
{field.value ? ( {field.value ? (
format(field.value, "PPP") format(field.value, "PPP")
) : ( ) : (
<span>Pick a date</span> <span>Pick a date</span>
)} )}
<CalendarIcon className="ml-auto h-4 w-4 opacity-50" /> <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
</Button> </Button>
</FormControl> </FormControl>
</PopoverTrigger> </PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start"> <PopoverContent className="w-auto p-0" align="start">
<Calendar <Calendar
mode="single" mode="single"
selected={field.value} selected={field.value}
onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }} onSelect={(e) => { field.onChange(e); setIsRespCalendarOpen(false); }}
disabled={(date) => disabled={(date) =>
date > new Date() || date < new Date("1900-01-01") date > new Date() || date < new Date("1900-01-01")
} }
initialFocus initialFocus
/> />
</PopoverContent> </PopoverContent>
</Popover> </Popover>
<FormDescription> <FormDescription>
The date they wrote back The date they wrote back
</FormDescription> </FormDescription>
<FormMessage /> <FormMessage />
</FormItem> </FormItem>
)} )}
/> />
</div>
<FormField <FormField

2
src/app/ui/genreBadges.tsx
View File

@ -4,7 +4,7 @@ import { Badge } from "@/components/ui/badge";
export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) { export default function GenreBadges(props: ComponentProps<"div"> & { genres: Array<Genre> }) {
return ( return (
<div className={props.className}> <div className={props.className + " max-w-52 flex flex-wrap gap-x-1 gap-y-1"}>
{props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))} {props.genres.map((e: Genre) => (<Badge key={e.name}>{e.name}</Badge>))}
</div> </div>
) )

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

@ -182,7 +182,7 @@ export function DataTable<TData, TValue>({
</div> </div>
<div className="rounded-md border"> <div className="rounded-md border">
<Table> <Table className="text-clamp">
<TableHeader> <TableHeader>
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}> <TableRow key={headerGroup.id}>

3
tailwind.config.js
View File

@ -21,6 +21,9 @@ module.exports = {
}, },
}, },
extend: { extend: {
fontSize: {
clamp: "clamp(0.75rem, 0.707vw + 0.397rem, 1rem)",
},
colors: { colors: {
border: "hsl(var(--border))", border: "hsl(var(--border))",
input: "hsl(var(--input))", input: "hsl(var(--input))",