From 1b135b33aa7ace1c4b4e7af3d2ce89ee26f98607 Mon Sep 17 00:00:00 2001
From: Matthias Lodner <matthias@lodner.de>
Date: Fri, 23 Jan 2026 03:15:45 +0100
Subject: [PATCH] Variant ui layout changes.

---
 frontend/app/components/article/article.vue   |   1 -
 frontend/app/components/variant/variant.vue   |   6 +-
 .../app/components/variant/variantRow.vue     | 169 ++++++++++++++----
 3 files changed, 134 insertions(+), 42 deletions(-)

diff --git a/frontend/app/components/article/article.vue b/frontend/app/components/article/article.vue
index a9838c8..60b440e 100644
--- a/frontend/app/components/article/article.vue
+++ b/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;">
diff --git a/frontend/app/components/variant/variant.vue b/frontend/app/components/variant/variant.vue
index c28a8b0..5e9fca7 100644
--- a/frontend/app/components/variant/variant.vue
+++ b/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>
diff --git a/frontend/app/components/variant/variantRow.vue b/frontend/app/components/variant/variantRow.vue
index d089061..911495c 100644
--- a/frontend/app/components/variant/variantRow.vue
+++ b/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
-      align="start"
-  >
-    <v-col cols="2">
+  <v-card>
+    <v-card-title>
       <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>
+        {{ variant.name }}
 
-    <v-col cols="5">
-      <v-text-field
-          v-model="variant.description"
-          label="Bezeichnung"
-          :readonly="true"
-          hide-details
-      />
-    </v-col>
+        <v-spacer />
 
-    <v-col cols="5">
-      <v-text-field
-          v-model="variant.ingredients"
-          label="Zutaten"
-          :readonly="true"
-          hide-details
-      />
-    </v-col>
-  </v-row>
+        <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"
+      >
+        <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>