Something went wrong on our end
Forked from
GéoContrib / Géocontrib Frontend
2311 commits behind the upstream repository.
-
Timothee P authoredTimothee P authored
App.vue 5.76 KiB
<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>
<div
id="menu-dropdown"
:class="['ui dropdown item', { 'active visible': menuIsOpen }]"
v-if="project"
@click="menuIsOpen = !menuIsOpen"
>
Projet : {{ project.title }}
<i class="dropdown icon"></i>
<div
:class="['menu', { 'visible transition': menuIsOpen }]"
style="z-index: 401"
>
<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 %} -->
</div>
</div>
<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 v-if="USER_LEVEL_PROJECTS && project">
{{ USER_LEVEL_PROJECTS[project.slug] }}</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="messages" class="row">
<div class="fourteen wide column">
<div
v-for="(message, index) in messages"
:key="'message-' + index"
class="ui positive message"
>
<div class="ui info message">
<div class="header">
<i class="info circle icon"></i> Informations
</div>
<ul class="list">
{{
message.comment
}}
</ul>
</div>
</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",
data() {
return {
menuIsOpen: false,
messages: null,
};
},
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;
},
},
methods: {
logout() {
this.$store.dispatch("LOGOUT");
},
clickOutsideMenu(e) {
if (!e.target.closest("#menu-dropdown")) this.menuIsOpen = false;
},
},
created() {
window.addEventListener("mousedown", this.clickOutsideMenu);
},
beforeDestroy() {
window.removeEventListener("mousedown", this.clickOutsideMenu);
},
};
</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>