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,51 +1,148 @@
 <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-row
+  <v-card>
-      align="start"
+    <v-card-title>
-  >
-    <v-col cols="2">
       <v-row>
-        <v-text-field
+        {{ variant.name }}
-            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-spacer />
-      <v-text-field
-          v-model="variant.description"
-          label="Bezeichnung"
-          :readonly="true"
-          hide-details
-      />
-    </v-col>
 
-    <v-col cols="5">
+        <v-divider vertical/>
-      <v-text-field
+
-          v-model="variant.ingredients"
+        <v-btn
-          label="Zutaten"
+            :flat="true"
-          :readonly="true"
+            size="small"
-          hide-details
+            :disabled="!edit"
-      />
+        >
-    </v-col>
+          <v-icon>mdi-delete-empty</v-icon>
-  </v-row>
+          <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"
+      >
+        <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-textarea
+              :model-value="variant.description"
+              :tile=true
+              label="Beschreibung"
+              counter
+              :persistentCounter=true
+              rows="6"
+              no-resize
+              :readonly="true"
+          >
+            <template v-slot:counter="{ counter }">
+              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+            </template>
+          </v-textarea>
+        </v-col>
+
+        <v-col cols="5">
+          <v-textarea
+              :model-value="variant.ingredients"
+              :tile=true
+              label="Zutaten"
+              counter
+              :persistentCounter=true
+              rows="6"
+              no-resize
+              :readonly="true"
+          >
+            <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>