Feature_edit.vue

<template>
  <div v-frag>
    <script
      type="application/javascript"
      :src="
        baseUrl +
        'resources/leaflet-control-geocoder-1.13.0/Control.Geocoder.js'
      "
    ></script>
    <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
              type="text"
              required
              :maxlength="form.title.field.max_length"
              :name="form.title.html_name"
              :id="form.title.id_for_label"
              v-model="form.title.value"
              @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
            :name="form.description.html_name"
            rows="5"
            v-model="form.description.value"
            @blur="updateStore"
          ></textarea>
        </div>

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

          <!-- Import GeoImage -->
          <div v-frag v-if="feature_type && feature_type.geom_type === 'point'">
            <p v-if="isOffline() !== true">
              <button
                @click="toggleGeoRefModal"
                id="add-geo-image"
                type="button"
                class="ui compact button"
              >
                <i class="file image icon"></i>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"></i>
                <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"></i>
                        <span class="label">{{ geoRefFileLabel }}</span>
                      </label>
                      <input
                        type="file"
                        accept="image/jpeg, image/png"
                        style="display: none"
                        ref="file"
                        v-on:change="handleFileUpload"
                        name="image_file"
                        class="image_file"
                        id="image_file"
                      />
                      <ul v-if="erreurUploadMessage" class="errorlist">
                        <li>
                          {{ erreurUploadMessage }}
                        </li>
                      </ul>
                    </div>
                    <button
                      @click="georeferencement"
                      id="get-geom-from-image-file"
                      type="button"
                      :class="[
                        'ui compact button',
                        file && !erreurUploadMessage ? 'green' : 'disabled',
                        { red: erreurUploadMessage },
                      ]"
                    >
                      <i class="plus icon"></i>
                      Importer
                    </button>
                  </form>
                </div>
              </div>
            </div>

            <p v-if="showGeoPositionBtn">
              <button
                @click="create_point_geoposition"
                id="create-point-geoposition"
                type="button"
                class="ui compact button"
              >
                <i class="ui map marker alternate icon"></i>Positionner le
                signalement à partir de votre géolocalisation
              </button>
            </p>
            <span
              id="erreur-geolocalisation"
              v-if="erreurGeolocalisationMessage"
            >
              <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
            type="hidden"
            :name="form.geom.html_name"
            :id="form.geom.id_for_label"
            v-model="form.geom.value"
            @blur="updateStore"
          />
          <div class="ui tab active map-container" data-tab="map">
            <div id="map"></div>
            <!-- // todo: ajouter v-if -->
            <!-- {% if serialized_base_maps|length > 0 %} {% include
            "geocontrib/map-layers/sidebar-layers.html" with
            basemaps=serialized_base_maps layers=serialized_layers
            project=project.slug%} {% endif %} -->
            <SidebarLayers v-if="basemaps && map" />
          </div>
        </div>

        <!-- Extra Fields -->