CRUD base types
This commit is contained in:
parent
3cdc64674b
commit
0dd5ad09a8
43 changed files with 2457 additions and 26 deletions
|
|
@ -4,8 +4,8 @@
|
|||
class="absolute inset-0 w-full h-full flex justify-center items-center bg-black/50 select-none z-50 p-2"
|
||||
v-show="show"
|
||||
@contextmenu.prevent
|
||||
@click="closeModal"
|
||||
>
|
||||
<!-- @click="closeModal" -->
|
||||
<component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
47
src/components/admin/settings/award/AwardListItem.vue
Normal file
47
src/components/admin/settings/award/AwardListItem.vue
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<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">
|
||||
<p>{{ award.award }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', 'settings', 'award')"
|
||||
:to="{ name: 'admin-settings-award-edit', params: { id: award.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'settings', 'award')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { AwardViewModel } from "@/viewmodels/admin/award.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
award: { type: Object as PropType<AwardViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/settings/award/DeleteAwardModal.vue"))),
|
||||
this.award.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
80
src/components/admin/settings/award/CreateAwardModal.vue
Normal file
80
src/components/admin/settings/award/CreateAwardModal.vue
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Auszeichnung erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="award">Bezeichnung</label>
|
||||
<input type="text" id="award" required />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
erstellen
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useAwardStore } from "@/stores/admin/award";
|
||||
import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAwardStore, ["createStatus"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useAwardStore, ["createAward", "resetStatus"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createAward: CreateOrUpdateAwardViewModel = {
|
||||
award: formData.award.value,
|
||||
};
|
||||
this.createAward(createAward);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/components/admin/settings/award/DeleteAwardModal.vue
Normal file
75
src/components/admin/settings/award/DeleteAwardModal.vue
Normal file
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Auszeichnung {{ award?.award }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import { useAwardStore } from "@/stores/admin/award";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useAwardStore, ["awards", "deleteStatus"]),
|
||||
award() {
|
||||
return this.awards.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useAwardStore, ["deleteAward", "resetStatus"]),
|
||||
triggerDelete() {
|
||||
this.deleteAward(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<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">
|
||||
<p>{{ communicationType.type }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', 'settings', 'communication')"
|
||||
:to="{ name: 'admin-settings-communication-edit', params: { id: communicationType.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'settings', 'communication')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col p-2">
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="min-w-16">Felder:</p>
|
||||
<div class="flex flex-row gap-2 flex-wrap grow">
|
||||
<p v-for="field in communicationType.fields" :key="field" class="px-1 border border-gray-300 rounded-md">
|
||||
{{ field }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { CommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
communicationType: { type: Object as PropType<CommunicationTypeViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/communicationType/DeleteCommunicationTypeModal.vue")
|
||||
)
|
||||
),
|
||||
this.communicationType.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Kommunikationsart erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="communicationType">Bezeichnung</label>
|
||||
<input type="text" id="communicationType" required />
|
||||
</div>
|
||||
<div>
|
||||
<Listbox v-model="selectedFields" multiple>
|
||||
<ListboxLabel>Felder</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"> {{ selectedFields.join(", ") }}</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="field in availableFields"
|
||||
:key="field"
|
||||
:value="field"
|
||||
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']">{{ field }}</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 class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
erstellen
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
|
||||
import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
selectedFields: [] as Array<string>,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchAvailableFields();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useCommunicationTypeStore, ["createStatus", "availableFields"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useCommunicationTypeStore, ["createCommunicationType", "fetchAvailableFields", "resetStatus"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
|
||||
type: formData.communicationType.value,
|
||||
fields: this.selectedFields,
|
||||
};
|
||||
this.createCommunicationType(createCommunicationType);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Kommunikationsart {{ communicationType?.type }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useCommunicationTypeStore, ["communicationTypes", "deleteStatus"]),
|
||||
communicationType() {
|
||||
return this.communicationTypes.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useCommunicationTypeStore, ["deleteCommunicationType", "resetStatus"]),
|
||||
triggerDelete() {
|
||||
this.deleteCommunicationType(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Vereinsamt erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="executivePosition">Bezeichnung</label>
|
||||
<input type="text" id="executivePosition" required />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
erstellen
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
|
||||
import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useExecutivePositionStore, ["createStatus"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useExecutivePositionStore, ["createExecutivePosition", "resetStatus"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
|
||||
position: formData.executivePosition.value,
|
||||
};
|
||||
this.createExecutivePosition(createExecutivePosition);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Vereinsamt {{ executivePosition?.position }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useExecutivePositionStore, ["executivePositions", "deleteStatus"]),
|
||||
executivePosition() {
|
||||
return this.executivePositions.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useExecutivePositionStore, ["deleteExecutivePosition", "resetStatus"]),
|
||||
triggerDelete() {
|
||||
this.deleteExecutivePosition(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<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">
|
||||
<p>{{ executivePosition.position }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', 'settings', 'executive_position')"
|
||||
:to="{ name: 'admin-settings-executive_position-edit', params: { id: executivePosition.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'settings', 'executive_position')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { ExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
executivePosition: { type: Object as PropType<ExecutivePositionViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/executivePosition/DeleteExecutivePositionModal.vue")
|
||||
)
|
||||
),
|
||||
this.executivePosition.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Mitgliedsstatus erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="membershipStatus">Bezeichnung</label>
|
||||
<input type="text" id="membershipStatus" required />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
erstellen
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
|
||||
import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMembershipStatusStore, ["createStatus"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useMembershipStatusStore, ["createMembershipStatus", "resetStatus"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
|
||||
status: formData.membershipStatus.value,
|
||||
};
|
||||
this.createMembershipStatus(createMembershipStatus);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Auszeichnung {{ membershipStatus?.status }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useMembershipStatusStore, ["membershipStatuss", "deleteStatus"]),
|
||||
membershipStatus() {
|
||||
return this.membershipStatuss.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useMembershipStatusStore, ["deleteMembershipStatus", "resetStatus"]),
|
||||
triggerDelete() {
|
||||
this.deleteMembershipStatus(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<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">
|
||||
<p>{{ membershipStatus.status }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', 'settings', 'membership_status')"
|
||||
:to="{ name: 'admin-settings-membership_status-edit', params: { id: membershipStatus.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'settings', 'membership_status')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { MembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
membershipStatus: { type: Object as PropType<MembershipStatusViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/membershipStatus/DeleteMembershipStatusModal.vue")
|
||||
)
|
||||
),
|
||||
this.membershipStatus.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Qualifikation erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreate">
|
||||
<div>
|
||||
<label for="qualification">Bezeichnung</label>
|
||||
<input type="text" id="qualification" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="description">Beschreibung (optional)</label>
|
||||
<input type="text" id="description" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
erstellen
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useQualificationStore } from "@/stores/admin/qualification";
|
||||
import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQualificationStore, ["createStatus"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useQualificationStore, ["createQualification", "resetStatus"]),
|
||||
triggerCreate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createQualification: CreateOrUpdateQualificationViewModel = {
|
||||
qualification: formData.qualification.value,
|
||||
description: formData.description.value,
|
||||
};
|
||||
this.createQualification(createQualification);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Qualifikation {{ qualification?.qualification }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="deleteStatus == 'loading' || deleteStatus?.status == 'success'" @click="triggerDelete">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import { useQualificationStore } from "@/stores/admin/qualification";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useQualificationStore, ["qualifications", "deleteStatus"]),
|
||||
qualification() {
|
||||
return this.qualifications.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useQualificationStore, ["deleteQualification", "resetStatus"]),
|
||||
triggerDelete() {
|
||||
this.deleteQualification(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<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">
|
||||
<p>{{ qualification.qualification }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', 'settings', 'qualification')"
|
||||
:to="{ name: 'admin-settings-qualification-edit', params: { id: qualification.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'settings', 'qualification')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col p-2">
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="min-w-16">Beschreibung:</p>
|
||||
<p class="grow overflow-hidden">{{ qualification.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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 { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import type { QualificationViewModel } from "@/viewmodels/admin/qualification.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
qualification: { type: Object as PropType<QualificationViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/settings/qualification/DeleteQualificationModal.vue"))
|
||||
),
|
||||
this.qualification.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
<button primary-outline @click="closeModal" :disabled="createStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,9 +39,28 @@ import { useRoleStore } from "@/stores/admin/role";
|
|||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
createStatus() {
|
||||
if (this.createStatus != "loading" && this.createStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRoleStore, ["createStatus"]),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,9 +38,28 @@ import { useRoleStore } from "@/stores/admin/role";
|
|||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useRoleStore, ["roles", "deleteStatus"]),
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
<button primary-outline @click="closeModal" :disabled="deleteStatus != null">abbrechen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -38,9 +38,28 @@ import { useUserStore } from "@/stores/admin/user";
|
|||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
deleteStatus() {
|
||||
if (this.deleteStatus != "loading" && this.deleteStatus?.status == "success") {
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useUserStore, ["users", "deleteStatus"]),
|
||||
|
|
|
|||
|
|
@ -109,31 +109,120 @@ const router = createRouter({
|
|||
},
|
||||
{
|
||||
path: "qualification",
|
||||
name: "admin-settings-qualification",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
name: "admin-settings-qualification-route",
|
||||
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"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-qualification-edit",
|
||||
component: () => import("../views/admin/settings/QualificationEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "qualification" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "award",
|
||||
name: "admin-settings-award",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
name: "admin-settings-award-route",
|
||||
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"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-award-edit",
|
||||
component: () => import("../views/admin/settings/AwardEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "award" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "executive-position",
|
||||
name: "admin-settings-executive_position",
|
||||
component: () => import("../views/admin/members/Overview.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"),
|
||||
meta: { type: "read", section: "settings", module: "executive_position" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "admin-settings-executive_position",
|
||||
component: () => import("../views/admin/settings/ExecutivePosition.vue"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-executive_position-edit",
|
||||
component: () => import("../views/admin/settings/ExecutivePositionEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "executive_position" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "communication",
|
||||
name: "admin-settings-communication",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
name: "admin-settings-communication-route",
|
||||
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"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-communication-edit",
|
||||
component: () => import("../views/admin/settings/CommunicationTypeEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "communication" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "status",
|
||||
name: "admin-settings-membership_status-route",
|
||||
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"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-settings-membership_status-edit",
|
||||
component: () => import("../views/admin/settings/MembershipStatusEdit.vue"),
|
||||
meta: { type: "update", section: "settings", module: "membership_status" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
90
src/stores/admin/award.ts
Normal file
90
src/stores/admin/award.ts
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type { CreateOrUpdateAwardViewModel, AwardViewModel } from "../../viewmodels/admin/award.models";
|
||||
import { http } from "../../serverCom";
|
||||
|
||||
export const useAwardStore = defineStore("award", {
|
||||
state: () => {
|
||||
return {
|
||||
awards: [] as Array<AwardViewModel>,
|
||||
award: null as null | AwardViewModel,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchAwards() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
.get("/admin/award")
|
||||
.then((result) => {
|
||||
this.awards = result.data;
|
||||
this.loadingAll = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingAll = "failed";
|
||||
});
|
||||
},
|
||||
fetchAwardById(id: number) {
|
||||
this.award = null;
|
||||
this.loadingSingle = "loading";
|
||||
http
|
||||
.get(`/admin/award/${id}`)
|
||||
.then((result) => {
|
||||
this.award = result.data;
|
||||
this.loadingSingle = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
createAward(award: CreateOrUpdateAwardViewModel) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
.post(`/admin/award`, {
|
||||
award: award.award,
|
||||
})
|
||||
.then((result) => {
|
||||
this.createStatus = { status: "success" };
|
||||
this.fetchAwards();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.createStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveAward(award: CreateOrUpdateAwardViewModel) {
|
||||
if (this.award == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/award/${this.award.id}`, {
|
||||
award: award.award,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchAwards();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteAward(award: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/award/${award}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchAwards();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
109
src/stores/admin/communicationType.ts
Normal file
109
src/stores/admin/communicationType.ts
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type {
|
||||
CreateOrUpdateCommunicationTypeViewModel,
|
||||
CommunicationTypeViewModel,
|
||||
} from "../../viewmodels/admin/communicationType.models";
|
||||
import { http } from "../../serverCom";
|
||||
|
||||
export const useCommunicationTypeStore = defineStore("communicationType", {
|
||||
state: () => {
|
||||
return {
|
||||
communicationTypes: [] as Array<CommunicationTypeViewModel>,
|
||||
communicationType: null as null | CommunicationTypeViewModel,
|
||||
availableFields: [] as Array<string>,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingFields: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchCommunicationTypes() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
.get("/admin/communicationType")
|
||||
.then((result) => {
|
||||
this.communicationTypes = result.data;
|
||||
this.loadingAll = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingAll = "failed";
|
||||
});
|
||||
},
|
||||
fetchCommunicationTypeById(id: number) {
|
||||
this.communicationType = null;
|
||||
this.loadingSingle = "loading";
|
||||
http
|
||||
.get(`/admin/communicationType/${id}`)
|
||||
.then((result) => {
|
||||
this.communicationType = result.data;
|
||||
this.loadingSingle = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
fetchAvailableFields() {
|
||||
this.loadingFields = "loading";
|
||||
http
|
||||
.get("/admin/communicationType/fields")
|
||||
.then((result) => {
|
||||
this.availableFields = result.data;
|
||||
this.loadingFields = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingFields = "failed";
|
||||
});
|
||||
},
|
||||
createCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
.post(`/admin/communicationType`, {
|
||||
communicationType: communicationType.type,
|
||||
fields: communicationType.fields,
|
||||
})
|
||||
.then((result) => {
|
||||
this.createStatus = { status: "success" };
|
||||
this.fetchCommunicationTypes();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.createStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveCommunicationType(communicationType: CreateOrUpdateCommunicationTypeViewModel) {
|
||||
if (this.communicationType == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/communicationType/${this.communicationType.id}`, {
|
||||
communicationType: communicationType.type,
|
||||
fields: communicationType.fields,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchCommunicationTypes();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteCommunicationType(communicationType: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/communicationType/${communicationType}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchCommunicationTypes();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
93
src/stores/admin/executivePosition.ts
Normal file
93
src/stores/admin/executivePosition.ts
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type {
|
||||
CreateOrUpdateExecutivePositionViewModel,
|
||||
ExecutivePositionViewModel,
|
||||
} from "../../viewmodels/admin/executivePosition.models";
|
||||
import { http } from "../../serverCom";
|
||||
|
||||
export const useExecutivePositionStore = defineStore("executivePosition", {
|
||||
state: () => {
|
||||
return {
|
||||
executivePositions: [] as Array<ExecutivePositionViewModel>,
|
||||
executivePosition: null as null | ExecutivePositionViewModel,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchExecutivePositions() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
.get("/admin/executivePosition")
|
||||
.then((result) => {
|
||||
this.executivePositions = result.data;
|
||||
this.loadingAll = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingAll = "failed";
|
||||
});
|
||||
},
|
||||
fetchExecutivePositionById(id: number) {
|
||||
this.executivePosition = null;
|
||||
this.loadingSingle = "loading";
|
||||
http
|
||||
.get(`/admin/executivePosition/${id}`)
|
||||
.then((result) => {
|
||||
this.executivePosition = result.data;
|
||||
this.loadingSingle = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
createExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
.post(`/admin/executivePosition`, {
|
||||
executivePosition: executivePosition.position,
|
||||
})
|
||||
.then((result) => {
|
||||
this.createStatus = { status: "success" };
|
||||
this.fetchExecutivePositions();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.createStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveExecutivePosition(executivePosition: CreateOrUpdateExecutivePositionViewModel) {
|
||||
if (this.executivePosition == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/executivePosition/${this.executivePosition.id}`, {
|
||||
executivePosition: executivePosition.position,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchExecutivePositions();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteExecutivePosition(executivePosition: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/executivePosition/${executivePosition}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchExecutivePositions();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
93
src/stores/admin/membershipStatus.ts
Normal file
93
src/stores/admin/membershipStatus.ts
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type {
|
||||
CreateOrUpdateMembershipStatusViewModel,
|
||||
MembershipStatusViewModel,
|
||||
} from "../../viewmodels/admin/membershipStatus.models";
|
||||
import { http } from "../../serverCom";
|
||||
|
||||
export const useMembershipStatusStore = defineStore("membershipStatus", {
|
||||
state: () => {
|
||||
return {
|
||||
membershipStatuss: [] as Array<MembershipStatusViewModel>,
|
||||
membershipStatus: null as null | MembershipStatusViewModel,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchMembershipStatuss() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
.get("/admin/membershipStatus")
|
||||
.then((result) => {
|
||||
this.membershipStatuss = result.data;
|
||||
this.loadingAll = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingAll = "failed";
|
||||
});
|
||||
},
|
||||
fetchMembershipStatusById(id: number) {
|
||||
this.membershipStatus = null;
|
||||
this.loadingSingle = "loading";
|
||||
http
|
||||
.get(`/admin/membershipStatus/${id}`)
|
||||
.then((result) => {
|
||||
this.membershipStatus = result.data;
|
||||
this.loadingSingle = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
createMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
.post(`/admin/membershipStatus`, {
|
||||
membershipStatus: membershipStatus.status,
|
||||
})
|
||||
.then((result) => {
|
||||
this.createStatus = { status: "success" };
|
||||
this.fetchMembershipStatuss();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.createStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveMembershipStatus(membershipStatus: CreateOrUpdateMembershipStatusViewModel) {
|
||||
if (this.membershipStatus == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/membershipStatus/${this.membershipStatus.id}`, {
|
||||
membershipStatus: membershipStatus.status,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchMembershipStatuss();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteMembershipStatus(membershipStatus: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/membershipStatus/${membershipStatus}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchMembershipStatuss();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -103,7 +103,10 @@ export const useNavigationStore = defineStore("navigation", {
|
|||
? [{ key: "executive_position", title: "Vereinsämter" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "communication")
|
||||
? [{ key: "communication", title: "Mitgliederdaten" }]
|
||||
? [{ key: "communication", title: "Kommunikationsarten" }]
|
||||
: []),
|
||||
...(abilityStore.can("read", "settings", "membership_status")
|
||||
? [{ key: "membership_status", title: "Mitgliedsstatus" }]
|
||||
: []),
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { defineStore } from "pinia";
|
||||
|
||||
export const usePermissionStore = defineStore("permission", {
|
||||
state: () => {
|
||||
return {
|
||||
sections: [],
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
logoutAccount() {},
|
||||
},
|
||||
});
|
||||
95
src/stores/admin/qualification.ts
Normal file
95
src/stores/admin/qualification.ts
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type {
|
||||
CreateOrUpdateQualificationViewModel,
|
||||
QualificationViewModel,
|
||||
} from "../../viewmodels/admin/qualification.models";
|
||||
import { http } from "../../serverCom";
|
||||
|
||||
export const useQualificationStore = defineStore("qualification", {
|
||||
state: () => {
|
||||
return {
|
||||
qualifications: [] as Array<QualificationViewModel>,
|
||||
qualification: null as null | QualificationViewModel,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchQualifications() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
.get("/admin/qualification")
|
||||
.then((result) => {
|
||||
this.qualifications = result.data;
|
||||
this.loadingAll = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingAll = "failed";
|
||||
});
|
||||
},
|
||||
fetchQualificationById(id: number) {
|
||||
this.qualification = null;
|
||||
this.loadingSingle = "loading";
|
||||
http
|
||||
.get(`/admin/qualification/${id}`)
|
||||
.then((result) => {
|
||||
this.qualification = result.data;
|
||||
this.loadingSingle = "fetched";
|
||||
})
|
||||
.catch((err) => {
|
||||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
createQualification(qualification: CreateOrUpdateQualificationViewModel) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
.post(`/admin/qualification`, {
|
||||
qualification: qualification.qualification,
|
||||
description: qualification.description,
|
||||
})
|
||||
.then((result) => {
|
||||
this.createStatus = { status: "success" };
|
||||
this.fetchQualifications();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.createStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveQualification(qualification: CreateOrUpdateQualificationViewModel) {
|
||||
if (this.qualification == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/qualification/${this.qualification.id}`, {
|
||||
qualification: qualification.qualification,
|
||||
description: qualification.description,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchQualifications();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteQualification(qualification: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/qualification/${qualification}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchQualifications();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
8
src/viewmodels/admin/award.models.ts
Normal file
8
src/viewmodels/admin/award.models.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export interface AwardViewModel {
|
||||
id: number;
|
||||
award: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateAwardViewModel {
|
||||
award: string;
|
||||
}
|
||||
10
src/viewmodels/admin/communicationType.models.ts
Normal file
10
src/viewmodels/admin/communicationType.models.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export interface CommunicationTypeViewModel {
|
||||
id: number;
|
||||
type: string;
|
||||
fields: Array<string>;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateCommunicationTypeViewModel {
|
||||
type: string;
|
||||
fields: Array<string>;
|
||||
}
|
||||
8
src/viewmodels/admin/executivePosition.models.ts
Normal file
8
src/viewmodels/admin/executivePosition.models.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export interface ExecutivePositionViewModel {
|
||||
id: number;
|
||||
position: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateExecutivePositionViewModel {
|
||||
position: string;
|
||||
}
|
||||
8
src/viewmodels/admin/membershipStatus.models.ts
Normal file
8
src/viewmodels/admin/membershipStatus.models.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export interface MembershipStatusViewModel {
|
||||
id: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateMembershipStatusViewModel {
|
||||
status: string;
|
||||
}
|
||||
10
src/viewmodels/admin/qualification.models.ts
Normal file
10
src/viewmodels/admin/qualification.models.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
export interface QualificationViewModel {
|
||||
id: number;
|
||||
qualification: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateQualificationViewModel {
|
||||
qualification: string;
|
||||
description: string | null;
|
||||
}
|
||||
|
|
@ -40,11 +40,9 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { getActivePinia } from "pinia";
|
||||
import { resetAllPiniaStores } from "../helpers/piniaReset";
|
||||
</script>
|
||||
|
||||
|
|
|
|||
48
src/views/admin/settings/Award.vue
Normal file
48
src/views/admin/settings/Award.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<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">Auszeichnungen</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<AwardListItem v-for="award in awards" :key="award.id" :award="award" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Auszeichnung erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useAwardStore } from "@/stores/admin/award";
|
||||
import AwardListItem from "@/components/admin/settings/award/AwardListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useAwardStore, ["awards"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchAwards();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useAwardStore, ["fetchAwards"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/settings/award/CreateAwardModal.vue")))
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
66
src/views/admin/settings/AwardEdit.vue
Normal file
66
src/views/admin/settings/AwardEdit.vue
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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">
|
||||
<h1 class="font-bold text-xl h-8">Auszeichnung {{ award?.award }} - Daten bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
|
||||
<div>
|
||||
<label for="award">Bezeichnung</label>
|
||||
<input type="text" id="award" required :value="award?.award" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useAwardStore } from "@/stores/admin/award";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import type { CreateOrUpdateAwardViewModel } from "@/viewmodels/admin/award.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAwardStore, ["award", "updateStatus", "loadingSingle"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchAwardById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useAwardStore, ["fetchAwardById", "updateActiveAward", "resetStatus"]),
|
||||
triggerUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let updateAward: CreateOrUpdateAwardViewModel = {
|
||||
award: formData.award.value,
|
||||
};
|
||||
this.updateActiveAward(updateAward);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
56
src/views/admin/settings/CommunicationType.vue
Normal file
56
src/views/admin/settings/CommunicationType.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<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">Kommunikationsarten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<CommunicationTypeListItem
|
||||
v-for="communicationType in communicationTypes"
|
||||
:key="communicationType.id"
|
||||
:communicationType="communicationType"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Kommunikationsart erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
|
||||
import CommunicationTypeListItem from "@/components/admin/settings/communicationType/CommunicationTypeListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useCommunicationTypeStore, ["communicationTypes"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchCommunicationTypes();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useCommunicationTypeStore, ["fetchCommunicationTypes"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/communicationType/CreateCommunicationTypeModal.vue")
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
130
src/views/admin/settings/CommunicationTypeEdit.vue
Normal file
130
src/views/admin/settings/CommunicationTypeEdit.vue
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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">
|
||||
<h1 class="font-bold text-xl h-8">Kommunikationsart {{ communicationType?.type }} - Daten bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
|
||||
<div>
|
||||
<label for="communicationType">Bezeichnung</label>
|
||||
<input type="text" id="communicationType" required :value="communicationType?.type" />
|
||||
</div>
|
||||
<div>
|
||||
<Listbox v-model="selectedFields" multiple>
|
||||
<ListboxLabel>Felder</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"> {{ selectedFields.join(", ") }}</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="field in availableFields"
|
||||
:key="field"
|
||||
:value="field"
|
||||
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']">{{ field }}</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 class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useCommunicationTypeStore } from "@/stores/admin/communicationType";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import type { CreateOrUpdateCommunicationTypeViewModel } from "@/viewmodels/admin/communicationType.models";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
|
||||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
selectedFields: [] as Array<string>,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
loadingSingle() {
|
||||
if (this.loadingSingle == "fetched") this.selectedFields = this.communicationType?.fields ?? [];
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useCommunicationTypeStore, ["communicationType", "updateStatus", "loadingSingle", "availableFields"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchAvailableFields();
|
||||
this.fetchCommunicationTypeById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useCommunicationTypeStore, [
|
||||
"fetchCommunicationTypeById",
|
||||
"updateActiveCommunicationType",
|
||||
"resetStatus",
|
||||
"fetchAvailableFields",
|
||||
]),
|
||||
triggerUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let updateCommunicationType: CreateOrUpdateCommunicationTypeViewModel = {
|
||||
type: formData.communicationType.value,
|
||||
fields: this.selectedFields,
|
||||
};
|
||||
this.updateActiveCommunicationType(updateCommunicationType);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
56
src/views/admin/settings/ExecutivePosition.vue
Normal file
56
src/views/admin/settings/ExecutivePosition.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<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">Vereinsämter</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<ExecutivePositionListItem
|
||||
v-for="executivePosition in executivePositions"
|
||||
:key="executivePosition.id"
|
||||
:executivePosition="executivePosition"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Vereinsämt erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
|
||||
import ExecutivePositionListItem from "@/components/admin/settings/executivePosition/ExecutivePositionListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useExecutivePositionStore, ["executivePositions"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchExecutivePositions();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useExecutivePositionStore, ["fetchExecutivePositions"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/executivePosition/CreateExecutivePositionModal.vue")
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
70
src/views/admin/settings/ExecutivePositionEdit.vue
Normal file
70
src/views/admin/settings/ExecutivePositionEdit.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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">
|
||||
<h1 class="font-bold text-xl h-8">Vereinsamt {{ executivePosition?.position }} - Daten bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
|
||||
<div>
|
||||
<label for="executivePosition">Bezeichnung</label>
|
||||
<input type="text" id="executivePosition" required :value="executivePosition?.position" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useExecutivePositionStore } from "@/stores/admin/executivePosition";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import type { CreateOrUpdateExecutivePositionViewModel } from "@/viewmodels/admin/executivePosition.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useExecutivePositionStore, ["executivePosition", "updateStatus", "loadingSingle"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchExecutivePositionById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useExecutivePositionStore, [
|
||||
"fetchExecutivePositionById",
|
||||
"updateActiveExecutivePosition",
|
||||
"resetStatus",
|
||||
]),
|
||||
triggerUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let updateExecutivePosition: CreateOrUpdateExecutivePositionViewModel = {
|
||||
position: formData.executivePosition.value,
|
||||
};
|
||||
this.updateActiveExecutivePosition(updateExecutivePosition);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
56
src/views/admin/settings/MembershipStatus.vue
Normal file
56
src/views/admin/settings/MembershipStatus.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<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">Mitgliedsstatus</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<MembershipStatusListItem
|
||||
v-for="membershipStatus in membershipStatuss"
|
||||
:key="membershipStatus.id"
|
||||
:membershipStatus="membershipStatus"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Mitgliedsstatus erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
|
||||
import MembershipStatusListItem from "@/components/admin/settings/membershipStatus/MembershipStatusListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useMembershipStatusStore, ["membershipStatuss"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchMembershipStatuss();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMembershipStatusStore, ["fetchMembershipStatuss"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(
|
||||
() => import("@/components/admin/settings/membershipStatus/CreateMembershipStatusModal.vue")
|
||||
)
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
70
src/views/admin/settings/MembershipStatusEdit.vue
Normal file
70
src/views/admin/settings/MembershipStatusEdit.vue
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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">
|
||||
<h1 class="font-bold text-xl h-8">Mitgliedsstatus {{ membershipStatus?.status }} - Daten bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
|
||||
<div>
|
||||
<label for="membershipStatus">Bezeichnung</label>
|
||||
<input type="text" id="membershipStatus" required :value="membershipStatus?.status" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useMembershipStatusStore } from "@/stores/admin/membershipStatus";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import type { CreateOrUpdateMembershipStatusViewModel } from "@/viewmodels/admin/membershipStatus.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useMembershipStatusStore, ["membershipStatus", "updateStatus", "loadingSingle"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchMembershipStatusById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useMembershipStatusStore, [
|
||||
"fetchMembershipStatusById",
|
||||
"updateActiveMembershipStatus",
|
||||
"resetStatus",
|
||||
]),
|
||||
triggerUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let updateMembershipStatus: CreateOrUpdateMembershipStatusViewModel = {
|
||||
status: formData.membershipStatus.value,
|
||||
};
|
||||
this.updateActiveMembershipStatus(updateMembershipStatus);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
54
src/views/admin/settings/Qualification.vue
Normal file
54
src/views/admin/settings/Qualification.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<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">Qualifikationen</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #diffMain>
|
||||
<div class="flex flex-col gap-4 grow pl-7">
|
||||
<div class="flex flex-col gap-2 grow overflow-y-scroll pr-7">
|
||||
<QualificationListItem
|
||||
v-for="qualification in qualifications"
|
||||
:key="qualification.id"
|
||||
:qualification="qualification"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-4">
|
||||
<button primary class="!w-fit" @click="openCreateModal">Qualifikation erstellen</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useQualificationStore } from "@/stores/admin/qualification";
|
||||
import QualificationListItem from "@/components/admin/settings/qualification/QualificationListItem.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
computed: {
|
||||
...mapState(useQualificationStore, ["qualifications"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchQualifications();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useQualificationStore, ["fetchQualifications"]),
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openCreateModal() {
|
||||
this.openModal(
|
||||
markRaw(
|
||||
defineAsyncComponent(() => import("@/components/admin/settings/qualification/CreateQualificationModal.vue"))
|
||||
)
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
71
src/views/admin/settings/QualificationEdit.vue
Normal file
71
src/views/admin/settings/QualificationEdit.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<MainTemplate>
|
||||
<template #headerInsert>
|
||||
<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">
|
||||
<h1 class="font-bold text-xl h-8">Qualifikation {{ qualification?.qualification }} - Daten bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<form v-else class="flex flex-col gap-4 py-2 w-full max-w-xl mx-auto" @submit.prevent="triggerUpdate">
|
||||
<div>
|
||||
<label for="qualification">Bezeichnung</label>
|
||||
<input type="text" id="qualification" required :value="qualification?.qualification" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="description">Beschreibung (optional)</label>
|
||||
<input type="text" id="description" :value="qualification?.description" />
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary type="submit" class="!w-fit" :disabled="updateStatus == 'loading'">speichern</button>
|
||||
<Spinner v-if="updateStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="updateStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="updateStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useQualificationStore } from "@/stores/admin/qualification";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import type { CreateOrUpdateQualificationViewModel } from "@/viewmodels/admin/qualification.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useQualificationStore, ["qualification", "updateStatus", "loadingSingle"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchQualificationById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useQualificationStore, ["fetchQualificationById", "updateActiveQualification", "resetStatus"]),
|
||||
triggerUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let updateQualification: CreateOrUpdateQualificationViewModel = {
|
||||
qualification: formData.qualification.value,
|
||||
description: formData.description.value,
|
||||
};
|
||||
this.updateActiveQualification(updateQualification);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Reference in a new issue