mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Fixing add remove for both stores on other pages.
This commit is contained in:
parent
9b60fc2671
commit
7fe85df58b
4 changed files with 47 additions and 105 deletions
|
|
@ -40,7 +40,6 @@
|
|||
}
|
||||
if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
|
||||
const collection = JSON.parse(localStorage.collection);
|
||||
console.log('collection', collection);
|
||||
if (collection?.length !== 0) {
|
||||
collectionStore.addAll(collection);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||
import Random from '$lib/components/random/index.svelte';
|
||||
import Pagination from '$lib/components/pagination/index.svelte';
|
||||
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
export let form: ActionData;
|
||||
|
|
@ -57,8 +58,8 @@
|
|||
detail: GameType | SavedGameType;
|
||||
}
|
||||
|
||||
function handleRemoveGame(event: RemoveGameEvent) {
|
||||
console.log('Base Page handle remove');
|
||||
function handleRemoveCollection(event: RemoveGameEvent) {
|
||||
console.log('Remove collection event handler');
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
|
|
@ -66,6 +67,16 @@
|
|||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
|
||||
function handleRemoveWishlist(event: RemoveGameEvent) {
|
||||
console.log('Remove wishlist event handler');
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -124,7 +135,12 @@
|
|||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
||||
<Game
|
||||
on:handleRemoveWishlist={handleRemoveWishlist}
|
||||
on:handleRemoveCollection={handleRemoveCollection}
|
||||
minimal
|
||||
{game}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
<!-- <Pagination
|
||||
|
|
@ -162,15 +178,20 @@
|
|||
|
||||
.games-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||
--listColumns: 4;
|
||||
grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr));
|
||||
gap: 2rem;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
--listColumns: 3;
|
||||
}
|
||||
|
||||
@media (max-width: 800px) {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
--listColumns: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 650px) {
|
||||
grid-template-columns: 1fr;
|
||||
--listColumns: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -120,99 +120,4 @@ export const actions: Actions = {
|
|||
totalCount: 0
|
||||
};
|
||||
}
|
||||
|
||||
// const id = form.get('id');
|
||||
// const ids = form.get('ids');
|
||||
// const minAge = form.get('minAge');
|
||||
// const minPlayers = form.get('minPlayers');
|
||||
// const maxPlayers = form.get('maxPlayers');
|
||||
// const exactMinAge = form.get('exactMinAge') || false;
|
||||
// const exactMinPlayers = form.get('exactMinPlayers') || false;
|
||||
// const exactMaxPlayers = form.get('exactMaxPlayers') || false;
|
||||
// const random = form.get('random') === 'on' || false;
|
||||
|
||||
// if (minAge) {
|
||||
// if (exactMinAge) {
|
||||
// queryParams.min_age = +minAge;
|
||||
// } else {
|
||||
// queryParams.gt_min_age = +minAge === 1 ? 0 : +minAge - 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (minPlayers) {
|
||||
// if (exactMinPlayers) {
|
||||
// queryParams.min_players = +minPlayers;
|
||||
// } else {
|
||||
// queryParams.gt_min_players = +minPlayers === 1 ? 0 : +minPlayers - 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (maxPlayers) {
|
||||
// if (exactMaxPlayers) {
|
||||
// queryParams.max_players = +maxPlayers;
|
||||
// } else {
|
||||
// queryParams.lt_max_players = +maxPlayers + 1;
|
||||
// }
|
||||
// }
|
||||
|
||||
// if (id) {
|
||||
// queryParams.ids = new Array(`${id}`);
|
||||
// }
|
||||
|
||||
// if (ids) {
|
||||
// // TODO: Pass in ids array from localstorage / game store
|
||||
// queryParams.ids = new Array(ids);
|
||||
// }
|
||||
|
||||
// queryParams.random = random;
|
||||
// console.log('queryParams', queryParams);
|
||||
|
||||
// const newQueryParams: Record<string, string> = {};
|
||||
// for (const key in queryParams) {
|
||||
// newQueryParams[key] = `${queryParams[key as keyof typeof queryParams]}`;
|
||||
// }
|
||||
|
||||
// const urlQueryParams = new URLSearchParams(newQueryParams);
|
||||
|
||||
// const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
|
||||
// }`;
|
||||
// const response = await fetch(url, {
|
||||
// method: 'get',
|
||||
// headers: {
|
||||
// 'content-type': 'application/json'
|
||||
// }
|
||||
// });
|
||||
// console.log('response status', response.status);
|
||||
// console.log('board game response action', response);
|
||||
// if (response.status === 404) {
|
||||
// // user hasn't created a todo list.
|
||||
// // start with an empty array
|
||||
// return {
|
||||
// success: true,
|
||||
// games: [],
|
||||
// totalCount: 0
|
||||
// };
|
||||
// }
|
||||
|
||||
// if (response.status === 200) {
|
||||
// const gameResponse = await response.json();
|
||||
// console.log('gameResponse', gameResponse);
|
||||
// const gameList = gameResponse?.games;
|
||||
// const games: GameType[] = [];
|
||||
// gameList.forEach((game: GameType) => {
|
||||
// games.push(mapAPIGameToBoredGame(game));
|
||||
// });
|
||||
// console.log('action games', games);
|
||||
// return {
|
||||
// games,
|
||||
// totalCount: games.length
|
||||
// };
|
||||
// }
|
||||
|
||||
// return { success: false };
|
||||
// }
|
||||
// create: async function create({ request, locals }): Promise<any> {
|
||||
// const data = await getFormDataObject<any>(request);
|
||||
// return data;
|
||||
// }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { toast } from '$root/lib/components/toast/toast';
|
||||
import RemoveWishlistDialog from '$root/lib/components/dialog/RemoveWishlistDialog.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
export let form: ActionData;
|
||||
|
|
@ -27,7 +28,8 @@
|
|||
detail: GameType | SavedGameType;
|
||||
}
|
||||
|
||||
function handleRemoveGame(event: RemoveGameEvent) {
|
||||
function handleRemoveCollection(event: RemoveGameEvent) {
|
||||
console.log('Remove collection event handler');
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
|
|
@ -35,6 +37,16 @@
|
|||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
|
||||
function handleRemoveWishlist(event: RemoveGameEvent) {
|
||||
console.log('Remove wishlist event handler');
|
||||
console.log('event', event);
|
||||
gameToRemove = event?.detail;
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
|
||||
}));
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="game-search">
|
||||
|
|
@ -53,7 +65,7 @@
|
|||
} else {
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(result?.data?.games);
|
||||
totalItems = result?.data?.totalCount;
|
||||
// totalItems = result?.data?.totalCount;
|
||||
console.log(`Frontend result: ${JSON.stringify(result)}`);
|
||||
toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
|
||||
await applyAction(result);
|
||||
|
|
@ -70,7 +82,12 @@
|
|||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
||||
<Game
|
||||
on:handleRemoveWishlist={handleRemoveWishlist}
|
||||
on:handleRemoveCollection={handleRemoveCollection}
|
||||
minimal
|
||||
{game}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue