Added update and delete functionality to article with cascade for variants.

frontend/app/components/article/article.vue

@@ -1,16 +1,115 @@
 <script setup lang="ts">
   import {useLabelEditorStore} from "~/store/labelEditorStore";
   import {originToString} from "~/types/origin";
+  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
+  import type {Ref} from "vue";
 
   let store = useLabelEditorStore();
 
-  //const rules = [(v: string | any[]) => v.length <= 256 || 'Maximal 256 Zeichen.'];
+  let edit: Ref<boolean> = ref<boolean>(false);
+
+  function toggleEdit() {
+    if (edit.value) {
+      disableEdit();
+    } else {
+      enableEdit();
+    }
+  }
+
+  function enableEdit() {
+    edit.value = true;
+  }
+
+  function disableEdit() {
+    edit.value = false;
+    store.articleEdit = JSON.parse(JSON.stringify(store.article));
+  }
+
+  async function updateArticle() {
+    if (store.articleEdit != null &&
+        store.articleEdit.name != null && store.articleEdit.name.trim().length > 0 &&
+        store.articleEdit.origin != null)
+    {
+
+      await store.updateArticle(store.articleEdit);
+
+      disableEdit();
+    }
+  }
+
+  async function deleteArticle() {
+    await store.deleteCurrentArticle();
+  }
 </script>
 
 <template>
   <v-container>
-    <v-card v-if="store.article != null">
-      <v-card-title>{{ store.article.name }}</v-card-title>
+    <v-card v-if="store.article != null && store.articleEdit != null">
+      <v-card-title>
+        <v-row style="padding-top: 10px">
+          <v-text-field
+              v-model.trim="store.articleEdit.name"
+              :readonly="!edit"
+          />
+
+          <v-spacer />
+
+          <v-divider vertical/>
+
+          <DeleteConfirm
+              title="Artikel löschen?"
+              :disable="!edit"
+              @delete="deleteArticle()"
+          />
+
+          <v-divider vertical/>
+
+          <v-btn
+              :flat="true"
+              :disabled="!edit"
+              :hidden="edit"
+              @click="disableEdit()"
+          >
+            <v-icon>mdi-cancel</v-icon>
+            <v-tooltip
+                activator="parent"
+                location="bottom"
+            >
+              Abbrechen
+            </v-tooltip>
+          </v-btn>
+
+          <v-btn
+              :flat="true"
+              :disabled="!edit"
+              :hidden="edit"
+              @click="updateArticle()"
+          >
+            <v-icon>mdi-content-save</v-icon>
+            <v-tooltip
+                activator="parent"
+                location="bottom"
+            >
+              Speichern
+            </v-tooltip>
+          </v-btn>
+
+          <v-divider vertical/>
+
+          <v-btn
+              :flat="true"
+              @click="toggleEdit();"
+          >
+            <v-icon>mdi-pencil</v-icon>
+            <v-tooltip
+                activator="parent"
+                location="bottom"
+            >
+              Bearbeiten
+            </v-tooltip>
+          </v-btn>
+        </v-row>
+      </v-card-title>
 
       <v-divider/>
 
@@ -19,9 +118,9 @@
           <v-col cols="2">
             <v-row no-gutters>
               <v-checkbox
-                  v-model="store.article.bio"
+                  v-model="store.articleEdit.bio"
                   label="BIO"
-                  :readonly=true
+                  :readonly="!edit"
               />
             </v-row>
 
@@ -41,13 +140,15 @@
 
           <v-col cols="5" style="padding: 5px;">
             <v-textarea
-                :model-value="store.article.description"
+                v-model.trim="store.articleEdit.description"
                 :tile=true
                 label="Beschreibung"
                 counter
                 :persistentCounter=true
                 rows="6"
                 no-resize
+                :readonly="!edit"
+                persistent-placeholder
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
@@ -57,13 +158,15 @@
 
           <v-col cols="5" style="padding: 5px;">
             <v-textarea
-                :model-value="store.article.ingredients"
+                v-model.trim="store.articleEdit.ingredients"
                 :tile=true
                 label="Zutaten"
                 counter
                 :persistentCounter=true
                 rows="6"
                 no-resize
+                :readonly="!edit"
+                persistent-placeholder
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>

frontend/app/components/article/pickArticle.vue

@@ -12,9 +12,8 @@
 
   watch(dialog, async (oldDialog) => {
     if (oldDialog) {
-      console.log("Get articles");
       articles.value = await loadArticles();
-      console.log("Got articles");
+      selectedArticle.value = null;
     }
   })