Merge branch 'milestone/ff-admin-unit' into unit/#70-build-ui-demo
# Conflicts: # package-lock.json # package.json # src/router/club/newsletterGuard.ts # src/router/club/protocolGuard.ts # src/router/index.ts # src/types/permissionTypes.ts # src/views/admin/club/newsletter/NewsletterRecipients.vue
This commit is contained in:
commit
bdc139f37f
107 changed files with 4984 additions and 1742 deletions
|
@ -18,22 +18,22 @@
|
|||
<div class="flex flex-row border border-white rounded-md overflow-hidden">
|
||||
<EyeIcon
|
||||
class="w-5 h-5 p-1 box-content cursor-pointer"
|
||||
:class="_can(permissionUpdate, 'read', section) ? 'bg-success' : ''"
|
||||
:class="_canSection(permissionUpdate, 'read', section) ? 'bg-success' : ''"
|
||||
@click="togglePermission('read', section)"
|
||||
/>
|
||||
<PlusIcon
|
||||
class="w-5 h-5 p-1 box-content cursor-pointer"
|
||||
:class="_can(permissionUpdate, 'create', section) ? 'bg-success' : ''"
|
||||
:class="_canSection(permissionUpdate, 'create', section) ? 'bg-success' : ''"
|
||||
@click="togglePermission('create', section)"
|
||||
/>
|
||||
<PencilIcon
|
||||
class="w-5 h-5 p-1 box-content cursor-pointer"
|
||||
:class="_can(permissionUpdate, 'update', section) ? 'bg-success' : ''"
|
||||
:class="_canSection(permissionUpdate, 'update', section) ? 'bg-success' : ''"
|
||||
@click="togglePermission('update', section)"
|
||||
/>
|
||||
<TrashIcon
|
||||
class="w-5 h-5 p-1 box-content cursor-pointer"
|
||||
:class="_can(permissionUpdate, 'delete', section) ? 'bg-success' : ''"
|
||||
:class="_canSection(permissionUpdate, 'delete', section) ? 'bg-success' : ''"
|
||||
@click="togglePermission('delete', section)"
|
||||
/>
|
||||
</div>
|
||||
|
@ -132,7 +132,7 @@ export default defineComponent({
|
|||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["_can"]),
|
||||
...mapState(useAbilityStore, ["_can", "_canSection"]),
|
||||
canSaveOrReset(): boolean {
|
||||
return isEqual(this.permissions, this.permissionUpdate);
|
||||
},
|
||||
|
|
|
@ -69,7 +69,15 @@
|
|||
<input type="date" id="birthdate" required />
|
||||
</div>
|
||||
<div>
|
||||
<label for="internalId">Interne ID (optional)</label>
|
||||
<div class="flex flex-row">
|
||||
<label for="internalId" class="grow">
|
||||
Interne ID (optional{{ lastId ? ` - zuletzte verwendet: ${lastId}` : "" }})
|
||||
</label>
|
||||
<div title="Es empfiehlt sich, die Interne Id mit Platzhaltern wie '0' vorne aufzufüllen.">
|
||||
<InformationCircleIcon class="h-5 w-5" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="text" id="internalId" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
|
@ -101,8 +109,9 @@ import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } f
|
|||
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
||||
import { useMemberStore } from "@/stores/admin/club/member/member";
|
||||
import type { CreateMemberViewModel } from "@/viewmodels/admin/club/member/member.models";
|
||||
import { useSalutationStore } from "../../../../stores/admin/configuration/salutation";
|
||||
import type { SalutationViewModel } from "../../../../viewmodels/admin/configuration/salutation.models";
|
||||
import { useSalutationStore } from "@/stores/admin/configuration/salutation";
|
||||
import type { SalutationViewModel } from "@/viewmodels/admin/configuration/salutation.models";
|
||||
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
@ -112,6 +121,7 @@ export default defineComponent({
|
|||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
selectedSalutation: null as null | SalutationViewModel,
|
||||
lastId: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
@ -119,6 +129,11 @@ export default defineComponent({
|
|||
},
|
||||
mounted() {
|
||||
this.fetchSalutations();
|
||||
this.fetchLastInternalId()
|
||||
.then((res) => {
|
||||
this.lastId = res.data;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
|
@ -127,7 +142,7 @@ export default defineComponent({
|
|||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useMemberStore, ["createMember"]),
|
||||
...mapActions(useMemberStore, ["createMember", "fetchLastInternalId"]),
|
||||
...mapActions(useSalutationStore, ["fetchSalutations"]),
|
||||
triggerCreate(e: any) {
|
||||
if (!this.selectedSalutation) return;
|
||||
|
|
|
@ -36,8 +36,8 @@ import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
|||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useProtocolStore } from "@/stores/admin/club/protocol/protocol";
|
||||
import type { CreateProtocolViewModel } from "@/viewmodels/admin/club/protocol/protocol.models";
|
||||
import { useNewsletterStore } from "../../../../stores/admin/club/newsletter/newsletter";
|
||||
import type { CreateNewsletterViewModel } from "../../../../viewmodels/admin/club/newsletter/newsletter.models";
|
||||
import { useNewsletterStore } from "@/stores/admin/club/newsletter/newsletter";
|
||||
import type { CreateNewsletterViewModel } from "@/viewmodels/admin/club/newsletter/newsletter.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -3,13 +3,13 @@
|
|||
<div class="bg-primary p-2 text-white flex flex-row justify-between items-center">
|
||||
<p>Newsletter bei Type "{{ comType.type }}" versenden/exportieren als</p>
|
||||
<div v-if="can('create', 'configuration', 'newsletter_config')" class="flex flex-row justify-end w-16">
|
||||
<button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="speichern">
|
||||
<button v-if="status == null" type="submit" class="p-0! h-fit! w-fit!" title="Änderung speichern">
|
||||
<ArchiveBoxArrowDownIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
|
||||
</button>
|
||||
<Spinner v-else-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
<button type="button" class="p-0! h-fit! w-fit!" title="zurücksetzen" @click="resetForm">
|
||||
<button type="button" class="p-0! h-fit! w-fit!" title="Änderung zurücksetzen" @click="resetForm">
|
||||
<ArchiveBoxXMarkIcon class="w-5 h-5 p-1 box-content pointer-events-none" />
|
||||
</button>
|
||||
</div>
|
||||
|
@ -36,7 +36,7 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { NewsletterConfigType } from "@/enums/newsletterConfigType";
|
||||
import { NewsletterConfigEnum } from "@/enums/newsletterConfigEnum";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { CommunicationTypeViewModel } from "@/viewmodels/admin/configuration/communicationType.models";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
|
@ -62,7 +62,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
mounted() {
|
||||
this.configs = Object.values(NewsletterConfigType);
|
||||
this.configs = Object.values(NewsletterConfigEnum);
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
|
|
|
@ -20,7 +20,7 @@ import { mapState, mapActions } from "pinia";
|
|||
import { ArchiveBoxArrowDownIcon, ArrowDownTrayIcon, BarsArrowUpIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useBackupStore } from "../../../../stores/admin/management/backup";
|
||||
import { useBackupStore } from "@/stores/admin/management/backup";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -57,9 +57,9 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useBackupStore } from "@/stores/admin/management/backup";
|
||||
import type { BackupRestoreViewModel } from "../../../../viewmodels/admin/management/backup.models";
|
||||
import type { BackupRestoreViewModel } from "@/viewmodels/admin/management/backup.models";
|
||||
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import { backupSections, type BackupSection } from "../../../../types/backupTypes";
|
||||
import { backupSections, type BackupSection } from "@/types/backupTypes";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
67
src/components/admin/management/setting/AppSetting.vue
Normal file
67
src/components/admin/management/setting/AppSetting.vue
Normal file
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<BaseSetting title="Anwendungs Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||||
<div class="w-full">
|
||||
<label for="custom_login_message">Nachricht unter Login (optional)</label>
|
||||
<input
|
||||
id="custom_login_message"
|
||||
type="text"
|
||||
:readonly="!enableEdit"
|
||||
:value="appSettings['app.custom_login_message']"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full flex flex-row items-center gap-2">
|
||||
<div
|
||||
v-if="!enableEdit"
|
||||
class="border-2 border-gray-500 rounded-sm"
|
||||
:class="appSettings['app.show_link_to_calendar'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
|
||||
>
|
||||
<CheckIcon v-if="appSettings['app.show_link_to_calendar']" class="h-2.5 w-2.5 stroke-4 text-white" />
|
||||
</div>
|
||||
<input v-else id="show_link_to_calendar" type="checkbox" :checked="appSettings['app.show_link_to_calendar']" />
|
||||
<label for="show_link_to_calendar">Kalender-Link anzeigen</label>
|
||||
</div>
|
||||
</BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import { CheckIcon } from "@heroicons/vue/24/outline";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { defineComponent } from "vue";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
enableEdit: false as boolean,
|
||||
status: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
appSettings() {
|
||||
return this.readByTopic("app");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings"]),
|
||||
submit(e: any) {
|
||||
const formData = e.target.elements;
|
||||
return this.updateSettings([
|
||||
{
|
||||
key: "app.custom_login_message",
|
||||
value: formData.custom_login_message.value || null,
|
||||
},
|
||||
{
|
||||
key: "app.show_link_to_calendar",
|
||||
value: formData.show_link_to_calendar.checked || null,
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
53
src/components/admin/management/setting/BackupSetting.vue
Normal file
53
src/components/admin/management/setting/BackupSetting.vue
Normal file
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<BaseSetting title="Backup Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||||
<div class="w-full">
|
||||
<label for="copies">Anzahl paralleler Backups (optional)</label>
|
||||
<input id="copies" type="text" :readonly="!enableEdit" :value="backupSettings['backup.copies']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="interval">Intervall zur Backup-Erstellung (optional)</label>
|
||||
<input id="interval" type="text" :readonly="!enableEdit" :value="backupSettings['backup.interval']" /></div
|
||||
></BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { defineComponent } from "vue";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
enableEdit: false as boolean,
|
||||
status: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
backupSettings() {
|
||||
return this.readByTopic("backup");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings"]),
|
||||
submit(e: any) {
|
||||
const formData = e.target.elements;
|
||||
return this.updateSettings([
|
||||
{
|
||||
key: "backup.copies",
|
||||
value: formData.copies.value || null,
|
||||
},
|
||||
{
|
||||
key: "backup.interval",
|
||||
value: formData.interval.value || null,
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
87
src/components/admin/management/setting/BaseSetting.vue
Normal file
87
src/components/admin/management/setting/BaseSetting.vue
Normal file
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<form ref="form" class="flex flex-col w-full" @submit.prevent="submit">
|
||||
<div class="flex flex-row gap-2 items-center border-l-3 border-l-primary p-2 rounded-t-lg bg-red-200">
|
||||
<p class="text-lg font-semibold grow">{{ title }}</p>
|
||||
<Spinner v-if="status == 'loading'" />
|
||||
<SuccessCheckmark v-else-if="status == 'success'" />
|
||||
<FailureXMark v-else-if="status == 'failed'" />
|
||||
<div v-else-if="enableEdit" class="flex flex-row gap-2">
|
||||
<button type="submit" class="w-fit! h-fit! p-0!">
|
||||
<CheckIcon class="h-5 w-5 cursor-pointer" />
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
class="w-fit! h-fit! p-0!"
|
||||
@click="
|
||||
enableEdit = false;
|
||||
$emit('reset');
|
||||
"
|
||||
>
|
||||
<XMarkIcon class="h-5 w-5 cursor-pointer" />
|
||||
</button>
|
||||
</div>
|
||||
<PencilSquareIcon
|
||||
v-else-if="can('create', 'management', 'setting')"
|
||||
class="h-5 w-5 cursor-pointer"
|
||||
@click="enableEdit = true"
|
||||
/>
|
||||
</div>
|
||||
<div class="border-l-3 border-l-primary p-2 rounded-b-lg">
|
||||
<slot :enableEdit="enableEdit"></slot>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { CheckIcon, PencilSquareIcon, XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { defineComponent } from "vue";
|
||||
import type { PropType } from "vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
submitFunction: {
|
||||
type: Function as PropType<(e: any) => Promise<any>>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ["reset"],
|
||||
data() {
|
||||
return {
|
||||
enableEdit: false as boolean,
|
||||
status: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
submit(e: any) {
|
||||
this.status = "loading";
|
||||
this.submitFunction(e)
|
||||
.then(() => {
|
||||
this.status = "success";
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = "failed";
|
||||
})
|
||||
.finally(() => {
|
||||
setTimeout(() => {
|
||||
if (this.status == "success") this.enableEdit = false;
|
||||
this.status = undefined;
|
||||
}, 2000);
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
152
src/components/admin/management/setting/ClubImageSetting.vue
Normal file
152
src/components/admin/management/setting/ClubImageSetting.vue
Normal file
|
@ -0,0 +1,152 @@
|
|||
<template>
|
||||
<BaseSetting title="Vereins-Auftritt Einstellungen" :submit-function="submit" v-slot="{ enableEdit }" @reset="reset">
|
||||
<div class="w-full">
|
||||
<p>Vereins-Icon</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<AppIcon v-if="icon != '' && !overwriteIcon" class="h-10! max-w-full mx-auto" />
|
||||
<div
|
||||
v-else-if="!overwriteIcon"
|
||||
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
|
||||
:class="{ 'cursor-pointer': enableEdit }"
|
||||
@click="enableEdit ? ($refs.icon as HTMLInputElement).click() : null"
|
||||
>
|
||||
Kein eigenes Icon ausgewählt
|
||||
</div>
|
||||
<img ref="icon_img" class="hidden w-full h-10 object-contain" />
|
||||
<XMarkIcon
|
||||
v-if="enableEdit && (icon != '' || overwriteIcon)"
|
||||
class="h-5 w-5 cursor-pointer"
|
||||
@click="resetImage('icon')"
|
||||
/>
|
||||
</div>
|
||||
<input class="hidden!" type="file" ref="icon" accept="image/png" @change="previewImage('icon')" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<p>Vereins-Logo</p>
|
||||
<div class="flex flex-row gap-2">
|
||||
<AppLogo v-if="logo != '' && !overwriteLogo" class="h-10! max-w-full mx-auto" />
|
||||
<div
|
||||
v-else-if="!overwriteLogo"
|
||||
class="flex h-10 w-full border-2 border-gray-300 rounded-md items-center justify-center text-sm"
|
||||
:class="{ 'cursor-pointer': enableEdit }"
|
||||
@click="enableEdit ? ($refs.logo as HTMLInputElement).click() : null"
|
||||
>
|
||||
Kein eigenes Logo ausgewählt
|
||||
</div>
|
||||
<img ref="logo_img" class="hidden w-full h-10 object-contain" />
|
||||
<XMarkIcon
|
||||
v-if="enableEdit && (logo != '' || overwriteLogo)"
|
||||
class="h-5 w-5 cursor-pointer"
|
||||
@click="resetImage('logo')"
|
||||
/>
|
||||
</div>
|
||||
<input class="hidden!" type="file" ref="logo" accept="image/png" @change="previewImage('logo')" />
|
||||
</div>
|
||||
</BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import AppIcon from "@/components/AppIcon.vue";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import type { SettingString } from "@/types/settingTypes";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
import { XMarkIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
watch: {
|
||||
clubSettings() {
|
||||
this.reset();
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
logo: "",
|
||||
icon: "",
|
||||
overwriteIcon: false as boolean,
|
||||
overwriteLogo: false as boolean,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
clubSettings() {
|
||||
return this.readByTopic("club");
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.reset();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
|
||||
reset() {
|
||||
this.icon = this.clubSettings["club.icon"];
|
||||
this.overwriteIcon = false;
|
||||
(this.$refs.icon_img as HTMLImageElement).style.display = "none";
|
||||
(this.$refs.icon as HTMLInputElement).value = "";
|
||||
|
||||
this.logo = this.clubSettings["club.logo"];
|
||||
this.overwriteLogo = false;
|
||||
(this.$refs.logo_img as HTMLImageElement).style.display = "none";
|
||||
(this.$refs.logo as HTMLInputElement).value = "";
|
||||
},
|
||||
resetImage(inputname: "icon" | "logo") {
|
||||
if (inputname == "icon") {
|
||||
this.icon = "";
|
||||
this.overwriteIcon = false;
|
||||
(this.$refs.icon_img as HTMLImageElement).style.display = "none";
|
||||
(this.$refs.icon as HTMLInputElement).value = "";
|
||||
} else {
|
||||
this.logo = "";
|
||||
this.overwriteLogo = false;
|
||||
(this.$refs.logo_img as HTMLImageElement).style.display = "none";
|
||||
(this.$refs.logo as HTMLInputElement).value = "";
|
||||
}
|
||||
},
|
||||
previewImage(inputname: "icon" | "logo") {
|
||||
let input = this.$refs[inputname] as HTMLInputElement;
|
||||
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
|
||||
if (input.files && input.files[0]) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
previewElement.src = e.target?.result as string;
|
||||
previewElement.style.display = "block";
|
||||
};
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
|
||||
if (inputname == "icon") {
|
||||
this.overwriteIcon = true;
|
||||
} else {
|
||||
this.overwriteLogo = true;
|
||||
}
|
||||
} else {
|
||||
previewElement.src = "";
|
||||
previewElement.style.display = "none";
|
||||
}
|
||||
},
|
||||
submit(e: any) {
|
||||
return this.uploadImage([
|
||||
{
|
||||
key: "club.icon",
|
||||
value:
|
||||
(this.$refs.icon as HTMLInputElement).files?.[0] ??
|
||||
(this.icon != "" && !this.overwriteIcon ? "keep" : undefined),
|
||||
},
|
||||
{
|
||||
key: "club.logo",
|
||||
value:
|
||||
(this.$refs.logo as HTMLInputElement).files?.[0] ??
|
||||
(this.logo != "" && !this.overwriteLogo ? "keep" : undefined),
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
89
src/components/admin/management/setting/ClubSetting.vue
Normal file
89
src/components/admin/management/setting/ClubSetting.vue
Normal file
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<BaseSetting title="Vereins Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||||
<div class="w-full">
|
||||
<label for="clubname">Vereins-Name (optional)</label>
|
||||
<input id="clubname" type="text" :readonly="!enableEdit" :value="clubSettings['club.name']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="imprint">Vereins-Impressum Link (optional)</label>
|
||||
<input id="imprint" type="url" :readonly="!enableEdit" :value="clubSettings['club.imprint']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="privacy">Vereins-Datenschutz Link (optional)</label>
|
||||
<input id="privacy" type="url" :readonly="!enableEdit" :value="clubSettings['club.privacy']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="website">Vereins-Webseite Link (optional)</label>
|
||||
<input id="website" type="url" :readonly="!enableEdit" :value="clubSettings['club.website']" /></div
|
||||
></BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import AppIcon from "@/components/AppIcon.vue";
|
||||
import AppLogo from "@/components/AppLogo.vue";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import type { SettingString } from "@/types/settingTypes";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
overwriteIcon: false as boolean,
|
||||
overwriteLogo: false as boolean,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
clubSettings() {
|
||||
return this.readByTopic("club");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings", "uploadImage"]),
|
||||
previewImage(inputname: "icon" | "logo") {
|
||||
let input = this.$refs[inputname] as HTMLInputElement;
|
||||
let previewElement = this.$refs[inputname + "_img"] as HTMLImageElement;
|
||||
if (input.files && input.files[0]) {
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.onload = function (e) {
|
||||
previewElement.src = e.target?.result as string;
|
||||
previewElement.style.display = "block";
|
||||
};
|
||||
|
||||
reader.readAsDataURL(input.files[0]);
|
||||
} else {
|
||||
previewElement.src = "";
|
||||
previewElement.style.display = "none";
|
||||
}
|
||||
},
|
||||
submit(e: any) {
|
||||
const formData = e.target.elements;
|
||||
return this.updateSettings([
|
||||
{
|
||||
key: "club.name",
|
||||
value: formData.clubname.value || null,
|
||||
},
|
||||
{
|
||||
key: "club.imprint",
|
||||
value: formData.imprint.value || null,
|
||||
},
|
||||
{
|
||||
key: "club.privacy",
|
||||
value: formData.privacy.value || null,
|
||||
},
|
||||
{
|
||||
key: "club.website",
|
||||
value: formData.website.value || null,
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
100
src/components/admin/management/setting/MailSetting.vue
Normal file
100
src/components/admin/management/setting/MailSetting.vue
Normal file
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<BaseSetting title="E-Mail Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||||
<div class="w-full">
|
||||
<label for="email">Mailadresse</label>
|
||||
<input id="email" type="email" autocomplete="email" :readonly="!enableEdit" :value="mailSettings['mail.email']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="username">Benutzername</label>
|
||||
<input
|
||||
id="username"
|
||||
type="text"
|
||||
:readonly="!enableEdit"
|
||||
autocomplete="username"
|
||||
:value="mailSettings['mail.username']"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="host">Server-Host</label>
|
||||
<input id="host" type="text" :readonly="!enableEdit" :value="mailSettings['mail.host']" />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="port">Server-Port (25, 465, 587)</label>
|
||||
<input id="port" type="number" :readonly="!enableEdit" :value="mailSettings['mail.port']" />
|
||||
</div>
|
||||
<div class="w-full flex flex-row items-center gap-2">
|
||||
<div
|
||||
v-if="!enableEdit"
|
||||
class="border-2 border-gray-500 rounded-sm"
|
||||
:class="mailSettings['mail.secure'] ? 'bg-gray-500' : 'h-3.5 w-3.5'"
|
||||
>
|
||||
<CheckIcon v-if="mailSettings['mail.secure']" class="h-2.5 w-2.5 stroke-4 text-white" />
|
||||
</div>
|
||||
<input v-else id="secure" type="checkbox" :checked="mailSettings['mail.secure']" />
|
||||
<label for="secure">Secure-Verbindung (setzen bei Port 465)</label>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="password">Passwort (optional - leeres Feld setzt Passwort nicht zurück)</label>
|
||||
<input id="password" type="password" :readonly="!enableEdit" autocomplete="new-password" />
|
||||
</div>
|
||||
</BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { CheckIcon } from "@heroicons/vue/24/outline";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
enableEdit: false as boolean,
|
||||
status: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
mailSettings() {
|
||||
return this.readByTopic("mail");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings"]),
|
||||
submit(e: any) {
|
||||
const formData = e.target.elements;
|
||||
return this.updateSettings([
|
||||
{
|
||||
key: "mail.email",
|
||||
value: formData.email.value,
|
||||
},
|
||||
{
|
||||
key: "mail.username",
|
||||
value: formData.username.value,
|
||||
},
|
||||
{
|
||||
key: "mail.host",
|
||||
value: formData.host.value,
|
||||
},
|
||||
{
|
||||
key: "mail.port",
|
||||
value: formData.port.value,
|
||||
},
|
||||
{
|
||||
key: "mail.secure",
|
||||
value: formData.secure.checked,
|
||||
},
|
||||
{
|
||||
key: "mail.password",
|
||||
value: formData.password.value || null,
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
76
src/components/admin/management/setting/SessionSetting.vue
Normal file
76
src/components/admin/management/setting/SessionSetting.vue
Normal file
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<BaseSetting title="Login-Session Einstellungen" :submit-function="submit" v-slot="{ enableEdit }">
|
||||
<div class="w-full">
|
||||
<label for="jwt_expiration">JWT-Gültigkeitsdauer (optional)</label>
|
||||
<input
|
||||
id="jwt_expiration"
|
||||
type="text"
|
||||
:readonly="!enableEdit"
|
||||
:value="sessionSettings['session.jwt_expiration']"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="refresh_expiration">Session-Gültigkeitsdauer (optional)</label>
|
||||
<input
|
||||
id="refresh_expiration"
|
||||
type="text"
|
||||
:readonly="!enableEdit"
|
||||
:value="sessionSettings['session.refresh_expiration']"
|
||||
/>
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="pwa_refresh_expiration">Sesion-Gültigkeitsdauer PWA (optional)</label>
|
||||
<input
|
||||
id="pwa_refresh_expiration"
|
||||
type="text"
|
||||
:readonly="!enableEdit"
|
||||
:value="sessionSettings['session.pwa_refresh_expiration']"
|
||||
/></div
|
||||
></BaseSetting>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useSettingStore } from "@/stores/admin/management/setting";
|
||||
import { mapActions, mapState } from "pinia";
|
||||
import { defineComponent } from "vue";
|
||||
import BaseSetting from "./BaseSetting.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
enableEdit: false as boolean,
|
||||
status: undefined as undefined | "loading" | "success" | "failed",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useSettingStore, ["readByTopic"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
sessionSettings() {
|
||||
return this.readByTopic("session");
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useSettingStore, ["updateSettings"]),
|
||||
submit(e: any) {
|
||||
const formData = e.target.elements;
|
||||
return this.updateSettings([
|
||||
{
|
||||
key: "session.jwt_expiration",
|
||||
value: formData.jwt_expiration.value || null,
|
||||
},
|
||||
{
|
||||
key: "session.refresh_expiration",
|
||||
value: formData.refresh_expiration.value || null,
|
||||
},
|
||||
{
|
||||
key: "session.pwa_refresh_expiration",
|
||||
value: formData.pwa_refresh_expiration.value || null,
|
||||
},
|
||||
]);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
|
@ -39,7 +39,7 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useWebapiStore } from "@/stores/admin/management/webapi";
|
||||
import type { CreateWebapiViewModel } from "../../../../viewmodels/admin/management/webapi.models";
|
||||
import type { CreateWebapiViewModel } from "@/viewmodels/admin/management/webapi.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -28,7 +28,7 @@ import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/20/solid";
|
|||
import TextCopy from "@/components/TextCopy.vue";
|
||||
import { CalendarDaysIcon, InformationCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import { host } from "@/serverCom";
|
||||
import { useWebapiStore } from "../../../../stores/admin/management/webapi";
|
||||
import { useWebapiStore } from "@/stores/admin/management/webapi";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="p-2">
|
||||
<p v-if="respiratoryWearer.internalId">ID: {{ respiratoryWearer.member.internalId }}</p>
|
||||
<p v-if="respiratoryWearer.member.internalId">ID: {{ respiratoryWearer.member.internalId }}</p>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</template>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue