cleanup
This commit is contained in:
parent
03710dfdae
commit
9a1ff79f66
43 changed files with 264 additions and 92 deletions
|
|
@ -23,7 +23,8 @@ import deLocale from "@fullcalendar/core/locales/de";
|
|||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import { useCalendarStore } from "../../../../stores/admin/calendar";
|
||||
import { useCalendarStore } from "@/stores/admin/calendar";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -33,6 +34,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapState(useCalendarStore, ["formattedItems"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
calendarOptions() {
|
||||
return {
|
||||
timeZone: "local",
|
||||
|
|
@ -68,7 +70,7 @@ export default defineComponent({
|
|||
...mapActions(useModalStore, ["openModal"]),
|
||||
...mapActions(useCalendarStore, ["fetchCalendars"]),
|
||||
select(e: any) {
|
||||
console.log(e);
|
||||
if (!this.can("create", "club", "calendar")) return;
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
|
||||
{
|
||||
|
|
@ -79,6 +81,7 @@ export default defineComponent({
|
|||
);
|
||||
},
|
||||
eventClick(e: any) {
|
||||
if (!this.can("update", "club", "calendar")) return;
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/UpdateCalendarModal.vue"))),
|
||||
e.event.id
|
||||
|
|
|
|||
132
src/views/admin/club/members/Member.vue
Normal file
132
src/views/admin/club/members/Member.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<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>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col w-full h-full gap-2 justify-center px-7">
|
||||
<Pagination
|
||||
:items="members"
|
||||
:totalCount="totalCount"
|
||||
:indicateLoading="loading == 'loading'"
|
||||
@load-data="(offset, count, search) => fetchMembers(offset, count)"
|
||||
@search="(search) => fetchMembers(0, 25, true)"
|
||||
>
|
||||
<template #pageRow="{ row }: { row: MemberViewModel }">
|
||||
<MemberListItem :member="row" />
|
||||
</template>
|
||||
</Pagination>
|
||||
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Mitglied erstellen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
|
||||
import { useMemberStore } from "@/stores/admin/member";
|
||||
import MemberListItem from "@/components/admin/club/member/MemberListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
currentPage: 0,
|
||||
maxEntriesPerPage: 25,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberStore, ["members", "totalCount", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
entryCount() {
|
||||
return this.totalCount ?? this.members.length;
|
||||
},
|
||||
showingStart() {
|
||||
return this.currentPage * this.maxEntriesPerPage;
|
||||
},
|
||||
showingEnd() {
|
||||
let max = this.currentPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
|
||||
if (max > this.entryCount) max = this.entryCount;
|
||||
return max;
|
||||
},
|
||||
showingText() {
|
||||
return `${this.entryCount != 0 ? this.showingStart + 1 : 0} - ${this.showingEnd}`;
|
||||
},
|
||||
countOfPages() {
|
||||
return Math.ceil(this.entryCount / this.maxEntriesPerPage);
|
||||
},
|
||||
displayedPagesNumbers(): Array<number | "."> {
|
||||
//indicate if "." or page number gets pushed
|
||||
let stateOfPush = false;
|
||||
|
||||
return [...new Array(this.countOfPages)].reduce((acc, curr, index) => {
|
||||
if (
|
||||
// always display first 2 pages
|
||||
index <= 1 ||
|
||||
// always display last 2 pages
|
||||
index >= this.countOfPages - 2 ||
|
||||
// always display 1 pages around current page
|
||||
(this.currentPage - 1 <= index && index <= this.currentPage + 1)
|
||||
) {
|
||||
acc.push(index);
|
||||
stateOfPush = false;
|
||||
return acc;
|
||||
}
|
||||
// abort if placeholder already added to array
|
||||
if (stateOfPush == true) return acc;
|
||||
// show placeholder if pagenumber is not actively rendered
|
||||
acc.push(".");
|
||||
stateOfPush = true;
|
||||
|
||||
return acc;
|
||||
}, []);
|
||||
},
|
||||
visibleRows() {
|
||||
return this.filterData(this.members, this.showingStart, this.showingEnd);
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMembers(0, this.maxEntriesPerPage, true);
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMembers"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
loadPage(newPage: number | ".") {
|
||||
if (newPage == ".") return;
|
||||
if (newPage < 0 || newPage >= this.countOfPages) return;
|
||||
|
||||
let pageStart = newPage * this.maxEntriesPerPage;
|
||||
let pageEnd = newPage * this.maxEntriesPerPage + this.maxEntriesPerPage;
|
||||
if (pageEnd > this.entryCount) pageEnd = this.entryCount;
|
||||
|
||||
let loadedElementCount = this.filterData(this.members, pageStart, pageEnd).length;
|
||||
if (loadedElementCount < this.maxEntriesPerPage) this.fetchMembers(pageStart, this.maxEntriesPerPage);
|
||||
|
||||
this.currentPage = newPage;
|
||||
},
|
||||
filterData(array: Array<any>, start: number, end: number): Array<any> {
|
||||
return array.filter((elem, index) => (elem?.tab_pos ?? index) >= start && (elem?.tab_pos ?? index) < end);
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/CreateMemberModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
51
src/views/admin/club/members/MemberAwards.vue
Normal file
51
src/views/admin/club/members/MemberAwards.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="memberAwards != null" class="flex flex-col gap-2 w-full">
|
||||
<MemberAwardListItem v-for="award in memberAwards" :key="award.id" :award="award" />
|
||||
</div>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Auszeichnung 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 { useMemberAwardStore } from "@/stores/admin/memberAward";
|
||||
import MemberAwardListItem from "@/components/admin/club/member/MemberAwardListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberAwardStore, ["memberAwards", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberAwardStore, ["fetchMemberAwardsForMember"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
fetchItem() {
|
||||
this.fetchMemberAwardsForMember();
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberAwardCreateModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
58
src/views/admin/club/members/MemberCommunication.vue
Normal file
58
src/views/admin/club/members/MemberCommunication.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="communications != null" class="flex flex-col gap-2 w-full">
|
||||
<MemberCommunicationListItem
|
||||
v-for="communication in communications"
|
||||
:key="communication.id"
|
||||
:communication="communication"
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Kommunikation hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useMemberStore } from "@/stores/admin/member";
|
||||
import type { MemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import type { CommunicationViewModel } from "@/viewmodels/admin/communication.models";
|
||||
import { useCommunicationStore } from "@/stores/admin/communication";
|
||||
import MemberCommunicationListItem from "@/components/admin/club/member/MemberCommunicationListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useCommunicationStore, ["communications", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useCommunicationStore, ["fetchCommunicationsForMember"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
fetchItem() {
|
||||
this.fetchCommunicationsForMember();
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberCommunicationCreateModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
176
src/views/admin/club/members/MemberEdit.vue
Normal file
176
src/views/admin/club/members/MemberEdit.vue
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
|
||||
<form
|
||||
v-else-if="member != null"
|
||||
class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto"
|
||||
@submit.prevent="triggerUpdate"
|
||||
>
|
||||
<p class="mx-auto">Mitglied bearbeiten</p>
|
||||
<div>
|
||||
<Listbox v-model="member.salutation" name="salutation">
|
||||
<ListboxLabel>Anrede</ListboxLabel>
|
||||
<div class="relative mt-1">
|
||||
<ListboxButton
|
||||
class="rounded-md shadow-sm relative block w-full px-3 py-2 border border-gray-300 focus:border-primary placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-0 focus:z-10 sm:text-sm resize-none"
|
||||
>
|
||||
<span class="block truncate w-full text-start"> {{ member.salutation }}</span>
|
||||
<span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
|
||||
</span>
|
||||
</ListboxButton>
|
||||
|
||||
<transition
|
||||
leave-active-class="transition duration-100 ease-in"
|
||||
leave-from-class="opacity-100"
|
||||
leave-to-class="opacity-0"
|
||||
>
|
||||
<ListboxOptions
|
||||
class="absolute mt-1 max-h-60 z-20 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm h-32 overflow-y-auto"
|
||||
>
|
||||
<ListboxOption
|
||||
v-slot="{ active, selected }"
|
||||
v-for="salutation in salutations"
|
||||
:key="salutation"
|
||||
:value="salutation"
|
||||
as="template"
|
||||
>
|
||||
<li
|
||||
:class="[
|
||||
active ? 'bg-red-200 text-amber-900' : 'text-gray-900',
|
||||
'relative cursor-default select-none py-2 pl-10 pr-4',
|
||||
]"
|
||||
>
|
||||
<span :class="[selected ? 'font-medium' : 'font-normal', 'block truncate']">{{ salutation }}</span>
|
||||
<span v-if="selected" class="absolute inset-y-0 left-0 flex items-center pl-3 text-primary">
|
||||
<CheckIcon class="h-5 w-5" aria-hidden="true" />
|
||||
</span>
|
||||
</li>
|
||||
</ListboxOption>
|
||||
</ListboxOptions>
|
||||
</transition>
|
||||
</div>
|
||||
</Listbox>
|
||||
</div>
|
||||
<div>
|
||||
<label for="firstname">Vorname</label>
|
||||
<input type="text" id="firstname" required v-model="member.firstname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Nachname</label>
|
||||
<input type="text" id="lastname" required v-model="member.lastname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="nameaffix">Nameaffix (optional)</label>
|
||||
<input type="text" id="nameaffix" v-model="member.nameaffix" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="birthdate">Geburtsdatum</label>
|
||||
<input type="date" id="birthdate" required v-model="member.birthdate" />
|
||||
</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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useMemberStore } from "@/stores/admin/member";
|
||||
import type { MemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import cloneDeep from "lodash.clonedeep";
|
||||
import isEqual from "lodash.isEqual";
|
||||
import { Salutation } from "@/enums/salutation";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
watch: {
|
||||
loadingActive() {
|
||||
if (this.loading == "loading") {
|
||||
this.loading = this.loadingActive;
|
||||
}
|
||||
if (this.loadingActive == "fetched") this.member = cloneDeep(this.activeMemberObj);
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: "loading" as "loading" | "fetched" | "failed",
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
member: null as null | MemberViewModel,
|
||||
timeout: null as any,
|
||||
salutations: [] as Array<string>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
canSaveOrReset(): boolean {
|
||||
return isEqual(this.activeMemberObj, this.member);
|
||||
},
|
||||
...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
this.salutations = Object.values(Salutation);
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMemberByActiveId", "updateActiveMember"]),
|
||||
resetForm() {
|
||||
this.member = cloneDeep(this.activeMemberObj);
|
||||
},
|
||||
fetchItem() {
|
||||
this.fetchMemberByActiveId();
|
||||
},
|
||||
triggerUpdate(e: any) {
|
||||
if (this.member == null) return;
|
||||
let formData = e.target.elements;
|
||||
let updateMember: UpdateMemberViewModel = {
|
||||
id: this.member.id,
|
||||
salutation: formData.salutation.value,
|
||||
firstname: formData.firstname.value,
|
||||
lastname: formData.lastname.value,
|
||||
nameaffix: formData.nameaffix.value,
|
||||
birthdate: formData.birthdate.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.updateActiveMember(updateMember)
|
||||
.then(() => {
|
||||
this.fetchItem();
|
||||
this.status = { status: "success" };
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed" };
|
||||
})
|
||||
.finally(() => {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.status = null;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
57
src/views/admin/club/members/MemberExecutivePositions.vue
Normal file
57
src/views/admin/club/members/MemberExecutivePositions.vue
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="memberExecutivePositions != null" class="flex flex-col gap-2 w-full">
|
||||
<MemberExecutivePositionListItem
|
||||
v-for="position in memberExecutivePositions"
|
||||
:key="position.id"
|
||||
:position="position"
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Vereinsamt 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 { useMemberExecutivePositionStore } from "@/stores/admin/memberExecutivePosition";
|
||||
import MemberExecutivePositionListItem from "@/components/admin/club/member/MemberExecutivePositionListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberExecutivePositionStore, ["memberExecutivePositions", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberExecutivePositionStore, ["fetchMemberExecutivePositionsForMember"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
fetchItem() {
|
||||
this.fetchMemberExecutivePositionsForMember();
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/club/member/MemberExecutivePositionCreateModal.vue"))
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
123
src/views/admin/club/members/MemberOverview.vue
Normal file
123
src/views/admin/club/members/MemberOverview.vue
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="activeMemberObj != null" class="flex flex-col gap-2 w-full">
|
||||
<div>
|
||||
<label for="salutation">Anrede</label>
|
||||
<input type="text" id="salutation" :value="activeMemberObj.salutation" readonly />
|
||||
</div>
|
||||
<div>
|
||||
<label for="firstname">Vorname</label>
|
||||
<input type="text" id="firstname" :value="activeMemberObj.firstname" readonly />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Nachname</label>
|
||||
<input type="text" id="lastname" :value="activeMemberObj.lastname" readonly />
|
||||
</div>
|
||||
<div>
|
||||
<label for="nameaffix">Nameaffix</label>
|
||||
<input type="text" id="nameaffix" :value="activeMemberObj.nameaffix" readonly />
|
||||
</div>
|
||||
<div>
|
||||
<label for="birthdate">Geburtsdatum</label>
|
||||
<input type="date" id="birthdate" :value="activeMemberObj.birthdate" readonly />
|
||||
</div>
|
||||
<div v-if="activeMemberObj.firstMembershipEntry">
|
||||
<p>Erster Eintrag Mitgliedschaft</p>
|
||||
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
|
||||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>
|
||||
{{ activeMemberObj.firstMembershipEntry.start }} bis
|
||||
{{ activeMemberObj.firstMembershipEntry.end ?? "heute" }}:
|
||||
{{ activeMemberObj.firstMembershipEntry.status }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="activeMemberObj.firstMembershipEntry.terminationReason" class="p-2">
|
||||
<p>Grund: {{ activeMemberObj.firstMembershipEntry.terminationReason }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="
|
||||
activeMemberObj.lastMembershipEntry &&
|
||||
activeMemberObj.firstMembershipEntry?.id != activeMemberObj.lastMembershipEntry?.id
|
||||
"
|
||||
>
|
||||
<p>Neuster Eintrag Mitgliedschaft</p>
|
||||
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
|
||||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>
|
||||
{{ activeMemberObj.lastMembershipEntry.start }} bis
|
||||
{{ activeMemberObj.lastMembershipEntry.end ?? "heute" }}:
|
||||
{{ activeMemberObj.lastMembershipEntry.status }}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="activeMemberObj.lastMembershipEntry.terminationReason" class="p-2">
|
||||
<p>Grund: {{ activeMemberObj.lastMembershipEntry.terminationReason }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeMemberObj.preferredCommunication?.length != 0">
|
||||
<p>bevorzugte Kommunikationswege</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<div
|
||||
v-for="com in activeMemberObj.preferredCommunication"
|
||||
class="flex flex-col h-fit w-full border border-primary rounded-md"
|
||||
>
|
||||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>
|
||||
{{ com.type.type }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p v-for="field in com.type.fields" :key="field">{{ field }}: {{ com[field] || "--" }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="activeMemberObj.sendNewsletter">
|
||||
<p>Newsletter Kommunikationswege</p>
|
||||
<div class="flex flex-col h-fit w-full border border-primary rounded-md">
|
||||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>
|
||||
{{ activeMemberObj.sendNewsletter.type.type }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p v-for="field in activeMemberObj.sendNewsletter.type.fields" :key="field">
|
||||
{{ field }}: {{ activeMemberObj.sendNewsletter[field] || "--" }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingActive == 'failed'" @click="fetchMemberByActiveId" class="cursor-pointer">
|
||||
↺ laden fehlgeschlagen
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useMemberStore } from "@/stores/admin/member";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMemberByActiveId();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMemberByActiveId"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
55
src/views/admin/club/members/MemberQualifications.vue
Normal file
55
src/views/admin/club/members/MemberQualifications.vue
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="memberQualifications != null" class="flex flex-col gap-2 w-full">
|
||||
<MemberQualificationListItem
|
||||
v-for="qualification in memberQualifications"
|
||||
:key="qualification.id"
|
||||
:qualification="qualification"
|
||||
/>
|
||||
</div>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Qualifikation 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 { useMemberQualificationStore } from "@/stores/admin/memberQualification";
|
||||
import MemberQualificationListItem from "@/components/admin/club/member/MemberQualificationListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberQualificationStore, ["memberQualifications", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberQualificationStore, ["fetchMemberQualificationsForMember"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
fetchItem() {
|
||||
this.fetchMemberQualificationsForMember();
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MemberQualificationCreateModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
92
src/views/admin/club/members/MemberRouting.vue
Normal file
92
src/views/admin/club/members/MemberRouting.vue
Normal file
|
|
@ -0,0 +1,92 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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>
|
||||
<RouterLink v-if="can('update', 'club', 'member')" :to="{ name: 'admin-club-member-edit' }">
|
||||
<PencilIcon class="w-5 h-5" />
|
||||
</RouterLink>
|
||||
<TrashIcon v-if="can('delete', 'club', 'member')" class="w-5 h-5 cursor-pointer" @click="openDeleteModal" />
|
||||
</div>
|
||||
</template>
|
||||
<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">
|
||||
<RouterLink
|
||||
v-for="tab in tabs"
|
||||
:key="tab.route"
|
||||
v-slot="{ isActive }"
|
||||
:to="{ name: tab.route }"
|
||||
class="w-1/2 md:w-1/3 lg:w-full p-0.5 first:pl-0 last:pr-0"
|
||||
>
|
||||
<p
|
||||
:class="[
|
||||
'w-full rounded-lg py-2.5 text-sm text-center font-medium leading-5 focus:ring-0 outline-none',
|
||||
isActive ? 'bg-red-200 shadow border-b-2 border-primary rounded-b-none' : ' hover:bg-red-200',
|
||||
]"
|
||||
>
|
||||
{{ tab.title }}
|
||||
</p>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<RouterView />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { RouterLink, RouterView } from "vue-router";
|
||||
import { useMemberStore } from "@/stores/admin/member";
|
||||
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabs: [
|
||||
{ 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-positions", title: "Vereinsämter" },
|
||||
],
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMemberStore, ["activeMemberObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMemberByActiveId();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMemberStore, ["fetchMemberByActiveId"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/DeleteMemberModal.vue"))),
|
||||
parseInt(this.memberId ?? "")
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
51
src/views/admin/club/members/Membership.vue
Normal file
51
src/views/admin/club/members/Membership.vue
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-2 h-full w-full overflow-y-auto">
|
||||
<div v-if="memberships != null" class="flex flex-col gap-2 w-full">
|
||||
<MembershipListItem v-for="membership in memberships" :key="membership.id" :membership="membership" />
|
||||
</div>
|
||||
<Spinner v-if="loading == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loading == 'failed'" @click="fetchItem" class="cursor-pointer">↺ laden fehlgeschlagen</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button v-if="can('create', 'club', 'member')" primary class="!w-fit" @click="openCreateModal">
|
||||
Mitgliedschaft hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useMembershipStore } from "@/stores/admin/membership";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import MembershipListItem from "@/components/admin/club/member/MembershipListItem.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
memberId: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMembershipStore, ["memberships", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchItem();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMembershipStore, ["fetchMembershipsForMember"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
fetchItem() {
|
||||
this.fetchMembershipsForMember();
|
||||
},
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/club/member/MembershipCreateModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
24
src/views/admin/club/members/Overview.vue
Normal file
24
src/views/admin/club/members/Overview.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<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>
|
||||
|
|
@ -20,7 +20,9 @@
|
|||
</Pagination>
|
||||
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Protokoll erstellen</button>
|
||||
<button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="openCreateModal">
|
||||
Protokoll erstellen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -35,8 +37,9 @@ import { ChevronRightIcon, ChevronLeftIcon } from "@heroicons/vue/20/solid";
|
|||
import { useProtocolStore } from "@/stores/admin/protocol";
|
||||
import ProtocolListItem from "@/components/admin/club/protocol/ProtocolListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Pagination from "../../../../components/Pagination.vue";
|
||||
import type { ProtocolViewModel } from "../../../../viewmodels/admin/protocol.models";
|
||||
import Pagination from "@/components/Pagination.vue";
|
||||
import type { ProtocolViewModel } from "@/viewmodels/admin/protocol.models";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -49,6 +52,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapState(useProtocolStore, ["protocols", "totalCount", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocols(0, this.maxEntriesPerPage, true);
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
autocomplete="off"
|
||||
v-model="item.topic"
|
||||
@keyup.prevent
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</summary>
|
||||
<QuillEditor
|
||||
|
|
@ -37,11 +38,15 @@
|
|||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="item.context"
|
||||
:enable="can('create', 'club', 'protocol')"
|
||||
:style="!can('create', 'club', 'protocol') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<button primary class="!w-fit" @click="createProtocolAgenda">Eintrag hinzufügen</button>
|
||||
<button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolAgenda">
|
||||
Eintrag hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -54,6 +59,7 @@ import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
|||
import { toolbarOptions } from "@/helpers/quillConfig";
|
||||
import { useProtocolAgendaStore } from "@/stores/admin/protocolAgenda";
|
||||
import type { ProtocolAgendaViewModel } from "@/viewmodels/admin/protocolAgenda.models";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -63,6 +69,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapWritableState(useProtocolAgendaStore, ["agenda", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolAgenda();
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
autocomplete="off"
|
||||
v-model="item.topic"
|
||||
@keyup.prevent
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</summary>
|
||||
<QuillEditor
|
||||
|
|
@ -37,11 +38,15 @@
|
|||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="item.context"
|
||||
:enable="can('create', 'club', 'protocol')"
|
||||
:style="!can('create', 'club', 'protocol') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<button primary class="!w-fit" @click="createProtocolDecision">Eintrag hinzufügen</button>
|
||||
<button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolDecision">
|
||||
Eintrag hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -53,7 +58,8 @@ import { useProtocolStore } from "@/stores/admin/protocol";
|
|||
import { QuillEditor } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { toolbarOptions } from "@/helpers/quillConfig";
|
||||
import { useProtocolDecisionStore } from "../../../../stores/admin/protocolDecision";
|
||||
import { useProtocolDecisionStore } from "@/stores/admin/protocolDecision";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -63,6 +69,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapWritableState(useProtocolDecisionStore, ["decision", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolDecision();
|
||||
|
|
|
|||
|
|
@ -3,20 +3,37 @@
|
|||
<div v-if="activeProtocolObj != null" class="flex flex-col gap-2 w-full">
|
||||
<div class="w-full">
|
||||
<label for="title">Titel</label>
|
||||
<input type="text" id="title" v-model="activeProtocolObj.title" />
|
||||
<input
|
||||
type="text"
|
||||
id="title"
|
||||
v-model="activeProtocolObj.title"
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="date">Datum</label>
|
||||
<input type="date" id="date" v-model="activeProtocolObj.date" />
|
||||
<input type="date" id="date" v-model="activeProtocolObj.date" :disabled="!can('create', 'club', 'protocol')" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 w-full">
|
||||
<div class="w-full">
|
||||
<label for="starttime">Startzeit</label>
|
||||
<input type="time" id="starttime" step="1" v-model="activeProtocolObj.starttime" />
|
||||
<input
|
||||
type="time"
|
||||
id="starttime"
|
||||
step="1"
|
||||
v-model="activeProtocolObj.starttime"
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="endtime">Endzeit</label>
|
||||
<input type="time" id="endtime" step="1" v-model="activeProtocolObj.endtime" />
|
||||
<input
|
||||
type="time"
|
||||
id="endtime"
|
||||
step="1"
|
||||
v-model="activeProtocolObj.endtime"
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col h-1/2">
|
||||
|
|
@ -29,6 +46,8 @@
|
|||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="activeProtocolObj.summary"
|
||||
:enable="can('create', 'club', 'protocol')"
|
||||
:style="!can('create', 'club', 'protocol') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,6 +67,7 @@ import { useProtocolStore } from "@/stores/admin/protocol";
|
|||
import { QuillEditor } from "@vueup/vue-quill";
|
||||
import "@vueup/vue-quill/dist/vue-quill.snow.css";
|
||||
import { toolbarOptions } from "@/helpers/quillConfig";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -57,6 +77,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapWritableState(useProtocolStore, ["loadingActive", "activeProtocolObj"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolByActiveId();
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</p>
|
||||
|
||||
<div class="w-full">
|
||||
<Combobox v-model="presence" multiple>
|
||||
<Combobox v-model="presence" :disabled="!can('create', 'club', 'protocol')" multiple>
|
||||
<ComboboxLabel>Anwesende suchen</ComboboxLabel>
|
||||
<div class="relative mt-1">
|
||||
<ComboboxInput
|
||||
|
|
@ -71,7 +71,11 @@
|
|||
class="flex flex-row h-fit w-full border border-primary rounded-md bg-primary p-2 text-white justify-between items-center"
|
||||
>
|
||||
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="removeSelected(member.id)" />
|
||||
<TrashIcon
|
||||
v-if="can('create', 'club', 'protocol')"
|
||||
class="w-5 h-5 p-1 box-content cursor-pointer"
|
||||
@click="removeSelected(member.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -96,6 +100,7 @@ import { useProtocolStore } from "@/stores/admin/protocol";
|
|||
import { useMemberStore } from "@/stores/admin/member";
|
||||
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
|
||||
import { useProtocolPresenceStore } from "@/stores/admin/protocolPresence";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -111,6 +116,7 @@ export default defineComponent({
|
|||
computed: {
|
||||
...mapWritableState(useProtocolPresenceStore, ["presence", "loading"]),
|
||||
...mapState(useMemberStore, ["members"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
filtered(): Array<MemberViewModel> {
|
||||
return this.query === ""
|
||||
? this.members
|
||||
|
|
|
|||
|
|
@ -30,7 +30,13 @@
|
|||
</div>
|
||||
|
||||
<div class="flex flex-row justify-start gap-2">
|
||||
<button primary class="!w-fit" :disabled="printing != undefined" @click="createProtocolPrintout">
|
||||
<button
|
||||
v-if="can('create', 'club', 'protocol')"
|
||||
primary
|
||||
class="!w-fit"
|
||||
:disabled="printing != undefined"
|
||||
@click="createProtocolPrintout"
|
||||
>
|
||||
Ausdruck erstellen
|
||||
</button>
|
||||
<Spinner v-if="printing == 'loading'" class="my-auto" />
|
||||
|
|
@ -49,6 +55,7 @@ import FailureXMark from "@/components/FailureXMark.vue";
|
|||
import { useProtocolPrintoutStore } from "@/stores/admin/protocolPrintout";
|
||||
import { ArrowDownTrayIcon, ViewfinderCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -58,6 +65,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapState(useProtocolPrintoutStore, ["printout", "loading", "printing"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolPrintout();
|
||||
|
|
|
|||
|
|
@ -14,7 +14,6 @@
|
|||
}
|
||||
"
|
||||
/>
|
||||
<!-- <TrashIcon class="w-5 h-5 cursor-pointer" @click="openDeleteModal" /> -->
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
autocomplete="off"
|
||||
v-model="item.topic"
|
||||
@keyup.prevent
|
||||
:disabled="!can('create', 'club', 'protocol')"
|
||||
/>
|
||||
</summary>
|
||||
<QuillEditor
|
||||
|
|
@ -37,6 +38,8 @@
|
|||
contentType="html"
|
||||
:toolbar="toolbarOptions"
|
||||
v-model:content="item.context"
|
||||
:enable="can('create', 'club', 'protocol')"
|
||||
:style="!can('create', 'club', 'protocol') ? 'opacity: 75%; background: rgb(243 244 246)' : ''"
|
||||
/>
|
||||
<div class="px-2 pb-2">
|
||||
<p>Ergebnis:</p>
|
||||
|
|
@ -58,7 +61,9 @@
|
|||
</details>
|
||||
</div>
|
||||
|
||||
<button primary class="!w-fit" @click="createProtocolVoting">Abstimmung hinzufügen</button>
|
||||
<button v-if="can('create', 'club', 'protocol')" primary class="!w-fit" @click="createProtocolVoting">
|
||||
Abstimmung hinzufügen
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -70,7 +75,8 @@ import { useProtocolStore } from "@/stores/admin/protocol";
|
|||
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/protocolVoting";
|
||||
import { useProtocolVotingStore } from "@/stores/admin/protocolVoting";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -80,6 +86,7 @@ export default defineComponent({
|
|||
},
|
||||
computed: {
|
||||
...mapState(useProtocolVotingStore, ["voting", "loading"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchProtocolVoting();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue