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>