sets up frontend side of updating users
This commit is contained in:
parent
42e23b05e6
commit
1d9a0b9b0d
2 changed files with 16 additions and 3 deletions
|
@ -1,4 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { createEventDispatcher } from "svelte"
|
||||||
|
const dispatch = createEventDispatcher()
|
||||||
import { Input, Select, Button } from "@budibase/bbui"
|
import { Input, Select, Button } from "@budibase/bbui"
|
||||||
export let user
|
export let user
|
||||||
</script>
|
</script>
|
||||||
|
@ -9,7 +11,7 @@
|
||||||
<option value="ADMIN">Admin</option>
|
<option value="ADMIN">Admin</option>
|
||||||
<option value="POWER_USER">Power User</option>
|
<option value="POWER_USER">Power User</option>
|
||||||
</Select>
|
</Select>
|
||||||
<Button on:click>Edit</Button>
|
<Button on:click={() => dispatch('save', user)}>Edit</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -25,6 +25,17 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Update user!
|
||||||
|
async function updateUser(event) {
|
||||||
|
const response = await api.put(`/api/users`, event.detail)
|
||||||
|
const users = await response.json()
|
||||||
|
backendUiStore.update(state => {
|
||||||
|
state.users = users
|
||||||
|
return state
|
||||||
|
})
|
||||||
|
fetchUsersPromise = fetchUsers()
|
||||||
|
}
|
||||||
|
|
||||||
// Get users
|
// Get users
|
||||||
async function fetchUsers() {
|
async function fetchUsers() {
|
||||||
const response = await api.get(`/api/users`)
|
const response = await api.get(`/api/users`)
|
||||||
|
@ -67,7 +78,7 @@
|
||||||
<ul>
|
<ul>
|
||||||
{#each users as user}
|
{#each users as user}
|
||||||
<li>
|
<li>
|
||||||
<UserRow {user} />
|
<UserRow {user} on:save={updateUser} />
|
||||||
</li>
|
</li>
|
||||||
{:else}
|
{:else}
|
||||||
<li>No Users found</li>
|
<li>No Users found</li>
|
||||||
|
@ -89,7 +100,7 @@
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 12px;
|
grid-gap: 12px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
background-color: var(--light-grey);
|
background-color: var(--grey-2);
|
||||||
padding: 12px 12px 18px 12px;
|
padding: 12px 12px 18px 12px;
|
||||||
}
|
}
|
||||||
.background.create {
|
.background.create {
|
||||||
|
|
Loading…
Reference in a new issue