From 7f369bb34d5215b540a1f31dba50cfb957d7d97f Mon Sep 17 00:00:00 2001
From: andrzej <andrzejjamesstepien@gmail.com>
Date: Wed, 24 Jul 2024 22:41:46 +0200
Subject: [PATCH] improve title styling

---
 prisma/dev.db                          | Bin 69632 -> 69632 bytes
 src/app/publication/columns.tsx        |   7 ++--
 src/app/publication/page.tsx           |   2 +-
 src/app/submission/columns.tsx         |   5 +--
 src/app/submission/edit.tsx            |   2 +-
 src/app/tailwind.css                   |  14 ++++++++
 src/app/ui/forms/sub.tsx               |   3 +-
 src/app/ui/tables/actions.tsx          |  45 -------------------------
 src/app/ui/tables/inputs/textInput.tsx |   4 ++-
 src/app/ui/titleContainer.tsx          |  11 ++++++
 10 files changed, 37 insertions(+), 56 deletions(-)
 delete mode 100644 src/app/ui/tables/actions.tsx
 create mode 100644 src/app/ui/titleContainer.tsx

diff --git a/prisma/dev.db b/prisma/dev.db
index 9c6c0b904d2f766d9ec87accbeaeb592346b6509..4ebe5612b17990fd7c2ce4b8de5b7ab9c414dc95 100644
GIT binary patch
delta 688
zcma))O=uHQ5XawS-|l<+cHd5GYYaANHqzpuAkl*a+CxC3*rHMN+z&M1Av6Jv;6ZG_
zi?@ax_FB*NU|FP>iWjkzc&J9Om!1Scix&JiSQMPMIrJ(6Gy7)#Grt+w<yF4C%2!5U
zvYovElj{q&E0F7KR|=pz`;~D&_=_)a4NJ!2!Qxub*_wNQ2EVXV69u?fyH~vvUJ0kO
zp3U;7;Z}9Xx7qPLH0nyzhlWP2-Wcs{&lfmjEFFKFAG(^yUFKky;aB{G@9+?RU>Bbq
zSzIW$adwxDK*}TOFjyvNNJ-NO(pDCL<#1uSplE6Uwxl3{OPf<ECAdW;VY}wxa2fx3
zX@`025p|Q{Z`{W>_zFMbCfU=(de|fCBYa4r3}FW-4j3*)N#H<mFie%il;b+w1yBON
zlgySr;U(d{ep&FOEUaWJsgsu@74G%#KE$_l@d19u4;UXAspGMQ6}(Bh46U%oj?n^p
z%$I@bl-j0y9F=(2c;f$}s!!gLp2-NFcmuYbL@2e`VnVzI@26K)Q*uW=b`NCvc^cLQ
zcjwsss4Jj(qNQ^#1J)XBX&Ap;UkYaym%?HxdZJ)Bss=Eot}osVXPT5eYm(;!zvZ1w
zS~Rufq6rPHjF(|;2GE}(|7T3vpUq0sq8W@jH=0#q)WUPoH3g-ODFxFh`fscUQCY#I
JjU69~)<3bAjQjuq

delta 582
zcma)%O-LI-6vyZ7&d2U#cb~z~rW!G!^(5G>*pGwIQV*?yBnQtL4}wrgAdqvDqn;WT
zy5K3E?Zqy|V{a8(4@Ct9DMbW9r4{_R_yNxB;#~&bf8M<R`|+Pfn>O0?Q#bgn+z9x~
z<=G;12W!Ow$l$ox=irfdgRhbkrTrx@Se@Jwgph&$0tD^XU2c!TNZ(_4U#-=uwP0<k
zKr<F2(f_H=(nIAFxIyp|&+s1};9uOq4g47u%8S@)XP$as+Jp+z2FbVyKrP0Um=>c-
z3_(pb63oyIrx0C#XZZxWuA#@cj;FYfySRy)3AE&vIuz6*oZ0|V2nrg@V^!Q(6*wLX
zGikZOl-uSq&bv+U3NP>k4;A_kZbu#Euh=R%Zynpx>7>xr;&F}h3aanI)Rh}5y3Jj&
zN|^Wosq@r~9Cmx;9A+{5?Ex$cn#vmW@Rxx4XA3f2j??ryZ356tH(ki_@oFVMK3&WE
zL*b%?O!&cqC$@eZt5@>R!aWaOW*tKKM?#?Ksug3RJ`)d<jTiFHJUA5YN#$1G;`8@)
mKT>XXrQ>LJPTau<pX)fiE5j1r8Pxqk7Q#0YMpu42;G4Iw&3VEA

diff --git a/src/app/publication/columns.tsx b/src/app/publication/columns.tsx
index 144282c..2962191 100644
--- a/src/app/publication/columns.tsx
+++ b/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
   }),
diff --git a/src/app/publication/page.tsx b/src/app/publication/page.tsx
index 4162619..56dfc55 100644
--- a/src/app/publication/page.tsx
+++ b/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>
 
diff --git a/src/app/submission/columns.tsx b/src/app/submission/columns.tsx
index fb1dd37..c80c6d8 100644
--- a/src/app/submission/columns.tsx
+++ b/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),
diff --git a/src/app/submission/edit.tsx b/src/app/submission/edit.tsx
index c1b5750..2ae4c96 100644
--- a/src/app/submission/edit.tsx
+++ b/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>
diff --git a/src/app/tailwind.css b/src/app/tailwind.css
index c0fc71c..b8c223c 100644
--- a/src/app/tailwind.css
+++ b/src/app/tailwind.css
@@ -959,6 +959,10 @@ body {
   width: 100vw;
 }
 
+.w-48 {
+  width: 12rem;
+}
+
 .min-w-\[8rem\] {
   min-width: 8rem;
 }
@@ -1563,6 +1567,16 @@ body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
+.text-red-50 {
+  --tw-text-opacity: 1;
+  color: rgb(254 242 242 / var(--tw-text-opacity));
+}
+
+.text-red-100 {
+  --tw-text-opacity: 1;
+  color: rgb(254 226 226 / var(--tw-text-opacity));
+}
+
 .underline {
   text-decoration-line: underline;
 }
diff --git a/src/app/ui/forms/sub.tsx b/src/app/ui/forms/sub.tsx
index 5472f89..444a980 100644
--- a/src/app/ui/forms/sub.tsx
+++ b/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: {
diff --git a/src/app/ui/tables/actions.tsx b/src/app/ui/tables/actions.tsx
deleted file mode 100644
index 4ee5e80..0000000
--- a/src/app/ui/tables/actions.tsx
+++ /dev/null
@@ -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>
-    }
-  }
-}
-
diff --git a/src/app/ui/tables/inputs/textInput.tsx b/src/app/ui/tables/inputs/textInput.tsx
index 7a5afd3..cc35c45 100644
--- a/src/app/ui/tables/inputs/textInput.tsx
+++ b/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 >
   )
diff --git a/src/app/ui/titleContainer.tsx b/src/app/ui/titleContainer.tsx
new file mode 100644
index 0000000..5e6e78f
--- /dev/null
+++ b/src/app/ui/titleContainer.tsx
@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+
+export default function TitleContainer({ 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-foreground font-bold"
+  }
+  return <span className="h-10 flex align-center"><p className={classes}>{children}</p></span>
+}