feat(space-users): add remove user feature + fix invitations

bimdata · Mar 2, 2021 · 666cd41 · 666cd41
1 parent f728c1c
commit 666cd41
Show file tree

Hide file tree

Showing 11 changed files with 251 additions and 91 deletions.
diff --git a/src/components/space-invitation-card/SpaceInvitationCard.vue b/src/components/space-invitation-card/SpaceInvitationCard.vue
@@ -1,19 +1,19 @@
 <template>
   <div class="space-invitation-card">
-    <div class="invitation-card__avatar">
+    <div class="sapce-invitation-card__avatar">
       <img src="/static/pending-invitation-avatar.svg" />
     </div>
-    <div class="invitation-card__info">
+    <div class="space-invitation-card__info">
       <div class="invitation-card__info__email">
         {{ invitation.email }}
       </div>
-      <div class="invitation-card__info__text">
+      <div class="space-invitation-card__info__text">
         {{ $t("Invitation.pending") }}
-        <a @click="sendInvitation">{{ $t("Invitation.sendAgain") }}</a>
+        <a @click="resendInvitation">{{ $t("Invitation.sendAgain") }}</a>
       </div>
     </div>
     <BIMDataButton
-      class="invitation-card__cancel-btn"
+      class="space-invitation-card__cancel-btn"
       ghost
       rounded
       icon
@@ -48,16 +48,18 @@ export default {
       cancelSpaceInvitation
     } = useSpaces();
 
-    const sendInvitation = () => {
-      sendSpaceInvitation(currentSpace.value, props.invotation.email);
+    const resendInvitation = () => {
+      sendSpaceInvitation(currentSpace.value, props.invitation.email, {
+        resend: true
+      });
     };
     const cancelInvitation = () => {
       cancelSpaceInvitation(currentSpace.value, props.invitation);
     };
 
     return {
       cancelInvitation,
-      sendInvitation
+      resendInvitation
     };
   }
 };

diff --git a/src/components/space-users-manager/SpaceUsersManager.vue b/src/components/space-users-manager/SpaceUsersManager.vue
@@ -5,8 +5,8 @@
       height="40px"
       tabSize="50%"
       :tabs="tabs"
-      :selected="0"
-      @tab-click="swicthUserList"
+      selected="admins"
+      @tab-click="selectTab"
     />
 
     <BIMDataSearch
@@ -38,20 +38,22 @@
     </transition>
 
     <div class="list-container">
-      <SpaceInvitationCard
-        v-for="invitation in invitations"
-        :key="invitation.id"
-        :invitation="invitation"
-      />
       <transition-group name="item-list">
+        <template v-if="showInvitations">
+          <SpaceInvitationCard
+            v-for="invitation in invitations"
+            :key="invitation.id"
+            :invitation="invitation"
+          />
+        </template>
         <UserCard v-for="user in displayedUsers" :key="user.id" :user="user" />
       </transition-group>
     </div>
   </div>
 </template>
 
 <script>
-import { ref, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 import { useSpaces } from "@/state/spaces";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -84,19 +86,24 @@ export default {
       { id: "admins", label: "Administrateurs" },
       { id: "users", label: "Utilisateurs" }
     ];
+    const currentTab = ref("admins");
+    const selectTab = tab => {
+      currentTab.value = tab.id;
+    };
+    const showInvitations = computed(() => currentTab.value === "admins");
 
-    const userList = ref(currentSpaceAdmins.value);
-    const displayedUsers = ref([]);
+    const userList = ref([]);
     watchEffect(() => {
-      displayedUsers.value = userList.value;
-    });
-
-    const swicthUserList = tab => {
       userList.value =
-        tab.id === "admins"
+        currentTab.value === "admins"
           ? currentSpaceAdmins.value
           : currentSpaceUsers.value;
-    };
+    });
+
+    const displayedUsers = ref([]);
+    watchEffect(() => {
+      displayedUsers.value = userList.value;
+    });
 
     const searchText = ref("");
     const filterUsers = value => {
@@ -125,16 +132,18 @@ export default {
 
     return {
       // Refrences
+      currentTab,
       displayedUsers,
       invitations: currentSpaceInvitations,
       searchText,
       showInvitationForm,
+      showInvitations,
       space: currentSpace,
       tabs,
       // Methods
       closeInvitationForm,
       openInvitationForm,
-      swicthUserList
+      selectTab
     };
   }
 };

diff --git a/src/components/user-action-menu/UserActionMenu.vue b/src/components/user-action-menu/UserActionMenu.vue
@@ -16,10 +16,10 @@
 
     <transition name="fade">
       <div class="user-action-menu__container" v-show="showMenu">
-        <BIMDataButton ghost rounded icon @click="() => {}">
+        <BIMDataButton ghost rounded icon @click="$emit('open-update')">
           <BIMDataIcon name="edit" size="xxs" />
         </BIMDataButton>
-        <BIMDataButton ghost rounded icon @click="() => {}">
+        <BIMDataButton ghost rounded icon @click="$emit('open-delete')">
           <BIMDataIcon name="delete" size="xxs" />
         </BIMDataButton>
       </div>
@@ -38,12 +38,7 @@ export default {
     BIMDataButton,
     BIMDataIcon
   },
-  props: {
-    user: {
-      type: Object,
-      required: true
-    }
-  },
+  emits: ["open-update", "open-delete"],
   setup() {
     const showMenu = ref(false);
     const closeMenu = () => {

diff --git a/src/components/user-card/UserCard.scss b/src/components/user-card/UserCard.scss
@@ -1,36 +1,50 @@
 .user-card {
-  display: flex;
-  align-items: center;
+  position: relative;
   min-height: 64px;
   height: 64px;
 
-  &__avatar {
+  &__loader {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-width: 42px;
-    width: 42px;
-    height: 42px;
-    border-radius: 50%;
-    background-color: $color-tertiary-lightest;
+    width: 100%;
+    height: 100%;
   }
 
-  &__info {
-    flex-grow: 1;
-    padding: 0 $spacing-unit;
-    line-height: 18px;
+  &__content {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+
+    &__avatar {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-width: 42px;
+      width: 42px;
+      height: 42px;
+      border-radius: 50%;
+      background-color: $color-tertiary-lightest;
+    }
 
-    &__name {
-      font-weight: bold;
+    &__info {
+      flex-grow: 1;
+      padding: 0 $spacing-unit;
+      line-height: 18px;
 
-      .user-role-badge {
-        margin-left: $spacing-unit;
+      &__name {
+        font-weight: bold;
+
+        .user-role-badge {
+          margin-left: $spacing-unit;
+        }
       }
-    }
 
-    &__email {
-      font-size: 12px;
-      color: $color-tertiary-dark;
+      &__email {
+        font-size: 12px;
+        color: $color-tertiary-dark;
+      }
     }
   }
 

diff --git a/src/components/user-card/UserCard.vue b/src/components/user-card/UserCard.vue
@@ -1,30 +1,51 @@
 <template>
-  <div class="user-card">
-    <div class="user-card__avatar">
-      {{ initials }}
-    </div>
-    <div class="user-card__info">
-      <div class="user-card__info__name">
-        {{ `${firstName} ${lastName}` }}
-        <UserRoleBadge :role="role" />
+  <div class="user-card" v-click-away="resetCard">
+    <transition name="fade" mode="out-in">
+      <div class="user-card__loader" v-if="loading">
+        <BIMDataSpinner />
       </div>
-      <div class="user-card__info__email">
-        {{ email }}
+
+      <UserDeleteGuard
+        v-else-if="showDeleteGuard"
+        :user="user"
+        @close="closeDeleteGuard"
+      />
+
+      <div class="user-card__content" v-else>
+        <div class="user-card__content__avatar">
+          {{ initials }}
+        </div>
+        <div class="user-card__content__info">
+          <div class="user-card__content__info__name">
+            {{ `${firstName} ${lastName}` }}
+            <UserRoleBadge :role="role" />
+          </div>
+          <div class="user-card__content__info__email">
+            {{ email }}
+          </div>
+        </div>
+        <UserActionMenu
+          @open-update="() => {}"
+          @open-delete="openDeleteGuard"
+        />
       </div>
-    </div>
-    <UserActionMenu :user="user" />
+    </transition>
   </div>
 </template>
 
 <script>
-import { computed, ref, watchEffect } from "vue";
+import { computed, provide, ref, watchEffect } from "vue";
 // Components
+import BIMDataSpinner from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataSpinner.js";
 import UserActionMenu from "@/components/user-action-menu/UserActionMenu";
+import UserDeleteGuard from "@/components/user-delete-guard/UserDeleteGuard";
 import UserRoleBadge from "@/components/user-role-badge/UserRoleBadge";
 
 export default {
   components: {
+    BIMDataSpinner,
     UserActionMenu,
+    UserDeleteGuard,
     UserRoleBadge
   },
   props: {
@@ -50,13 +71,35 @@ export default {
       }
     });
 
+    const loading = ref(false);
+    provide("loading", loading);
+
+    const showDeleteGuard = ref(false);
+    const openDeleteGuard = () => {
+      showDeleteGuard.value = true;
+    };
+    const closeDeleteGuard = () => {
+      showDeleteGuard.value = false;
+    };
+
+    const resetCard = () => {
+      closeDeleteGuard();
+      loading.value = false;
+    };
+
     return {
       // References
       email,
       firstName,
       initials,
       lastName,
-      role
+      loading,
+      role,
+      showDeleteGuard,
+      // Methods
+      closeDeleteGuard,
+      openDeleteGuard,
+      resetCard
     };
   }
 };

diff --git a/src/components/user-delete-guard/UserDeleteGuard.scss b/src/components/user-delete-guard/UserDeleteGuard.scss
@@ -0,0 +1,16 @@
+.user-delete-guard {
+  display: flex;
+  align-items: center;
+  gap: $spacing-unit/2;
+  width: 100%;
+  height: 100%;
+
+  &__message {
+    flex-grow: 1;
+    text-align: center;
+  }
+
+  &__close-btn {
+    margin-right: $spacing-unit/2;
+  }
+}