Project_edit.vue

<template>
  <div class="fourteen wide column">
    <form id="form-project-edit" class="ui form">
      <h1>
        <span v-if="action === 'edit'"
          >Édition du projet "{{ form.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="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="level_permissions_choices"
            :selected="form.access_level_pub_feature.name"
            :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="level_permissions_choices"
            :selected="form.access_level_arch_feature.name"
            :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="postForm" type="button" class="ui teal icon button">
        <i class="white save icon"></i> Enregistrer les changements
      </button>
    </form>
  </div>
</template>

<script>
const axios = require("axios");
import Dropdown from "@/components/Dropdown.vue";
import { mapGetters } from "vuex";

export default {
  name: "Project_edit",

  components: {
    Dropdown,
  },

  data() {
    return {
      action: "create",
      level_permissions_choices: [
        {name: "Utilisateur anonyme", value: "anonymous"},
        {name: "Utilisateur connecté", value: "logged_user"},
        {name: "Contributeur", value: "contributor"},
      ],
      form: {
        title: "",
        slug: "",
        created_on: "",
        updated_on: "",
        description: "",
        moderation: false,
        thumbnail: require("@/assets/img/default.png"), // todo : utiliser l'image par défaut
        thumbnail_name: "", // todo: delete after getting image in jpg or png instead of data64 (require post to django)
        creator: null,
        access_level_pub_feature: {name: "", value: ""},
        access_level_arch_feature: {name: "", value: ""},
        archive_feature: 0,
        delete_feature: 0,
        nb_features: 0,
        nb_published_features: 0,
        nb_comments: 0,
        nb_published_features_comments: 0,
        nb_contributors: 0,
        is_project_type: false,
      },
    };
  },

  computed: {
    ...mapGetters(["project"]),
  },

  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] || "/");
    },

    async postForm() {
      //const data = JSON.stringify(this.project);
      //* create project
      // todo: check form
      const projectData = {
        title: this.form.title,
        description: this.form.description,
        access_level_arch_feature: this.form.access_level_arch_feature.value,
        access_level_pub_feature: this.form.access_level_pub_feature.value,
        archive_feature: this.form.archive_feature,
        delete_feature: this.form.delete_feature,
        is_project_type: this.form.is_project_type,
        moderation: this.form.moderation,
      };

      await axios
        .post(`${process.env.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
        .then((response) => {
          console.log(response);
          if (response && response.status === 201) {
            this.$store.commit("ADD_PROJECT", response.data)
            this.$router.push("/")
            // todo : send thumbnail after
            //postProjectThumbnail()
          }
        })
        .catch((error) => {
          throw error;
        });
      console.log("POST this data : ", projectData);
    },
  },
  created() {
    this.definePageType();
    if (this.action !== "create") {
      if (!this.project) {
        this.$store.dispatch("GET_PROJECT_INFO", this.$route.params.slug);
        this.form = this.project;
      } else {
        this.form = this.project;
      }
    }
  },
};
</script>

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

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