update project members authorization & refresh user level

src/App.vue

@@ -68,7 +68,6 @@
           <div class="right menu">
             <router-link v-if="user" to="/my_account/" class="item">
               {{ userFullname || user.username || "Utilisateur inconnu" }}
-              <!-- // ? full_name n'existe pas côté django... -->
             </router-link>
             <div
               v-if="user && user.is_administrator"
@@ -81,8 +80,6 @@
               <span v-if="user.is_administrator"> Gestionnaire métier </span>
             </div>
             <!-- // todo : find out SSO_SETTED in django -->
-            <!-- // ? condition bizarre (if !sso_setted pui elif !sso_setted)  ? -->
-            <!-- <a  class="item" href="{% url 'geocontrib:logout' %}"><i class="ui logout icon"></i></a> -->
             <a v-if="user && !SSO_SETTED" @click="logout" class="item"
               ><i class="ui logout icon"></i>
             </a>
@@ -95,8 +92,6 @@
     </header>
     <main>
       <div class="ui stackable grid centered container">
-        <!-- // todo : add messages -->
-        <!--  {% if messages %} -->
         <div v-if="messages" class="row">
           <div class="fourteen wide column">
             <div
@@ -117,7 +112,6 @@
             </div>
           </div>
         </div>
-        <!-- {% endif %} -->
         <router-view />
         <!-- //* Les views sont injectées ici -->
       </div>

src/views/project/Project_members.vue

@@ -9,7 +9,6 @@
       enctype="multipart/form-data"
       class="ui form"
     >
-      <!-- {{ formset.non_form_errors }} -->
       <table class="ui red table">
         <thead>
           <tr>
@@ -18,25 +17,23 @@
           </tr>
         </thead>
         <tbody>
-          <div v-frag v-for="member in projectMembers" :key="member.username">
-            <tr>
-              <td>
-                {{ member.last_name }} {{ member.first_name }}<br /><i>{{
-                  member.username
-                }}</i>
-              </td>
-              <td>
-                <div class="required field">
-                  <Dropdown
-                    :options="levelOptions"
-                    :selected="member.userLevel"
-                    :selection.sync="member.userLevel"
-                    :search="true"
-                  />
-                </div>
-              </td>
-            </tr>
-          </div>
+          <tr v-for="member in projectMembers" :key="member.username">
+            <td>
+              {{ member.user.last_name }} {{ member.user.first_name }}<br /><i
+                >{{ member.user.username }}</i
+              >
+            </td>
+            <td>
+              <div class="required field">
+                <Dropdown
+                  :options="levelOptions"
+                  :selected="member.userLevel.name"
+                  :selection.sync="member.userLevel"
+                  :search="true"
+                />
+              </div>
+            </td>
+          </tr>
         </tbody>
       </table>
 
@@ -59,7 +56,6 @@ import frag from "vue-frag";
 import { mapGetters } from "vuex";
 import Dropdown from "@/components/Dropdown.vue";
 
-
 export default {
   name: "Project_members",
 
@@ -70,52 +66,65 @@ export default {
     Dropdown,
   },
 
-  computed: {
-    ...mapGetters(["project"]),
-  },
-
   data() {
     return {
       projectMembers: [],
       levelOptions: [
-        "Utilisateur connecté",
-        "Contributeur",
-        "Modérateur",
-        "Administrateur projet",
+        { name: "Utilisateur connecté", value: "logged_user" },
+        { name: "Contributeur", value: "contributor" },
+        { name: "Modérateur", value: "moderator" },
+        { name: "Administrateur projet", value: "admin" },
       ],
     };
   },
+
+  computed: {
+    ...mapGetters(["project"]),
+  },
+
   methods: {
     validateMembers() {
-      // const data = {
-      //   slug: this.project.slug,
-      //   data: this.projectMembers,
-      // };
-      // console.log("validateMembers", data);
-      /* axios
-        .post(`${DJANGO_API_BASE}projet/${payload.slug}/utilisateurs/`, payload.data)
+      const data = this.projectMembers.map((member) => {
+        return {
+          user: member.user,
+          level: {
+            display: member.userLevel.name,
+            codename: member.userLevel.value,
+          },
+        };
+      });
+      console.log("validateMembers", data);
+      axios
+        .put(
+          `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.project.slug}/utilisateurs/`,
+          data
+        )
         .then((response) => {
-          const user = response.data.user;
+          if (response.status === 200) {
+            this.$store.dispatch("GET_USER_LEVEL_PROJECTS"); //* update user status in top right menu
+          }
         })
-        .catch(() => {
-          router.push({ name: "login" });
-        }); */
+        .catch((error) => {
+          throw error;
+        });
     },
+
     async fetchMembers() {
       return axios
         .get(
           `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
         )
-        .then((response) => response.data.members)
+        .then((response) => response.data)
         .catch((error) => {
           throw error;
         });
     },
+
     async populateMembers() {
       await this.fetchMembers().then((members) => {
         this.projectMembers = members.map((el) => {
           return {
-            userLevel: el.userLevel ? el.userLevel : this.levelOptions[0],
+            userLevel: { name: el.level.display, value: el.level.codename },
             ...el,
           };
         });