template header & footer margins

This commit is contained in:
Julian Krauser 2025-01-01 13:21:35 +01:00
parent 6154518cbd
commit bfa6eb2347
3 changed files with 34 additions and 12 deletions

View file

@ -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" };

View file

@ -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;

View file

@ -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;
}