From 5ec1dfa8b0da4619f14e73794b9a9e22872aa330 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Sun, 10 Jan 2021 13:35:46 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20sample=20layout=20for=20advanced=20?=
 =?UTF-8?q?search?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ref #12
---
 src/components/Users.svelte         |  2 +-
 src/components/UsersOverview.svelte | 32 ++++++++++++++++++++++-------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/Users.svelte b/src/components/Users.svelte
index 8ad6bad4..945905b5 100644
--- a/src/components/Users.svelte
+++ b/src/components/Users.svelte
@@ -7,7 +7,7 @@
 
 <section class="container p-5">
   <span class="mb-1 text-3xl font-extrabold leading-tight">
-    Users
+    {$_('users')}
     <button
       on:click={() => {
         modal_open = true;
diff --git a/src/components/UsersOverview.svelte b/src/components/UsersOverview.svelte
index 3d266248..bd6ead27 100644
--- a/src/components/UsersOverview.svelte
+++ b/src/components/UsersOverview.svelte
@@ -8,6 +8,7 @@
   import UsersEmptyState from "./UsersEmptyState.svelte";
   $: searchvalue = "";
   $: userscache = [];
+  $: advanced_search = false;
   usersstore.subscribe((val) => {
     userscache = val;
   });
@@ -28,12 +29,26 @@
   {#if userscache.length === 0}
     <UsersEmptyState />
   {:else}
-    <input
-      type="search"
-      bind:value={searchvalue}
-      placeholder={$_('datatable.search')}
-      aria-label={$_('datatable.search')}
-      class="gridjs-input gridjs-search-input mb-4" />
+    {#if advanced_search}
+      advanced search
+    {:else}
+      <input
+        type="search"
+        bind:value={searchvalue}
+        placeholder={$_('datatable.search')}
+        aria-label={$_('datatable.search')}
+        class="gridjs-input gridjs-search-input mb-4" />
+    {/if}
+    <button
+      on:click={() => {
+        advanced_search = !advanced_search;
+      }}
+      type="button"
+      class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm">
+      {#if advanced_search}
+        toggle simple search
+      {:else}toggle advanced search{/if}
+    </button>
     <div
       class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
       <table class="divide-y divide-gray-200 w-full">
@@ -61,7 +76,10 @@
         </thead>
         <tbody class="divide-y divide-gray-200">
           {#each users as u}
-            {#if Object.values(u).toString().toLowerCase().includes(searchvalue)}
+            {#if Object.values(u)
+              .toString()
+              .toLowerCase()
+              .includes(searchvalue)}
               <tr>
                 <td class="px-6 py-4 whitespace-nowrap">
                   <div class="flex items-center">