Moved server, added backend structs and added ui elements.

frontend/app/components/article/articleCreate.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+  import type {Ref} from "vue";
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import {Article} from "~/types/article";
+  import {Origin} from "~/types/origin";
+
+  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);
+  let bio: Ref<boolean> = ref<boolean>(false);
+  let origin: Ref<Origin | null> = ref<Origin | null>(null);
+  let description: Ref<string | null> = ref<string | null>(null);
+  let ingredients: Ref<string | null> = ref<string | null>(null);
+
+  let origins: Origin[] = [
+      Origin.EU,
+      Origin.NEU,
+      Origin.EUnEU
+  ];
+
+  async function create() {
+    if (name.value != null && name.value.trim().length > 0 &&
+      origin.value != null && origin.value.trim().length > 0
+    ) {
+      loading.value = true;
+
+      const article: Article = new Article(0, name.value, bio.value, origin.value, description.value, ingredients.value, []);
+
+      await store.createArticle(article);
+
+      closeDialog();
+    }
+  }
+
+  function closeDialog() {
+    dialog.value = false;
+    clearVariables();
+  }
+
+  function clearVariables() {
+    name.value = null;
+    bio.value = false;
+    origin.value = null;
+    description.value = null;
+    ingredients.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"
+        >
+          Erstellen
+        </v-tooltip>
+      </v-btn>
+    </template>
+
+    <v-card>
+      <v-card-title>
+        <v-icon size="small">
+          mdi-plus-thick
+        </v-icon>
+
+        Artikel 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"
+        />
+
+        <v-row>
+          <v-col cols="2">
+            <v-checkbox
+                v-model.="bio"
+                label="BIO"
+            />
+          </v-col>
+          <v-col>
+            <v-select
+                v-model="origin"
+                :items="origins"
+                label="Herkunft"
+            ></v-select>
+          </v-col>
+        </v-row>
+
+        <v-textarea
+            v-model.trim="description"
+            label="Beschreibung"
+        />
+
+        <v-textarea
+            v-model.trim="ingredients"
+            label="Zutaten"
+        />
+      </v-card-text>
+
+      <v-divider/>
+
+      <v-card-actions>
+        <v-spacer/>
+
+        <v-btn
+            variant="text"
+            :disabled="loading"
+            @click="closeDialog()"
+        >
+          Abbrechen
+        </v-btn>
+
+        <v-btn
+            variant="text"
+            :disabled="name == null ||
+            origin == null ||
+             loading"
+            @click="create();"
+        >
+          Erstellen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/layout/customHeader.vue

@@ -13,6 +13,12 @@
         :vertical="true"
     />
 
+    <ArticleCreate/>
+
+    <v-divider
+        :vertical="true"
+    />
+
     <Notifications/>
 
   </v-app-bar>

frontend/app/store/labelEditorStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from "pinia";
-import type {Entity} from "~/types/entity";
+import type {Article} from "~/types/article";
 import {NotificationMessage} from "~/types/notificationMessage";
 import type {RuntimeConfig} from "nuxt/schema";
 
@@ -10,8 +10,8 @@ interface State {
   notifications: NotificationMessage[],
   notificationQueue: NotificationMessage[],
 
-  // Entity
-  entity: Entity | null,
+  // Article
+  article: Article | null,
 }
 
 export const useLabelEditorStore = defineStore('label_editor_store', {
@@ -22,8 +22,8 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
     notifications: [],
     notificationQueue: [],
 
-    // Entity
-    entity: null,
+    // Article
+    article: null,
   }),
   actions: {
     // Notification
@@ -88,33 +88,45 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
     },
 
 
-    // Entity
-    async loadEntity(entityID: number) {
+    // Article
+    async loadArticle(articleID: number) {
       try {
-        const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/' + entityID, {
+        const entity: Article = await $fetch<Article>(this.config.public.url + '/article/' + articleID, {
           method: 'GET',
         });
 
-        this.entity = entity;
-        this.addNotification(false, 'Artikel geladen: ' + this.entity.name);
+        this.article = entity;
+        this.addNotification(false, 'Artikel geladen: ' + this.article.name);
       } catch {
-        this.entity = null;
-        this.addNotification(true, 'Fehler beim laden des Artikel. ID:' + entityID);
+        this.article = null;
+        this.addNotification(true, 'Fehler beim laden des Artikel. ID:' + articleID);
       }
     },
 
-    async updateEntity(entity: Entity) {
-      if (this.entity != null) {
+    async createArticle(article: Article) {
+      try {
+        this.article = await $fetch<Article>(this.config.public.url + '/article', {
+          method: 'POST',
+          body: JSON.stringify(article),
+        });
+
+        this.addNotification(false, 'Artikel "' + article.name + '" erstellt');
+      } catch {
+        this.addNotification(true, 'Fehler beim erstellen des Artikel: ' + article.name);
+      }
+    },
+
+    async updateArticle(article: Article) {
+      if (this.article != null) {
         try {
-          const entity: Entity = await $fetch<Entity>(this.config.public.url + '/entity/update', {
+          this.article = await $fetch<Article>(this.config.public.url + '/article/update', {
             method: 'POST',
-            body: JSON.stringify(this.entity),
+            body: JSON.stringify(this.article),
           });
 
-          this.entity = entity;
-          this.addNotification(false, 'Artikel "' + this.entity.name + '" aktualisiert');
+          this.addNotification(false, 'Artikel "' + this.article.name + '" aktualisiert');
         } catch {
-          this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + this.entity.name);
+          this.addNotification(true, 'Fehler beim aktualisieren des Artikel: ' + this.article.name);
         }
       } else {
         this.addNotification(true, 'Es ist kein Artikel ausgewählt');
@@ -122,7 +134,7 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
     },
 
     clearEntity() {
-      this.entity = null;
+      this.article = null;
     },
   },
 });

frontend/app/types/article.ts

@@ -1,15 +1,16 @@
 import type {Variant} from "~/types/variant";
+import type {Origin} from "~/types/origin";
 
-export class Entity {
+export class Article {
   readonly id: number;
   name: string;
   bio: boolean;
-  origin: string;
-  description: string;
-  ingredients: string;
+  origin: Origin;
+  description: string | null;
+  ingredients: string | null;
   variants: Array<Variant>;
 
-  constructor(id: number, name: string, bio: boolean, origin: string, description: string, ingredients: string, variants: Array<Variant> | null) {
+  constructor(id: number, name: string, bio: boolean, origin: Origin, description: string | null, ingredients: string | null, variants: Array<Variant> | null) {
     this.id = id;
     this.name = name;
     this.bio = bio;

frontend/app/types/origin.ts

@@ -0,0 +1,5 @@
+export enum Origin {
+    EU = "EU",
+    NEU = "Nicht - EU",
+    EUnEU= "EU / Nicht EU",
+}