Variant ui layout changes.

frontend/app/components/article/article.vue

@@ -53,7 +53,6 @@
                 <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
               </template>
             </v-textarea>
-
           </v-col>
 
           <v-col cols="5" style="padding: 5px;">

frontend/app/components/variant/variant.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import {useLabelEditorStore} from "~/store/labelEditorStore";
-  import {originToString} from "~/types/origin";
 
   let store = useLabelEditorStore();
 </script>
@@ -24,16 +23,13 @@
       <v-divider/>
 
       <v-card-text
-          v-for="(variant, index) in store.article.variants"
+          v-for="(variant) 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>

frontend/app/components/variant/variantRow.vue

@@ -1,13 +1,92 @@
 <script setup lang="ts">
   import type {Variant} from "~/types/variant";
+  import {useLabelEditorStore} from "~/store/labelEditorStore";
+  import type {Ref} from "vue";
+
+  let store = useLabelEditorStore();
 
   const props = defineProps({
     variant: {type: Object as PropType<Variant>, required: true},
-    variantIndex: {type: Number, required: true},
   });
+
+  let edit: Ref<boolean> = ref<boolean>(false);
+
 </script>
 
 <template>
+  <v-card>
+    <v-card-title>
+      <v-row>
+        {{ variant.name }}
+
+        <v-spacer />
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            size="small"
+            :disabled="!edit"
+        >
+          <v-icon>mdi-delete-empty</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Löschen
+          </v-tooltip>
+        </v-btn>
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            size="small"
+            :disabled="!edit"
+        >
+          <v-icon>mdi-cancel</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Abbrechen
+          </v-tooltip>
+        </v-btn>
+
+        <v-btn
+            :flat="true"
+            size="small"
+            :disabled="!edit"
+        >
+          <v-icon>mdi-content-save</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Speichern
+          </v-tooltip>
+        </v-btn>
+
+        <v-divider vertical/>
+
+        <v-btn
+            :flat="true"
+            size="small"
+        >
+          <v-icon>mdi-pencil</v-icon>
+          <v-tooltip
+              activator="parent"
+              location="bottom"
+          >
+            Bearbeiten
+          </v-tooltip>
+        </v-btn>
+      </v-row>
+    </v-card-title>
+
+    <v-divider/>
+
+    <v-card-text>
       <v-row
           align="start"
       >
@@ -29,23 +108,41 @@
         </v-col>
 
         <v-col cols="5">
-      <v-text-field
+          <v-textarea
-          v-model="variant.description"
+              :model-value="variant.description"
-          label="Bezeichnung"
+              :tile=true
+              label="Beschreibung"
+              counter
+              :persistentCounter=true
+              rows="6"
+              no-resize
               :readonly="true"
-          hide-details
+          >
-      />
+            <template v-slot:counter="{ counter }">
+              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+            </template>
+          </v-textarea>
         </v-col>
 
         <v-col cols="5">
-      <v-text-field
+          <v-textarea
-          v-model="variant.ingredients"
+              :model-value="variant.ingredients"
+              :tile=true
               label="Zutaten"
+              counter
+              :persistentCounter=true
+              rows="6"
+              no-resize
               :readonly="true"
-          hide-details
+          >
-      />
+            <template v-slot:counter="{ counter }">
+              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+            </template>
+          </v-textarea>
         </v-col>
       </v-row>
+    </v-card-text>
+  </v-card>
 </template>
 
 <style scoped>