CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-17 11:01:26 +12:00
Code Issues Projects Releases Wiki Activity

take into account pagination

Browse source
This commit is contained in:
Peter Clement 2022-07-06 12:58:55 +01:00
parent 6df456411f
commit 8489ae36a4
9 changed files with 122 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
packages/builder/src/components/settings/UserGroupPicker.svelte
View file

@ -1,13 +1,19 @@
<script> <script>
import { ActionButton, Icon, Search, Divider, Detail } from "@budibase/bbui" import { ActionButton, Icon, Search, Divider, Detail } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
export let searchTerm = "" export let searchTerm = ""
export let selected export let selected
export let filtered export let filtered = []
export let addAll export let addAll
export let select export let select
export let title export let title
export let key export let key
const dispatch = createEventDispatcher()
function onChange(e) {
dispatch("change", e.detail)
}
</script> </script>
<div style="padding: var(--spacing-m)"> <div style="padding: var(--spacing-m)">
@ -26,7 +32,9 @@
<div> <div>
{#each filtered as item} {#each filtered as item}
<div <div
on:click={select(item._id)} on:click={() => {
select(item._id)
}}
style="padding-bottom: var(--spacing-m)" style="padding-bottom: var(--spacing-m)"
class="selection" class="selection"
> >

51
packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
View file

@ -14,7 +14,7 @@
StatusLight, StatusLight,
} from "@budibase/bbui" } from "@budibase/bbui"
import UserGroupPicker from "components/settings/UserGroupPicker.svelte" import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
import { createPaginationStore } from "helpers/pagination"
import { users, apps, groups } from "stores/portal" import { users, apps, groups } from "stores/portal"
import { onMount } from "svelte" import { onMount } from "svelte"
import { RoleUtils } from "@budibase/frontend-core" import { RoleUtils } from "@budibase/frontend-core"
@ -24,24 +24,23 @@
let popover let popover
let searchTerm = "" let searchTerm = ""
let selectedUsers = [] let selectedUsers = []
let prevSearch = undefined,
search = undefined
$: page = $pageInfo.page
$: fetchUsers(page, search)
$: group = $groups.find(x => x._id === groupId) $: group = $groups.find(x => x._id === groupId)
$: filteredUsers = $users.filter( let pageInfo = createPaginationStore()
user =>
selectedUsers &&
user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
)
$: console.log(group)
async function addAll() { async function addAll() {
selectedUsers = [...selectedUsers, ...filteredUsers]
group.users = selectedUsers group.users = selectedUsers
await groups.actions.save(group) await groups.actions.save(group)
} }
async function selectUser(id) { async function selectUser(id) {
let selectedUser = selectedUsers.includes(id) let selectedUser = selectedUsers.includes(id)
let enrichedUser = $users.find(user => user._id === id) let enrichedUser = $users.data.find(user => user._id === id)
if (selectedUser) { if (selectedUser) {
console.log
selectedUsers = selectedUsers.filter(id => id !== selectedUser) selectedUsers = selectedUsers.filter(id => id !== selectedUser)
let newUsers = group.users.filter(user => user._id !== id) let newUsers = group.users.filter(user => user._id !== id)
group.users = newUsers group.users = newUsers
@ -52,16 +51,43 @@
await groups.actions.save(group) await groups.actions.save(group)
} }
$: filtered =
$users.data?.filter(x => !group?.users.map(y => y._id).includes(x._id)) ||
[]
$: console.log(filtered)
async function removeUser(id) { async function removeUser(id) {
let newUsers = group.users.filter(user => user._id !== id) let newUsers = group.users.filter(user => user._id !== id)
group.users = newUsers group.users = newUsers
await groups.actions.save(group) await groups.actions.save(group)
} }
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, search })
pageInfo.fetched($users.hasNextPage, $users.nextPage)
} catch (error) {
notifications.error("Error getting user list")
}
}
function onChange(e) {
console.log(e)
}
onMount(async () => { onMount(async () => {
try { try {
await groups.actions.init() await groups.actions.init()
await users.init()
await apps.load() await apps.load()
} catch (error) { } catch (error) {
notifications.error("Error fetching User Group data") notifications.error("Error fetching User Group data")
@ -91,11 +117,12 @@
</div> </div>
<Popover align="right" bind:this={popover} anchor={popoverAnchor}> <Popover align="right" bind:this={popover} anchor={popoverAnchor}>
<UserGroupPicker <UserGroupPicker
on:change={onChange}
key={"email"} key={"email"}
title={"User"} title={"User"}
bind:searchTerm bind:searchTerm
bind:selected={selectedUsers} bind:selected={selectedUsers}
bind:filtered={filteredUsers} bind:filtered
{addAll} {addAll}
select={selectUser} select={selectUser}
/> />

10
packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
View file

@ -22,13 +22,19 @@
<div class="modal-inner"> <div class="modal-inner">
<Body size="XS">Icon</Body> <Body size="XS">Icon</Body>
<div class="modal-spacing"> <div class="modal-spacing">
<IconPicker on:change={e => (group.icon = e.detail)} /> <IconPicker
bind:value={group.icon}
on:change={e => (group.icon = e.detail)}
/>
</div> </div>
</div> </div>
<div class="modal-inner"> <div class="modal-inner">
<Body size="XS">Color</Body> <Body size="XS">Color</Body>
<div class="modal-spacing"> <div class="modal-spacing">
<ColorPicker on:change={e => (group.color = e.detail)} /> <ColorPicker
bind:value={group.color}
on:change={e => (group.color = e.detail)}
/>
</div> </div>
</div> </div>
</div> </div>

2
packages/builder/src/pages/builder/portal/manage/groups/index.svelte
View file

@ -96,7 +96,7 @@
</Layout> </Layout>
<Modal bind:this={modal}> <Modal bind:this={modal}>
<CreateEditGroupModal {group} {saveGroup} /> <CreateEditGroupModal bind:group {saveGroup} />
</Modal> </Modal>
<style> <style>

1
packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
View file

@ -1,7 +1,6 @@
<script> <script>
import { Icon } from "@budibase/bbui" import { Icon } from "@budibase/bbui"
export let value export let value
$: console.log(value)
</script> </script>
<div class="align"> <div class="align">

9
packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
View file

@ -1,21 +1,22 @@
<script> <script>
import { Icon, Body } from "@budibase/bbui" import { Icon, Body } from "@budibase/bbui"
export let value export let value
console.log(value)
</script> </script>
<div class="align"> <div class="align">
<div class="spacing"> <div class="spacing">
<Icon name="UserGroup" /> <Icon name="UserGroup" />
</div> </div>
{#if value.length === 0} {#if value?.length === 0}
<div class="opacity">0</div> <div class="opacity">0</div>
{:else if value.length === 1} {:else if value?.length === 1}
<div class="opacity"> <div class="opacity">
<Body size="S">{value[0].name}</Body> <Body size="S">{value[0]?.name}</Body>
</div> </div>
{:else} {:else}
<div class="opacity"> <div class="opacity">
{parseInt(value.length) || 0} groups {parseInt(value?.length) || 0} groups
</div> </div>
{/if} {/if}
</div> </div>

57
packages/builder/src/pages/builder/portal/manage/users/index.svelte
View file

@ -62,8 +62,8 @@
] ]
let email let email
let enrichedUsers = []
let createUserModal, let createUserModal,
basicOnboardingModal,
inviteConfirmationModal, inviteConfirmationModal,
onboardingTypeModal, onboardingTypeModal,
passwordModal, passwordModal,
@ -74,8 +74,36 @@
search = undefined search = undefined
$: page = $pageInfo.page $: page = $pageInfo.page
$: fetchUsers(page, search) $: fetchUsers(page, search)
$: console.log(page)
$: {
if ($users.data) {
enrichedUsers = $users.data.map(user => {
let userGroups = []
let userApps = []
$groups.forEach(group => {
console.log(group)
if (group.users) {
group.users?.forEach(y => {
if (y._id === user._id) {
console.log("hello")
userGroups.push(group)
userApps = group.apps
}
})
}
})
return {
...user,
name: user.firstName ? user.firstName + " " + user.lastName : "",
userGroups,
apps: [...new Set(Object.keys(user.roles))],
}
})
} else {
enrichedUsers = []
}
}
$: console.log(enrichedUsers)
function showOnboardingTypeModal() { function showOnboardingTypeModal() {
onboardingTypeModal.show() onboardingTypeModal.show()
} }
@ -128,6 +156,15 @@
} }
} }
onMount(async () => {
try {
await groups.actions.init()
} catch (error) {
console.log(error)
notifications.error("Error fetching User Group data")
}
})
async function fetchUsers(page, search) { async function fetchUsers(page, search) {
if ($pageInfo.loading) { if ($pageInfo.loading) {
return return
@ -176,6 +213,22 @@
>Import Users</Button >Import Users</Button
> >
</ButtonGroup> </ButtonGroup>
<Table
on:click={({ detail }) => $goto(`./${detail._id}`)}
{schema}
data={enrichedUsers}
allowEditColumns={false}
allowEditRows={false}
allowSelectRows={true}
showHeaderBorder={false}
customRenderers={[
{ column: "userGroups", component: GroupsTableRenderer },
{ column: "apps", component: AppsTableRenderer },
{ column: "name", component: NameTableRenderer },
{ column: "settings", component: SettingsTableRenderer },
{ column: "role", component: RoleTableRenderer },
]}
/>
<div class="pagination"> <div class="pagination">
<Pagination <Pagination
page={$pageInfo.pageNumber} page={$pageInfo.pageNumber}

1
packages/builder/src/stores/portal/groups.js
View file

@ -19,6 +19,7 @@ export function createGroupsStore() {
}, },
save: async group => { save: async group => {
console.log(group)
const response = await API.saveGroup(group) const response = await API.saveGroup(group)
group._id = response._id group._id = response._id
group._rev = response._rev group._rev = response._rev

4
packages/worker/src/api/routes/global/groups.js
View file

@ -15,7 +15,9 @@ function buildGroupSaveValidation() {
icon: Joi.string().required(), icon: Joi.string().required(),
name: Joi.string().required(), name: Joi.string().required(),
users: Joi.array().optional(), users: Joi.array().optional(),
apps: Joi.array().optional() apps: Joi.array().optional(),
createdAt: Joi.string().optional(),
updatedAt: Joi.string().optional(),
}).required()) }).required())
} }