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>
+            <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-sheet>
-              Herkunft:
-            </v-sheet>
+            <v-row no-gutters>
+              <v-col cols="5">
+                <v-sheet>
+                  Herkunft:
+                </v-sheet>
+              </v-col>
+              <v-col>
+                <v-sheet>
+                  {{ originToString(store.article.origin) }}
+                </v-sheet>
+              </v-col>
+            </v-row>
           </v-col>
-          <v-col>
-            <v-sheet>
-              {{ store.article.origin }}
-            </v-sheet>
-          </v-col>
-        </v-row>
 
-        <v-row no-gutters>
-          <v-col cols="2">
-            <v-sheet>
-              Varianten:
-            </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>
-            <v-sheet>
-              {{ store.article.variants.length }}
-            </v-sheet>
+
+          <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>