Merge branch 'ticket/11770' into 'develop'

fix handle error title empty in Project

See merge request !44

src/components/project/project_mapping_basemap.vue

@@ -2,15 +2,17 @@
   <div class="ui segment">
     <div class="field required">
       <label for="basemap-title">Titre</label>
-      <!-- v-model="title"  -->
       <input
-        :value="basemap.title"
-        @blur="updateTitle"
+        v-model="basemap.title"
         type="text"
         name="basemap-title"
         required
       />
-      <!-- {{ basemapForm.title.errors }} -->
+      <ul v-if="basemap.errors" id="errorlist-title" class="errorlist">
+        <li>
+          {{ basemap.errors }}
+        </li>
+      </ul>
     </div>
 
     <div class="nested">
@@ -95,13 +97,15 @@ export default {
         layers: [...this.basemap.layers, newLayer],
         id: this.basemap.id,
         title: this.basemap.title,
+        errors: this.basemap.errors,
       });
     },
 
     updateTitle(evt) {
       this.$store.commit("map/UPDATE_BASEMAP", {
         id: this.basemap.id,
-        title: evt.target.value,
+        title: evt.title,
+        errors: evt.errors,
       });
     },
 
@@ -120,12 +124,30 @@ export default {
       });
     },
   },
+  watch: {
+    'basemap.title': {
+      deep: true,
+      handler : function (newValue, oldValue) {
+        if (newValue != oldValue) {
+          this.basemap.title = newValue;
+          if(newValue == '')
+            this.basemap.errors = "Veuillez compléter ce champ.";
+          else
+            this.basemap.errors = '';
+          this.updateTitle(this.basemap)
+        }
+      }
+    }
+  },
 
   created() {
     if (this.basemap.layers) { //* add datakeys to layers coming from api 
       this.fillLayersWithDatakey(this.basemap.layers);
     }
   },
+  // destroyed(){
+  //   this.errors = [];
+  // }
 
   // mounted() { //* not present in original
   //   if (!this.basemap.title) {

src/store/modules/map.js

@@ -28,7 +28,7 @@ const map = {
       state.basemaps = basemaps;
     },
     CREATE_BASEMAP(state, id) {
-      state.basemaps = [...state.basemaps, { id, layers: [] }]
+      state.basemaps = [...state.basemaps, { id, title: '', layers: [], errors : [] }]
     },
     /*     DELETE_BASEMAP(state, id) {
           state.basemaps = state.basemaps.filter(el => el.id !== id)
@@ -36,7 +36,7 @@ const map = {
     UPDATE_BASEMAPS(state, basemaps) {
       state.basemaps = basemaps;
     },
-    UPDATE_BASEMAP(state, { title, id, layers }) {
+    UPDATE_BASEMAP(state, { title, id, layers, errors }) {
       const index = state.basemaps.findIndex((el) => el.id === id);
       if (index !== -1) {
         if (title) {
@@ -45,6 +45,9 @@ const map = {
         if (layers) {
           state.basemaps[index].layers = layers
         }
+        if (errors) {
+          state.basemaps[index].errors = errors
+        }
       }
     },
     DELETE_BASEMAP(state, basemapId) {

src/views/project/Project_mapping.vue

 <template>
-  <div class="fourteen wide column">
-    <h1 class="ui header">Administration des fonds cartographiques</h1>
 
-    <form
-      id="form-layers"
-      action="."
-      method="post"
-      enctype="multipart/form-data"
-      class="ui form"
-    >
-      <!--  {{ formset.management_form }} -->
-      <div class="ui buttons">
-        <a
-          class="ui compact small icon left floated button green"
-          data-variation="mini"
-          @click="addBasemap"
-        >
-          <i class="ui plus icon"></i>
-          <span>Créer un fond cartographique</span>
-        </a>
-      </div>
-
-      <div v-if="basemaps" class="ui">
-        <ProjectMappingBasemap
-          v-for="basemap in basemaps"
-          :key="basemap.id"
-          :basemap="basemap"
-        />
+    <div class="fourteen wide column">
+       <div id="message_info" class="fullwidth">
+        <div v-if="infoMessage" class="ui positive message" style="text-align: left;">
+           <div class="header">
+              <i class="info circle icon"></i> Informations
+            </div>
+          <ul class="list">
+            {{ infoMessage }}
+           </ul>
+          </div>
       </div>
+      <h1 class="ui header">Administration des fonds cartographiques</h1>
 
-      <button
-        @click="saveChanges"
-        type="button"
-        class="ui teal icon floated button"
+      <form
+        id="form-layers"
+        action="."
+        method="post"
+        enctype="multipart/form-data"
+        class="ui form"
       >
-        <i class="white save icon"></i> Enregistrer les changements
-      </button>
-    </form>
-  </div>
+        <!--  {{ formset.management_form }} -->
+        <div class="ui buttons">
+          <a
+            class="ui compact small icon left floated button green"
+            data-variation="mini"
+            @click="addBasemap"
+          >
+            <i class="ui plus icon"></i>
+            <span>Créer un fond cartographique</span>
+          </a>
+        </div>
+
+        <div v-if="basemaps" class="ui">
+          <ProjectMappingBasemap
+            v-for="basemap in basemaps"
+            :key="basemap.id"
+            :basemap="basemap"
+          />
+        </div>
+
+        <button
+          @click="saveChanges"
+          type="button"
+          class="ui teal icon floated button"
+        >
+          <i class="white save icon"></i> Enregistrer les changements
+        </button>
+      </form>
+    </div>
 </template>
 
 <script>
@@ -53,6 +64,7 @@ export default {
 
   data() {
     return {
+      infoMessage: '',
       newBasemapIds: [],
     };
   },
@@ -67,15 +79,36 @@ export default {
       this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
       this.$store.commit("map/CREATE_BASEMAP", this.basemapMaxId + 1);
     },
+    checkTitles(){
+      let isValid = true;
+      this.basemaps.forEach(basemap => {
+        if (basemap.title === null || basemap.title === '' ){
+          basemap.errors = "Veuillez compléter ce champ."
+          isValid = false
+        } else {
+           basemap.errors = ''
+        }
+      });
+      return isValid;
+    },
 
     saveChanges() {
       // ToDo : check if values are filled
-      this.$store.dispatch("map/SAVE_BASEMAPS", this.newBasemapIds)
-      .then((res) => {
-        console.log('res', res)
-      });
-      this.newBasemapIds = [];
-    },
+      if (this.checkTitles()){
+        this.$store.dispatch("map/SAVE_BASEMAPS", this.newBasemapIds)
+        .then((res) => {
+          console.log('res', res)
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+        this.newBasemapIds = [];
+        this.infoMessage = 'Enregistrement effectué.'
+        setTimeout(function(){
+            this.infoMessage = ''; 
+            }.bind(this), 5000);
+      }
+    }
   },
 
   created() {