src/app/lib/nameMaps.ts

@@ -1,8 +0,0 @@
-export function tableNameToItemName(tableName: string) {
-	const map = {
-		subs: "submission",
-		pubs: "publication",
-		story: "story"
-	}
-	return map[tableName]
-}

src/app/lib/update.ts

@@ -5,12 +5,27 @@ import prisma from "./db"
 import { revalidatePath } from "next/cache"
 import { redirect } from "next/navigation"
 
+export async function updateStory(data: Story & { genres: number[] }) {
+	const genresArray = data.genres.map((e) => { return { id: e } })
 
-export async function updateField({ text, number, table, column, id, pathname }: { text?: string, number?: number, table: string, column: string, id: number, pathname: string }) {
+	const res = await prisma.story.update({
+		where: { id: data.id },
+		data: {
+			title: data.title,
+			word_count: data.word_count,
+			genres: { set: genresArray }
+		}
+	})
+	console.log(`updated story: ${res}`)
+	revalidatePath("/story")
+	redirect("/story")
+}
+
+export async function updateTextField({ text, table, column, id, pathname }: { text: string, table: string, column: string, id: number, pathname: string }) {
 	const res = await prisma[table].update({
 		where: { id },
 		data: {
-			[column]: text ?? number
+			[column]: text
 		}
 	})
 	console.log(`updated record in ${table}: ${res}`)

src/app/publication/columns.tsx

@@ -17,7 +17,7 @@ import Link from "next/link"
 import { PubsWithGenres } from "./page"
 import { DialogClose } from "@radix-ui/react-dialog"
 import { actions } from "app/ui/tables/actions"
-import { TextInputCell } from "app/ui/tables/inputs/textInput"
+import { TextInputCell } from "app/ui/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
 
 

src/app/story/[id]/page.tsx

@@ -31,7 +31,7 @@ export default async function Page({ params }: { params: { id: string } }) {
       <PageHeader>{story?.title ?? ""}</PageHeader>
       <GenreBadges genres={story.genres} className="my-6" />
       <PageSubHeader>Submissions:</PageSubHeader>
-      <DataTable columns={columns} data={storySubs} tableName="subs" />
+      <DataTable columns={columns} data={storySubs} type="submission" />
 
     </div>
 

src/app/story/columns.tsx

@@ -5,9 +5,8 @@ import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import GenreBadges from "app/ui/genreBadges"
 import { actions } from "app/ui/tables/actions"
-import { TextInputCell } from "app/ui/tables/inputs/textInput"
+import { TextInputCell } from "app/ui/inputs/textInput"
 import { selectCol } from "app/ui/tables/selectColumn"
-import NumberInputCell from "app/ui/tables/inputs/numberInput"
 
 
 const columnHelper = createColumnHelper<StoryWithGenres>()
@@ -43,11 +42,7 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
         </Button>
       )
     },
-    enableColumnFilter: false,
+    enableColumnFilter: false
-    cell: NumberInputCell,
-    meta: {
-      step: 50
-    }
   },
   columnHelper.accessor("genres", {
     cell: props => {
@@ -57,6 +52,5 @@ export const columns: ColumnDef<StoryWithGenres>[] = [
     filterFn: "arrIncludes"
     //TODO - write custom filter function, to account for an array of objects
   }),
-
 ]
 

src/app/submission/columns.tsx

@@ -4,13 +4,11 @@ import { ArrowUpDown } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { SubComplete } from "./page"
 import { actions } from "app/ui/tables/actions"
-import { selectCol } from "app/ui/tables/selectColumn"
 
 
 const columnHelper = createColumnHelper<SubComplete>()
 
 export const columns: ColumnDef<SubComplete>[] = [
-  selectCol,
   {
     accessorFn: row => new Date(row.submitted),
     id: "submitted",

src/app/tailwind.css

@@ -870,6 +870,14 @@ body {
   height: 100vh;
 }
 
+.h-full {
+  height: 100%;
+}
+
+.h-1 {
+  height: 0.25rem;
+}
+
 .max-h-96 {
   max-height: 24rem;
 }
@@ -1096,6 +1104,10 @@ body {
   justify-content: space-around;
 }
 
+.justify-items-center {
+  justify-items: center;
+}
+
 .gap-1 {
   gap: 0.25rem;
 }
@@ -1427,6 +1439,10 @@ body {
   padding-top: 0.25rem;
 }
 
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
 .text-left {
   text-align: left;
 }

src/app/ui/inputs/textInput.tsx

@@ -0,0 +1,65 @@
+import { Cell, CellContext, Table } from "@tanstack/react-table"
+import { useState, useEffect } from "react"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import { Check, CircleX } from "lucide-react"
+import { updateTextField } from "app/lib/update"
+
+export const TextInputCell = (props: CellContext<any, any>) => {
+  let initialValue = props.getValue()
+  const [value, setValue] = useState(initialValue)
+  const [isActive, setIsActive] = useState(false)
+
+  const table = props.table.options.meta.tableName
+  const id = props.row.original.id
+  const column = props.column.id
+  const pathname = props.table.options.meta.pathname
+
+  function handleConfirm() {
+    updateTextField({
+      id,
+      table,
+      text: value,
+      column,
+      pathname
+    })
+    initialValue = value
+    handleClose()
+  }
+  function handleOpen() {
+    setIsActive(true)
+  }
+  function handleClose() {
+    setValue(initialValue)
+    setIsActive(false)
+  }
+  function handleKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {
+    if (event.code === "Enter") {
+      handleConfirm()
+    }
+  }
+
+
+  return (<div
+    onDoubleClick={() => setIsActive(prev => !prev)}
+    className="w-full h-fit flex items-center justify-center"
+    tabIndex={0}
+    onKeyDown={e => {
+      if (e.code === "Enter" && !isActive) {
+        setIsActive(true)
+      }
+    }}
+  >
+    {isActive ?
+      <Input
+        value={value}
+        onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
+        autoFocus={true}
+        onBlur={handleClose}
+        onKeyDown={handleKeyDown}
+        className="w-full"
+      />
+      : <p>{value}</p>
+    }
+  </div>)
+}

src/app/ui/tables/contextMenu.tsx

@@ -7,7 +7,6 @@ import Link from "next/link"
 import { ComponentProps } from "react"
 import { Row, Table, TableState } from "@tanstack/react-table"
 import { letterCase } from "app/lib/functions"
-import { tableNameToItemName } from "app/lib/nameMaps"
 
 export default function FormContextMenu({ table, row }: ComponentProps<"div"> & { table: Table<any>, row: Row<any> }) {
   const pathname = table.options.meta.pathname
@@ -38,7 +37,7 @@ export default function FormContextMenu({ table, row }: ComponentProps<"div"> &
         <DialogHeader>
           <DialogTitle>Are you sure?</DialogTitle>
           <DialogDescription>
-            Deleting a {tableNameToItemName(table.options.meta.tableName)} cannot be undone!
+            Deleting a {pathname.slice(1)} cannot be undone!
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>

src/app/ui/tables/data-table.tsx

@@ -44,8 +44,7 @@ import { deleteRecords } from "app/lib/del"
 import { Pathname } from "app/types"
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTrigger } from "@/components/ui/dialog"
 import pluralize from "app/lib/pluralize"
-import { updateField } from "app/lib/update"
+import { updateTextField } from "app/lib/update"
-import { tableNameToItemName } from "app/lib/nameMaps"
 
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[]
@@ -87,7 +86,7 @@ export function DataTable<TData, TValue>({
     },
     //this is where you put arbitrary functions etc to make them accessible via the table api
     meta: {
-      updateTextField: updateField,
+      updateTextField,
       tableName,
       pathname
     }
@@ -145,7 +144,7 @@ export function DataTable<TData, TValue>({
             {`Delete ${Object.keys(table.getState().rowSelection).length} ${pluralize(pathname.slice(1))}?`}
           </DialogHeader>
           <DialogDescription>
-            {`Deleting ${pluralize(tableNameToItemName(table.options.meta.tableName))} cannot be undone!`}
+            {`Deleting ${pluralize(pathname.slice(1))} cannot be undone!`}
           </DialogDescription>
           <DialogFooter>
             <DialogClose asChild>

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

@@ -1,20 +0,0 @@
-"use client"
-
-import { ComponentProps, Dispatch, SetStateAction } from "react"
-
-export function TableInputContainer({ isActive, setIsActive, children }: ComponentProps<"div"> & { isActive: boolean, setIsActive: Dispatch<SetStateAction<boolean>> }) {
-  return (
-    <div
-      onDoubleClick={() => setIsActive(prev => !prev)}
-      className="w-full h-fit flex items-center justify-center"
-      tabIndex={0}
-      onKeyDown={e => {
-        if (e.code === "Enter" && !isActive) {
-          setIsActive(true)
-        }
-      }}
-    >
-      {children}
-    </div>
-  )
-}

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

@@ -1,53 +0,0 @@
-import { Input } from "@/components/ui/input";
-import { CellContext } from "@tanstack/react-table";
-import { updateField } from "app/lib/update";
-import { useState } from "react";
-import { TableInputContainer } from "./inputContainer";
-
-
-export default function NumberInputCell(props: CellContext<any, any>) {
-  let initialValue = props.getValue()
-  const [value, setValue] = useState(initialValue)
-  const [isActive, setIsActive] = useState(false)
-
-  const table = props.table.options.meta.tableName
-  const id = props.row.original.id
-  const column = props.column.id
-  const pathname = props.table.options.meta.pathname
-
-  function handleConfirm() {
-    if (value === initialValue) {
-      setIsActive(false)
-      return
-    }
-    updateField({
-      id,
-      table,
-      number: Number(value),
-      column,
-      pathname
-    })
-    initialValue = value
-    setIsActive(false)
-  }
-  function handleExit() {
-    setValue(initialValue)
-    setIsActive(false)
-  }
-
-  return (
-    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
-      {isActive ?
-        <Input type="number"
-          onBlur={handleExit}
-          value={value}
-          autoFocus={true}
-          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
-          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
-          step={props.column.columnDef.meta.step}
-        />
-        : <p>{value}</p>
-      }
-    </TableInputContainer>
-  )
-}

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

@@ -1,54 +0,0 @@
-import { Cell, CellContext, Table } from "@tanstack/react-table"
-import { useState, useEffect } from "react"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { Check, CircleX } from "lucide-react"
-import { updateField } from "app/lib/update"
-import { TableInputContainer } from "./inputContainer"
-
-export const TextInputCell = (props: CellContext<any, any>) => {
-  let initialValue = props.getValue()
-  const [value, setValue] = useState(initialValue)
-  const [isActive, setIsActive] = useState(false)
-
-  const table = props.table.options.meta.tableName
-  const id = props.row.original.id
-  const column = props.column.id
-  const pathname = props.table.options.meta.pathname
-
-  function handleConfirm() {
-    if (value === initialValue) {
-      setIsActive(false)
-      return
-    }
-    updateField({
-      id,
-      table,
-      text: value,
-      column,
-      pathname
-    })
-    initialValue = value
-    setIsActive(false)
-  }
-  function handleExit() {
-    setValue(initialValue)
-    setIsActive(false)
-  }
-
-  return (
-    <TableInputContainer isActive={isActive} setIsActive={setIsActive}>
-      {isActive ?
-        <Input
-          value={value}
-          onChange={e => setValue(e.target.value)}         // onBlur={handleClose}
-          autoFocus={true}
-          onBlur={handleExit}
-          onKeyDown={e => { if (e.code === "Enter") { handleConfirm() } }}
-          className="w-full"
-        />
-        : <p>{value}</p>
-      }
-    </TableInputContainer>
-  )
-}