feat(groups): create group member management view

src/components/specific/app/app-breadcrumb/AppBreadcrumb.vue

@@ -13,14 +13,14 @@ import { useRoute } from "vue-router";
 import { routeNames } from "@/router";
 // Components
 import GoBackButton from "@/components/generic/go-back-button/GoBackButton";
-// import BreadcrumbGroupSelector from "./breadcrumb-group-selector/BreadcrumbGroupSelector";
+import BreadcrumbGroupSelector from "./breadcrumb-group-selector/BreadcrumbGroupSelector";
 import BreadcrumbProjectSelector from "./breadcrumb-project-selector/BreadcrumbProjectSelector";
 import BreadcrumbSpaceSelector from "./breadcrumb-space-selector/BreadcrumbSpaceSelector";
 
 export default {
   components: {
     GoBackButton,
-    // BreadcrumbGroupSelector,
+    BreadcrumbGroupSelector,
     BreadcrumbProjectSelector,
     BreadcrumbSpaceSelector
   },
@@ -35,9 +35,9 @@ export default {
       case routeNames.projectBoard:
         breadcrumb = "BreadcrumbProjectSelector";
         break;
-      // case routeNames.groupUsers:
-      //   breadcrumb = "BreadcrumbGroupSelector";
-      //   break;
+      case routeNames.groupBoard:
+        breadcrumb = "BreadcrumbGroupSelector";
+        break;
     }
 
     return {

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

@@ -1,10 +1,18 @@
 <template>
-  <BreadcrumbSelector />
+  <div>{{ $t("BreadcrumbGroupSelector.text") }}</div>
+  <div class="breadcrumb-separator"></div>
+  <BreadcrumbSelector
+    :header="currentGroup.name"
+    :list="groups"
+    labelProp="name"
+    @item-selected="changeGroup"
+  />
 </template>
 
 <script>
 import { useRouter } from "vue-router";
 import { routeNames } from "@/router";
+import { useGroups } from "@/state/groups";
 // Components
 import BreadcrumbSelector from "@/components/generic/breadcrumb-selector/BreadcrumbSelector";
 
@@ -13,7 +21,27 @@ export default {
     BreadcrumbSelector
   },
   setup() {
-    // TODO
+    const router = useRouter();
+    const { projectGroups, currentGroup } = useGroups();
+
+    const changeGroup = group => {
+      router.push({
+        name: routeNames.groupBoard,
+        params: {
+          spaceID: group.project.cloud.id,
+          projectID: group.project.id,
+          groupID: group.id
+        }
+      });
+    };
+
+    return {
+      // References
+      currentGroup,
+      groups: projectGroups,
+      // Methods
+      changeGroup
+    };
   }
 };
 </script>

src/components/specific/groups/group-card/GroupCard.vars.scss

@@ -1,4 +1,4 @@
 $card-width: 320px;
 $card-height: 261px;
 $card-content-height: $card-height;
-$card-background: $color-tertiary-lightest;
+$card-background: $color-white;

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

@@ -6,7 +6,7 @@
     v-click-away="closeMenu"
   >
     <template #front-face>
-      <BIMDataCard>
+      <BIMDataCard @click="goToGroupBoard">
         <template #content>
           <div
             class="group-card__top-stripe"
@@ -18,7 +18,7 @@
             ghost
             rounded
             icon
-            @click="openMenu"
+            @click.stop="openMenu"
           >
             <BIMDataIcon name="ellipsis" size="l" fill color="tertiary-dark" />
           </BIMDataButton>
@@ -44,7 +44,9 @@
 </template>
 
 <script>
+import { useRouter } from "vue-router";
 import { useToggle } from "@/composables/toggle";
+import { routeNames } from "@/router";
 // Components
 import FlippableCard from "@/components/generic/flippable-card/FlippableCard";
 import UserAvatarList from "@/components/specific/users/user-avatar-list/UserAvatarList";
@@ -66,14 +68,27 @@ export default {
       default: true
     }
   },
-  setup() {
+  setup(props) {
+    const router = useRouter();
     const { isOpen: showMenu, open: openMenu, close: closeMenu } = useToggle();
 
+    const goToGroupBoard = () => {
+      router.push({
+        name: routeNames.groupBoard,
+        params: {
+          spaceID: props.group.project.cloud.id,
+          projectID: props.group.project.id,
+          groupID: props.group.id
+        }
+      });
+    };
+
     return {
       // References
       showMenu,
       // Methods
       closeMenu,
+      goToGroupBoard,
       openMenu
     };
   }

src/components/specific/groups/group-creation-card/GroupCreationCard.vue

@@ -5,59 +5,64 @@
     v-click-away="closeCreationForm"
   >
     <transition name="fade" mode="out-in">
-      <div v-if="loading" class="group-creation-card__loader">
-        <BIMDataSpinner />
-      </div>
+      <template v-if="loading">
+        <div class="group-creation-card__loader">
+          <BIMDataSpinner />
+        </div>
+      </template>
 
-      <div v-else-if="showCreationForm" class="group-creation-card__form">
-        <div class="group-creation-card__form__title">
-          {{ $t("GroupCreationCard.title") }}
+      <template v-else-if="showCreationForm">
+        <div class="group-creation-card__form">
+          <div class="group-creation-card__form__title">
+            {{ $t("GroupCreationCard.title") }}
+            <BIMDataButton
+              data-test="btn-close-create"
+              ghost
+              rounded
+              icon
+              @click.stop="closeCreationForm"
+            >
+              <BIMDataIcon name="close" size="xxs" />
+            </BIMDataButton>
+          </div>
+          <BIMDataInput
+            ref="nameInput"
+            data-test="input-create-name"
+            class="group-creation-card__form__input"
+            :placeholder="$t('GroupCreationCard.inputPlaceholder')"
+            v-model="newGroup.name"
+            :error="error"
+            :errorMessage="$t('GroupCreationCard.inputErrorMessage')"
+            @keyup.esc.stop="closeCreationForm"
+            @keyup.enter.stop="submit"
+          />
           <BIMDataButton
-            data-test="btn-close-create"
-            ghost
-            rounded
-            icon
-            @click.stop="closeCreationForm"
+            data-test="btn-submit-create"
+            class="group-creation-card__form__btn-submit"
+            fill
+            radius
+            color="primary"
+            @click="submit"
           >
-            <BIMDataIcon name="close" size="xxs" />
+            {{ $t("GroupCreationCard.submitButtonText") }}
           </BIMDataButton>
         </div>
-        <BIMDataInput
-          ref="nameInput"
-          data-test="input-create-name"
-          class="group-creation-card__form__input"
-          :placeholder="$t('GroupCreationCard.inputPlaceholder')"
-          v-model="newGroup.name"
-          :error="error"
-          :errorMessage="$t('GroupCreationCard.inputErrorMessage')"
-          @keyup.esc.stop="closeCreationForm"
-          @keyup.enter.stop="submit"
-        />
-        <BIMDataButton
-          data-test="btn-submit-create"
-          class="group-creation-card__form__btn-submit"
-          fill
-          radius
-          color="primary"
-          @click="submit"
-        >
-          {{ $t("GroupCreationCard.submitButtonText") }}
-        </BIMDataButton>
-      </div>
+      </template>
 
-      <div
-        v-else
-        data-test="btn-open-create"
-        class="group-creation-card__btn-open"
-        @click="openCreationForm"
-      >
-        <div class="group-creation-card__btn-open__icon">
-          <BIMDataIcon name="plus" size="l" />
-        </div>
-        <div class="group-creation-card__btn-open__text">
-          {{ $t("GroupCreationCard.text") }}
+      <template v-else>
+        <div
+          data-test="btn-open-create"
+          class="group-creation-card__btn-open"
+          @click="openCreationForm"
+        >
+          <div class="group-creation-card__btn-open__icon">
+            <BIMDataIcon name="plus" size="l" />
+          </div>
+          <div class="group-creation-card__btn-open__text">
+            {{ $t("GroupCreationCard.text") }}
+          </div>
         </div>
-      </div>
+      </template>
     </transition>
   </div>
 </template>

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

@@ -0,0 +1,49 @@
+@import "./GroupMemberCard.vars.scss";
+
+.group-member-card {
+  position: relative;
+  min-width: $card-width;
+  width: $card-width;
+  height: $card-height;
+  transition-duration: 0.35s;
+
+  &__btn-menu {
+    position: absolute;
+    top: $spacing-unit/2;
+    right: $spacing-unit/2;
+  }
+
+  &__info {
+    text-align: center;
+
+    &__name {
+      margin-bottom: $spacing-unit/3;
+      font-size: 1.1rem;
+      font-weight: bold;
+      color: $color-primary;
+    }
+
+    &__email {
+      font-size: 0.9rem;
+      color: $color-tertiary-dark;
+    }
+  }
+
+  &:deep() {
+    .bimdata-card__content {
+      height: $card-content-height;
+      padding: 0;
+      overflow: hidden;
+
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      align-items: center;
+    }
+  }
+
+  &:hover {
+    cursor: pointer;
+    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+  }
+}

src/components/specific/groups/group-member-card/GroupMemberCard.vars.scss

@@ -0,0 +1,4 @@
+$card-width: 320px;
+$card-height: 261px;
+$card-content-height: $card-height;
+$card-background: $color-white;

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

@@ -0,0 +1,54 @@
+<template>
+  <BIMDataCard class="group-member-card">
+    <template #content>
+      <BIMDataButton
+        class="group-member-card__btn-menu"
+        ghost
+        rounded
+        icon
+        @click.stop="() => {}"
+      >
+        <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">
+          {{ fullName }}
+        </div>
+        <div class="group-member-card__info__email">
+          {{ user.email }}
+        </div>
+      </div>
+    </template>
+  </BIMDataCard>
+</template>
+
+<script>
+import { computed } from "vue";
+// Components
+import UserAvatar from "@/components/specific/users/user-avatar/UserAvatar";
+
+export default {
+  components: {
+    UserAvatar
+  },
+  props: {
+    user: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const fullName = computed(
+      () => `${props.user.firstname || ""} ${props.user.lastname || ""}`
+    );
+
+    return {
+      // References
+      fullName
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupMemberCard.scss"></style>