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 => {
-      const genres = props.getValue()
-        .map(e => <Badge>{e.name}</Badge>)
-      return genres
-    },
+    cell: GenrePickerInputCell,
     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

@@ -1092,10 +1092,6 @@ body {
   justify-content: space-between;
 }
 
-.justify-around {
-  justify-content: space-around;
-}
-
 .gap-1 {
   gap: 0.25rem;
 }

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/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/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>
+}