FeatureHeader.vue

<template>
  <div>
    <h1 class="ui header">
      <div class="content">
        <div class="two-block">
          <div
            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"
            >
          </div>
          <div
            v-else
            class="ellipsis"
          >
            {{ currentFeature.title || currentFeature.feature_id }}
          </div>

          <div
            id="feature-actions"
            class="ui icon compact buttons"
          >
            <div>
              <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>
            </div>
            <div>
              <span
                v-if="featuresCount"
                id="feature-count"
                class="ui button tiny-margin basic disabled no-opacity"
              >
                {{ 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>
            </div>
            <div>
              <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="validateFastEdition"
              >
                <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>
        </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 });
    },

    validateFastEdition() {
      this.$store.dispatch('feature/SEND_FEATURE', this.$route.name)
        .then(() => this.$emit('updateEvents'));
    }
  }
};
</script>

<style>
#feature-detail-to-features-list {
  line-height: 0;
  margin-right: 5px;
}
#feature_detail_title_input {
  font-weight: bold;
  font-size: 2em;
  padding: .25em;
}
.two-block {
  display: flex;
  justify-content: space-between;
  margin-bottom: .5em;
}
#feature-actions > div {
  margin-left: .5rem;
}
#feature-actions .no-opacity {
  opacity: 1 !important; /* overide disabled low opacity to customize button style */
}

@media screen and (max-width: 700px) {
  .two-block {
    flex-direction: column-reverse;
  }
  #feature-actions.ui.buttons {
    flex-direction: column;
    align-items: flex-end;
  }
}
</style>