BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Binding variable to the submit button of the form and in event handlers waiting for the DOM to update with tick.

Browse source
This commit is contained in:
Bradley Shellnut 2022-11-09 17:38:49 -06:00
parent 78c63b75d9
commit 67cd3b1747
4 changed files with 155 additions and 96 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/lib/components/pagination/index.svelte
View file

@ -48,9 +48,9 @@
<p>Per-page:</p> <p>Per-page:</p>
<Listbox <Listbox
class="list-box" class="list-box"
value={$boredState?.search?.pageSize || 10} value={pageSize || 10}
on:change={(e) => { on:change={(e) => {
dispatch('update', { pageSize: e.detail, page }); dispatch('perPageEvent', { pageSize: e.detail, page });
}} }}
let:open let:open
> >

187
src/lib/components/search/textSearch/index.svelte
View file

@ -1,13 +1,36 @@
<script lang="ts"> <script lang="ts">
import { tick } from 'svelte';
import type { ActionData, PageData } from './$types';
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui'; import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid'; import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte'; import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
import { applyAction, enhance } from '$app/forms';
import { gameStore } from '$root/lib/stores/gameSearchStore';
import { toast } from '../../toast/toast';
import Pagination from '$lib/components/pagination/index.svelte';
import { ToastType } from '$root/lib/types';
export let data: PageData;
console.log('search page data', data);
export let form: ActionData;
console.log('search page form', form);
export let showButton: boolean = false; export let showButton: boolean = false;
export let advancedSearch: boolean = false; export let advancedSearch: boolean = false;
export let form: ActionData; // export let form: ActionData;
let submitButton: HTMLElement;
let pageSize = 10;
console.log('Form data page', +form?.data?.page);
let page = +form?.data?.page || 1;
$: skip = (page - 1) * pageSize;
console.log({ skip });
let totalItems = form?.totalCount || data?.totalCount || 0;
console.log({ pageSize });
console.log({ page });
console.log({ totalItems });
$: console.log('submit button', submitButton);
let submitting = $boredState?.loading; let submitting = $boredState?.loading;
let name = form?.name || ''; let name = form?.name || '';
@ -15,52 +38,132 @@
if (form?.error) { if (form?.error) {
disclosureOpen = true; disclosureOpen = true;
} }
async function handleNextPageEvent(event: CustomEvent) {
console.log('Next page called', event.detail);
console.log('Current page: ', page);
if (+event?.detail?.page === page + 1) {
console.log('Page equals plus one');
page += 1;
}
// skip = (page - 1) * pageSize;
await tick();
console.log('New Page Value', page);
console.log('New Skip value', skip);
console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
submitButton.click();
}
async function handlePerPageEvent(event: CustomEvent) {
console.log('Per Page Event called', event.detail);
page = 1;
pageSize = event.detail.pageSize;
await tick();
console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
submitButton.click();
}
</script> </script>
<div class="search"> <form
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}> id="search-form"
<label for="name"> action="/search"
Search method="post"
<input use:enhance={({ data }) => {
id="name" gameStore.removeAll();
name="name" // data.append('limit', pageSize.toString());
bind:value={name} // data.append('skip', Math.floor(page * pageSize).toString());
type="text" boredState.update((n) => ({ ...n, loading: true }));
aria-label="Search boardgame" return async ({ result }) => {
placeholder="Search boardgame" boredState.update((n) => ({ ...n, loading: false }));
/> console.log(result);
</label> // `result` is an `ActionResult` object
</fieldset> if (result.type === 'error') {
{#if advancedSearch} toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
<Disclosure> await applyAction(result);
<DisclosureButton } else if (result.type === 'success') {
class="disclosure-button" gameStore.removeAll();
on:click={() => (disclosureOpen = !disclosureOpen)} gameStore.addAll(result?.data?.games);
> // totalItems = result?.data?.totalCount;
<span>Advanced Search?</span> console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
<ChevronRightIcon totalItems = result?.data?.totalCount;
class="icon disclosure-icon" // skip = result?.data?.skip || 0;
style={disclosureOpen // page = skip / pageSize || 0;
? 'transform: rotate(90deg); transition: transform 0.5s ease;' // console.log('enhance', page, skip, totalItems);
: 'transform: rotate(0deg); transition: transform 0.5s ease;'} toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
await applyAction(result);
} else {
await applyAction(result);
}
};
}}
>
<input id="skip" type="hidden" name="skip" bind:value={skip} />
<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
<div class="search">
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
<label for="name">
Search
<input
id="name"
name="name"
bind:value={name}
type="text"
aria-label="Search boardgame"
placeholder="Search boardgame"
/> />
</DisclosureButton> </label>
</fieldset>
{#if advancedSearch}
<Disclosure>
<DisclosureButton
class="disclosure-button"
on:click={() => (disclosureOpen = !disclosureOpen)}
>
<span>Advanced Search?</span>
<ChevronRightIcon
class="icon disclosure-icon"
style={disclosureOpen
? 'transform: rotate(90deg); transition: transform 0.5s ease;'
: 'transform: rotate(0deg); transition: transform 0.5s ease;'}
/>
</DisclosureButton>
{#if disclosureOpen} {#if disclosureOpen}
<div transition:fade> <div transition:fade>
<!-- Using `static`, `DisclosurePanel` is always rendered, <!-- Using `static`, `DisclosurePanel` is always rendered,
and ignores the `open` state --> and ignores the `open` state -->
<DisclosurePanel static> <DisclosurePanel static>
<AdvancedSearch {form} /> <AdvancedSearch {form} />
</DisclosurePanel> </DisclosurePanel>
</div> </div>
{/if} {/if}
</Disclosure> </Disclosure>
{/if} {/if}
</div> </div>
{#if showButton} <!-- {#if showButton} -->
<button id="search-submit" class="btn" type="submit" disabled={submitting}>Submit</button> <button
{/if} id="search-submit"
class="btn"
type="submit"
disabled={submitting}
bind:this={submitButton}
>
Submit
</button>
<!-- {/if} -->
</form>
<Pagination
{pageSize}
{page}
{totalItems}
forwardText="Next"
backwardText="Prev"
pageSizes={[10, 25, 50, 100]}
on:nextPageEvent={handleNextPageEvent}
on:previousPageEvent={(event) => console.log('Prev page called', event)}
on:perPageEvent={handlePerPageEvent}
/>
<style lang="scss"> <style lang="scss">
.search { .search {

3
src/routes/+page.svelte
View file

@ -17,6 +17,7 @@
export let data: PageData; export let data: PageData;
export let form: ActionData; export let form: ActionData;
let submitButton: HTMLElement;
console.log('form routesss', form); console.log('form routesss', form);
console.log('Formed data:', JSON.stringify(data)); console.log('Formed data:', JSON.stringify(data));
@ -118,7 +119,7 @@
}; };
}} }}
> >
<TextSearch showButton advancedSearch {form} /> <TextSearch showButton advancedSearch {submitButton} {form} />
</form> </form>
<section> <section>
<p>Or pick a random game!</p> <p>Or pick a random game!</p>

57
src/routes/search/+page.svelte
View file

@ -28,6 +28,7 @@
console.log({ totalItems }); console.log({ totalItems });
let submitting = $boredState?.loading; let submitting = $boredState?.loading;
let numberOfGameSkeleton = 1; let numberOfGameSkeleton = 1;
let submitButton: HTMLElement;
console.log('Search page total count: ', totalItems); console.log('Search page total count: ', totalItems);
$: if (data?.games) { $: if (data?.games) {
@ -73,53 +74,18 @@
} }
console.log('New page value: ', page); console.log('New page value: ', page);
console.log('New skip value: ', skip); console.log('New skip value: ', skip);
document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`); // document.getElementById('skip')?.setAttribute('value', `${page * pageSize}`);
console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value')); console.log('New skip value DOM: ', document.getElementById('skip')?.getAttribute('value'));
document.getElementById('search-submit')?.click(); submitButton.click();
// document.getElementById('search-submit')?.click();
} }
</script> </script>
<div class="game-search"> <div class="game-search">
{skip} <TextSearch showButton advancedSearch />
<form
id="search-form"
action="/search"
method="post"
use:enhance={({ data }) => {
gameStore.removeAll();
// data.append('limit', pageSize.toString());
// data.append('skip', Math.floor(page * pageSize).toString());
boredState.update((n) => ({ ...n, loading: true }));
return async ({ result }) => {
boredState.update((n) => ({ ...n, loading: false }));
console.log(result);
// `result` is an `ActionResult` object
if (result.type === 'error') {
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
await applyAction(result);
} else if (result.type === 'success') {
gameStore.removeAll();
gameStore.addAll(result?.data?.games);
// totalItems = result?.data?.totalCount;
console.log(`Frontend result search enhance: ${JSON.stringify(result)}`);
totalItems = result?.data?.totalCount;
// skip = result?.data?.skip || 0;
// page = skip / pageSize || 0;
// console.log('enhance', page, skip, totalItems);
toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
await applyAction(result);
} else {
await applyAction(result);
}
};
}}
>
<input id="skip" type="hidden" name="skip" value={skip} />
<input id="limit" type="hidden" name="limit" value={pageSize} />
<TextSearch showButton advancedSearch {form} />
</form>
</div> </div>
{`Length: ${$gameStore?.length}`}
{#if $gameStore?.length > 0} {#if $gameStore?.length > 0}
<div class="games"> <div class="games">
<h1>Games Found:</h1> <h1>Games Found:</h1>
@ -132,17 +98,6 @@
/> />
{/each} {/each}
</div> </div>
<Pagination
{pageSize}
{page}
{totalItems}
forwardText="Next"
backwardText="Prev"
pageSizes={[10, 25, 50, 100]}
on:nextPageEvent={handleNextPageEvent}
on:previousPageEvent={(event) => console.log('Prev page called', event)}
on:perPageEvent={(event) => console.log('Per page called', event)}
/>
</div> </div>
{:else if form && form?.status && form.status !== 200} {:else if form && form?.status && form.status !== 200}
<h1>There was an error searching for games!</h1> <h1>There was an error searching for games!</h1>