Feature_edit.vue

<template>
  <div v-frag>
    <div class="fourteen wide column">
      {% if action == 'update' %}
      <h1>Mise à jour du signalement "{{ feature.title }}"</h1>
      {% elif action == 'create' %}
      <h1>
        Création d'un signalement <small>[{{ feature_type }}]</small>
      </h1>
      {% endif %}

      <form
        id="form-feature-edit"
        action=""
        method="post"
        enctype="multipart/form-data"
        class="ui form"
      >
        {% csrf_token %}

        <!-- Feature Fields -->
        <div class="two fields">
          <div class="required field">
            <label :for="feature_form.title.id_for_label">{{
              feature_form.title.label
            }}</label>
            <input
              type="text"
              required
              :maxlength="feature_form.title.field.max_length"
              :name="feature_form.title.html_name"
              :id="feature_form.title.id_for_label"
              v-model="feature_form.title.value"
            />
            {{ feature_form.title.errors }}
          </div>
          <div class="required field">
            <label :for="feature_form.status.id_for_label">{{
              feature_form.status.label
            }}</label>
            <div class="ui selection dropdown">
              <input
                type="hidden"
                :name="feature_form.status.html_name"
                :id="feature_form.status.id_for_label"
                :value="feature_form.status.value"
              />
              <div class="default text"></div>
              <i class="dropdown icon"></i>
              <div class="menu">
                <div
                  v-for="(x, y) in feature_form.status.field.choices"
                  :key="y"
                  class="item"
                  :data-value="x"
                  :selected="feature_form.status.value === x"
                >
                  {{ y }}
                </div>
              </div>
            </div>
            {{ feature_form.status.errors }}
          </div>
        </div>
        <div class="field">
          <label :for="feature_form.description.id_for_label">{{
            feature_form.description.label
          }}</label>
          <textarea
            :name="feature_form.description.html_name"
            rows="5"
            v-model="feature_form.description.value"
          ></textarea>
          {{ feature_form.description.errors }}
        </div>

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

          <!-- Import GeoImage -->
          {% if feature_type.geom_type == 'point' %}
          <p>
            <button 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>

          <p>
            <button
              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" style="display: none">
            <div class="ui negative message">
              <div class="header">
                Une erreur est survenue avec la fonctionnalité de
                géolocalisation
              </div>
              <p id="erreur-geolocalisation-message"></p>
            </div>
            <br />
          </span>

          {% endif %}

          {{ feature_form.geom.errors }}
          <!-- Map -->
          <input
            type="hidden"
            :name="feature_form.geom.html_name"
            :id="feature_form.geom.id_for_label"
            v-model="feature_form.geom.value"
          />
          <div class="ui tab active map-container" data-tab="map">
            <div id="map"></div>
            {% 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 %}
          </div>
        </div>

        <!-- Extra Fields -->
        <div class="ui horizontal divider">DONNÉES MÉTIER</div>
        <div v-for="field in extra_form" :key="field" class="field">
          {% if field.field.widget.attrs|lookup:'field_type' == 'char' %}
          <label for="field.name">{{ field.label }}</label>
          <input
            type="text"
            :name="field.name"
            :id="field.name"
            v-model="field.value"
          />
          {% elif field.field.widget.attrs|lookup:'field_type' == 'list' %}
          <label for="field.name">{{ field.label }}</label>
          <div class="ui selection dropdown">
            <input
              type="hidden"
              :name="field.name"
              :id="field.name"
              v-model="field.value"
            />
            <div class="default text"></div>
            <i class="dropdown icon"></i>
            <div class="menu">
              {% for x,y in field.field.choices %}
              <div class="item" :data-value="x" :selected="field.value === x">
                {{ y }}
              </div>
              {% endfor %}
            </div>
          </div>
          {% elif field.field.widget.attrs|lookup:'field_type' == 'integer' %}
          <label for="field.name">{{ field.label }}</label>
          <div class="ui input">
            <input
              type="number"
              :name="field.name"
              :id="field.name"
              v-model="field.value"
            />
          </div>
          {% elif field.field.widget.attrs|lookup:'field_type' == 'boolean' %}
          <div class="ui checkbox">
            <input
              type="checkbox"
              :checked="field.value"
              :name="field.name"
              :id="field.name"
            />
            <label for="field.name">{{ field.label }}</label>
          </div>
          {% elif field.field.widget.attrs|lookup:'field_type' == 'date' %}
          <label for="field.name">{{ field.label }}</label>
          <input
            type="date"
            :name="field.name"
            :id="field.name"
            v-model="field.value"
          />
          {% elif field.field.widget.attrs|lookup:'field_type' == 'decimal' %}
          <label for="field.name">{{ field.label }}</label>
          <div class="ui input">
            <input
              type="number"
              step=".01"
              :name="field.name"
              :id="field.name"
              v-model="field.value"
            />
          </div>
          {% elif field.field.widget.attrs|lookup:'field_type' == 'text' %}
          <label :for="field.name">{{ field.label }}</label>
          <textarea
            :name="field.name"
            rows="3"
            v-model="field.value"
          ></textarea>
          {% endif %}
          {{ field.errors }}
        </div>
        {% endfor %}

        <!-- Pièces jointes -->
        <div class="ui horizontal divider">PIÈCES JOINTES</div>
        {{ attachment_formset.non_form_errors }}
        <!-- 
        <div id="formsets-attachment">
          {{ attachment_formset.management_form }} -->
        <!-- {% if not form.DELETE.value %} // ? nécessaire ou comment le remettre ?-->
        <!-- 
            <div
            v-frag
            v-for="form in attachment_formset"
            :key="form.title.label"
          >
            <span v-for="hidden in form.hidden_fields" :key="hidden">
              {{ hidden }}
            </span>

            <div class="ui teal segment">
              <h4>
                Pièce jointe
                <button
                  class="
                    ui
                    small
                    compact
                    right
                    floated
                    icon
                    button
                    remove-formset
                  "
                  type="button"
                >
                  <i class="ui times icon"></i>
                </button>
              </h4>
              {{ form.errors }}
              <div class="visible-fields">
                <div class="two fields">
                  <div class="required field">
                    <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"
                    />
                    {{ form.title.errors }}
                  </div>
                  <div class="required field">
                    <label>Fichier (PDF, PNG, JPEG)</label>
                    <label
                      class="ui icon button"
                      :for="form.attachment_file.id_for_label"
                    >
                      <i class="file icon"></i>
                      {% if form.attachment_file.value %}
                      <span class="label">{{
                        form.attachment_file.value
                      }}</span>
                      {% else %}
                      <span class="label">Sélectionner un fichier ...</span>
                      {% endif %}
                    </label>
                    <input
                      @change="processImgData"
                      type="file"
                      :accept="IMAGE_FORMAT"
                      style="display: none"
                      :name="form.attachment_file.html_name"
                      class="image_file"
                      :id="form.attachment_file.id_for_label"
                    /> -->
        <!-- v-model="form.attachment_file.value" -->
        <!--       {{ form.attachment_file.errors }}
                  </div>
                </div>
                <div class="field">
                  <label for="form.info.id_for_label">{{
                    form.info.label
                  }}</label>
                  <textarea
                    name="form.info.html_name"
                    rows="5"
                    v-model="form.info.value"
                  ></textarea>
                  {{ form.info.errors }}
                </div>
              </div>
              <input
                class="delete-hidden-field"
                type="checkbox"
                :name="form.DELETE.html_name"
                :id="form.DELETE.id_for_label"
              />
            </div>
          </div>
        </div> -->
        <button
          id="add-attachment"
          type="button"
          class="ui compact basic button button-hover-green"
        >
          <i class="ui plus icon"></i>Ajouter une pièce jointe
        </button>

        <!-- Signalements liés -->
        <!-- <div class="ui horizontal divider">SIGNALEMENTS LIÉS</div>
        {{ linked_formset.non_form_errors }}
        <div id="formsets-link">
          {{ linked_formset.management_form }}
          <div v-for="(form, index) of linked_formset" :key="index"> -->
            <!--  {% if not form.DELETE.value %} -->
            <!-- <span v-for="hidden in form.hidden_fields" :key="hidden">
              {{ hidden }}
            </span>

            <div class="ui teal segment">
              <h4>
                Liaison
                <button
                  class="
                    ui
                    small
                    compact
                    right
                    floated
                    icon
                    button
                    remove-formset
                  "
                  type="button"
                >
                  <i class="ui times icon"></i>
                </button>
              </h4>
              {{ form.errors }}
              <div class="visible-fields">
                <div class="two fields">
                  <div class="required field">
                    <label for="form.relation_type.id_for_label">{{
                      form.relation_type.label
                    }}</label>
                    <div class="ui selection dropdown">
                      <input
                        type="hidden"
                        :name="form.relation_type.html_name"
                        :id="form.relation_type.id_for_label"
                        v-model="form.relation_type.value"
                      />
                      <div class="default text"></div>
                      <i class="dropdown icon"></i>
                      <div class="menu">
                        <div
                          v-for="(x, y) in form.relation_type.field.choices"
                          :key="y"
                          class="item"
                          :data-value="x"
                          :selected="form.relation_type.value === x"
                        >
                          {{ y }}
                        </div>
                      </div>
                    </div>
                    {{ form.relation_type.errors }}
                  </div>
                  <div class="required field">
                    <label for="form.feature_to.id_for_label">{{
                      form.feature_to.label
                    }}</label>
                    <div class="ui selection search dropdown">
                      <input
                        type="hidden"
                        :name="form.feature_to.html_name"
                        :id="form.feature_to.id_for_label"
                        v-model="form.feature_to.value"
                      />
                      <div class="default text"></div>
                      <i class="dropdown icon"></i>
                      <div class="menu">
                        <div
                          v-for="(x, y) in form.feature_to.field.choices"
                          :key="y"
                          class="item"
                          :data-value="x"
                          :selected="form.feature_to.value === x"
                        >
                          {{ y }}
                        </div>
                      </div>
                    </div>
                    {{ form.feature_to.errors }}
                  </div>
                </div>
              </div>
              <input
                class="delete-hidden-field"
                type="checkbox"
                :name="form.DELETE.html_name"
                :id="form.DELETE.id_for_label"
              />
            </div>
            {% endif %}
          </div>
        </div> -->
        <button
          id="add-link"
          type="button"
          class="ui compact basic button button-hover-green"
        >
          <i class="ui plus icon"></i>Ajouter une liaison
        </button>

        <div class="ui divider"></div>

        <button type="submit" class="ui teal icon button">
          <i class="white save icon"></i> Enregistrer les changements
        </button>
      </form>
    </div>

    <Project-edit-modal />
  </div>
</template>

<script>
import frag from "vue-frag";
import Project_edit_modal from "@/components/feature/Feature_edit_modal";

export default {
  name: "Feature_edit",
  directives: {
    frag,
  },

  components: {
    "Project-edit-modal": Project_edit_modal,
  },

  data() {
    return {
      feature: {
        title: "test",
      },
      feature_type: "point",
      feature_form: {
        title: {
          field: {
            max_length: 30,
          },
        },
        status: {
          id_for_label: "id_for_label",
          field: {
            choices: [],
          },
        },
        description: {
          id_for_label: "id_for_label",
        },
        geom: {
          label: "label",
        },
      },
      extra_form: [],
      attachment_formset: {
        non_forms_errors: null,
        form: [
          {
            title: "test",
          },
        ],
      },
      hidden: null,

      linked_formset: {
        non_form_errors: "test",
        management_form: "test",
        form: [
          {
            title: "test",
            relation_type: "test"
          },
        ],
      },
    };
  },

  methods: {
    processImgData(e) {
      // * read image file
      const file = e.target.files[0];
      if (file) {
        this.form.attachment_file.value = file.name;
        // this.thumbnail.value = file.name;
      }

      let reader = new FileReader();
      let _this = this;
      reader.onload = function (e) {
        //_this.form.instance.thumbnail.url = e.target.result;
        _this.form.attachment_file.value = e.target.result;
      };

      reader.readAsDataURL(file);
      // todo : send image to the back (?)
    },
  },
};



// TODO : add script from django and convert:
</script>

<style>
#map {
  height:70vh;
  width:100%;
  border: 1px solid grey;
  }

@media only screen and (max-width: 767px) {
  #map {
    height: 80vh;
  }
}
</style>