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

member data reads and display

Browse source
This commit is contained in:
Julian Krauser 2024-09-17 16:44:02 +02:00
parent c1a6c0040d
commit 5eeea631c0
57 changed files with 1149 additions and 110 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/ContextMenu.vue
View file

@ -21,7 +21,7 @@
<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useContextMenuStore } from "../stores/context-menu";
import { useContextMenuStore } from "@/stores/context-menu";
</script>
<script lang="ts">

4
src/components/Footer.vue
View file

@ -11,8 +11,8 @@
<script setup lang="ts">
import { mapState } from "pinia";
import { useAuthStore } from "../stores/auth";
import { useNavigationStore } from "../stores/admin/navigation";
import { useAuthStore } from "@/stores/auth";
import { useNavigationStore } from "@/stores/admin/navigation";
import TopLevelLink from "./admin/TopLevelLink.vue";
</script>

4
src/components/Header.vue
View file

@ -16,8 +16,8 @@
<script setup lang="ts">
import { RouterLink } from "vue-router";
import { mapState } from "pinia";
import { useAuthStore } from "../stores/auth";
import { useNavigationStore } from "../stores/admin/navigation";
import { useAuthStore } from "@/stores/auth";
import { useNavigationStore } from "@/stores/admin/navigation";
import TopLevelLink from "./admin/TopLevelLink.vue";
import UserMenu from "./UserMenu.vue";
</script>

2
src/components/Modal.vue
View file

@ -12,7 +12,7 @@
<script setup lang="ts">
import { mapState, mapActions } from "pinia";
import { useModalStore } from "../stores/modal";
import { useModalStore } from "@/stores/modal";
</script>
<script lang="ts">

21
src/components/admin/club/member/MemberListItem.vue
View file

@ -1,11 +1,20 @@
<template>
<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">
<RouterLink
:to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
class="bg-primary p-2 text-white flex flex-row justify-between items-center"
>
<p>{{ member.lastname }}, {{ member.firstname }} {{ member.nameaffix ? `- ${member.nameaffix}` : "" }}</p>
<div class="flex flex-row">
<div v-if="false" class="flex flex-row">
<RouterLink
v-if="can('read', 'club', 'member')"
:to="{ name: 'admin-club-member-overview', params: { memberId: member.id } }"
>
<CircleStackIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
</RouterLink>
<RouterLink
v-if="can('update', 'club', 'member')"
:to="{ name: 'admin-club-member', params: { id: member.id } }"
:to="{ name: 'admin-club-member-edit', params: { id: member.id } }"
>
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
</RouterLink>
@ -13,7 +22,7 @@
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
</div>
</div>
</div>
</RouterLink>
<div class="p-2">
<p>beigetreten: {{ member.firstMembershipEntry?.start }}</p>
<p v-if="member.lastMembershipEntry?.end">ausgetreten: {{ member.lastMembershipEntry?.end }}</p>
@ -24,10 +33,10 @@
<script setup lang="ts">
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
import { mapState, mapActions } from "pinia";
import { PencilIcon, TrashIcon } from "@heroicons/vue/24/outline";
import { PencilIcon, TrashIcon, CircleStackIcon } from "@heroicons/vue/24/outline";
import { useAbilityStore } from "@/stores/ability";
import { useModalStore } from "@/stores/modal";
import type { MemberViewModel } from "../../../../viewmodels/admin/member.models";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
</script>
<script lang="ts">

2
src/layouts/Sidebar.vue
View file

@ -15,7 +15,7 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNavigationStore } from "../stores/admin/navigation";
import { useNavigationStore } from "@/stores/admin/navigation";
</script>
<script lang="ts">

4
src/router/adminGuard.ts
View file

@ -1,6 +1,6 @@
import NProgress from "nprogress";
import { useAbilityStore } from "../stores/ability";
import { useNavigationStore } from "../stores/admin/navigation";
import { useAbilityStore } from "@/stores/ability";
import { useNavigationStore } from "@/stores/admin/navigation";
export async function abilityAndNavUpdate(to: any, from: any, next: any) {
NProgress.start();

6
src/router/authGuards.ts
View file

@ -2,9 +2,9 @@ import NProgress from "nprogress";
import { useAuthStore } from "@/stores/auth";
import { useAccountStore } from "@/stores/account";
import { jwtDecode, type JwtPayload } from "jwt-decode";
import { refreshToken } from "../serverCom";
import type { PermissionObject } from "../types/permissionTypes";
import { useAbilityStore } from "../stores/ability";
import { refreshToken } from "@/serverCom";
import type { PermissionObject } from "@/types/permissionTypes";
import { useAbilityStore } from "@/stores/ability";
export type Payload = JwtPayload & {
userId: number;

153
src/router/index.ts
View file

@ -1,11 +1,12 @@
import { createRouter, createWebHistory, createWebHashHistory } from "vue-router";
import Login from "../views/Login.vue";
import Login from "@/views/Login.vue";
import { isAuthenticated } from "./authGuards";
import { loadAccountData } from "./accountGuard";
import { isSetup } from "./setupGuard";
import { abilityAndNavUpdate } from "./adminGuard";
import type { PermissionType, PermissionSection, PermissionModule } from "../types/permissionTypes";
import type { PermissionType, PermissionSection, PermissionModule } from "@/types/permissionTypes";
import { setMemberId } from "./memberGuard";
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@ -22,18 +23,18 @@ const router = createRouter({
{
path: "/setup",
name: "setup",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
beforeEnter: [isSetup],
children: [
{
path: "",
name: "setup-create",
component: () => import("../views/setup/Setup.vue"),
component: () => import("@/views/setup/Setup.vue"),
},
{
path: "verify",
name: "setup-verify",
component: () => import("../views/setup/Verify.vue"),
component: () => import("@/views/setup/Verify.vue"),
props: (route) => ({ mail: route.query.mail, token: route.query.token }),
},
],
@ -41,53 +42,113 @@ const router = createRouter({
{
path: "/admin",
name: "admin",
component: () => import("../views/admin/View.vue"),
component: () => import("@/views/admin/View.vue"),
beforeEnter: [isAuthenticated],
children: [
{
path: "",
name: "admin-default",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
},
{
path: "club",
name: "admin-club",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "club" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-club-default",
component: () => import("../views/admin/ViewSelect.vue"),
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "read", section: "club" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "members",
name: "admin-club-member",
component: () => import("../views/admin/members/Member.vue"),
name: "admin-club-member-route",
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "club", module: "member" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-club-member",
component: () => import("@/views/admin/members/Member.vue"),
},
{
path: ":id/edit",
name: "admin-club-member-edit",
component: () => import("@/views/admin/members/MemberEdit.vue"),
meta: { type: "update", section: "club", module: "member" },
beforeEnter: [abilityAndNavUpdate],
props: true,
},
{
path: ":memberId",
name: "admin-club-member-routing",
component: () => import("@/views/admin/members/MemberRouting.vue"),
beforeEnter: [setMemberId],
props: true,
children: [
{
path: "overview",
name: "admin-club-member-overview",
component: () => import("@/views/admin/members/MemberOverview.vue"),
props: true,
},
{
path: "membership",
name: "admin-club-member-membership",
component: () => import("@/views/admin/members/Membership.vue"),
props: true,
},
{
path: "communication",
name: "admin-club-member-communication",
component: () => import("@/views/admin/members/MemberCommunication.vue"),
props: true,
},
{
path: "awards",
name: "admin-club-member-awards",
component: () => import("@/views/admin/members/MemberAwards.vue"),
props: true,
},
{
path: "qualifications",
name: "admin-club-member-qualifications",
component: () => import("@/views/admin/members/MemberQualifications.vue"),
props: true,
},
{
path: "positions",
name: "admin-club-member-positions",
component: () => import("@/views/admin/members/MemberExecutivePositions.vue"),
props: true,
},
],
},
],
},
{
path: "calendar",
name: "admin-club-calendar",
component: () => import("../views/admin/members/Overview.vue"),
component: () => import("@/views/admin/members/Overview.vue"),
meta: { type: "read", section: "club", module: "calendar" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "newsletter",
name: "admin-club-newsletter",
component: () => import("../views/admin/members/Overview.vue"),
component: () => import("@/views/admin/members/Overview.vue"),
meta: { type: "read", section: "club", module: "newsletter" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "protocol",
name: "admin-club-protocol",
component: () => import("../views/admin/members/Overview.vue"),
component: () => import("@/views/admin/members/Overview.vue"),
meta: { type: "read", section: "club", module: "protocoll" },
beforeEnter: [abilityAndNavUpdate],
},
@ -96,33 +157,33 @@ const router = createRouter({
{
path: "settings",
name: "admin-settings",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-default",
component: () => import("../views/admin/ViewSelect.vue"),
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "read", section: "settings" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "qualification",
name: "admin-settings-qualification-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings", module: "qualification" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-qualification",
component: () => import("../views/admin/settings/Qualification.vue"),
component: () => import("@/views/admin/settings/Qualification.vue"),
},
{
path: ":id/edit",
name: "admin-settings-qualification-edit",
component: () => import("../views/admin/settings/QualificationEdit.vue"),
component: () => import("@/views/admin/settings/QualificationEdit.vue"),
meta: { type: "update", section: "settings", module: "qualification" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -132,19 +193,19 @@ const router = createRouter({
{
path: "award",
name: "admin-settings-award-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings", module: "award" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-award",
component: () => import("../views/admin/settings/Award.vue"),
component: () => import("@/views/admin/settings/Award.vue"),
},
{
path: ":id/edit",
name: "admin-settings-award-edit",
component: () => import("../views/admin/settings/AwardEdit.vue"),
component: () => import("@/views/admin/settings/AwardEdit.vue"),
meta: { type: "update", section: "settings", module: "award" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -154,26 +215,26 @@ const router = createRouter({
{
path: "executive-position",
name: "admin-settings-executive_position",
component: () => import("../views/admin/settings/ExecutivePosition.vue"),
component: () => import("@/views/admin/settings/ExecutivePosition.vue"),
meta: { type: "read", section: "settings", module: "executive_position" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "executive-position",
name: "admin-settings-executive_position-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings", module: "executive_position" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-executive_position",
component: () => import("../views/admin/settings/ExecutivePosition.vue"),
component: () => import("@/views/admin/settings/ExecutivePosition.vue"),
},
{
path: ":id/edit",
name: "admin-settings-executive_position-edit",
component: () => import("../views/admin/settings/ExecutivePositionEdit.vue"),
component: () => import("@/views/admin/settings/ExecutivePositionEdit.vue"),
meta: { type: "update", section: "settings", module: "executive_position" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -183,19 +244,19 @@ const router = createRouter({
{
path: "communication",
name: "admin-settings-communication-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings", module: "communication" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-communication",
component: () => import("../views/admin/settings/CommunicationType.vue"),
component: () => import("@/views/admin/settings/CommunicationType.vue"),
},
{
path: ":id/edit",
name: "admin-settings-communication-edit",
component: () => import("../views/admin/settings/CommunicationTypeEdit.vue"),
component: () => import("@/views/admin/settings/CommunicationTypeEdit.vue"),
meta: { type: "update", section: "settings", module: "communication" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -205,19 +266,19 @@ const router = createRouter({
{
path: "status",
name: "admin-settings-membership_status-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "settings", module: "membership_status" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-settings-membership_status",
component: () => import("../views/admin/settings/MembershipStatus.vue"),
component: () => import("@/views/admin/settings/MembershipStatus.vue"),
},
{
path: ":id/edit",
name: "admin-settings-membership_status-edit",
component: () => import("../views/admin/settings/MembershipStatusEdit.vue"),
component: () => import("@/views/admin/settings/MembershipStatusEdit.vue"),
meta: { type: "update", section: "settings", module: "membership_status" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -229,33 +290,33 @@ const router = createRouter({
{
path: "user",
name: "admin-user",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "user" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-user-default",
component: () => import("../views/admin/ViewSelect.vue"),
component: () => import("@/views/admin/ViewSelect.vue"),
meta: { type: "read", section: "user" },
beforeEnter: [abilityAndNavUpdate],
},
{
path: "user",
name: "admin-user-user-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "user", module: "user" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-user-user",
component: () => import("../views/admin/user/User.vue"),
component: () => import("@/views/admin/user/User.vue"),
},
{
path: ":id/edit",
name: "admin-user-user-edit",
component: () => import("../views/admin/user/UserEdit.vue"),
component: () => import("@/views/admin/user/UserEdit.vue"),
meta: { type: "update", section: "user", module: "user" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -263,7 +324,7 @@ const router = createRouter({
{
path: ":id/permission",
name: "admin-user-user-permission",
component: () => import("../views/admin/user/UserEditPermission.vue"),
component: () => import("@/views/admin/user/UserEditPermission.vue"),
meta: { type: "update", section: "user", module: "user" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -271,7 +332,7 @@ const router = createRouter({
{
path: ":id/roles",
name: "admin-user-user-roles",
component: () => import("../views/admin/user/UserEditRoles.vue"),
component: () => import("@/views/admin/user/UserEditRoles.vue"),
meta: { type: "update", section: "user", module: "user" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -281,19 +342,19 @@ const router = createRouter({
{
path: "role",
name: "admin-user-role-route",
component: () => import("../views/RouterView.vue"),
component: () => import("@/views/RouterView.vue"),
meta: { type: "read", section: "user", module: "role" },
beforeEnter: [abilityAndNavUpdate],
children: [
{
path: "",
name: "admin-user-role",
component: () => import("../views/admin/user/Role.vue"),
component: () => import("@/views/admin/user/Role.vue"),
},
{
path: ":id/edit",
name: "admin-user-role-edit",
component: () => import("../views/admin/user/RoleEdit.vue"),
component: () => import("@/views/admin/user/RoleEdit.vue"),
meta: { type: "update", section: "user", module: "role" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -301,7 +362,7 @@ const router = createRouter({
{
path: ":id/permission",
name: "admin-user-role-permission",
component: () => import("../views/admin/user/RoleEditPermission.vue"),
component: () => import("@/views/admin/user/RoleEditPermission.vue"),
meta: { type: "update", section: "user", module: "role" },
beforeEnter: [abilityAndNavUpdate],
props: true,
@ -313,19 +374,19 @@ const router = createRouter({
{
path: ":pathMatch(.*)*",
name: "admin-404",
component: () => import("../views/notFound.vue"),
component: () => import("@/views/notFound.vue"),
},
],
},
{
path: "/nopermissions",
name: "nopermissions",
component: () => import("../views/NoPermission.vue"),
component: () => import("@/views/NoPermission.vue"),
},
{
path: "/:pathMatch(.*)*",
name: "404",
component: () => import("../views/notFound.vue"),
component: () => import("@/views/notFound.vue"),
},
],
});

19
src/router/memberGuard.ts Normal file
View file

@ -0,0 +1,19 @@
import { useCommunicationStore } from "@/stores/admin/communication";
import { useMemberStore } from "@/stores/admin/member";
import { useMemberAwardStore } from "@/stores/admin/memberAward";
import { useMemberExecutivePositionStore } from "@/stores/admin/memberExecutivePosition";
import { useMemberQualificationStore } from "@/stores/admin/memberQualification";
import { useMembershipStore } from "@/stores/admin/membership";
export async function setMemberId(to: any, from: any, next: any) {
const member = useMemberStore();
member.activeMember = to.params?.memberId ?? null;
useMembershipStore().$reset();
useCommunicationStore().$reset();
useMemberAwardStore().$reset();
useMemberExecutivePositionStore().$reset();
useMemberQualificationStore().$reset();
next();
}

2
src/router/setupGuard.ts
View file

@ -1,5 +1,5 @@
import NProgress from "nprogress";
import { http } from "../serverCom";
import { http } from "@/serverCom";
export async function isSetup(to: any, from: any, next: any) {
NProgress.start();

2
src/stores/ability.ts
View file

@ -1,5 +1,5 @@
import { defineStore } from "pinia";
import type { PermissionModule, PermissionObject, PermissionSection, PermissionType } from "../types/permissionTypes";
import type { PermissionModule, PermissionObject, PermissionSection, PermissionType } from "@/types/permissionTypes";
export const useAbilityStore = defineStore("ability", {
state: () => {

2
src/stores/account.ts
View file

@ -1,5 +1,5 @@
import { defineStore } from "pinia";
import type { PermissionObject } from "../types/permissionTypes";
import type { PermissionObject } from "@/types/permissionTypes";
import { useAbilityStore } from "./ability";
export const useAccountStore = defineStore("account", {

4
src/stores/admin/award.ts
View file

@ -1,6 +1,6 @@
import { defineStore } from "pinia";
import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
import { http } from "../../serverCom";
import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "@/viewmodels/admin/award.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
export const useAwardStore = defineStore("award", {

74
src/stores/admin/communication.ts Normal file
View file

@ -0,0 +1,74 @@
import { defineStore } from "pinia";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
import { useMemberStore } from "./member";
import type {
CreateCommunicationViewModel,
CommunicationViewModel,
UpdateCommunicationViewModel,
} from "@/viewmodels/admin/communication.models";
export const useCommunicationStore = defineStore("communication", {
state: () => {
return {
communications: [] as Array<CommunicationViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchCommunicationsForMember() {
const memberId = useMemberStore().activeMember;
this.loading = "loading";
http
.get(`/admin/member/${memberId}/communications`)
.then((result) => {
this.communications = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchCommunicationById(id: number) {
const memberId = useMemberStore().activeMember;
return http.get(`/admin/member/${memberId}/communication/${id}`);
},
async createCommunication(communication: CreateCommunicationViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.post(`/admin/member/${memberId}/communication`, {
preferred: communication.preferred,
mobile: communication.mobile,
email: communication.email,
city: communication.city,
street: communication.street,
streetNumber: communication.streetNumber,
streetNumberAddition: communication.streetNumberAddition,
typeId: communication.typeId,
});
this.fetchCommunicationsForMember();
return result;
},
async updateCommunication(communication: UpdateCommunicationViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.patch(`/admin/member/${memberId}/communication/${communication.id}`, {
preferred: communication.preferred,
mobile: communication.mobile,
email: communication.email,
city: communication.city,
street: communication.street,
streetNumber: communication.streetNumber,
streetNumberAddition: communication.streetNumberAddition,
});
this.fetchCommunicationsForMember();
return result;
},
async deleteCommunication(communication: number): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.delete(`/admin/member/${memberId}/communication/${communication}`);
this.fetchCommunicationsForMember();
return result;
},
},
});

4
src/stores/admin/communicationType.ts
View file

@ -3,8 +3,8 @@ import type {
CreateCommunicationTypeViewModel,
UpdateCommunicationTypeViewModel,
CommunicationTypeViewModel,
} from "../../viewmodels/admin/communicationType.models";
import { http } from "../../serverCom";
} from "@/viewmodels/admin/communicationType.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
export const useCommunicationTypeStore = defineStore("communicationType", {

4
src/stores/admin/executivePosition.ts
View file

@ -3,8 +3,8 @@ import type {
CreateExecutivePositionViewModel,
UpdateExecutivePositionViewModel,
ExecutivePositionViewModel,
} from "../../viewmodels/admin/executivePosition.models";
import { http } from "../../serverCom";
} from "@/viewmodels/admin/executivePosition.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
export const useExecutivePositionStore = defineStore("executivePosition", {

53
src/stores/admin/member.ts
View file

@ -1,8 +1,8 @@
import { defineStore } from "pinia";
import type { CreateAwardViewModel, UpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
import { http } from "../../serverCom";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "../../viewmodels/admin/member.models";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
export const useMemberStore = defineStore("member", {
state: () => {
@ -10,7 +10,9 @@ export const useMemberStore = defineStore("member", {
members: [] as Array<MemberViewModel & { tab_pos: number }>,
totalCount: 0 as number,
loading: "loading" as "loading" | "fetched" | "failed",
activeMember: null as null | MemberViewModel,
activeMember: null as number | null,
activeMemberObj: null as MemberViewModel | null,
loadingActive: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
@ -20,7 +22,6 @@ export const useMemberStore = defineStore("member", {
http
.get(`/admin/member?offset=${offset}&count=${count}`)
.then((result) => {
this.members = result.data.members;
this.totalCount = result.data.total;
result.data.members
.filter((elem: MemberViewModel) => this.members.findIndex((m) => m.id == elem.id) == -1)
@ -39,5 +40,47 @@ export const useMemberStore = defineStore("member", {
this.loading = "failed";
});
},
fetchMemberByActiveId() {
this.loadingActive = "loading";
http
.get(`/admin/member/${this.activeMember}`)
.then((res) => {
this.activeMemberObj = res.data;
this.loadingActive = "fetched";
})
.catch((err) => {
this.loadingActive = "failed";
});
},
fetchMemberById(id: number) {
return http.get(`/admin/member/${id}`);
},
async createMember(member: CreateMemberViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.post(`/admin/member`, {
salutation: member.salutation,
firstname: member.firstname,
lastname: member.lastname,
nameaffix: member.nameaffix,
birthdate: member.birthdate,
});
this.fetchMembers();
return result;
},
async updateActiveMember(member: UpdateMemberViewModel): Promise<AxiosResponse<any, any>> {
const result = await http.patch(`/admin/member/${member.id}`, {
salutation: member.salutation,
firstname: member.firstname,
lastname: member.lastname,
nameaffix: member.nameaffix,
birthdate: member.birthdate,
});
this.fetchMembers();
return result;
},
async deleteMember(member: number): Promise<AxiosResponse<any, any>> {
const result = await http.delete(`/admin/member/${member}`);
this.fetchMembers();
return result;
},
},
});

67
src/stores/admin/memberAward.ts Normal file
View file

@ -0,0 +1,67 @@
import { defineStore } from "pinia";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
import { useMemberStore } from "./member";
import type {
CreateMemberAwardViewModel,
MemberAwardViewModel,
UpdateMemberAwardViewModel,
} from "@/viewmodels/admin/memberAward.models";
export const useMemberAwardStore = defineStore("memberAward", {
state: () => {
return {
memberAwards: [] as Array<MemberAwardViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchMemberAwardsForMember() {
const memberId = useMemberStore().activeMember;
this.loading = "loading";
http
.get(`/admin/member/${memberId}/awards`)
.then((result) => {
this.memberAwards = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchMemberAwardById(id: number) {
const memberId = useMemberStore().activeMember;
return http.get(`/admin/member/${memberId}/award/${id}`);
},
async createMemberAward(memberAward: CreateMemberAwardViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.post(`/admin/member/${memberId}/award`, {
given: memberAward.given,
note: memberAward.note,
date: memberAward.date,
awardId: memberAward.awardId,
});
this.fetchMemberAwardsForMember();
return result;
},
async updateMemberAward(memberAward: UpdateMemberAwardViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.patch(`/admin/member/${memberId}/award/${memberAward.id}`, {
given: memberAward.given,
note: memberAward.note,
date: memberAward.date,
awardId: memberAward.awardId,
});
this.fetchMemberAwardsForMember();
return result;
},
async deleteMemberAward(memberAward: number): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.delete(`/admin/member/${memberId}/award/${memberAward}`);
this.fetchMemberAwardsForMember();
return result;
},
},
});

71
src/stores/admin/memberExecutivePosition.ts Normal file
View file

@ -0,0 +1,71 @@
import { defineStore } from "pinia";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
import { useMemberStore } from "./member";
import type {
CreateMemberExecutivePositionViewModel,
MemberExecutivePositionViewModel,
UpdateMemberExecutivePositionViewModel,
} from "@/viewmodels/admin/memberExecutivePosition.models";
export const useMemberExecutivePositionStore = defineStore("memberExecutivePosition", {
state: () => {
return {
memberExecutivePositions: [] as Array<MemberExecutivePositionViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchMemberExecutivePositionsForMember() {
const memberId = useMemberStore().activeMember;
this.loading = "loading";
http
.get(`/admin/member/${memberId}/positions`)
.then((result) => {
this.memberExecutivePositions = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchMemberExecutivePositionById(id: number) {
const memberId = useMemberStore().activeMember;
return http.get(`/admin/member/${memberId}/position/${id}`);
},
async createMemberExecutivePosition(
memberExecutivePosition: CreateMemberExecutivePositionViewModel
): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.post(`/admin/member/${memberId}/position`, {
note: memberExecutivePosition.note,
start: memberExecutivePosition.start,
end: memberExecutivePosition.end,
executivePositionId: memberExecutivePosition.executivePositionId,
});
this.fetchMemberExecutivePositionsForMember();
return result;
},
async updateMemberExecutivePosition(
memberExecutivePosition: UpdateMemberExecutivePositionViewModel
): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.patch(`/admin/member/${memberId}/position/${memberExecutivePosition.id}`, {
note: memberExecutivePosition.note,
start: memberExecutivePosition.start,
end: memberExecutivePosition.end,
executivePositionId: memberExecutivePosition.executivePositionId,
});
this.fetchMemberExecutivePositionsForMember();
return result;
},
async deleteMemberExecutivePosition(memberExecutivePosition: number): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.delete(`/admin/member/${memberId}/position/${memberExecutivePosition}`);
this.fetchMemberExecutivePositionsForMember();
return result;
},
},
});

73
src/stores/admin/memberQualification.ts Normal file
View file

@ -0,0 +1,73 @@
import { defineStore } from "pinia";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
import { useMemberStore } from "./member";
import type {
CreateMemberQualificationViewModel,
MemberQualificationViewModel,
UpdateMemberQualificationViewModel,
} from "@/viewmodels/admin/memberQualification.models";
export const useMemberQualificationStore = defineStore("memberQualification", {
state: () => {
return {
memberQualifications: [] as Array<MemberQualificationViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchMemberQualificationsForMember() {
const memberId = useMemberStore().activeMember;
this.loading = "loading";
http
.get(`/admin/member/${memberId}/qualifications`)
.then((result) => {
this.memberQualifications = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchMemberQualificationById(id: number) {
const memberId = useMemberStore().activeMember;
return http.get(`/admin/member/${memberId}/qualification/${id}`);
},
async createMemberQualification(
memberQualification: CreateMemberQualificationViewModel
): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.post(`/admin/member/${memberId}/qualification`, {
note: memberQualification.note,
start: memberQualification.start,
end: memberQualification.end,
terminationReason: memberQualification.terminationReason,
qualificationId: memberQualification.qualificationId,
});
this.fetchMemberQualificationsForMember();
return result;
},
async updateMemberQualification(
memberQualification: UpdateMemberQualificationViewModel
): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.patch(`/admin/member/${memberId}/qualification/${memberQualification.id}`, {
note: memberQualification.note,
start: memberQualification.start,
end: memberQualification.end,
terminationReason: memberQualification.terminationReason,
qualificationId: memberQualification.qualificationId,
});
this.fetchMemberQualificationsForMember();
return result;
},
async deleteMemberQualification(memberQualification: number): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.delete(`/admin/member/${memberId}/qualification/${memberQualification}`);
this.fetchMemberQualificationsForMember();
return result;
},
},
});

69
src/stores/admin/membership.ts Normal file
View file

@ -0,0 +1,69 @@
import { defineStore } from "pinia";
import type { CreateMemberViewModel, UpdateMemberViewModel } from "@/viewmodels/admin/member.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
import type { MemberViewModel } from "@/viewmodels/admin/member.models";
import { useMemberStore } from "./member";
import type {
CreateMembershipViewModel,
MembershipViewModel,
UpdateMembershipViewModel,
} from "@/viewmodels/admin/membership.models";
export const useMembershipStore = defineStore("membership", {
state: () => {
return {
memberships: [] as Array<MembershipViewModel>,
loading: "loading" as "loading" | "fetched" | "failed",
};
},
actions: {
fetchMembershipsForMember() {
const memberId = useMemberStore().activeMember;
this.loading = "loading";
http
.get(`/admin/member/${memberId}/memberships`)
.then((result) => {
this.memberships = result.data;
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
fetchMembershipById(id: number) {
const memberId = useMemberStore().activeMember;
return http.get(`/admin/member/${memberId}/membership/${id}`);
},
async createMembership(membership: CreateMembershipViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.post(`/admin/member/${memberId}/membership`, {
interalId: membership.internalId,
start: membership.start,
end: membership.end,
terminationReason: membership.terminationReason,
statusId: membership.statusId,
});
this.fetchMembershipsForMember();
return result;
},
async updateMembership(membership: UpdateMembershipViewModel): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.patch(`/admin/member/${memberId}/membership/${membership.id}`, {
interalId: membership.internalId,
start: membership.start,
end: membership.end,
terminationReason: membership.terminationReason,
statusId: membership.statusId,
});
this.fetchMembershipsForMember();
return result;
},
async deleteMembership(membership: number): Promise<AxiosResponse<any, any>> {
const memberId = useMemberStore().activeMember;
const result = await http.delete(`/admin/member/${memberId}/membership/${membership}`);
this.fetchMembershipsForMember();
return result;
},
},
});

4
src/stores/admin/membershipStatus.ts
View file

@ -3,8 +3,8 @@ import type {
CreateMembershipStatusViewModel,
UpdateMembershipStatusViewModel,
MembershipStatusViewModel,
} from "../../viewmodels/admin/membershipStatus.models";
import { http } from "../../serverCom";
} from "@/viewmodels/admin/membershipStatus.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
export const useMembershipStatusStore = defineStore("membershipStatus", {

4
src/stores/admin/navigation.ts
View file

@ -1,6 +1,6 @@
import { defineStore } from "pinia";
import { useAbilityStore } from "../ability";
import router from "../../router";
import { useAbilityStore } from "@/stores/ability";
import router from "@/router";
export interface navigationModel {
club: navigationSplitModel;

4
src/stores/admin/qualification.ts
View file

@ -3,8 +3,8 @@ import type {
CreateQualificationViewModel,
UpdateQualificationViewModel,
QualificationViewModel,
} from "../../viewmodels/admin/qualification.models";
import { http } from "../../serverCom";
} from "@/viewmodels/admin/qualification.models";
import { http } from "@/serverCom";
import type { AxiosResponse } from "axios";
export const useQualificationStore = defineStore("qualification", {

6
src/stores/admin/role.ts
View file

@ -1,7 +1,7 @@
import { defineStore } from "pinia";
import type { RoleViewModel } from "../../viewmodels/admin/role.models";
import { http } from "../../serverCom";
import type { PermissionObject } from "../../types/permissionTypes";
import type { RoleViewModel } from "@/viewmodels/admin/role.models";
import { http } from "@/serverCom";
import type { PermissionObject } from "@/types/permissionTypes";
import type { AxiosResponse } from "axios";
export const useRoleStore = defineStore("role", {

6
src/stores/admin/user.ts
View file

@ -1,7 +1,7 @@
import { defineStore } from "pinia";
import type { UpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
import { http } from "../../serverCom";
import type { PermissionObject } from "../../types/permissionTypes";
import type { UpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
import { http } from "@/serverCom";
import type { PermissionObject } from "@/types/permissionTypes";
import type { AxiosResponse } from "axios";
export const useUserStore = defineStore("user", {

2
src/templates/Main.vue
View file

@ -25,7 +25,7 @@
<script setup lang="ts">
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import { useNavigationStore } from "../stores/admin/navigation";
import { useNavigationStore } from "@/stores/admin/navigation";
</script>
<script lang="ts">

22
src/viewmodels/admin/communication.models.ts
View file

@ -12,3 +12,25 @@ export interface CommunicationViewModel {
type: CommunicationTypeViewModel;
isNewsletterMain: boolean;
}
export interface CreateCommunicationViewModel {
preferred: boolean;
mobile: string;
email: string;
city: string;
street: string;
streetNumber: number;
streetNumberAddition: string;
typeId: number;
}
export interface UpdateCommunicationViewModel {
id: number;
preferred: boolean;
mobile: string;
email: string;
city: string;
street: string;
streetNumber: number;
streetNumberAddition: string;
}

22
src/viewmodels/admin/member.models.ts
View file

@ -1,4 +1,5 @@
import { Salutation } from "../../enums/salutation";
import { Salutation } from "@/enums/salutation";
import type { CommunicationViewModel } from "./communication.models";
import type { MembershipViewModel } from "./membership.models";
export interface MemberViewModel {
@ -10,4 +11,23 @@ export interface MemberViewModel {
birthdate: Date;
firstMembershipEntry?: MembershipViewModel;
lastMembershipEntry?: MembershipViewModel;
sendNewsletter?: CommunicationViewModel;
preferredCommunication?: Array<CommunicationViewModel>;
}
export interface CreateMemberViewModel {
salutation: Salutation;
firstname: string;
lastname: string;
nameaffix: string;
birthdate: Date;
}
export interface UpdateMemberViewModel {
id: number;
salutation: Salutation;
firstname: string;
lastname: string;
nameaffix: string;
birthdate: Date;
}

15
src/viewmodels/admin/memberAward.models.ts
View file

@ -5,3 +5,18 @@ export interface MemberAwardViewModel {
date: Date;
award: string;
}
export interface CreateMemberAwardViewModel {
given: boolean;
note?: string;
date: Date;
awardId: number;
}
export interface UpdateMemberAwardViewModel {
id: number;
given: boolean;
note?: string;
date: Date;
awardId: number;
}

15
src/viewmodels/admin/memberExecutivePosition.models.ts
View file

@ -5,3 +5,18 @@ export interface MemberExecutivePositionViewModel {
end?: Date;
executivePosition: string;
}
export interface CreateMemberExecutivePositionViewModel {
note?: string;
start: Date;
end?: Date;
executivePositionId: number;
}
export interface UpdateMemberExecutivePositionViewModel {
id: number;
note?: string;
start: Date;
end?: Date;
executivePositionId: number;
}

17
src/viewmodels/admin/memberQualification.models.ts
View file

@ -6,3 +6,20 @@ export interface MemberQualificationViewModel {
terminationReason?: string;
qualification: string;
}
export interface CreateMemberQualificationViewModel {
note?: string;
start: Date;
end?: Date;
terminationReason?: string;
qualificationId: string;
}
export interface UpdateMemberQualificationViewModel {
id: number;
note?: string;
start: Date;
end?: Date;
terminationReason?: string;
qualificationId: string;
}

17
src/viewmodels/admin/membership.models.ts
View file

@ -6,3 +6,20 @@ export interface MembershipViewModel {
terminationReason?: string;
status: string;
}
export interface CreateMembershipViewModel {
internalId?: string;
start: Date;
end?: Date;
terminationReason?: string;
statusId: number;
}
export interface UpdateMembershipViewModel {
id: number;
internalId?: string;
start: Date;
end?: Date;
terminationReason?: string;
statusId: number;
}

2
src/viewmodels/admin/role.models.ts
View file

@ -1,4 +1,4 @@
import { PermissionObject } from "../../type/permissionTypes";
import { PermissionObject } from "@/type/permissionTypes";
export interface RoleViewModel {
id: number;

2
src/viewmodels/admin/user.models.ts
View file

@ -1,4 +1,4 @@
import { PermissionObject } from "@/type/permissionTypes";
import type { PermissionObject } from "@/types/permissionTypes";
import type { RoleViewModel } from "./role.models";
export interface UserViewModel {

2
src/views/Login.vue
View file

@ -43,7 +43,7 @@ import { defineComponent } from "vue";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";
import { resetAllPiniaStores } from "../helpers/piniaReset";
import { resetAllPiniaStores } from "@/helpers/piniaReset";
</script>
<script lang="ts">

4
src/views/admin/View.vue
View file

@ -27,8 +27,8 @@ import { useNavigationStore } from "@/stores/admin/navigation";
import SidebarLayout from "@/layouts/Sidebar.vue";
import SidebarTemplate from "@/templates/Sidebar.vue";
import RoutingLink from "@/components/admin/RoutingLink.vue";
import { useAbilityStore } from "../../stores/ability";
import RouterView from "../RouterView.vue";
import { useAbilityStore } from "@/stores/ability";
import { RouterView } from "vue-router";
</script>
<script lang="ts">

31
src/views/admin/members/MemberAwards.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ memberAwards }}</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">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 { useMemberAwardStore } from "@/stores/admin/memberAward";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useMemberAwardStore, ["memberAwards", "loading"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useMemberAwardStore, ["fetchMemberAwardsForMember"]),
fetchItem() {
this.fetchMemberAwardsForMember();
},
},
});
</script>

34
src/views/admin/members/MemberCommunication.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ communications }}</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">laden fehlgeschlagen</p>
</div>
</template>
<script setup lang="ts">
import { defineComponent } 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";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useCommunicationStore, ["communications", "loading"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useCommunicationStore, ["fetchCommunicationsForMember"]),
fetchItem() {
this.fetchCommunicationsForMember();
},
},
});
</script>

187
src/views/admin/members/MemberEdit.vue Normal file
View file

@ -0,0 +1,187 @@
<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">
Mitglied {{ origin?.lastname }}, {{ origin?.firstname }}
{{ origin?.nameaffix ? `- ${origin?.nameaffix}` : "" }}
</h1>
</div>
</template>
<template #main>
<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"
>
<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>
</template>
</MainTemplate>
</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: {
id: String,
},
data() {
return {
loading: "loading" as "loading" | "fetched" | "failed",
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
origin: null as null | MemberViewModel,
member: null as null | MemberViewModel,
timeout: null as any,
salutations: [] as Array<string>,
};
},
computed: {
canSaveOrReset(): boolean {
return isEqual(this.origin, this.member);
},
},
mounted() {
this.fetchItem();
this.salutations = Object.values(Salutation);
},
beforeUnmount() {
try {
clearTimeout(this.timeout);
} catch (error) {}
},
methods: {
...mapActions(useMemberStore, ["fetchMemberById", "updateActiveMember"]),
resetForm() {
this.member = cloneDeep(this.origin);
},
fetchItem() {
this.fetchMemberById(parseInt(this.id ?? ""))
.then((result) => {
this.member = result.data;
this.origin = cloneDeep(result.data);
this.loading = "fetched";
})
.catch((err) => {
this.loading = "failed";
});
},
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>

31
src/views/admin/members/MemberExecutivePositions.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ memberExecutivePositions }}</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">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 { useMemberExecutivePositionStore } from "@/stores/admin/memberExecutivePosition";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useMemberExecutivePositionStore, ["memberExecutivePositions", "loading"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useMemberExecutivePositionStore, ["fetchMemberExecutivePositionsForMember"]),
fetchItem() {
this.fetchMemberExecutivePositionsForMember();
},
},
});
</script>

28
src/views/admin/members/MemberOverview.vue Normal file
View file

@ -0,0 +1,28 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ activeMemberObj }}</p>
<Spinner v-if="loadingActive == 'loading'" class="mx-auto" />
<p v-else-if="loadingActive == 'failed'">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({
computed: {
...mapState(useMemberStore, ["activeMemberObj", "loadingActive"]),
},
mounted() {
this.fetchMemberByActiveId();
},
methods: {
...mapActions(useMemberStore, ["fetchMemberByActiveId"]),
},
});
</script>

31
src/views/admin/members/MemberQualifications.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ memberQualifications }}</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">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 { useMemberQualificationStore } from "@/stores/admin/memberQualification";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useMemberQualificationStore, ["memberQualifications", "loading"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useMemberQualificationStore, ["fetchMemberQualificationsForMember"]),
fetchItem() {
this.fetchMemberQualificationsForMember();
},
},
});
</script>

74
src/views/admin/members/MemberRouting.vue Normal file
View file

@ -0,0 +1,74 @@
<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">
Mitglied {{ activeMemberObj?.lastname }}, {{ activeMemberObj?.firstname }}
{{ activeMemberObj?.nameaffix ? `- ${activeMemberObj?.nameaffix}` : "" }}
</h1>
</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 { defineComponent } 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";
</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: "Qualificationen" },
{ route: "admin-club-member-positions", title: "Vereinsämter" },
],
};
},
computed: {
...mapState(useMemberStore, ["activeMemberObj"]),
},
mounted() {
this.fetchMemberByActiveId();
},
methods: {
...mapActions(useMemberStore, ["fetchMemberByActiveId"]),
},
});
</script>

31
src/views/admin/members/Membership.vue Normal file
View file

@ -0,0 +1,31 @@
<template>
<div class="flex flex-col h-full w-full overflow-y-auto">
<p>{{ memberships }}</p>
<Spinner v-if="loading == 'loading'" class="mx-auto" />
<p v-else-if="loading == 'failed'">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 { useMembershipStore } from "@/stores/admin/membership";
</script>
<script lang="ts">
export default defineComponent({
computed: {
...mapState(useMembershipStore, ["memberships", "loading"]),
},
mounted() {
this.fetchItem();
},
methods: {
...mapActions(useMembershipStore, ["fetchMembershipsForMember"]),
fetchItem() {
this.fetchMembershipsForMember();
},
},
});
</script>

2
src/views/admin/settings/AwardEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/settings/CommunicationTypeEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/settings/ExecutivePositionEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/settings/MembershipStatusEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/settings/QualificationEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/user/Role.vue
View file

@ -22,7 +22,7 @@
import { defineAsyncComponent, defineComponent, markRaw } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useRoleStore } from "../../../stores/admin/role";
import { useRoleStore } from "@/stores/admin/role";
import RoleListItem from "@/components/admin/user/role/RoleListItem.vue";
import { useModalStore } from "@/stores/modal";
</script>

4
src/views/admin/user/RoleEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@ -40,7 +40,7 @@
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useRoleStore } from "../../../stores/admin/role";
import { useRoleStore } from "@/stores/admin/role";
import Spinner from "@/components/Spinner.vue";
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
import FailureXMark from "@/components/FailureXMark.vue";

4
src/views/admin/user/RoleEditPermission.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
@ -25,7 +25,7 @@
import { defineComponent } from "vue";
import { mapState, mapActions } from "pinia";
import MainTemplate from "@/templates/Main.vue";
import { useRoleStore } from "../../../stores/admin/role";
import { useRoleStore } from "@/stores/admin/role";
import Permission from "@/components/admin/Permission.vue";
import Spinner from "@/components/Spinner.vue";
import type { PermissionObject } from "@/types/permissionTypes";

2
src/views/admin/user/UserEdit.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/user/UserEditPermission.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">

2
src/views/admin/user/UserEditRoles.vue
View file

@ -1,7 +1,7 @@
<template>
<MainTemplate>
<template #headerInsert>
<RouterLink to="../" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
<RouterLink to="@/" class="text-primary">zurück zur Liste (abbrechen)</RouterLink>
</template>
<template #topBar>
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">