Project_edit.vue

<template>
  <div class="fourteen wide column">
    <form id="form-project-edit" class="ui form">
      <h1>
        <span v-if="action === 'update'"
          >Édition du projet "{{ form.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="form.title"
          />
          <!-- {{ form.title.errors }} // ? des erreurs possibles ? -->
        </div>
        <div class="field">
          <label>Illustration du projet</label>
          <img
            v-if="form.thumbnail"
            class="ui small image"
            id="form-input-file-logo"
            :src="form.thumbnail"
          />
          <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>
            <!-- // ? [...form.thumbnail.split("/")].pop() -->
            <span class="label">{{
              form.thumbnail
                ? form.thumbnail_name
                : "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"
          />
          <!-- {{ form.thumbnail.errors }} -->
        </div>
      </div>
      <div class="field">
        <label for="description">Description</label>
        <textarea
          v-model="form.description"
          name="description"
          rows="5"
        ></textarea>
        <!-- {{ form.description.errors }} -->
      </div>

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

      <div class="four fields">
        <div class="field">
          <label for="archive_feature">Délai avant archivage</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              name="archive_feature"
              id="archive_feature"
              v-model="form.archive_feature"
            />
            <div class="ui label">jour(s)</div>
          </div>
          <!-- {{ form.archive_feature.errors }} -->
        </div>
        <div class="field">
          <label for="delete_feature">Délai avant suppression</label>
          <div class="ui right labeled input">
            <input
              type="number"
              min="0"
              style="padding: 1px 2px"
              name="delete_feature"
              id="delete_feature"
              v-model="form.delete_feature"
            />
            <div class="ui label">jour(s)</div>
          </div>
          <!-- {{ form.delete_feature.errors }} -->
        </div>
        <div class="required field">
          <label for="access_level_pub_feature"
            >Visibilité des signalements publiés</label
          >
          <Dropdown
            :options="access_level_pub_feature_choices"
            :selected="form.access_level_pub_feature"
            :selection.sync="form.access_level_pub_feature"
          />
        </div>
        <div class="required field">
          <label for="access_level_arch_feature">
            Visibilité des signalements archivés
          </label>
          <Dropdown
            :options="access_level_arch_feature_choices"
            :selected="form.access_level_arch_feature"
            :selection.sync="form.access_level_arch_feature"
          />
        </div>
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.moderation"
            name="moderation"
            id="moderation"
          />
          <label for="moderation">Modération</label>
        </div>
        <!-- {{ form.moderation.errors }} -->
      </div>

      <div class="field">
        <div class="ui checkbox">
          <input
            type="checkbox"
            :checked="form.is_project_type"
            name="is_project_type"
            id="is_project_type"
          />
          <label for="is_project_type">Est un projet type</label>
        </div>
        <!-- {{ form.is_project_type.errors }} -->
      </div>

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

      <button @click.prevent="postForm" 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 {
      action: "create",
      access_level_pub_feature_choices: [
        "Utilisateur anonyme",
        "Utilisateur connecté",
        "Contributeur",
      ],
      access_level_arch_feature_choices: [
        "Utilisateur anonyme",
        "Utilisateur connecté",
        "Contributeur",
      ],
      form: {
        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",
        thumbnail_name: "albinoscom", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
        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,
        is_project_type: false,
      },
    };
  },

  methods: {
    definePageType() {
      if (this.$router.history.current.name === "project_create") {
        this.action = "create";
      } else if (this.$router.history.current.name === "project_edit") {
        this.action = "edit";
      } else if (this.$router.history.current.name === "project_create_from") {
        this.action = "create_from";
      }
    },
    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.form.thumbnail_name = file.name;
      }

      let reader = new FileReader();
      let _this = this;
      reader.onload = function (e) {
        _this.form.thumbnail = 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() {
      const routerHistory = this.$router.options.routerHistory;
      this.$router.push(routerHistory[routerHistory.length - 1] || "/");
    },

    postForm() {
      const data = JSON.stringify(this.project);
      console.log("POST this data : ", data);
    },
  },
  created() {
    this.definePageType();
    if (!this.project && this.action !== "create") {
      this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);
    }
  },
};
</script>

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

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