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>