adds frontend for updating roles of a user

5 years ago · 4fdb1d080d
2 changed files with 72 additions and 1 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/[userId].svelte
@ -10,14 +10,27 @@
    Label,
    Input,
    Modal,
    Table,
    ModalContent,
    notifications,
  } from "@budibase/bbui"
  import { fetchData } from "helpers"
-  import { users } from "stores/portal"
+  import { users, apps } from "stores/portal"
  import UpdateRolesModal from "./_components/UpdateRolesModal.svelte"
  export let userId
  let deleteUserModal
  let editRolesModal
  const roleSchema = {
    name: { displayName: "App" },
    roles: {},
  }
  // Here we need to merge the Apps list and the roles response to get something that makes sense for the table
  $: appList = $apps.map(app => ({ ...app, roles: ["READ"] }))
  let selectedApp
  const request = fetchData(`/api/admin/users/${userId}`)
@ -30,6 +43,11 @@
      notifications.error("Failed to delete user.")
    }
  }
  async function openUpdateRolesModal({ detail }) {
    selectedApp = detail
    editRolesModal.show()
  }
 </script>
 <Layout noPadding gap="XS">
@ -64,6 +82,18 @@
    </div>
  </div>
  <Divider size="S" />
  <div class="roles">
    <Heading size="S">Configure roles</Heading>
    <Table
      on:click={openUpdateRolesModal}
      schema={roleSchema}
      data={appList}
      allowEditColumns={false}
      allowEditRows={false}
      allowSelectRows={false}
    />
  </div>
  <Divider size="S" />
  <div class="delete">
    <Layout gap="S" noPadding
      ><Heading size="S">Delete user</Heading>
@ -90,6 +120,9 @@
    >
  </ModalContent>
 </Modal>
 <Modal bind:this={editRolesModal}>
  <UpdateRolesModal app={selectedApp} user={$request.data} />
 </Modal>
 <style>
  .fields {
@ -109,6 +142,9 @@
    position: relative;
    margin: var(--spacing-xl) 0;
  }
  .roles {
    margin: var(--spacing-xl) 0;
  }
  .delete {
    margin-top: var(--spacing-xl);
  }
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/UpdateRolesModal.svelte
@ -0,0 +1,35 @@
 <script>
  import { Body, Multiselect, ModalContent } from "@budibase/bbui"
  import { users } from "stores/portal"
  export let app
  export let user
  let roles = app.roles
  const options = ["READ", "WRITE", "ADMIN", "PUBLIC"]
  function updateUserRoles() {
    users.updateRoles({ ...user, roles: { ...user.roles, [app._id]: roles } })
    console.log("updating roles!")
  }
 </script>
 <ModalContent
  onConfirm={updateUserRoles}
  title="Update App Roles"
  confirmText="Update roles"
  cancelText="Cancel"
  size="M"
  showCloseIcon={false}
 >
  <Body noPadding
    >Select the roles that this user should use for the {app.name}.</Body
  >
  <Multiselect
    placeholder={null}
    bind:value={roles}
    on:change
    {options}
    label="Select roles:"
  />
 </ModalContent>