change folder structure
This commit is contained in:
parent
662f36b3e2
commit
1d2e113c4b
140 changed files with 400 additions and 323 deletions
58
src/components/admin/management/backup/BackupListItem.vue
Normal file
58
src/components/admin/management/backup/BackupListItem.vue
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<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>{{ backup }}</p>
|
||||
<div class="flex flex-row">
|
||||
<div @click="downloadBackup">
|
||||
<ArrowDownTrayIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
<div v-if="can('admin', 'user', 'backup')" @click="openRestoreModal">
|
||||
<BarsArrowUpIcon 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 { 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";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
backup: { type: String, default: "" },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
...mapActions(useBackupStore, ["fetchBackupById"]),
|
||||
openRestoreModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/management/backup/RestoreBackupModal.vue"))),
|
||||
this.backup
|
||||
);
|
||||
},
|
||||
downloadBackup() {
|
||||
this.fetchBackupById(this.backup)
|
||||
.then((response) => {
|
||||
const fileURL = window.URL.createObjectURL(new Blob([JSON.stringify(response.data, null, 2)]));
|
||||
const fileLink = document.createElement("a");
|
||||
fileLink.href = fileURL;
|
||||
fileLink.setAttribute("download", this.backup);
|
||||
document.body.appendChild(fileLink);
|
||||
fileLink.click();
|
||||
fileLink.remove();
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
67
src/components/admin/management/backup/CreateBackupModal.vue
Normal file
67
src/components/admin/management/backup/CreateBackupModal.vue
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Backup erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateBackup">
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
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 { useBackupStore } from "@/stores/admin/management/backup";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useBackupStore, ["triggerBackupCreate"]),
|
||||
triggerCreateBackup(e: any) {
|
||||
this.status = "loading";
|
||||
this.triggerBackupCreate()
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
112
src/components/admin/management/backup/RestoreBackupModal.vue
Normal file
112
src/components/admin/management/backup/RestoreBackupModal.vue
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Backup {{ data }} laden</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateBackup">
|
||||
<!-- <div class="flex flex-row items-center gap-2">
|
||||
<input type="checkbox" id="partial" v-model="partial" />
|
||||
<label for="partial">Backup vollständig laden</label>
|
||||
</div>
|
||||
<div v-if="!partial">
|
||||
<label for="sections">Module zur Wiederherstellung auswählen:</label>
|
||||
<select id="sections" multiple>
|
||||
<option v-for="section in backupSections" :value="section">{{ section }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div v-if="!partial" class="flex flex-row items-center gap-2">
|
||||
<input type="checkbox" id="overwrite" checked />
|
||||
<label for="overwrite">Daten entfernen und importieren</label>
|
||||
</div> -->
|
||||
|
||||
<p>Backups ersetzen den aktuellen Stand vollständig.</p>
|
||||
|
||||
<br />
|
||||
<!-- <p class="flex">
|
||||
<InformationCircleIcon class="min-h-5 h-5 min-w-5 w-5" />Je nach Auswahl, werden die entsprechenden
|
||||
Bestandsdaten ersetzt. Dadurch können Daten, die seit diesem Backup erstellt wurden, verloren gehen.
|
||||
</p>
|
||||
<p class="flex">Das Laden eines vollständigen Backups wird zur Vermeidung von Inkonsistenzen empfohlen.</p> -->
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
Backup laden
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
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 { useBackupStore } from "@/stores/admin/management/backup";
|
||||
import type { BackupRestoreViewModel } from "../../../../viewmodels/admin/management/backup.models";
|
||||
import { InformationCircleIcon } from "@heroicons/vue/24/outline";
|
||||
import { backupSections, type BackupSection } from "../../../../types/backupTypes";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
data: { type: String, default: "" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
partial: true,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useBackupStore, ["restoreBackup"]),
|
||||
triggerCreateBackup(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let restoreBackup: BackupRestoreViewModel = {
|
||||
filename: this.data,
|
||||
partial: false,
|
||||
include: [],
|
||||
overwrite: false,
|
||||
// partial: !formData.partial.checked,
|
||||
// include: Array.from(formData?.sections?.selectedOptions ?? []).map(
|
||||
// (t) => (t as HTMLOptionElement).value
|
||||
// ) as Array<BackupSection>,
|
||||
// overwrite: !formData?.overwrite.checked,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.restoreBackup(restoreBackup)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
98
src/components/admin/management/backup/UploadBackupModal.vue
Normal file
98
src/components/admin/management/backup/UploadBackupModal.vue
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Backup hochladen</p>
|
||||
</div>
|
||||
<br />
|
||||
<div
|
||||
class="hidden md:flex flex-col gap-2 py-7 bg-gray-200 justify-center items-center w-full grow rounded-lg"
|
||||
@drop.prevent="fileDrop"
|
||||
@dragover.prevent
|
||||
>
|
||||
<p class="text-lg text-dark-gray">Datei hierher ziehen</p>
|
||||
</div>
|
||||
<p class="hidden md:block text-center">oder</p>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<input
|
||||
class="!hidden"
|
||||
type="file"
|
||||
ref="fileSelect"
|
||||
accept="application/JSON"
|
||||
@change="
|
||||
(e) => {
|
||||
uploadFile((e.target as HTMLInputElement)?.files?.[0]);
|
||||
(e.target as HTMLInputElement).value = '';
|
||||
}
|
||||
"
|
||||
multiple
|
||||
/>
|
||||
<button primary @click="openFileSelect">Datei auswählen</button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 pt-4 items-center justify-center">
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.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="status == 'loading' || status?.status == 'success'">
|
||||
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 { useBackupStore } from "@/stores/admin/management/backup";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useBackupStore, ["uploadBackup"]),
|
||||
openFileSelect(event: Event) {
|
||||
(this.$refs.fileSelect as HTMLInputElement).click();
|
||||
},
|
||||
fileDrop(event: DragEvent) {
|
||||
const file = event.dataTransfer?.files[0];
|
||||
console.log("hi", file);
|
||||
if (file?.type.toLocaleLowerCase() != "application/json") return;
|
||||
this.uploadFile(file);
|
||||
},
|
||||
uploadFile(file?: File) {
|
||||
if (!file) return;
|
||||
this.status = "loading";
|
||||
this.uploadBackup(file)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
72
src/components/admin/management/role/CreateRoleModal.vue
Normal file
72
src/components/admin/management/role/CreateRoleModal.vue
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Rolle erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateRole">
|
||||
<div>
|
||||
<label for="role">Rollenbezeichnung</label>
|
||||
<input type="text" id="role" required />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
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/management/role";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useRoleStore, ["createRole"]),
|
||||
triggerCreateRole(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.status = "loading";
|
||||
this.createRole(formData.role.value)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/components/admin/management/role/DeleteRoleModal.vue
Normal file
75
src/components/admin/management/role/DeleteRoleModal.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">Rolle {{ role?.role }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteRole">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.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="status == 'loading' || status?.status == 'success'">
|
||||
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/management/role";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useRoleStore, ["roles"]),
|
||||
role() {
|
||||
return this.roles.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useRoleStore, ["deleteRole"]),
|
||||
triggerDeleteRole() {
|
||||
this.status = "loading";
|
||||
this.deleteRole(this.data)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
54
src/components/admin/management/role/RoleListItem.vue
Normal file
54
src/components/admin/management/role/RoleListItem.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<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>{{ role.role }} <small v-if="role.permissions.admin">(Admin)</small></p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('admin', 'user', 'role')"
|
||||
:to="{ name: 'admin-user-role-permission', params: { id: role.id } }"
|
||||
>
|
||||
<WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="can('update', 'user', 'role')"
|
||||
:to="{ name: 'admin-user-role-edit', params: { id: role.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'user', 'role')" @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, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import type { RoleViewModel } from "@/viewmodels/admin/management/role.models";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
role: { type: Object as PropType<RoleViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/management/role/DeleteRoleModal.vue"))),
|
||||
this.role.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/components/admin/management/user/DeleteUserModal.vue
Normal file
75
src/components/admin/management/user/DeleteUserModal.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">Nutzer {{ user?.username }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteUser">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.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="status == 'loading' || status?.status == 'success'">
|
||||
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 { useUserStore } from "@/stores/admin/management/user";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useUserStore, ["users"]),
|
||||
user() {
|
||||
return this.users.find((u) => u.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useUserStore, ["deleteUser"]),
|
||||
triggerDeleteUser() {
|
||||
this.status = "loading";
|
||||
this.deleteUser(this.data)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
48
src/components/admin/management/user/InviteListItem.vue
Normal file
48
src/components/admin/management/user/InviteListItem.vue
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<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>{{ invite.firstname }} {{ invite.lastname }}</p>
|
||||
<div class="flex flex-row">
|
||||
<div v-if="can('delete', 'user', 'user')" @click="triggerDeleteInvite">
|
||||
<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">Benutzer:</p>
|
||||
<p class="grow overflow-hidden">{{ invite.username }}</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="min-w-16">Mail:</p>
|
||||
<p class="grow overflow-hidden">{{ invite.mail }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import type { InviteViewModel } from "@/viewmodels/admin/management/invite.models";
|
||||
import { PencilIcon, UserGroupIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useInviteStore } from "@/stores/admin/management/invite";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
invite: { type: Object as PropType<InviteViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useInviteStore, ["deleteInvite"]),
|
||||
triggerDeleteInvite() {
|
||||
this.deleteInvite(this.invite.mail);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
95
src/components/admin/management/user/InviteUserModal.vue
Normal file
95
src/components/admin/management/user/InviteUserModal.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Nutzer einladen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="invite">
|
||||
<div class="-space-y-px">
|
||||
<div>
|
||||
<input id="username" name="username" type="text" required placeholder="Benutzer" class="!rounded-b-none" />
|
||||
</div>
|
||||
<div>
|
||||
<input id="mail" name="mail" type="email" required placeholder="Mailadresse" class="!rounded-none" />
|
||||
</div>
|
||||
<div>
|
||||
<input id="firstname" name="firstname" type="text" required placeholder="Vorname" class="!rounded-none" />
|
||||
</div>
|
||||
<div>
|
||||
<input id="lastname" name="lastname" type="text" required placeholder="Nachname" class="!rounded-t-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
Nutzer einladen
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
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 { useInviteStore } from "@/stores/admin/management/invite";
|
||||
import type { CreateInviteViewModel } from "@/viewmodels/admin/management/invite.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useInviteStore, ["createInvite"]),
|
||||
invite(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createInvite: CreateInviteViewModel = {
|
||||
username: formData.username.value,
|
||||
mail: formData.mail.value,
|
||||
firstname: formData.firstname.value,
|
||||
lastname: formData.lastname.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.createInvite(createInvite)
|
||||
.then((result) => {
|
||||
this.status = { status: "success" };
|
||||
setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 2000);
|
||||
})
|
||||
.catch((err) => {
|
||||
this.status = { status: "failed", reason: err.response.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
85
src/components/admin/management/user/UserListItem.vue
Normal file
85
src/components/admin/management/user/UserListItem.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<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>
|
||||
{{ user.firstname }} {{ user.lastname }} <small v-if="user.permissions_total.admin">(Admin)</small
|
||||
><small v-if="user.isOwner"> (Owner)</small>
|
||||
</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('admin', 'user', 'user')"
|
||||
:to="{ name: 'admin-user-user-roles', params: { id: user.id } }"
|
||||
>
|
||||
<UserGroupIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="can('admin', 'user', 'user')"
|
||||
:to="{ name: 'admin-user-user-permission', params: { id: user.id } }"
|
||||
>
|
||||
<WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="can('update', 'user', 'user')"
|
||||
:to="{ name: 'admin-user-user-edit', params: { id: user.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div
|
||||
v-if="can('delete', 'user', 'user')"
|
||||
:class="user.isOwner ? 'opacity-75 pointer-events-none' : ''"
|
||||
@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">Benutzer:</p>
|
||||
<p class="grow overflow-hidden">{{ user.username }}</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="min-w-16">Mail:</p>
|
||||
<p class="grow overflow-hidden">{{ user.mail }}</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="min-w-16">Rollen:</p>
|
||||
<div class="flex flex-row gap-2 flex-wrap grow">
|
||||
<p v-for="role in user.roles" :key="role.id" class="px-1 border border-gray-300 rounded-md">
|
||||
{{ role.role }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import type { UserViewModel } from "@/viewmodels/admin/management/user.models";
|
||||
import { PencilIcon, UserGroupIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
user: { type: Object as PropType<UserViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
if (this.user.isOwner) return;
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/management/user/DeleteUserModal.vue"))),
|
||||
this.user.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
81
src/components/admin/management/webapi/CreateWebapiModal.vue
Normal file
81
src/components/admin/management/webapi/CreateWebapiModal.vue
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
<template>
|
||||
<div class="w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Webapi-Token erstellen</p>
|
||||
</div>
|
||||
<br />
|
||||
<form class="flex flex-col gap-4 py-2" @submit.prevent="triggerCreateWebapi">
|
||||
<div>
|
||||
<label for="title">Bezeichnung</label>
|
||||
<input type="text" id="title" required />
|
||||
</div>
|
||||
<div class="w-full">
|
||||
<label for="expiry">Ablaufdatum (optional)</label>
|
||||
<input type="date" id="expiry" step="1" />
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary type="submit" :disabled="status == 'loading' || status?.status == 'success'">erstellen</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal" :disabled="status == 'loading' || status?.status == 'success'">
|
||||
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 { useWebapiStore } from "@/stores/admin/management/webapi";
|
||||
import type { CreateWebapiViewModel } from "../../../../viewmodels/admin/management/webapi.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useWebapiStore, ["createWebapi"]),
|
||||
triggerCreateWebapi(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let createWebapi: CreateWebapiViewModel = {
|
||||
title: formData.title.value,
|
||||
expiry: formData.expiry.value,
|
||||
};
|
||||
this.status = "loading";
|
||||
this.createWebapi(createWebapi)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
75
src/components/admin/management/webapi/DeleteWebapiModal.vue
Normal file
75
src/components/admin/management/webapi/DeleteWebapiModal.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">Webapi-Token {{ webapi?.title }} löschen?</p>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<button primary :disabled="status == 'loading' || status?.status == 'success'" @click="triggerDeleteWebapi">
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.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="status == 'loading' || status?.status == 'success'">
|
||||
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 { useWebapiStore } from "@/stores/admin/management/webapi";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
status: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
timeout: undefined as any,
|
||||
};
|
||||
},
|
||||
beforeUnmount() {
|
||||
try {
|
||||
clearTimeout(this.timeout);
|
||||
} catch (error) {}
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useWebapiStore, ["webapis"]),
|
||||
webapi() {
|
||||
return this.webapis.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useWebapiStore, ["deleteWebapi"]),
|
||||
triggerDeleteWebapi() {
|
||||
this.status = "loading";
|
||||
this.deleteWebapi(this.data)
|
||||
.then(() => {
|
||||
this.status = { status: "success" };
|
||||
this.timeout = setTimeout(() => {
|
||||
this.closeModal();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(() => {
|
||||
this.status = { status: "failed" };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
107
src/components/admin/management/webapi/WebapiListItem.vue
Normal file
107
src/components/admin/management/webapi/WebapiListItem.vue
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
<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>{{ webapi.title }} <small v-if="webapi.permissions.admin">(Admin)</small></p>
|
||||
<div class="flex flex-row">
|
||||
<div v-if="can('admin', 'user', 'webapi')" @click="openTokenViewModal">
|
||||
<FingerPrintIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
<RouterLink
|
||||
v-if="can('admin', 'user', 'webapi')"
|
||||
:to="{ name: 'admin-user-webapi-permission', params: { id: webapi.id } }"
|
||||
>
|
||||
<WrenchScrewdriverIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<RouterLink
|
||||
v-if="can('update', 'user', 'webapi')"
|
||||
:to="{ name: 'admin-user-webapi-edit', params: { id: webapi.id } }"
|
||||
>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</RouterLink>
|
||||
<div v-if="can('delete', 'user', 'webapi')" @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="">erstellt:</p>
|
||||
<p class="grow overflow-hidden">
|
||||
{{
|
||||
new Date(webapi.createdAt).toLocaleDateString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2">
|
||||
<p class="">letzte Verwendung:</p>
|
||||
<p class="grow overflow-hidden">
|
||||
{{
|
||||
webapi.lastUsage
|
||||
? new Date(webapi.lastUsage).toLocaleDateString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})
|
||||
: "---"
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div v-if="webapi.expiry" class="flex flex-row gap-2">
|
||||
<p class="">verwendbar bis:</p>
|
||||
<p class="grow overflow-hidden">
|
||||
{{
|
||||
new Date(webapi.expiry).toLocaleDateString("de-DE", {
|
||||
day: "2-digit",
|
||||
month: "2-digit",
|
||||
year: "numeric",
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { PencilIcon, WrenchScrewdriverIcon, TrashIcon, FingerPrintIcon } from "@heroicons/vue/24/outline";
|
||||
import type { WebapiViewModel } from "@/viewmodels/admin/management/webapi.models";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
webapi: { type: Object as PropType<WebapiViewModel>, default: {} },
|
||||
},
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openTokenViewModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/management/webapi/WebapiTokenModal.vue"))),
|
||||
this.webapi.id
|
||||
);
|
||||
},
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/management/webapi/DeleteWebapiModal.vue"))),
|
||||
this.webapi.id
|
||||
);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
56
src/components/admin/management/webapi/WebapiTokenModal.vue
Normal file
56
src/components/admin/management/webapi/WebapiTokenModal.vue
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<div class="relative w-full md:max-w-md">
|
||||
<div class="flex flex-col items-center">
|
||||
<p class="text-xl font-medium">Webapi-Token</p>
|
||||
</div>
|
||||
<br />
|
||||
<div class="flex flex-col gap-2">
|
||||
<TextCopy :copyText="token" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useCalendarTypeStore } from "@/stores/admin/configuration/calendarType";
|
||||
import type { CalendarTypeViewModel } from "@/viewmodels/admin/configuration/calendarType.models";
|
||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption, ListboxLabel } from "@headlessui/vue";
|
||||
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";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
token: "" as string,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
},
|
||||
mounted() {
|
||||
this.fetchWebapiTokenById(this.data)
|
||||
.then((res) => {
|
||||
this.token = res.data;
|
||||
})
|
||||
.catch(() => {});
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useWebapiStore, ["fetchWebapiTokenById"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue