FeatureHeader.vue

<template>
  <div>
    <h1 class="ui header">
      <div class="content">
        {{ currentFeature.title || currentFeature.feature_id }}
        <div class="ui icon right floated compact buttons">
          <span
            v-if="featuresCount"
            id="feature-count"
            class="ui button tiny-margin basic"
          >
            {{ parseInt($route.query.offset) + 1 }} sur {{ featuresCount }}
          </span>
          <button
            v-if="queryparams"
            id="previous-feature"
            :class="['ui button button-hover-green tiny-margin', { disabled: queryparams.previous < 0 }]"
            data-tooltip="Voir le précédent signalement"
            data-position="bottom center"
            @click="toFeature('previous')"
          >
            <i
              class="angle left fitted icon"  
              aria-hidden="true"
            />
          </button>
          <button
            v-if="queryparams"
            id="next-feature"
            :class="[
              'ui button button-hover-green tiny-margin',
              { disabled: queryparams.next >= featuresCount }
            ]"
            data-tooltip="Voir le prochain signalement"
            data-position="bottom center"
            @click="toFeature('next')"
          >
            <i
              class="angle right fitted icon"
              aria-hidden="true"
            />
          </button>

          <router-link
            v-if="permissions && permissions.can_create_feature"
            id="add-feature"
            :to="{
              name: 'ajouter-signalement',
              params: {
                slug_type_signal: $route.params.slug_type_signal || featureType.slug,
              },
            }"
            class="ui button button-hover-green tiny-margin"
            data-tooltip="Ajouter un signalement"
            data-position="bottom center"
          >
            <i
              class="plus icon"
              aria-hidden="true"
            />
          </router-link>

          <router-link
            v-if="slugSignal &&
              ((permissions && permissions.can_update_feature) ||
                isFeatureCreator ||
                isModerator)
            "
            id="edit-feature"
            :to="{
              name: 'editer-signalement',
              params: {
                slug_signal: slugSignal,
                slug_type_signal: $route.params.slug_type_signal || featureType.slug,
              },
              query: $route.query
            }"
            class="ui button button-hover-orange tiny-margin"
            data-tooltip="Éditer le signalement"
            data-position="bottom center"
          >
            <i
              class="inverted grey pencil alternate icon"
              aria-hidden="true"
            />
          </router-link>

          <a
            v-if="((permissions && permissions.can_update_feature) || isFeatureCreator) && isOnline"
            id="currentFeature-delete"
            class="ui button button-hover-red tiny-margin"
            data-tooltip="Supprimer le signalement"
            data-position="bottom right"
            @click="$emit('setIsCancelling')"
          >
            <i
              class="inverted grey trash alternate icon"
              aria-hidden="true"
            />
          </a>
        </div>
        <div class="ui hidden divider" />
        <div class="sub header prewrap">
          {{ currentFeature.description }}
        </div>
      </div>
    </h1>
  </div>
</template>

<script>

import { mapState, mapGetters } from 'vuex';

export default {

  name: 'FeatureHeader',

  props: {
    featuresCount : {
      type: Number,
      default: null,
    },
    slugSignal: {
      type: String,
      default: '',
    },
    featureType: {
      type: Object,
      default: () => {},
    },
  },

  computed: {
    ...mapState([
      'user',
      'USER_LEVEL_PROJECTS',
      'isOnline',
    ]),
    ...mapState('feature', [
      'currentFeature'
    ]),

    ...mapGetters([
      'permissions',
    ]),

    isFeatureCreator() {
      if (this.currentFeature && this.user) {
        return this.currentFeature.creator === this.user.id;
      }
      return false;
    },

    isModerator() {
      return this.USER_LEVEL_PROJECTS && this.USER_LEVEL_PROJECTS[this.$route.params.slug] === 'Modérateur';
    },

    queryparams() {
      return this.$route.query.offset >= 0 ? {
        previous: parseInt(this.$route.query.offset) - 1,
        next: parseInt(this.$route.query.offset) + 1
      } : null;
    },
  },

  methods: {
    toFeature(direction) {
      this.$emit('tofeature', {
        name: 'details-signalement-filtre',
        params: {
          slug_type_signal: this.currentFeature.feature_type.slug,
        },
        query: {
          ...this.$route.query,
          offset: this.queryparams[direction]
        }
      });
    }
  }
};
</script>

<style>
#next-feature {
  margin-right: .5rem !important;
}
</style>