From cb39f7ad32ee2ba4a47f3a671c29f1f839e52f62 Mon Sep 17 00:00:00 2001
From: Matthias Lodner <matthias@lodner.de>
Date: Sat, 31 Jan 2026 17:10:40 +0100
Subject: [PATCH] Functionality to create, update and delete label.

---
 .env.sample                                   |   2 +-
 frontend/app/components/label/label.vue       |  96 ++++++++++++++
 frontend/app/components/label/labelCreate.vue | 114 +++++++++++++++++
 frontend/app/components/label/labelRow.vue    | 119 ++++++++++++++++++
 .../app/components/layout/customHeader.vue    |   6 +
 frontend/app/store/labelEditorStore.ts        |  67 ++++++++++
 frontend/nuxt.config.ts                       |   2 +-
 server/src/main.rs                            |  84 +++++++++++++
 8 files changed, 488 insertions(+), 2 deletions(-)
 create mode 100644 frontend/app/components/label/label.vue
 create mode 100644 frontend/app/components/label/labelCreate.vue
 create mode 100644 frontend/app/components/label/labelRow.vue

diff --git a/.env.sample b/.env.sample
index 0e7aa15..cf24401 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,6 +1,6 @@
 # Web server
 SERVER_ADDRESS=localhost
-SERVER_PORT=9090
+SERVER_PORT=9091
 
 # Database
 DATABASE_URL=postgres://USER:PASSWORD@localhost:5432/label_editor
diff --git a/frontend/app/components/label/label.vue b/frontend/app/components/label/label.vue
new file mode 100644
index 0000000..8ced891
--- /dev/null
+++ b/frontend/app/components/label/label.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import LabelCreate from "~/components/label/labelCreate.vue";
+
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+  watch(dialog, async (oldDialog) => {
+    if (oldDialog) {
+      loading.value = true;
+
+      await store.loadLabels();
+
+      loading.value = false;
+    }
+  })
+
+  function closeDialog() {
+    dialog.value = false;
+  }
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+      height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-label</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Etiketten Typen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-row style="padding-top: 10px">
+          <v-icon size="small">
+            mdi-label
+          </v-icon>
+
+          Etiketten Typen
+
+          <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+
+          <v-spacer/>
+          <v-divider vertical/>
+
+          <LabelCreate/>
+        </v-row>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <LabelRow
+            v-for="(label) in store.labels"
+            :key="label.id"
+            v-bind:label="label"
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Schließen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/label/labelCreate.vue b/frontend/app/components/label/labelCreate.vue
new file mode 100644
index 0000000..a6f20e8
--- /dev/null
+++ b/frontend/app/components/label/labelCreate.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import {Label} from "~/types/label";
+
+  let store = useLabelEditorStore();
+  let dialog: Ref<boolean> = ref<boolean>(false);
+  let loading: Ref<boolean> = ref<boolean>(false);
+
+  let name: Ref<string | null> = ref<string | null>(null);
+
+  watch(dialog, async (oldDialog) => {
+    if (oldDialog) {
+      loading.value = true;
+
+      await store.loadLabels();
+
+      loading.value = false;
+    }
+  })
+
+  async function create() {
+    if (name.value != null && name.value.trim().length > 0){
+      const label = new Label(0, name.value);
+      await store.createLabel(label);
+
+      closeDialog();
+    }
+  }
+
+  function closeDialog() {
+    dialog.value = false;
+    clearVariables();
+  }
+
+  function clearVariables() {
+    name.value = null;
+
+    loading.value = false;
+  }
+
+</script>
+
+<template>
+  <v-dialog
+      v-model="dialog"
+      :scrollable="true"
+      width="800"
+      max-height="750"
+  >
+    <template v-slot:activator="{ props }">
+      <v-btn
+          :flat="true"
+          v-bind="props"
+          size="small"
+      >
+        <v-icon>mdi-plus-thick</v-icon>
+        <v-tooltip
+            activator="parent"
+            location="bottom"
+        >
+          Etiketten Typ erstellen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-plus-thick
+        </v-icon>
+
+        Etiketten Typ erstellen
+
+        <v-progress-circular v-if="loading" indeterminate :size="15" :width="2"></v-progress-circular>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text>
+        <v-text-field
+            v-model.trim="name"
+            label="Bezeichnung"
+            autofocus
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Schließen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            :disabled="name == null || loading"
+            @click="create();"
+        >
+          Erstellen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/label/labelRow.vue b/frontend/app/components/label/labelRow.vue
new file mode 100644
index 0000000..4895b2d
--- /dev/null
+++ b/frontend/app/components/label/labelRow.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+  import DeleteConfirm from "~/components/ui/deleteConfirm.vue";
+  import {Label} from "~/types/label";
+
+  let store = useLabelEditorStore();
+
+  const props = defineProps({
+    label: {type: Object as PropType<Label>, required: true},
+  });
+
+  let edit: Ref<boolean> = ref<boolean>(false);
+
+  let name: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.label.name)));
+
+  function toggleEdit() {
+    if (edit.value) {
+      disableEdit();
+    } else {
+      enableEdit();
+    }
+  }
+
+  function enableEdit() {
+    edit.value = true;
+  }
+
+  function disableEdit() {
+    name.value = JSON.parse(JSON.stringify(props.label.name));
+  }
+
+  async function updateLabel() {
+    if (name.value != null && name.value.trim().length > 0) {
+      const label = new Label(props.label.id, name.value);
+      await store.updateLabel(label);
+
+      disableEdit();
+    }
+  }
+
+  async function deleteLabel() {
+    await store.deleteLabel(props.label.id);
+  }
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>
+      <v-row style="padding-top: 10px">
+        <v-text-field
+            v-model.trim="name"
+            :readonly="!edit"
+        />
+
+        <v-spacer />
+
+        <v-divider vertical/>
+
+        <DeleteConfirm
+            title="Etiketten Typ löschen?"
+            :disable="!edit"
+            @delete="deleteLabel()"
+        />
+
+        <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="updateLabel()"
+        >
+          <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-card>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/frontend/app/components/layout/customHeader.vue b/frontend/app/components/layout/customHeader.vue
index 8047f9b..eddd185 100644
--- a/frontend/app/components/layout/customHeader.vue
+++ b/frontend/app/components/layout/customHeader.vue
@@ -14,6 +14,12 @@
         :vertical="true"
     />
 
+    <Label/>
+
+    <v-divider
+        :vertical="true"
+    />
+
     <PickArticle/>
 
     <ArticleCreate/>
diff --git a/frontend/app/store/labelEditorStore.ts b/frontend/app/store/labelEditorStore.ts
index 0486a3c..064e1d4 100644
--- a/frontend/app/store/labelEditorStore.ts
+++ b/frontend/app/store/labelEditorStore.ts
@@ -5,6 +5,7 @@ import type {RuntimeConfig} from "nuxt/schema";
 import {Origin} from "~/types/origin";
 import type {Variant} from "~/types/variant";
 import {Unit} from "~/types/unit";
+import type {Label} from "~/types/label";
 
 interface State {
   config: RuntimeConfig,
@@ -21,6 +22,8 @@ interface State {
   article: Article | null,
   articleEdit: Article | null,
 
+  labels: Array<Label>,
+
   origins: Array<Origin>,
   units: Array<Unit>,
 }
@@ -41,6 +44,8 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
     article: null,
     articleEdit: null,
 
+    labels: [],
+
     origins: [
         Origin.EU,
         Origin.NonEU,
@@ -117,6 +122,68 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
       this.addNotification(false, "Benachrichtigungen gelöscht")
     },
 
+    async loadLabels() {
+      try {
+        const labels: Array<Label> = await $fetch<Array<Label>>(this.config.public.url + '/label', {
+          method: 'GET',
+        });
+
+        this.labels = labels;
+
+        this.addNotification(false, 'Etiketten Typen geladen');
+      } catch {
+        this.addNotification(true, 'Fehler beim laden der Etiketten Typen');
+      }
+    },
+
+    async createLabel(label: Label) {
+      try {
+        let createdLabel = await $fetch<Label>(this.config.public.url + '/label', {
+          method: 'POST',
+          body: JSON.stringify(label),
+        });
+
+        this.labels.push(createdLabel);
+
+        this.addNotification(false, 'Etiketten Typ "' + createdLabel.name + '" erstellt');
+      } catch {
+        this.addNotification(true, 'Fehler beim erstellen des Etiketten Typ: ' + label.name);
+      }
+    },
+
+    async updateLabel(label: Label) {
+      let labelIndex = this.labels.findIndex(i => i.id === label.id);
+
+      try {
+        let updatedLabel = await $fetch<Label>(this.config.public.url + '/label/' + label.id, {
+          method: 'POST',
+          body: JSON.stringify(label),
+        });
+
+        this.labels[labelIndex] = updatedLabel;
+
+        this.addNotification(false, 'Etiketten Typ aktualisiert.');
+      } catch {
+        this.addNotification(true, 'Fehler beim aktualisieren des Etiketten Typen.');
+      }
+    },
+
+    async deleteLabel(labelID: number) {
+      let labelIndex = this.labels.findIndex(i => i.id === labelID);
+
+      try {
+        await $fetch(this.config.public.url + '/label/' + labelID, {
+          method: 'DELETE',
+        });
+
+        this.labels.splice(labelIndex, 1);
+
+        this.addNotification(false, 'Etiketten Typ aktualisiert.');
+      } catch {
+        this.addNotification(true, 'Fehler beim aktualisieren des Etiketten Typen.');
+      }
+    },
+
 
     // Article
     async loadArticle(articleID: number) {
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index 42e7de1..242aee3 100644
--- a/frontend/nuxt.config.ts
+++ b/frontend/nuxt.config.ts
@@ -11,7 +11,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      url: process.env.URL || 'http://localhost:9090',
+      url: process.env.URL || 'http://localhost:9091',
     },
   },
 
diff --git a/server/src/main.rs b/server/src/main.rs
index 6296724..20172e1 100644
--- a/server/src/main.rs
+++ b/server/src/main.rs
@@ -16,6 +16,7 @@ use tower_http::cors::{AllowOrigin, Any, CorsLayer};
 use tracing::info;
 use http::header::{AUTHORIZATION, ACCEPT, ACCESS_CONTROL_ALLOW_ORIGIN, CONTENT_TYPE, ACCESS_CONTROL_ALLOW_CREDENTIALS};
 use common::models::article;
+use common::models::label::{delete_label, insert_label, load_labels, update_label, Label};
 use common::models::unit::Unit;
 use common::models::variant::{delete_variant, insert_variant, update_variant, Variant};
 
@@ -55,6 +56,10 @@ async fn main() {
         .route("/article/{id}/variant", post(add_variant))
         .route("/variant/{id}", post(update_variant_route))
         .route("/variant/{id}", delete(delete_variant_route))
+        .route("/label", get(get_labels_route))
+        .route("/label", post(add_label_route))
+        .route("/label/{id}", post(update_label_route))
+        .route("/label/{id}", delete(delete_label_route))
         .with_state(pool)
         .layer(cors);
 
@@ -268,3 +273,82 @@ async fn delete_variant_route(
         }
     }
 }
+
+#[tracing::instrument(ret)]
+async fn get_labels_route(
+    State(pool): State<PgPool>,
+) -> (StatusCode, Json<Vec<Label>>) {
+    info!("Get all labels");
+
+    match load_labels(pool).await {
+        Some(labels) => {
+            (StatusCode::OK, Json(labels))
+        }
+        None => {
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(vec![]))
+        }
+    }
+}
+
+#[tracing::instrument(ret)]
+async fn add_label_route(
+    State(pool): State<PgPool>,
+    Json(payload): Json<Label>,
+) -> (StatusCode, Json<Label>) {
+    info!("Add label");
+
+    match insert_label(&payload, pool).await {
+        Some(variant) => {
+            (StatusCode::OK, Json(variant))
+        }
+        None => {
+            let label = Label {
+                id: 0,
+                name: "".to_string(),
+            };
+
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(label))
+        }
+    }
+}
+
+#[tracing::instrument(ret)]
+async fn update_label_route(
+    State(pool): State<PgPool>,
+    Path(label_id): Path<i64>,
+    Json(payload): Json<Label>,
+) -> (StatusCode, Json<Label>) {
+    info!("Update label");
+
+    match update_label(label_id, &payload, pool).await {
+        Some(variant) => {
+            (StatusCode::OK, Json(variant))
+        }
+        None => {
+            let label = Label {
+                id: 0,
+                name: "".to_string(),
+            };
+
+            (StatusCode::INTERNAL_SERVER_ERROR, Json(label))
+        }
+    }
+}
+
+async fn delete_label_route(
+    State(pool): State<PgPool>,
+    Path(label_id): Path<i64>,
+) -> StatusCode {
+    info!("Delete label");
+
+    let delete_variant_result = delete_label(label_id, pool).await;
+
+    match delete_variant_result {
+        Some(_) => {
+            StatusCode::OK
+        }
+        None => {
+            StatusCode::INTERNAL_SERVER_ERROR
+        }
+    }
+}