fix: display a message at error in project members update

src/views/Project/ProjectMembers.vue

@@ -143,7 +143,7 @@
 <script>
 import axios from '@/axios-client.js';
 
-import { mapState } from 'vuex';
+import { mapMutations, mapState } from 'vuex';
 
 import Dropdown from '@/components/Dropdown.vue';
 
@@ -247,10 +247,16 @@ export default {
 
   destroyed() {
     //* allow user to change page if ever stuck on loader
-    this.$store.commit('DISCARD_LOADER');
+    this.DISCARD_LOADER();
   },
 
   methods: {
+    ...mapMutations([
+      'DISPLAY_MESSAGE',
+      'DISPLAY_LOADER',
+      'DISCARD_LOADER'
+    ]),
+
     validateNewMember() {
       this.newMember.errors = [];
       if (!this.newMember.user.value) {
@@ -300,45 +306,62 @@ export default {
       });
     },
 
+    /**
+     * Saves the updated members and their roles for a project.
+     * Displays a loader while the update is in progress and provides feedback upon completion or error.
+     */
     saveMembers() {
-      this.$store.commit(
-        'DISPLAY_LOADER',
-        'Mise à jour des membres du projet en cours ...'
-      );
+      // Display a loader to indicate that the update process is ongoing
+      this.DISPLAY_LOADER('Updating project members...');
 
+      // Prepare the data to be sent in the API request
       const data = this.projectUsers.map((member) => {
         return {
           user: member.user,
           level: {
-            display: member.userLevel.name,
-            codename: member.userLevel.value,
+            display: member.userLevel.name,  // Display name of the user level
+            codename: member.userLevel.value, // Codename of the user level
           },
         };
       });
 
+      // Make an API request to update the project members
       axios
         .put(
           `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/utilisateurs/`,
           data
         )
         .then((response) => {
+          // Check if the response status is 200 (OK)
           if (response.status === 200) {
-            this.$store.dispatch('GET_USER_LEVEL_PROJECTS'); //* update user status in top right menu
-            this.$store.commit('DISPLAY_MESSAGE', { comment: 'Permissions mises à jour', level: 'positive' });
+            // Dispatch an action to update the user status in the top right menu
+            this.$store.dispatch('GET_USER_LEVEL_PROJECTS');
+            // Display a positive message indicating success
+            this.DISPLAY_MESSAGE({ comment: 'Permissions updated successfully', level: 'positive' });
           } else {
-            this.$store.commit(
-              'DISPLAY_MESSAGE',
-              {
-                comment : "Une erreur s'est produite pendant la mises à jour des permissions",
-                level: 'negative'
-              }
-            );
+            // Display a generic error message if the response status is not 200
+            this.DISPLAY_MESSAGE({
+              comment: "An error occurred while updating permissions",
+              level: 'negative'
+            });
           }
-          this.$store.commit('DISCARD_LOADER');
+          // Hide the loader regardless of the request result
+          this.DISCARD_LOADER();
         })
         .catch((error) => {
-          this.$store.commit('DISCARD_LOADER');
-          throw error;
+          // Hide the loader if an error occurs
+          this.DISCARD_LOADER();
+          // Determine the error message to display
+          const errorMessage = error.response && error.response.data && error.response.data.error
+            ? error.response.data.error
+            : "An error occurred while updating permissions";
+          // Display the error message
+          this.DISPLAY_MESSAGE({
+            comment: errorMessage,
+            level: 'negative'
+          });
+          // Log the error to the console for debugging
+          console.error(error);
         });
     },
 
@@ -355,12 +378,9 @@ export default {
     },
 
     populateMembers() {
-      this.$store.commit(
-        'DISPLAY_LOADER',
-        'Récupération des membres en cours...'
-      );
+      this.DISPLAY_LOADER('Récupération des membres en cours...');
       this.fetchMembers().then((members) => {
-        this.$store.commit('DISCARD_LOADER');
+        this.DISCARD_LOADER();
         this.projectUsers = members.map((el) => {
           return {
             userLevel: { name: el.level.display, value: el.level.codename },