Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

42 Add button to show picked items in list #61

Merged
merged 6 commits into from
May 17, 2023
Merged

42 Add button to show picked items in list #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f3afc9c
Add button to show picked items
brokelyn May 11, 2023
25a6c49
Update item query to fetch all items
brokelyn May 11, 2023
dbd705b
Merge branch 'dev' into 42-add-a-button-to-show-all-hidden-items
brokelyn May 11, 2023
a3b0752
Update item query with picked parameter
brokelyn May 17, 2023
5b877e7
Update query params to fetch picked items
brokelyn May 17, 2023
2c17b68
Remove console output
brokelyn May 17, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 35 additions & 29 deletions src/lib/components/Item.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,51 +7,57 @@
export let newCategoryId: string | null;
</script>

<div class="border-b-2 last:border-0 border-secondary rounded-sm px-2 mt-1">
<div
class="border-b-2 last:border-0 border-secondary rounded-sm px-2 mt-1
{item.picked && 'opacity-50'}"
>
<div class="flex flex-row justify-between items-center">
<form action="?/pickItem" method="POST" use:enhance>
<button class="flex gap-4 py-2">
<div class="w-4 text-right text-gray-700">{item.quantity}</div>
<div
class="text-gray-700 text-left font-semibold w-[calc(100vw-190px)] sm:w-[360px] truncate whitespace-nowrap"
class="text-gray-700 text-left font-semibold w-[calc(100vw-190px)] sm:w-[360px] truncate whitespace-nowrap
{item.picked && 'line-through'}"
>
{item.name}
</div>
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="picked" value={true} />
<input type="hidden" name="picked" value={!item.picked} />
</form>

<div class="flex gap-2">
<form action="?/decreaseItem" method="POST" use:enhance>
<button
class=" text-gray-700 font-semibold px-2 disabled:opacity-30 border-2 border-primary rounded"
disabled={item.quantity <= 1}
>
-
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="quantity" value={item.quantity - 1} />
</form>
<form action="?/increaseItem" method="POST" use:enhance>
<button class="text-gray-700 font-semibold px-2 border-2 border-primary rounded">
+
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="quantity" value={item.quantity + 1} />
</form>
{#if $isPlanModeActive}
<form action="?/setCategory" method="POST" use:enhance>
{#if !item.picked}
<div class="flex gap-2">
<form action="?/decreaseItem" method="POST" use:enhance>
<button
class="text-gray-700 font-semibold px-2 disabled:opacity-30 border-2 border-primary rounded"
disabled={!newCategoryId}
class=" text-gray-700 font-semibold px-2 disabled:opacity-30 border-2 border-primary rounded"
disabled={item.quantity <= 1}
>
🔀
-
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="quantity" value={item.quantity - 1} />
</form>
<form action="?/increaseItem" method="POST" use:enhance>
<button class="text-gray-700 font-semibold px-2 border-2 border-primary rounded">
+
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="category" value={newCategoryId} />
<input type="hidden" name="quantity" value={item.quantity + 1} />
</form>
{/if}
</div>
{#if $isPlanModeActive}
<form action="?/setCategory" method="POST" use:enhance>
<button
class="text-gray-700 font-semibold px-2 disabled:opacity-30 border-2 border-primary rounded"
disabled={!newCategoryId}
>
🔀
</button>
<input type="hidden" name="id" value={item.id} />
<input type="hidden" name="category" value={newCategoryId} />
</form>
{/if}
</div>
{/if}
</div>
</div>
6 changes: 3 additions & 3 deletions src/lib/pocketbase.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ export const pb = new PocketBase(PUBLIC_POCKETBASE_URL);

export const currentUser = writable(pb.authStore.model);

export async function getItemsInListQuery(listId: string) {
const { items } = await pb.collection('items').getList<Item>(1, 100, {
filter: `created >= "2022-01-01 00:00:00" && picked = false && list = "${listId}"`
export async function getItemsInListQuery(listId: string, picked: boolean = false) {
const items = await pb.collection('items').getFullList<Item>({
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you had a look at if that's not gonna become pretty big and slow quite soon too? I think the app refreshes the list of unpicked items fairly often but if we query ALL the items every time that's gonne be slow right? maybe it should be two different queries after all?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

then we should not fetch the list so often maybe? I thought it would not be fetched that often. I will check how often that is :D
otherwise that are not too many items/kilobytes even if you have a 1000 items.

In addition if we dont allow duplication like in #60 it should be even less

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The list is fetched on every change (i think) because we haven't gotten to a local state yet. This is also noticable in #36 so querying ALL items would (for now) make this problem even worse. I also dont see what's the real argument against having two queries, they have different uses and are not duplicating themselves, no??

filter: `created >= "2022-01-01 00:00:00" && list = "${listId}" && picked = ${picked}`
});
return items.map((item) => {
return {
Expand Down
30 changes: 10 additions & 20 deletions src/routes/lists/[listId]/+page.server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
} from '$lib/pocketbase';
import type { Actions } from './$types';

export const load = ({ params }) => {
export const load = ({ params, url }) => {
const getList = async (listId: string) => {
try {
return await getListQuery(listId);
Expand All @@ -23,9 +23,9 @@ export const load = ({ params }) => {
throw err;
}
};
const getItems = async (listId: string) => {
const getItems = async (listId: string, showPicked: boolean) => {
try {
return await getItemsInListQuery(listId);
return await getItemsInListQuery(listId, showPicked);
} catch (err) {
console.error(err);
throw err;
Expand All @@ -40,29 +40,19 @@ export const load = ({ params }) => {
}
};


const listId = params.listId;
const showPicked = url.searchParams.get('showPicked') === 'true' || false;

return {
list: getList(params.listId),
list: getList(listId),
categories: getCategories(),
items: getItems(params.listId),
items: getItems(listId, showPicked),
templates: getTemplates()
};
};

export const actions: Actions = {
updateItem: async ({ locals, request }) => {
const values = await request.formData();
const id = String(values.get('id'));
const quantity = Number(values.get('quantity'));
const picked = Boolean(values.has('picked'));

try {
await locals.pb.collection('items').update(id, { quantity, picked });
} catch (e) {
console.error(e);
throw e;
}
return { success: true };
},
setCategory: async ({ locals, request }) => {
const values = await request.formData();
const id = String(values.get('id'));
Expand All @@ -78,7 +68,7 @@ export const actions: Actions = {
pickItem: async ({ locals, request }) => {
const values = await request.formData();
const id = String(values.get('id'));
const picked = Boolean(values.has('picked'));
const picked = String(values.get('picked')) === "true";

try {
await locals.pb.collection('items').update(id, { picked });
Expand Down
36 changes: 27 additions & 9 deletions src/routes/lists/[listId]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { pb } from '$lib/pocketbase';
import Button from '$lib/components/Button.svelte';
import { isPlanModeActive } from '$lib/stores/mode';
import { page } from '$app/stores';

export let data: PageData;
export let form: ActionData;
Expand All @@ -16,6 +17,12 @@
let newCategoryName = '';
let showNewCategoryModal = false;
let newItemName = '';
let showPicked = false;
let items = data.items;

$: items = data.items;

$: showPicked = $page.url.searchParams.get('showPicked') === 'true' || false;

$: if (form?.success && form?.action === 'createCategory') {
setNewItemCategoryId(form?.id);
Expand Down Expand Up @@ -71,36 +78,47 @@
{/if}
</div>

<a href={`/lists/${data.list.id}/edit`} class="w-20">
<Button text="Edit list" backgroundColor="secondary" textStyle="small" />
</a>
<div class="flex gap-2">
<div class="w-20">
<a href={`/lists/${data.list.id}?showPicked=${!showPicked}`} class="w-20">
<Button
text={showPicked ? 'Hide' : 'Show'}
backgroundColor="secondary"
textStyle="small"
/>
</a>
</div>
<a href={`/lists/${data.list.id}/edit`} class="w-20">
<Button text="Edit list" backgroundColor="secondary" textStyle="small" />
</a>
</div>
</div>

<div class="flex flex-col pb-4 overscroll-contain px-4 mb-40">
<div>
{#if data.items.length === 0}
{#if items.length === 0}
<div class="text-center mt-20">
<p>Good job!</p>
<p>Now get yourself some ice cream 🍦</p>
</div>
{:else}
{#each data.categories as cat}
{#if data.items.filter((i) => i.category === cat.id).length > 0}
{#if items.filter((i) => i.category === cat.id).length > 0}
<div class="text-lg mt-6 first:mt-2 border-primary border-b-4 text-primary font-semibold">
<p>{cat.name}</p>
</div>
{#each data.items.filter((i) => i.category === cat.id) as item}
{#each items.filter((i) => i.category === cat.id) as item}
<div in:fade out:fly={{ x: -25, duration: 200 }}>
<Item {item} newCategoryId={newItemCategoryId} />
</div>
{/each}
{/if}
{/each}
{#if data.items.filter((i) => i.category === null).length > 0}
{#if items.filter((i) => i.category === null).length > 0}
<div class="text-lg mt-6 first:mt-2 border-primary border-b-4 text-primary font-semibold">
<p>Other</p>
</div>
{#each data.items.filter((i) => i.category === null) as item}
{#each items.filter((i) => i.category === null) as item}
<Item {item} newCategoryId={newItemCategoryId} />
{/each}
{/if}
Expand Down Expand Up @@ -178,7 +196,7 @@
{#each data.templates as template}
<form action="?/addTemplateItemsToList" method="POST" use:enhance>
<button
class="p-1 rounded shadow-lg text-gray-700 h-full text-sm text-center bg-accent"
class="p-2 rounded shadow-lg text-gray-700 h-full text-sm text-center bg-accent"
>
{template.name || `Template ${template.id.substring(0, 3)}`}
</button>
Expand Down