From 00dbe012b7546d7955e38d357b882d76d741433e Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Fri, 22 Sep 2023 15:26:17 +0000
Subject: [PATCH] fix: reorder of input and refactor

---
 .../workspace/CollaboratorsList.vue           |  8 ++--
 .../components/workspace/InviteSection.vue    | 42 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 2d1da65ab6..5bf89fcbe3 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -44,16 +44,16 @@ onMounted(async () => {
 
 <template>
   <div class="nc-collaborator-table-container mt-4 mx-6">
-    <WorkspaceInviteSection v-if="workspaceRoles !== WorkspaceUserRoles.VIEWER" />
-    <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div>
-    <div class="w-full flex flex-row justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
-      <div class="text-xl">Members</div>
+    <!-- <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div> -->
+    <div class="w-full flex justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
+      <div class="text-xl">Invite Members By Email</div>
       <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search members">
         <template #prefix>
           <PhMagnifyingGlassBold class="!h-3.5 text-gray-500" />
         </template>
       </a-input>
     </div>
+    <WorkspaceInviteSection v-if="workspaceRole !== WorkspaceUserRoles.VIEWER" />
     <div v-if="!filterCollaborators?.length" class="w-full h-full flex flex-col items-center justify-center mt-36">
       <Empty description="No members found" />
     </div>
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index a4d5f37de8..47eae89159 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -44,6 +44,20 @@ const insertOrUpdateString = (str: string) => {
   emailBadges.value.push(str)
 }
 
+const emailInputValidation = (input: string): boolean => {
+  if (input.length < 1) {
+    emailValidation.isError = true
+    emailValidation.message = 'Email Should Not Be Empty'
+    return false
+  }
+  if (!validateEmail(input.trim())) {
+    emailValidation.isError = true
+    emailValidation.message = 'Invalid Email'
+    return false
+  }
+  return true
+}
+
 watch(inviteData, (newVal) => {
   const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
   if (isNewEmail && newVal.email.trim().length > 1) {
@@ -71,16 +85,9 @@ watch(inviteData, (newVal) => {
 })
 
 const handleEnter = () => {
-  if (inviteData.email.length < 1) {
-    emailValidation.isError = true
-    emailValidation.message = 'Email Should Not Be Empty'
-    return
-  }
-  if (!validateEmail(inviteData.email.trim())) {
-    emailValidation.isError = true
-    emailValidation.message = 'Invalid Email'
-    return
-  }
+  const isEmailIsValid = emailInputValidation(inviteData.email)
+  if (!isEmailIsValid) return
+
   inviteData.email += ' '
   emailValidation.isError = false
   emailValidation.message = ''
@@ -144,16 +151,10 @@ const onPaste = (e: ClipboardEvent) => {
     inputArray[0] = inviteData.email += inputArray[0]
   }
   inputArray?.forEach((el) => {
-    if (el.length < 1) {
-      emailValidation.isError = true
-      emailValidation.message = 'Email Should Not Be Empty'
-      return
-    }
-    if (!validateEmail(el.trim())) {
-      emailValidation.isError = true
-      emailValidation.message = 'Invalid Email'
-      return
-    }
+    const isEmailIsValid = emailInputValidation(el)
+
+    if (!isEmailIsValid) return
+
     /** 
      if email is already enterd we delete the already
      existing email and add new one
@@ -172,7 +173,6 @@ const onPaste = (e: ClipboardEvent) => {
 
 <template>
   <div class="my-2 pt-3 ml-2" data-testid="invite">
-    <div class="text-xl mb-4">Invite</div>
     <div class="flex gap-2">
       <div class="flex flex-col items-cenyet">
         <div