src/components/admin/settings/templateUsage/TemplateUsageListItem.vue

@@ -18,13 +18,19 @@
       </div>
     </div>
     <div class="flex flex-col p-2 gap-2">
-      <div class="flex flex-row gap-2 items-center">
+      <div class="flex flex-col md:flex-row gap-2 md:items-center">
+        <div class="flex flex-row w-full gap-2 items-center">
           <p class="min-w-16">Kopfzeile:</p>
           <select ref="header" id="header" :value="templateUsage.header?.id ?? 'def'">
             <option value="def">Standard-Vorlage verwenden</option>
             <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
           </select>
         </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="whitespace-nowrap">Höhe [mm]:</p>
+          <input id="headerHeight" type="number" :min="15" v-model="templateUsage.headerHeight" class="!w-24" placeholder="15">
+        </div>        
+      </div>
       <div class="flex flex-row gap-2 items-center">
         <p class="min-w-16">Hauptteil:</p>
         <select ref="body" id="body" :value="templateUsage.body?.id ?? 'def'">
@@ -32,13 +38,19 @@
           <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
         </select>
       </div>
-      <div class="flex flex-row gap-2 items-center">
+      <div class="flex flex-col md:flex-row gap-2 md:items-center">
+        <div class="flex flex-row w-full gap-2 items-center">
           <p class="min-w-16">Fußzeile:</p>
           <select ref="footer" id="footer" :value="templateUsage.footer?.id ?? 'def'">
             <option value="def">Standard-Vorlage verwenden</option>
             <option v-for="template in templates" :key="template.id" :value="template.id">{{ template.template }}</option>
           </select>
         </div>
+        <div class="flex flex-row gap-2 items-center">
+          <p class="whitespace-nowrap">Höhe [mm]:</p>
+          <input id="footerHeight" type="number" :min="15" v-model="templateUsage.footerHeight" class="!w-24" placeholder="15">
+        </div>
+      </div>
     </div>
   </form>
 </template>
@@ -91,6 +103,8 @@ export default defineComponent({
       const headerId = fromData.header.value === "def" ? null : fromData.header.value;
       const bodyId = fromData.body.value === "def" ? null : fromData.body.value;
       const footerId = fromData.footer.value === "def" ? null : fromData.footer.value;
+      const headerHeight = fromData.footer.value === "" ? null : parseInt(fromData.headerHeight.value);
+      const footerHeight = fromData.footer.value === "" ? null : parseInt(fromData.footerHeight.value);
 
       this.status = "loading"
       this.updateTemplateUsage({
@@ -98,6 +112,8 @@ export default defineComponent({
         headerId: headerId,
         bodyId: bodyId,
         footerId: footerId,
+        headerHeight:headerHeight,
+        footerHeight: footerHeight
       })
         .then(() => {
           this.status = { status: "success" };

src/stores/admin/templateUsage.ts

@@ -35,6 +35,8 @@ export const useTemplateUsageStore = defineStore("templateUsage", {
         headerId: templateUsage.headerId,
         bodyId: templateUsage.bodyId,
         footerId: templateUsage.footerId,
+        headerHeight: templateUsage.headerHeight,
+        footerHeight: templateUsage.footerHeight,
       });
       this.fetchTemplateUsages();
       return result;

src/viewmodels/admin/templateUsage.models.ts

@@ -5,6 +5,8 @@ export interface TemplateUsageViewModel {
   header: { id: number; template: string } | null;
   body: { id: number; template: string } | null;
   footer: { id: number; template: string } | null;
+  headerHeight: number | null;
+  footerHeight: number | null;
 }
 
 export interface UpdateTemplateUsageViewModel {
@@ -12,4 +14,6 @@ export interface UpdateTemplateUsageViewModel {
   headerId: number | null;
   bodyId: number | null;
   footerId: number | null;
+  headerHeight: number | null;
+  footerHeight: number | null;
 }