Species Tab - Select Species

backend/src/services/locality.ts

@@ -65,8 +65,13 @@ export const getLocalityDetails = async (id: number) => {
   })
 
   if (!result) return null
-  const { now_mus, ...locality } = result
-  return { ...locality, museums: now_mus.map(museum => museum.com_mlist) }
+  const { now_ls, now_mus, now_plr, ...locality } = result
+  return {
+    ...locality,
+    museums: now_mus.map(museum => museum.com_mlist),
+    projects: now_plr.map(project => project.now_proj),
+    species: now_ls.map(species => species.com_species),
+  }
 }
 
 export const fixEditedLocality = (editedLocality: EditDataType<LocalityDetailsType>) => {

frontend/src/backendTypes.d.ts

@@ -39,9 +39,15 @@ export type RegionCountry = Prisma.now_reg_coord_country
 export type SedimentaryStructure = Prisma.now_ss
 export type LocalitySynonym = Prisma.now_syn_loc
 export type SpeciesSynonym = Prisma.com_taxa_synonym
-export type LocalityDetailsType = Omit<Prisma.now_loc, 'now_mus'> & { museums: Array<Editable<Museum>> } & {
+export type LocalityDetailsType = Omit<Prisma.now_loc, 'now_ls' | 'now_mus' | 'now_proj'> & {
+  museums: Array<Editable<Museum>>
+} & {
+  projects: Array<Editable<Project>>
+} & {
+  taxa: Array<Editable<Species>>
+} /*& {
   now_ls: Array<Editable<LocalitySpecies>>
-} & { now_plr: Array<Editable<LocalityProject>> } & { now_syn_loc: Array<Editable<LocalitySynonym>> } & {
+} */ & { now_plr: Array<Editable<LocalityProject>> } & { now_syn_loc: Array<Editable<LocalitySynonym>> } & {
   now_ss: Editable<SedimentaryStructure>[]
 } & {
   now_coll_meth: Editable<CollectingMethod>[]

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

@@ -1,45 +1,57 @@
-import { Editable, LocalityDetailsType, LocalityProject } from '@/backendTypes'
+import { Editable, LocalityDetailsType, Project } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
+// import { EditingForm } from '@/components/DetailView/common/EditingForm'
 import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
-import { EditingModal } from '@/components/DetailView/common/EditingModal'
+import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
-import { Box, TextField } from '@mui/material'
+import { useGetAllProjectsQuery } from '@/redux/projectReducer'
+import { Box, CircularProgress } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
 
 export const ProjectTab = () => {
   const { mode } = useDetailContext<LocalityDetailsType>()
-  const {
-    register,
-    formState: { errors },
-  } = useForm()
+  const { data: projectData, isError } = useGetAllProjectsQuery()
 
-  const columns: MRT_ColumnDef<LocalityProject>[] = [
+  if (isError) return 'Error loading Projects.'
+  if (!projectData) return <CircularProgress />
+
+  const columns: MRT_ColumnDef<Project>[] = [
     {
-      accessorKey: 'now_proj.proj_code',
+      accessorKey: 'proj_code',
       header: 'Code',
     },
     {
-      accessorKey: 'now_proj.proj_name',
+      accessorKey: 'proj_name',
       header: 'Project',
     },
     {
-      accessorKey: 'now_proj.contact',
+      accessorKey: 'contact',
       header: 'Contact',
     },
     {
-      accessorKey: 'now_proj.proj_status',
+      accessorKey: 'proj_status',
       header: 'Status',
     },
     {
-      accessorKey: 'now_proj.proj_records',
+      accessorKey: 'proj_records',
       header: 'Records',
     },
   ]
 
   return (
     <Grouped title="Projects">
-      {!mode.read && editingModal}
-      <EditableTable<Editable<LocalityProject>, LocalityDetailsType> columns={columns} field="now_plr" />
+      {!mode.read && (
+        <Box display="flex" gap={1}>
+          <SelectingTable<Project, LocalityDetailsType>
+            buttonText="Select Project"
+            data={projectData}
+            columns={columns}
+            fieldName="projects"
+            idFieldName="pid"
+          />
+        </Box>
+      )}
+      <EditableTable<Editable<Project>, LocalityDetailsType> columns={columns} field="projects" />
     </Grouped>
   )
 }

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

@@ -1,95 +1,86 @@
-import { Editable, LocalityDetailsType, LocalitySpecies } from '@/backendTypes'
+//import { Editable, LocalityDetailsType, Museum } from '@/backendTypes'
+import { Editable, LocalityDetailsType, Species } from '@/backendTypes'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-import { EditingModal } from '@/components/DetailView/common/EditingModal'
+import { EditingForm } from '@/components/DetailView/common/EditingForm'
 import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
 import { SelectingTable } from '@/components/DetailView/common/SelectingTable'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
-import { Box, TextField } from '@mui/material'
+import { useGetAllSpeciesQuery } from '@/redux/speciesReducer'
+import { Box, CircularProgress } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
 
 export const SpeciesTab = () => {
   const { mode } = useDetailContext<LocalityDetailsType>()
-  const {
-    register,
-    formState: { errors },
-  } = useForm()
+  const { data: speciesData, isError } = useGetAllSpeciesQuery()
 
-  const columns: MRT_ColumnDef<LocalitySpecies>[] = [
+  if (isError) return 'Error loading Species.'
+  if (!speciesData) return <CircularProgress />
+
+  const columns: MRT_ColumnDef<Species>[] = [
     {
-      accessorKey: 'com_species.order_name',
+      accessorKey: 'order_name',
       header: 'Order',
     },
     {
-      accessorKey: 'com_species.family_name',
+      accessorKey: 'family_name',
       header: 'Family',
     },
     {
-      accessorKey: 'com_species.genus_name',
+      accessorKey: 'genus_name',
       header: 'Genus',
     },
     {
-      accessorKey: 'com_species.species_name',
+      accessorKey: 'species_name',
       header: 'Species',
     },
     {
-      accessorKey: 'com_species.subclass_or_superorder_name',
+      accessorKey: 'subclass_or_superorder_name',
       header: 'Subclass or Superorder',
     },
     {
-      accessorKey: 'com_species.suborder_or_superfamily_name',
+      accessorKey: 'suborder_or_superfamily_name',
       header: 'Suborder or Superfamily',
     },
     {
-      accessorKey: 'com_species.unique_identifier',
+      accessorKey: 'unique_identifier',
       header: 'Unique Identifier',
     },
     {
-      accessorKey: 'com_species.taxonomic_status',
+      accessorKey: 'taxonomic_status',
       header: 'Taxon status',
     },
   ]
 
-  // eslint-disable-next-line @typescript-eslint/require-await
-  const onSave = async () => {
-    // TODO: Saving logic here (add Species to editData)
-    return Object.keys(errors).length === 0
-  }
-
-  const editingModal = (
-    <EditingModal buttonText="Add new Species" onSave={onSave}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
-        <TextField {...register('com_species.order_name', { required: true })} label="Order" />
-        <TextField {...register('com_species.family_name', { required: true })} label="Family" />
-        <TextField {...register('com_species.genus_name', { required: true })} label="Genus" />
-        <TextField {...register('com_species.species_name', { required: true })} label="Species" />
-        <TextField
-          {...register('com_species.subclass_or_superorder_name', { required: true })}
-          label="Subclass or Superorder"
-        />
-        <TextField
-          {...register('com_species.suborder_or_superfamily_name', { required: true })}
-          label="Suborder or Superfamily"
-        />
-        <TextField {...register('com_species.unique_identifier', { required: true })} label="Unique Identifier" />
-        <TextField {...register('com_species.taxonomic_status')} label="Taxon status" />
-      </Box>
-    </EditingModal>
-  )
+  const formFields: { name: string; label: string; required?: boolean }[] = [
+    { name: 'order_name', label: 'Order', required: true },
+    { name: 'family_name', label: 'Family', required: true },
+    { name: 'genus_name', label: 'Genus', required: true },
+    { name: 'species_name', label: 'Species', required: true },
+    { name: 'subclass_or_superorder_name', label: 'Subclass or Superorder' },
+    { name: 'suborder_or_superfamily_name', label: 'Suborder or Superfamily' },
+    { name: 'unique_identifier', label: 'Unique Identifier', required: true },
+    { name: 'taxonomic_status', label: 'Taxon status' },
+  ]
 
   return (
     <Grouped title="Species">
       {!mode.read && (
         <Box display="flex" gap={1}>
-          <SelectingTable<LocalitySpecies, LocalityDetailsType>
-            buttonText="Select Museum"
-            data={museumData}
+          <EditingForm<Species, LocalityDetailsType>
+            buttonText="Add new Species"
+            formFields={formFields}
+            arrayFieldName="species"
+          />
+          <SelectingTable<Species, LocalityDetailsType>
+            buttonText="Select Species"
+            data={speciesData}
             columns={columns}
-            fieldName="museums"
-            idFieldName="museum"
+            fieldName="species"
+            idFieldName="species_id"
           />
         </Box>
       )}
-      <EditableTable<Editable<Museum>, LocalityDetailsType> columns={columns} field="museums" />
+      <EditableTable<Editable<Species>, LocalityDetailsType> columns={columns} field="species" />
     </Grouped>
   )
 }