From fdeeb955c967ac1354263c5ccf95cfa31e4faa46 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                          |  52 ++++++++++++++++++
 src/app/ui/forms/sub.tsx                      |   3 +-
 src/app/ui/genreBadges.tsx                    |   2 +-
 src/app/ui/tables/actions.tsx                 |  45 ---------------
 src/app/ui/tables/inputs/genrePickerInput.tsx |   8 +--
 src/app/ui/tables/inputs/textInput.tsx        |   4 +-
 src/app/ui/titleContainer.tsx                 |  11 ++++
 12 files changed, 80 insertions(+), 61 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..59cc09047ee7e06e6cb308ee485ad7403429e22f 100644
GIT binary patch
delta 1134
zcma)5U1(fI6rOYM%)N8}_Dho()AsJ}jqYZX6eZRo5dwyagtll1`k*gugD&PFbOV}-
z1hFfE6a*6&TtT!I1jP!mu3CiHLY3AUk!ZvgG!zs?4YpY8gGIqJvk!fh1K)S&%=!Ih
z_s~&!=%`%SN;?<RyJ_d~{nHbaZ=9RxqolDhQI2!};$s}ch_TkD;bXbR*}dP~ir>Ud
z+xqC9nS<5Gviq{}G*Y5ip+~A+u@W~FX|@(7{E^V?Ol`K%IJd7)3L$!0m-clJZ+}&E
zW7@$fe1!M7^a2j!C9L9e{EcUD5$ACb^SFWy)G&>ojB(=~7*m5TkxbP9lS<u^8w9fK
z29%~MZ(L>7#pG0ECp#-@vpJM;M&!sXGWm_Sj_i2QafB@Jy(5PhGgaXzH&y*6IOVF`
zp&a4`9&ysa6u!fwSi%oj;o-i<ANUY&;yFBlUvUIaV-la>As&;BN6e$(OEM!4T2|?R
zl0iTvPX<J3`Q}D#DT{GZbeMsdb>o$#(Or&H6gI*sSjvWMwwqQgJ88dlS2`115FS<p
ze#g%|%r*SUW4(LbT76@S*mFT_B`4z0ZgLGJ<Y<#fT7_m;Px`!g$j^}@rI~z^T1m6N
zFI~R!RbURD)UAI`sgB$6Hj6Ru@Y=ty5YKbptGI+ZKEr7&vmo<$1FzwGe2XvfGF~*s
zVvOTX#bvS~gXy5;!X^7zHdyJh*lDo5#o}fjB`$)|YrKE)u3H9-H?3Ig53$CpFAIK!
z4Sa!5@guih#yi&5u*R!D%kQx!dU^K_W|lYtv*zt{Z9ToPt)~}QJwqQ?I85o7TWZ!I
zYG3=(Ui+?<Mkn^<=@9E}@vq@4mi;pS0?wm#-8i~c+P{E@Ij)ySSQni<z`BTa&SdJu
zEaHV01B2ZEFTRZ#Jsla3FD;tJ%Cmtw@y`n1KSR;gs2Yyy)$nj|S&x0tL&tp?>=jQo
zSA3egv7Y1uL888?o>2MT+JS8M)PZbxr1^SC-OXx_O5y!ek7v8**m;|A-jR#z(H5JM
za7w<pEungE)GHPRQM-!%KV^F2J*hS+iJ*e_z+9Dk%w*e}lOc_q7!7IM;eWmRRC6q(
LT_;v!8g~B!#9Q4?

delta 980
zcma)2NoW*76s@YR>gwrq&x@H!$kH(r%#eeiV~EQk5I1lENe;oI#zP<=I1q?l1RW2G
zB4})IMA3{OC@Mr97X*o*VAKQ&MvS-x6~$d}IcOC8)q{6wc)x%B?Y+0XAh#Ff{yLr+
z2$u28`R?8hUKif!Xyk7Ap(E|#ef$p=mA>MP%$ayNvhIOqjLn(d$iqT=tzRz`OV8pf
zvweNpzVOcaMwxUJD}G*|%w%q{1hz6<$5mXw8JxgT?8k0=!$-WvL5$-reqslnV-j1j
z8Jp?Ca<t$l^SO{IE5?PYw>Vd6m7pM+Wd*%8s~VG}6)0E@DsJ)c)L`pcOQ@NqAXF6v
z6{t#+1u{u9feI**X&1vpsh6P_UonJHI{z5&aTzC($1ZHaeGFnBw&5mTB8y=R6QvA%
zq698%8KaG<Fguj;wB+VGObm|<wJotkL-Z!Z%qXg$s+0$n(Oi&>LUV;r?rGd-_(ev1
z!W&HC5#7C8Z0tUcfkJX_oLey_HPLpJZD>16QLr2(jUp{ADrqH5VoP59eO;B$qooP#
z6?jX;_tNU`_>9}Qfoml098Qz>$M6&naSw-Z06VdhgmqyKrkU4NY1WIB!RADS6$aC_
z5!M)NfWh$MRC~J0`~}fWkaQz4V@AvejFG9Y@B|Z>D2eIxJIhIo!y@Ufjtr5G9YxYp
zGDyp)tgTXN3q?N1?9%E<hH3o37rdj@&oEgm@4kS6PH(9fa|{tz8+7alBcHT1|JpKW
z3$iR``+9^aeT$cUFY9sJ{Camcs!@HZil5iAtXlNvM>X$1=<sB%=jGyw7~?!QBj@wL
zUX$IFTC<@qm1)f%cX=|u(cw)o^SHWyQ)*uRMVv3J_87CbF~)N~jfk%Po~T%wSm6F^
zZfVWGaH*SQ*?a!CyN0^ew4q~m2m0UgmidNG!<9CduMpBd%MRxkyL{D^agS%Lzk9;P
AqyPW_

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..00165a0 100644
--- a/src/app/tailwind.css
+++ b/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));
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/genreBadges.tsx b/src/app/ui/genreBadges.tsx
index 799f9b8..5d3dcc9 100644
--- a/src/app/ui/genreBadges.tsx
+++ b/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>
   )
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/genrePickerInput.tsx b/src/app/ui/tables/inputs/genrePickerInput.tsx
index 9136632..61e6938 100644
--- a/src/app/ui/tables/inputs/genrePickerInput.tsx
+++ b/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">
-                <PopoverTrigger>
-                  {value.length > 0 ? <GenreBadges genres={value} /> : <p>Add genres</p>
+              <FormItem className="w-full max-w-xs flex flex-col">
+                <PopoverTrigger asChild>
+                  {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>
 
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..edee6ff
--- /dev/null
+++ b/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>
+}