Added variant update functionality.

frontend/app/components/variant/variantCreate.vue

@@ -22,7 +22,7 @@ async function create() {
 
     const variant: Variant = new Variant(0, weight.value, ean.value, name.value, description.value, ingredients.value);
 
-    await store.addVariant(store.article.id, variant);
+    await store.addVariant(variant);
 
     closeDialog();
   }
@@ -73,7 +73,7 @@ function clearVariables() {
           mdi-plus-thick
         </v-icon>
 
-        Artikel erstellen
+        Variante erstellen
 
         <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
       </v-card-title>

frontend/app/components/variant/variantRow.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-  import type {Variant} from "~/types/variant";
   import {useLabelEditorStore} from "~/store/labelEditorStore";
   import type {Ref} from "vue";
+  import {Variant} from "~/types/variant";
 
   let store = useLabelEditorStore();
 
@@ -11,13 +11,51 @@
 
   let edit: Ref<boolean> = ref<boolean>(false);
 
+  JSON.parse(JSON.stringify(props.variant.weight))
+  let weight: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.weight)));
+  let ean: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ean)));
+  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.name)));
+  let description: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.description)));
+  let ingredients: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ingredients)));
+
+  function toggleEdit() {
+    if (edit.value) {
+      disableEdit();
+    } else {
+      enableEdit();
+    }
+  }
+
+  function enableEdit() {
+    edit.value = true;
+  }
+
+  function disableEdit() {
+    edit.value = false;
+    weight.value = JSON.parse(JSON.stringify(props.variant.weight));
+    ean.value = JSON.parse(JSON.stringify(props.variant.ean));
+    name.value = JSON.parse(JSON.stringify(props.variant.name));
+    description.value = JSON.parse(JSON.stringify(props.variant.description));
+    ingredients.value = JSON.parse(JSON.stringify(props.variant.ingredients));
+  }
+
+  async function updateVariant() {
+    if (weight.value != null) {
+      let updateVariant: Variant = new Variant(props.variant.id, weight.value, ean.value, name.value, description.value, ingredients.value);
+
+      await store.updateVariant(updateVariant);
+
+      disableEdit();
+    }
+  }
+
 </script>
 
 <template>
   <v-card>
     <v-card-title>
       <v-row>
-        {{ variant.name }}
+        {{ name }}
 
         <v-spacer />
 
@@ -25,8 +63,8 @@
 
         <v-btn
             :flat="true"
-            size="small"
             :disabled="!edit"
+            :hidden="edit"
         >
           <v-icon>mdi-delete-empty</v-icon>
           <v-tooltip
@@ -41,8 +79,9 @@
 
         <v-btn
             :flat="true"
-            size="small"
             :disabled="!edit"
+            :hidden="edit"
+            @click="disableEdit()"
         >
           <v-icon>mdi-cancel</v-icon>
           <v-tooltip
@@ -55,8 +94,9 @@
 
         <v-btn
             :flat="true"
-            size="small"
             :disabled="!edit"
+            :hidden="edit"
+            @click="updateVariant()"
         >
           <v-icon>mdi-content-save</v-icon>
           <v-tooltip
@@ -71,7 +111,7 @@
 
         <v-btn
             :flat="true"
-            size="small"
+            @click="toggleEdit();"
         >
           <v-icon>mdi-pencil</v-icon>
           <v-tooltip
@@ -93,30 +133,30 @@
         <v-col cols="2">
           <v-row>
             <v-text-field
-                v-model.trim="variant.weight"
+                v-model.trim="weight"
                 label="Gewicht"
-                :readonly="true"
+                :readonly="!edit"
             />
           </v-row>
           <v-row>
             <v-text-field
-                v-model.trim="variant.ean"
+                v-model.trim="ean"
                 label="EAN"
-                :readonly="true"
+                :readonly="!edit"
             />
           </v-row>
         </v-col>
 
         <v-col cols="5">
           <v-textarea
-              :model-value="variant.description"
+              v-model.trim="description"
               :tile=true
               label="Beschreibung"
               counter
               :persistentCounter=true
               rows="6"
               no-resize
-              :readonly="true"
+              :readonly="!edit"
           >
             <template v-slot:counter="{ counter }">
               <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
@@ -126,14 +166,14 @@
 
         <v-col cols="5">
           <v-textarea
-              :model-value="variant.ingredients"
+              v-model.trim="ingredients"
               :tile=true
               label="Zutaten"
               counter
               :persistentCounter=true
               rows="6"
               no-resize
-              :readonly="true"
+              :readonly="!edit"
           >
             <template v-slot:counter="{ counter }">
               <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>