Variant ui layout changes.

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>