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>