123 lines
3.4 KiB
Vue
123 lines
3.4 KiB
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 { useRoute, useRouter } from 'vue-router';
|
|
import { onBeforeMount, watch } from 'vue';
|
|
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));
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
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] },
|
|
];
|
|
|
|
onBeforeMount(async () => {
|
|
if (
|
|
route.query.keys?.length === 0 ||
|
|
!tabs.some((value) => value.name == route.query.q_tab)
|
|
) {
|
|
await router.replace({ query: { q_tab: 'user' } });
|
|
}
|
|
tab.value = route.query.q_tab as string;
|
|
});
|
|
|
|
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');
|
|
|
|
watch(tab, async (val) => {
|
|
await router.replace({ query: { q_tab: val } });
|
|
});
|
|
|
|
return {
|
|
canEditRoles,
|
|
showDrawer,
|
|
tab,
|
|
tabs: _tabs,
|
|
};
|
|
},
|
|
});
|
|
</script>
|