ferfissimo
/
flaschengeist-frontend
forked from Flaschengeist/flaschengeist-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Retrieve users when using the UserSelector

This commit is contained in:
Ferdinand Thiessen 2020-11-15 00:23:20 +01:00
parent 9f2f632a67
commit e4378af76e
2 changed files with 29 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/plugins/user/components/UserSelector.vue
View File

@ -12,7 +12,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { computed, defineComponent } from '@vue/composition-api'; import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import { Store } from 'vuex'; import { Store } from 'vuex';
import { StateInterface } from 'src/store'; import { StateInterface } from 'src/store';
@ -25,6 +25,13 @@ export default defineComponent({
props: ['user'], props: ['user'],
setup(props: Props, { root, emit }) { setup(props: Props, { root, emit }) {
const store = <Store<StateInterface>>root.$store; const store = <Store<StateInterface>>root.$store;
onBeforeMount(() => {
store.dispatch('user/getUsers').catch((error) => {
console.error(error);
});
});
const users = computed(() => store.state.user.users); const users = computed(() => store.state.user.users);
const updated = (value: FG.User) => { const updated = (value: FG.User) => {
emit('update:user', value); emit('update:user', value);
@ -32,8 +39,8 @@ export default defineComponent({
return { return {
updated, updated,
users users,
}; };
} },
}); });
</script> </script>

36
src/plugins/user/pages/AdminSettings.vue
View File

@ -1,6 +1,9 @@
<template> <template>
<div> <div>
<q-tabs v-model="tab" v-if="$q.screen.gt.sm"> <q-tabs
v-model="tab"
v-if="$q.screen.gt.sm"
>
<q-tab <q-tab
v-for="(tabindex, index) in tabs" v-for="(tabindex, index) in tabs"
:key="'tab' + index" :key="'tab' + index"
@ -8,8 +11,16 @@
:label="tabindex.label" :label="tabindex.label"
/> />
</q-tabs> </q-tabs>
<div class="fit row justify-end" v-else> <div
<q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer" /> class="fit row justify-end"
v-else
>
<q-btn
flat
round
icon="mdi-menu"
@click="showDrawer = !showDrawer"
/>
</div> </div>
<q-drawer <q-drawer
side="right" side="right"
@ -54,12 +65,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { computed, defineComponent, ref } from '@vue/composition-api';
computed,
defineComponent,
onBeforeMount,
ref
} from '@vue/composition-api';
import RoleSettings from '../components/settings/RoleSettings.vue'; import RoleSettings from '../components/settings/RoleSettings.vue';
import UpdateUser from '../components/UpdateUser.vue'; import UpdateUser from '../components/UpdateUser.vue';
import NewUser from '../components/NewUser.vue'; import NewUser from '../components/NewUser.vue';
@ -75,10 +81,6 @@ export default defineComponent({
setup(_, { root }) { setup(_, { root }) {
const store = <Store<StateInterface>>root.$store; const store = <Store<StateInterface>>root.$store;
onBeforeMount(() => {
store.dispatch('user/getUsers').catch(error => console.warn(error));
});
const canEditRoles = computed(() => const canEditRoles = computed(() =>
hasPermission(PERMISSIONS.ROLES_EDIT, store) hasPermission(PERMISSIONS.ROLES_EDIT, store)
); );
@ -91,7 +93,7 @@ export default defineComponent({
const tabs: Tab[] = [ const tabs: Tab[] = [
{ name: 'user', label: 'Mitglieder' }, { name: 'user', label: 'Mitglieder' },
{ name: 'newUser', label: 'Neues Mitglied' }, { name: 'newUser', label: 'Neues Mitglied' },
{ name: 'roles', label: 'Rollen' } { name: 'roles', label: 'Rollen' },
]; ];
const drawer = ref<boolean>(false); const drawer = ref<boolean>(false);
@ -102,7 +104,7 @@ export default defineComponent({
}, },
set: (val: boolean) => { set: (val: boolean) => {
drawer.value = val; drawer.value = val;
} },
}); });
const tab = ref<string>('user'); const tab = ref<string>('user');
@ -111,8 +113,8 @@ export default defineComponent({
canEditRoles, canEditRoles,
showDrawer, showDrawer,
tab, tab,
tabs tabs,
}; };
} },
}); });
</script> </script>