Skip to content
Snippets Groups Projects
My_account.vue 10.6 KiB
Newer Older
<template>
  <div v-frag>
    <div class="fourteen wide column">
      <h1>Mon compte</h1>
    </div>

    <div class="row">
      <div class="five wide column">
        <h4 class="ui horizontal divider header">PROFIL</h4>
        <div class="ui divided list">
          <div class="item">
            <div class="right floated content">
              <div class="description">
                <span v-if="user.username">{{ user.username }} </span>
              </div>
            </div>
            <div class="content">Nom d'utilisateur</div>
          </div>
          <div class="item">
            <div class="right floated content">
              <div class="description">
                {{ userFullname }}
              </div>
            </div>
            <div class="content">Nom complet</div>
          </div>
          <div class="item">
            <div class="right floated content">
              <div class="description">
                {{ user.email }}
              </div>
            </div>
            <div class="content">Adresse e-mail</div>
          </div>
          <div class="item">
            <div class="right floated content">
              <div class="description">
                {{ user.is_superuser ? "Oui" : "Non" }}
              </div>
            </div>
            <div class="content">Administrateur</div>
          </div>
        </div>
      </div>

      <div class="nine wide column">
        <h4 class="ui horizontal divider header">MES PROJETS</h4>

        <div class="ui divided items">
          <div v-for="project in projects" :key="project.slug" class="item">
            <!-- {% if permissions|lookup:project.slug %} -->
            <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"></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>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="fourteen wide column">
        <div class="ui three stackable cards">
          <div class="red card">
            <div class="content">
              <div class="center aligned header">
                Mes dernières notifications reçues
              </div>
              <div class="center aligned description">
                <div class="ui relaxed list">
                  <div v-for="item in events" :key="item.id" class="item">
                    <div class="content">
                      <div v-if="item.event_type === 'create'">
                        <a
                          v-if="item.object_type === 'feature'"
                          :href="item.related_feature.feature_url"
                        >
                          Signalement créé
                        </a>
                        <a
                          v-else-if="item.object_type === 'comment'"
                          :href="item.related_feature.feature_url"
                        >
                          Commentaire créé
                        </a>
                        <a
                          v-else-if="item.object_type === 'attachment'"
                          :href="item.related_feature.feature_url"
                        >
                          Pièce jointe ajoutée
                        </a>
                        <a
                          v-else-if="item.object_type === 'project'"
                          :href="item.project_url"
                        >
                          Projet créé
                        </a>
                      </div>

                      <div v-else-if="item.event_type === 'update'">
                        <a
                          v-if="item.object_type === 'feature'"
                          :href="item.related_feature.project_url"
                        >
                          Signalement mis à jour
                        </a>
                        <a
                          v-else-if="item.object_type === 'project'"
                          :href="item.project_url"
                          >à Projet mis à jour
                        </a>
                      </div>

                      <div v-else-if="item.event_type === 'delete'">
                        <span v-if="item.object_type === 'feature'">
                          Signalement supprimé({{ item.data.feature_title }})
                        </span>
                        <i v-else>Événement inconnu</i>
                      </div>
                      <div class="description">
                        <i
                          >[ {{ item.created_on }}
                          <span v-if="user.is_authenticated">
                            , par {{ item.display_user }}
                          </span>
                          ]</i
                        >
                      </div>
                    </div>
                  </div>
                  <i v-if="!events || events.length === 0"
                    >Aucune notification pour le moment.</i
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="orange card">
            <div class="content">
              <div class="center aligned header">Mes derniers signalements</div>
              <div class="center aligned description">
                <div class="ui relaxed list">
                  <div v-for="item in features" :key="item.id" class="item">
                    <div class="content">
                      <div>
                        <a
                          v-if="item.related_feature"
                          :href="item.related_feature.feature_url"
                          >{{ item.related_feature.title }}</a
                        >
                        <span v-else>
                          {{ item.data.feature_title }} (supprimé)
                        </span>
                      </div>
                      <div class="description">
                        <i
                          >[ {{ item.created_on }}
                          <span v-if="user.is_authenticated">
                            , par {{ item.display_user }}
                          </span>
                          ]</i
                        >
                      </div>
                    </div>
                  </div>
                  <i v-if="!features || features.length === 0"
                    >Aucun signalement pour le moment.</i
                  >
                </div>
              </div>
            </div>
          </div>
          <div class="yellow card">
            <div class="content">
              <div class="center aligned header">Mes derniers commentaires</div>
              <div class="center aligned description">
                <div class="ui relaxed list">
                  <div v-for="item in comments" :key="item.id" class="item">
                    <div class="content">
                      <div>
                        <a :href="item.related_feature.feature_url"
                          >"{{ item.related_comment.comment }}"</a
                        >
                      </div>
                      <div class="description">
                        <i
                          >[ {{ item.created_on }}
                          <span v-if="user.is_authenticated">
                            , par {{ item.display_user }}
                          </span>
                          ]</i
                        >
                      </div>
                    </div>
                  </div>
                  <i v-if="!comments || comments.length === 0"
                    >Aucun commentaire pour le moment.</i
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import frag from "vue-frag";
import { mapState } from "vuex";

export default {
  name: "My_account",

  directives: {
    frag,
  },

  data() {
    return {
      events: [],
      features: [],
      comments: [],
    };
  },

  computed: {
    // todo : filter projects to user
    ...mapState(["user", "projects", "USER_LEVEL_PROJECTS"]),
    DJANGO_BASE_URL: () => process.env.VUE_APP_DJANGO_BASE,
    userFullname: function () {
      if (this.user.first_name || this.user.last_name)
        return this.user.first_name + " " + this.user.last_name;
      return null;
    },
  },

  methods: {
    refreshId() {
      return "?ver=" + Math.random();
    },
  },
};
</script>