56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<q-page
|
||
|
|
padding
|
||
|
|
class="fit row justify-center content-center items-center q-gutter-sm"
|
||
|
|
>
|
||
|
|
<q-card class="col-12">
|
||
|
|
<q-card-section
|
||
|
|
class="fit row justify-start content-center items-center"
|
||
|
|
>
|
||
|
|
<div class="col-xs-12 col-sm-6 text-center text-h6">
|
||
|
|
Benutzereinstellungen
|
||
|
|
</div>
|
||
|
|
<div class="col-xs-12 col-sm-6 q-pa-sm">
|
||
|
|
<UserSelector :user="user" @update:user="userUpdated" />
|
||
|
|
</div>
|
||
|
|
</q-card-section>
|
||
|
|
<MainUserSettings :user="user" />
|
||
|
|
</q-card>
|
||
|
|
</q-page>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent, onBeforeMount, ref } from '@vue/composition-api';
|
||
|
|
import UserSelector from '../components/UserSelector.vue';
|
||
|
|
import MainUserSettings from '../components/settings/MainUserSettings.vue';
|
||
|
|
import { Store } from 'vuex';
|
||
|
|
import { StateInterface } from 'src/store';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'AdminSettings',
|
||
|
|
components: { UserSelector, MainUserSettings },
|
||
|
|
setup(_, { root }) {
|
||
|
|
const store = <Store<StateInterface>>root.$store;
|
||
|
|
|
||
|
|
onBeforeMount(() => {
|
||
|
|
store.dispatch('user/getUsers').catch(error => console.warn(error));
|
||
|
|
});
|
||
|
|
|
||
|
|
const user = ref(<FG.User>store.state.user.currentUser);
|
||
|
|
|
||
|
|
// can be dropped with VUE3
|
||
|
|
const userUpdated = (value: FG.User) => {
|
||
|
|
user.value = value;
|
||
|
|
console.log(value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return {
|
||
|
|
user,
|
||
|
|
userUpdated
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|