fix error when displaying message when saving basemap

src/components/MessageInfo.vue

@@ -2,6 +2,7 @@
   <transition name="fadeDownUp">
     <div
       v-if="messages && messages.length > 0"
+      id="content"
       class="row over-content"
     >
       <div class="fourteen wide column">

src/views/Project/ProjectBasemaps.vue

 <template>
   <div id="project-basemaps">
-    <div
-      v-if="infoMessage.length > 0"
-      id="message_info"
-      class="fullwidth"
-    >
-      <div
-        v-for="(message, index) of infoMessage"
-        :key="index"
-        :class="['ui message', message.success ? 'positive' : 'negative']"
-        style="text-align: left"
-      >
-        <div class="header">
-          <i
-            class="info circle icon"
-            aria-hidden="true"
-          />
-          Informations
-        </div>
-        {{ message.comment }}
-      </div>
-    </div>
     <h1 class="ui header">
       Administration des fonds cartographiques
     </h1>
@@ -76,7 +55,7 @@
 
 <script>
 import BasemapListItem from '@/components/Project/Basemaps/BasemapListItem.vue';
-import { mapState, mapGetters } from 'vuex';
+import { mapState, mapGetters, mapMutations } from 'vuex';
 
 export default {
   name: 'ProjectBasemaps',
@@ -87,7 +66,6 @@ export default {
 
   data() {
     return {
-      infoMessage: [],
       newBasemapIds: [],
     };
   },
@@ -109,6 +87,7 @@ export default {
   },
 
   methods: {
+    ...mapMutations(['DISPLAY_MESSAGE']),
     addBasemap() {
       this.newBasemapIds.push(this.basemapMaxId + 1); //* register new basemaps to seperate post and put
       this.$store.commit('map/CREATE_BASEMAP', this.basemapMaxId + 1);
@@ -140,27 +119,17 @@ export default {
                 res.status === 200 && res.status === 201 && res.status === 204
             );
             if (errors.length === 0) {
-              this.infoMessage.push({
-                success: true,
+              this.DISPLAY_MESSAGE({
                 comment: 'Enregistrement effectué.',
+                level: 'positive'
               });
               this.newBasemapIds = [];
             } else {
-              this.infoMessage.push({
-                success: false,
-                comment: "L'édition des fonds cartographiques a échoué. ",
+              this.DISPLAY_MESSAGE({
+                comment: 'L\'édition des fonds cartographiques a échoué.',
+                level: 'negative'
               });
             }
-
-            document
-              .getElementById('message_info')
-              .scrollIntoView({ block: 'end', inline: 'nearest' });
-            setTimeout(
-              function () {
-                this.infoMessage = [];
-              }.bind(this),
-              5000
-            );
           })
           .catch((error) => {
             console.error(error);