mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
added user menu and fixed auth store
This commit is contained in:
Grzegorz Leoniec
parent
f1a88bda10
commit
76d607033f
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -108,8 +108,10 @@ export const actions = {
|
||||
login(email: $email, password: $password) {
|
||||
id
|
||||
name
|
||||
slug
|
||||
email
|
||||
avatar
|
||||
role
|
||||
token
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user