From 0a34af479bf6184550409774445c6f875a03a986 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Fri, 29 Jul 2022 10:35:47 +0530
Subject: [PATCH] 
 chore/gui-v2-user-management-fixed-import-and-improved-debounce-implementation

---
 .../dashboard/settings/ApiTokenManagement.vue |  4 ++--
 .../dashboard/settings/UserManagement.vue     | 12 +++++-----
 .../settings/user-management/ShareBase.vue    |  2 +-
 .../settings/user-management/UsersModal.vue   | 22 ++++++++++++++-----
 4 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
index ff79641891..0cfa2d4ebd 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/ApiTokenManagement.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { ApiTokenType } from '~~/../nocodb-sdk/build/main'
+import type { ApiTokenType } from 'nocodb-sdk'
 import { useToast } from 'vue-toastification'
 import KebabIcon from '~icons/ic/baseline-more-vert'
 import MdiPlusIcon from '~icons/mdi/plus'
@@ -9,7 +9,7 @@ import VisibilityOpenIcon from '~icons/material-symbols/visibility'
 import VisibilityCloseIcon from '~icons/material-symbols/visibility-off'
 import MdiDeleteOutlineIcon from '~icons/mdi/delete-outline'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { copyTextToClipboard } from '~/utils/miscUtils'
 
 const toast = useToast()
diff --git a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
index 9d006321ba..030cc09363 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/UserManagement.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { useDebounce } from '@vueuse/core'
 import KebabIcon from '~icons/ic/baseline-more-vert'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import UsersModal from './user-management/UsersModal.vue'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import MidAccountIcon from '~icons/mdi/account-outline'
@@ -15,7 +14,8 @@ import MdiPlusIcon from '~icons/mdi/plus'
 import MdiContentCopyIcon from '~icons/mdi/content-copy'
 import MdiEmailSendIcon from '~icons/mdi/email-arrow-right-outline'
 import RolesIcon from '~icons/mdi/drama-masks'
-import { User } from '~~/lib/types'
+import { User } from '~/lib/types'
+import { watchDebounced } from '@vueuse/core'
 import { useToast } from 'vue-toastification'
 import FeedbackForm from './user-management/FeedbackForm.vue'
 const toast = useToast()
@@ -33,7 +33,6 @@ let totalRows = $ref(0)
 const currentPage = $ref(1)
 const currentLimit = $ref(10)
 const searchText = ref<string>('')
-const debouncedSearchText = useDebounce(searchText, 300)
 
 const loadUsers = async (page = currentPage, limit = currentLimit) => {
   try {
@@ -138,9 +137,10 @@ onMounted(async () => {
   }
 })
 
-watch(
-  () => debouncedSearchText.value,
+watchDebounced(
+  searchText,
   () => loadUsers(),
+  { debounce: 300, maxWait: 600 },
 )
 
 </script>
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
index 573e5d2df5..a2574b04a1 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/ShareBase.vue
@@ -2,7 +2,7 @@
 import { useToast } from 'vue-toastification'
 import OpenInNewIcon from '~icons/mdi/open-in-new'
 import { dashboardUrl } from '~/utils/urlUtils'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import MdiReload from '~icons/mdi/reload'
 import DownIcon from '~icons/ic/round-keyboard-arrow-down'
 import ContentCopyIcon from '~icons/mdi/content-copy'
diff --git a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
index 4044bfbd7e..d950c01c80 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/user-management/UsersModal.vue
@@ -6,12 +6,12 @@ import SendIcon from '~icons/material-symbols/send-outline'
 import CloseIcon from '~icons/material-symbols/close-rounded'
 import MidAccountIcon from '~icons/mdi/account-outline'
 import ContentCopyIcon from '~icons/mdi/content-copy'
-import type { User } from '~~/lib/types'
+import type { User } from '~/lib/types'
 import { ProjectRole } from '~/lib/enums'
 import { projectRoleTagColors } from '~/utils/userUtils'
 import { copyTextToClipboard } from '~/utils/miscUtils'
-import { extractSdkResponseErrorMsg } from '~~/utils/errorUtils'
-import { isEmail } from '~~/utils/validation'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
+import { isEmail } from '~/utils/validation'
 
 interface Props {
   show: boolean
@@ -175,16 +175,28 @@ const clickInviteMore = () => {
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? 'Edit User' : 'Invite Team' }}</div>
           </div>
           <div class="border-1 py-3 px-4 rounded-md mt-1">
-            <a-form ref="formRef" :model="usersData" @finish="saveUser">
+            <a-form
+              ref="formRef"
+              :validate-on-rule-change="false"
+              :model="usersData"
+              validate-trigger="onBlur"
+              @finish="saveUser"
+            >
               <div class="flex flex-row space-x-4">
                 <div class="flex flex-col w-3/4">
                   <a-form-item
                     v-bind="validateInfos.emails"
+                    validate-trigger="onBlur"
                     name="emails"
                     :rules="[{ required: true, message: 'Please input email' }]"
                   >
                     <div class="ml-1 mb-1 text-xs text-gray-500">Email:</div>
-                    <a-input v-model:value="usersData.emails" placeholder="Email" :disabled="!!selectedUser" />
+                    <a-input
+                      v-model:value="usersData.emails"
+                      validate-trigger="onBlur"
+                      placeholder="Email"
+                      :disabled="!!selectedUser"
+                    />
                   </a-form-item>
                 </div>
                 <div class="flex flex-col w-1/4">