take into account pagination

4 years ago · b846402d90
9 changed files with 122 additions and 25 deletions
--- a/packages/builder/src/components/settings/UserGroupPicker.svelte
+++ b/packages/builder/src/components/settings/UserGroupPicker.svelte
@ -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"
      >
--- a/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/[groupId].svelte
@ -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}
      />
--- a/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/_components/CreateEditGroupModal.svelte
@ -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>
--- a/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/groups/index.svelte
@ -96,7 +96,7 @@
 </Layout>

 <Modal bind:this={modal}>
-  <CreateEditGroupModal {group} {saveGroup} />
+  <CreateEditGroupModal bind:group {saveGroup} />
 </Modal>

 <style>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AppsTableRenderer.svelte
@ -1,7 +1,6 @@
 <script>
  import { Icon } from "@budibase/bbui"
  export let value
-  $: console.log(value)
 </script>

 <div class="align">
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/GroupsTableRenderer.svelte
@ -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>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -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}
--- a/packages/builder/src/stores/portal/groups.js
+++ b/packages/builder/src/stores/portal/groups.js
@ -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
--- a/packages/worker/src/api/routes/global/groups.js
+++ b/packages/worker/src/api/routes/global/groups.js
@ -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())
 }