Added variants base functionality.

frontend/app/components/article/article.vue

@@ -47,6 +47,7 @@
                 counter
                 :persistentCounter=true
                 rows="6"
+                no-resize
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
@@ -63,6 +64,7 @@
                 counter
                 :persistentCounter=true
                 rows="6"
+                no-resize
             >
               <template v-slot:counter="{ counter }">
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>

frontend/app/components/variant/variant.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import {originToString} from "~/types/origin";
+
+  let store = useLabelEditorStore();
+</script>
+
+<template>
+  <v-container>
+    <v-card v-if="store.article != null">
+      <v-card-title>
+        <v-col>
+          <v-row>
+            Varianten
+
+            <v-spacer/>
+            <v-divider :vertical="true"/>
+
+            <VariantCreate/>
+          </v-row>
+        </v-col>
+      </v-card-title>
+
+      <v-divider/>
+
+      <v-card-text
+          v-for="(variant, index) in store.article.variants"
+          :key="variant.id"
+      >
+        <VariantRow
+            v-bind:variant="variant"
+            v-bind:variant-index="index"
+        />
+        <v-divider/>
+      </v-card-text>
+
+    </v-card>
+  </v-container>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/variant/variantCreate.vue

@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import type {Ref} from "vue";
+import {useLabelEditorStore} from "~/store/labelEditorStore";
+import { Variant } from "~/types/variant";
+
+let store = useLabelEditorStore();
+
+let dialog: Ref<boolean> = ref<boolean>(false);
+let loading: Ref<boolean> = ref<boolean>(false);
+
+let weight: Ref<string | null> = ref<string | null>(null);
+let ean: Ref<string | null> = ref<string | null>(null);
+let name: Ref<string | null> = ref<string | null>(null);
+let description: Ref<string | null> = ref<string | null>(null);
+let ingredients: Ref<string | null> = ref<string | null>(null);
+
+async function create() {
+  if (store.article != null &&
+      weight.value != null && weight.value.trim().length > 0
+  ) {
+    loading.value = true;
+
+    const variant: Variant = new Variant(0, weight.value, ean.value, name.value, description.value, ingredients.value);
+
+    await store.addVariant(store.article.id, variant);
+
+    closeDialog();
+  }
+}
+
+function closeDialog() {
+  dialog.value = false;
+  clearVariables();
+}
+
+function clearVariables() {
+  weight.value = null;
+  ean.value = null;
+  name.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"
+            autofocus
+        />
+
+        <v-text-field
+            v-model.trim="weight"
+            label="Gewicht"
+        />
+
+        <v-textarea
+            v-model.trim="ean"
+            label="EAN-Code"
+        />
+
+        <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="weight == null ||
+             loading"
+            @click="create();"
+        >
+          Erstellen
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/components/variant/variantRow.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+  import type {Variant} from "~/types/variant";
+
+  const props = defineProps({
+    variant: {type: Object as PropType<Variant>, required: true},
+    variantIndex: {type: Number, required: true},
+  });
+</script>
+
+<template>
+  <v-row
+      align="start"
+  >
+    <v-col cols="2">
+      <v-row>
+        <v-text-field
+            v-model.trim="variant.weight"
+            label="Gewicht"
+            :readonly="true"
+        />
+      </v-row>
+      <v-row>
+        <v-text-field
+            v-model.trim="variant.ean"
+            label="EAN"
+            :readonly="true"
+        />
+      </v-row>
+    </v-col>
+
+    <v-col cols="5">
+      <v-text-field
+          v-model="variant.description"
+          label="Bezeichnung"
+          :readonly="true"
+          hide-details
+      />
+    </v-col>
+
+    <v-col cols="5">
+      <v-text-field
+          v-model="variant.ingredients"
+          label="Zutaten"
+          :readonly="true"
+          hide-details
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<style scoped>
+
+</style>

frontend/app/pages/index.vue

@@ -9,6 +9,7 @@
       v-if="store.article != null"
   >
     <Article/>
+    <Variant/>
   </v-container>
 
   <v-container v-else>

frontend/app/store/labelEditorStore.ts

@@ -3,6 +3,7 @@ import type {Article} from "~/types/article";
 import {NotificationMessage} from "~/types/notificationMessage";
 import type {RuntimeConfig} from "nuxt/schema";
 import {Origin} from "~/types/origin";
+import type {Variant} from "~/types/variant";
 
 interface State {
   config: RuntimeConfig,
@@ -165,5 +166,25 @@ export const useLabelEditorStore = defineStore('label_editor_store', {
         this.addNotification(true, 'Es ist kein Artikel ausgewählt');
       }
     },
+
+    // Variant
+    async addVariant(articleID: number, variant: Variant) {
+      if(this.article != null) {
+        try {
+          let createdVariant = await $fetch<Variant>(this.config.public.url + '/article/' + articleID + '/variant', {
+            method: 'POST',
+            body: JSON.stringify(variant),
+          });
+
+          this.article.variants.push(createdVariant);
+
+          this.addNotification(false, 'Variante erstellt.');
+        } catch {
+          this.addNotification(true, 'Fehler beim erstellen der Variante.');
+        }
+      } else {
+        this.addNotification(true, 'Kann Variante nicht erstellen. Es ist kein Artikel ausgewählt.');
+      }
+    },
   },
 });

frontend/app/types/variant.ts

@@ -1,12 +1,12 @@
 export class Variant {
   readonly id: number;
   weight: string;
-  ean: string;
+  ean: string | null;
   name: string | null;
   description: string | null;
   ingredients: string | null;
 
-  constructor(id: number, weight: string, ean: string, name: string|null, description:string|null, ingredients: string|null) {
+  constructor(id: number, weight: string, ean: string|null, name: string|null, description:string|null, ingredients: string|null) {
     this.id = id;
     this.weight = weight;
     this.ean = ean;