#48 show, in table, metabolites of daughter solution

components/DaughterTable.vue

@@ -0,0 +1,77 @@
+<!--
+SPDX-FileCopyrightText: 2024 Marcellino Palerme <marcellino.palerme@inrae.fr>
+
+SPDX-License-Identifier: MIT
+-->
+<!-- 
+    This component display in light version the table of metabolites of a serie
+    of each daughter solution. It provide a input to indicate the expected area.
+    It is used in ManageSerie.async.vue
+ -->
+
+<script setup lang="ts">
+// to manage translation
+const { t } = useI18n();
+
+// Define daughter solution metabolites table
+// -- inputs information
+const model = defineModel<{nameFile:string, nameMeta:string, area:number, expectedArea:number}[]>({ required: true });
+// -- headers of the table
+const headers = ref([
+    { title: t('nameMeta'), sortable:true, key: 'nameMeta' },
+    { title: t('area'), sortable:true, key: 'area' },
+    { title: t('expectedArea'), sortable:true, key: 'expectedArea' },
+    { title: t('delete'), key: 'del' },
+]);
+// -- group by daughter solution
+const groupBy = ref([{ title: t('nameFile'), sortable:true, key: 'nameFile' }]);
+
+
+/**
+ * Delete a daughter file
+ * @param nameFile name of the daughter file to delete
+ */
+function delDaughterFile(nameFile: string) {
+    console.log("delete daughter file", nameFile);
+    model.value = model.value.filter((item) => item.nameFile !== nameFile);
+}
+
+</script>
+
+<template>
+  <v-data-table-virtual
+    v-model:items="model"
+    :headers="headers"
+    :group-by="groupBy"
+    item-key="nameMeta"
+  >
+    <!-- Redefine group header to delete a complely a daughter solution -->
+    <template #group-header="{ item, columns, toggleGroup, isGroupOpen }">
+      <tr>
+        <td :colspan="columns.length">
+          <!-- Button to extend or collapse one group -->
+          <v-btn
+            :icon="isGroupOpen(item) ? '$expand' : '$next'"
+            size="small"
+            variant="text"
+            @click="toggleGroup(item)"
+          />
+          {{ item.value }}
+          <!-- button to delete the group -->
+          <v-icon @click="delDaughterFile(item.value)">
+            mdi-delete
+          </v-icon>
+        </td>
+      </tr>
+    </template>
+    <!-- input for expected area -->
+    <template #[`item.expectedArea`]="{index}">
+      <v-text-field
+        v-model="model[index].expectedArea"
+        type="number"
+        variant="plain"
+        :rules="[(v) => v >= 0 || t('message.positiveNumber')]"
+      />
+    </template>
+  </v-data-table-virtual>
+</template>

components/ManageSerie.async.vue

@@ -17,6 +17,12 @@ const nameRules = ref([
 
 const daughterFile = ref<File | null>(null);
 const nameSerie = ref<string>("");
+const rDaughterTable = ref<{
+    nameFile: string;
+    nameMeta: string;
+    area: number;
+    expectedArea: number}[]>([]);
+
 
 /**
  * Add a new serie
@@ -31,6 +37,7 @@ function add() {
  * We update table of metabolites of the serie
  */
 async function sendFile() {
+
   // Check if we have a file
   if (!daughterFile.value) {
     return;
@@ -50,12 +57,29 @@ async function sendFile() {
   const formData = new FormData();
   formData.append('file', daughterFile.value);
 
-  await $fetch('/api/extractFromFile', {
+  const result =await $fetch('/api/extractFromFile', {
     method: 'POST',
     body: formData,
   });
+
+  console.log(result);
+
+  if (typeof result === 'number' || result.length === 0) {
+    console.log("error");
+
+    return;
+  }
+
+  rDaughterTable.value.push(
+    ...result.map((r) => ({
+      nameFile: daughterFile.value.name,
+      nameMeta: r[0],
+      area: r[1],
+      expectedArea: 0,
+  })));
 
 }
+
 </script>
 
 <template>
@@ -65,7 +89,7 @@ async function sendFile() {
   />
   <v-dialog
     v-model="dialog"
-    max-width="600"
+    max-width="700"
   >
     <v-form
       v-model="validateForm"
@@ -85,7 +109,6 @@ async function sendFile() {
             required
           />
         </v-card-text>
-
         <v-expansion-panels>
           <v-expansion-panel
             :title="t('title.machine')"
@@ -112,6 +135,9 @@ async function sendFile() {
                 :label="t('label.daughterFile')"
                 :click:append="sendFile()"
               />
+              <daughter-table
+                v-model="rDaughterTable"
+              />
             </v-expansion-panel-text>
           </v-expansion-panel>
         </v-expansion-panels>