change endpoint and move fetch to component

src/main.js

@@ -11,7 +11,6 @@ Vue.config.productionTip = false
 axios.all([store.dispatch("USER_INFO"),
 store.dispatch("GET_ALL_PROJECTS"),
 store.dispatch("GET_STATIC_PAGES"),
-store.dispatch("GET_USERS"),
 store.dispatch("GET_USER_LEVEL_PROJECTS") // * mock en attendant endpoint ou autre
 ]).then(axios.spread(function () {
   new Vue({

src/store/index.js

@@ -33,9 +33,7 @@ export default new Vuex.Store({
   state: {
     logged: false,
     user: false,
-    users: [],
     project_slug: null,
-    projectMembers: null,
     projects: [],
     staticPages: null,
     SSO_SETTED: false,
@@ -49,9 +47,6 @@ export default new Vuex.Store({
     SET_PROJECT_SLUG(state, slug) {
       state.project_slug = slug;
     },
-    SET_PROJECT_MEMBERS(state, projectMembers) {
-      state.projectMembers = projectMembers;
-    },
     SET_USER(state, payload) {
       state.user = payload;
     },
@@ -105,14 +100,7 @@ export default new Vuex.Store({
           throw error;
         });
     },
-    async GET_USERS({ commit }) {
-      await axios
-        .get(`${DJANGO_API_BASE}users/`)
-        .then((response) => (commit("SET_USERS", response.data)))
-        .catch((error) => {
-          throw error;
-        });
-    },
+
     LOGIN({ commit, dispatch }, payload) {
       if (payload.username && payload.password) {
         axios
@@ -134,7 +122,7 @@ export default new Vuex.Store({
       }
     },
 
-    USER_INFO({ commit }) {
+    USER_INFO({ commit }) { // ? not used currently ?
       axios
         .get(`${DJANGO_API_BASE}user_info/`)
         .then((response) => {

src/views/project/Project_members.vue

@@ -17,15 +17,15 @@
             <th>Niveau d'autorisation</th>
           </tr>
         </thead>
-        <!--  <div id="formsets-members"> -->
         <tbody>
-          <div v-frag v-for="member in memberForms" :key="member.username">
+          <div v-frag v-for="member in projectMembers" :key="member.username">
             <tr>
               <td>
-                {{ member.full_name }}<br /><i>{{ member.username }}</i>
+                {{ member.last_name }} {{ member.first_name }}<br /><i>{{
+                  member.username
+                }}</i>
               </td>
               <td>
-                <!-- :selection.sync="memberForms[index].userLevel" -->
                 <div class="required field">
                   <Dropdown
                     :options="levelOptions"
@@ -33,33 +33,9 @@
                     :selection.sync="member.userLevel"
                     :search="true"
                   />
-                  <!-- <div class="ui selection search dropdown">
-                      <input
-                        type="hidden"
-                        name="level"
-                        id="level"
-                        v-model="member.level"
-                      />
-                      <div class="default text"></div>
-                      <i class="dropdown icon"></i>
-                      <div class="menu">
-                        {% for x,y in form.level.field.choices %}
-                        <div
-                          v-for="(x, y) in form.level.field.choices"
-                          :key="y"
-                          class="item"
-                          :data-value="x"
-                          :selected="form.level.value === x"
-                        >
-                          {{ y }}
-                        </div>
-                      </div>
-                    </div>
-                    {{ form.level.errors }} -->
                 </div>
               </td>
             </tr>
-            <!--  </div> -->
           </div>
         </tbody>
       </table>
@@ -78,8 +54,9 @@
 </template>
 
 <script>
+import axios from "axios";
 import frag from "vue-frag";
-import { mapState } from "vuex";
+import { mapGetters } from "vuex";
 import Dropdown from "@/components/Dropdown.vue";
 
 export default {
@@ -93,12 +70,12 @@ export default {
   },
 
   computed: {
-    ...mapState(["users"]),
+    ...mapGetters(["project"]),
   },
 
   data() {
     return {
-      memberForms: [],
+      projectMembers: [],
       levelOptions: [
         "Utilisateur connecté",
         "Contributeur",
@@ -109,14 +86,48 @@ export default {
   },
   methods: {
     validateMembers() {
-      console.log("POST ", this.memberForms);
+      const data = {
+        slug: this.project.slug,
+        data: this.projectMembers,
+      };
+      console.log("validateMembers", data);
+      /* axios
+        .post(`${DJANGO_API_BASE}projet/${payload.slug}/utilisateurs/`, payload.data)
+        .then((response) => {
+          const user = response.data.user;
+
+        })
+        .catch(() => {
+          router.push({ name: "login" });
+        }); */
+    },
+    async fetchMembers() {
+      return axios
+        .get(
+          `${process.env.VUE_APP_DJANGO_API_BASE}projet/${this.$route.params.slug}/utilisateurs`
+        )
+        .then((response) => response.data.members)
+        .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],
+            ...el,
+          };
+        });
+      });
     },
   },
 
   created() {
-    this.memberForms = this.users.map((el) => {
-      return { userLevel: null, ...el };
-    });
+    if (!this.project) {
+      this.$store.commit("SET_PROJECT_SLUG", this.$route.params.slug);
+    }
+    this.populateMembers();
   },
 };
 </script>
\ No newline at end of file