lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

✨ sample layout for advanced search

Browse Source 
ref #12
This commit is contained in:
Philipp Dormann 2021-01-10 13:35:46 +01:00
parent 3754f09b2f
commit 5ec1dfa8b0
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Users.svelte
View File

@ -7,7 +7,7 @@
<section class="container p-5"> <section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight"> <span class="mb-1 text-3xl font-extrabold leading-tight">
Users {$_('users')}
<button <button
on:click={() => { on:click={() => {
modal_open = true; modal_open = true;

32
src/components/UsersOverview.svelte
View File

@ -8,6 +8,7 @@
import UsersEmptyState from "./UsersEmptyState.svelte"; import UsersEmptyState from "./UsersEmptyState.svelte";
$: searchvalue = ""; $: searchvalue = "";
$: userscache = []; $: userscache = [];
$: advanced_search = false;
usersstore.subscribe((val) => { usersstore.subscribe((val) => {
userscache = val; userscache = val;
}); });
@ -28,12 +29,26 @@
{#if userscache.length === 0} {#if userscache.length === 0}
<UsersEmptyState /> <UsersEmptyState />
{:else} {:else}
<input {#if advanced_search}
type="search" advanced search
bind:value={searchvalue} {:else}
placeholder={$_('datatable.search')} <input
aria-label={$_('datatable.search')} type="search"
class="gridjs-input gridjs-search-input mb-4" /> 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 <div
class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll"> class="shadow border-b border-gray-200 sm:rounded-lg overflow-x-scroll">
<table class="divide-y divide-gray-200 w-full"> <table class="divide-y divide-gray-200 w-full">
@ -61,7 +76,10 @@
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200">
{#each users as u} {#each users as u}
{#if Object.values(u).toString().toLowerCase().includes(searchvalue)} {#if Object.values(u)
.toString()
.toLowerCase()
.includes(searchvalue)}
<tr> <tr>
<td class="px-6 py-4 whitespace-nowrap"> <td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center"> <div class="flex items-center">