feat(groups): fix and finish group members management features

src/components/specific/app/app-breadcrumb/breadcrumb-group-selector/BreadcrumbGroupSelector.vue

@@ -1,18 +1,21 @@
 <template>
-  <div>{{ $t("BreadcrumbGroupSelector.text") }}</div>
+  <div style="cursor: pointer" @click="goToProjectGroups">
+    {{ $t("BreadcrumbGroupSelector.text") }}
+  </div>
   <div class="breadcrumb-separator"></div>
   <BreadcrumbSelector
     :list="groups"
     labelProp="name"
     :header="selectedGroup.name"
-    @item-selected="goToGroup"
+    @item-selected="goToGroupBoard"
   />
 </template>
 
 <script>
 import { useRouter } from "vue-router";
 import { routeNames } from "@/router";
 import { useGroups } from "@/state/groups";
+import { useProjects } from "@/state/projects";
 // Components
 import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector";
 
@@ -22,14 +25,25 @@ export default {
   },
   setup() {
     const router = useRouter();
+    const { currentProject } = useProjects();
     const { projectGroups, currentGroup } = useGroups();
 
-    const goToGroup = group => {
+    const goToProjectGroups = () => {
+      router.push({
+        name: routeNames.projectGroups,
+        params: {
+          spaceID: currentProject.value.cloud.id,
+          projectID: currentProject.value.id
+        }
+      });
+    };
+
+    const goToGroupBoard = group => {
       router.push({
         name: routeNames.groupBoard,
         params: {
-          spaceID: group.project.cloud.id,
-          projectID: group.project.id,
+          spaceID: currentProject.value.cloud.id,
+          projectID: currentProject.value.id,
           groupID: group.id
         }
       });
@@ -40,7 +54,8 @@ export default {
       selectedGroup: currentGroup,
       groups: projectGroups,
       // Methods
-      goToGroup
+      goToGroupBoard,
+      goToProjectGroups
     };
   }
 };

src/components/specific/groups/group-card/GroupCard.vue

@@ -84,8 +84,8 @@ export default {
       router.push({
         name: routeNames.groupBoard,
         params: {
-          spaceID: props.group.project.cloud.id,
-          projectID: props.group.project.id,
+          spaceID: props.project.cloud.id,
+          projectID: props.project.id,
           groupID: props.group.id
         }
       });

src/components/specific/groups/group-member-card/GroupMemberCard.vue

@@ -1,6 +1,7 @@
 <template>
   <BIMDataCard class="group-member-card">
     <template #content>
+      <!--
       <BIMDataButton
         class="group-member-card__btn-menu"
         ghost
@@ -10,6 +11,7 @@
       >
         <BIMDataIcon name="ellipsis" size="l" fill color="tertiary-dark" />
       </BIMDataButton>
+      -->
       <UserAvatar :user="user" size="64" />
       <div class="group-member-card__info">
         <div class="group-member-card__info__name">

src/components/specific/groups/group-member-selection-card/GroupMemberSelectionCard.vue

@@ -9,7 +9,7 @@
         <div class="group-member-selection-card__selector">
           <div class="group-member-selection-card__selector__title">
             {{ $t("GroupMemberSelectionCard.title") }}
-            <BIMDataButton ghost rounded icon @click.stop="closeSelector">
+            <BIMDataButton ghost rounded icon @click="closeSelector">
               <BIMDataIcon name="close" size="xxs" />
             </BIMDataButton>
           </div>
@@ -18,7 +18,8 @@
             :label="$t('GroupMemberSelectionCard.selectorLabel')"
             :multi="true"
             :options="users"
-            optionKey="firstname"
+            optionKey="id"
+            optionLabelKey="firstname"
             v-model="members"
           />
           <div class="group-member-selection-card__selector__actions">
@@ -57,7 +58,8 @@
 </template>
 
 <script>
-import { ref } from "vue";
+import { ref, watch } from "vue";
+import { useToggle } from "@/composables/toggle";
 import { useGroups } from "@/state/groups";
 
 export default {
@@ -76,32 +78,38 @@ export default {
     }
   },
   setup(props) {
-    const { updateGroupMembers } = useGroups();
+    const { selectGroup, updateGroupMembers } = useGroups();
 
     const loading = ref(false);
-    const members = ref(props.group.members);
+    const {
+      isOpen: showSelector,
+      open: openSelector,
+      close: closeSelector
+    } = useToggle();
+
+    const members = ref([]);
+    watch(
+      () => props.group,
+      () => {
+        closeSelector();
+        members.value = props.group.members;
+      },
+      { immediate: true }
+    );
 
     const submit = async () => {
       try {
-        console.log("Members: ", members.value);
         loading.value = true;
         await updateGroupMembers(props.project, props.group, members.value);
+        selectGroup(props.group.id);
         closeSelector();
       } catch (error) {
-        // TODO
+        console.error(error);
       } finally {
         loading.value = false;
       }
     };
 
-    const showSelector = ref(false);
-    const openSelector = () => {
-      showSelector.value = true;
-    };
-    const closeSelector = () => {
-      showSelector.value = false;
-    };
-
     return {
       // References
       loading,

src/components/specific/users/user-avatar-list/UserAvatarList.vue

@@ -3,7 +3,7 @@
     class="user-avatar-list"
     :style="{
       width: `${listWidth}px`,
-      gridTemplateColumns: `repeat(${length}, ${itemGap}px)`
+      gridTemplateColumns: `repeat(${listLength}, ${itemGap}px)`
     }"
   >
     <UserAvatar
@@ -51,6 +51,10 @@ export default {
       type: [Number, String],
       default: 24,
       validate: value => value > 0
+    },
+    fixedWidth: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
@@ -60,8 +64,14 @@ export default {
       return props.users.slice(0, n > l ? l - 1 : l);
     });
 
-    const listWidth = computed(() => {
+    const listLength = computed(() => {
+      const n = props.users.length;
       const l = props.length;
+      return props.fixedWidth || n > l ? l : n;
+    });
+
+    const listWidth = computed(() => {
+      const l = listLength.value;
       const w = +props.itemSize;
       const g = +props.itemGap;
       return l * g + (w > g ? w - g : 0);
@@ -70,6 +80,7 @@ export default {
     return {
       // References
       displayedUsers,
+      listLength,
       listWidth
     };
   }

src/state/groups.js

@@ -27,22 +27,27 @@ const updateGroup = async (project, group) => {
 const updateGroupMembers = async (project, group, members) => {
   const oldMemberIDs = group.members.map(member => member.id);
   const newMemberIDs = members.map(member => member.id);
+
+  // Add members that are in new list but were not in old list
   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
   );
+
+  // Remove members that were in old list but are not in new list
+  const membersToRemove = group.members.filter(
+    member => !newMemberIDs.includes(member.id)
+  );
   const removedMembers = await GroupService.removeGroupMembers(
     project,
     group,
     membersToRemove
   );
+
   softUpdateGroup({ ...group, members });
   return { addedMembers, removedMembers };
 };

src/views/group-board/GroupBoard.vue

@@ -24,9 +24,9 @@
         :users="users"
       />
       <GroupMemberCard
-        v-for="user of displayedUsers"
-        :key="user.id"
-        :user="user"
+        v-for="member of displayedMembers"
+        :key="member.id"
+        :user="member"
       />
     </ResponsiveGrid>
   </div>
@@ -56,76 +56,18 @@ export default {
     const { currentProject, projectUsers } = useProjects();
     const { currentGroup } = useGroups();
 
-    const { filteredList: displayedUsers, searchText } = useListFilter(
+    const { filteredList: displayedMembers, 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,
+      displayedMembers,
       group: currentGroup,
       project: currentProject,
       searchText,
-      // users: projectUsers
-      users
+      users: projectUsers
     };
   }
 };