From d4d8506fd5a92b27d0d1b610a1a63b56713ab893 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Fri, 7 May 2021 13:24:07 +0200
Subject: [PATCH] enables front-end search of users

---
 .../pages/builder/portal/manage/users/index.svelte   | 12 ++++++++----
 packages/builder/src/stores/portal/users.js          |  2 +-
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/builder/src/pages/builder/portal/manage/users/index.svelte b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
index 4d67dabc0c..4a8f92f29c 100644
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@@ -5,7 +5,7 @@
     Divider,
     Button,
     ButtonGroup,
-    Combobox,
+    Input,
     Table,
     Label,
     Layout,
@@ -24,6 +24,9 @@
     // group: {}
   }
 
+  let search
+  $: filteredUsers = $users.filter(user => user.email.includes(search || ""))
+
   export let modal
 </script>
 
@@ -41,8 +44,8 @@
   <div class="users">
     <Heading size="S">Users</Heading>
     <div class="field">
-      <Label>Search / filter</Label>
-      <Combobox placeholder="" />
+      <Label size="L">Search / filter</Label>
+      <Input bind:value={search} placeholder="" />
     </div>
     <div class="buttons">
       <ButtonGroup>
@@ -52,7 +55,7 @@
     </div>
     <Table
       {schema}
-      data={$users}
+      data={filteredUsers || $users}
       allowEditColumns={false}
       allowEditRows={false}
       allowSelectRows={false}
@@ -68,6 +71,7 @@
   }
   .field {
     display: flex;
+    align-items: center;
     flex-direction: row;
     grid-gap: var(--spacing-m);
     margin: var(--spacing-xl) 0;
diff --git a/packages/builder/src/stores/portal/users.js b/packages/builder/src/stores/portal/users.js
index 94b6474a68..c748ed9392 100644
--- a/packages/builder/src/stores/portal/users.js
+++ b/packages/builder/src/stores/portal/users.js
@@ -2,7 +2,7 @@ import { writable } from "svelte/store"
 import api from "builderStore/api"
 
 export function createUsersStore() {
-  const { subscribe, set } = writable({})
+  const { subscribe, set } = writable([])
 
   async function init() {
     try {