flaschengeist-users/src/pages/AdminSettings.vue

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

<script lang="ts">
import { Screen } from 'quasar';
import { PERMISSIONS } from '../permissions';
import NewUser from '../components/NewUser.vue';
import { hasPermission } from '@flaschengeist/api';
import { computed, defineComponent, ref } from 'vue';
import UpdateUser from '../components/UpdateUser.vue';
import RoleSettings from '../components/settings/RoleSettings.vue';

export default defineComponent({
  name: 'AdminSettings',
  components: { RoleSettings, UpdateUser, NewUser },
  setup() {
    const canEditRoles = computed(() => hasPermission(PERMISSIONS.ROLES_EDIT));

    interface Tab {
      name: string;
      label: string;
      permissions: Array<string>;
    }

    const tabs: Tab[] = [
      { name: 'user', label: 'Mitglieder', permissions: [PERMISSIONS.EDIT_OTHER, PERMISSIONS.SET_ROLES] },
      { name: 'newUser', label: 'Neues Mitglied', permissions: [PERMISSIONS.SET_ROLES] },
      { name: 'roles', label: 'Rollen', permissions: [PERMISSIONS.ROLES_EDIT] },
    ];

    const _tabs = computed(() => tabs.filter(tab => {
      return tab.permissions.every(permission => hasPermission(permission))
    }))

    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 {
      canEditRoles,
      showDrawer,
      tab,
      tabs: _tabs,
    };
  },
});
</script>