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

Merge branch 'milestone/ff-admin-unit' into unit/#103-base-management

Browse source
This commit is contained in:
Julian Krauser 2025-06-08 08:02:38 +02:00
commit 50fa0128ea
53 changed files with 1757 additions and 950 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/views/Login.vue
View file

@ -65,6 +65,11 @@
</div>
<p v-if="loginError" class="text-center">{{ loginError }}</p>
</form>
<div class="flex flex-col gap-2 empty:hidden">
<RouterLink v-if="appShow_link_to_calendar" :to="{ name: 'public-calendar' }" button primary-outline>
zum Kalender
</RouterLink>
</div>
<FormBottomBar />
</div>
@ -95,7 +100,7 @@ export default defineComponent({
};
},
computed: {
...mapState(useConfigurationStore, ["clubName"]),
...mapState(useConfigurationStore, ["clubName", "appShow_link_to_calendar"]),
},
mounted() {
this.username = localStorage.getItem("username") ?? "";

6
src/views/admin/club/members/MemberEdit.vue
View file

@ -75,6 +75,10 @@
<label for="internalId">Interne ID (optional)</label>
<input type="text" id="internalId" v-model="member.internalId" />
</div>
<div>
<label for="note">Notiz (optional)</label>
<textarea type="text" id="note" v-model="member.note" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
@ -93,7 +97,6 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import Spinner from "@/components/Spinner.vue";
@ -163,6 +166,7 @@ export default defineComponent({
nameaffix: formData.nameaffix.value,
birthdate: formData.birthdate.value,
internalId: formData.internalId.value,
note: formData.note.value,
};
this.status = "loading";
this.updateActiveMember(updateMember)

51
src/views/admin/club/members/MemberEducations.vue Normal file
View file

@ -0,0 +1,51 @@
<template>
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
<div v-if="memberEducations != null" class="flex flex-col gap-2 w-full">
<MemberEducationListItem v-for="education in memberEducations" :key="education.id" :education="education" />
</div>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">&#8634; laden fehlgeschlagen</p>
</div>
<div class="flex flex-row gap-4">
<button v-if="can('create', 'club', 'member')" primary class="w-fit!" @click="openCreateModal">
Aus-/Fortbildung hinzufügen
</button>
</div>
</template>
<script setup lang="ts">
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapActions, mapState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { useMemberEducationStore } from "@/stores/admin/club/member/memberEducation";
import MemberEducationListItem from "@/components/admin/club/member/MemberEducationListItem.vue";
import { useModalStore } from "@/stores/modal";
import { useAbilityStore } from "@/stores/ability";
</script>
<script lang="ts">
export default defineComponent({
props: {
memberId: String,
},
computed: {
...mapState(useMemberEducationStore, ["memberEducations", "loading"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useMemberEducationStore, ["fetchMemberEducationsForMember"]),
...mapActions(useModalStore, ["openModal"]),
fetchItem() {
this.fetchMemberEducationsForMember();
},
openCreateModal() {
this.openModal(
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberEducationCreateModal.vue")))
);
},
},
});
</script>

22
src/views/admin/club/members/MemberOverview.vue
View file

@ -25,9 +25,19 @@
<label for="birthdate">Geburtsdatum</label>
<input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
</div>
<div v-if="membershipStatistics.length != 0">
<div>
<label for="note">Notiz</label>
<textarea type="text" id="note" v-model="activeMemberObj.note" readonly />
</div>
<div v-if="membershipStatistics.length != 0 || totalMembershipStatistics != undefined">
<p>Statistiken zur Mitgliedschaft</p>
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
<div class="flex flex-col h-fit w-full rounded-md overflow-hidden divide-y divide-white">
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
<p>
gesamt {{ totalMembershipStatistics?.durationInDays }} Tage
<span class="whitespace-nowrap"> ~> {{ totalMembershipStatistics?.exactDuration }}</span>
</p>
</div>
<div
v-for="stat in membershipStatistics"
class="bg-primary p-2 text-white flex flex-row justify-between items-center"
@ -149,16 +159,20 @@ export default defineComponent({
},
computed: {
...mapState(useMemberStore, ["activeMemberObj", "activeMemberStatistics", "loadingActive"]),
...mapState(useMembershipStore, ["membershipStatistics"]),
...mapState(useMembershipStore, ["membershipStatistics", "totalMembershipStatistics"]),
},
mounted() {
this.fetchMemberByActiveId();
this.fetchMemberStatisticsByActiveId();
this.fetchMembershipStatisticsForMember();
this.fetchMembershipTotalStatisticsForMember();
},
methods: {
...mapActions(useMemberStore, ["fetchMemberByActiveId", "fetchMemberStatisticsByActiveId"]),
...mapActions(useMembershipStore, ["fetchMembershipStatisticsForMember"]),
...mapActions(useMembershipStore, [
"fetchMembershipStatisticsForMember",
"fetchMembershipTotalStatisticsForMember",
]),
},
});
</script>

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

@ -21,7 +21,7 @@
<template #diffMain>
<div class="flex flex-col gap-2 grow px-7 overflow-hidden">
<div class="flex flex-col grow gap-2 overflow-hidden">
<div class="w-full flex flex-row max-lg:flex-wrap justify-center">
<div class="w-full flex flex-row max-lg:flex-wrap justify-center items-stretch">
<RouterLink
v-for="tab in tabs"
:key="tab.route"
@ -31,7 +31,7 @@
>
<p
:class="[
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
'flex w-full h-full items-center justify-center rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-hidden',
isActive ? 'bg-red-200 shadow-sm border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
]"
>
@ -68,8 +68,9 @@ export default defineComponent({
{ route: "admin-club-member-overview", title: "Übersicht" },
{ route: "admin-club-member-membership", title: "Mitgliedschaft" },
{ route: "admin-club-member-communication", title: "Kommunikation" },
{ route: "admin-club-member-awards", title: "Auszeichnungen" },
{ route: "admin-club-member-qualifications", title: "Qualifikationen" },
{ route: "admin-club-member-awards", title: "Auszeichnungen / Ehrungen" },
{ route: "admin-club-member-educations", title: "Aus- / Fortbildungen" },
{ route: "admin-club-member-qualifications", title: "Qualifikationen / Funktionen" },
{ route: "admin-club-member-positions", title: "Vereinsämter" },
],
};

14
src/views/admin/club/newsletter/NewsletterDates.vue
View file

@ -37,11 +37,15 @@
})
}}
</p>
<TrashIcon
<DoubleConfirmClick
v-if="can('create', 'club', 'newsletter')"
class="w-5 h-5 p-1 box-content cursor-pointer text-white"
@click.prevent="removeSelected(item.calendarId)"
/>
light
v-slot="{ isSensitive }"
@click:submit="removeSelected(item.calendarId)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
</summary>
<div class="flex flex-col gap-2 px-1">
<input
@ -111,8 +115,10 @@ import { useAbilityStore } from "@/stores/ability";
import { useCalendarStore } from "@/stores/admin/club/calendar";
import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models";
import { TrashIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import cloneDeep from "lodash.clonedeep";
import type { NewsletterDatesViewModel } from "@/viewmodels/admin/club/newsletter/newsletterDates.models";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">

24
src/views/admin/club/newsletter/NewsletterRecipients.vue
View file

@ -42,11 +42,15 @@
<p>Newsletter senden an Typ: {{ member.sendNewsletter?.type.type ?? "---" }}</p>
</div>
<TrashIcon
<DoubleConfirmClick
v-if="can('create', 'club', 'newsletter') && showMemberSelect"
class="w-5 h-5 p-1 box-content cursor-pointer"
@click="removeSelected(member.id)"
/>
light
v-slot="{ isSensitive }"
@click:submit="removeSelected(member.id)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
</div>
</div>
@ -61,17 +65,8 @@
import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import {
Combobox,
ComboboxLabel,
ComboboxInput,
ComboboxButton,
ComboboxOptions,
ComboboxOption,
TransitionRoot,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
import { ArchiveBoxIcon, ExclamationTriangleIcon, TrashIcon, UserPlusIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import { useMemberStore } from "@/stores/admin/club/member/member";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
@ -83,6 +78,7 @@ import cloneDeep from "lodash.clonedeep";
import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
import MemberSearchSelect from "@/components/search/MemberSearchSelect.vue";
import type { FieldType } from "@/types/dynamicQueries";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">

17
src/views/admin/club/protocol/ProtocolAgenda.vue
View file

@ -31,6 +31,16 @@
:disabled="!can('create', 'club', 'protocol')"
/>
<DoubleConfirmClick
v-if="can('create', 'club', 'protocol')"
light
v-slot="{ isSensitive }"
@click:submit="removeFromArray(item.id)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
<div class="flex flex-col">
<ChevronUpIcon
v-if="index != 0"
@ -73,7 +83,9 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolAgendaStore } from "@/stores/admin/club/protocol/protocolAgenda";
import { useAbilityStore } from "@/stores/ability";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">
@ -109,6 +121,9 @@ export default defineComponent({
});
}
},
removeFromArray(thisId: number) {
this.agenda = this.agenda.filter((item) => item.id !== thisId);
},
},
});
</script>

17
src/views/admin/club/protocol/ProtocolDecisions.vue
View file

@ -31,6 +31,16 @@
:disabled="!can('create', 'club', 'protocol')"
/>
<DoubleConfirmClick
v-if="can('create', 'club', 'protocol')"
light
v-slot="{ isSensitive }"
@click:submit="removeFromArray(item.id)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
<div class="flex flex-col">
<ChevronUpIcon
v-if="index != 0"
@ -73,7 +83,9 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolDecisionStore } from "@/stores/admin/club/protocol/protocolDecision";
import { useAbilityStore } from "@/stores/ability";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">
@ -109,6 +121,9 @@ export default defineComponent({
});
}
},
removeFromArray(thisId: number) {
this.decision = this.decision.filter((item) => item.id !== thisId);
},
},
});
</script>

14
src/views/admin/club/protocol/ProtocolPresence.vue
View file

@ -42,11 +42,15 @@
</label>
</div>
</div>
<TrashIcon
<DoubleConfirmClick
v-if="can('create', 'club', 'protocol')"
class="w-5 h-5 p-1 box-content cursor-pointer"
@click="removeSelected(member.memberId)"
/>
light
v-slot="{ isSensitive }"
@click:submit="removeSelected(member.memberId)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
</div>
</div>
</div>
@ -57,10 +61,12 @@ import { defineComponent } from "vue";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { TrashIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import { useProtocolPresenceStore } from "@/stores/admin/club/protocol/protocolPresence";
import { useAbilityStore } from "@/stores/ability";
import MemberSearchSelectMultiple from "@/components/search/MemberSearchSelectMultiple.vue";
import type { MemberViewModel } from "@/viewmodels/admin/club/member/member.models";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">

21
src/views/admin/club/protocol/ProtocolVoting.vue
View file

@ -31,6 +31,16 @@
:disabled="!can('create', 'club', 'protocol')"
/>
<DoubleConfirmClick
v-if="can('create', 'club', 'protocol')"
light
v-slot="{ isSensitive }"
@click:submit="removeFromArray(item.id)"
>
<TrashIcon v-if="!isSensitive" class="h-5 w-5" />
<TrashIconSolid v-else class="h-5 w-5" />
</DoubleConfirmClick>
<div class="flex flex-col">
<ChevronUpIcon
v-if="index != 0"
@ -83,14 +93,16 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { mapActions, mapState, mapWritableState } from "pinia";
import Spinner from "@/components/Spinner.vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { toolbarOptions } from "@/helpers/quillConfig";
import { useProtocolVotingStore } from "@/stores/admin/club/protocol/protocolVoting";
import { useAbilityStore } from "@/stores/ability";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/vue/24/outline";
import { ChevronDownIcon, ChevronUpIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { TrashIcon as TrashIconSolid } from "@heroicons/vue/24/solid";
import DoubleConfirmClick from "@/components/DoubleConfirmClick.vue";
</script>
<script lang="ts">
@ -99,7 +111,7 @@ export default defineComponent({
protocolId: String,
},
computed: {
...mapState(useProtocolVotingStore, ["voting", "loading"]),
...mapWritableState(useProtocolVotingStore, ["voting", "loading"]),
...mapState(useAbilityStore, ["can"]),
sortedVoting() {
return this.voting.slice().sort((a, b) => a.sort - b.sort);
@ -126,6 +138,9 @@ export default defineComponent({
});
}
},
removeFromArray(thisId: number) {
this.voting = this.voting.filter((item) => item.id !== thisId);
},
},
});
</script>

49
src/views/admin/configuration/education/Education.vue Normal file
View file

@ -0,0 +1,49 @@
<template>
<MainTemplate title="Aus-/Fortbildungen">
<template #diffMain>
<div class="flex flex-col gap-4 h-full pl-7">
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
<EducationListItem v-for="education in educations" :key="education.id" :education="education" />
</div>
<div class="flex flex-row gap-4">
<button v-if="can('create', 'configuration', 'education')" primary class="w-fit!" @click="openCreateModal">
Aus-/Fortbildung erstellen
</button>
</div>
</div>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useEducationStore } from "@/stores/admin/configuration/education";
import EducationListItem from "@/components/admin/configuration/education/EducationListItem.vue";
import { useModalStore } from "@/stores/modal";
import { useAbilityStore } from "@/stores/ability";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useEducationStore, ["educations"]),
...mapState(useAbilityStore, ["can"]),
},
mounted() {
this.fetchEducations();
},
methods: {
...mapActions(useEducationStore, ["fetchEducations"]),
...mapActions(useModalStore, ["openModal"]),
openCreateModal() {
this.openModal(
markRaw(
defineAsyncComponent(() => import("@/components/admin/configuration/education/CreateEducationModal.vue"))
)
);
},
},
});
</script>

120
src/views/admin/configuration/education/EducationEdit.vue Normal file
View file

@ -0,0 +1,120 @@
<template>
<MainTemplate :title="`Aus-/Fortbildung ${origin?.education} - Daten bearbeiten`">
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #main>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
<form
v-else-if="education != null"
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
@submit.prevent="triggerUpdate"
>
<div>
<label for="education">Bezeichnung</label>
<input type="text" id="education" required v-model="education.education" />
</div>
<div>
<label for="description">Beschreibung (optional)</label>
<input type="text" id="description" v-model="education.description" />
</div>
<div class="flex flex-row justify-end gap-2">
<button primary-outline type="reset" class="w-fit!" :disabled="canSaveOrReset" @click="resetForm">
verwerfen
</button>
<button primary type="submit" class="w-fit!" :disabled="status == 'loading' || canSaveOrReset">
speichern
</button>
<Spinner v-if="status == 'loading'" class="my-auto" />
<SuccessCheckmark v-else-if="status?.status == 'success'" />
<FailureXMark v-else-if="status?.status == 'failed'" />
</div>
</form>
</template>
</MainTemplate>
</template>
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useEducationStore } from "@/stores/admin/configuration/education";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { RouterLink } from "vue-router";
import type { UpdateEducationViewModel, EducationViewModel } from "@/viewmodels/admin/configuration/education.models";
import cloneDeep from "lodash.clonedeep";
import isEqual from "lodash.isequal";
</script>
<script lang="ts">
export default defineComponent({
props: {
id: String,
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | EducationViewModel,
education: null as null | EducationViewModel,
timeout: null as any,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.origin, this.education);
},
},
mounted() {
this.fetchItem();
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useEducationStore, ["fetchEducationById", "updateActiveEducation"]),
resetForm() {
this.education = cloneDeep(this.origin);
},
fetchItem() {
this.fetchEducationById(parseInt(this.id ?? ""))
.then((result) => {
this.education = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
triggerUpdate(e: any) {
if (this.education == null) return;
let formData = e.target.elements;
let updateEducation: UpdateEducationViewModel = {
id: this.education.id,
education: formData.education.value,
description: formData.description.value,
};
this.status = "loading";
this.updateActiveEducation(updateEducation)
.then(() => {
this.fetchItem();
this.status = { status: "success" };
})
.catch((err) => {
this.status = { status: "failed" };
})
.finally(() => {
this.timeout = setTimeout(() => {
this.status = null;
}, 2000);
});
},
},
});
</script>

14
src/views/admin/management/version/VersionDisplay.vue
View file

@ -4,7 +4,12 @@
<div class="h-full flex flex-col px-7 overflow-hidden">
<div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-t-md">
<div class="flex flex-row justify-between border-b-2 border-gray-300">
<h1 class="text-xl font-semibold">Client</h1>
<h1 class="text-xl font-semibold">
Client
<small v-if="newerClientVersions.length != 0">
({{ newerClientVersions.length }} neue Version{{ newerClientVersions.length != 1 ? "en" : "" }})
</small>
</h1>
<p>
V{{ clientVersion }} ({{
new Date(clientVersionRelease).toLocaleDateString("de", {
@ -38,7 +43,12 @@
</div>
<div class="h-1/2 flex flex-col gap-2 p-2 border border-gray-300 rounded-b-md">
<div class="flex flex-row justify-between border-b-2 border-gray-300">
<h1 class="text-xl font-semibold">Server</h1>
<h1 class="text-xl font-semibold">
Server
<small v-if="newerServerVersions.length != 0">
({{ newerServerVersions.length }} neue Version{{ newerServerVersions.length != 1 ? "en" : "" }})
</small>
</h1>
<p>
V{{ serverVersion }} ({{
new Date(serverVersionRelease).toLocaleDateString("de", {