Add creating synonym to species

backend/src/services/write/writeUtils.ts

@@ -53,13 +53,13 @@ export const logAllUpdates = async (
 ) => {
   const updateEntries: UpdateEntry[] = []
   const { writeList } = writeContext
-
   const getIdColumn = (targetTable: AllowedTables) => {
     if (targetTable === 'com_species') return 'species_id'
     if (targetTable === 'now_mus') return 'museum'
     if (targetTable === 'now_ls') return tableName === 'now_loc' ? 'species_id' : 'lid'
     if (targetTable === 'now_loc') return 'lid'
     if (targetTable === 'now_ss') return 'sed_struct'
+    if (targetTable === 'com_taxa_synonym') return 'synonym_id'
     throw new Error(`No id column found for ${targetTable}`)
   }
 
@@ -315,6 +315,7 @@ export type AllowedTables =
   | 'com_mlist'
   | 'com_species'
   | 'now_ss'
+  | 'com_taxa_synonym'
   | 'now_time_unit'
   | 'now_tu_bound'
   | 'ref_ref'
@@ -336,6 +337,7 @@ export const ids: Record<AllowedTables, string[]> = {
   now_time_unit: ['tu_name'],
   now_tu_bound: ['bid'],
   ref_ref: ['rid'],
+  com_taxa_synonym: ['synonym_id'],
 }
 
 export const supportedTables = Object.keys(ids)

frontend/src/components/Species/Tabs/SynonymTab.tsx

@@ -1,18 +1,12 @@
-import { Editable, SpeciesDetailsType, SpeciesSynonym } from '@/backendTypes'
+import { Editable, EditDataType, Species, SpeciesDetailsType, SpeciesSynonym } from '@/backendTypes'
 import { useDetailContext } from '@/components/DetailView/Context/DetailContext'
 import { Grouped } from '@/components/DetailView/common/tabLayoutHelpers'
-import { Box, TextField } from '@mui/material'
 import { MRT_ColumnDef } from 'material-react-table'
-import { useForm } from 'react-hook-form'
 import { EditableTable } from '@/components/DetailView/common/EditableTable'
-import { EditingModal } from '@/components/DetailView/common/EditingModal'
+import { EditingForm, EditingFormField } from '@/components/DetailView/common/EditingForm'
 
 export const SynonymTab = () => {
-  const { mode } = useDetailContext<SpeciesDetailsType>()
-  const {
-    register,
-    formState: { errors },
-  } = useForm()
+  const { mode, setEditData, editData } = useDetailContext<SpeciesDetailsType>()
 
   const columns: MRT_ColumnDef<SpeciesSynonym>[] = [
     {
@@ -29,26 +23,35 @@ export const SynonymTab = () => {
     },
   ]
 
-  // eslint-disable-next-line @typescript-eslint/require-await
-  const onSave = async () => {
-    // TODO: Saving logic here (add Synonym to editData)
-    return Object.keys(errors).length === 0
-  }
+  const formFields: EditingFormField[] = [
+    { name: 'syn_genus_name', label: 'Genus', required: true },
+    { name: 'syn_species_name', label: 'Species', required: true },
+    { name: 'syn_comment', label: 'Comment' },
+  ]
 
-  const editingModal = (
-    <EditingModal buttonText="Add new Synonym" onSave={onSave}>
-      <Box sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
-        <TextField {...register('syn_genus_name', { required: true })} label="Genus" required />
-        <TextField {...register('syn_species_name', { required: true })} label="Species" required />
-        <TextField {...register('syn_comment')} label="Comment" />
-      </Box>
-    </EditingModal>
+  const editingForm = (
+    <EditingForm<Species, SpeciesDetailsType>
+      buttonText="Add new Species"
+      formFields={formFields}
+      editAction={(newSynonym: EditDataType<SpeciesSynonym>) => {
+        setEditData({
+          ...editData,
+          com_taxa_synonym: [
+            ...editData.com_taxa_synonym,
+            {
+              ...newSynonym,
+              rowState: 'new',
+            },
+          ],
+        })
+      }}
+    />
   )
 
   return (
     <>
       <Grouped title="Synonyms">
-        {!mode.read && editingModal}
+        {!mode.read && editingForm}
         <EditableTable<Editable<SpeciesSynonym>, SpeciesDetailsType> columns={columns} field="com_taxa_synonym" />
       </Grouped>
     </>