From 8892dd329da9054ba454f31c19f160036ac98d3a Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:12 +0000
Subject: [PATCH] feat: email badge on enter

---
 .../components/workspace/InviteSection.vue     | 18 ++++++++++++++----
 .../pages/WorkspacePage/ContainerPage.ts       |  2 +-
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 684013ca6e..0fae0eb521 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -22,11 +22,12 @@ const inviteCollaborator = async () => {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
-
+// all user input emails are stored here
+const emailBadges = ref<Array<string>>([])
 watch(inviteData, (newVal) => {
-  console.log(newVal.email)
-  if (newVal.email[-1] === ',') {
-    console.log(newVal.email)
+  if (newVal.email.includes(',')) {
+    emailBadges.value.push(newVal.email.split(',')[0])
+    inviteData.email = ''
   }
 })
 
@@ -52,11 +53,20 @@ onMounted(async () => {
     <div class="text-xl mb-4">Invite</div>
     <a-form>
       <div class="flex gap-2">
+        <span
+          v-for="(email, index) in emailBadges"
+          :key="email"
+          class="p-1 border-1 border-grey rounded-2xl flex items-center justify-between"
+        >
+          {{ email }}
+          <component :is="iconMap.close" class="ml-1.5 hover:cursor-pointer" @click="emailBadges.splice(index, 1)" />
+        </span>
         <a-input
           id="email"
           v-model:value="inviteData.email"
           placeholder="Enter emails to send invitation"
           class="!max-w-130 !rounded"
+          @press-enter="inviteData.email += ','"
         />
 
         <RolesSelector
diff --git a/tests/playwright/pages/WorkspacePage/ContainerPage.ts b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
index 0e9eb62dfe..72b8988afd 100644
--- a/tests/playwright/pages/WorkspacePage/ContainerPage.ts
+++ b/tests/playwright/pages/WorkspacePage/ContainerPage.ts
@@ -55,7 +55,7 @@ export class ContainerPage extends BasePage {
 
     // tabs
     this.projects = this.get().locator('.ant-tabs-tab:has-text("Projects")');
-    this.collaborators = this.get().locator('.ant-tabs-tab:has-text("Collaborators")');
+    this.collaborators = this.get().locator('.ant-tabs-tab:has-text("Members")');
     this.billing = this.get().locator('.ant-tabs-tab:has-text("Billing")');
     this.settings = this.get().locator('.ant-tabs-tab:has-text("Settings")');