flaschengeist-frontend/src/plugins/user/pages/AdminSettings.vue

<template>
  <div>
    <q-tabs v-model="tab" v-if="$q.screen.gt.sm">
      <q-tab v-for="(tabindex, index) in tabs" :key="'tab'+index" :name="tabindex.name" :label="tabindex.label"/>
    </q-tabs>
    <div class="fit row justify-end" v-else>
      <q-btn flat round icon="mdi-menu" @click="showDrawer = !showDrawer"/>
    </div>
    <q-drawer side="right" v-model="showDrawer" @click="showDrawer = !showDrawer" behavior="mobile">
      <q-list v-model="tab">
        <q-item v-for="(tabindex, index) in tabs" :key="'tab'+index" :active="tab == tabindex.name" clickable
                @click="tab = tabindex.name">
          <q-item-label>{{ tabindex.label }}</q-item-label>
        </q-item>
      </q-list>
    </q-drawer>
    <q-page padding
            class="fit row justify-center content-start items-start q-gutter-sm">
      <q-tab-panels v-model="tab" style="background-color: transparent;" class="q-ma-none q-pa-none" animated>
        <q-tab-panel name="user">
          <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-tab-panel>
        <q-tab-panel name="newUser">
          <h1>hier kommt noch was</h1>
        </q-tab-panel>
        <q-tab-panel name="roles">
          <RoleSettings v-if="canEditRoles"/>
        </q-tab-panel>
      </q-tab-panels>
    </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';
import {Screen} from 'quasar';

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);
    };

    interface Tab {
      name: string;
      label: string;
    }

    const tabs: Tab[] = [
      {name: 'user', label: 'Mitglieder'},
      {name: 'newUser', label: 'Neues Mitglied'},
      {name: 'roles', label: 'Rollen'}
    ]

    const drawer = ref<boolean>(false)

    const showDrawer = computed({
      get: () => {
        return !Screen.gt.sm && drawer.value
      },
      set: (val: boolean) => {
        drawer.value = val
      }
    })

    const tab = ref<string>('user');

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