From 93c976624176ee70f52956be238b604d36136cd4 Mon Sep 17 00:00:00 2001
From: Andrea Vos <andrea@avris.it>
Date: Wed, 25 Nov 2020 01:11:17 +0100
Subject: [PATCH] #101 stats - gui

---
 routes/admin.vue | 158 +++++++++++++++++++++++++++++++----------------
 1 file changed, 106 insertions(+), 52 deletions(-)

diff --git a/routes/admin.vue b/routes/admin.vue
index 69fe7aebb..18f66b2fc 100644
--- a/routes/admin.vue
+++ b/routes/admin.vue
@@ -6,56 +6,109 @@
             <T>admin.header</T>
         </h2>
 
-        <Table :data="Object.values(users)" :columns="4" count>
-            <template v-slot:header>
-                <th class="text-nowrap">
-                    <T>admin.user.user</T>
-                </th>
-                <th class="text-nowrap">
-                    <T>admin.user.email</T>
-                </th>
-                <th class="text-nowrap">
-                    <T>admin.user.roles</T>
-                </th>
-                <th class="text-nowrap">
-                    <T>admin.user.profiles</T>
-                </th>
-            </template>
+        <section>
+            <details class="border mb-3">
+                <summary class="bg-light p-3">
+                    <Icon v="users"/>
+                    Users
+                    ({{stats.users.overall}}, {{stats.users.admins}} admins)
+                </summary>
+                <div class="border-top">
+                    <Table :data="Object.values(users)" :columns="4">
+                        <template v-slot:header>
+                            <th class="text-nowrap">
+                                <T>admin.user.user</T>
+                            </th>
+                            <th class="text-nowrap">
+                                <T>admin.user.email</T>
+                            </th>
+                            <th class="text-nowrap">
+                                <T>admin.user.roles</T>
+                            </th>
+                            <th class="text-nowrap">
+                                <T>admin.user.profiles</T>
+                            </th>
+                        </template>
 
-            <template v-slot:row="s">
-                <td>
-                    <Avatar :user="s.el" dsize="2rem"/>
-                    {{s.el.username}}
-                </td>
-                <td>
-                    <p>
-                        <a :href="`mailto:${s.el.email}`" target="_blank" rel="noopener">
-                            {{s.el.email}}
-                        </a>
-                    </p>
-                    <ul v-if="s.el.socialConnections.length" class="list-inline">
-                        <li v-for="conn in s.el.socialConnections" class="list-inline-item">
-                            <Icon :v="socialProviders[conn].icon || conn" set="b"/>
-                        </li>
-                    </ul>
-                </td>
-                <td>
-                    <a href="#" :class="['badge', s.el.roles === 'admin' ? 'badge-primary' : 'badge-light']"
-                       @click.prevent="setRole(s.el.id, s.el.roles === 'admin' ? 'user' : 'admin')">
-                        {{s.el.roles}}
-                    </a>
-                </td>
-                <td>
-                    <ul class="list-unstyled">
-                        <li v-for="locale in s.el.profiles" v-if="locales[locale]">
-                            <LocaleLink :link="`/@${s.el.username}`" :locale="locale">
-                                {{ locales[locale].name }}
-                            </LocaleLink>
-                        </li>
-                    </ul>
-                </td>
-            </template>
-        </Table>
+                        <template v-slot:row="s">
+                            <td>
+                                <Avatar :user="s.el" dsize="2rem"/>
+                                {{s.el.username}}
+                            </td>
+                            <td>
+                                <p>
+                                    <a :href="`mailto:${s.el.email}`" target="_blank" rel="noopener">
+                                        {{s.el.email}}
+                                    </a>
+                                </p>
+                                <ul v-if="s.el.socialConnections.length" class="list-inline">
+                                    <li v-for="conn in s.el.socialConnections" class="list-inline-item">
+                                        <Icon :v="socialProviders[conn].icon || conn" set="b"/>
+                                    </li>
+                                </ul>
+                            </td>
+                            <td>
+                                <a href="#" :class="['badge', s.el.roles === 'admin' ? 'badge-primary' : 'badge-light']"
+                                   @click.prevent="setRole(s.el.id, s.el.roles === 'admin' ? 'user' : 'admin')">
+                                    {{s.el.roles}}
+                                </a>
+                            </td>
+                            <td>
+                                <ul class="list-unstyled">
+                                    <li v-for="locale in s.el.profiles" v-if="locales[locale]">
+                                        <LocaleLink :link="`/@${s.el.username}`" :locale="locale">
+                                            {{ locales[locale].name }}
+                                        </LocaleLink>
+                                    </li>
+                                </ul>
+                            </td>
+                        </template>
+                    </Table>
+                </div>
+            </details>
+        </section>
+
+        <section v-for="(locale, k) in stats.locales" :key="k">
+            <details class="border mb-3" open>
+                <summary class="bg-light p-3">
+                    <LocaleLink :locale="k" link="/">{{locale.name}}</LocaleLink>
+                </summary>
+                <div class="p-3 border-top d-flex justify-content-between flex-column flex-md-row">
+                    <div class="flex-grow-1">
+                        <h4 class="h5">
+                            <Icon v="id-card"/>
+                            Profiles
+                        </h4>
+                        {{locale.profiles}}
+                    </div>
+                    <div class="flex-grow-1">
+                        <h4 class="h5">
+                            <Icon v="tags"/>
+                            Pronouns
+                        </h4>
+                        <ul class="list-unstyled">
+                            <li v-for="(count, pronoun) in locale.pronouns" v-if="count >= 10">
+                                <strong>{{pronoun}}</strong>: {{count}}
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h4 class="h5">
+                            <Icon v="atom-alt"/>
+                            Dictionary
+                        </h4>
+                        <ul class="list-unstyled">
+                            <li>
+                                <strong>Approved</strong>: {{locale.nouns.approved}}
+                            </li>
+                            <li>
+                                <strong>Awaiting</strong>: {{locale.nouns.awaiting}}
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </details>
+        </section>
     </div>
 </template>
 
@@ -72,11 +125,12 @@
                 return {};
             }
 
-            const users = await app.$axios.$get(`/admin/users`, { headers: {
-                authorization: 'Bearer ' + store.state.token,
-            } });
+            const stats = await app.$axios.$get(`/admin/stats`);
+
+            const users = await app.$axios.$get(`/admin/users`);
 
             return {
+                stats,
                 users,
             };
         },