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>
    <!-- //todo : v-if can_create_project  -->
    <router-link
      v-if="user"
      :to="{ name: 'project_create', params: { action: 'create' } }"
      class="ui green basic button"
    >
      <i class="plus icon"></i> Créer un nouveau projet
    </router-link>
    <!-- //todo : v-if can_create_project  -->
    <router-link
      v-if="user"
      :to="{
        name: 'project_type_list',
      }"
      class="ui blue basic button right floated"
    >
      <i class="copy icon"></i> Accéder à la liste des modèles de projets
    </router-link>
    <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_LEVEL_PROJECTS[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 || projects.length === 0"
        >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", "USER_LEVEL_PROJECTS"]),
    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>