Fixed some vue errors and send less requests if (no need to fetch own edits)

This commit is contained in:
Ferdinand Thiessen 2020-11-18 00:27:44 +01:00
parent 06b259cd74
commit 4be0f56820
3 changed files with 53 additions and 26 deletions

View File

@ -174,7 +174,7 @@ export default defineComponent({
})[0]; })[0];
}); });
const avatar = ref<string>(''); const avatar = ref([]);
function onAvatarRejected() { function onAvatarRejected() {
Notify.create({ Notify.create({
group: false, group: false,
@ -184,7 +184,7 @@ export default defineComponent({
progress: true, progress: true,
actions: [{ icon: 'mdi-close', color: 'white' }], actions: [{ icon: 'mdi-close', color: 'white' }],
}); });
avatar.value = ''; avatar.value = [];
} }
const allRoles = computed(() => const allRoles = computed(() =>
@ -208,7 +208,7 @@ export default defineComponent({
} }
emit('update:user', changed); emit('update:user', changed);
if (avatar.value != '') if (avatar.value && avatar.value.length > 0)
store store
.dispatch('user/uploadAvatar', { .dispatch('user/uploadAvatar', {
user: changed, user: changed,
@ -219,6 +219,7 @@ export default defineComponent({
onAvatarRejected(); onAvatarRejected();
} }
}); });
reset();
} }
function reset() { function reset() {

View File

@ -1,10 +1,11 @@
<template> <template>
<div> <div>
<q-card class="col-12"> <q-card class="col-12">
<q-form @submit="save" @reset="reset"> <q-form
<q-card-section @submit="save"
class="fit row justify-start content-center items-center" @reset="reset"
> >
<q-card-section class="fit row justify-start content-center items-center">
<span class="col-xs-12 col-sm-6 text-center text-h6"> <span class="col-xs-12 col-sm-6 text-center text-h6">
Rollen und Berechtigungen Rollen und Berechtigungen
</span> </span>
@ -46,10 +47,24 @@
/> />
</q-scroll-area> </q-scroll-area>
</q-card-section> </q-card-section>
<q-card-actions v-if="role" align="right"> <q-card-actions
<q-btn label="Löschen" color="negative" @click="remove" /> v-if="role"
<q-btn label="Reset" type="reset" /> align="right"
<q-btn color="primary" type="submit" label="Speichern" /> >
<q-btn
label="Löschen"
color="negative"
@click="remove"
/>
<q-btn
label="Reset"
type="reset"
/>
<q-btn
color="primary"
type="submit"
label="Speichern"
/>
</q-card-actions> </q-card-actions>
</q-form> </q-form>
</q-card> </q-card>
@ -61,7 +76,7 @@ import {
computed, computed,
defineComponent, defineComponent,
ref, ref,
onBeforeMount onBeforeMount,
} from '@vue/composition-api'; } from '@vue/composition-api';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store'; import { StateInterface } from 'src/store';
@ -72,10 +87,10 @@ export default defineComponent({
const store = <Store<StateInterface>>root.$store; const store = <Store<StateInterface>>root.$store;
onBeforeMount(() => { onBeforeMount(() => {
store.dispatch('user/getRoles').catch(error => { store.dispatch('user/getRoles').catch((error) => {
console.warn(error); console.warn(error);
}); });
store.dispatch('user/getPermissions').catch(error => { store.dispatch('user/getPermissions').catch((error) => {
console.warn(error); console.warn(error);
}); });
}); });
@ -83,10 +98,10 @@ export default defineComponent({
const role = ref<FG.Role | null>(null); const role = ref<FG.Role | null>(null);
const roles = computed(() => store.state.user.roles); const roles = computed(() => store.state.user.roles);
const permissions = computed(() => const permissions = computed(() =>
store.state.user.permissions.map(perm => { store.state.user.permissions.map((perm) => {
return { return {
value: perm, value: perm,
label: perm label: perm,
}; };
}) })
); );
@ -116,14 +131,19 @@ export default defineComponent({
role.value = { role.value = {
id: rl.id, id: rl.id,
name: rl.name, name: rl.name,
permissions: Array.from(rl.permissions) permissions: Array.from(rl.permissions),
}; };
} }
function save() { function save() {
if (role.value) { if (role.value) {
if (role.value.id === -1) if (role.value.id === -1)
void store.dispatch('user/newRole', role.value); void store
.dispatch('user/newRole', role.value)
.then((createdRole: FG.Role) => {
console.log(createdRole);
role.value = createdRole;
});
else { else {
if (newRoleName.value !== '') role.value.name = newRoleName.value; if (newRoleName.value !== '') role.value.name = newRoleName.value;
console.log(role.value); console.log(role.value);
@ -135,7 +155,7 @@ export default defineComponent({
function reset() { function reset() {
if (role.value && role.value.id !== -1) { if (role.value && role.value.id !== -1) {
const original = roles.value.find( const original = roles.value.find(
value => value.name === role.value?.name (value) => value.name === role.value?.name
); );
if (original) updateRole(original); if (original) updateRole(original);
} else { } else {
@ -151,7 +171,7 @@ export default defineComponent({
store store
.dispatch('user/deleteRole', role.value) .dispatch('user/deleteRole', role.value)
.then(() => (role.value = null)) .then(() => (role.value = null))
.catch(error => console.warn(error)); .catch((error) => console.warn(error));
} }
} }
} }
@ -167,8 +187,8 @@ export default defineComponent({
reset, reset,
removeRole, removeRole,
remove, remove,
newRoleName newRoleName,
}; };
} },
}); });
</script> </script>

View File

@ -54,9 +54,12 @@ const mutations: MutationTree<UserStateInterface> = {
setRoles(state, data: FG.Role[]) { setRoles(state, data: FG.Role[]) {
state.roles = data; state.roles = data;
}, },
addRole(state, data: FG.Role) {
state.roles.push(data);
},
updateRole(state, data: FG.Role) { updateRole(state, data: FG.Role) {
const idx = state.roles.findIndex(role => role.id === data.id); const idx = state.roles.findIndex(role => role.id === data.id);
if (idx != undefined || idx != null) { if (idx >= 0) {
state.roles[idx].name = data.name; state.roles[idx].name = data.name;
state.roles[idx].permissions = data.permissions; state.roles[idx].permissions = data.permissions;
} }
@ -184,11 +187,14 @@ const actions: ActionTree<UserStateInterface, StateInterface> = {
}); });
}, },
newRole({ commit, dispatch }, data: FG.Role) { newRole({ commit }, data: FG.Role) {
commit('setLoading'); commit('setLoading');
axios return axios
.post('/roles', data) .post('/roles', data)
.then(() => dispatch('getRoles', true)) .then((response: AxiosResponse<FG.Role>) => {
commit('addRole', response.data);
return Promise.resolve(response.data);
})
.finally(() => { .finally(() => {
commit('setLoading', false); commit('setLoading', false);
}); });