adds frontend for updating roles of a user

This commit is contained in:
Keviin Åberg Kultalahti 2021-05-14 15:03:58 +02:00
parent 11c8c74111
commit 4fdb1d080d
2 changed files with 72 additions and 1 deletions

View File

@ -10,14 +10,27 @@
Label, Label,
Input, Input,
Modal, Modal,
Table,
ModalContent, ModalContent,
notifications, notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import { fetchData } from "helpers" import { fetchData } from "helpers"
import { users } from "stores/portal" import { users, apps } from "stores/portal"
import UpdateRolesModal from "./_components/UpdateRolesModal.svelte"
export let userId export let userId
let deleteUserModal 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}`) const request = fetchData(`/api/admin/users/${userId}`)
@ -30,6 +43,11 @@
notifications.error("Failed to delete user.") notifications.error("Failed to delete user.")
} }
} }
async function openUpdateRolesModal({ detail }) {
selectedApp = detail
editRolesModal.show()
}
</script> </script>
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
@ -64,6 +82,18 @@
</div> </div>
</div> </div>
<Divider size="S" /> <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"> <div class="delete">
<Layout gap="S" noPadding <Layout gap="S" noPadding
><Heading size="S">Delete user</Heading> ><Heading size="S">Delete user</Heading>
@ -90,6 +120,9 @@
> >
</ModalContent> </ModalContent>
</Modal> </Modal>
<Modal bind:this={editRolesModal}>
<UpdateRolesModal app={selectedApp} user={$request.data} />
</Modal>
<style> <style>
.fields { .fields {
@ -109,6 +142,9 @@
position: relative; position: relative;
margin: var(--spacing-xl) 0; margin: var(--spacing-xl) 0;
} }
.roles {
margin: var(--spacing-xl) 0;
}
.delete { .delete {
margin-top: var(--spacing-xl); margin-top: var(--spacing-xl);
} }

View File

@ -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>