Added topm id and row number and ui changes.

frontend/app/components/variant/variantCreate.vue

@@ -18,6 +18,7 @@
   let ingredients: Ref<string | null> = ref<string | null>(null);
   let label: Ref<Label | null> = ref<Label | null>(null);
   let variant_description: Ref<string | null> = ref<string | null>(null);
+  let topm_row: Ref<string | null> = ref<string | null>(null);
 
   if (store.article != null) {
     unit.value = store.article.default_unit;
@@ -30,7 +31,9 @@
     ) {
       loading.value = true;
 
-      const variant: Variant = new Variant(0, weight.value, ean.value, name.value, description.value, ingredients.value, unit.value, label.value, variant_description.value);
+      const variant: Variant = new Variant(0, weight.value, ean.value, name.value,
+          description.value, ingredients.value, unit.value, label.value,
+          variant_description.value, topm_row.value);
 
       await store.addVariant(variant);
 
@@ -44,11 +47,17 @@
   }
 
   function clearVariables() {
-    weight.value = null;
-    ean.value = null;
-    name.value = null;
-    description.value = null;
-    ingredients.value = null;
+    if (store.article != null) {
+      weight.value = null;
+      ean.value = null;
+      name.value = null;
+      unit.value = store.article.default_unit;
+      description.value = null;
+      ingredients.value = null;
+      label.value = null;
+      variant_description.value = null;
+      topm_row.value = null;
+    }
 
     loading.value = false;
   }
@@ -59,7 +68,7 @@
       v-model="dialog"
       :scrollable="true"
       width="800"
-      max-height="750"
+      max-height="850"
   >
     <template v-slot:activator="{ props }">
       <v-btn
@@ -91,15 +100,29 @@
       <v-divider/>
 
       <v-card-text>
-        <v-text-field
-            v-model.trim="variant_description"
-            label="Varianten Bezeichnung"
-            autofocus
-        />
+        <v-row>
+          <v-col cols="8">
+            <v-text-field
+                v-model.trim="variant_description"
+                label="Varianten Bezeichnung"
+                autofocus
+            />
+          </v-col>
+          <v-col>
+            <v-text-field
+                v-model.trim="topm_row"
+                label="TopM Zeile"
+                :clearable="true"
+            />
+          </v-col>
+        </v-row>
 
         <v-text-field
             v-model.trim="name"
             label="Produkt Bezeichnung"
+            :clearable="true"
+            :placeholder="(store.article != null)? ((store.article.name != null)? store.article.name : undefined) : undefined"
+            persistent-placeholder
         />
 
         <v-row>
@@ -131,16 +154,23 @@
         <v-text-field
             v-model.trim="ean"
             label="EAN-Code"
+            :clearable="true"
         />
 
         <v-textarea
             v-model.trim="description"
             label="Beschreibung"
+            :clearable="true"
+            :placeholder="(store.article != null)? ((store.article.description != null)? store.article.description : undefined) : undefined"
+            persistent-placeholder
         />
 
         <v-textarea
             v-model.trim="ingredients"
             label="Zutaten"
+            :clearable="true"
+            :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
+            persistent-placeholder
         />
       </v-card-text>
 

frontend/app/components/variant/variantRow.vue

@@ -22,6 +22,7 @@
   let ingredients: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.ingredients)));
   let label: Ref<Label | null> = ref<Label | null>(JSON.parse(JSON.stringify(props.variant.label)));
   let variant_description: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.variant_description)));
+  let topm_row: Ref<string | null> = ref<string | null>(JSON.parse(JSON.stringify(props.variant.topm_row)));
 
   function toggleEdit() {
     if (edit.value) {
@@ -43,13 +44,14 @@
     unit.value = JSON.parse(JSON.stringify(props.variant.unit));
     description.value = JSON.parse(JSON.stringify(props.variant.description));
     ingredients.value = JSON.parse(JSON.stringify(props.variant.ingredients));
+    topm_row.value = JSON.parse(JSON.stringify(props.variant.topm_row));
   }
 
   async function updateVariant() {
     if (weight.value != null && unit.value != null) {
       let updateVariant: Variant = new Variant(props.variant.id, weight.value,
           ean.value, name.value, description.value, ingredients.value,
-          unit.value, label.value, variant_description.value);
+          unit.value, label.value, variant_description.value, topm_row.value);
 
       await store.updateVariant(updateVariant);
 
@@ -135,11 +137,17 @@
     <v-divider/>
 
     <v-card-text>
-      <v-row
-          align="start"
-      >
-        <v-col cols="2">
-          <v-row>
+      <v-row no-gutters>
+        <v-col cols="2" style="padding: 5px;">
+          <v-row no-gutters>
+            <v-text-field
+                v-model.trim="topm_row"
+                label="TopM Zeile"
+                :readonly="!edit"
+                :clearable="edit"
+            />
+          </v-row>
+          <v-row no-gutters>
             <v-select
                 v-model="label"
                 :items="store.labels"
@@ -149,17 +157,16 @@
                 item-title="name"
                 :clearable="edit"
                 no-data-text="Keine Etiketten Typen angelegt"
-
             />
           </v-row>
-          <v-row>
+          <v-row no-gutters>
             <v-text-field
                 v-model.trim="weight"
                 label="Gewicht"
                 :readonly="!edit"
             />
           </v-row>
-          <v-row>
+          <v-row no-gutters>
             <v-select
                 v-model="unit"
                 :items="store.units"
@@ -169,54 +176,66 @@
           </v-row>
         </v-col>
 
-        <v-col cols="5">
-          <v-text-field
-              v-model.trim="name"
-              :readonly="!edit"
-              label="Produkt Bezeichnung"
-          />
+        <v-col cols="5" style="padding: 5px;">
+          <v-row no-gutters>
+            <v-text-field
+                v-model.trim="name"
+                :readonly="!edit"
+                label="Produkt Bezeichnung"
+                :clearable="edit"
+            />
+          </v-row>
 
-          <v-textarea
-              v-model.trim="description"
-              :tile=true
-              label="Beschreibung"
-              counter
-              :persistentCounter=true
-              rows="6"
-              no-resize
-              :readonly="!edit"
-              :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
-              persistent-placeholder
-          >
-            <template v-slot:counter="{ counter }">
-              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
-            </template>
-          </v-textarea>
+          <v-row no-gutters>
+            <v-textarea
+                v-model.trim="description"
+                :tile=true
+                label="Beschreibung"
+                counter
+                :persistentCounter=true
+                rows="6"
+                no-resize
+                :readonly="!edit"
+                :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.description : undefined) : undefined"
+                persistent-placeholder
+                :clearable="edit"
+            >
+              <template v-slot:counter="{ counter }">
+                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+              </template>
+            </v-textarea>
+          </v-row>
         </v-col>
 
-        <v-col cols="5">
-          <v-text-field
-              v-model.trim="ean"
-              label="EAN"
-              :readonly="!edit"
-          />
+        <v-col cols="5" style="padding: 5px;">
+          <v-row no-gutters>
+            <v-text-field
+                v-model.trim="ean"
+                label="EAN"
+                :readonly="!edit"
+                :clearable="edit"
+            />
+          </v-row>
 
-          <v-textarea
-              v-model.trim="ingredients"
-              :tile=true
-              label="Zutaten"
-              counter
-              :persistentCounter=true
-              rows="6"
-              no-resize
-              :readonly="!edit"
-              :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
-              persistent-placeholder
-          >
-            <template v-slot:counter="{ counter }">
-              <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
-            </template>
-          </v-textarea>
+          <v-row no-gutters>
+            <v-textarea
+                v-model.trim="ingredients"
+                :tile=true
+                label="Zutaten"
+                counter
+                :persistentCounter=true
+                rows="6"
+                no-resize
+                :readonly="!edit"
+                :placeholder="(store.article != null)? ((store.article.ingredients != null)? store.article.ingredients : undefined) : undefined"
+                persistent-placeholder
+                :clearable="edit"
+            >
+              <template v-slot:counter="{ counter }">
+                <span>{{ counter }} von {{ store.ingredientsMaxChars  }} Zeichen.</span>
+              </template>
+            </v-textarea>
+          </v-row>
         </v-col>
       </v-row>
     </v-card-text>