From ed5bd72771539643a70f8e6f204aec8069605998 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Gr=C3=B6ger?= <tim@groeger-clan.de>
Date: Wed, 24 Jan 2024 13:29:14 +0100
Subject: [PATCH] [feat] add view for all members

---
 src/pages/Members.vue | 153 ++++++++++++++++++++++++++++++++++++++++++
 src/routes/index.ts   |  10 +++
 2 files changed, 163 insertions(+)
 create mode 100644 src/pages/Members.vue

diff --git a/src/pages/Members.vue b/src/pages/Members.vue
new file mode 100644
index 0000000..641095e
--- /dev/null
+++ b/src/pages/Members.vue
@@ -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>
diff --git a/src/routes/index.ts b/src/routes/index.ts
index 27f57f8..a534944 100644
--- a/src/routes/index.ts
+++ b/src/routes/index.ts
@@ -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',