add members & remove logged users from members

src/components/Dropdown.vue

@@ -11,6 +11,7 @@
     <input
       v-if="search"
       v-model="input"
+      @input="isOpen = true"
       v-on:keyup.enter="select(0)"
       v-on:keyup.esc="toggleDropdown(false)"
       class="search"

src/views/project/Project_members.vue

@@ -2,6 +2,44 @@
   <div class="fourteen wide column">
     <h1 class="ui header">Gérer les membres</h1>
 
+    <h4>Ajouter un membre</h4>
+
+    <form id="form-feature-edit" class="ui form" name="add-member">
+      <div class="two fields">
+        <div class="field">
+          <!-- <label :for="">{{ form.title.label }}</label> -->
+          <!-- <input type="text" v-model="newMember.name" /> -->
+          <Dropdown
+            :options="userOptions"
+            :selected="newMember.user.name"
+            :selection.sync="newMember.user"
+            :search="true"
+            :clearable="true"
+          />
+          <!--             <ul id="errorlist-title" class="errorlist">
+              <li v-for="error in form.title.errors" :key="error">
+                {{ error }}
+              </li>
+            </ul> -->
+        </div>
+        <div class="field">
+          <!-- <label for="add-member"></label> -->
+          <Dropdown
+            :options="levelOptions"
+            :selected="newMember.status.name"
+            :selection.sync="newMember.status"
+          />
+        </div>
+      </div>
+      <button @click="addMember" type="button" class="ui teal icon button">
+        <i class="white save icon"></i>
+        <span class="padding-1">Ajouter</span>
+      </button>
+    </form>
+
+    <!-- <input type="text" v-model="newMember.name" /> -->
+
+    <h4>Modifier le rôle d'un membre</h4>
     <form
       id="form-members"
       action="."
@@ -68,28 +106,65 @@ export default {
 
   data() {
     return {
-      projectMembers: [],
+      projectUsers: [],
       options: [
         { name: "Utilisateur connecté", value: "logged_user" },
         { name: "Contributeur", value: "contributor" },
         { name: "Modérateur", value: "moderator" },
         { name: "Administrateur projet", value: "admin" },
       ],
+      newMember: {
+        user: {
+          name: "",
+          value: "",
+        },
+        status: {
+          name: "Contributeur",
+          value: "contributor",
+        },
+      },
     };
   },
 
   computed: {
     ...mapGetters(["project"]),
+
+    userOptions: function () {
+      return this.projectUsers
+        .filter((el) => el.userLevel.value === "logged_user")
+        .map((el) => {
+          return {
+            name: el.user.username,
+            value: el.user.id,
+          };
+        });
+    },
+
     levelOptions: function () {
       return this.options.filter((el) =>
         this.project.moderation ? el : el.value !== "moderator"
       );
     },
+
+    projectMembers() {
+      return this.projectUsers.filter(
+        (el) => el.userLevel.value !== "logged_user"
+      );
+    },
   },
 
   methods: {
+    addMember() {
+      //* find user
+      const indexOfUser = this.projectUsers.findIndex(
+        (el) => el.user.id === this.newMember.user.value
+      );
+      //* modify its userLever
+      this.projectUsers[indexOfUser].userLevel = this.newMember.status;
+    },
+
     validateMembers() {
-      const data = this.projectMembers.map((member) => {
+      const data = this.projectUsers.map((member) => {
         return {
           user: member.user,
           level: {
@@ -120,7 +195,7 @@ export default {
         });
     },
 
-    async fetchMembers() {
+    fetchMembers() { // todo: move function to a service
       return axios
         .get(
           `${this.$store.state.configuration.VUE_APP_DJANGO_API_BASE}projects/${this.$route.params.slug}/utilisateurs`
@@ -131,14 +206,14 @@ export default {
         });
     },
 
-    async populateMembers() {
+    populateMembers() {
       this.$store.commit(
         "DISPLAY_LOADER",
         "Récupération des membres en cours..."
       );
-      await this.fetchMembers().then((members) => {
+      this.fetchMembers().then((members) => {
         this.$store.commit("DISCARD_LOADER");
-        this.projectMembers = members.map((el) => {
+        this.projectUsers = members.map((el) => {
           return {
             userLevel: { name: el.level.display, value: el.level.codename },
             ...el,
@@ -160,4 +235,10 @@ export default {
     this.$store.commit("DISCARD_LOADER");
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.padding-1 {
+  padding: 0 1em;
+}
+</style>
\ No newline at end of file