ProjectsListItem.vue

<template>
  <div class="item">
    <div class="ui tiny image">
      <img
        :src="
          !project.thumbnail
            ? require('@/assets/img/default.png')
            : DJANGO_BASE_URL + project.thumbnail + refreshId()
        "
      >
    </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">
          <strong v-if="project.moderation">Projet modéré</strong>
          <strong v-else>Projet non modéré</strong>
        </span>
        <span>Niveau d'autorisation requis :
          {{ project.access_level_pub_feature }}</span><br>
        <span v-if="user">
          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">
          <em class="calendar icon" />&nbsp; {{ project.created_on }}
        </span>
        <span data-tooltip="Membres">
          {{ project.nb_contributors }}&nbsp;<em class="user icon" />
        </span>
        <span data-tooltip="Signalements publiés">
          {{ project.nb_published_features }}&nbsp;<em
            class="map marker icon"
          />
        </span>
        <span data-tooltip="Commentaires">
          {{ project.nb_published_features_comments }}&nbsp;<em
            class="comment icon"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState } from 'vuex';

export default {

  name: 'ProjectsListItem',

  props: {
    project: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS'
    ]),
    DJANGO_BASE_URL() {
      return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
    },
  },

  methods: {
    refreshId() {
      const crypto = window.crypto || window.msCrypto;
      var array = new Uint32Array(1);
      return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
    },
  }
};

</script>