Show article information.

frontend/app/components/article/article.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
   import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import {originToString} from "~/types/origin";
 
   let store = useLabelEditorStore();
+
+  //const rules = [(v: string | any[]) => v.length <= 256 || 'Maximal 256 Zeichen.'];
 </script>
 
 <template>
@@ -14,40 +17,57 @@
       <v-card-text>
         <v-row no-gutters>
           <v-col cols="2">
-            <v-sheet>
-              BIO:
-            </v-sheet>
-          </v-col>
-          <v-col>
-            <v-sheet>
-              {{ store.article.bio }}
-            </v-sheet>
-          </v-col>
+            <v-row no-gutters>
+              <v-checkbox
+                  v-model="store.article.bio"
+                  label="BIO"
+                  :readonly=true
+              />
             </v-row>
 
             <v-row no-gutters>
-          <v-col cols="2">
+              <v-col cols="5">
                 <v-sheet>
                   Herkunft:
                 </v-sheet>
               </v-col>
               <v-col>
                 <v-sheet>
-              {{ store.article.origin }}
+                  {{ originToString(store.article.origin) }}
                 </v-sheet>
               </v-col>
             </v-row>
-
-        <v-row no-gutters>
-          <v-col cols="2">
-            <v-sheet>
-              Varianten:
-            </v-sheet>
           </v-col>
-          <v-col>
-            <v-sheet>
-              {{ store.article.variants.length }}
-            </v-sheet>
+
+          <v-col cols="5" style="padding: 5px;">
+            <v-textarea
+                :model-value="store.article.description"
+                :tile=true
+                label="Beschreibung"
+                counter
+                :persistentCounter=true
+                rows="6"
+            >
+              <template v-slot:counter="{ counter }">
+                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+              </template>
+            </v-textarea>
+
+          </v-col>
+
+          <v-col cols="5" style="padding: 5px;">
+            <v-textarea
+                :model-value="store.article.ingredients"
+                :tile=true
+                label="Zutaten"
+                counter
+                :persistentCounter=true
+                rows="6"
+            >
+              <template v-slot:counter="{ counter }">
+                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+              </template>
+            </v-textarea>
           </v-col>
         </v-row>
       </v-card-text>

frontend/app/components/article/articleCreate.vue

@@ -15,12 +15,6 @@
   let description: Ref<string | null> = ref<string | null>(null);
   let ingredients: Ref<string | null> = ref<string | null>(null);
 
-  let origins: Origin[] = [
-      Origin.EU,
-      Origin.NonEU,
-      Origin.EUnonEU
-  ];
-
   async function create() {
     if (name.value != null && name.value.trim().length > 0 &&
       origin.value != null && origin.value.trim().length > 0
@@ -91,6 +85,7 @@
         <v-text-field
             v-model.trim="name"
             label="Bezeichnung"
+            autofocus
         />
 
         <v-row>
@@ -103,7 +98,7 @@
           <v-col>
             <v-select
                 v-model="origin"
-                :items="origins"
+                :items="store.origins"
                 label="Herkunft"
             ></v-select>
           </v-col>

frontend/app/store/labelEditorStore.ts

@@ -2,28 +2,45 @@ import {defineStore} from "pinia";
 import type {Article} from "~/types/article";
 import {NotificationMessage} from "~/types/notificationMessage";
 import type {RuntimeConfig} from "nuxt/schema";
+import {Origin} from "~/types/origin";
 
 interface State {
   config: RuntimeConfig,
 
+  // UI
+  descriptionMaxChars: number,
+  ingredientsMaxChars: number,
+
   // Notification
   notifications: NotificationMessage[],
   notificationQueue: NotificationMessage[],
 
   // Article
   article: Article | null,
+
+  origins: Array<Origin>,
 }
 
 export const useLabelEditorStore = defineStore('label_editor_store', {
   state: (): State => ({
     config: useRuntimeConfig(),
 
+    // UI
+    descriptionMaxChars: 256,
+    ingredientsMaxChars: 256,
+
     // Notification
     notifications: [],
     notificationQueue: [],
 
     // Article
     article: null,
+
+    origins: [
+        Origin.EU,
+        Origin.NonEU,
+        Origin.EUnonEU
+    ]
   }),
   actions: {
     // Notification

frontend/app/types/origin.ts

@@ -3,3 +3,14 @@ export enum Origin {
     NonEU = "NonEU",
     EUnonEU= "EUnonEU",
 }
+
+export function originToString(origin: Origin): string {
+    switch (origin) {
+        case Origin.EU:
+            return "EU";
+        case Origin.NonEU:
+            return "Nicht EU";
+        case Origin.EUnonEU:
+            return "EU / Nicht EU";
+    }
+}