mirror of
https://github.com/seanmorley15/AdventureLog.git
synced 2025-07-19 12:59:36 +02:00
better filters
This commit is contained in:
Sean Morley
parent
44cad30528
commit
77c11fefea
2 changed files with 41 additions and 215 deletions
|
|
@ -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
|
||||
// };
|
||||
// }
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
/>
|
||||
</label>
|
||||
<label class="label cursor-pointer">
|
||||
|
|
@ -236,7 +255,7 @@
|
|||
id="planned"
|
||||
name="planned"
|
||||
class="checkbox checkbox-primary"
|
||||
checked
|
||||
checked={currentSort.planned}
|
||||
/>
|
||||
</label>
|
||||
<!-- <div class="divider"></div> -->
|
||||
|
|
@ -250,7 +269,7 @@
|
|||
id="asc"
|
||||
value="asc"
|
||||
aria-label="Ascending"
|
||||
checked
|
||||
checked={currentSort.order === 'asc'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
|
|
@ -259,6 +278,7 @@
|
|||
id="desc"
|
||||
value="desc"
|
||||
aria-label="Descending"
|
||||
checked={currentSort.order === 'desc'}
|
||||
/>
|
||||
</div>
|
||||
<br />
|
||||
|
|
@ -271,7 +291,7 @@
|
|||
id="updated_at"
|
||||
value="updated_at"
|
||||
aria-label="Updated"
|
||||
checked
|
||||
checked={currentSort.order_by === 'updated_at'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
|
|
@ -280,6 +300,7 @@
|
|||
id="name"
|
||||
aria-label="Name"
|
||||
value="name"
|
||||
checked={currentSort.order_by === 'name'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
|
|
@ -288,6 +309,7 @@
|
|||
name="order_by"
|
||||
id="date"
|
||||
aria-label="Date"
|
||||
checked={currentSort.order_by === 'date'}
|
||||
/>
|
||||
<input
|
||||
class="join-item btn btn-neutral"
|
||||
|
|
@ -296,6 +318,7 @@
|
|||
id="rating"
|
||||
aria-label="Rating"
|
||||
value="rating"
|
||||
checked={currentSort.order_by === 'rating'}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -308,6 +331,7 @@
|
|||
name="include_collections"
|
||||
id="include_collections"
|
||||
class="checkbox checkbox-primary"
|
||||
checked={currentSort.includeCollections}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit" class="btn btn-success mt-4">Filter</button>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue