take into account pagination
This commit is contained in:
parent
6df456411f
commit
8489ae36a4
9 changed files with 122 additions and 25 deletions
|
@ -1,13 +1,19 @@
|
|||
<script>
|
||||
import { ActionButton, Icon, Search, Divider, Detail } from "@budibase/bbui"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
||||
export let searchTerm = ""
|
||||
export let selected
|
||||
export let filtered
|
||||
export let filtered = []
|
||||
export let addAll
|
||||
export let select
|
||||
export let title
|
||||
export let key
|
||||
const dispatch = createEventDispatcher()
|
||||
|
||||
function onChange(e) {
|
||||
dispatch("change", e.detail)
|
||||
}
|
||||
</script>
|
||||
|
||||
<div style="padding: var(--spacing-m)">
|
||||
|
@ -26,7 +32,9 @@
|
|||
<div>
|
||||
{#each filtered as item}
|
||||
<div
|
||||
on:click={select(item._id)}
|
||||
on:click={() => {
|
||||
select(item._id)
|
||||
}}
|
||||
style="padding-bottom: var(--spacing-m)"
|
||||
class="selection"
|
||||
>
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
StatusLight,
|
||||
} from "@budibase/bbui"
|
||||
import UserGroupPicker from "components/settings/UserGroupPicker.svelte"
|
||||
|
||||
import { createPaginationStore } from "helpers/pagination"
|
||||
import { users, apps, groups } from "stores/portal"
|
||||
import { onMount } from "svelte"
|
||||
import { RoleUtils } from "@budibase/frontend-core"
|
||||
|
@ -24,24 +24,23 @@
|
|||
let popover
|
||||
let searchTerm = ""
|
||||
let selectedUsers = []
|
||||
let prevSearch = undefined,
|
||||
search = undefined
|
||||
$: page = $pageInfo.page
|
||||
$: fetchUsers(page, search)
|
||||
$: group = $groups.find(x => x._id === groupId)
|
||||
$: filteredUsers = $users.filter(
|
||||
user =>
|
||||
selectedUsers &&
|
||||
user?.email?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
)
|
||||
$: console.log(group)
|
||||
let pageInfo = createPaginationStore()
|
||||
|
||||
async function addAll() {
|
||||
selectedUsers = [...selectedUsers, ...filteredUsers]
|
||||
group.users = selectedUsers
|
||||
await groups.actions.save(group)
|
||||
}
|
||||
|
||||
async function selectUser(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) {
|
||||
console.log
|
||||
selectedUsers = selectedUsers.filter(id => id !== selectedUser)
|
||||
let newUsers = group.users.filter(user => user._id !== id)
|
||||
group.users = newUsers
|
||||
|
@ -52,16 +51,43 @@
|
|||
|
||||
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) {
|
||||
let newUsers = group.users.filter(user => user._id !== id)
|
||||
group.users = newUsers
|
||||
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 () => {
|
||||
try {
|
||||
await groups.actions.init()
|
||||
await users.init()
|
||||
await apps.load()
|
||||
} catch (error) {
|
||||
notifications.error("Error fetching User Group data")
|
||||
|
@ -91,11 +117,12 @@
|
|||
</div>
|
||||
<Popover align="right" bind:this={popover} anchor={popoverAnchor}>
|
||||
<UserGroupPicker
|
||||
on:change={onChange}
|
||||
key={"email"}
|
||||
title={"User"}
|
||||
bind:searchTerm
|
||||
bind:selected={selectedUsers}
|
||||
bind:filtered={filteredUsers}
|
||||
bind:filtered
|
||||
{addAll}
|
||||
select={selectUser}
|
||||
/>
|
||||
|
|
|
@ -22,13 +22,19 @@
|
|||
<div class="modal-inner">
|
||||
<Body size="XS">Icon</Body>
|
||||
<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 class="modal-inner">
|
||||
<Body size="XS">Color</Body>
|
||||
<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>
|
||||
|
|
|
@ -96,7 +96,7 @@
|
|||
</Layout>
|
||||
|
||||
<Modal bind:this={modal}>
|
||||
<CreateEditGroupModal {group} {saveGroup} />
|
||||
<CreateEditGroupModal bind:group {saveGroup} />
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
<script>
|
||||
import { Icon } from "@budibase/bbui"
|
||||
export let value
|
||||
$: console.log(value)
|
||||
</script>
|
||||
|
||||
<div class="align">
|
||||
|
|
|
@ -1,21 +1,22 @@
|
|||
<script>
|
||||
import { Icon, Body } from "@budibase/bbui"
|
||||
export let value
|
||||
console.log(value)
|
||||
</script>
|
||||
|
||||
<div class="align">
|
||||
<div class="spacing">
|
||||
<Icon name="UserGroup" />
|
||||
</div>
|
||||
{#if value.length === 0}
|
||||
{#if value?.length === 0}
|
||||
<div class="opacity">0</div>
|
||||
{:else if value.length === 1}
|
||||
{:else if value?.length === 1}
|
||||
<div class="opacity">
|
||||
<Body size="S">{value[0].name}</Body>
|
||||
<Body size="S">{value[0]?.name}</Body>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="opacity">
|
||||
{parseInt(value.length) || 0} groups
|
||||
{parseInt(value?.length) || 0} groups
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
@ -62,8 +62,8 @@
|
|||
]
|
||||
|
||||
let email
|
||||
let enrichedUsers = []
|
||||
let createUserModal,
|
||||
basicOnboardingModal,
|
||||
inviteConfirmationModal,
|
||||
onboardingTypeModal,
|
||||
passwordModal,
|
||||
|
@ -74,8 +74,36 @@
|
|||
search = undefined
|
||||
$: page = $pageInfo.page
|
||||
$: 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() {
|
||||
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) {
|
||||
if ($pageInfo.loading) {
|
||||
return
|
||||
|
@ -176,6 +213,22 @@
|
|||
>Import Users</Button
|
||||
>
|
||||
</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">
|
||||
<Pagination
|
||||
page={$pageInfo.pageNumber}
|
||||
|
|
|
@ -19,6 +19,7 @@ export function createGroupsStore() {
|
|||
},
|
||||
|
||||
save: async group => {
|
||||
console.log(group)
|
||||
const response = await API.saveGroup(group)
|
||||
group._id = response._id
|
||||
group._rev = response._rev
|
||||
|
|
|
@ -15,7 +15,9 @@ function buildGroupSaveValidation() {
|
|||
icon: Joi.string().required(),
|
||||
name: Joi.string().required(),
|
||||
users: Joi.array().optional(),
|
||||
apps: Joi.array().optional()
|
||||
apps: Joi.array().optional(),
|
||||
createdAt: Joi.string().optional(),
|
||||
updatedAt: Joi.string().optional(),
|
||||
}).required())
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue