141 lines
3.5 KiB
Vue
141 lines
3.5 KiB
Vue
<template>
|
|
<div class="user-widget" :class="{'user-widget--is-profile': isProfile}">
|
|
<div class="user-widget__avatar" @click="openSidebar()">
|
|
<avatar :avatar-url="avatarUrl" :icon-highlighted="isProfile"/>
|
|
</div>
|
|
<!-- todo: migrate and remove -->
|
|
<widget-popover v-if="showPopover && showMenu"
|
|
@hide-me="showPopover = false"
|
|
:mobile="mobile"
|
|
class="user-widget__popover ">
|
|
<li class="popover-links__link popover-links__link--large popover-links__link--emph">{{firstName}} {{lastName}}
|
|
</li>
|
|
<li class="popover-links__link popover-links__link--large">
|
|
<router-link to="/me/activity" @click="toggleShowPopover()">Aktivität</router-link>
|
|
</li>
|
|
<li class="popover-links__link popover-links__link--large" @click="toggleShowPopover()">
|
|
<router-link to="/me/profile">Profil</router-link>
|
|
</li>
|
|
<li class="popover-links__link popover-links__link--large" @click="toggleShowPopover()">
|
|
<router-link to="/me/myclasses">Klassenliste</router-link>
|
|
</li>
|
|
<li class="popover-links__link popover-links__link--large" data-cy="logout" @click="logout()">
|
|
<a>Logout</a>
|
|
</li>
|
|
</widget-popover>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import LOGOUT_MUTATION from '@/graphql/gql/mutations/logoutUser.gql';
|
|
import TOGGLE_SIDEBAR from '@/graphql/gql/local/mutations/toggleSidebar.gql';
|
|
import Avatar from '@/components/profile/Avatar';
|
|
import WidgetPopover from '@/components/WidgetPopover';
|
|
|
|
export default {
|
|
props: {
|
|
firstName: {
|
|
type: String
|
|
},
|
|
lastName: {
|
|
type: String
|
|
},
|
|
avatarUrl: {
|
|
type: String
|
|
},
|
|
mobile: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showMenu: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
showPopover: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
openSidebar() {
|
|
this.$apollo.mutate({
|
|
mutation: TOGGLE_SIDEBAR,
|
|
variables: {
|
|
open: true
|
|
}
|
|
});
|
|
},
|
|
// todo: remove
|
|
toggleShowPopover() {
|
|
if (this.showMenu) {
|
|
this.showPopover = !this.showPopover;
|
|
}
|
|
},
|
|
logout() {
|
|
this.$apollo.mutate({
|
|
mutation: LOGOUT_MUTATION,
|
|
}).then(({data}) => {
|
|
if (data.logout.success) {
|
|
location.replace('/logout')
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
components: {
|
|
Avatar, WidgetPopover
|
|
},
|
|
computed: {
|
|
isProfile() {
|
|
return this.$route.meta.isProfile;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "@/styles/_variables.scss";
|
|
@import "@/styles/_mixins.scss";
|
|
|
|
.user-widget {
|
|
color: $color-silver-dark;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
position: relative;
|
|
// todo: do we need the margin right always? just do it where needed --> content block actions and objecives override this
|
|
margin-right: $medium-spacing;
|
|
|
|
&__popover {
|
|
top: 40px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
&__name {
|
|
padding: 0px $small-spacing;
|
|
color: $color-silver-dark;
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__date {
|
|
font-family: $sans-serif-font-family;
|
|
}
|
|
|
|
&__avatar {
|
|
width: 30px;
|
|
height: 30px;
|
|
fill: $color-silver-dark;
|
|
cursor: pointer;
|
|
}
|
|
|
|
&--is-profile {
|
|
& > span {
|
|
color: $color-brand;
|
|
}
|
|
}
|
|
}
|
|
</style>
|