Project_edit.vue

<template>
  <div class="fourteen wide column">
    <form
      id="form-project-edit"
      action="."
      method="post"
      enctype="multipart/form-data"
      class="ui form"
    >
      <div v-if="errors" class="ui error message">
        {{ form.non_field_errors }}

        <span v-for="hidden_field in form.hidden_fields" :key="hidden_field">
          {{ hidden_field.errors }}
          {{ hidden_field }}
        </span>
      </div>
      <i class="close icon"></i>

      <h1>
        <span v-if="action === 'update'"
          >Édition du projet "{{ form.instance.title }}"</span
        >
        <span v-else-if="action === 'create'">Création d'un projet</span>
      </h1>

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

      <div class="two fields">
        <div class="required field">
          <label :for="form.title.id_for_label">{{ form.title.label }}</label>
          <small>{{ form.title.help_text }}</small
          ><!-- | safe -->
          <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"
          />
          <!-- :value="form.title.value ? form.title.value : ''" -->
          {{ form.title.errors }}
        </div>
        <div class="field">
          <label>{{ form.thumbnail.label }}</label>
          <!-- <img
            v-if="instance.thumbnail.url"
            class="ui small image"
            id="form-input-file-logo"
            :src="instance.thumbnail.url"
          /> -->
          <img
            v-if="instance_thumbnail_url"
            class="ui small image"
            id="form-input-file-logo"
            :src="instance_thumbnail_url"
          />
          <label
            @click.prevent="selectImg"
            class="ui icon button"
            :for="form.thumbnail.id_for_label"
          >
            <i class="file icon"></i>
            <!-- thumbnail.value ? thumbnail.value : "Sélectionner une image ..." -->
            <span class="label">{{
              thumbnail_value ? thumbnail_value : "Sélectionner une image ..."
            }}</span>
            <!-- TEST : {{thumbnail: { value} } -->
          </label>
          <input
            @change="processImgData"
            class="file-selection"
            type="file"
            accept="image/jpeg, image/png"
            style="display: none"
            :name="form.thumbnail.html_name"
            :id="form.thumbnail.id_for_label"
          />
          <!-- :value="form.thumbnail.value" //* ne devrait pas être nécessaire dans input type file, à vérifier -->
          {{ form.thumbnail.errors }}
        </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"
        ></textarea>
        {{ form.description.errors }}
      </div>

      <div class="ui horizontal divider">PARAMÈTRES</div>

      <div class="four fields">
        <div class="field">
          <label :for="form.archive_feature.id_for_label">{{
            form.archive_feature.label
          }}</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              :name="form.archive_feature.html_name"
              :id="form.archive_feature.id_for_label"
              v-model="form.archive_feature.value"
            />
            <div class="ui label">jour(s)</div>
          </div>
          {{ form.archive_feature.errors }}
        </div>
        <div class="field">
          <label :for="form.delete_feature.id_for_label">{{
            form.delete_feature.label
          }}</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              :name="form.delete_feature.html_name"
              :id="form.delete_feature.id_for_label"
              v-model="form.delete_feature.value"
            />
            <div class="ui label">jour(s)</div>
          </div>
          {{ form.delete_feature.errors }}
        </div>
        <div class="required field">
          <label :for="form.access_level_pub_feature.id_for_label">{{
            form.access_level_pub_feature.label
          }}</label>

          <!--           <div class="ui selection dropdown">
            <input
              type="hidden"
              :name="form.access_level_pub_feature.html_name"
              :id="form.access_level_pub_feature.id_for_label"
              v-model="form.access_level_pub_feature.value"
            />
            <div class="default text"></div>
            <i class="dropdown icon"></i>
            <div class="menu">
              <div
                class="item"
                v-for="(x, y) in form.access_level_pub_feature.field.choices"
                :key="y"
                :data-value="
                  x +
                  (form.access_level_pub_feature.value === x ? selected : '')
                "
              >
                {{ x }}
              </div>
            </div>
          </div> -->
          <Dropdown
            :options="form.access_level_pub_feature.field.choices"
            :form="form"
            :selection.sync="selectedValue"
          />

          <!-- <sui-dropdown
            :text="access_level_pub_feature_selected"
            :options="optionsAccessPub"
            selection
            v-model="access_level_pub_feature_selected"
          >
          </sui-dropdown> -->

          {{ form.access_level_pub_feature.errors }}
        </div>
        <div class="required field">
          <label :for="form.access_level_arch_feature.id_for_label">{{
            form.access_level_arch_feature.label
          }}</label>
          <div class="ui selection dropdown">
            <input
              type="hidden"
              :name="form.access_level_arch_feature.html_name"
              :id="form.access_level_arch_feature.id_for_label"
              v-model="form.access_level_arch_feature.value"
            />
            <div class="default text"></div>
            <i class="dropdown icon"></i>
            <div class="menu">
              {% for x,y in form.access_level_arch_feature.field.choices %}
              <!--  <div class="item" data-value="{{ x }}" {% if form.access_level_arch_feature.value == x %} selected{% endif %}>{{ y }}</div> -->
              {% endfor %}
            </div>
          </div>
          {{ form.access_level_arch_feature.errors }}
        </div>
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.moderation.value"
            :name="form.moderation.html_name"
            :id="form.moderation.id_for_label"
          />
          <label :for="form.moderation.id_for_label">{{
            form.moderation.label
          }}</label>
        </div>
        {{ form.moderation.errors }}
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.is_project_type.value"
            :name="form.is_project_type.html_name"
            :id="form.is_project_type.id_for_label"
          />
          <label :for="form.is_project_type.id_for_label">{{
            form.is_project_type.label
          }}</label>
        </div>
        {{ form.is_project_type.errors }}
      </div>

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

      <!-- {% for hidden_field in form.hidden_fields %} -->
      <!-- pour passer le slug du projet parent entre GET et POST // ? marche en span ? -->
      <span v-for="hidden_field in form.hidden_fields" :key="hidden_field">{{
        hidden_field
      }}</span>

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

<script>
import Dropdown from "@/components/dropdown.vue";

export default {
  name: "Project_edit",

  components: {
    Dropdown,
  },

  data() {
    return {
      selectedValue: null,
      action: null, // todo : retrouver la valeur du type d'action (edit, create, ...) dans url ou autre ?
      current: null,
      // * utile pour front
      thumbnail_value: null,
      instance_thumbnail_url: null,
      access_level_pub_feature_selected: null,
      // * structure de formulaire propre à django, trop complexe pour réactivité dans vue.js
      form: {
        access_level_pub_feature: {
          id_for_label: null,
          field: {
            choices: [
              "Utilisateur anonyme",
              "Utilisateur connecté",
              "Contributeur",
            ],
          },
        },
        access_level_arch_feature: {
          id_for_label: null,
        },
        archive_feature: {
          thumbnail: {
            label: {
              url: null,
            },
          },
        },
        delete_feature: {
          thumbnail: {
            label: {
              url: null,
            },
          },
        },
        instance: {
          title: null,
          thumbnail: {
            label: {
              url: this.instance_thumbnail_url,
            },
          },
        },
        is_project_type: {
          html_name: null,
          label: "Est un projet type",
        },
        description: {
          id_for_label: null,
        },
        moderation: {
          html_name: null,
          label: "Modération",
        },
        title: {
          id_for_label: null,
          help_text: null,
          label: null,
          field: {
            max_length: null,
          },
        },
        thumbnail: {
          label: "Illustration du projet",
          url: null,
          value: this.thumbnail_value,
        },
      },
      errors: null,
      x: null,
    };
  },

  computed: {
    optionsAccessPub() {
      return this.form.access_level_pub_feature.field.choices.map((choice) => {
        return { text: choice, name: choice };
      });
    },
    optionsAccessArchive() {
      return this.form.access_level_pub_feature.field.choices.map((choice) => {
        return { text: choice, name: choice };
      });
    },
  },

  methods: {
    truncate(n, len) {
      var ext = n.substring(n.lastIndexOf(".") + 1, n.length).toLowerCase();
      var filename = n.replace("." + ext, "");
      if (filename.length <= len) {
        return n;
      }
      filename = filename.substr(0, len) + (n.length > len ? "[...]" : "");
      return filename + "." + ext;
    },
    processImgData(e) {
      // * read image file
      const file = e.target.files[0];
      if (file) {
        this.thumbnail_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.instance_thumbnail_url = e.target.result;
      };

      reader.readAsDataURL(file);
      // todo : send file to the back (?)
    },
    selectImg() {
      // * call click on hidden input field
      document.getElementsByClassName("file-selection")[0].click();
    },
    getValue(value) {
      console.log(value);
    },
  },
};
</script>

<style media="screen">
#form-input-file-logo {
  margin-left: auto;
  margin-right: auto;
}
</style>