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

14
src/views/admin/club/calendar/Calendar.vue
View file

@ -1,15 +1,9 @@
<template>
<MainTemplate>
<MainTemplate title="Kalender">
<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">Kalender</h1>
<div class="flex flex-row gap-2">
<PlusIcon
class="text-gray-500 h-5 w-5 cursor-pointer"
@click="select({ start: '', end: '', allDay: false })"
/>
<LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
</div>
<div class="flex flex-row gap-2">
<PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select({ start: '', end: '', allDay: false })" />
<LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
</div>
</template>
<template #diffMain>

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>

7
src/views/admin/club/members/Member.vue
View file

@ -1,10 +1,5 @@
<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">Mitglieder</h1>
</div>
</template>
<MainTemplate title="Mitglieder">
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination

11
src/views/admin/club/members/MemberRouting.vue
View file

@ -4,12 +4,11 @@
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8 min-h-fit grow">
{{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
{{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
</h1>
<h1 class="font-bold text-xl h-8 min-h-fit">
{{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
{{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
</h1>
<div class="flex flex-row gap-2">
<div title="Mitgliederliste drucken" @click="openPrintModal">
<DocumentTextIcon class="w-5 h-5 cursor-pointer" />
</div>

24
src/views/admin/club/members/Overview.vue
View file

@ -1,24 +0,0 @@
<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">Übersicht</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 justify-center items-center h-full"></div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
</script>
<script lang="ts">
export default defineComponent({
computed: {},
});
</script>

7
src/views/admin/club/newsletter/Newsletter.vue
View file

@ -1,10 +1,5 @@
<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">Newsletter</h1>
</div>
</template>
<MainTemplate title="Newsletter">
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination

21
src/views/admin/club/newsletter/NewsletterRouting.vue
View file

@ -1,20 +1,17 @@
<template>
<MainTemplate>
<MainTemplate :title="origin?.title">
<template #headerInsert>
<RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}</h1>
<NewsletterSyncing
:executeSyncAll="executeSyncAll"
@syncState="
(state) => {
syncState = state;
}
"
/>
</div>
<NewsletterSyncing
:executeSyncAll="executeSyncAll"
@syncState="
(state) => {
syncState = state;
}
"
/>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">

7
src/views/admin/club/protocol/Protocol.vue
View file

@ -1,10 +1,5 @@
<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">Protokolle</h1>
</div>
</template>
<MainTemplate title="Protokolle">
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
<Pagination

33
src/views/admin/club/protocol/ProtocolRouting.vue
View file

@ -1,20 +1,17 @@
<template>
<MainTemplate>
<MainTemplate :title="`${origin?.title}, ${origin?.date}`">
<template #headerInsert>
<RouterLink to="../" class="text-primary w-fit">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row gap-2 items-center justify-between pt-5 pb-3 px-7">
<h1 class="font-bold text-xl h-8 min-h-fit grow">{{ origin?.title }}, {{ origin?.date }}</h1>
<ProtocolSyncing
:executeSyncAll="executeSyncAll"
@syncState="
(state) => {
syncState = state;
}
"
/>
</div>
<ProtocolSyncing
:executeSyncAll="executeSyncAll"
@syncState="
(state) => {
syncState = state;
}
"
/>
</template>
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
@ -92,10 +89,10 @@ export default defineComponent({
},
mounted() {
this.fetchProtocolByActiveId();
this.fetchProtocolAgenda()
this.fetchProtocolDecision()
this.fetchProtocolPresence()
this.fetchProtocolVoting()
this.fetchProtocolAgenda();
this.fetchProtocolDecision();
this.fetchProtocolPresence();
this.fetchProtocolVoting();
},
// this.syncState is undefined, so it will never work
// beforeRouteLeave(to, from, next) {
@ -118,8 +115,8 @@ export default defineComponent({
...mapActions(useProtocolStore, ["fetchProtocolByActiveId"]),
...mapActions(useProtocolAgendaStore, ["fetchProtocolAgenda"]),
...mapActions(useProtocolDecisionStore, ["fetchProtocolDecision"]),
...mapActions(useProtocolPresenceStore,["fetchProtocolPresence"]),
...mapActions(useProtocolVotingStore,["fetchProtocolVoting"]),
...mapActions(useProtocolPresenceStore, ["fetchProtocolPresence"]),
...mapActions(useProtocolVotingStore, ["fetchProtocolVoting"]),
...mapActions(useModalStore, ["openModal"]),
openInfoModal() {
this.openModal(

93
src/views/admin/club/query/Builder.vue
View file

@ -1,57 +1,50 @@
<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">Query Builder</h1>
</div>
</template>
<template #diffMain>
<div class="flex flex-col w-full h-full gap-2 px-7 overflow-y-auto">
<BuilderHost
v-model="query"
allow-predefined-select
@query:run="sendQuery"
@query:save="triggerSave"
@results:clear="clearResults"
@results:export="exportData"
/>
<p>Ergebnisse:</p>
<div
v-if="loadingData == 'failed'"
class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
>
<p v-if="typeof queryError == 'string'">
{{ queryError }}
<MainTemplate title="Query Builder">
<template #main>
<BuilderHost
v-model="query"
allow-predefined-select
@query:run="sendQuery"
@query:save="triggerSave"
@results:clear="clearResults"
@results:export="exportData"
/>
<p>Ergebnisse:</p>
<div
v-if="loadingData == 'failed'"
class="flex flex-col p-2 border border-red-600 bg-red-200 rounded-md select-none"
>
<p v-if="typeof queryError == 'string'">
{{ queryError }}
</p>
<div v-else>
<p>
CODE: <br />
{{ queryError.code }}
</p>
<br />
<p>
MSG: <br />
{{ queryError.msg }}
</p>
<br />
<p>
RESULTING SQL: <br />
{{ queryError.sql }}
</p>
<div v-else>
<p>
CODE: <br />
{{ queryError.code }}
</p>
<br />
<p>
MSG: <br />
{{ queryError.msg }}
</p>
<br />
<p>
RESULTING SQL: <br />
{{ queryError.sql }}
</p>
</div>
</div>
<Pagination
v-else
:items="data"
:totalCount="totalLength"
:indicateLoading="loadingData == 'loading'"
@load-data="(offset, count) => sendQuery(offset, count)"
>
<template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
<p>{{ row }}</p>
</template>
</Pagination>
</div>
<Pagination
v-else
:items="data"
:totalCount="totalLength"
:indicateLoading="loadingData == 'loading'"
@load-data="(offset, count) => sendQuery(offset, count)"
>
<template #pageRow="{ row }: { row: { id: FieldType; [key: string]: FieldType } }">
<p>{{ row }}</p>
</template>
</Pagination>
</template>
</MainTemplate>
</template>