Ehrenamt/ff-admin
2
0
Fork 0
Code Issues 13 Pull requests Projects Releases 30 Packages Wiki Activity Actions

change: standardisation of UI

Browse source
This commit is contained in:
Julian Krauser 2025-05-16 13:32:40 +02:00
parent 4ee16c624a
commit 04c01b6780
54 changed files with 199 additions and 462 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/views/admin/club/listprint/ListPrint.vue
View file

@ -1,84 +1,77 @@
<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-y-auto">
<form
class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
@submit.prevent="sendPrintJob"
>
<div class="flex flex-row gap-2 items-center">
<p class="min-w-16">Titel:</p>
<input id="title" type="text" required />
</div>
<div class="flex flex-row gap-2 items-center">
<p class="min-w-16">Query:</p>
<select 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 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 id="body" value="def">
<MainTemplate title="Liste Drucken">
<template #main>
<form
class="flex flex-col h-fit w-full border border-primary rounded-md p-2 gap-2"
@submit.prevent="sendPrintJob"
>
<div class="flex flex-row gap-2 items-center">
<p class="min-w-16">Titel:</p>
<input id="title" type="text" required />
</div>
<div class="flex flex-row gap-2 items-center">
<p class="min-w-16">Query:</p>
<select 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 id="header" value="def">
<option value="def">Standard-Vorlage verwenden</option>
<option value="listprint.member">(system) 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 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 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 class="flex flex-row gap-2">
<button type="submit" primary class="w-fit!">Liste drucken</button>
<button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
</div>
<div class="flex flex-row gap-2 items-center">
<p class="min-w-16">Hauptteil:</p>
<select id="body" value="def">
<option value="def">Standard-Vorlage verwenden</option>
<option value="listprint.member">(system) 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 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>
</form>
<div class="w-full grow min-h-[50%] flex flex-col gap-2">
<Spinner v-if="status == 'loading'" />
<div class="grow">
<iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
<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-2">
<button type="submit" primary class="w-fit!">Liste drucken</button>
<button type="reset" primary-outline class="w-fit!">zurücksetzen</button>
</div>
</form>
<div class="w-full grow min-h-[50%] flex flex-col gap-2">
<Spinner v-if="status == 'loading'" />
<div class="grow">
<iframe v-show="status == 'success'" ref="viewer" class="w-full h-full" />
</div>
<div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
<a ref="download" button primary class="w-fit!">download</a>
</div>
<div v-show="status == 'success'" class="flex flex-row gap-2 justify-end">
<a ref="download" button primary class="w-fit!">download</a>
</div>
</div>
</template>