<template>
<body>
<header class="header-menu">
<div class="ui container">
<div class="ui inverted icon menu">
<router-link to="/" class="header item">
<!-- // todo : find out how to get image from .env (si nécessaire) -->
<!-- :src="require(LOGO_PATH)" -->
<img
class="ui mini right spaced image"
src="@/assets/img/logo-neogeo-circle.png"
/>
{{ APPLICATION_NAME }}
</router-link>
<sui-dropdown
v-if="project"
:text="`Projet : ${project.title}`"
class="item"
>
<sui-dropdown-menu>
<router-link
:to="{
name: 'project_detail',
params: { slug: project.slug },
}"
class="item"
>
<i class="home icon"></i>Accueil
</router-link>
<router-link
:to="{ name: 'liste-signalements', params: { slug: project.slug } }"
class="item"
>
<i class="list icon"></i>Liste & Carte
</router-link>
<router-link
:to="{
name: 'project_mapping',
params: { slug: project.slug },
}"
class="item"
>
<i class="map icon"></i>Fonds cartographiques
</router-link>
<router-link
:to="{
name: 'project_members',
params: { slug: project.slug },
}"
class="item"
>
<i class="users icon"></i>Membres
</router-link>
<!-- {% endif %} -->
</sui-dropdown-menu>
</sui-dropdown>
<div class="right menu">
<router-link v-if="user" to="/my_account/" class="item">
{{ userFullname || user.username || "Utilisateur inconnu" }}
<!-- // ? full_name n'existe pas côté django... -->
</router-link>
<div v-if="user && user.is_administrator" class="item ui label vertical">
<span> {{ USER_LEVEL_PROJECTS }}</span
>
<br />
<span v-if="user.is_administrator"> Gestionnaire métier </span>
</div>
<!-- // todo : find out SSO_SETTED in django -->
<!-- // ? condition bizarre (if !sso_setted pui elif !sso_setted) ? -->
<!-- <a class="item" href="{% url 'geocontrib:logout' %}"><i class="ui logout icon"></i></a> -->
<a v-if="user && !SSO_SETTED" @click="logout" class="item"
><i class="ui logout icon"></i>
</a>
<router-link v-else-if="!user" to="/connexion/" class="item"
>Se Connecter</router-link
>
</div>
</div>
</div>
</header>
<main>
<div class="ui stackable grid centered container">
<!-- // todo : add messages -->
<!-- {% if messages %} -->
<!-- <div v-if="false" class="row">
<div class="fourteen wide column">
{% for message in messages %}
{% if message.tags == 'success'%}
<div class="ui positive message">
{% else %}
<div class="ui info message">
{% endif %}
{% endfor %}
<div class="header">
<i class="info circle icon"></i> Informations
</div>
<ul class="list">
{% for message in messages %}
{{ message }}
{% endfor %}
</ul>
</div>
</div>
</div> -->
<!-- {% endif %} -->
<router-view />
<!-- //* Les views sont injectées ici -->
</div>
</main>
<footer>
<div class="ui compact text menu">
<router-link to="/mentions/" class="item">Mentions légales</router-link>
<router-link to="/aide/" class="item">Aide</router-link>
<p class="item">Version {{ PACKAGE_VERSION }}</p>
</div>
</footer>
</body>
</template>
<script>
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
name: "App",
computed: {
...mapState(["projects", "user", "SSO_SETTED", "USER_LEVEL_PROJECTS"]),
...mapGetters(["project"]),
LOGO_PATH: () => process.env.VUE_APP_LOGO_PATH,
APPLICATION_NAME: () => process.env.VUE_APP_APPLICATION_NAME,
PACKAGE_VERSION: () => process.env.PACKAGE_VERSION || "0",
userFullname: function () {
if (this.user.first_name || this.user.last_name) return this.user.first_name + " " + this.user.last_name;
return null;
},
/* USER_LEVEL_PROJECT: function() {
return this.USER_LEVEL_PROJECTS.filter(item => item)
} */
},
// created() {
//this.$store.dispatch("GET_COOKIE", "csrftoken"); // * ne récupère plus le cookie arès avoir vidé le cache ?!
//},
methods: {
logout() {
this.$store.dispatch("LOGOUT");
},
},
};
</script>
<style>
@import "./assets/styles/base.css";
@import "./assets/resources/semantic-ui-2.4.2/semantic.min.css";
.header-menu {
min-width: 560px;
}
.vertical {
flex-direction: column;
justify-content: center;
}
</style>