feat(groups): prepare group state management to be link to API (WIP)

bimdata · Aug 2, 2021 · 09a4395 · 09a4395
1 parent e0da52b
commit 09a4395
Show file tree

Hide file tree

Showing 5 changed files with 218 additions and 46 deletions.
diff --git a/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.scss b/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.scss
@@ -12,6 +12,10 @@
   color: $color-primary;
   transition-duration: 0.35s;
 
+  &__loader {
+    transform: scale(2);
+  }
+
   &__selector {
     display: flex;
     flex-direction: column;

diff --git a/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.vue b/src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="group-member-selection-card">
     <transition name="fade" mode="out-in">
-      <template v-if="showSelector">
+      <div v-if="loading" class="group-member-selection-card__loader">
+        <BIMDataSpinner />
+      </div>
+
+      <template v-else-if="showSelector">
         <div class="group-member-selection-card__selector">
           <div class="group-member-selection-card__selector__title">
             {{ $t("GroupMemberSelectionCard.title") }}
@@ -15,7 +19,7 @@
             :multi="true"
             :options="users"
             optionKey="firstname"
-            :modelValue="group.members"
+            v-model="members"
           />
           <div class="group-member-selection-card__selector__actions">
             <BIMDataButton width="80px" ghost radius @click="closeSelector">
@@ -26,7 +30,7 @@
               color="primary"
               fill
               radius
-              @click="() => {}"
+              @click="submit"
             >
               {{ $t("GroupMemberSelectionCard.submitButtonText") }}
             </BIMDataButton>
@@ -54,9 +58,14 @@
 
 <script>
 import { ref } from "vue";
+import { useGroups } from "@/state/groups";
 
 export default {
   props: {
+    project: {
+      type: Object,
+      required: true
+    },
     group: {
       type: Object,
       required: true
@@ -66,7 +75,25 @@ export default {
       required: true
     }
   },
-  setup() {
+  setup(props) {
+    const { updateGroupMembers } = useGroups();
+
+    const loading = ref(false);
+    const members = ref(props.group.members);
+
+    const submit = async () => {
+      try {
+        console.log("Members: ", members.value);
+        loading.value = true;
+        await updateGroupMembers(props.project, props.group, members.value);
+        closeSelector();
+      } catch (error) {
+        // TODO
+      } finally {
+        loading.value = false;
+      }
+    };
+
     const showSelector = ref(false);
     const openSelector = () => {
       showSelector.value = true;
@@ -77,10 +104,13 @@ export default {
 
     return {
       // References
+      loading,
+      members,
       showSelector,
       // Methods
       closeSelector,
-      openSelector
+      openSelector,
+      submit
     };
   }
 };

diff --git a/src/server/GroupService.js b/src/server/GroupService.js
@@ -3,57 +3,107 @@ import apiClient from "./api-client";
 class GroupService {
   fetchProjectGroups(project) {
     return [
-      // {
-      //   id: 1,
-      //   name: "My Group Name",
-      //   color: "#FF3D1E",
-      //   project,
-      //   members: [
-      //     {
-      //       id: 1230,
-      //       firstname: "Gaëlle",
-      //       lastname: "Leroux",
-      //       email: "gaelle@bimdata.io"
-      //     },
-      //     {
-      //       id: 1231,
-      //       firstname: "Gaëtan",
-      //       lastname: "Lagier",
-      //       email: "gaetan@bimdata.io"
-      //     },
-      //     {
-      //       id: 1232,
-      //       firstname: "Hugo",
-      //       lastname: "Duroux",
-      //       email: "hugo@bimdata.io"
-      //     },
-      //     {
-      //       id: 1234,
-      //       firstname: "Nicolas",
-      //       lastname: "Richel",
-      //       email: "nicolas@bimdata.io"
-      //     },
-      //     {
-      //       id: 1235,
-      //       firstname: "François",
-      //       lastname: "Thierry",
-      //       email: "francois@bimdata.io"
-      //     }
-      //   ]
-      // }
+      {
+        id: 1,
+        name: "My Group Name",
+        color: "#FF3D1E",
+        project,
+        members: [
+          {
+            id: 1230,
+            firstname: "Gaëlle",
+            lastname: "Leroux",
+            email: "gaelle@bimdata.io"
+          },
+          {
+            id: 1231,
+            firstname: "Gaëtan",
+            lastname: "Lagier",
+            email: "gaetan@bimdata.io"
+          },
+          {
+            id: 1232,
+            firstname: "Hugo",
+            lastname: "Duroux",
+            email: "hugo@bimdata.io"
+          },
+          {
+            id: 1234,
+            firstname: "Nicolas",
+            lastname: "Richel",
+            email: "nicolas@bimdata.io"
+          },
+          {
+            id: 1235,
+            firstname: "François",
+            lastname: "Thierry",
+            email: "francois@bimdata.io"
+          }
+        ]
+      }
     ];
+    // return apiClient.getManageGroups({
+    //   cloudPk: project.cloud.id,
+    //   projectPk: project.id
+    // });
   }
 
   createGroup(project, group) {
     return group;
+    // return apiClient.createManageGroup({
+    //   cloudPk: project.cloud.id,
+    //   projectPk: project.id,
+    //   data: group
+    // });
   }
 
   updateGroup(project, group) {
     return group;
+    // return apiClient.updateManageGroup({
+    //   cloudPk: project.cloud.id,
+    //   projectPk: project.id,
+    //   id: group.id,
+    //   data: group
+    // });
   }
 
   deleteGroup(project, group) {
     return group;
+    // return apiClient.deleteManageGroup({
+    //   cloudPk: project.cloud.id,
+    //   projectPk: project.id,
+    //   id: group.id
+    // });
+  }
+
+  addGroupMembers(project, group, users) {
+    return users;
+    // return Promise.all(
+    //   users.map(
+    //     user => apiClient.addGroupMember({
+    //       cloudPk: project.cloud.id,
+    //       projectPk: project.id,
+    //       groupPk: group.id,
+    //       data: {
+    //         userId: user.id
+    //       }
+    //     })
+    //   )
+    // );
+  }
+
+  removeGroupMembers(project, group, users) {
+    return users;
+    // return Promise.all(
+    //   users.map(
+    //     user => apiClient.deleteGroupMember({
+    //       cloudPk: project.cloud.id,
+    //       projectPk: project.id,
+    //       groupPk: group.id,
+    //       id: user.id
+    //     })
+    //   )
+    // );
   }
 }
 

diff --git a/src/state/groups.js b/src/state/groups.js
@@ -24,6 +24,29 @@ const updateGroup = async (project, group) => {
   return newGroup;
 };
 
+const updateGroupMembers = async (project, group, members) => {
+  const oldMemberIDs = group.members.map(member => member.id);
+  const newMemberIDs = members.map(member => member.id);
+  const membersToAdd = members.filter(
+    member => !oldMemberIDs.includes(member.id)
+  );
+  const membersToRemove = group.members.filter(
+    member => !newMemberIDs.includes(member.id)
+  );
+  const addedMembers = await GroupService.addGroupMembers(
+    project,
+    group,
+    membersToAdd
+  );
+  const removedMembers = await GroupService.removeGroupMembers(
+    project,
+    group,
+    membersToRemove
+  );
+  softUpdateGroup({ ...group, members });
+  return { addedMembers, removedMembers };
+};
+
 const softUpdateGroup = group => {
   state.projectGroups = state.projectGroups.map(g =>
     g.id === group.id ? { ...g, ...group } : g
@@ -57,6 +80,7 @@ export function useGroups() {
     loadProjectGroups,
     createGroup,
     updateGroup,
+    updateGroupMembers,
     softUpdateGroup,
     deleteGroup,
     softDeleteGroup,

diff --git a/src/views/group-board/GroupBoard.vue b/src/views/group-board/GroupBoard.vue
@@ -17,7 +17,12 @@
     </ViewHeader>
 
     <ResponsiveGrid itemWidth="320px">
-      <GroupMemberSelectionCard :key="-1" :group="group" :users="users" />
+      <GroupMemberSelectionCard
+        :key="-1"
+        :project="project"
+        :group="group"
+        :users="users"
+      />
       <GroupMemberCard
         v-for="user of displayedUsers"
         :key="user.id"
@@ -48,20 +53,79 @@ export default {
     GroupMemberSelectionCard
   },
   setup() {
-    const { projectUsers } = useProjects();
+    const { currentProject, projectUsers } = useProjects();
     const { currentGroup } = useGroups();
 
     const { filteredList: displayedUsers, searchText } = useListFilter(
       computed(() => currentGroup.value.members),
       user => `${user.firstname} ${user.lastname}`
     );
 
+    const users = [
+      {
+        id: 1230,
+        firstname: "Gaëlle",
+        lastname: "Leroux",
+        email: "gaelle@bimdata.io"
+      },
+      {
+        id: 1231,
+        firstname: "Gaëtan",
+        lastname: "Lagier",
+        email: "gaetan@bimdata.io"
+      },
+      {
+        id: 1232,
+        firstname: "Hugo",
+        lastname: "Duroux",
+        email: "hugo@bimdata.io"
+      },
+      {
+        id: 1234,
+        firstname: "Nicolas",
+        lastname: "Richel",
+        email: "nicolas@bimdata.io"
+      },
+      {
+        id: 1235,
+        firstname: "François",
+        lastname: "Thierry",
+        email: "francois@bimdata.io"
+      },
+      {
+        id: 1235,
+        firstname: "Tata",
+        lastname: "A",
+        email: "tata.a@test.com"
+      },
+      {
+        id: 1235,
+        firstname: "Titi",
+        lastname: "ZZZ",
+        email: "titi.zzz@test.com"
+      },
+      {
+        id: 1235,
+        firstname: "Toto",
+        lastname: "Foo",
+        email: "toto.foo@test.com"
+      },
+      {
+        id: 1235,
+        firstname: "Tutu",
+        lastname: "Bar",
+        email: "tutu.bar@test.com"
+      }
+    ];
+
     return {
       // References
       displayedUsers,
       group: currentGroup,
+      project: currentProject,
       searchText,
-      users: projectUsers
+      // users: projectUsers
+      users
     };
   }
 };