forked from tsai/budibase
8 changed files with 17 additions and 170 deletions
@ -1,43 +0,0 @@ |
|||||
<script> |
|
||||
import { createEventDispatcher } from "svelte" |
|
||||
const dispatch = createEventDispatcher() |
|
||||
import { Input, Select, Button } from "@budibase/bbui" |
|
||||
export let user |
|
||||
|
|
||||
let editMode = false |
|
||||
</script> |
|
||||
|
|
||||
<div class="inputs"> |
|
||||
<Input |
|
||||
disabled |
|
||||
thin |
|
||||
bind:value={user.username} |
|
||||
name="Name" |
|
||||
placeholder="Username" /> |
|
||||
<Select disabled={!editMode} bind:value={user.accessLevelId} thin secondary> |
|
||||
<option value="">Choose an option</option> |
|
||||
<option value="ADMIN">Admin</option> |
|
||||
<option value="POWER_USER">Power User</option> |
|
||||
</Select> |
|
||||
{#if editMode} |
|
||||
<Button |
|
||||
blue |
|
||||
on:click={() => { |
|
||||
dispatch('save', user) |
|
||||
editMode = false |
|
||||
}}> |
|
||||
Save |
|
||||
</Button> |
|
||||
{:else} |
|
||||
<Button secondary on:click={() => (editMode = true)}>Edit</Button> |
|
||||
{/if} |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.inputs { |
|
||||
display: grid; |
|
||||
justify-items: stretch; |
|
||||
grid-gap: var(--spacing-m); |
|
||||
grid-template-columns: 1fr 1fr 140px; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,113 +0,0 @@ |
|||||
<script> |
|
||||
import { Input, Select, Button, Label } from "@budibase/bbui" |
|
||||
import UserRow from "../UserRow.svelte" |
|
||||
|
|
||||
import { store, backendUiStore } from "builderStore" |
|
||||
import api from "builderStore/api" |
|
||||
|
|
||||
let username = "" |
|
||||
let password = "" |
|
||||
let accessLevelId = "ADMIN" |
|
||||
|
|
||||
$: valid = username && password && accessLevelId |
|
||||
$: appId = $store.appId |
|
||||
|
|
||||
// Create user! |
|
||||
async function createUser() { |
|
||||
if (valid) { |
|
||||
const user = { name: username, username, password, accessLevelId } |
|
||||
const response = await api.post(`/api/users`, user) |
|
||||
const json = await response.json() |
|
||||
backendUiStore.actions.users.create(json) |
|
||||
fetchUsersPromise = fetchUsers() |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// Update user! |
|
||||
async function updateUser(event) { |
|
||||
let data = event.detail |
|
||||
delete data.password |
|
||||
const response = await api.put(`/api/users`, data) |
|
||||
const users = await response.json() |
|
||||
backendUiStore.update(state => { |
|
||||
state.users = users |
|
||||
return state |
|
||||
}) |
|
||||
fetchUsersPromise = fetchUsers() |
|
||||
} |
|
||||
|
|
||||
// Get users |
|
||||
async function fetchUsers() { |
|
||||
const response = await api.get(`/api/users`) |
|
||||
const users = await response.json() |
|
||||
backendUiStore.update(state => { |
|
||||
state.users = users |
|
||||
return state |
|
||||
}) |
|
||||
return users |
|
||||
} |
|
||||
|
|
||||
let fetchUsersPromise = fetchUsers() |
|
||||
</script> |
|
||||
|
|
||||
<div class="container"> |
|
||||
<div> |
|
||||
<Label extraSmall grey>Create New User</Label> |
|
||||
<div class="inputs"> |
|
||||
<Input thin bind:value={username} name="Name" placeholder="Username" /> |
|
||||
<Input |
|
||||
thin |
|
||||
type="password" |
|
||||
bind:value={password} |
|
||||
name="Password" |
|
||||
placeholder="Password" /> |
|
||||
<Select secondary bind:value={accessLevelId} thin> |
|
||||
<option value="">Choose an option</option> |
|
||||
<option value="ADMIN">Admin</option> |
|
||||
<option value="POWER_USER">Power User</option> |
|
||||
</Select> |
|
||||
<Button on:click={createUser} primary>Create</Button> |
|
||||
</div> |
|
||||
</div> |
|
||||
<div> |
|
||||
<Label extraSmall grey>Current Users</Label> |
|
||||
{#await fetchUsersPromise} |
|
||||
Loading... |
|
||||
{:then users} |
|
||||
<ul> |
|
||||
{#each users as user} |
|
||||
<li> |
|
||||
<UserRow {user} on:save={updateUser} /> |
|
||||
</li> |
|
||||
{:else} |
|
||||
<li>No Users found</li> |
|
||||
{/each} |
|
||||
</ul> |
|
||||
{:catch err} |
|
||||
Something went wrong when trying to fetch users. Please refresh (CMD + R / |
|
||||
CTRL + R) the page and try again. |
|
||||
{/await} |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
<style> |
|
||||
.container { |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-xl); |
|
||||
} |
|
||||
|
|
||||
.inputs { |
|
||||
display: grid; |
|
||||
justify-items: stretch; |
|
||||
grid-gap: var(--spacing-m); |
|
||||
grid-template-columns: 1fr 1fr 1fr 140px; |
|
||||
} |
|
||||
|
|
||||
ul { |
|
||||
list-style: none; |
|
||||
padding: 0; |
|
||||
display: grid; |
|
||||
grid-gap: var(--spacing-m); |
|
||||
margin: 0; |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue