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 2e39bd8b9e
9 changed files with 144 additions and 100 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.

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

@ -55,7 +55,8 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
{
accessorKey: "query_after_days",
header: "Query After (days)"
header: "Query After (days)",
cell: props => <p className="w-full text-center">{props.getValue()}</p>
},

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

@ -38,7 +38,9 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
</Button>
)
},
enableColumnFilter: false
enableColumnFilter: false,
cell: props => <p className="w-full text-center">{props.getValue()}</p>
},
columnHelper.accessor("genres", {
cell: props => {

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

@ -18,14 +18,14 @@ export const columns: ColumnDef<SubComplete>[] = [
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Date Submitted
Submitted
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
)
},
enableColumnFilter: false,
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,
@ -36,14 +36,14 @@ export const columns: ColumnDef<SubComplete>[] = [
variant="ghost"
onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
>
Date Responded
Responded
<ArrowUpDown className="ml-2 h-4 w-4" />
</Button>
)
},
enableColumnFilter: false,
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 => {

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

@ -17,10 +17,10 @@ export default function CreateSubmissionDialog({ stories, pubs, responses }: Com
<DialogTrigger asChild>
<Button>Create new submission</Button>
</DialogTrigger>
<DialogContent>
<DialogContent className="max-w-fit">
<DialogHeader>
<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>
<SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} />
<DialogFooter>

29
src/app/tailwind.css
View File

@ -984,6 +984,11 @@ body {
max-width: 24rem;
}
.max-w-fit {
max-width: -moz-fit-content;
max-width: fit-content;
}
.shrink-0 {
flex-shrink: 0;
}
@ -1108,6 +1113,10 @@ body {
gap: 1rem;
}
.gap-6 {
gap: 1.5rem;
}
.gap-x-16 {
-moz-column-gap: 4rem;
column-gap: 4rem;
@ -1181,6 +1190,18 @@ body {
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;
}
@ -1458,6 +1479,10 @@ body {
line-height: 1.5rem;
}
.text-clamp {
font-size: clamp(0.75rem, 5vw, 1rem);
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem;
@ -2390,6 +2415,10 @@ body {
border-bottom-width: 0px;
}
.\[\&_\*\]\:text-clamp * {
font-size: clamp(0.75rem, 5vw, 1rem);
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
border-width: 0px;
}

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

@ -31,7 +31,8 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { useState } from "react"
import { ComponentProps, useState } from "react"
import { Pub, Story } from "@prisma/client"
const FormSchema = z.object({
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>>({
resolver: zodResolver(FormSchema),
defaultValues: {
@ -123,7 +129,8 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
return (
<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
control={form.control}
name="storyId"
@ -171,11 +178,12 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
)}
/>
<div className="flex flex-row gap-6">
<FormField
control={form.control}
name="submitted"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormItem className="inline-flex flex-col">
<FormLabel>Date of submission</FormLabel>
<Popover modal={true} open={isSubCalendarOpen} onOpenChange={setIsSubCalendarOpen}>
<PopoverTrigger asChild>
@ -220,7 +228,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
control={form.control}
name="responded"
render={({ field }) => (
<FormItem className="flex flex-col">
<FormItem className="inline-flex flex-col">
<FormLabel>Date of response</FormLabel>
<Popover modal={true} open={isRespCalendarOpen} onOpenChange={setIsRespCalendarOpen}>
<PopoverTrigger asChild>
@ -260,6 +268,7 @@ export default function SubmissionForm({ stories, pubs, responses, createSub })
</FormItem>
)}
/>
</div>
<FormField

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

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

3
tailwind.config.js
View File

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