Index.vue

<template>
  <div class="fourteen wide column">
    <img
      class="ui centered small image"
      src="@/assets/img/logo-neogeo-circle.png"
    />
    <!-- :src="LOGO_PATH" -->
    <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>
    <div class="flex">
      <router-link
        v-if="user && user.can_create_project && isOffline()!=true"
        :to="{ name: 'project_create', params: { action: 'create' } }"
        class="ui green basic button"
      >
        <i class="plus icon"></i> Créer un nouveau projet
      </router-link>
      <router-link
        v-if="user && user.can_create_project && isOffline()!=true"
        :to="{
          name: 'project_type_list',
        }"
        class="ui blue basic button"
      >
        <i class="copy icon"></i> Accéder à la liste des modèles de projets
      </router-link>
    </div>

    <div v-if="projects" class="ui divided items">
      <div v-for="project in projects" class="item" :key="project.slug">
        <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>
              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">
              <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"]),
    APPLICATION_NAME: function () {
      return this.$store.state.configuration.VUE_APP_APPLICATION_NAME;
    },
    APPLICATION_ABSTRACT: function () {
      return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
    },
    DJANGO_BASE_URL: function () {
      return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
    },
  },

  methods: {
    isOffline(){
      return navigator.onLine==false;
    },
    refreshId() {
      //* change path of thumbnail to update image
      return "?ver=" + Math.random();
    },
  },

  created() {
    if (this.$store.getters.project) {
      this.$store.commit("SET_PROJECT_SLUG", null);
    }
  },
};
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: space-between;
}
</style>