Projects Tab - not working

backend/src/services/locality.ts

@@ -38,6 +38,11 @@ export const getLocalityDetails = async (id: number) => {
       now_syn_loc: {},
       now_ss: {},
       now_coll_meth: {},
+      now_plr: {
+        include: {
+          now_proj: true,
+        },
+      },
     },
   })
 

frontend/src/backendTypes.d.ts

@@ -6,13 +6,17 @@ import { RowState } from './components/DetailView/common/FormComponents'
 export type Editable<T> = T & { rowState?: RowState }
 
 export type CollectingMethod = Prisma.now_coll_meth
+export type LocalityProject = Prisma.now_plr & { now_proj: Prisma.now_proj }
 export type LocalitySpecies = Prisma.now_ls & { com_species: Prisma.com_species }
 export type Museum = Prisma.com_mlist
+export type Project = Prisma.now_proj
 export type SedimentaryStructure = Prisma.now_ss
 export type LocalitySynonym = Prisma.now_syn_loc
-export type LocalityDetails = Omit<Prisma.now_loc, 'now_mus'> & { museums: Array<Editable<Museum>> } & {
-  now_ls: Prisma.now_ls & { com_species: Prisma.com_species } & LocalitySynonym & SedimentaryStructure & CollectingMethod
-}
+export type LocalityDetails = Omit<Prisma.now_loc, 'now_mus'> 
+  & { museums: Array<Editable<Museum>> }
+  & {now_ls: Array<Prisma.now_ls[] & { com_species: Prisma.com_species }>}
+  & {now_plr: Array<Prisma.now_plr[] & { now_proj: Prisma.now_proj }>}
+  & LocalitySynonym & SedimentaryStructure & CollectingMethod
 
 export type Locality = {
   lid: number

frontend/src/components/Locality/LocalityDetails.tsx

@@ -8,6 +8,7 @@ import { LithologyTab } from './Tabs/LithologyTab'
 import { LocalityTab } from './Tabs/LocalityTab'
 import { TaphonomyTab } from './Tabs/TaphonomyTab'
 import { MuseumTab } from './Tabs/MuseumTab'
+import { ProjectTab } from './Tabs/ProjectTab'
 
 export const LocalityDetails = () => {
   const { id } = useParams()
@@ -41,6 +42,10 @@ export const LocalityDetails = () => {
       title: 'Museum',
       content: <MuseumTab />,
     },
+    {
+      title: 'Projects',
+      content: <ProjectTab />,
+    },
   ]
 
   return <DetailView tabs={tabs} data={data} />

frontend/src/components/Locality/Tabs/ProjectTab.tsx

@@ -0,0 +1,69 @@
+import { Editable, LocalityDetails, LocalityProject, Project } from '@/backendTypes'
+import { EditableTable, EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+import { useDetailContext } from '@/components/DetailView/hooks'
+import { Box, TextField } from '@mui/material'
+import { MRT_ColumnDef } from 'material-react-table'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+export const ProjectTab = () => {
+  const { editData, mode } = useDetailContext<LocalityDetails>()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm()
+  const [data, setData] = useState('')
+
+  const columns: MRT_ColumnDef<LocalityProject>[] = [
+    {
+      accessorKey: 'proj_code',
+      header: 'Code',
+    },
+    {
+      accessorKey: 'proj_name',
+      header: 'Project',
+    },
+    {
+      accessorKey: 'contact',
+      header: 'Contact',
+    },
+    {
+      accessorKey: 'proj_status',
+      header: 'Status',
+    },
+    {
+      accessorKey: 'proj_records',
+      header: 'Records',
+    },
+  ]
+
+  const onSave = async () => {
+    // TODO: Saving logic here (add Project to editData)
+    return Object.keys(errors).length === 0
+  }
+
+  const editingModal = (
+    <EditingModal buttonText="Add new Project" onSave={onSave}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
+        <TextField {...register('now_proj.code', { required: true })} label="Code" required />
+        <TextField {...register('now_proj.proj_name', { required: true })} label="Project" required />
+        <TextField {...register('now_proj.contact')} label="Contact" />
+        <TextField {...register('now_proj.proj_status', { required: true })} label="Status" required />
+        <TextField {...register('now_proj.proj_records', { required: true })} label="Records" required />
+      </Box>
+    </EditingModal>
+  )
+
+  return (
+    <Grouped title="Projects">
+      {mode === 'edit' && editingModal}
+      <EditableTable<Editable<Project>, LocalityDetails>
+        columns={columns}
+        data={editData.now_proj}
+        editable
+        field="now_proj"
+      />
+    </Grouped>
+  )
+}