CRUD base types
This commit is contained in:
parent
3cdc64674b
commit
0dd5ad09a8
43 changed files with 2457 additions and 26 deletions
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…
Add table
Add a link
Reference in a new issue