feat(project-users): update users components to handle project users …

…management
bimdata · Mar 16, 2021 · 4a5e097 · 4a5e097
1 parent 4f18f79
commit 4a5e097
Show file tree

Hide file tree

Showing 13 changed files with 204 additions and 61 deletions.
diff --git a/src/components/specific/users/invitation-card/InvitationCard.vue b/src/components/specific/users/invitation-card/InvitationCard.vue
@@ -25,6 +25,7 @@
 </template>
 
 <script>
+import { useProjects } from "@/state/projects";
 import { useSpaces } from "@/state/spaces";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -39,22 +40,37 @@ export default {
     invitation: {
       type: Object,
       required: true
+    },
+    space: {
+      type: Object,
+      default: null
+    },
+    project: {
+      type: Object,
+      default: null
     }
   },
   setup(props) {
-    const {
-      currentSpace,
-      sendSpaceInvitation,
-      cancelSpaceInvitation
-    } = useSpaces();
+    const { sendSpaceInvitation, cancelSpaceInvitation } = useSpaces();
+    const { sendProjectInvitation, cancelProjectInvitation } = useProjects();
 
     const resendInvitation = () => {
-      sendSpaceInvitation(currentSpace.value, props.invitation.email, {
-        resend: true
-      });
+      if (props.project) {
+        sendProjectInvitation(props.project, props.invitation, {
+          resend: true
+        });
+      } else if (props.space) {
+        sendSpaceInvitation(props.space, props.invitation.email, {
+          resend: true
+        });
+      }
     };
     const cancelInvitation = () => {
-      cancelSpaceInvitation(currentSpace.value, props.invitation);
+      if (props.project) {
+        cancelProjectInvitation(props.project, props.invitation);
+      } else if (props.space) {
+        cancelSpaceInvitation(props.space, props.invitation);
+      }
     };
 
     return {

diff --git a/src/components/specific/users/invitation-form/InvitationForm.scss b/src/components/specific/users/invitation-form/InvitationForm.scss
@@ -1,21 +1,19 @@
 .invitation-form {
   display: flex;
+  flex-wrap: wrap;
   padding: 0 $spacing-unit/2;
 
   &__input {
     width: 100%;
     margin: 0;
+    margin-bottom: $spacing-unit;
   }
 
-  .bimdata-btn {
-    margin: 0 $spacing-unit/3;
+  &__btn-cancel {
+    margin-left: auto;
   }
 
-  &__submit-btn {
-    color: $color-success;
-  }
-
-  &__close-btn {
-    color: $color-high;
+  &__btn-submit {
+    margin-left: $spacing-unit;
   }
 }
diff --git a/src/components/specific/users/invitation-form/InvitationForm.vue b/src/components/specific/users/invitation-form/InvitationForm.vue
@@ -3,65 +3,78 @@
     <BIMDataInput
       ref="emailInput"
       class="invitation-form__input"
-      :placeholder="$t('SpaceInvitationForm.inputEmail')"
+      :placeholder="$t('InvitationForm.inputEmail')"
       v-model="email"
       :error="error"
-      :errorMessage="$t('SpaceInvitationForm.errorMessage')"
+      :errorMessage="$t('InvitationForm.errorMessage')"
       @keyup.enter.stop="inviteUser"
     />
     <BIMDataButton
-      class="invitation-form__submit-btn"
+      class="invitation-form__btn-cancel"
       ghost
-      rounded
-      icon
-      @click="inviteUser"
+      radius
+      @click="close"
     >
-      <BIMDataIcon name="validate" size="xxs" />
+      {{ $t("InvitationForm.buttonCancel") }}
     </BIMDataButton>
     <BIMDataButton
-      class="invitation-form__close-btn"
-      ghost
-      rounded
-      icon
-      @click="close"
+      class="invitation-form__btn-submit"
+      color="primary"
+      fill
+      radius
+      @click="inviteUser"
     >
-      <BIMDataIcon name="close" size="xxs" />
+      {{ $t("InvitationForm.buttonSubmit") }}
     </BIMDataButton>
   </div>
 </template>
 
 <script>
 import { onMounted, ref } from "vue";
+import { useProjects } from "@/state/projects";
 import { useSpaces } from "@/state/spaces";
 // 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 BIMDataInput from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataInput.js";
 
 export default {
   components: {
     BIMDataButton,
-    BIMDataIcon,
     BIMDataInput
   },
   props: {
     space: {
       type: Object,
-      required: true
+      default: null
+    },
+    project: {
+      type: Object,
+      default: null
     }
   },
   emits: ["close", "success", "error"],
   setup(props, { emit }) {
     const { sendSpaceInvitation } = useSpaces();
+    const { sendProjectInvitation } = useProjects();
 
     const emailInput = ref(null);
     const email = ref("");
     const error = ref(false);
-    const inviteUser = () => {
+    const inviteUser = async () => {
       if (email.value) {
-        sendSpaceInvitation(props.space, email.value)
-          .then(() => emit("success"))
-          .catch(error => emit("error", error));
+        try {
+          if (props.project) {
+            await sendProjectInvitation(props.project, {
+              email: email.value,
+              role: null
+            });
+          } else if (props.space) {
+            await sendSpaceInvitation(props.space, { email: email.value });
+          }
+          emit("success");
+        } catch (error) {
+          emit("error", error);
+        }
       } else {
         emailInput.value.focus();
         error.value = true;

diff --git a/src/components/specific/users/project-users-manager/ProjectUsersManager.vue b/src/components/specific/users/project-users-manager/ProjectUsersManager.vue
@@ -4,7 +4,7 @@
     :titleHeader="$t('ProjectBoard.ProjectUsersManager.title')"
   >
     <template #content>
-      <template v-if="users.length > 0">
+      <template v-if="users.length > 1">
         <BIMDataCard class="project-users-manager__manager">
           <template #left>
             <BIMDataButton ghost rounded icon @click="() => {}">
@@ -29,11 +29,13 @@
                   v-for="invitation in invitations"
                   :key="`invitation-${invitation.id}`"
                   :invitation="invitation"
+                  :project="project"
                 />
                 <UserCard
                   v-for="user in displayedUsers"
                   :key="`user-${user.id}`"
                   :user="user"
+                  :project="project"
                 />
               </transition-group>
             </div>

diff --git a/src/components/specific/users/space-users-manager/SpaceUsersManager.vue b/src/components/specific/users/space-users-manager/SpaceUsersManager.vue
@@ -44,12 +44,14 @@
             v-for="invitation in invitations"
             :key="`invitation-${invitation.id}`"
             :invitation="invitation"
+            :space="space"
           />
         </template>
         <UserCard
           v-for="user in displayedUsers"
           :key="`user-${user.id}`"
           :user="user"
+          :space="space"
         />
       </transition-group>
     </div>

diff --git a/src/components/specific/users/user-card-delete-guard/UserCardDeleteGuard.vue b/src/components/specific/users/user-card-delete-guard/UserCardDeleteGuard.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="user-card-delete-guard">
     <span class="user-card-delete-guard__message">
-      {{ $t("User.UserDeleteGuard.message", { name: user.firstname }) }}
+      {{
+        $t(`User.UserDeleteGuard.message.${!!project ? "project" : "space"}`, {
+          name: user.firstname
+        })
+      }}
     </span>
     <BIMDataButton
       class="user-card-delete-guard__delete-btn"
@@ -28,6 +32,7 @@
 
 <script>
 import { inject } from "vue";
+import { useProjects } from "@/state/projects";
 import { useSpaces } from "@/state/spaces";
 // Components
 import BIMDataButton from "@bimdata/design-system/dist/js/BIMDataComponents/vue3/BIMDataButton.js";
@@ -42,17 +47,31 @@ export default {
     user: {
       type: Object,
       required: true
+    },
+    space: {
+      type: Object,
+      default: null
+    },
+    project: {
+      type: Object,
+      default: null
     }
   },
   emits: ["close"],
   setup(props, { emit }) {
-    const { currentSpace, deleteSpaceUser } = useSpaces();
+    const { deleteSpaceUser } = useSpaces();
+    const { deleteProjectUser } = useProjects();
 
     const loading = inject("loading", false);
 
-    const removeSpaceUser = () => {
-      loading.value = true;
-      deleteSpaceUser(currentSpace.value, props.user);
+    const removeSpaceUser = async () => {
+      if (props.project) {
+        loading.value = true;
+        await deleteProjectUser(props.project, props.user);
+      } else if (props.space) {
+        loading.value = true;
+        await deleteSpaceUser(props.space, props.user);
+      }
     };
 
     const close = () => {

diff --git a/src/components/specific/users/user-card/UserCard.vue b/src/components/specific/users/user-card/UserCard.vue
@@ -8,23 +8,30 @@
       <UserCardDeleteGuard
         v-else-if="showDeleteGuard"
         :user="user"
+        :space="space"
+        :project="project"
         @close="closeDeleteGuard"
       />
 
       <div class="user-card__content" v-else>
         <div class="user-card__content__avatar">
-          {{ initials }}
+          <template v-if="initials">
+            {{ initials }}
+          </template>
+          <BIMDataIcon v-else name="user" size="s" />
         </div>
         <div class="user-card__content__info">
           <div class="user-card__content__info__name">
             {{ `${firstName} ${lastName}` }}
+            {{ user.isSelf ? `(${$t("User.self")})` : "" }}
             <UserRoleBadge :role="role" />
           </div>
           <div class="user-card__content__info__email">
             {{ email }}
           </div>
         </div>
         <UserCardActionMenu
+          v-if="!user.isSelf"
           @open-update="() => {}"
           @open-delete="openDeleteGuard"
         />
@@ -36,13 +43,15 @@
 <script>
 import { computed, provide, ref, watchEffect } from "vue";
 // Components
+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 UserCardActionMenu from "@/components/specific/users/user-card-action-menu/UserCardActionMenu";
 import UserCardDeleteGuard from "@/components/specific/users/user-card-delete-guard/UserCardDeleteGuard";
 import UserRoleBadge from "@/components/specific/users/user-role-badge/UserRoleBadge";
 
 export default {
   components: {
+    BIMDataIcon,
     BIMDataSpinner,
     UserCardActionMenu,
     UserCardDeleteGuard,
@@ -52,6 +61,14 @@ export default {
     user: {
       type: Object,
       required: true
+    },
+    space: {
+      type: Object,
+      default: null
+    },
+    project: {
+      type: Object,
+      default: null
     }
   },
   setup(props) {
@@ -60,7 +77,7 @@ export default {
     const email = ref("");
     const role = ref(0);
     const initials = computed(() =>
-      `${firstName.value[0]}${lastName.value[0]}`.toUpperCase()
+      `${firstName.value[0]}${lastName.value[0]}`.trim().toUpperCase()
     );
     watchEffect(() => {
       if (props.user) {

diff --git a/src/i18n/lang/en.js b/src/i18n/lang/en.js
@@ -99,16 +99,22 @@ export default {
     searchUsers: "Search user",
     addUserButton: "Add new admin"
   },
-  SpaceInvitationForm: {
-    inputEmail: "Enter email",
-    errorMessage: "Invalid email"
+  InvitationForm: {
+    inputEmail: "Mail address",
+    errorMessage: "Invalid email",
+    buttonCancel: "Cancel",
+    buttonSubmit: "Send invitation"
   },
   User: {
+    self: "you",
     admin: "Admin",
     user: "User",
     guest: "Guest",
     UserDeleteGuard: {
-      message: "Remove {name} from this space ?",
+      message: {
+        space: "Remove {name} from this space ?",
+        project: "Remove {name} from this project ?"
+      },
       buttonDelete: "Remove"
     }
   },