[admin][stats] flags

components/ListExpandable.vue

@@ -0,0 +1,29 @@
+<template>
+    <ul class="list-unstyled">
+        <li v-for="(value, key, i) in data" v-if="expanded || i < 10">
+            <slot v-bind:k="k" v-bind:v="v">
+                <strong>{{key}}</strong>: {{value}}
+            </slot>
+        </li>
+        <li v-if="!expanded">
+            <a href="#" @click.prevent="expanded = true">
+                <T>table.more</T>
+                <Icon v="caret-down"/>
+            </a>
+        </li>
+    </ul>
+</template>
+
+<script>
+    export default {
+        props: {
+            data: { required: true },
+            initial: { default: 10, },
+        },
+        data() {
+            return {
+                expanded: false,
+            };
+        }
+    }
+</script>

locale/en/translations.suml

@@ -424,6 +424,7 @@ table:
     count: 'Count'
     sort: 'Drag to sort'
     scrollUp: 'Scroll to the top'
+    more: 'Show more'
 
 api:
     header: 'Public API'

locale/pl/translations.suml

@@ -798,6 +798,7 @@ table:
     count: 'Liczba'
     sort: 'Przeciągnij by posortować'
     scrollUp: 'Przewiń na samą górę'
+    more: 'Pokaż więcej'
 
 api:
     header: 'Publiczne API'

routes/admin.vue

@@ -86,11 +86,14 @@
                             <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>
+                        <ListExpandable :data="locale.pronouns"/>
+                    </div>
+                    <div class="flex-grow-1">
+                        <h4 class="h5">
+                            <Icon v="flag"/>
+                            Flags
+                        </h4>
+                        <ListExpandable :data="locale.flags"/>
                     </div>
                     <div class="flex-grow-1">
                         <h4 class="h5">
@@ -118,7 +121,9 @@
 
     export default {
         data() {
-            return { socialProviders }
+            return {
+                socialProviders,
+            }
         },
         async asyncData({ app, store }) {
             if (!store.state.user || store.state.user.roles !== 'admin') {

server/routes/admin.js

@@ -59,8 +59,9 @@ router.get('/admin/stats', async (req, res) => {
     const locales = {};
     for (let locale in req.locales) {
         if (!req.locales.hasOwnProperty(locale)) { continue; }
-        const profiles = await req.db.all(SQL`SELECT pronouns FROM profiles WHERE locale=${locale}`);
+        const profiles = await req.db.all(SQL`SELECT pronouns, flags FROM profiles WHERE locale=${locale}`);
         const pronouns = {}
+        const flags = {}
         for (let profile of profiles) {
             const pr = JSON.parse(profile.pronouns);
             for (let pronoun in pr) {
@@ -75,6 +76,14 @@ router.get('/admin/stats', async (req, res) => {
                 }
                 pronouns[p] += pr[pronoun] === 1 ? 1 : 0.5;
             }
+
+            const fl = JSON.parse(profile.flags);
+            for (let flag of fl) {
+                if (flags[flag] === undefined) {
+                    flags[flag] = 0;
+                }
+                flags[flag] += 1;
+            }
         }
 
         locales[locale] = {
@@ -82,6 +91,7 @@ router.get('/admin/stats', async (req, res) => {
             url: req.locales[locale].url,
             profiles: profiles.length,
             pronouns: sortByValue(pronouns, true),
+            flags: sortByValue(flags, true),
             nouns: {
                 approved: (await req.db.get(SQL`SELECT count(*) AS c FROM nouns WHERE locale=${locale} AND approved=1`)).c,
                 awaiting: (await req.db.get(SQL`SELECT count(*) AS c FROM nouns WHERE locale=${locale} AND approved=0`)).c,