791aebc346
Some checks failed
continuous-integration/drone/push Build is failing
- Complete GGZ Ecademy Nuxt.js user portal - Learning products browser and management - Member management interface - User authentication and roles - Multi-language support (NL/EN) - Vuex store for state management - Component-based architecture
86 lines
2.1 KiB
Vue
86 lines
2.1 KiB
Vue
<template>
|
|
<v-card class="pa-6" :color="$vuetify.theme.dark ? 'primary' : 'txt'" flat>
|
|
<v-card-title class="white--text lighten-1 font-weight-bold"
|
|
>{{ $t('general.hi') }}
|
|
{{ $auth.user.first_name | capitalize }}!</v-card-title
|
|
>
|
|
<v-card-text class="white--text text font-weight-light">
|
|
<span v-if="hasNotifications">
|
|
{{ $t('general.dashboard.current') }}
|
|
<span
|
|
class="warning--text mx-1"
|
|
@click.stop="
|
|
$store.commit('navigation/SWITCH_RIGHT_DRAWER', {
|
|
component: 'Notifications',
|
|
})
|
|
"
|
|
:style="{ cursor: 'pointer' }"
|
|
>{{ notifications.length }} {{ $t('rightMenu.notes') }}</span
|
|
>
|
|
{{ $t('general.dashboard.require') }}<br
|
|
/></span>
|
|
|
|
<span v-if="$store.getters.isMember">
|
|
Goed om je te zien. Update de lidmaatschapgegevens of bekijk de management informatie via de tegels hieronder of via het menu.</span>
|
|
|
|
<span v-else>Welkom in je dashboard van MijnGGZEcademy. Klik op onderstaande tegels of navigeer via het menu linksboven in je scherm.<br /><br />
|
|
Succes!</span>
|
|
|
|
<span v-if="$auth.user.last_login_at">
|
|
De laatste keer heb je ingelogd op
|
|
{{ formatDate($auth.user.last_login_at) }}. Fijne dag!
|
|
</span>
|
|
</v-card-text>
|
|
<v-img
|
|
class="img plant"
|
|
:src="require(`@/assets/img/plant.png`)"
|
|
contain
|
|
></v-img>
|
|
<v-img
|
|
class="img cat"
|
|
:src="require(`@/assets/img/cat.png`)"
|
|
contain
|
|
></v-img>
|
|
</v-card>
|
|
</template>
|
|
|
|
<script>
|
|
import dayjs from 'dayjs'
|
|
import nl from 'dayjs/locale/nl'
|
|
|
|
export default {
|
|
computed: {
|
|
notifications() {
|
|
return this.$store.getters.notifications
|
|
},
|
|
hasNotifications() {
|
|
return this.$store.getters.hasNotifications
|
|
},
|
|
},
|
|
methods: {
|
|
formatDate(date) {
|
|
dayjs.locale('nl')
|
|
return dayjs(date).format('dddd D MMMM YYYY').toLowerCase()
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.text {
|
|
width: 650px;
|
|
color: white !important;
|
|
}
|
|
.img {
|
|
position: absolute;
|
|
}
|
|
.plant {
|
|
right: -35px;
|
|
top: -21px;
|
|
}
|
|
.cat {
|
|
right: 150px;
|
|
top: -96px;
|
|
}
|
|
</style>
|