[feat] add view for all members
This commit is contained in:
parent
94c45fe3f4
commit
ed5bd72771
|
@ -0,0 +1,153 @@
|
|||
<template>
|
||||
<q-page>
|
||||
<q-table
|
||||
:columns="cols"
|
||||
:rows="users"
|
||||
:filter="filter"
|
||||
:grid="grid"
|
||||
:pagination="initialPagination"
|
||||
>
|
||||
<template v-slot:body-cell-avatar="props">
|
||||
<q-td :key="props.key" :props="props">
|
||||
<user-avatar v-model="props.row" />
|
||||
</q-td>
|
||||
</template>
|
||||
<template v-slot:top-right="props">
|
||||
<q-input v-model="filter" filled dense debounce="300" placeholder="Suche">
|
||||
<template v-slot:append>
|
||||
<q-icon name="mdi-magnify" />
|
||||
</template>
|
||||
</q-input>
|
||||
<q-btn
|
||||
flat
|
||||
round
|
||||
dense
|
||||
:icon="grid ? 'mdi-land-rows-horizontal' : 'mdi-card-account-details'"
|
||||
@click="grid = !grid"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:item="props">
|
||||
<div class="q-pa-xs col-xs-12 col-sm-6 col-md-4">
|
||||
<q-card bordered>
|
||||
<div class="row justify-center">
|
||||
<q-img :src="avatarURL(props.row.userid)">
|
||||
<template #error>
|
||||
<div
|
||||
class="row fit justify-center items-center"
|
||||
style="background-color: transparent"
|
||||
>
|
||||
<img src="no-image.svg" style="object-fit: contain; height: 100%" />
|
||||
</div>
|
||||
</template>
|
||||
</q-img>
|
||||
</div>
|
||||
<q-card-section>
|
||||
<div class="text-h6">{{ props.row.firstname }} {{ props.row.lastname }}</div>
|
||||
<div class="text-caption">{{ props.row.display_name }}</div>
|
||||
</q-card-section>
|
||||
<q-card-section>
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-email"
|
||||
:href="'mailto:' + props.row.mail"
|
||||
class="q-mr-xs"
|
||||
no-caps
|
||||
/>
|
||||
<div class="text-caption">{{ props.row.mail }}</div>
|
||||
</div>
|
||||
<div class="row items-center">
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
icon="mdi-calendar"
|
||||
class="q-mr-xs"
|
||||
no-caps
|
||||
v-if="props.row.birthday"
|
||||
/>
|
||||
<div class="text-caption" v-if="props.row.birthday">
|
||||
{{ props.row.birthday.toLocaleDateString() }}
|
||||
</div>
|
||||
</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</div>
|
||||
</template>
|
||||
</q-table>
|
||||
</q-page>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onBeforeMount, computed, ref } from 'vue';
|
||||
import { useUserStore, avatarURL } from '@flaschengeist/api';
|
||||
import { UserAvatar } from '@flaschengeist/api/components';
|
||||
|
||||
const cols = [
|
||||
{
|
||||
name: 'avatar',
|
||||
label: 'Profilbild',
|
||||
sortable: false,
|
||||
},
|
||||
{
|
||||
name: 'firstName',
|
||||
label: 'Vorname',
|
||||
field: 'firstname',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'lastName',
|
||||
label: 'Nachname',
|
||||
field: 'lastname',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'displayName',
|
||||
label: 'Anzeigename',
|
||||
field: 'display_name',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'mail',
|
||||
label: 'E-Mail',
|
||||
field: 'mail',
|
||||
sortable: true,
|
||||
},
|
||||
{
|
||||
name: 'birthday',
|
||||
label: 'Geburtstag',
|
||||
field: 'birthday',
|
||||
sortable: true,
|
||||
format: (val: Date | undefined) => {
|
||||
return val?.toLocaleDateString();
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default defineComponent({
|
||||
components: { UserAvatar },
|
||||
setup() {
|
||||
const userStore = useUserStore();
|
||||
onBeforeMount(() => {
|
||||
void userStore.getUsers(true);
|
||||
});
|
||||
const filter = ref('');
|
||||
|
||||
const users = computed(() => userStore.users);
|
||||
const grid = ref(false);
|
||||
return {
|
||||
users,
|
||||
cols,
|
||||
filter,
|
||||
grid,
|
||||
avatarURL,
|
||||
initialPagination: {
|
||||
sortBy: 'lastName',
|
||||
descending: false,
|
||||
page: 1,
|
||||
rowsPerPage: 0,
|
||||
// rowsNumber: xx if getting data from a server
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
|
@ -10,6 +10,16 @@ const mainRoutes: FG_Plugin.MenuRoute[] = [
|
|||
permissions: ['user'],
|
||||
route: { path: 'user', name: 'user', redirect: { name: 'user-settings' } },
|
||||
children: [
|
||||
{
|
||||
title: 'Mitglieder',
|
||||
icon: 'mdi-account-multiple',
|
||||
shortcut: true,
|
||||
route: {
|
||||
path: 'members',
|
||||
name: 'user-members',
|
||||
component: () => import('../pages/Members.vue'),
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'Einstellungen',
|
||||
icon: 'mdi-account-edit',
|
||||
|
|
Loading…
Reference in New Issue