<template>
<div v-frag>
<div class="fourteen wide column">
<h1>Mon compte</h1>
</div>
<div class="row">
<div class="five wide column">
<h4 class="ui horizontal divider header">PROFIL</h4>
<div class="ui divided list">
<div class="item">
<div class="right floated content">
<div class="description">
<span v-if="user.username">{{ user.username }} </span>
</div>
</div>
<div class="content">Nom d'utilisateur</div>
</div>
<div class="item">
<div class="right floated content">
<div class="description">
{{ userFullname }}
</div>
</div>
<div class="content">Nom complet</div>
</div>
<div class="item">
<div class="right floated content">
<div class="description">
{{ user.email }}
</div>
</div>
<div class="content">Adresse e-mail</div>
</div>
<div class="item">
<div class="right floated content">
<div class="description">
{{ user.is_superuser ? "Oui" : "Non" }}
</div>
</div>
<div class="content">Administrateur</div>
</div>
</div>
</div>
<div class="nine wide column">
<h4 class="ui horizontal divider header">MES PROJETS</h4>
<div class="ui divided items">
<div v-for="project in projects" :key="project.slug" class="item">
<!-- {% if permissions|lookup:project.slug %} -->
<div v-frag v-if="user_permissions[project.slug].can_view_project">
<div class="ui tiny image">
<img
v-if="project.thumbnail"
class="ui small image"
:src="
project.thumbnail.includes('default')
? require('@/assets/img/default.png')
: DJANGO_BASE_URL + project.thumbnail + refreshId()
"
height="200"
/>
</div>
<div class="middle aligned content">
<router-link
:to="{
name: 'project_detail',
params: { slug: project.slug },
}"
class="header"
>{{ project.title }}</router-link
>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="meta">
<span class="right floated"
>Projet {{ project.moderation ? "" : "non" }} modéré</span
>
<span
>Niveau d'autorisation requis :
{{ project.access_level_pub_feature }}</span
><br />
<span>
Mon niveau d'autorisation :
<span v-if="USER_LEVEL_PROJECTS && project">{{
USER_LEVEL_PROJECTS[project.slug]
}}</span>
<span v-if="user && user.is_administrator">{{
"+ Gestionnaire métier"
}}</span>
</span>
</div>
<div class="meta">
<span
class="right floated"
:data-tooltip="`Projet créé le ${project.created_on}`"
>
<i class="calendar icon"></i> {{ project.created_on }}
</span>
<span data-tooltip="Membres">
{{ project.nb_contributors }} <i class="user icon"></i>
</span>
<span data-tooltip="Signalements">
{{ project.nb_published_features }} <i
class="map marker icon"
></i>
</span>
<span data-tooltip="Commentaires">
{{ project.nb_published_features_comments }} <i
class="comment icon"
></i>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="fourteen wide column">
<div class="ui three stackable cards">
<div class="red card">
<div class="content">
<div class="center aligned header">
Mes dernières notifications reçues
</div>
<div class="center aligned description">
<div class="ui relaxed list">
<div v-for="item in events" :key="item.id" class="item">
<div class="content">
<div v-if="item.event_type === 'create'">
<a
v-if="item.object_type === 'feature'"
:href="item.related_feature.feature_url"
>
Signalement créé
</a>
<a
v-else-if="item.object_type === 'comment'"
:href="item.related_feature.feature_url"
>
Commentaire créé
</a>
<a
v-else-if="item.object_type === 'attachment'"
:href="item.related_feature.feature_url"
>
Pièce jointe ajoutée
</a>
<a
v-else-if="item.object_type === 'project'"
:href="item.project_url"
>
Projet créé
</a>
</div>
<div v-else-if="item.event_type === 'update'">
<a
v-if="item.object_type === 'feature'"
:href="item.related_feature.project_url"
>
Signalement mis à jour
</a>
<a
v-else-if="item.object_type === 'project'"
:href="item.project_url"
>à Projet mis à jour
</a>
</div>
<div v-else-if="item.event_type === 'delete'">
<span v-if="item.object_type === 'feature'">
Signalement supprimé({{ item.data.feature_title }})
</span>
<i v-else>Événement inconnu</i>
</div>
<div class="description">
<i
>[ {{ item.created_on }}
<span v-if="user.is_authenticated">
, par {{ item.display_user }}
</span>
]</i
>
</div>
</div>
</div>
<i v-if="!events || events.length === 0"
>Aucune notification pour le moment.</i
>
</div>
</div>
</div>
</div>
<div class="orange card">
<div class="content">
<div class="center aligned header">Mes derniers signalements</div>
<div class="center aligned description">
<div class="ui relaxed list">
<div v-for="item in features" :key="item.id" class="item">
<div class="content">
<div>
<a
v-if="item.related_feature"
:href="item.related_feature.feature_url"
>{{ item.related_feature.title }}</a
>
<span v-else>
{{ item.data.feature_title }} (supprimé)
</span>
</div>
<div class="description">
<i
>[ {{ item.created_on }}
<span v-if="user.is_authenticated">
, par {{ item.display_user }}
</span>
]</i
>
</div>
</div>
</div>
<i v-if="!features || features.length === 0"
>Aucun signalement pour le moment.</i
>
</div>
</div>
</div>
</div>
<div class="yellow card">
<div class="content">
<div class="center aligned header">Mes derniers commentaires</div>
<div class="center aligned description">
<div class="ui relaxed list">
<div v-for="item in comments" :key="item.id" class="item">
<div class="content">
<div>
<a :href="item.related_feature.feature_url"
>"{{ item.related_comment.comment }}"</a
>
</div>
<div class="description">
<i
>[ {{ item.created_on }}
<span v-if="user.is_authenticated">
, par {{ item.display_user }}
</span>
]</i
>
</div>
</div>
</div>
<i v-if="!comments || comments.length === 0"
>Aucun commentaire pour le moment.</i
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import frag from "vue-frag";
import { mapState } from "vuex";
export default {
name: "My_account",
directives: {
frag,
},
data() {
return {
events: [],
features: [],
comments: [],
};
},
computed: {
// todo : filter projects to user
...mapState([
"user",
"projects",
"USER_LEVEL_PROJECTS",
"user_permissions",
]),
DJANGO_BASE_URL: function () {
return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
},
userFullname: function () {
if (this.user.first_name || this.user.last_name)
return this.user.first_name + " " + this.user.last_name;
return null;
},
},
methods: {
refreshId() {
return "?ver=" + Math.random();
},
setEvents(data){
this.events = data.events;
this.features = data.features;
this.comments = data.comments;
},
getEvents(){
this.$store
.dispatch("USER_EVENTS")
.then((data)=>{
this.setEvents(data)
})
}
},
created(){
this.getEvents();
}
};
</script>