Locality Synonyms

frontend/src/backendTypes.d.ts

@@ -9,9 +9,9 @@ export type CollectingMethod = Prisma.now_coll_meth
 export type LocalitySpecies = Prisma.now_ls & { com_species: Prisma.com_species }
 export type Museum = Prisma.com_mlist
 export type SedimentaryStructure = Prisma.now_ss
-export type Synonym = Prisma.now_syn_loc
+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 } & Synonym & SedimentaryStructure & CollectingMethod
+  now_ls: Prisma.now_ls & { com_species: Prisma.com_species } & LocalitySynonym & SedimentaryStructure & CollectingMethod
 }
 
 export type Locality = {

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

@@ -197,11 +197,6 @@ export const LithologyTab = () => {
       <HalfFrames>
         <Grouped title="Sedimentary Structure & Taphonomic Detail">
           {mode === 'edit' && editingModal}
-          <EditingModal buttonText="Add new Sedimentary Structure" onSave={onSave}>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
-              <TextField {...register('sed_struct', { required: true })} label="Sedimentary Structure" required />
-            </Box>
-          </EditingModal>
           <EditableTable<Editable<SedimentaryStructure>, LocalityDetails>
             columns={columns}
             data={editData.now_ss}

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

@@ -1,6 +1,11 @@
-import { LocalityDetails } from '@/backendTypes'
-import { ArrayFrame } from '../../DetailView/common/FormComponents'
+import { Editable, LocalityDetails, LocalitySynonym } from '@/backendTypes'
+import { ArrayFrame, HalfFrames } from '../../DetailView/common/FormComponents'
 import { useDetailContext } from '@/components/DetailView/hooks'
+import { EditableTable, EditingModal, Grouped } from '@/components/DetailView/common/FormComponents'
+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 LocalityTab = () => {
   const { textField } = useDetailContext<LocalityDetails>()
@@ -26,11 +31,54 @@ export const LocalityTab = () => {
     ['Altitude (m)', textField('altitude')],
   ]
 
+  const { editData, mode } = useDetailContext<LocalityDetails>()
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm()
+  const [data, setData] = useState('')
+
+  const columns: MRT_ColumnDef<LocalitySynonym>[] = [
+    {
+      accessorKey: 'synonym',
+      header: 'Synonym',
+    },
+  ]
+
+  const onSave = async () => {
+    // TODO: Saving logic here (add Synonym to editData)
+    return Object.keys(errors).length === 0
+  }
+
+  const editingModal = (
+    <EditingModal buttonText="Add new Synonym" onSave={onSave}>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
+        <TextField {...register('synonym', { required: true })} label="Synonym" required />
+      </Box>
+    </EditingModal>
+  )
+
   return (
     <>
-      <ArrayFrame array={info} title="Info" />
-      <ArrayFrame array={country} title="Country" />
-      <ArrayFrame array={latlong} title="Latitude & Longitude" />
+      <HalfFrames>
+        <ArrayFrame array={info} title="Info" />
+        <ArrayFrame array={country} title="Country" />
+      </HalfFrames>
+
+      <HalfFrames>
+        <ArrayFrame array={latlong} title="Latitude & Longitude" />
+
+        <Grouped title="Synonyms">
+          {mode === 'edit' && editingModal}
+          <EditableTable<Editable<LocalitySynonym>, LocalityDetails>
+            columns={columns}
+            data={editData.now_syn_loc}
+            editable
+            field="synonyms"
+          />
+        </Grouped>
+      </HalfFrames>
     </>
   )
 }