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,
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);
}

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>