From 76d607033f03777e68981f5ad11bf3df0bd82f8c Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Tue, 30 Oct 2018 18:40:04 +0100
Subject: [PATCH] added user menu and fixed auth store

---
 layouts/default.vue   | 106 ++++++++++++++++--
 pages/admin/index.vue | 242 ++++++++++++++++++++++--------------------
 store/auth.js         |   2 +
 3 files changed, 223 insertions(+), 127 deletions(-)

diff --git a/layouts/default.vue b/layouts/default.vue
index 588cb8e55..59f3ca73c 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -7,15 +7,38 @@
           href="/">
           <ds-logo />
         </a>
-        <a
-          v-router-link
-          :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href">
-          <ds-avatar
-            :image="user.avatar"
-            :name="user.name"
-            style="float: right"
-            size="42" />
-        </a>
+        <template v-if="isLoggedIn">
+          <no-ssr>
+            <v-popover
+              :open.sync="isPopoverOpen"
+              :open-group="Math.random().toString()"
+              placement="bottom-end"
+              trigger="manual"
+              offset="10"
+              style="float: right">
+              <a
+                :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
+                @click.prevent="toggleMenu()">
+                <ds-avatar
+                  :image="user.avatar"
+                  :name="user.name"
+                  size="42" />
+              </a>
+              <div
+                slot="popover"
+                style="padding-top: .5rem; padding-bottom: .5rem;"
+                @mouseover="popoverMouseEnter"
+                @mouseleave="popoveMouseLeave">
+                Hallo {{ user.name }}
+                <ds-menu
+                  :routes="routes"
+                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"/>
+                <ds-space margin="xx-small" />
+                <nuxt-link :to="{ name: 'logout'}">Logout</nuxt-link>
+              </div>
+            </v-popover>
+          </no-ssr>
+        </template>
       </ds-container>
     </div>
     <ds-container>
@@ -27,10 +50,71 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+import { setTimeout } from 'timers'
+let mouseEnterTimer = null
+let mouseLeaveTimer = null
+
 export default {
+  data() {
+    return {
+      isPopoverOpen: false
+    }
+  },
   computed: {
-    user() {
-      return this.$store.getters['auth/user']
+    ...mapGetters({
+      user: 'auth/user',
+      isLoggedIn: 'auth/isLoggedIn',
+      isAdmin: 'auth/isLoggedIn'
+    }),
+    routes() {
+      if (!this.user.slug) {
+        return []
+      }
+      let routes = [
+        {
+          name: 'Mein Profil',
+          path: `/profile/${this.user.slug}`
+        },
+        {
+          name: 'Einstellungen',
+          path: `/settings`
+        }
+      ]
+      if (this.isAdmin) {
+        routes.push({
+          name: 'Systemverwaltung',
+          path: `/admin`
+        })
+      }
+      return routes
+    }
+  },
+  beforeDestroy() {
+    clearTimeout(mouseEnterTimer)
+    clearTimeout(mouseLeaveTimer)
+  },
+  methods: {
+    toggleMenu() {
+      this.isPopoverOpen = !this.isPopoverOpen
+    },
+    popoverMouseEnter() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
+      if (!this.isPopoverOpen) {
+        mouseEnterTimer = setTimeout(() => {
+          this.isPopoverOpen = true
+        }, 500)
+      }
+    },
+    popoveMouseLeave() {
+      clearTimeout(mouseEnterTimer)
+      clearTimeout(mouseLeaveTimer)
+      if (this.isPopoverOpen) {
+        mouseLeaveTimer = setTimeout(() => {
+          this.isPopoverOpen = false
+        }, 300)
+      }
     }
   }
 }
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 409d7d952..995b438c1 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -3,130 +3,140 @@
     <no-ssr>
       <ds-space margin="large">
         <ds-flex>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Users"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countUsers || 0"
-                  :end-val="statistics.countUsers || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Users"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countUsers || 0"
+                    :end-val="statistics.countUsers || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Posts"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countPosts || 0"
-                  :end-val="statistics.countPosts || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Posts"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countPosts || 0"
+                    :end-val="statistics.countPosts || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Comments"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countComments || 0"
-                  :end-val="statistics.countComments || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Comments"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countComments || 0"
+                    :end-val="statistics.countComments || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-        </ds-flex>
-      </ds-space>
-      <ds-space margin="x-large">
-        <ds-flex>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Notifications"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countNotifications || 0"
-                  :end-val="statistics.countNotifications || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Notifications"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countNotifications || 0"
+                    :end-val="statistics.countNotifications || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Organization"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countOrganizations || 0"
-                  :end-val="statistics.countOrganizations || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Organization"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countOrganizations || 0"
+                    :end-val="statistics.countOrganizations || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Projects"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countProjects || 0"
-                  :end-val="statistics.countProjects || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Projects"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countProjects || 0"
+                    :end-val="statistics.countProjects || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-        </ds-flex>
-      </ds-space>
-      <ds-space margin="x-large">
-        <ds-flex>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Open Invites"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countInvites || 0"
-                  :end-val="statistics.countInvites || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Open Invites"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countInvites || 0"
+                    :end-val="statistics.countInvites || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Follows"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countFollows || 0"
-                  :end-val="statistics.countFollows || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Follows"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countFollows || 0"
+                    :end-val="statistics.countFollows || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
-          <ds-flex-item>
-            <ds-number
-              :count="0"
-              label="Shouts"
-              size="x-large"
-              uppercase>
-              <no-ssr slot="count">
-                <hc-count-to
-                  :start-val="statisticsBefore.countShouts || 0"
-                  :end-val="statistics.countShouts || 0" />
-              </no-ssr>
-            </ds-number>
+          <ds-flex-item :width="{ base: '100%', sm: '50%', md: '33%' }">
+            <ds-space margin="small">
+              <ds-number
+                :count="0"
+                label="Shouts"
+                size="x-large"
+                uppercase>
+                <no-ssr slot="count">
+                  <hc-count-to
+                    :start-val="statisticsBefore.countShouts || 0"
+                    :end-val="statistics.countShouts || 0" />
+                </no-ssr>
+              </ds-number>
+            </ds-space>
           </ds-flex-item>
         </ds-flex>
       </ds-space>
diff --git a/store/auth.js b/store/auth.js
index c95c0e825..da4d567e7 100644
--- a/store/auth.js
+++ b/store/auth.js
@@ -108,8 +108,10 @@ export const actions = {
             login(email: $email, password: $password) {
               id
               name
+              slug
               email
               avatar
+              role
               token
             }
           }