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

Adding server side validations.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-25 22:19:30 -04:00
parent 503b4d9e6d
commit a8ed73ebc0
4 changed files with 151 additions and 158 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
src/lib/components/search/advancedSearch/index.svelte
View file

@ -1,82 +1,86 @@
<script lang="ts"> <script lang="ts">
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
let submitting = $boredState?.loading; export let form: ActionData;
let minAge = 1; console.log('form', form);
let minPlayers = 1; let submitting = $boredState?.loading;
let maxPlayers = 1; let minAge = 1;
let exactMinPlayers = false; let minPlayers = 1;
let exactMaxPlayers = false; let maxPlayers = 1;
let exactMinPlayers = false;
let exactMaxPlayers = false;
</script> </script>
<!-- <form on:submit|preventDefault={handleSubmit} method="post"> -->
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}> <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
<div> <div>
<label for="minAge"> <label for="minAge">
Min Age Min Age
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} /> <input id="minAge" name="minAge" bind:value={minAge} type="number" min="1" max="120" />
</label> </label>
</div> </div>
<div> <div>
<label for="minPlayers"> <label for="minPlayers">
Min Players Min Players
<input <input
id="minPlayers" id="minPlayers"
name="minPlayers" name="minPlayers"
bind:value={minPlayers} bind:value={minPlayers}
type="number" type="number"
min={0} min="1"
max={50} max="50"
/> />
</label> </label>
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;"> <label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
<span>Exact?</span> <span>Exact?</span>
<input <input
id="exactMinPlayers" id="exactMinPlayers"
type="checkbox" type="checkbox"
name="exactMinPlayers" name="exactMinPlayers"
bind:checked={exactMinPlayers} bind:checked={exactMinPlayers}
/> />
</label> </label>
</div> {#if form?.error?.id === 'minPlayers'}
<div> {form.error.message}
<label for="maxPlayers"> {/if}
Max Players </div>
<input <div>
id="maxPlayers" <label for="maxPlayers">
name="maxPlayers" Max Players
bind:value={maxPlayers} <input
type="number" id="maxPlayers"
min={0} name="maxPlayers"
max={50} bind:value={maxPlayers}
/> type="number"
</label> min="1"
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;"> max="50"
<span>Exact?</span> />
<input </label>
id="exactMaxPlayers" <label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
type="checkbox" <span>Exact?</span>
name="exactMaxPlayers" <input
bind:checked={exactMaxPlayers} id="exactMaxPlayers"
/> type="checkbox"
</label> name="exactMaxPlayers"
</div> bind:checked={exactMaxPlayers}
/>
</label>
</div>
</fieldset> </fieldset>
<!-- <button type="submit" disabled={submitting}>Submit</button> --> <!-- <button type="submit" disabled={submitting}>Submit</button> -->
<!-- </form> --> <!-- </form> -->
<style lang="scss"> <style lang="scss">
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
@media (max-width: 800px) { @media (max-width: 800px) {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
} }
label { label {
display: grid; display: grid;
margin: 1rem; margin: 1rem;
} }
</style> </style>

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

@ -1,88 +1,88 @@
<script lang="ts"> <script lang="ts">
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';
export let showButton: boolean = false; export let showButton: boolean = false;
export let advancedSearch: boolean = false; export let advancedSearch: boolean = false;
export let form: ActionData;
let submitting = $boredState?.loading; let submitting = $boredState?.loading;
let name = ''; let name = '';
</script> </script>
<!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
<div class="search"> <div class="search">
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}> <fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
<label for="name"> <label for="name">
Search Search
<input <input
id="name" id="name"
name="name" name="name"
bind:value={name} bind:value={name}
type="text" type="text"
aria-label="Search boardgame" aria-label="Search boardgame"
placeholder="Search boardgame" placeholder="Search boardgame"
/> />
</label> </label>
</fieldset> </fieldset>
{#if advancedSearch} {#if advancedSearch}
<Disclosure let:open> <Disclosure let:open>
<DisclosureButton class="disclosure-button"> <DisclosureButton class="disclosure-button">
<span>Advanced Search?</span> <span>Advanced Search?</span>
<ChevronRightIcon <ChevronRightIcon
class="icon disclosure-icon" class="icon disclosure-icon"
style={open style={open
? 'transform: rotate(90deg); transition: transform 0.5s ease;' ? 'transform: rotate(90deg); transition: transform 0.5s ease;'
: 'transform: rotate(0deg); transition: transform 0.5s ease;'} : 'transform: rotate(0deg); transition: transform 0.5s ease;'}
/> />
</DisclosureButton> </DisclosureButton>
{#if open} {#if open}
<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 /> <AdvancedSearch form />
</DisclosurePanel> </DisclosurePanel>
</div> </div>
{/if} {/if}
</Disclosure> </Disclosure>
{/if} {/if}
</div> </div>
{#if showButton} {#if showButton}
<button class="btn" type="submit" disabled={submitting}>Submit</button> <button class="btn" type="submit" disabled={submitting}>Submit</button>
{/if} {/if}
<!-- </form> --> <!-- </form> -->
<style lang="scss"> <style lang="scss">
.search { .search {
display: grid; display: grid;
gap: 1rem; gap: 1rem;
} }
:global(.disclosure-button) { :global(.disclosure-button) {
display: flex; display: flex;
gap: 0.25rem; gap: 0.25rem;
place-items: center; place-items: center;
} }
button { button {
padding: 1rem; padding: 1rem;
margin: 1.5rem 0; margin: 1.5rem 0;
} }
label { label {
display: grid; display: grid;
grid-template-columns: auto auto; grid-template-columns: auto auto;
gap: 1rem; gap: 1rem;
place-content: start; place-content: start;
place-items: center; place-items: center;
@media (max-width: 850px) { @media (max-width: 850px) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
</style> </style>

20
src/routes/+page.svelte
View file

@ -14,28 +14,13 @@
export let data: PageData; export let data: PageData;
export let form: ActionData; export let form: ActionData;
console.log('form routesss', form);
console.log('Formed data:', JSON.stringify(data)); console.log('Formed data:', JSON.stringify(data));
let pageSize: number; let pageSize: number;
let currentPage: number; let currentPage: number;
$: totalItems = 0; $: totalItems = 0;
console.log('totalItems', totalItems); console.log('totalItems', totalItems);
async function handleSearch(event: SubmitEvent) {
boredState.update((n) => ({ ...n, loading: true }));
const form = event.target as HTMLFormElement;
console.log('form', form);
const response = await fetch('/api/game', {
method: 'POST',
headers: { accept: 'application/json' },
body: new FormData(form)
});
const responseData = await response.json();
boredState.update((n) => ({ ...n, loading: false }));
gameStore.removeAll();
gameStore.addAll(responseData?.games);
totalItems = responseData?.totalCount;
}
// async function handleItemsPerPageChange(event) { // async function handleItemsPerPageChange(event) {
// const perPage = event?.detail; // const perPage = event?.detail;
// if ($gameStore.length ) // if ($gameStore.length )
@ -113,11 +98,12 @@
await applyAction(result); await applyAction(result);
} else { } else {
console.log('Invalid'); console.log('Invalid');
await applyAction(result);
} }
}; };
}} }}
> >
<TextSearch showButton advancedSearch /> <TextSearch showButton advancedSearch {form} />
</form> </form>
<section> <section>
<p>Or pick a random game!</p> <p>Or pick a random game!</p>

9
src/routes/search/+page.server.ts
View file

@ -44,15 +44,18 @@ export const actions: Actions = {
} }
} }
if (minPlayers) { if (minPlayers && maxPlayers) {
if (minPlayers > maxPlayers) {
return invalid(400, { minPlayers, error: { id: 'minPlayers', message: 'Min must be less than max' } });
} else if (maxPlayers < minPlayers) {
return invalid(400, { maxPlayers, error: { id: 'maxPlayers', message: 'Max must be greater than min' } });
}
if (exactMinPlayers) { if (exactMinPlayers) {
queryParams.min_players = +minPlayers; queryParams.min_players = +minPlayers;
} else { } else {
queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1; queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
} }
}
if (maxPlayers) {
if (exactMaxPlayers) { if (exactMaxPlayers) {
queryParams.max_players = +maxPlayers; queryParams.max_players = +maxPlayers;
} else { } else {