MINOR: feat(invitation): send multiple invitation at once

src/components/specific/subscriptions/space-creator/SpaceCreator.vue

@@ -116,7 +116,7 @@ export default {
         newSpaceLoading.value = true;
 
         // TODO: Try to fix/improve
-        // Here we set both `organizationId` and `organization.id`
+        // Here we set both `organization_id` and `organization.id`
         // because they are both used elsewhere in the code.
         // Setting only one of the two would break in some cases.
         // More specifically:
@@ -144,10 +144,10 @@ export default {
       // References
       newSpace,
       newSpaceLoading,
-      openBillingAccountModal,
       orga,
       spaceNameInput,
       // Methods
+      openBillingAccountModal,
       submit,
       updateOrga
     };

src/components/specific/users/invitation-form/InvitationForm.vue

@@ -7,17 +7,13 @@
         class="invitation-form__input__email"
         :placeholder="$t('InvitationForm.emailInputPlaceholder')"
         v-model="email"
-        :error="hasError"
-        :errorMessage="
-          userAlreadyExist
-            ? $t('InvitationForm.userAlreadyExistInputErrorMessage')
-            : $t('InvitationForm.emailInputErrorMessage')
-        "
+        :error="errorMessage !== ''"
+        :errorMessage="errorMessage"
         @keyup.enter.stop="submit"
         margin="0px"
       />
       <BIMDataSelect
-        v-if="project"
+        v-if="roleSelector"
         class="invitation-form__input__role"
         width="180px"
         :label="$t('InvitationForm.roleInputLabel')"
@@ -26,7 +22,7 @@
         v-model="role"
       />
     </div>
-    <BIMDataButton class="invitation-form__btn-cancel" width="80px" ghost radius @click="close">
+    <BIMDataButton class="invitation-form__btn-cancel" width="80px" ghost radius @click="cancel">
       {{ $t("t.cancel") }}
     </BIMDataButton>
     <BIMDataButton
@@ -46,11 +42,9 @@
 <script>
 import { onMounted, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
-import { useAppNotification } from "../../app/app-notification/app-notification.js";
 import { PROJECT_ROLE } from "../../../../config/projects.js";
-import { useProjects } from "../../../../state/projects.js";
-import { useSpaces } from "../../../../state/spaces.js";
 import { debounce } from "../../../../utils/async.js";
+import { parseEmails } from "../../../../utils/users.js";
 
 const roleList = [
   { id: "admin", value: PROJECT_ROLE.ADMIN },
@@ -60,34 +54,26 @@ const roleList = [
 
 export default {
   props: {
-    space: {
-      type: Object,
-      default: null,
+    roleSelector: {
+      type: Boolean,
+      default: false,
     },
-    project: {
-      type: Object,
-      default: null,
-    },
-    users: {
-      type: Array,
-      default: () => [],
-    },
-    currentTab: {
+    error: {
       type: String,
-      default: "admins",
-    },
+      default: ""
+    }
   },
-  emits: ["close", "success"],
+  emits: ["cancel", "submit"],
   setup(props, { emit }) {
     const { locale, t } = useI18n();
-    const { pushNotification } = useAppNotification();
-    const { sendSpaceInvitation, updateSpaceUser, spaceUsers } = useSpaces();
-    const { sendProjectInvitation } = useProjects();
+
+    const emailInput = ref(null);
+    const email = ref("");
 
     const roleOptions = ref([]);
     const role = ref(null);
     watch(
-      [() => props.space, () => props.project, () => locale.value],
+      locale,
       () => {
         let availableRoles = roleList;
 
@@ -101,76 +87,38 @@ export default {
       { immediate: true }
     );
 
-    const emailInput = ref(null);
-    const email = ref("");
-    const hasError = ref(false);
-    const userAlreadyExist = ref(false);
+    const errorMessage = ref("");
+    watch(
+      () => props.error,
+      msg => {
+        errorMessage.value = msg;
+      },
+      { immediate: true }
+    );
 
     const reset = () => {
       email.value = "";
-      hasError.value = false;
+      errorMessage.value = "";
     };
 
     const submit = debounce(async () => {
-      let currentUser;
-      if (email.value) {
-        if (props.users.map((user) => user.email).includes(email.value)) {
-          emailInput.value.focus();
-          hasError.value = true;
-          userAlreadyExist.value = true;
-        } else {
-          userAlreadyExist.value = false;
-          if (props.project) {
-            await sendProjectInvitation(props.project, {
-              email: email.value,
-              role: role.value.value,
-            });
-          } else if (props.space) {
-            currentUser = spaceUsers.value.find((user) => user.email === email.value);
-            if (currentUser) {
-              await updateSpaceUser(props.space, {
-                ...currentUser,
-                cloud_role: 100,
-              });
-            } else {
-              if (props.currentTab === "users") {
-                await sendSpaceInvitation(props.space, {
-                  email: email.value,
-                  in_all_projects: true,
-                  project_role: 50,
-                  role: 50,
-                });
-              } else {
-                await sendSpaceInvitation(props.space, {
-                  email: email.value,
-                });
-              }
-            }
-          }
-          pushNotification(
-            {
-              type: "success",
-              title: t("t.success"),
-              message: t(
-                currentUser
-                  ? "InvitationForm.successUsertoAdmin"
-                  : "InvitationForm.successNotifText"
-              ),
-            },
-            2500
-          );
-          reset();
-          emit("success");
-        }
-      } else {
+      errorMessage.value = "";
+
+      if (!email.value) {
         emailInput.value.focus();
-        hasError.value = true;
+        errorMessage.value = t("InvitationForm.emailInputErrorMessage");
+        return;
       }
+
+      const emails = parseEmails(email.value);
+
+      emit("submit", { emails, role: role.value.value });
+      reset();
     }, 500);
 
-    const close = () => {
+    const cancel = () => {
+      emit("cancel");
       reset();
-      emit("close");
     };
 
     onMounted(() => {
@@ -181,12 +129,11 @@ export default {
       // References
       email,
       emailInput,
-      hasError,
-      userAlreadyExist,
+      errorMessage,
       role,
       roleOptions,
       // Methods
-      close,
+      cancel,
       submit,
     };
   },

src/components/specific/users/invitation-form/ProjectInvitationForm.vue

@@ -0,0 +1,58 @@
+<script setup>
+import { eachLimit } from "async";
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useProjects } from "../../../../state/projects.js";
+import { useAppNotification } from "../../app/app-notification/app-notification.js";
+
+import InvitationForm from "./InvitationForm.vue";
+
+const { t } = useI18n();
+const { pushNotification } = useAppNotification();
+const { sendProjectInvitation } = useProjects();
+
+const props = defineProps({
+  project: {
+    type: Object,
+    required: true,
+  },
+  users: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["close", "success"]);
+
+const errorMessage = ref("");
+
+const submit = async ({ emails, role }) => {
+  const existingEmails = props.users.map(user => user.email);
+
+  if (emails.some(eml => existingEmails.includes(eml))) {
+    errorMessage.value = t("InvitationForm.userAlreadyExistInputErrorMessage");
+    return;
+  }
+
+  await eachLimit(emails, 10, async eml => {
+    await sendProjectInvitation(props.project, { email: eml, role });
+  });
+
+  pushNotification({
+      type: "success",
+      title: t("t.success"),
+      message: t("InvitationForm.successNotifText"),
+  }, 2500);
+
+  emit("success");
+};
+</script>
+
+<template>
+  <InvitationForm
+    :role-selector="true"
+    :error="errorMessage"
+    @cancel="$emit('close')"
+    @submit="submit"
+  />
+</template>

src/components/specific/users/invitation-form/SpaceInvitationForm.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { eachLimit } from "async";
+import { useI18n } from "vue-i18n";
+import { useSpaces } from "../../../../state/spaces.js";
+import { useAppNotification } from "../../app/app-notification/app-notification.js";
+
+import InvitationForm from "./InvitationForm.vue";
+
+const { t } = useI18n();
+const { pushNotification } = useAppNotification();
+const { sendSpaceInvitation, updateSpaceUser } = useSpaces();
+
+const props = defineProps({
+  space: {
+    type: Object,
+    required: true,
+  },
+  users: {
+    type: Array,
+    default: () => [],
+  },
+  admin: {
+    type: Boolean,
+    default: false,
+  }
+});
+
+const emit = defineEmits(["close", "success"]);
+
+const submit = async ({ emails }) => {
+  let isExistingUsersOnly = true;
+
+  await eachLimit(emails, 10, async eml => {
+    const user = props.users.find(user => user.email === eml);
+    if (user) {
+      await updateSpaceUser(props.space, { ...user, cloud_role: 100 });
+      return;
+    }
+
+    isExistingUsersOnly = false;
+    if (props.admin) {
+      await sendSpaceInvitation(props.space, { email: eml });
+    } else {
+      await sendSpaceInvitation(props.space, {
+        email: eml,
+        in_all_projects: true,
+        project_role: 50,
+        role: 50,
+      });
+    }
+  });
+
+  pushNotification(
+    {
+      type: "success",
+      title: t("t.success"),
+      message: t(
+        isExistingUsersOnly
+          ? "InvitationForm.successUserToAdmin"
+          : "InvitationForm.successNotifText"
+      ),
+    },
+    2500
+  );
+};
+</script>
+
+<template>
+  <InvitationForm @cancel="$emit('close')" @submit="submit" />
+</template>

src/components/specific/users/project-users-manager/ProjectUsersManager.vue

@@ -33,7 +33,7 @@
                   clear
                 />
 
-                <InvitationForm
+                <ProjectInvitationForm
                   v-if="showInvitationForm"
                   key="invitation-form"
                   :project="project"
@@ -78,14 +78,14 @@ import { useUser } from "../../../../state/user.js";
 import { wait } from "../../../../utils/async.js";
 // Components
 import InvitationCard from "../invitation-card/InvitationCard.vue";
-import InvitationForm from "../invitation-form/InvitationForm.vue";
+import ProjectInvitationForm from "../invitation-form/ProjectInvitationForm.vue";
 import UserCard from "../user-card/UserCard.vue";
 import UsersManagerOnboarding from "./users-manager-onboarding/UsersManagerOnboarding.vue";
 
 export default {
   components: {
     InvitationCard,
-    InvitationForm,
+    ProjectInvitationForm,
     UserCard,
     UsersManagerOnboarding
   },

src/components/specific/users/project-users-manager/users-manager-onboarding/UsersManagerOnboarding.vue

@@ -23,7 +23,7 @@
         v-show="showInvitationForm"
         class="users-manager-onboarding__overlay"
       >
-        <InvitationForm
+        <ProjectInvitationForm
           class="users-manager-onboarding__overlay__invitation-form"
           :project="project"
           @close="closeInvitationForm"
@@ -38,7 +38,7 @@
 import { useToggle } from "../../../../../composables/toggle.js";
 import { useUser } from "../../../../../state/user.js";
 // Components
-import InvitationForm from "../../invitation-form/InvitationForm.vue";
+import ProjectInvitationForm from "../../invitation-form/ProjectInvitationForm.vue";
 import UsersManagerOnboardingImage from "./UsersManagerOnboardingImage.vue";
 
 defineProps({