AppHeader.vue

<template>
  <div id="app-header">
    <div class="menu container">
      <div class="ui inverted icon menu">
        <router-link
          :is="isSharedProject ? 'span' : 'router-link'"
          :to="isSharedProject ? '' : '/'"
          :class="['header item', {disable: isSharedProject}]"
        >
          <img
            class="ui mini right spaced image"
            alt="Logo de l'application"
            :src="logo"
          >
          <span class="desktop">
            {{ APPLICATION_NAME }}
          </span>
        </router-link>
        <div
          v-if="width <= 560 || (width > 560 && project)"
          id="menu-dropdown"
          :class="['ui dropdown item', { 'active visible': menuIsOpen }]"
          @click="menuIsOpen = !menuIsOpen"
        >
          <!-- empty span to occupy space for style if no project -->
          <span>
            <span v-if="project"> Projet : {{ project.title }} </span>
          </span>
          <i
            class="dropdown icon"
            aria-hidden="true"
          />
          <div
            :class="[
              'menu dropdown-list',
              { 'visible transition': menuIsOpen },
            ]"
            style="z-index: 401"
          >
            <router-link
              v-if="project"
              :to="{
                name: 'project_detail',
                params: { slug: project.slug },
              }"
              class="item"
            >
              <i
                class="home icon"
                aria-hidden="true"
              />Accueil
            </router-link>
            <router-link
              v-if="project"
              :to="{
                name: 'liste-signalements',
                params: { slug: project.slug },
              }"
              class="item"
            >
              <i
                class="list icon"
                aria-hidden="true"
              />Liste & Carte
            </router-link>
            <router-link
              v-if="
                project && isOnline &&
                  (user.is_administrator || user.is_superuser || isAdmin)
              "
              :to="{
                name: 'project_mapping',
                params: { slug: project.slug },
              }"
              class="item"
            >
              <i
                class="map icon"
                aria-hidden="true"
              />Fonds cartographiques
            </router-link>
            <router-link
              v-if="
                project && isOnline &&
                  (user.is_administrator || user.is_superuser || isAdmin)
              "
              :to="{
                name: 'project_members',
                params: { slug: project.slug },
              }"
              class="item"
            >
              <i
                class="users icon"
                aria-hidden="true"
              />Membres
            </router-link>
            <div class="mobile">
              <router-link
                :is="isOnline ? 'router-link' : 'span'"
                v-if="user"
                :to="{
                  name: 'my_account',
                  params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
                }"
                class="item"
              >
                {{ userFullname || user.username || "Utilisateur inconnu" }}
              </router-link>
              <div
                v-if="USER_LEVEL_PROJECTS && project"
                class="item ui label vertical no-hover"
              >
                <!-- super user rights are higher than others -->
                {{ user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
                <br>
              </div>
              <div
                v-if="user && user.is_administrator"
                class="item ui label vertical no-hover"
              >
                Gestionnaire métier
              </div>
              <div
                v-if="!DISABLE_LOGIN_BUTTON"
              >
                <a
                  v-if="user"
                  class="item"
                  @click="logout"
                ><i
                  class="ui logout icon"
                  aria-hidden="true"
                />
                </a>
                <router-link
                  v-else-if="!user && !SSO_LOGIN_URL"
                  :to="{ name : 'login' }"
                  class="item"
                >
                  Se connecter
                </router-link>
                <a
                  v-else
                  class="item"
                  :href="SSO_LOGIN_URL"
                >Se connecter</a>
              </div>
            </div>
          </div>
        </div>
        <div class="desktop flex push-right-desktop item title abstract">
          <span>
            {{ APPLICATION_ABSTRACT }}
          </span>
        </div>
        <div class="desktop flex push-right-desktop">
          <router-link
            :is="isOnline ? 'router-link' : 'span'"
            v-if="user"
            :to="{
              name: 'my_account',
              params: { slug: isSharedProject && $route.params.slug ? $route.params.slug : null }
            }"
            class="item"
          >
            {{ userFullname || user.username || "Utilisateur inconnu" }}
          </router-link>
          <div
            v-if="USER_LEVEL_PROJECTS && project"
            class="item ui label vertical no-hover"
          >
            <!-- super user rights are higher than others -->
            {{ user.is_superuser ? 'Administrateur' : USER_LEVEL_PROJECTS[project.slug] }}
            <br>
          </div>
          <div
            v-if="user && user.is_administrator"
            class="item ui label vertical no-hover"
          >
            Gestionnaire métier
          </div>
          <div
            v-if="!DISABLE_LOGIN_BUTTON"
          >
            <a
              v-if="user"
              class="item log-item"
              @click="logout"
            ><i
              class="ui logout icon"
              aria-hidden="true"
            />
            </a>
            <router-link
              v-else-if="!user && !SSO_LOGIN_URL"
              :to="{ name : 'login' }"
              class="item log-item"
            >
              Se Connecter
            </router-link>
            <a
              v-else
              class="item log-item"
              :href="SSO_LOGIN_URL"
            >Se connecter</a>
          </div>
        </div>
      </div>
      <MessageInfo />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MessageInfo from '@/components/MessageInfo';

export default {

  name: 'AppHeader',

  components: {
    MessageInfo
  },

  data() {
    return {
      menuIsOpen: false,
      width: window.innerWidth > 0 ? window.innerWidth : screen.width,
    };
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'configuration',
      'loader',
      'isOnline'
    ]),
    ...mapState('projects', [
      'projects',
      'project',
    ]),

    APPLICATION_NAME() {
      return this.configuration.VUE_APP_APPLICATION_NAME;
    },
    APPLICATION_ABSTRACT() {
      return this.$store.state.configuration.VUE_APP_APPLICATION_ABSTRACT;
    },
    DISABLE_LOGIN_BUTTON() {
      return this.configuration.VUE_APP_DISABLE_LOGIN_BUTTON;
    },
    SSO_LOGIN_URL() {
      return this.configuration.VUE_APP_LOGIN_URL;
    },

    logo() {
      return this.configuration.VUE_APP_LOGO_PATH;
    },
    userFullname() {
      if (this.user.first_name || this.user.last_name) {
        return `${this.user.first_name} ${this.user.last_name}`;
      }
      return null;
    },
    isAdmin() {
      return this.USER_LEVEL_PROJECTS &&
        this.USER_LEVEL_PROJECTS[this.project.slug] === 'Administrateur projet'
        ? true
        : false;
    },
    isSharedProject() {
      return this.$route.path.includes('projet-partage');
    }
  },

  created() {
    window.addEventListener('mousedown', this.clickOutsideMenu);
  },

  beforeDestroy() {
    window.removeEventListener('mousedown', this.clickOutsideMenu);
  },

  methods: {
    logout() {
      this.$store.dispatch('LOGOUT');
    },

    clickOutsideMenu(e) {
      if (e.target.closest && !e.target.closest('#menu-dropdown')) {
        this.menuIsOpen = false;
      }
    },
  }

};
</script>

<style lang="less" scoped>

.menu.container {
  position: relative;
}

.disable:hover {
  cursor: default !important;
  background-color: #373636 !important;
}

/* keep above map controls or buttons */
#app-header {
  z-index: 1001;
  .menu.container .ui.inverted.icon.menu { /* avoid adding space when messages are displayed */
    margin: 0;
  }
}
.ui.menu .ui.dropdown .menu {
  .item.no-hover:hover {
    cursor: auto !important;
    background: white !important;
  }

}

/* copy style to apply inside nested div */
.ui.menu .ui.dropdown .menu .item {
  margin: 0;
  text-align: left;
  font-size: 1em !important;
  padding: 0.78571429em 1.14285714em !important;
  background: 0 0 !important;
  color: #252525 !important;
  text-transform: none !important;
  font-weight: 400 !important;
  box-shadow: none !important;
  transition: none !important;
}

.item.title::before {
  background: none !important;
}

.log-item {
  height: 100% !important;
}

</style>