ProjectHeader.vue

<template>
  <div class="project-header ui grid stackable">
    <div class="row">
      <div class="three wide middle aligned column">
        <div class="margin-bottom">
          <img
            class="ui small centered image"
            alt="Thumbnail du projet"
            :src="
              project.thumbnail.includes('default')
                ? require('@/assets/img/default.png')
                : DJANGO_BASE_URL + project.thumbnail + refreshId()
            "
          >
        </div>
        <div class="centered">
          <div
            class="ui basic teal label tiny-margin"
            data-tooltip="Membres"
          >
            <i
              class="user icon"
              aria-hidden="true"
            />{{ project.nb_contributors }}
          </div>
          <div
            class="ui basic teal label tiny-margin"
            data-tooltip="Signalements publiés"
          >
            <i
              class="map marker icon"
              aria-hidden="true"
            />{{ project.nb_published_features }}
          </div>
          <div
            class="ui basic teal label tiny-margin"
            data-tooltip="Commentaires"
          >
            <i
              class="comment icon"
              aria-hidden="true"
            />{{
              project.nb_published_features_comments
            }}
          </div>
        </div>
      </div>

      <div class="nine wide column">
        <h1 class="ui header margin-bottom">
          {{ project.title }}
        </h1>
        <div class="sub header">
          {{ project.description }}
        </div>
      </div>

      <div class="four wide column right-column">
        <div class="ui icon right compact buttons">
          <a
            v-if="
              user &&
                permissions &&
                permissions.can_view_project &&
                isOnline
            "
            id="subscribe-button"
            class="ui button button-hover-green tiny-margin"
            data-tooltip="S'abonner au projet"
            data-position="top center"
            data-variation="mini"
            @click="OPEN_PROJECT_MODAL('subscribe')"
          >
            <i
              class="inverted grey envelope icon"
              aria-hidden="true"
            />
          </a>
          <router-link
            v-if="
              permissions &&
                permissions.can_update_project &&
                isOnline
            "
            :to="{ name: 'project_edit', params: { slug } }"
            class="ui button button-hover-orange tiny-margin"
            data-tooltip="Modifier le projet"
            data-position="top center"
            data-variation="mini"
          >
            <i
              class="inverted grey pencil alternate icon"
              aria-hidden="true"
            />
          </router-link>
          <a
            v-if="isProjectAdmin && isOnline"
            id="delete-button"
            class="ui button button-hover-red tiny-margin"
            data-tooltip="Supprimer le projet"
            data-position="top center"
            data-variation="mini"
            @click="OPEN_PROJECT_MODAL('deleteProject')"
          >
            <i
              class="inverted grey trash icon"
              aria-hidden="true"
            />
          </a>
        </div>

        <button
          v-if="isProjectAdmin && !isSharedProject && project.generate_share_link"
          class="ui teal left labeled icon button share-button tiny-margin"
          @click="copyLink"
        >
          <i
            class="left icon share square"
            aria-hidden="true"
          />
          Copier le lien de partage
        </button>

        <div v-if="confirmMsg">
          <div class="ui positive tiny-margin message">
            <span>
              Le lien a été copié dans le presse-papier
            </span>
            &nbsp;
            <i
              class="close icon"
              aria-hidden="true"
              @click="confirmMsg = ''"
            />
          </div>
        </div>
      </div>

      <div
        v-if="arraysOffline.length > 0"
        class="centered"
      >
        {{ arraysOffline.length }} modification<span v-if="arraysOffline.length > 1">s</span> en attente
        <button
          :disabled="!isOnline"
          class="ui fluid labeled teal icon button"
          @click="sendOfflineFeatures"
        >
          <i
            class="upload icon"
            aria-hidden="true"
          />
          Envoyer au serveur
        </button>
      </div>
    </div>
  </div>
</template>

<script>

import { mapState, mapGetters, mapMutations } from 'vuex';

import featureAPI from '@/services/feature-api';

export default {

  name: 'ProjectHeader',

  props: {
    arraysOffline: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },

  data() {
    return {
      slug: this.$route.params.slug,
      confirmMsg: false,
    };
  },

  computed: {

    ...mapState('projects', [
      'project'
    ]),
    ...mapState([
      'configuration',
    ]),
    ...mapState([
      'user',
      'user_permissions',
      'isOnline',
    ]),
    ...mapGetters([
      'permissions'
    ]),

    DJANGO_BASE_URL() {
      return this.configuration.VUE_APP_DJANGO_BASE;
    },
    isProjectAdmin() {
      return this.user_permissions && this.user_permissions[this.slug] &&
        this.user_permissions[this.slug].is_project_administrator;
    },
    isSharedProject() {
      return this.$route.path.includes('projet-partage');
    },

  },

  methods: {
    ...mapMutations('modals', [
      'OPEN_PROJECT_MODAL'
    ]),

    refreshId() {
      const crypto = window.crypto || window.msCrypto;
      var array = new Uint32Array(1);
      return '?ver=' + crypto.getRandomValues(array); // Compliant for security-sensitive use cases
    },

    copyLink() {
      const sharedLink = window.location.href.replace('projet', 'projet-partage');
      navigator.clipboard.writeText(sharedLink).then(()=> {
        console.log('success');
        this.confirmMsg = true;
      }, () => {
        console.log('failed');
      }
      );
    },

    sendOfflineFeatures() {
      this.arraysOfflineErrors = [];

      const promises = this.arraysOffline.map((feature) => featureAPI.postOrPutFeature({
        data: feature.geojson,
        feature_id: feature.featureId,
        project__slug: feature.project,
        feature_type__slug: feature.geojson.properties.feature_type,
        method: feature.type.toUpperCase(),
      })
        .then((response) => {
          if (!response) {
            this.arraysOfflineErrors.push(feature);
          }
        })
        .catch((error) => {
          console.error(error);
          this.arraysOfflineErrors.push(feature);
        })
      );
      this.$store.commit('DISPLAY_LOADER', 'Envoi des signalements en cours.');

      Promise.all(promises).then(() => {
        this.$emit('updateLocalStorage');
        this.$emit('retrieveInfo');
        this.$store.commit('DISCARD_LOADER');
      });
    },

  }

};
</script>

<style lang="less" scoped>

.project-header {

  .row .right-column {
    display: flex;
    flex-direction: column;

    .ui.buttons {
      justify-content: flex-end;
      a.ui.button {
        flex-grow: 0; /* avoid stretching buttons */
      }
    }
  }
  .centered {
    margin: auto;
    text-align: center;
  }
}

@media  screen and (max-width: 767px) {
  .middle.aligned.column {
    text-align: center;
  }
}

</style>