[Admin] Fix einge Rollen

* rollen im store aufgeräumt
* clear-icon hinzugefügt
This commit is contained in:
Tim Gröger 2020-11-13 00:04:56 +01:00
parent 4ea0bce19d
commit 7b1a1c3656
3 changed files with 74 additions and 52 deletions

View File

@ -1,8 +1,16 @@
<template>
<div>
<q-card class="col-12">
<q-form @submit="save" @reset="reset">
<q-linear-progress indeterminate rounded color="primary" v-if="loading" />
<q-card-section class="fit row justify-start content-center items-center">
<q-linear-progress
indeterminate
rounded
color="primary"
v-if="loading"
/>
<q-card-section
class="fit row justify-start content-center items-center"
>
<span class="col-xs-12 col-sm-6 text-center text-h6">
Rollen und Berechtigungen
</span>
@ -19,6 +27,8 @@
map-options
@new-value="createRole"
@input="updateRole"
@clear="removeRole"
clearable
/>
</q-card-section>
<q-separator />
@ -43,6 +53,7 @@
</q-card-actions>
</q-form>
</q-card>
</div>
</template>
<script lang="ts">
@ -89,6 +100,10 @@ export default defineComponent({
done(name, 'add-unique');
}
function removeRole(): void {
role.value = null;
}
function updatePermissions(permissions: string[]) {
if (role.value) {
role.value.permissions = permissions;
@ -139,12 +154,13 @@ export default defineComponent({
return {
roles,
role,
createRole,
permissions,
createRole,
updateRole,
updatePermissions,
save,
reset,
removeRole,
remove,
loading
};

View File

@ -36,7 +36,7 @@
<q-tab-panels
v-model="tab"
style="background-color: transparent;"
class="q-ma-none q-pa-none"
class="q-ma-none q-pa-none fit row justify-center content-start items-start"
animated
>
<q-tab-panel name="user">

View File

@ -45,6 +45,13 @@ const mutations: MutationTree<UserStateInterface> = {
setRoles(state, data: FG.Role[]) {
state.roles = data;
},
updateRole(state, data: FG.Role) {
const idx = state.roles.findIndex(role => role.id === data.id);
if (idx != undefined || idx != null) {
state.roles[idx].name = data.name;
state.roles[idx].permissions = data.permissions;
}
},
setPermissions(state, data: FG.Permission[]) {
state.permissions = data;
},
@ -136,22 +143,18 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
axios
.put(`/roles/${data.id}`, data)
.then(() => {
const idx = state.roles.findIndex(role => role.id === data.id);
if (idx) {
state.roles[idx].name = data.name;
state.roles[idx].permissions = data.permissions;
}
commit('updateRole', data);
})
.finally(() => {
commit('setLoading', false);
});
},
newRole({ commit }, data: FG.Role) {
newRole({ commit, dispatch }, data: FG.Role) {
commit('setLoading');
axios
.post('/roles', data)
.then(() => commit('getRoles'))
.then(() => dispatch('getRoles', true))
.finally(() => {
commit('setLoading', false);
});
@ -162,7 +165,10 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
axios
.delete(`/roles/${data.id}`)
.then(() => {
state.roles = state.roles.filter(value => value.id !== data.id);
commit(
'setRoles',
state.roles.filter(value => value.id !== data.id)
);
})
.finally(() => {
commit('setLoading', false);