Exclude existing users from typeahead results

sillsdev · Nov 15, 2024 · 4dcdfda · 4dcdfda
1 parent 10619d4
commit 4dcdfda
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/frontend/src/lib/forms/UserTypeahead.svelte b/frontend/src/lib/forms/UserTypeahead.svelte
@@ -14,6 +14,7 @@
   export let value: string;
   export let debounceMs = 200;
   export let isAdmin: boolean = false;
+  export let exclude: string[] = [];
 
   let input = writable('');
   $: $input = value;
@@ -23,6 +24,8 @@
     [],
     debounceMs);
 
+  $: filteredResults = $typeaheadResults.filter(user => !exclude.includes(user.id));
+
   const dispatch = createEventDispatcher<{
       selectedUserId: string | null;
       selectedUser: SingleUserTypeaheadResult | SingleUserICanSeeTypeaheadResult | null;
@@ -62,7 +65,7 @@
     />
     <div class="overlay-content">
       <ul class="menu p-0">
-      {#each $typeaheadResults as user}
+      {#each filteredResults as user}
         <li class="p-0"><button class="whitespace-nowrap" on:click={() => {
           setTimeout(() => {
             if ('id' in user && user.id) {

diff --git a/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMemberModal.svelte b/frontend/src/routes/(authenticated)/org/[org_id]/AddOrgMemberModal.svelte
@@ -102,6 +102,7 @@
       error={errors.usernameOrEmail}
       on:selectedUser={(event) => populateUserProjects(event.detail)}
       autofocus
+      exclude={org.members.map(m => m.user.id)}
       />
   {:else}
     <Input

diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
@@ -500,7 +500,7 @@
               {$t('project_page.add_user.add_button')}
             </BadgeButton>
 
-            <AddProjectMember bind:this={addProjectMember} projectId={project.id} />
+            <AddProjectMember bind:this={addProjectMember} {project} />
             <BulkAddProjectMembers projectId={project.id} />
           </svelte:fragment>
           <UserModal bind:this={userModal}/>

diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/AddProjectMember.svelte
@@ -4,14 +4,14 @@
   import { ProjectRole } from '$lib/gql/types';
   import t from '$lib/i18n';
   import { z } from 'zod';
-  import { _addProjectMember } from './+page';
+  import { _addProjectMember, type Project } from './+page';
   import { useNotifications } from '$lib/notify';
   import { page } from '$app/stores'
   import UserTypeahead from '$lib/forms/UserTypeahead.svelte';
   import { SupHelp, helpLinks } from '$lib/components/help';
   import Checkbox from '$lib/forms/Checkbox.svelte';
 
-  export let projectId: string;
+  export let project: Project;
   const schema = z.object({
     usernameOrEmail: z.string().trim()
       .min(1, $t('project_page.add_user.empty_user_field'))
@@ -31,7 +31,7 @@
     if (initialUserId) selectedUserId = initialUserId;
     const { response, formState } = await formModal.open(initialValue, async () => {
       const { error } = await _addProjectMember({
-        projectId,
+        projectId: project.id,
         usernameOrEmail: $form.usernameOrEmail ?? '',
         userId: selectedUserId,
         role: $form.role,
@@ -86,6 +86,7 @@
     on:selectedUserId={({ detail }) => {
         selectedUserId = detail;
     }}
+    exclude={project.users.map(m => m.user.id)}
   />
   <ProjectRoleSelect bind:value={$form.role} error={errors.role} />
   <svelte:fragment slot="extraActions">