validate project creation

src/views/project/Project_edit.vue

@@ -13,8 +13,6 @@
       <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
@@ -23,7 +21,11 @@
             id="title"
             v-model="form.title"
           />
-          <!-- {{ form.title.errors }} -->
+          <ul id="errorlist-title" class="errorlist">
+            <li v-for="error in errors.title" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
         <div class="field">
           <label>Illustration du projet</label>
@@ -80,7 +82,6 @@
             />
             <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>
@@ -95,7 +96,6 @@
             />
             <div class="ui label">jour(s)</div>
           </div>
-          <!-- {{ form.delete_feature.errors }} -->
         </div>
         <div class="required field">
           <label for="access_level_pub_feature"
@@ -106,6 +106,11 @@
             :selected="form.access_level_pub_feature.name"
             :selection.sync="form.access_level_pub_feature"
           />
+          <ul id="errorlist-access_level_pub_feature" class="errorlist">
+            <li v-for="error in errors.access_level_pub_feature" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
         <div class="required field">
           <label for="access_level_arch_feature">
@@ -116,6 +121,11 @@
             :selected="form.access_level_arch_feature.name"
             :selection.sync="form.access_level_arch_feature"
           />
+          <ul id="errorlist-access_level_arch_feature" class="errorlist">
+            <li v-for="error in errors.access_level_arch_feature" :key="error">
+              {{ error }}
+            </li>
+          </ul>
         </div>
       </div>
 
@@ -179,6 +189,11 @@ export default {
         name: "Sélectionner une image ...",
         size: 0,
       },
+      errors: {
+        title: [],
+        access_level_pub_feature: [],
+        access_level_arch_feature: [],
+      },
       form: {
         title: "",
         slug: "",
@@ -206,7 +221,7 @@ export default {
 
   computed: {
     ...mapGetters(["project"]),
-    DJANGO_BASE_URL:function () {
+    DJANGO_BASE_URL: function () {
       return this.$store.state.configuration.VUE_APP_DJANGO_BASE;
     },
   },
@@ -222,8 +237,8 @@ export default {
       }
     },
     truncate(n, len) {
-      var ext = n.substring(n.lastIndexOf(".") + 1, n.length).toLowerCase();
-      var filename = n.replace("." + ext, "");
+      let ext = n.substring(n.lastIndexOf(".") + 1, n.length).toLowerCase();
+      let filename = n.replace("." + ext, "");
       if (filename.length <= len) {
         return n;
       }
@@ -286,7 +301,31 @@ export default {
       }
     },
 
+    checkForm() {
+      for (const key in this.errors) {
+        console.log(key);
+        console.log(this.form[key]);
+        console.log(this.form[key].value);
+        if ((key === "title" && this.form[key]) || this.form[key].value) {
+          this.errors[key] = [];
+        } else if (!this.errors[key].length) {
+          this.errors[key].push(
+            key === "title"
+              ? "Veuillez compléter ce champ."
+              : "Sélectionnez un choix valide. Ce choix ne fait pas partie de ceux disponibles."
+          );
+          console.log(`errorlist-${key}`);
+          document
+            .getElementById(`errorlist-${key}`)
+            .scrollIntoView({ block: "end", inline: "nearest" });
+          return false;
+        }
+      }
+      return true;
+    },
+
     async postForm() {
+      if (!this.checkForm()) return;
       // todo: check form
       //let url = `${configuration.VUE_APP_DJANGO_API_BASE}projects/`;
       const projectData = {
@@ -302,13 +341,16 @@ export default {
 
       if (this.action === "create" || this.action === "duplicate") {
         await axios
-          .post(`${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`, projectData)
+          .post(
+            `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/`,
+            projectData
+          )
           .then((response) => {
             if (response && response.status === 201 && response.data) {
               //* send thumbnail after feature_type was created
-              if (this.fileToImport.size > 0){
+              if (this.fileToImport.size > 0) {
                 this.postProjectThumbnail(response.data.slug);
-              }else {
+              } else {
                 this.goBackNrefresh(response.data.slug);
               }
             }