106 lines
4.4 KiB
Vue
106 lines
4.4 KiB
Vue
|
<template>
|
||
|
|
<MainTemplate>
|
||
|
|
<template #topBar>
|
||
|
|
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||
|
|
<h1 class="font-bold text-xl h-8">Liste Drucken</h1>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #diffMain>
|
||
|
|
<div class="flex flex-col w-full h-full gap-2 px-7 overflow-hidden">
|
||
|
|
<form
|
||
|
|
ref="form"
|
||
|
|
class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
|
||
|
|
@submit.prevent=""
|
||
|
|
>
|
||
|
|
<div class="flex flex-row gap-2 items-center">
|
||
|
|
<p class="min-w-16">Query:</p>
|
||
|
|
<select ref="query" id="query" value="member">
|
||
|
|
<option value="member">(system) alle Mitglieder</option>
|
||
|
|
<option value="memberByRunningMembership">(system) alle Mitglieder mit laufender Mitgliedschaft</option>
|
||
|
|
<option v-for="query in queries" :key="query.id" :value="query.id">
|
||
|
|
{{ query.title }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<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="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" 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="def">
|
||
|
|
<option value="def">Standard-Vorlage verwenden</option>
|
||
|
|
<option value="listprint.member">Mitgliederliste</option>
|
||
|
|
<option v-for="template in templates" :key="template.id" :value="template.id">
|
||
|
|
{{ template.template }}
|
||
|
|
</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
<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="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" class="!w-24" placeholder="15" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="flex flex-row gap-4">
|
||
|
|
<button type="submit" primary class="!w-fit">Liste drucken</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</MainTemplate>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineComponent } from "vue";
|
||
|
|
import { mapActions, mapState } from "pinia";
|
||
|
|
import MainTemplate from "@/templates/Main.vue";
|
||
|
|
import { useQueryStoreStore } from "@/stores/admin/configuration/queryStore";
|
||
|
|
import { useTemplateStore } from "@/stores/admin/configuration/template";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
computed: {
|
||
|
|
...mapState(useQueryStoreStore, ["queries"]),
|
||
|
|
...mapState(useTemplateStore, ["templates"]),
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.fetchQueries();
|
||
|
|
this.fetchTemplates();
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
...mapActions(useQueryStoreStore, ["fetchQueries"]),
|
||
|
|
...mapActions(useTemplateStore, ["fetchTemplates"]),
|
||
|
|
sendPrintJob(e: any) {
|
||
|
|
const fromData = e.target.elements;
|
||
|
|
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.headerHeight.value === "" ? null : parseInt(fromData.headerHeight.value);
|
||
|
|
const footerHeight = fromData.footerHeight.value === "" ? null : parseInt(fromData.footerHeight.value);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|