enables front-end search of users
This commit is contained in:
parent
e7e249521b
commit
d4d8506fd5
2 changed files with 9 additions and 5 deletions
|
@ -5,7 +5,7 @@
|
||||||
Divider,
|
Divider,
|
||||||
Button,
|
Button,
|
||||||
ButtonGroup,
|
ButtonGroup,
|
||||||
Combobox,
|
Input,
|
||||||
Table,
|
Table,
|
||||||
Label,
|
Label,
|
||||||
Layout,
|
Layout,
|
||||||
|
@ -24,6 +24,9 @@
|
||||||
// group: {}
|
// group: {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let search
|
||||||
|
$: filteredUsers = $users.filter(user => user.email.includes(search || ""))
|
||||||
|
|
||||||
export let modal
|
export let modal
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -41,8 +44,8 @@
|
||||||
<div class="users">
|
<div class="users">
|
||||||
<Heading size="S">Users</Heading>
|
<Heading size="S">Users</Heading>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<Label>Search / filter</Label>
|
<Label size="L">Search / filter</Label>
|
||||||
<Combobox placeholder="" />
|
<Input bind:value={search} placeholder="" />
|
||||||
</div>
|
</div>
|
||||||
<div class="buttons">
|
<div class="buttons">
|
||||||
<ButtonGroup>
|
<ButtonGroup>
|
||||||
|
@ -52,7 +55,7 @@
|
||||||
</div>
|
</div>
|
||||||
<Table
|
<Table
|
||||||
{schema}
|
{schema}
|
||||||
data={$users}
|
data={filteredUsers || $users}
|
||||||
allowEditColumns={false}
|
allowEditColumns={false}
|
||||||
allowEditRows={false}
|
allowEditRows={false}
|
||||||
allowSelectRows={false}
|
allowSelectRows={false}
|
||||||
|
@ -68,6 +71,7 @@
|
||||||
}
|
}
|
||||||
.field {
|
.field {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
grid-gap: var(--spacing-m);
|
grid-gap: var(--spacing-m);
|
||||||
margin: var(--spacing-xl) 0;
|
margin: var(--spacing-xl) 0;
|
||||||
|
|
|
@ -2,7 +2,7 @@ import { writable } from "svelte/store"
|
||||||
import api from "builderStore/api"
|
import api from "builderStore/api"
|
||||||
|
|
||||||
export function createUsersStore() {
|
export function createUsersStore() {
|
||||||
const { subscribe, set } = writable({})
|
const { subscribe, set } = writable([])
|
||||||
|
|
||||||
async function init() {
|
async function init() {
|
||||||
try {
|
try {
|
||||||
|
|
Loading…
Reference in a new issue