team tweaks

src/api/services/team.js

 import { HTTP } from "@/api/http-common";
 
+const getTeamMemberBody = (users) => {
+  return users.map((user) => ({
+    userId: user.id,
+    isTeamLead: user.TeamMember?.isTeamLead,
+  }));
+};
+
 export default {
   async getMyTeam() {
     return await HTTP.get("/teams/my-teams");
@@ -33,10 +40,7 @@ export default {
     });
   },
   async updateTeamMembers(team) {
-    const membersBody = team.members.map((m) => ({
-      userId: m.id,
-      isTeamLead: m.TeamMember.isTeamLead,
-    }));
+    const membersBody = getTeamMemberBody(team.members);
 
     return HTTP.put(`/teams/${team.id}/members`, membersBody);
   },
@@ -55,6 +59,8 @@ export default {
     });
   },
   async addMembers(members, teamId) {
-    await HTTP.post(`/teams/${teamId}/members`, members);
+    const membersBody = getTeamMemberBody(members);
+
+    await HTTP.post(`/teams/${teamId}/members`, membersBody);
   },
 };

src/views/Team.vue

@@ -99,12 +99,12 @@
                 <v-card-text>
                   <UserSelect
                     ref="userSelect"
-                    v-model="memberToAdd"
+                    v-model="membersToAdd"
                     multiple
                     :rules="[
                       inputRules.required,
                       inputRules.duplicates(
-                        memberToAdd,
+                        membersToAdd,
                         team.members,
                         'User is already a member of this team'
                       ),
@@ -123,7 +123,7 @@
                     Cancel
                   </v-btn>
                   <v-btn
-                    :disabled="state.isAddingDuplicate || !memberToAdd"
+                    :disabled="state.isAddingDuplicate || !membersToAdd"
                     color="primary"
                     :loading="state.isAddingBusy"
                     text
@@ -210,12 +210,17 @@
         </v-snackbar>
         <v-snackbar
           top
-          v-if="memberToAdd"
+          v-if="membersToAdd"
           v-model="snackbars.add"
           :timeout="5000"
         >
           <div class="text-center">
-            {{ memberToAdd.name }} added to {{ team.name }}
+            <div v-if="membersToAdd.length === 1">
+              {{ membersToAdd[0].name }} added to {{ team.name }}
+            </div>
+            <div v-else>
+              {{ membersToAdd.length }} members added to {{ team.name }}
+            </div>
           </div>
         </v-snackbar>
       </v-skeleton-loader>
@@ -269,7 +274,7 @@ export default {
     ],
     selectedMembers: [],
     deletingMembers: [],
-    memberToAdd: null,
+    membersToAdd: null,
     inputRules,
   }),
   async mounted() {
@@ -334,22 +339,18 @@ export default {
       }
     },
     cancelAddMember() {
-      this.memberToAdd = null;
+      this.membersToAdd = null;
       this.state.isAdding = false;
       this.state.isAddingDuplicate = false;
       this.$refs.userSelect && this.$refs.userSelect.clear();
     },
-    async addMember(member) {
-      if (!member) {
-        member = this.memberToAdd;
-      }
+    async addMember() {
       this.state.isAddingBusy = true;
-      member = member.map(function (member) {
-        return { userId: member.id, isTeamLead: false };
-      });
       try {
-        await TeamService.addMembers(member, this.$route.params.teamId);
-        this.memberToAdd = member;
+        await TeamService.addMembers(
+          this.membersToAdd,
+          this.$route.params.teamId
+        );
         this.snackbars.add = true;
       } catch (e) {
         console.error("unable to add user", e);
@@ -364,16 +365,6 @@ export default {
       this.snackbars.delete = false;
       this.state.isDeleting = true;
       this.deletingMembers = this.selectedMembers;
-      for (let i = 0; i < this.deletingMembers.length; i++) {
-        const tempMember = this.team.members.filter(
-          (member) => member.id === this.deletingMembers[i].id
-        );
-        this.deletingMembers[i] = {
-          ...this.deletingMembers[i],
-          isTeamLead: tempMember[0].TeamMember.isTeamLead,
-        };
-      }
-
       this.deletingMembers.forEach((m) => Vue.set(m, "isDeleting", true));
       try {
         await TeamService.deleteMembers(
@@ -395,12 +386,11 @@ export default {
       // keep the delete snackbar open
       this.snackbars.deleteTimeout = -1;
       this.state.isUndoingDelete = true;
-      console.log("Deleted", this.deletingMembers);
-      const members = this.deletingMembers.map(function (member) {
-        return { userId: member.id, isTeamLead: member.TeamMember.isTeamLead };
-      });
       try {
-        await TeamService.addMembers(members, this.$route.params.teamId);
+        await TeamService.addMembers(
+          this.deletingMembers,
+          this.$route.params.teamId
+        );
       } catch (e) {
         //TODO: error message to the user???
         console.error("error restoring member:", e);

tests/unit/views/Team.spec.js

@@ -252,7 +252,7 @@ describe("Team", () => {
 
       wrapper.vm.$refs = { userSelect };
 
-      wrapper.vm.memberToAdd = mockMember;
+      wrapper.vm.memberToAdd = [mockMember];
       await wrapper.vm.addMember();
       expect(TeamService.addMember).toHaveBeenCalledTimes(1);
       expect(TeamService.addMember).toHaveBeenCalledWith(mockMember, 42, false);
@@ -265,11 +265,11 @@ describe("Team", () => {
       console.error = jest.fn(); // mock console.error when expecting error messages
       const userSelect = { clear: jest.fn() };
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
-      TeamService.addMember = jest.fn().mockResolvedValue({ name: "mock" });
+      TeamService.addMembers = jest.fn().mockResolvedValue({ name: "mock" });
       const wrapper = shallowMount(Team, { mocks: { $route } });
       wrapper.vm.$refs = { userSelect };
       TeamService.addMember = jest.fn().mockRejectedValue("mock error");
-      await wrapper.vm.addMember(mockMember);
+      await wrapper.vm.addMember([mockMember]);
       expect(wrapper.vm.state.isAdding).toEqual(false);
       expect(wrapper.vm.state.isAddingBusy).toEqual(false);
       expect(userSelect.clear).toHaveBeenCalledTimes(1);
@@ -283,6 +283,7 @@ describe("Team", () => {
 
       TeamService.deleteMembers = jest.fn().mockResolvedValue();
       const toDelete = {
+        id: 46,
         name: "mock member to delete",
         TeamMember: { isTeamLead: true },
       };
@@ -296,10 +297,7 @@ describe("Team", () => {
       expect(wrapper.vm.snackbars.delete).toEqual(true);
       expect(wrapper.vm.state.isDeleting).toEqual(false);
       expect(TeamService.deleteMembers).toHaveBeenCalledTimes(1);
-      expect(TeamService.deleteMembers).toHaveBeenCalledWith(
-        [{ isDeleting: false, isTeamLead: true, ...toDelete }],
-        42
-      );
+      expect(TeamService.deleteMembers).toHaveBeenCalledWith([46], 42);
       expect(wrapper.vm.selectedMembers).toEqual([]);
     });
     it("should handle error on delete team member", async () => {
@@ -315,11 +313,12 @@ describe("Team", () => {
   });
 
   describe("undo delete team member", () => {
-    const deletingMembers = [{ name: "mock to delete" }];
+    const deletingMembers = [
+      { id: 46, name: "mock to delete", TeamMember: { isTeamLead: true } },
+    ];
     it("should undo delete team member", async () => {
       TeamService.getTeam = jest.fn().mockResolvedValue({ name: "mock" });
       const wrapper = shallowMount(Team, { mocks: { $route } });
-      // await flushPromises();
 
       TeamService.addMembers = jest.fn().mockResolvedValue();
 
@@ -330,7 +329,10 @@ describe("Team", () => {
       await flushPromises();
 
       expect(TeamService.addMembers).toHaveBeenCalledTimes(1);
-      expect(TeamService.addMembers).toHaveBeenCalledWith(deletingMembers, 42);
+      expect(TeamService.addMembers).toHaveBeenCalledWith(
+        [{ userId: 46, isTeamLead: true }],
+        42
+      );
       expect(wrapper.vm.state.isUndoingDelete).toEqual(false);
       expect(wrapper.vm.deletingMembers).toEqual([]);
     });