ProjectHeader.vue

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

      <div class="nine wide column">
        <h1 class="ui header">
          {{ project.title }}
        </h1>
        <div class="ui hidden divider" />
        <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 &&
                isOffline() !== true
            "
            id="subscribe-button"
            class="ui button button-hover-green"
            data-tooltip="S'abonner au projet"
            data-position="top center"
            data-variation="mini"
            @click="OPEN_PROJECT_MODAL('subscribe')"
          >
            <i class="inverted grey envelope icon" />
          </a>
          <router-link
            v-if="
              permissions &&
                permissions.can_update_project &&
                isOffline() !== true
            "
            :to="{ name: 'project_edit', params: { slug } }"
            class="ui button button-hover-orange"
            data-tooltip="Modifier le projet"
            data-position="top center"
            data-variation="mini"
          >
            <i class="inverted grey pencil alternate icon" />
          </router-link>
          <a
            v-if="isProjectAdmin && isOffline() !== true"
            id="delete-button"
            class="ui button button-hover-red"
            data-tooltip="Supprimer le projet"
            data-position="top center"
            data-variation="mini"
            @click="OPEN_PROJECT_MODAL('deleteProject')"
          >
            <i class="inverted grey trash icon" />
          </a>
        </div>

        <button
          v-if="isProjectAdmin && !isSharedProject && project.generate_share_link"
          class="ui teal left labeled icon button share-button"
          @click="copyLink"
        >
          <i class="left icon share square" />
          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"
              @click="confirmMsg = ''"
            />
          </div>
        </div>
      </div>

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

<script>

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

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'
    ]),
    ...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: {
    ...mapState([
      'isOnline'
    ]),
    ...mapMutations('modals', [
      'OPEN_PROJECT_MODAL'
    ]),

    refreshId() {
      return '?ver=' + Math.random();
    },

    isOffline() {
      return navigator.onLine === false;
    },

    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.DISPLAY_LOADER('Envoi des signalements en cours.');

      Promise.all(promises).then(() => {
        this.updateLocalStorage();
        this.$emit('retrieve-info');
      });
    },

    updateLocalStorage() {
      let arraysOffline = [];
      const localStorageArray = localStorage.getItem('geocontrib_offline');
      if (localStorageArray) {
        arraysOffline = JSON.parse(localStorageArray);
      }
      const arraysOfflineOtherProject = arraysOffline.filter(
        (x) => x.project !== this.slug
      );
      this.arraysOffline = [];
      arraysOffline = arraysOfflineOtherProject.concat(
        this.arraysOfflineErrors
      );
      localStorage.setItem('geocontrib_offline', JSON.stringify(arraysOffline));
    },

  }

};
</script>

<style lang="less" scoped>

.project-header {

  .row {

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

      .ui.button, .ui.button .button, .tiny-margin {
        margin:  0.1rem 0 0.1rem 0.1rem !important;
      }

      .share-button {
        margin: 1em 0 0 0;
      }
    }
  }
}

</style>