Make user assignment picker readonly and prevent adding same user multiple times

packages/builder/src/pages/builder/portal/overview/_components/AssignmentModal.svelte

@@ -18,29 +18,11 @@
   let prevSearch = undefined,
     search = undefined
   let pageInfo = createPaginationStore()
+  let appData = [{ id: "", role: "" }]
 
   $: page = $pageInfo.page
   $: fetchUsers(page, search)
-
-  async function fetchUsers(page, search) {
-    if ($pageInfo.loading) {
-      return
-    }
-    // need to remove the page if they've started searching
-    if (search && !prevSearch) {
-      pageInfo.reset()
-      page = undefined
-    }
-    prevSearch = search
-    try {
-      pageInfo.loading()
-      await users.search({ page, email: search })
-      pageInfo.fetched($users.hasNextPage, $users.nextPage)
-    } catch (error) {
-      notifications.error("Error getting user list")
-    }
-  }
-
+  $: availableUsers = getAvailableUsers($users, appUsers, appData)
   $: filteredGroups = $groups.filter(group => {
     return !group.apps.find(appId => {
       return appId === app.appId
@@ -59,7 +41,7 @@
         },
       }),
     users: {
-      data: $users.data.filter(u => !appUsers.find(x => x._id === u._id)),
+      data: availableUsers,
       getLabel: user => user.email,
       getValue: user => user._id,
       getIcon: user => user.icon,
@@ -67,7 +49,36 @@
     },
   }
 
-  $: appData = [{ id: "", role: "" }]
+  const getAvailableUsers = (allUsers, appUsers, newUsers) => {
+    return (allUsers.data || []).filter(user => {
+      // Filter out assigned users
+      if (appUsers.find(x => x._id === user._id)) {
+        return false
+      }
+
+      // Filter out new users which are going to be assigned
+      return !newUsers.find(x => x.id === user._id)
+    })
+  }
+
+  async function fetchUsers(page, search) {
+    if ($pageInfo.loading) {
+      return
+    }
+    // need to remove the page if they've started searching
+    if (search && !prevSearch) {
+      pageInfo.reset()
+      page = undefined
+    }
+    prevSearch = search
+    try {
+      pageInfo.loading()
+      await users.search({ page, email: search })
+      pageInfo.fetched($users.hasNextPage, $users.nextPage)
+    } catch (error) {
+      notifications.error("Error getting user list")
+    }
+  }
 
   function addNewInput() {
     appData = [...appData, { id: "", role: "" }]
@@ -86,6 +97,7 @@
     {#each appData as input, index}
       <PickerDropdown
         autocomplete
+        readonly
         primaryOptions={optionSections}
         secondaryOptions={$roles}
         secondaryPlaceholder="Access"