Index.vue

<template>
  <div class="fourteen wide column">
    <!-- <img class="ui centered small image" :src="LOGO_PATH" /> -->
    <!--//todo: find a way to get img dynamically -->
    <img
      class="ui centered small image"
      src="@/assets/img/logo-neogeo-circle.png"
    />
    <h2 class="ui center aligned icon header">
      <div class="content">
        {{ APPLICATION_NAME }}
        <div class="sub header">{{ APPLICATION_ABSTRACT }}</div>
      </div>
    </h2>

    <h4 id="les_projets" class="ui horizontal divider header">PROJETS</h4>
    <!-- {% if can_create_project %} -->
    <!-- //todo : get base url and add the rest -->
    <router-link to="project_create" class="ui green basic button">
      <i class="plus icon"></i> Créer un nouveau projet
    </router-link>
    <!-- //todo : get base url and add the rest -->
    <router-link to="Project_type_list" class="ui blue basic button right floated">
    <!-- <a class="ui blue basic button right floated" href="#"> -->
      <i class="copy icon"></i> Accéder à la liste des modèles de projets
    </router-link>
    <!-- {% endif %} -->
    <div v-if="projects" class="ui divided items">
      <div v-for="project in projects" class="item" :key="project.slug">
        <div class="ui tiny image">
          <!-- // ? récupérer l'image sur serveur front (et non back) ? -->
          <img :src="project.thumbnail.includes('default') ? require('@/assets/img/default.png') : project.thumbnail" />
        </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>
              Mon niveau d'autorisation :
              <!-- //todo: get this value -->
              <!-- {{ USER_LEVEL_PROJECTS|lookup:project.slug }} -->
              {{
                user && user.is_administrator
                  ? "Gestionnaire métier"
                  : ""
              }}
            </span>
          </div>
          <div class="meta">
            <span class="right floated">
              <i class="calendar icon"></i>&nbsp; {{ project.created_on }}
            </span>
            <span data-tooltip="Membres">
              {{ project.nb_contributors }}&nbsp;<i class="user icon"></i>
            </span>
            <span data-tooltip="Signalements">
              {{ project.nb_published_features }}&nbsp;<i
                class="map marker icon"
              ></i>
            </span>
            <span data-tooltip="Commentaires">
              {{ project.nb_published_features_comments }}&nbsp;<i
                class="comment icon"
              ></i>
            </span>
          </div>
        </div>
      </div>

      <span v-if="!projects">Vous n'avez accès à aucun projet.</span>

      <div class="item"></div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Index",
  computed: {
    ...mapState(["projects", "user"]),
    LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
    APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
    APPLICATION_ABSTRACT: () => process.env.VUE_APP_APPLICATION_ABSTRACT,
  },
};
</script>