refactor: replace EmailMultiSelect with FormControl for inviting users by email

frontend/src/components/Settings/InviteUserPage.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="flex h-full flex-col gap-6 p-8 text-ink-gray-8">
-    <div class="flex justify-between">
+  <div class="flex h-full flex-col gap-6 py-8 px-6 text-ink-gray-8">
+    <div class="flex px-2 justify-between">
       <div class="flex flex-col gap-1 w-9/12">
         <h2 class="flex gap-2 text-xl font-semibold leading-none h-5">
           {{ __('Send invites to') }}
@@ -23,26 +23,21 @@
         />
       </div>
     </div>
-    <div class="flex-1 flex flex-col gap-8 overflow-y-auto">
+    <div class="flex-1 flex flex-col px-2 gap-8 overflow-y-auto">
       <div>
-        <label class="block text-xs text-ink-gray-5 mb-1.5">
-          {{ __('Invite by email') }}
-        </label>
-        <div
-          class="p-2 group bg-surface-gray-2 hover:bg-surface-gray-3 rounded"
-        >
-          <EmailMultiSelect
-            class="flex-1"
-            inputClass="!bg-surface-gray-2 hover:!bg-surface-gray-3 group-hover:!bg-surface-gray-3"
-            :placeholder="__('john@doe.com')"
-            v-model="invitees"
-            :validate="validateEmail"
-            :error-message="
-              (value) => __('{0} is an invalid email address', [value])
-            "
-            :emptyPlaceholder="__('Type an email address to invite')"
-          />
-        </div>
+        <FormControl
+          type="textarea"
+          label="Invite by email"
+          placeholder="user1@example.com, user2@example.com, ..."
+          @input="updateInvitees($event.target.value)"
+          :debounce="100"
+          :disabled="inviteByEmail.loading"
+          :description="
+            __(
+              'You can invite multiple users by comma separating their email addresses',
+            )
+          "
+        />
         <div
           v-if="userExistMessage || inviteeExistMessage"
           class="text-xs text-ink-red-3 mt-1.5"
@@ -100,15 +95,9 @@
   </div>
 </template>
 <script setup>
-import EmailMultiSelect from '@/components/Controls/EmailMultiSelect.vue'
 import { validateEmail, convertArrayToString } from '@/utils'
 import { usersStore } from '@/stores/users'
-import {
-  createListResource,
-  createResource,
-  FormControl,
-  Tooltip,
-} from 'frappe-ui'
+import { createListResource, createResource, FormControl } from 'frappe-ui'
 import { useOnboarding } from 'frappe-ui/frappe'
 import { ref, computed } from 'vue'
 
@@ -208,6 +197,15 @@ const pendingInvitations = createListResource({
   doctype: 'CRM Invitation',
   filters: { status: 'Pending' },
   fields: ['name', 'email', 'role'],
+  pageLength: 999,
   auto: true,
 })
+
+function updateInvitees(value) {
+  const emails = value
+    .split(',')
+    .map((email) => email.trim())
+    .filter((email) => validateEmail(email))
+  invitees.value = emails
+}
 </script>