feat(groups): create group card and setup basic group features (not y…

…et connected to API)

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

@@ -0,0 +1,54 @@
+@import "./GroupCard.vars.scss";
+
+.group-card {
+  min-width: $card-width;
+  width: $card-width;
+  height: $card-height;
+
+  .bimdata-card {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    transition-duration: 0.35s;
+
+    .group-card__top-stripe {
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      width: $card-width;
+      height: 3px;
+    }
+
+    .group-card__btn-menu {
+      position: absolute;
+      top: $spacing-unit/2;
+      right: $spacing-unit/2;
+    }
+
+    .group-card__title {
+      margin-bottom: $spacing-unit;
+    }
+
+    &:deep() {
+      .bimdata-card__content {
+        overflow: hidden;
+        height: $card-content-height;
+        padding: 0;
+        color: $color-primary;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: $spacing-unit;
+
+        font-size: 1.2rem;
+      }
+    }
+
+    &:hover {
+      cursor: pointer;
+      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.3);
+    }
+  }
+}

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

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

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

@@ -0,0 +1,91 @@
+<template>
+  <FlippableCard
+    data-test="group-card"
+    class="group-card"
+    :flipped="showMenu"
+    v-click-away="closeMenu"
+  >
+    <template #front-face>
+      <BIMDataCard>
+        <template #content>
+          <div
+            class="group-card__top-stripe"
+            :style="{ backgroundColor: group.color }"
+          ></div>
+          <BIMDataButton
+            v-if="actionMenu"
+            class="group-card__btn-menu"
+            ghost
+            rounded
+            icon
+            @click="openMenu"
+          >
+            <BIMDataIcon name="ellipsis" size="l" fill color="tertiary-dark" />
+          </BIMDataButton>
+          <BIMDataIcon name="group" size="xxl" />
+          <TextBox
+            class="group-card__title"
+            :text="group.name"
+            :maxLength="32"
+          />
+          <UserAvatarList
+            class="group-card__avatars"
+            :users="group.members"
+            itemSize="72"
+            itemGap="44"
+          />
+        </template>
+      </BIMDataCard>
+    </template>
+    <template #back-face>
+      <GroupCardActionMenu :group="group" @close="closeMenu" />
+    </template>
+  </FlippableCard>
+</template>
+
+<script>
+import { useToggle } from "@/composables/toggle";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataCard from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataCard.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import FlippableCard from "@/components/generic/flippable-card/FlippableCard";
+import TextBox from "@/components/generic/text-box/TextBox";
+import UserAvatarList from "@/components/specific/users/user-avatar-list/UserAvatarList";
+import GroupCardActionMenu from "./group-card-action-menu/GroupCardActionMenu";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataCard,
+    BIMDataIcon,
+    FlippableCard,
+    TextBox,
+    UserAvatarList,
+    GroupCardActionMenu
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    },
+    actionMenu: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup() {
+    const { isOpen: showMenu, open: openMenu, close: closeMenu } = useToggle();
+
+    return {
+      // References
+      showMenu,
+      // Methods
+      closeMenu,
+      openMenu
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCard.scss"></style>

src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.scss

@@ -0,0 +1,33 @@
+.group-card-action-menu {
+  height: 100%;
+  background-color: $color-white;
+
+  &__loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    transform: scale(2);
+  }
+
+  &__menu {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding: $spacing-unit * 2;
+
+    &__title {
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      padding: $spacing-unit $spacing-unit * 2;
+      font-weight: bold;
+    }
+  }
+}

src/components/specific/groups/group-card/group-card-action-menu/GroupCardActionMenu.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="group-card-action-menu" v-click-away="resetMenu">
+    <transition name="fade" mode="out-in">
+      <template v-if="loading">
+        <div class="group-card-action-menu__loader">
+          <BIMDataSpinner />
+        </div>
+      </template>
+
+      <template v-else-if="showUpdateForm">
+        <GroupCardUpdateForm
+          :group="group"
+          @close="closeUpdateForm"
+          @success="closeMenu"
+        />
+      </template>
+
+      <template v-else-if="showColorPicker">
+        <GroupCardColorPicker
+          :group="group"
+          @close="closeColorPicker"
+          @success="closeMenu"
+        />
+      </template>
+
+      <template v-else-if="showDeleteGuard">
+        <GroupCardDeleteGuard :group="group" @close="closeDeleteGuard" />
+      </template>
+
+      <template v-else>
+        <div class="group-card-action-menu__menu">
+          <div class="group-card-action-menu__menu__title">
+            <TextBox :text="group.name" :maxLength="32" />
+            <BIMDataButton
+              data-test="btn-close-menu"
+              ghost
+              rounded
+              icon
+              @click="closeMenu"
+            >
+              <BIMDataIcon name="close" size="xxs" />
+            </BIMDataButton>
+          </div>
+          <BIMDataButton
+            data-test="btn-open-update"
+            ghost
+            squared
+            @click="openUpdateForm"
+          >
+            {{ $t("GroupCardActionMenu.renameButtonText") }}
+          </BIMDataButton>
+          <BIMDataButton
+            data-test="btn-open-color"
+            ghost
+            squared
+            @click="openColorPicker"
+          >
+            {{ $t("GroupCardActionMenu.changeColorButtonText") }}
+          </BIMDataButton>
+          <BIMDataButton
+            data-test="btn-open-delete"
+            ghost
+            squared
+            @click="openDeleteGuard"
+          >
+            {{ $t("GroupCardActionMenu.deleteButtonText") }}
+          </BIMDataButton>
+        </div>
+      </template>
+    </transition>
+  </div>
+</template>
+
+<script>
+import { provide, ref } from "vue";
+// Components
+import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
+import BIMDataIcon from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataIcon.js";
+import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
+import TextBox from "@/components/generic/text-box/TextBox";
+import GroupCardColorPicker from "../group-card-color-picker/GroupCardColorPicker";
+import GroupCardDeleteGuard from "../group-card-delete-guard/GroupCardDeleteGuard";
+import GroupCardUpdateForm from "../group-card-update-form/GroupCardUpdateForm";
+
+export default {
+  components: {
+    BIMDataButton,
+    BIMDataIcon,
+    BIMDataSpinner,
+    TextBox,
+    GroupCardColorPicker,
+    GroupCardDeleteGuard,
+    GroupCardUpdateForm
+  },
+  props: {
+    group: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: ["close"],
+  setup(props, { emit }) {
+    const loading = ref(false);
+    provide("loading", loading);
+
+    const showUpdateForm = ref(false);
+    const openUpdateForm = () => {
+      showUpdateForm.value = true;
+    };
+    const closeUpdateForm = () => {
+      showUpdateForm.value = false;
+    };
+
+    const showColorPicker = ref(false);
+    const openColorPicker = () => {
+      showColorPicker.value = true;
+    };
+    const closeColorPicker = () => {
+      showColorPicker.value = false;
+    };
+
+    const showDeleteGuard = ref(false);
+    const openDeleteGuard = () => {
+      showDeleteGuard.value = true;
+    };
+    const closeDeleteGuard = () => {
+      showDeleteGuard.value = false;
+    };
+
+    const resetMenu = () => {
+      closeColorPicker();
+      closeDeleteGuard();
+      closeUpdateForm();
+      loading.value = false;
+    };
+
+    const closeMenu = () => {
+      resetMenu();
+      emit("close");
+    };
+
+    return {
+      // References
+      loading,
+      showColorPicker,
+      showDeleteGuard,
+      showUpdateForm,
+      // Methods
+      closeColorPicker,
+      closeDeleteGuard,
+      closeMenu,
+      closeUpdateForm,
+      openColorPicker,
+      openDeleteGuard,
+      openUpdateForm,
+      resetMenu
+    };
+  }
+};
+</script>
+
+<style scoped lang="scss" src="./GroupCardActionMenu.scss"></style>

src/components/specific/groups/group-card/group-card-color-picker/GroupCardColorPicker.scss

@@ -0,0 +1,46 @@
+.group-card-color-picker {
+  display: flex;
+  height: 100%;
+  padding: $spacing-unit $spacing-unit * 2;
+  padding-right: $spacing-unit;
+
+  &__grid {
+    $item-size: 26px;
+
+    flex-grow: 1;
+    display: grid;
+    grid-template-columns: repeat(5, $item-size);
+    justify-content: space-between;
+    row-gap: $spacing-unit;
+
+    &__item {
+      position: relative;
+      width: $item-size;
+      height: $item-size;
+      border-radius: 3px;
+
+      &.selected {
+        &::before {
+          content: "";
+          position: absolute;
+          top: -$spacing-unit/2;
+          left: -$spacing-unit/2;
+          width: 100%;
+          height: 100%;
+          border: $spacing-unit/2 solid rgba(0, 0, 0, 0.1);
+          border-radius: 3px;
+        }
+      }
+    }
+  }
+
+  &__side {
+    width: 32px;
+    margin-left: $spacing-unit/2;
+
+    &__btn-close {
+      position: relative;
+      top: -$spacing-unit/4;
+    }
+  }
+}