FeatureHeader.vue

<template>
  <div>
    <h1 class="ui header">
      <div class="content">
        <span
          v-if="fastEditionMode && form && canEditFeature"
          class="form ui half-block"
        >
          <input
            id="feature_detail_title_input"
            :value="form.title"
            type="text"
            required
            maxlength="128"
            name="title"
            @blur="updateTitle"
          >
        </span>
        <span v-else>
          {{ currentFeature.title || currentFeature.feature_id }}
        </span>

        <div class="ui icon right floated compact buttons">
          <router-link
            v-if="displayToListButton"
            id="feature-detail-to-features-list"
            :to="{
              name: 'liste-signalements',
              params: { slug: $route.params.slug },
            }"
            custom
          >
            <div class="ui button tiny-margin teal">
              <i class="ui icon arrow right" />
              Retour à la liste des signalements
            </div>
          </router-link>
          <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>

          <button
            v-if="fastEditionMode && canEditFeature"
            id="save-fast-edit"
            :class="['ui button button-hover-orange tiny-margin', { disabled: false }]"
            data-tooltip="Enregistrer les modifications"
            data-position="bottom center"
            @click="$store.dispatch('feature/SEND_FEATURE', $route.name)"
          >
            <i
              class="save 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 && canEditFeature"
            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="canDeleteFeature && isOnline"
            id="currentFeature-delete"
            class="ui button button-hover-red tiny-margin"
            data-tooltip="Supprimer le signalement"
            data-position="bottom right"
            @click="$emit('setIsDeleting')"
          >
            <i
              class="inverted grey trash alternate icon"
              aria-hidden="true"
            />
          </a>
        </div>
        <div class="ui hidden divider" />
        <div class="sub header prewrap">
          <span
            v-if="fastEditionMode && canEditFeature && form"
            class="form ui half-block"
          >
            <textarea
              :value="form.description.value"
              name="description"
              rows="5"
              @blur="updateDescription"
            />
          </span>
          <span v-else>
            {{ currentFeature.description }}
          </span>
        </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: () => {},
    },
    fastEditionMode: {
      type: Boolean,
      default: false,
    },
    displayToListButton: {
      type: Boolean,
      default: false,
    },
    isFeatureCreator: {
      type: Boolean,
      default: false,
    },
    canEditFeature: {
      type: Boolean,
      default: false,
    },
    canDeleteFeature: {
      type: Boolean,
      default: false,
    },
  },

  computed: {
    ...mapState([
      'user',
      'isOnline',
    ]),
    ...mapState('feature', [
      'currentFeature',
      'form',
    ]),
    ...mapGetters([
      'permissions',
    ]),

    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]
        }
      });
    },

    updateTitle(e) {
      this.$store.commit('feature/UPDATE_FORM_FIELD', { name: 'title', value: e.target.value });
    },

    updateDescription(e) {
      this.$store.commit('feature/UPDATE_FORM_FIELD', { name: 'description', value: e.target.value });
    }
  }
};
</script>

<style>
#next-feature {
  margin-right: .5rem !important;
}
#feature-detail-to-features-list {
  line-height: 0;
  margin-right: 5px;
}
.half-block {
  display: inline-block;
  width: 50%;
}
#feature_detail_title_input {
  font-weight: bold;
  font-size: 2em;
  padding: .25em;
}
</style>