Feature_edit.vue

<template>
  <div v-frag>
    <div class="fourteen wide column">
      <h1 v-if="feature && currentRouteName === 'editer-signalement'">
        Mise à jour du signalement "{{ feature.title || feature.feature_id }}"
      </h1>
      <h1
        v-else-if="feature_type && currentRouteName === 'ajouter-signalement'"
      >
        Création d'un signalement <small>[{{ feature_type.title }}]</small>
      </h1>

      <form
        id="form-feature-edit"
        action=""
        method="post"
        enctype="multipart/form-data"
        class="ui form"
      >
        <!-- Feature Fields -->
        <div class="two fields">
          <div :class="field_title">
            <label :for="form.title.id_for_label">{{ form.title.label }}</label>
            <input
              :id="form.title.id_for_label"
              v-model="form.title.value"
              type="text"
              required
              :maxlength="form.title.field.max_length"
              :name="form.title.html_name"
              @blur="updateStore"
            >
            <ul
              id="errorlist-title"
              class="errorlist"
            >
              <li
                v-for="error in form.title.errors"
                :key="error"
              >
                {{ error }}
              </li>
            </ul>
          </div>
          <div class="required field">
            <label :for="form.status.id_for_label">{{
              form.status.label
            }}</label>
            <Dropdown
              :options="allowedStatusChoices"
              :selected="selected_status.name"
              :selection.sync="selected_status"
            />
          </div>
        </div>
        <div class="field">
          <label :for="form.description.id_for_label">{{
            form.description.label
          }}</label>
          <textarea
            v-model="form.description.value"
            :name="form.description.html_name"
            rows="5"
            @blur="updateStore"
          />
        </div>

        <!-- Geom Field -->
        <div class="field">
          <label :for="form.geom.id_for_label">{{ form.geom.label }}</label>

          <!-- Import GeoImage -->
          <div
            v-if="feature_type && feature_type.geom_type === 'point'"
            v-frag
          >
            <p v-if="isOffline() !== true">
              <button
                id="add-geo-image"
                type="button"
                class="ui compact button"
                @click="toggleGeoRefModal"
              >
                <i class="file image icon" />Importer une image géoréférencée
              </button>
              Vous pouvez utiliser une image géoréférencée pour localiser le
              signalement.
            </p>

            <div
              v-if="showGeoRef"
              class="ui dimmer modals page transition visible active"
              style="display: flex !important"
            >
              <div
                class="ui mini modal transition visible active"
                style="display: block !important"
              >
                <i
                  class="close icon"
                  @click="toggleGeoRefModal"
                />
                <div class="content">
                  <h3>Importer une image géoréférencée</h3>
                  <form
                    id="form-geo-image"
                    class="ui form"
                    enctype="multipart/form-data"
                  >
                    <p>
                      Attention, si vous avez déjà saisi une géométrie, celle
                      issue de l'image importée l'écrasera.
                    </p>
                    <div class="field georef-btn">
                      <label>Image (png ou jpeg)</label>
                      <label
                        class="ui icon button"
                        for="image_file"
                      >
                        <i class="file icon" />
                        <span class="label">{{ geoRefFileLabel }}</span>
                      </label>
                      <input
                        id="image_file"
                        ref="file"
                        type="file"
                        accept="image/jpeg, image/png"
                        style="display: none"
                        name="image_file"
                        class="image_file"
                        @change="handleFileUpload"
                      >
                      <ul
                        v-if="erreurUploadMessage"
                        class="errorlist"
                      >
                        <li>
                          {{ erreurUploadMessage }}
                        </li>
                      </ul>
                    </div>
                    <button
                      id="get-geom-from-image-file"
                      type="button"
                      :class="[
                        'ui compact button',
                        file && !erreurUploadMessage ? 'green' : 'disabled',
                        { red: erreurUploadMessage },
                      ]"
                      @click="georeferencement"
                    >
                      <i class="plus icon" />
                      Importer
                    </button>
                  </form>
                </div>
              </div>
            </div>

            <p v-if="showGeoPositionBtn">
              <button
                id="create-point-geoposition"
                type="button"
                class="ui compact button"
                @click="create_point_geoposition"
              >
                <i class="ui map marker alternate icon" />Positionner le
                signalement à partir de votre géolocalisation
              </button>
            </p>
            <span
              v-if="erreurGeolocalisationMessage"
              id="erreur-geolocalisation"
            >
              <div class="ui negative message">
                <div class="header">
                  Une erreur est survenue avec la fonctionnalité de
                  géolocalisation
                </div>
                <p id="erreur-geolocalisation-message">
                  {{ erreurGeolocalisationMessage }}
                </p>
              </div>
              <br>
            </span>
          </div>
          <ul
            id="errorlist-geom"
            class="errorlist"
          >
            <li
              v-for="error in form.geom.errors"
              :key="error"
            >
              {{ error }}
            </li>
          </ul>
          <!-- Map -->
          <input
            :id="form.geom.id_for_label"