flaschengeist-frontend/src/plugins/user/pages/AdminSettings.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>
      <RoleSettings v-if="canEditRoles" />
    </q-page>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  onBeforeMount,
  ref
} from '@vue/composition-api';
import UserSelector from '../components/UserSelector.vue';
import MainUserSettings from '../components/settings/MainUserSettings.vue';
import RoleSettings from '../components/settings/RoleSettings.vue';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';
import { hasPermission } from 'src/components/permission';
import { PERMISSIONS } from '../permissions';

export default defineComponent({
  name: 'AdminSettings',
  components: { UserSelector, MainUserSettings, RoleSettings },
  setup(_, { root }) {
    const store = <Store<StateInterface>>root.$store;

    onBeforeMount(() => {
      store.dispatch('user/getUsers').catch(error => console.warn(error));
    });

    const canEditRoles = computed(() =>
      hasPermission(PERMISSIONS.ROLES_EDIT, 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);
    };

    return {
      user,
      userUpdated,
      canEditRoles
    };
  }
});
</script>