#58 add modify mode of molecule

components/FormMolecule.vue

@@ -265,6 +265,20 @@ watch(itemEquivalentsSelected, (value) => {
 function removeEquivalent(item: any) {
   listEquivalents.value = listEquivalents.value.filter((val) => val.id !== item.id);
 }
+
+/**
+ * submit form: select function to call
+ */
+function submitForm() {
+  if (props.action === 'add') {
+    add();
+  } else if (props.action === 'modify') {
+    modify();
+  }
+
+  event('close');
+}
+
 /**
  * Add molecule
  */
@@ -292,9 +306,33 @@ function add() {
 /**
  * Update molecule
  */
-function update() {
-  // TODO
-  event('close');
+function modify() {
+  // update molecule in database
+  $fetch('/api/molecule/molecule', {
+    method: 'PUT',
+    body: JSON.stringify({
+      id: molDisplay.value.id,
+      name: molDisplay.value.name,
+      formula: molDisplay.value.formula,
+      mass: molDisplay.value.mass,
+      synonyms: (molDisplay.value?.synonyms || []),
+      userSyns: (molDisplay.value?.userSyns || []),
+      equivalents: listEquivalents.value.map((val) => val.id)
+    })
+  })
+  .then((response) => {
+    // manage error
+    if (typeof response === 'number') {
+      // request error
+      return;
+    }
+    event('close');
+  })
+  .catch((error) => {
+    // server error
+    console.log(error);
+
+  });
 }
 
 </script>
@@ -304,7 +342,7 @@ function update() {
     validate-on="blur"
     persistent
     :disabled="props.action === 'view'"
-    @submit.prevent="add"
+    @submit.prevent="submitForm"
   >
     <v-card>
       <!-- title of dialog box about action -->
@@ -461,7 +499,7 @@ function update() {
         v-if="props.action === 'view'"
         color="primary"
         :text="t('button.close')"
-        @click="event('close')"
+        type="submit"
       />
       <v-btn
         v-else-if="props.action === 'modify'"

components/ManageMolecule.async.vue

@@ -35,13 +35,24 @@ function view(item: any){
   // give the id of the molecule to the form
   idMolecule.value = item.id;
 }
+
+/**
+ * Open the dialog box to modify a molecule
+ */
+function modify(item: any){
+  dialogView.value = true;
+  action.value = 'modify';
+  // give the id of the molecule to the form
+  idMolecule.value = item.id;
+}
 </script>
 
 <template>
   <table-db-action 
     name-db-table="view_tab_molecule"
     :add="add"
     :view="view"
+    :modify="modify"
     :update="dialogView"
   />
   <v-dialog

db/init.sql

@@ -191,14 +191,19 @@ $$ LANGUAGE plpgsql;
 
 -- Function to get all synonyms and equivalents of a molecule
 CREATE OR REPLACE FUNCTION func_synonym_equivalent_molecule(in_id_mol INTEGER)
-RETURNS TABLE(synonyms VARCHAR[], equivalents INTEGER[]) AS $$
+RETURNS TABLE(synonym VARCHAR(255)[], equivalent INTEGER[]) AS $$
 BEGIN
     RETURN QUERY
-    SELECT array_agg(DISTINCT synonym.name) AS synonym , array_agg(DISTINCT(equivalent.id_mol_0, equivalent.id_mol_1)) AS equivalent
+    SELECT 
+        array_agg(DISTINCT synonym.name) AS synonym, 
+        array_agg(DISTINCT eq_id) AS equivalent
     FROM molecule
-    LEFT JOIN equivalent ON molecule.id = equivalent.id_mol_0 
-                          OR molecule.id = equivalent.id_mol_1
     LEFT JOIN synonym ON molecule.id = synonym.id_mol
+    LEFT JOIN (
+        SELECT id_mol_0 AS eq_id FROM equivalent WHERE id_mol_1 = in_id_mol
+        UNION
+        SELECT id_mol_1 AS eq_id FROM equivalent WHERE id_mol_0 = in_id_mol
+    ) AS equivalents ON true
     WHERE molecule.id = in_id_mol;
 END;
 $$ LANGUAGE plpgsql;

server/api/molecule/functions.ts

@@ -285,7 +285,7 @@ function updateSynonyms(idMolecule: number, userSyn: string[]): Promise<void> {
 function updateEquivalent(idMolecule: number, equivalents: number[]): Promise<void> {
     // Delete all equivalents of the molecule from the database
     return queryDatabase(`
-            DELETE FROM equivalent WHERE id_mol_1 = $1 OR id_mol_2 = $1`,
+            DELETE FROM equivalent WHERE id_mol_0 = $1 OR id_mol_1 = $1`,
         [idMolecule])
         // Insert all equivalents into the database
         .then(() => addEquivalents(idMolecule, equivalents));