role and user management
This commit is contained in:
parent
6247c385c3
commit
5ffdfcd6f2
22 changed files with 798 additions and 92 deletions
8
package-lock.json
generated
8
package-lock.json
generated
|
|
@ -10,7 +10,7 @@
|
|||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.13",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@heroicons/vue": "^2.1.5",
|
||||
"axios": "^0.26.1",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
|
|
@ -2422,9 +2422,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@heroicons/vue": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-1.0.6.tgz",
|
||||
"integrity": "sha512-ng2YcCQrdoQWEFpw+ipFl2rZo8mZ56v0T5+MyfQQvNqfKChwgP6DMloZLW+rl17GEcHkE3H82UTAMKBKZr4+WA==",
|
||||
"version": "2.1.5",
|
||||
"resolved": "https://registry.npmjs.org/@heroicons/vue/-/vue-2.1.5.tgz",
|
||||
"integrity": "sha512-IpqR72sFqFs55kyKfFS7tN+Ww6odFNeH/7UxycIOrlVYfj4WUGAdzQtLBnJspucSeqWFQsKM0g0YrgU655BEfA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"vue": ">= 3"
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
"license": "GPL-3.0-only",
|
||||
"dependencies": {
|
||||
"@headlessui/vue": "^1.7.13",
|
||||
"@heroicons/vue": "^1.0.6",
|
||||
"@heroicons/vue": "^2.1.5",
|
||||
"axios": "^0.26.1",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
<script setup lang="ts">
|
||||
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { UserIcon } from "@heroicons/vue/outline";
|
||||
import { UserIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAccountStore } from "@/stores/account";
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -68,6 +68,9 @@
|
|||
<div class="flex flex-row gap-2 self-end pt-4">
|
||||
<button primary-outline class="!w-fit" @click="$emit('abortPermissions')">abbrechen</button>
|
||||
<button primary class="!w-fit" @click="$emit('savePermissions', permissionUpdate)">speichern</button>
|
||||
<Spinner v-if="status == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="status?.status == 'success'" />
|
||||
<FailureXMark v-else-if="status?.status == 'failed'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -84,9 +87,12 @@ import type {
|
|||
} from "@/types/permissionTypes";
|
||||
import { sectionsAndModules, permissionSections, permissionTypes } from "@/types/permissionTypes";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/outline";
|
||||
import { EyeIcon, PencilIcon, PlusIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import _cloneDeep from "lodash.clonedeep";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -96,6 +102,14 @@ export default defineComponent({
|
|||
type: Object as PropType<PermissionObject>,
|
||||
default: {},
|
||||
},
|
||||
status: {
|
||||
type: [
|
||||
null,
|
||||
String as PropType<"loading">,
|
||||
Object as PropType<{ status: "success" | "failed"; message?: string }>,
|
||||
],
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
emits: ["savePermissions", "abortPermissions"],
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,11 @@
|
|||
<template>
|
||||
<RouterLink v-if="link" v-slot="{ isExactActive }" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
|
||||
<RouterLink v-if="link" :to="{ name: `admin-${activeNavigation}-${link.key}` }">
|
||||
<p
|
||||
class="cursor-pointer w-full px-2 py-3"
|
||||
:class="
|
||||
isExactActive ? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary' : 'pl-3 hover:bg-red-200 rounded-lg'
|
||||
activeLink == link.key
|
||||
? 'rounded-r-lg bg-red-200 border-l-4 border-l-primary'
|
||||
: 'pl-3 hover:bg-red-200 rounded-lg'
|
||||
"
|
||||
>
|
||||
{{ link.title }}
|
||||
|
|
@ -27,7 +29,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useNavigationStore, ["activeNavigation"]),
|
||||
...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -40,14 +40,14 @@ import { useRoleStore } from "@/stores/admin/role";
|
|||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
mounted() {
|
||||
this.resetCreateStatus();
|
||||
this.resetStatus();
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRoleStore, ["createStatus"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useRoleStore, ["createRole", "resetCreateStatus"]),
|
||||
...mapActions(useRoleStore, ["createRole", "resetStatus"]),
|
||||
triggerCreateRole(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.createRole(formData.role.value);
|
||||
|
|
|
|||
59
src/components/admin/user/role/DeleteRoleModal.vue
Normal file
59
src/components/admin/user/role/DeleteRoleModal.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<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="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
|
||||
@click="triggerDeleteRole"
|
||||
>
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useRoleStore, ["roles", "deleteStatus"]),
|
||||
role() {
|
||||
return this.roles.find((r) => r.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useRoleStore, ["deleteRole", "resetStatus"]),
|
||||
triggerDeleteRole() {
|
||||
this.deleteRole(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,7 +2,23 @@
|
|||
<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?.isAdmin">(Admin)</small></p>
|
||||
<PencilIcon class="w-5 h-5 p-1 box-content cursor-pointer" @click="openUpdateModal" />
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', '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', 'user')" @click="openDeleteModal">
|
||||
<TrashIcon class="w-5 h-5 p-1 box-content cursor-pointer" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -10,10 +26,11 @@
|
|||
<script setup lang="ts">
|
||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { PencilIcon } from "@heroicons/vue/outline";
|
||||
import { PencilIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import type { RoleViewModel } from "@/viewmodels/admin/role.models";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
import { useNavigationStore } from "@/stores/admin/navigation";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -21,15 +38,14 @@ export default defineComponent({
|
|||
props: {
|
||||
role: { type: Object as PropType<RoleViewModel>, default: {} },
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openUpdateModal() {
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/user/role/UpdateRoleModal.vue"))),
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/user/role/DeleteRoleModal.vue"))),
|
||||
this.role.id
|
||||
);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,54 +0,0 @@
|
|||
<template>
|
||||
<div class="flex flex-col items-center gap-2 w-full max-w-6xl h-1/2 max-h-3/4">
|
||||
<div class="flex flex-col">
|
||||
<p class="text-xl font-medium">Rolle bearbeiten</p>
|
||||
</div>
|
||||
<form class="flex flex-col gap-4 py-2 w-full max-w-xl" @submit.prevent="">
|
||||
<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="createStatus == 'loading' || createStatus?.status == 'success'">
|
||||
speichern
|
||||
</button>
|
||||
<Spinner v-if="createStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="createStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="createStatus?.status == 'failed'" />
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="flex flex-row self-end mt-auto">
|
||||
<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 { useModalStore } from "@/stores/modal";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import Permission from "../../Permission.vue";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
mounted() {
|
||||
this.fetchRoleById(this.data);
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRoleStore, ["createStatus", "role"]),
|
||||
...mapState(useModalStore, ["data"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useRoleStore, ["fetchRoleById"]),
|
||||
},
|
||||
});
|
||||
</script>
|
||||
59
src/components/admin/user/user/DeleteUserModal.vue
Normal file
59
src/components/admin/user/user/DeleteUserModal.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<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="deleteStatus == 'loading' || deleteStatus?.status == 'success'"
|
||||
@click="triggerDeleteUser"
|
||||
>
|
||||
unwiederuflich löschen
|
||||
</button>
|
||||
<Spinner v-if="deleteStatus == 'loading'" class="my-auto" />
|
||||
<SuccessCheckmark v-else-if="deleteStatus?.status == 'success'" />
|
||||
<FailureXMark v-else-if="deleteStatus?.status == 'failed'" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-end">
|
||||
<div class="flex flex-row gap-4 py-2">
|
||||
<button primary-outline @click="closeModal">schließen</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/user";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
},
|
||||
computed: {
|
||||
...mapState(useModalStore, ["data"]),
|
||||
...mapState(useUserStore, ["users", "deleteStatus"]),
|
||||
user() {
|
||||
return this.users.find((u) => u.id == this.data);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["closeModal"]),
|
||||
...mapActions(useUserStore, ["deleteUser", "resetStatus"]),
|
||||
triggerDeleteUser() {
|
||||
this.deleteUser(this.data);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -2,7 +2,29 @@
|
|||
<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 }}</p>
|
||||
<div class="flex flex-row">
|
||||
<RouterLink
|
||||
v-if="can('update', '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('update', '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')" @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">
|
||||
|
|
@ -26,10 +48,12 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent, type PropType } from "vue";
|
||||
import { defineComponent, defineAsyncComponent, markRaw, type PropType } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import type { UserViewModel } from "@/viewmodels/admin/user.models";
|
||||
import { PencilIcon } from "@heroicons/vue/outline";
|
||||
import { PencilIcon, UserGroupIcon, WrenchScrewdriverIcon, TrashIcon } from "@heroicons/vue/24/outline";
|
||||
import { useAbilityStore } from "@/stores/ability";
|
||||
import { useModalStore } from "@/stores/modal";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -37,9 +61,18 @@ export default defineComponent({
|
|||
props: {
|
||||
user: { type: Object as PropType<UserViewModel>, default: {} },
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
computed: {
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
...mapState(useAbilityStore, ["can"]),
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useModalStore, ["openModal"]),
|
||||
openDeleteModal() {
|
||||
this.openModal(
|
||||
markRaw(defineAsyncComponent(() => import("@/components/admin/user/user/DeleteUserModal.vue"))),
|
||||
this.user.id
|
||||
);
|
||||
},
|
||||
},
|
||||
mounted() {},
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -60,26 +60,36 @@ const router = createRouter({
|
|||
path: "",
|
||||
name: "admin-club-default",
|
||||
component: () => import("../views/admin/ViewSelect.vue"),
|
||||
meta: { type: "read", section: "club" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "members",
|
||||
name: "admin-club-members",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "club", module: "members" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "calendar",
|
||||
name: "admin-club-calendar",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "club", module: "calendar" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "newsletter",
|
||||
name: "admin-club-newsletter",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "club", module: "newsletter" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "protocol",
|
||||
name: "admin-club-protocol",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "club", module: "protocoll" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -94,26 +104,36 @@ const router = createRouter({
|
|||
path: "",
|
||||
name: "admin-settings-default",
|
||||
component: () => import("../views/admin/ViewSelect.vue"),
|
||||
meta: { type: "read", section: "settings" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "qualification",
|
||||
name: "admin-settings-qualification",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "settings", module: "qualification" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "award",
|
||||
name: "admin-settings-award",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "settings", module: "award" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "executive-position",
|
||||
name: "admin-settings-executive_position",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "settings", module: "executive_position" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "communication",
|
||||
name: "admin-settings-communication",
|
||||
component: () => import("../views/admin/members/Overview.vue"),
|
||||
meta: { type: "read", section: "settings", module: "communication" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -128,17 +148,77 @@ const router = createRouter({
|
|||
path: "",
|
||||
name: "admin-user-default",
|
||||
component: () => import("../views/admin/ViewSelect.vue"),
|
||||
meta: { type: "read", section: "user" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
},
|
||||
{
|
||||
path: "user",
|
||||
name: "admin-user-user-route",
|
||||
component: () => import("../views/RouterView.vue"),
|
||||
meta: { type: "read", section: "user", module: "user" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "admin-user-user",
|
||||
component: () => import("../views/admin/user/User.vue"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-user-user-edit",
|
||||
component: () => import("../views/admin/user/UserEdit.vue"),
|
||||
meta: { type: "update", section: "user", module: "user" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: ":id/permission",
|
||||
name: "admin-user-user-permission",
|
||||
component: () => import("../views/admin/user/UserEditPermission.vue"),
|
||||
meta: { type: "update", section: "user", module: "user" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: ":id/roles",
|
||||
name: "admin-user-user-roles",
|
||||
component: () => import("../views/admin/user/UserEditRoles.vue"),
|
||||
meta: { type: "update", section: "user", module: "user" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "role",
|
||||
name: "admin-user-role-route",
|
||||
component: () => import("../views/RouterView.vue"),
|
||||
meta: { type: "read", section: "user", module: "role" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
children: [
|
||||
{
|
||||
path: "",
|
||||
name: "admin-user-role",
|
||||
component: () => import("../views/admin/user/Role.vue"),
|
||||
},
|
||||
{
|
||||
path: ":id/edit",
|
||||
name: "admin-user-role-edit",
|
||||
component: () => import("../views/admin/user/RoleEdit.vue"),
|
||||
meta: { type: "update", section: "user", module: "role" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
{
|
||||
path: ":id/permission",
|
||||
name: "admin-user-role-permission",
|
||||
component: () => import("../views/admin/user/RoleEditPermission.vue"),
|
||||
meta: { type: "update", section: "user", module: "role" },
|
||||
beforeEnter: [abilityAndNavUpdate],
|
||||
props: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type { RoleViewModel } from "../../viewmodels/admin/role.models";
|
||||
import { http } from "../../serverCom";
|
||||
import type { PermissionObject } from "../../types/permissionTypes";
|
||||
|
||||
export const useRoleStore = defineStore("role", {
|
||||
state: () => {
|
||||
|
|
@ -10,9 +11,16 @@ export const useRoleStore = defineStore("role", {
|
|||
loadingAll: null as null | "loading" | "success" | "failed",
|
||||
loadingSingle: null as null | "loading" | "success" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchRoles() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
|
|
@ -38,9 +46,6 @@ export const useRoleStore = defineStore("role", {
|
|||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
resetCreateStatus() {
|
||||
this.createStatus = null;
|
||||
},
|
||||
createRole(role: string) {
|
||||
this.createStatus = "loading";
|
||||
http
|
||||
|
|
@ -55,5 +60,47 @@ export const useRoleStore = defineStore("role", {
|
|||
this.createStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
updateActiveRole(role: string) {
|
||||
if (this.role == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/role/${this.role.id}`, {
|
||||
role: role,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchRoles();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveRolePermissions(permission: PermissionObject) {
|
||||
if (this.role == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/role/${this.role.id}/permissions`, {
|
||||
permissions: permission,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchRoles();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteRole(role: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/role/${role}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchRoles();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import { defineStore } from "pinia";
|
||||
import type { UserViewModel } from "../../viewmodels/admin/user.models";
|
||||
import type { CreateOrUpdateUserViewModel, UserViewModel } from "../../viewmodels/admin/user.models";
|
||||
import { http } from "../../serverCom";
|
||||
import type { PermissionObject } from "../../types/permissionTypes";
|
||||
|
||||
export const useUserStore = defineStore("user", {
|
||||
state: () => {
|
||||
|
|
@ -9,9 +10,17 @@ export const useUserStore = defineStore("user", {
|
|||
user: null as null | UserViewModel,
|
||||
loadingAll: "loading" as "loading" | "fetched" | "failed",
|
||||
loadingSingle: "loading" as "loading" | "fetched" | "failed",
|
||||
createStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
updateStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
deleteStatus: null as null | "loading" | { status: "success" | "failed"; reason?: string },
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
resetStatus() {
|
||||
this.createStatus = null;
|
||||
this.updateStatus = null;
|
||||
this.deleteStatus = null;
|
||||
},
|
||||
fetchUsers() {
|
||||
this.loadingAll = "loading";
|
||||
http
|
||||
|
|
@ -37,5 +46,65 @@ export const useUserStore = defineStore("user", {
|
|||
this.loadingSingle = "failed";
|
||||
});
|
||||
},
|
||||
updateActiveUser(user: CreateOrUpdateUserViewModel) {
|
||||
if (this.user == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/user/${this.user.id}`, {
|
||||
username: user.username,
|
||||
firstname: user.firstname,
|
||||
lastname: user.lastname,
|
||||
mail: user.mail,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveUserPermissions(permission: PermissionObject) {
|
||||
if (this.user == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/user/${this.user.id}/permissions`, {
|
||||
permissions: permission,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
updateActiveUserRoles(roles: Array<number>) {
|
||||
if (this.user == null) return;
|
||||
this.updateStatus = "loading";
|
||||
http
|
||||
.patch(`/admin/user/${this.user.id}/roles`, {
|
||||
roleIds: roles,
|
||||
})
|
||||
.then((result) => {
|
||||
this.updateStatus = { status: "success" };
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.updateStatus = { status: "failed" };
|
||||
});
|
||||
},
|
||||
deleteUser(user: number) {
|
||||
this.deleteStatus = "loading";
|
||||
http
|
||||
.delete(`/admin/user/${user}`)
|
||||
.then((res) => {
|
||||
this.deleteStatus = { status: "success" };
|
||||
this.fetchUsers();
|
||||
})
|
||||
.catch((err) => {
|
||||
this.deleteStatus = { status: "failed", reason: err.data };
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
<template>
|
||||
<div v-if="!defaultRoute && showBack" class="flex md:hidden flex-row items-baseline">
|
||||
<RouterLink v-if="!defaultRoute && showBack" :to="{ name: `${rootRoute}-default` }" class="mid:hidden text-primary">
|
||||
<RouterLink
|
||||
v-if="!defaultRoute && showBack"
|
||||
:to="{ name: `${rootRoute}-${activeNavigation}-default` }"
|
||||
class="mid:hidden text-primary"
|
||||
>
|
||||
zur Übersicht
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
|
@ -37,7 +41,7 @@ export default defineComponent({
|
|||
},
|
||||
},
|
||||
computed: {
|
||||
...mapState(useNavigationStore, ["activeLink"]),
|
||||
...mapState(useNavigationStore, ["activeLink", "activeNavigation"]),
|
||||
defaultRoute() {
|
||||
return ((this.$route?.name as string) ?? "").includes("-default");
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,3 +11,10 @@ export interface UserViewModel {
|
|||
roles: Array<RoleViewModel>;
|
||||
permissions_total: PermissionObject;
|
||||
}
|
||||
|
||||
export interface CreateOrUpdateUserViewModel {
|
||||
username: string;
|
||||
mail: string;
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
}
|
||||
|
|
|
|||
62
src/views/admin/user/RoleEdit.vue
Normal file
62
src/views/admin/user/RoleEdit.vue
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
<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">Rolle {{ role?.role }} - 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="triggerRoleUpdate">
|
||||
<div>
|
||||
<label for="role">Rollenbezeichnung</label>
|
||||
<input type="text" id="role" required :value="role?.role" />
|
||||
</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 { useRoleStore } from "../../../stores/admin/role";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRoleStore, ["role", "updateStatus", "loadingSingle"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchRoleById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRole", "resetStatus"]),
|
||||
triggerRoleUpdate(e: any) {
|
||||
let formData = e.target.elements;
|
||||
this.updateActiveRole(formData.role.value);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
54
src/views/admin/user/RoleEditPermission.vue
Normal file
54
src/views/admin/user/RoleEditPermission.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<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">Rolle {{ role?.role }} - Berechtigungen bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<Permission
|
||||
v-else
|
||||
:permissions="role?.permissions"
|
||||
:status="updateStatus"
|
||||
@savePermissions="triggerPermissionUpdate"
|
||||
@abortPermissions="$router.push('../')"
|
||||
/>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import { useRoleStore } from "../../../stores/admin/role";
|
||||
import Permission from "@/components/admin/Permission.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import type { PermissionObject } from "@/types/permissionTypes";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useRoleStore, ["role", "loadingSingle", "updateStatus"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchRoleById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useRoleStore, ["fetchRoleById", "updateActiveRolePermissions", "resetStatus"]),
|
||||
triggerPermissionUpdate(e: PermissionObject) {
|
||||
this.updateActiveRolePermissions(e);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
86
src/views/admin/user/UserEdit.vue
Normal file
86
src/views/admin/user/UserEdit.vue
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
<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">Nutzer {{ user?.username }} - 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="triggerUpdateUser">
|
||||
<div>
|
||||
<label for="username">Nutzername</label>
|
||||
<input type="text" id="username" required :value="user?.username" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="firstname">Vorname</label>
|
||||
<input type="text" id="firstname" required :value="user?.firstname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="lastname">Nachname</label>
|
||||
<input type="text" id="lastname" required :value="user?.lastname" />
|
||||
</div>
|
||||
<div>
|
||||
<label for="mail">Mailadresse</label>
|
||||
<input type="email" id="mail" required :value="user?.mail" />
|
||||
</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 Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { useUserStore } from "@/stores/admin/user";
|
||||
import type { CreateOrUpdateUserViewModel, UserViewModel } from "@/viewmodels/admin/user.models";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
localUser: null as null | UserViewModel,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchUserById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUser", "resetStatus"]),
|
||||
triggerUpdateUser(e: any) {
|
||||
let formData = e.target.elements;
|
||||
let user: CreateOrUpdateUserViewModel = {
|
||||
username: formData.username.value,
|
||||
firstname: formData.firstname.value,
|
||||
lastname: formData.lastname.value,
|
||||
mail: formData.mail.value,
|
||||
};
|
||||
this.updateActiveUser(user);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
54
src/views/admin/user/UserEditPermission.vue
Normal file
54
src/views/admin/user/UserEditPermission.vue
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
<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">Nutzer {{ user?.username }} - Berechtigungen bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<Permission
|
||||
v-else
|
||||
:permissions="user?.permissions"
|
||||
:status="updateStatus"
|
||||
@savePermissions="triggerPermissionUpdate"
|
||||
@abortPermissions="$router.push('../')"
|
||||
/>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Permission from "@/components/admin/Permission.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import { useUserStore } from "@/stores/admin/user";
|
||||
import type { PermissionObject } from "@/types/permissionTypes";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
computed: {
|
||||
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchUserById(parseInt(this.id ?? ""));
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserPermissions", "resetStatus"]),
|
||||
triggerPermissionUpdate(e: PermissionObject) {
|
||||
this.updateActiveUserPermissions(e);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
114
src/views/admin/user/UserEditRoles.vue
Normal file
114
src/views/admin/user/UserEditRoles.vue
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<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">Nutzer {{ user?.username }} - Rollen bearbeiten</h1>
|
||||
</div>
|
||||
</template>
|
||||
<template #main>
|
||||
<Spinner v-if="loadingSingle == 'loading'" class="mx-auto" />
|
||||
<p v-else-if="loadingSingle == 'failed'">laden fehlgeschlagen</p>
|
||||
<div v-else class="flex flex-col grow gap-4">
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<p class="text-xl font-semibold">zugewiesene Rollen</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 h-1/2 overflow-y-auto">
|
||||
<div
|
||||
v-for="role in assignedRoles"
|
||||
:key="role.id"
|
||||
class="flex flex-row gap-2 items-center px-2 p-1 border border-gray-300 rounded-md h-fit cursor-pointer"
|
||||
@click="removeAssigned(role.id)"
|
||||
>
|
||||
<p>{{ role.role }}</p>
|
||||
<XMarkIcon class="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-xl font-semibold">verfügbare Rollen</p>
|
||||
<div class="flex flex-row flex-wrap gap-2 h-1/2 overflow-y-auto">
|
||||
<div
|
||||
v-for="role in availableRoles"
|
||||
:key="role.id"
|
||||
class="flex flex-row gap-2 items-center px-2 p-1 border border-gray-300 rounded-md h-fit cursor-pointer"
|
||||
@click="addAvailable(role.id)"
|
||||
>
|
||||
<p>{{ role.role }}</p>
|
||||
<PlusIcon class="w-5 h-5" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row justify-end gap-2">
|
||||
<RouterLink button primary-outline to="../" class="!w-fit">abbrechen</RouterLink>
|
||||
<button primary class="!w-fit" :disabled="updateStatus == 'loading'" @click="triggerRolesUpdate">
|
||||
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>
|
||||
</div>
|
||||
</template>
|
||||
</MainTemplate>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { mapState, mapActions } from "pinia";
|
||||
import { useUserStore } from "@/stores/admin/user";
|
||||
import { useRoleStore } from "@/stores/admin/role";
|
||||
import type { PermissionObject } from "@/types/permissionTypes";
|
||||
import MainTemplate from "@/templates/Main.vue";
|
||||
import Permission from "@/components/admin/Permission.vue";
|
||||
import Spinner from "@/components/Spinner.vue";
|
||||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { XMarkIcon, PlusIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
export default defineComponent({
|
||||
props: {
|
||||
id: String,
|
||||
},
|
||||
watch: {
|
||||
user() {
|
||||
this.assigned = this.user?.roles.map((r) => r.id) ?? [];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
assigned: [] as Array<number>,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(useUserStore, ["user", "loadingSingle", "updateStatus"]),
|
||||
...mapState(useRoleStore, ["roles"]),
|
||||
assignedRoles() {
|
||||
return this.roles.filter((r) => this.assigned.includes(r.id));
|
||||
},
|
||||
availableRoles() {
|
||||
return this.roles.filter((r) => !this.assigned.includes(r.id));
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.resetStatus();
|
||||
this.fetchUserById(parseInt(this.id ?? ""));
|
||||
this.fetchRoles();
|
||||
},
|
||||
methods: {
|
||||
...mapActions(useUserStore, ["fetchUserById", "updateActiveUserRoles", "resetStatus"]),
|
||||
...mapActions(useRoleStore, ["fetchRoles"]),
|
||||
addAvailable(id: number) {
|
||||
this.assigned.push(id);
|
||||
},
|
||||
removeAssigned(id: number) {
|
||||
this.assigned = this.assigned.filter((roleId) => roleId !== id);
|
||||
},
|
||||
triggerRolesUpdate() {
|
||||
this.updateActiveUserRoles(this.assigned);
|
||||
},
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
<div class="flex relative">
|
||||
<input type="text" :value="otp" />
|
||||
<ClipboardCopyIcon
|
||||
<ClipboardIcon
|
||||
class="w-5 h-5 p-2 box-content absolute right-1 top-1/2 -translate-y-1/2 bg-white cursor-pointer"
|
||||
@click="copyToClipboard"
|
||||
/>
|
||||
|
|
@ -61,7 +61,7 @@ import Spinner from "@/components/Spinner.vue";
|
|||
import SuccessCheckmark from "@/components/SuccessCheckmark.vue";
|
||||
import FailureXMark from "@/components/FailureXMark.vue";
|
||||
import { RouterLink } from "vue-router";
|
||||
import { ClipboardCopyIcon } from "@heroicons/vue/outline";
|
||||
import { ClipboardIcon } from "@heroicons/vue/24/outline";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
|
|||
Loading…
Reference in a new issue