improve title styling

src/app/publication/columns.tsx

@@ -8,6 +8,7 @@ import { TextInputCell } from "app/ui/tables/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
 import NumberInputCell from "app/ui/tables/inputs/numberInput"
 import { formSchema } from "app/ui/forms/pub"
+import GenrePickerInputCell from "app/ui/tables/inputs/genrePickerInput"
 
 
 const columnHelper = createColumnHelper<PubsWithGenres>()
@@ -39,11 +40,7 @@ export const columns: ColumnDef<PubsWithGenres>[] = [
   },
 
   columnHelper.accessor("genres", {
-    cell: props => {
+    cell: GenrePickerInputCell,
-      const genres = props.getValue()
-        .map(e => <Badge>{e.name}</Badge>)
-      return genres
-    },
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),

src/app/publication/page.tsx

@@ -13,7 +13,7 @@ export default async function Page() {
   const pubs = await getPubsWithGenres()
   return (
     <div className="container mx-auto">
-      <DataTable data={pubs} columns={columns} tableName="pub">
+      <DataTable data={pubs} columns={columns} tableName="pubs" genres={genres}>
         <CreatePubDialog genres={genres} />
       </DataTable>
 

src/app/submission/columns.tsx

@@ -4,6 +4,7 @@ import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { selectCol } from "app/ui/tables/selectColumn"
+import TitleContainer from "app/ui/titleContainer"
 
 
 
@@ -18,7 +19,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     id: "story",
     header: "Story",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-left">{props.getValue()}</p>)
+    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
     accessorFn: row => {
@@ -29,7 +30,7 @@ export const columns: ColumnDef<SubComplete>[] = [
     },
     id: "pub",
     header: "Publication",
-    cell: (props: CellContext<any, any>) => (<p className="w-full text-left">{props.getValue()}</p>)
+    cell: (props: CellContext<any, any>) => (<TitleContainer>{props.getValue()}</TitleContainer>)
   },
   {
     accessorFn: row => new Date(row.submitted),

src/app/submission/edit.tsx

@@ -16,7 +16,7 @@ export default function EditSubmissionDialog({ stories, pubs, responses, default
         <DialogTitle>Edit Submission</DialogTitle>
         <DialogDescription>Change response status, edit dates etc</DialogDescription>
       </DialogHeader>
-      <SubmissionForm createSub={createSub} pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
+      <SubmissionForm pubs={pubs} responses={responses} stories={stories} defaults={defaults} />
       <DialogFooter>
         <DialogClose asChild>
         </DialogClose>

src/app/tailwind.css

@@ -706,6 +706,22 @@ body {
   z-index: 100;
 }
 
+.col-span-full {
+  grid-column: 1 / -1;
+}
+
+.col-start-1 {
+  grid-column-start: 1;
+}
+
+.col-start-3 {
+  grid-column-start: 3;
+}
+
+.col-end-3 {
+  grid-column-end: 3;
+}
+
 .m-auto {
   margin: auto;
 }
@@ -959,6 +975,18 @@ body {
   width: 100vw;
 }
 
+.w-1 {
+  width: 0.25rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -984,6 +1012,14 @@ body {
   max-width: 24rem;
 }
 
+.max-w-28 {
+  max-width: 7rem;
+}
+
+.max-w-xs {
+  max-width: 20rem;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -1052,6 +1088,10 @@ body {
           user-select: none;
 }
 
+.grid-cols-12 {
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+}
+
 .flex-row {
   flex-direction: row;
 }
@@ -1108,6 +1148,14 @@ body {
   gap: 1rem;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
+.gap-44 {
+  gap: 11rem;
+}
+
 .gap-x-16 {
   -moz-column-gap: 4rem;
        column-gap: 4rem;
@@ -1121,6 +1169,10 @@ body {
   row-gap: 2rem;
 }
 
+.gap-y-4 {
+  row-gap: 1rem;
+}
+
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));

src/app/ui/forms/sub.tsx

@@ -33,6 +33,7 @@ import {
 } from "@/components/ui/select"
 import { useState } from "react"
 import { editSubmission } from "app/lib/edit"
+import { createSub } from "app/lib/create"
 
 export const formSchema = z.object({
 	id: z.number().optional(),
@@ -76,7 +77,7 @@ export const formSchema = z.object({
 export type SubForm = z.infer<typeof formSchema>
 
 
-export default function SubmissionForm({ stories, pubs, responses, createSub, defaults }) {
+export default function SubmissionForm({ stories, pubs, responses, defaults }) {
 	const form = useForm<z.infer<typeof formSchema>>({
 		resolver: zodResolver(formSchema),
 		defaultValues: {

src/app/ui/genreBadges.tsx

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

src/app/ui/tables/actions.tsx

@@ -1,45 +0,0 @@
-import { Dialog, DialogTrigger, DialogClose, DialogDescription, DialogContent, DialogTitle, DialogHeader, DialogFooter } from "@/components/ui/dialog"
-import Link from "next/link"
-import { Trash2, Search, Pencil } from "lucide-react"
-import { Button } from "@/components/ui/button"
-
-export function actions({ pathname, deleteFn }: { pathname: string, deleteFn: (id: number) => void }) {
-  return {
-    id: "actions",
-    // header: "Actions",
-    cell: ({ row }) => {
-      return <div className="flex items-center justify-around">
-        {!(pathname === "/submission") ?
-          <Link href={`${pathname}/${row.original.id}`}><Button variant="ghost"><Search /></Button></Link>
-          : ""
-        }
-
-        <Link href={`${pathname}/edit/${row.original.id}`}><Button variant="ghost"><Pencil /></Button></Link>
-
-        <Dialog>
-          <DialogTrigger asChild>
-            <Button variant="ghost"><Trash2 color="red" /></Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Are you sure?</DialogTitle>
-              <DialogDescription>
-                Deleting a {pathname.slice(1)} cannot be undone!
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <DialogClose asChild>
-                <Button variant="destructive"
-                  onClick={() => {
-                    deleteFn(row.original.id)
-                  }}>Yes, delete it!
-                </Button>
-              </DialogClose>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
-    }
-  }
-}
-

src/app/ui/tables/inputs/genrePickerInput.tsx

@@ -72,14 +72,14 @@ export default function GenrePickerInputCell(props: CellContext<any, any>) {
 
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit, onErrors)} id={formId}>
-        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)}>
+        <Popover modal={true} open={isActive} onOpenChange={() => setIsActive(prev => !prev)} >
           <FormField
             control={form.control}
             name="genres"
             render={({ field }) => (
-              <FormItem className="flex flex-col">
+              <FormItem className="w-full max-w-xs flex flex-col">
-                <PopoverTrigger>
+                <PopoverTrigger asChild>
-                  {value.length > 0 ? <GenreBadges genres={value} /> : <p>Add genres</p>
+                  {value.length > 0 ? <Button variant="ghost" className="h-fit"><GenreBadges genres={value} className="w-full" /></Button> : <Button variant="outline" type="button" className="w-fit m-auto">Add genres</Button>
                   }
                 </PopoverTrigger>
 

src/app/ui/tables/inputs/textInput.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { toast } from "@/components/ui/use-toast";
 import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import TitleContainer from "app/ui/titleContainer";
 
 export function TextInputCell(props: CellContext<any, any>) {
   const [isActive, setIsActive] = useState(false)
@@ -82,6 +83,7 @@ export function TextInputCell(props: CellContext<any, any>) {
                   <FormControl
                   >
                     <Input
+                      className="w-fit"
                       type="text"
                       autoFocus={true}
                       {...field}
@@ -94,7 +96,7 @@ export function TextInputCell(props: CellContext<any, any>) {
 
           </form>
         </Form>
-        : <p>{props.cell.getValue()}</p>
+        : <TitleContainer>{props.cell.getValue()}</TitleContainer>
       }
     </div >
   )

src/app/ui/titleContainer.tsx

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+
+export default function itleContainer({ children }: ComponentProps<"div">) {
+  let classes = "w-full text-left m-auto"
+  console.table(children)
+  if (children == "RECORD DELETED") {
+    console.log("BINGO")
+    classes = classes + " text-destructive font-bold"
+  }
+  return <span className="h-10 flex align-center"><p className={classes}>{children}</p></span>
+}