<template> <div> <h4 class="ui horizontal divider header"> MES PROJETS </h4> <div class="ui divided items"> <div v-for="project in availableProjects" :key="project.slug" class="item" > <div 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" /> {{ project.created_on }} </span> <span data-tooltip="Membres"> {{ project.nb_contributors }} <i class="user icon" /> </span> <span data-tooltip="Signalements publiés"> {{ project.nb_published_features }} <i class="map marker icon" /> </span> <span data-tooltip="Commentaires"> {{ project.nb_published_features_comments }} <i class="comment icon" /> </span> </div> </div> </div> </div> </div> </div> </template> <script> import { mapState } from 'vuex'; export default { name: 'UserProjectList', computed: { ...mapState([ 'user', 'USER_LEVEL_PROJECTS', 'user_permissions', ]), // todo : filter projects to user ...mapState('projects', [ 'projects' ]), DJANGO_BASE_URL() { return this.$store.state.configuration.VUE_APP_DJANGO_BASE; }, isSharedProject() { return this.$route.path.includes('projet-partage'); }, availableProjects() { if (this.isSharedProject) { return this.projects.filter((el) => el.slug === this.$route.params.slug); } return this.projects; } }, methods: { refreshId() { return '?ver=' + Math.random(); }, } }; </script>