From 77c11fefeacd7aea5fa060fb620b673493b63dbc Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Mon, 5 Aug 2024 09:59:34 -0400 Subject: [PATCH] better filters --- .../src/routes/adventures/+page.server.ts | 198 ------------------ frontend/src/routes/adventures/+page.svelte | 58 +++-- 2 files changed, 41 insertions(+), 215 deletions(-) diff --git a/frontend/src/routes/adventures/+page.server.ts b/frontend/src/routes/adventures/+page.server.ts index db019cf7..1b0edcf2 100644 --- a/frontend/src/routes/adventures/+page.server.ts +++ b/frontend/src/routes/adventures/+page.server.ts @@ -403,202 +403,4 @@ export const actions: Actions = { let link_url = adventure.link; return { image_url, link_url }; } - // get: async (event) => { - // if (!event.locals.user) { - // } - - // const formData = await event.request.formData(); - // const visited = formData.get('visited'); - // const planned = formData.get('planned'); - - // let include_collections = formData.get('include_collections') as string; - - // if (include_collections) { - // include_collections = 'true'; - // } else { - // include_collections = 'false'; - // } - - // const order_direction = formData.get('order_direction') as string; - // const order_by = formData.get('order_by') as string; - - // console.log(order_direction, order_by); - - // let adventures: Adventure[] = []; - - // if (!event.locals.user) { - // return { - // status: 401, - // body: { message: 'Unauthorized' } - // }; - // } - - // let filterString = ''; - // if (visited) { - // filterString += 'visited'; - // } - // if (planned) { - // if (filterString) { - // filterString += ','; - // } - // filterString += 'planned'; - // } - // if (!filterString) { - // filterString = ''; - // } - - // let next = null; - // let previous = null; - // let count = 0; - - // console.log(filterString); - - // let visitedFetch = await fetch( - // `${serverEndpoint}/api/adventures/filtered?types=${filterString}&order_by=${order_by}&order_direction=${order_direction}&include_collections=${include_collections}`, - // { - // headers: { - // Cookie: `${event.cookies.get('auth')}` - // } - // } - // ); - // if (!visitedFetch.ok) { - // console.error('Failed to fetch visited adventures'); - // return redirect(302, '/login'); - // } else { - // let res = await visitedFetch.json(); - // let visited = res.results as Adventure[]; - // next = res.next; - // previous = res.previous; - // count = res.count; - // adventures = [...adventures, ...visited]; - // console.log(next, previous, count); - // } - - // return { - // adventures, - // next, - // previous, - // count - // }; - // }, - // changePage: async (event) => { - // const formData = await event.request.formData(); - // const next = formData.get('next') as string; - // const previous = formData.get('previous') as string; - // const page = formData.get('page') as string; - - // if (!event.locals.user) { - // return { - // status: 401, - // body: { message: 'Unauthorized' } - // }; - // } - - // if (!page) { - // return { - // status: 400, - // body: { error: 'Missing required fields' } - // }; - // } - - // // Start with the provided URL or default to the filtered adventures endpoint - // let url: string = next || previous || '/api/adventures/filtered'; - - // // Extract the path starting from '/api/adventures' - // const apiIndex = url.indexOf('/api/adventures'); - // if (apiIndex !== -1) { - // url = url.slice(apiIndex); - // } else { - // url = '/api/adventures/filtered'; - // } - - // // Replace or add the page number in the URL - // if (url.includes('page=')) { - // url = url.replace(/page=\d+/, `page=${page}`); - // } else { - // // If 'page=' is not in the URL, add it - // url += url.includes('?') ? '&' : '?'; - // url += `page=${page}`; - // } - - // const fullUrl = `${serverEndpoint}${url}`; - // console.log(fullUrl); - // console.log(serverEndpoint); - - // try { - // const response = await fetch(fullUrl, { - // headers: { - // 'Content-Type': 'application/json', - // Cookie: `${event.cookies.get('auth')}` - // } - // }); - - // if (!response.ok) { - // throw new Error(`HTTP error! status: ${response.status}`); - // } - // const data = await response.json(); - // let adventures = data.results as Adventure[]; - // let next = data.next; - // let previous = data.previous; - // let count = data.count; - - // return { - // status: 200, - // body: { - // adventures, - // next, - // previous, - // count, - // page - // } - // }; - // } catch (error) { - // console.error('Error fetching data:', error); - // return { - // status: 500, - // body: { error: 'Failed to fetch data' } - // }; - // } - // }, - // all: async (event) => { - // if (!event.locals.user) { - // return { - // status: 401, - // body: { message: 'Unauthorized' } - // }; - // } - - // const formData = await event.request.formData(); - - // let include_collections = formData.get('include_collections') as string; - - // if (include_collections !== 'true' && include_collections !== 'false') { - // include_collections = 'false'; - // } - - // let adventures: Adventure[] = []; - - // let visitedFetch = await fetch( - // `${serverEndpoint}/api/adventures/all/?include_collections=${include_collections}`, - // { - // headers: { - // Cookie: `${event.cookies.get('auth')}`, - // 'Content-Type': 'application/json' - // } - // } - // ); - // if (!visitedFetch.ok) { - // console.error('Failed to fetch all adventures'); - // return redirect(302, '/login'); - // } else { - // console.log('Fetched all adventures'); - // let res = await visitedFetch.json(); - // console.log(res); - // adventures = res as Adventure[]; - // } - - // return { - // adventures - // }; - // } }; diff --git a/frontend/src/routes/adventures/+page.svelte b/frontend/src/routes/adventures/+page.svelte index 192bd58d..5bd6a99b 100644 --- a/frontend/src/routes/adventures/+page.svelte +++ b/frontend/src/routes/adventures/+page.svelte @@ -15,15 +15,19 @@ let adventures: Adventure[] = data.props.adventures || []; - let currentSort = { attribute: 'name', order: 'asc' }; + let currentSort = { + order_by: '', + order: '', + visited: true, + planned: true, + includeCollections: true + }; let isShowingCreateModal: boolean = false; let newType: string = ''; let resultsPerPage: number = 25; - // let next: string | null = data.props.next || null; - // let previous: string | null = data.props.previous || null; let count = data.props.count || 0; let totalPages = Math.ceil(count / resultsPerPage); let currentPage: number = 1; @@ -40,7 +44,7 @@ url.searchParams.set('page', pageNumber.toString()); adventures = []; adventures = data.props.adventures; - console.log(adventures); + goto(url.toString(), { invalidateAll: true, replaceState: true }); // goto(`?${query.toString()}`, { invalidateAll: true }); @@ -64,15 +68,30 @@ } } - function sort({ attribute, order }: { attribute: string; order: string }) { - currentSort.attribute = attribute; - currentSort.order = order; - if (attribute === 'name') { - if (order === 'asc') { - adventures = adventures.sort((a, b) => b.name.localeCompare(a.name)); - } else { - adventures = adventures.sort((a, b) => a.name.localeCompare(b.name)); - } + $: { + let url = new URL($page.url); + currentSort.order_by = url.searchParams.get('order_by') || 'updated_at'; + currentSort.order = url.searchParams.get('order_direction') || 'asc'; + + if (url.searchParams.get('planned') === 'on') { + currentSort.planned = true; + } else { + currentSort.planned = false; + } + if (url.searchParams.get('visited') === 'on') { + currentSort.visited = true; + } else { + currentSort.visited = false; + } + if (url.searchParams.get('include_collections') === 'on') { + currentSort.includeCollections = true; + } else { + currentSort.includeCollections = false; + } + + if (!currentSort.visited && !currentSort.planned) { + currentSort.visited = true; + currentSort.planned = true; } } @@ -226,7 +245,7 @@ name="visited" id="visited" class="checkbox checkbox-primary" - checked + checked={currentSort.visited} /> @@ -250,7 +269,7 @@ id="asc" value="asc" aria-label="Ascending" - checked + checked={currentSort.order === 'asc'} />
@@ -271,7 +291,7 @@ id="updated_at" value="updated_at" aria-label="Updated" - checked + checked={currentSort.order_by === 'updated_at'} /> @@ -308,6 +331,7 @@ name="include_collections" id="include_collections" class="checkbox checkbox-primary" + checked={currentSort.includeCollections} />