From 7879f69255462952910e5551763357421d4c80ed Mon Sep 17 00:00:00 2001
From: Matthias Lodner <matthias@lodner.de>
Date: Mon, 26 Jan 2026 16:51:29 +0100
Subject: [PATCH] Added update and delete functionality to article with cascade
 for variants.

---
 common/src/models/article.rs                  |  53 ++++++++
 frontend/app/components/article/article.vue   | 117 ++++++++++++++++--
 .../app/components/article/pickArticle.vue    |   3 +-
 .../app/components/variant/variantRow.vue     |   1 -
 frontend/app/store/labelEditorStore.ts        |  52 ++++++--
 .../20260126152946_cascade_on_delete.sql      |   7 ++
 server/src/main.rs                            |  52 +++++++-
 7 files changed, 266 insertions(+), 19 deletions(-)
 create mode 100644 server/migrations/20260126152946_cascade_on_delete.sql

diff --git a/common/src/models/article.rs b/common/src/models/article.rs
index 0aaa425..5608cf6 100644
--- a/common/src/models/article.rs
+++ b/common/src/models/article.rs
@@ -141,3 +141,56 @@ pub async fn insert_article(article: &Article, pool: PgPool) -> Option<Article>
         }
     }
 }
+
+pub async fn update_article(article_id: i64, article: &Article, pool: PgPool) -> Option<Article> {
+    let mut args = PgArguments::default();
+    args.add(&article.id);
+    args.add(&article.name);
+    args.add(&article.bio);
+    args.add(&article.origin);
+    args.add(&article.description);
+    args.add(&article.ingredients);
+    
+    let statement = format!(
+        "UPDATE {} SET name = $2, bio = $3, origin = $4, description = $5, ingredients = $6 WHERE id = $1 RETURNING *",
+        "article",
+    );
+
+    let res = sqlx::query_with(
+        statement.as_str(),
+        args)
+        .fetch_one(&pool).await;
+
+    info!("{:#?}", res);
+
+    match res {
+        Ok(record) => {
+            let variant = from_postgres_row_small(record);
+            Some(variant)
+        }
+        Err(err) => {
+            error!("Error while updating variant: {}", article_id);
+            None
+        }
+    }
+}
+
+pub async fn delete_article(article_id: i64, pool: PgPool) -> Option<()> {
+    let result = sqlx::query(
+        format!("DELETE FROM {} WHERE id = {}",
+                "article",
+                article_id
+        ).as_str()
+    ).execute(&pool).await;
+
+    match result {
+        Ok(_) => {
+            Some(())
+        }
+        Err(err) => {
+            println!("Error deleting article: {:#?}", err);
+
+            None
+        }
+    }
+}
diff --git a/frontend/app/components/article/article.vue b/frontend/app/components/article/article.vue
index 60b440e..a0b9ef1 100644
--- a/frontend/app/components/article/article.vue
+++ b/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>
diff --git a/frontend/app/components/article/pickArticle.vue b/frontend/app/components/article/pickArticle.vue
index fb91bbf..8f5d268 100644
--- a/frontend/app/components/article/pickArticle.vue
+++ b/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;
     }
   })
 
diff --git a/frontend/app/components/variant/variantRow.vue b/frontend/app/components/variant/variantRow.vue
index 0ae1501..d076775 100644
--- a/frontend/app/components/variant/variantRow.vue
+++ b/frontend/app/components/variant/variantRow.vue
@@ -12,7 +12,6 @@
 
   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)));
diff --git a/frontend/app/store/labelEditorStore.ts b/frontend/app/store/labelEditorStore.ts
index db243e2..c56d9e2 100644
--- a/frontend/app/store/labelEditorStore.ts
+++ b/frontend/app/store/labelEditorStore.ts
@@ -18,6 +18,7 @@ interface State {
 
   // Article
   article: Article | null,
+  articleEdit: Article | null,
 
   origins: Array<Origin>,
 }
@@ -36,6 +37,7 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
 
     // Article
     article: null,
+    articleEdit: null,
 
     origins: [
         Origin.EU,
@@ -113,10 +115,13 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
           method: 'GET',
         });
 
-        this.article = article;
-        this.addNotification(false, 'Artikel geladen: ' + this.article.name);
+        this.article = JSON.parse(JSON.stringify(article));
+        this.articleEdit = JSON.parse(JSON.stringify(article));
+
+        this.addNotification(false, 'Artikel geladen: ' + this.article!.name);
       } catch {
         this.article = null;
+        this.articleEdit = null;
         this.addNotification(true, 'Fehler beim laden des Artikel. ID:' + articleID);
       }
     },
@@ -139,12 +144,15 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
 
     async createArticle(article: Article) {
       try {
-        this.article = await $fetch<Article>(this.config.public.url + '/article', {
+        let createdArticle = await $fetch<Article>(this.config.public.url + '/article', {
           method: 'POST',
           body: JSON.stringify(article),
         });
 
-        this.addNotification(false, 'Artikel "' + article.name + '" erstellt');
+        this.article = JSON.parse(JSON.stringify(createdArticle));
+        this.articleEdit = JSON.parse(JSON.stringify(createdArticle));
+
+        this.addNotification(false, 'Artikel "' + createdArticle.name + '" erstellt');
       } catch {
         this.addNotification(true, 'Fehler beim erstellen des Artikel: ' + article.name);
       }
@@ -152,21 +160,49 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
 
     async updateArticle(article: Article) {
       if (this.article != null) {
+        console.log(article);
+
         try {
-          this.article = await $fetch<Article>(this.config.public.url + '/article/update', {
+          let updatedArticle = await $fetch<Article>(this.config.public.url + '/article/' + article.id, {
             method: 'POST',
-            body: JSON.stringify(this.article),
+            body: JSON.stringify(article),
           });
 
-          this.addNotification(false, 'Artikel "' + this.article.name + '" aktualisiert');
+          this.article.name = updatedArticle.name;
+          this.article.bio = updatedArticle.bio;
+          this.article.origin = updatedArticle.origin;
+          this.article.description = updatedArticle.description;
+          this.article.ingredients = updatedArticle.ingredients;
+
+          this.addNotification(false, 'Artikel "' + article.name + '" aktualisiert');
         } catch {
-          this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + this.article.name);
+          this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + article.name);
         }
       } else {
         this.addNotification(true, 'Es ist kein Artikel ausgewählt');
       }
     },
 
+    async deleteCurrentArticle() {
+      if(this.article != null) {
+        try {
+          await $fetch(this.config.public.url + '/article/' + this.article.id, {
+            method: 'DELETE',
+          });
+
+          this.article = null;
+
+          this.addNotification(false, 'Variante gelöscht.');
+        } catch {
+          this.addNotification(true, 'Fehler beim löschen der Variante.');
+        }
+      } else {
+        this.addNotification(true, 'Kann Variante nicht gelöscht werden. Es ist kein Artikel ausgewählt.');
+      }
+    },
+
+
+
     // Variant
     async addVariant(variant: Variant) {
       if(this.article != null) {
diff --git a/server/migrations/20260126152946_cascade_on_delete.sql b/server/migrations/20260126152946_cascade_on_delete.sql
new file mode 100644
index 0000000..c569fdd
--- /dev/null
+++ b/server/migrations/20260126152946_cascade_on_delete.sql
@@ -0,0 +1,7 @@
+-- Add migration script here
+ALTER TABLE public.variant
+DROP CONSTRAINT variant_article_id_fkey,
+ADD CONSTRAINT variant_article_id_fkey
+   foreign key (article_id)
+   references article(id)
+   on delete cascade;
\ No newline at end of file
diff --git a/server/src/main.rs b/server/src/main.rs
index bc56584..223dff2 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -9,7 +9,7 @@ use axum::routing::delete;
 use dotenv::dotenv;
 use env_logger::fmt::style::Reset;
 use http::{header, Method};
-use common::models::article::{insert_article, load_article, load_articles, Article};
+use common::models::article::{delete_article, insert_article, load_article, load_articles, update_article, Article};
 use common::models::origin::Origin;
 use sqlx::{ postgres::PgPoolOptions, PgPool };
 use tower_http::cors::{AllowOrigin, Any, CorsLayer};
@@ -49,6 +49,8 @@ async fn main() {
         .route("/articles", get(get_articles))
         .route("/article", post(create_article))
         .route("/article/{id}", get(get_article))
+        .route("/article/{id}", post(update_article_route))
+        .route("/article/{id}", delete(delete_article_route))
         .route("/article/{id}/variant", post(add_variant))
         .route("/variant/{id}", post(update_variant_route))
         .route("/variant/{id}", delete(delete_variant_route))
@@ -135,6 +137,54 @@ async fn create_article(
     }
 }
 
+async fn update_article_route(
+    State(pool): State<PgPool>,
+    Path(article_id): Path<i64>,
+    Json(payload): Json<Article>,
+) -> (StatusCode, Json<Article>) {
+    info!("Update article");
+
+    let update_article = update_article(article_id, &payload, pool).await;
+
+    match update_article {
+        Some(article) => {
+            (StatusCode::OK, Json(article))
+        }
+        None => {
+            let article = Article {
+                id: 0,
+                name: "".to_string(),
+                bio: false,
+                origin: Origin::EU,
+                description: None,
+                ingredients: None,
+                variants: vec![],
+            };
+
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(article))
+        }
+    }
+}
+
+async fn delete_article_route(
+    State(pool): State<PgPool>,
+    Path(article_id): Path<i64>,
+) -> StatusCode {
+    info!("Delete article");
+
+    let delete_article_result = delete_article(article_id, pool).await;
+
+    match delete_article_result {
+        Some(_) => {
+            StatusCode::OK
+        }
+        None => {
+            StatusCode::INTERNAL_SERVER_ERROR
+        }
+    }
+}
+
+
 async fn add_variant(
     State(pool): State<PgPool>,
     Path(article_id): Path<i64>,