Project_edit.vue

<template>
  <div class="fourteen wide column">
    <form id="form-project-edit" class="ui form">
      <!--      <div v-if="errors" class="ui error message"> // todo: spécifier les erreurs possibles à afficher
        {{ form.non_field_errors }}

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

      <h1>
        <span v-if="action === 'update'"
          >Édition du projet "{{ project.title }}"</span
        ><!-- // todo : [pour UPDATE] récupérer project à éditer -->
        <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="title">Titre</label>
          <!-- <small>{{ form.title.help_text }}</small
          > --><!-- | safe  // ? utile ?  -->
          <input
            type="text"
            required
            maxlength="128"
            name="title"
            id="title"
            v-model="project.title"
          />
          <!-- {{ form.title.errors }} // ? des erreurs possibles ? -->
        </div>
        <div class="field">
          <label>Illustration du projet</label>
          <img
            v-if="project.thumbnail"
            class="ui small image"
            id="form-input-file-logo"
            :src="project.thumbnail"
          />
          <!-- <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="thumbnail"
          ><!-- // todo : send image to the backend and display it after -->
            <i class="file icon"></i>
            <span class="label">{{
              project.thumbnail ? [...project.thumbnail.split("/")].pop() : "Sélectionner une image ..."
            }}</span>
            <!-- <span class="label">{{
              thumbnail_value ? thumbnail_value : "Sélectionner une image ..."
            }}</span> -->
          </label>
          <input
            @change="processImgData"
            class="file-selection"
            type="file"
            accept="image/jpeg, image/png"
            style="display: none"
            name="thumbnail"
            id="thumbnail"
          />
          <!-- :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,
  },

  props: ["action"],

  data() {
    return {
      project:
        {
          title: "Vuetification (Copie-23/07/2021 09:19)",
          slug: "6-vuetification-copie-23072021-0919",
          created_on: "23/07/2021",
          updated_on: "29/07/2021",
          description:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
          moderation: true,
          thumbnail: "http://localhost:8000/media/user_1/albinoscom.jpg",
          creator: 1,
          access_level_pub_feature: "Utilisateur anonyme",
          access_level_arch_feature: "Utilisateur anonyme",
          archive_feature: 0,
          delete_feature: 0,
          nb_features: 2,
          nb_published_features: 1,
          nb_comments: 0,
          nb_published_features_comments: 0,
          nb_contributors: 2,
        },

      selectedValue: null,
      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 (?) (not in base64)
    },
    selectImg() {
      // * call click on hidden input field
      document.getElementsByClassName("file-selection")[0].click();
    },

    goBack() {
      console.log(this.$router);
      const routerHistory = this.$router.options.routerHistory;
      this.$router.push(routerHistory[routerHistory.length - 1] || "/");
    },
  },
};
</script>

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

.close.icon:hover {
  cursor: pointer;
}
</style>