CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-18 03:21:29 +12:00
Code Issues Projects Releases Wiki Activity

Split components

Browse source
This commit is contained in:
Adria Navarro 2023-05-05 20:21:06 +01:00
parent e4b0c55aa6
commit b1f1095c89
2 changed files with 64 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
packages/builder/src/pages/builder/portal/users/groups/_components/EditUserPicker.svelte Normal file
View file

@ -0,0 +1,59 @@
<script>
import { Button, Popover, notifications } from "@budibase/bbui"
import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
import { createPaginationStore } from "helpers/pagination"
import { auth, groups, users } from "stores/portal"
export let groupId
export let onUsersUpdated
let popoverAnchor
let popover
let searchTerm = ""
let prevSearch = undefined
let pageInfo = createPaginationStore()
$: readonly = !$auth.isAdmin
$: page = $pageInfo.page
$: searchUsers(page, searchTerm)
$: group = $groups.find(x => x._id === groupId)
async function searchUsers(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")
}
}
</script>
<div bind:this={popoverAnchor}>
<Button disabled={readonly} on:click={popover.show()} cta>Add user</Button>
</div>
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
<UserGroupPicker
bind:searchTerm
labelKey="email"
selected={group.users?.map(user => user._id)}
list={$users.data}
on:select={async e => {
await groups.actions.addUser(groupId, e.detail)
onUsersUpdated()
}}
on:deselect={async e => {
await groups.actions.removeUser(groupId, e.detail)
onUsersUpdated()
}}
/>
</Popover>

64
packages/builder/src/pages/builder/portal/users/groups/_components/GroupUsers.svelte
View file

@ -1,18 +1,11 @@
<script>
import {
Button,
Heading,
Pagination,
Popover,
Table,
notifications,
} from "@budibase/bbui"
import EditUserPicker from "./EditUserPicker.svelte"
import { Heading, Pagination, Table } from "@budibase/bbui"
import { fetchData } from "@budibase/frontend-core"
import { goto } from "@roxi/routify"
import { API } from "api"
import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
import { createPaginationStore } from "helpers/pagination"
import { auth, features, groups, users } from "stores/portal"
import { auth, features, groups } from "stores/portal"
import { setContext } from "svelte"
import ScimBanner from "../../_components/SCIMBanner.svelte"
import RemoveUserTableRenderer from "../_components/RemoveUserTableRenderer.svelte"
@ -52,36 +45,8 @@
},
]
let popoverAnchor
let popover
let searchTerm = ""
let prevSearch = undefined
let searchUsersPageInfo = createPaginationStore()
$: scimEnabled = $features.isScimEnabled
$: readonly = !$auth.isAdmin || scimEnabled
$: page = $searchUsersPageInfo.page
$: searchUsers(page, searchTerm)
$: group = $groups.find(x => x._id === groupId)
async function searchUsers(page, search) {
if ($searchUsersPageInfo.loading) {
return
}
// need to remove the page if they've started searching
if (search && !prevSearch) {
searchUsersPageInfo.reset()
page = undefined
}
prevSearch = search
try {
searchUsersPageInfo.loading()
await users.search({ page, email: search })
searchUsersPageInfo.fetched($users.hasNextPage, $users.nextPage)
} catch (error) {
notifications.error("Error getting user list")
}
}
const removeUser = async id => {
await groups.actions.removeUser(groupId, id)
@ -96,29 +61,10 @@
<div class="header">
<Heading size="S">Users</Heading>
{#if !scimEnabled}
<div bind:this={popoverAnchor}>
<Button disabled={readonly} on:click={popover.show()} cta>Add user</Button
>
</div>
<EditUserPicker {groupId} onUsersUpdated={fetchGroupUsers.getInitialData} />
{:else}
<ScimBanner />
{/if}
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
<UserGroupPicker
bind:searchTerm
labelKey="email"
selected={group.users?.map(user => user._id)}
list={$users.data}
on:select={async e => {
await groups.actions.addUser(groupId, e.detail)
fetchGroupUsers.getInitialData()
}}
on:deselect={async e => {
await groups.actions.removeUser(groupId, e.detail)
fetchGroupUsers.getInitialData()
}}
/>
</Popover>
</div>
<Table