flaschengeist-frontend/src/plugins/user/components/UpdateUser.vue

57 lines
1.4 KiB
Vue

<template>
<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"
@update:user="updateUser"
/>
</q-card>
</template>
<script lang="ts">
import { defineComponent, ref } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from '../../../store';
import UserSelector from '../components/UserSelector.vue';
import MainUserSettings from '../components/settings/MainUserSettings.vue';
export default defineComponent({
name: 'UpdateUser',
components: { UserSelector, MainUserSettings },
setup(_, { root }) {
const store = <Store<StateInterface>>root.$store;
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);
};
function updateUser(value: FG.User) {
store.dispatch('user/updateUser', value).catch((error) => {
console.warn(error);
});
}
return {
user,
userUpdated,
updateUser,
};
},
});
</script>
<style scoped></style>