93 lines
2.3 KiB
Svelte
93 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import ChecklistItem from '$lib/shopping/ChecklistItem.svelte';
|
|
import AddCustomItem from '$lib/shopping/AddCustomItem.svelte';
|
|
|
|
interface RecipeRef {
|
|
id?: string;
|
|
name?: string;
|
|
}
|
|
|
|
interface Item {
|
|
id?: string;
|
|
name?: string;
|
|
quantity?: number;
|
|
unit?: string;
|
|
isChecked?: boolean;
|
|
sourceRecipes?: RecipeRef[];
|
|
}
|
|
|
|
interface Props {
|
|
listId: string;
|
|
uncheckedItems: Item[];
|
|
checkedItems: Item[];
|
|
totalItems: number;
|
|
filteredStaplesCount?: number;
|
|
showFilteredStaples?: boolean;
|
|
}
|
|
|
|
let {
|
|
listId,
|
|
uncheckedItems,
|
|
checkedItems,
|
|
totalItems,
|
|
filteredStaplesCount = 0,
|
|
showFilteredStaples = false
|
|
}: Props = $props();
|
|
|
|
let checkedCount = $derived(checkedItems.length);
|
|
</script>
|
|
|
|
{#if uncheckedItems.length > 0}
|
|
<div class="divide-y divide-[var(--color-border)]">
|
|
{#each uncheckedItems as item (item.id)}
|
|
<ChecklistItem
|
|
{listId}
|
|
itemId={item.id ?? ''}
|
|
name={item.name ?? ''}
|
|
quantity={item.quantity ?? null}
|
|
unit={item.unit ?? null}
|
|
isChecked={false}
|
|
sourceRecipes={item.sourceRecipes ?? []}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
{:else if totalItems > 0}
|
|
<p class="py-4 text-center font-[var(--font-sans)] text-[14px] text-[var(--color-text-muted)]">
|
|
Alles erledigt!
|
|
</p>
|
|
{/if}
|
|
|
|
<div class="mt-3">
|
|
<AddCustomItem {listId} />
|
|
</div>
|
|
|
|
{#if showFilteredStaples && filteredStaplesCount > 0}
|
|
<div class="mt-3 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-surface)] px-3 py-2">
|
|
<p class="font-[var(--font-sans)] text-[12px] text-[var(--color-text-muted)]">
|
|
{filteredStaplesCount} Grundzutaten ausgeblendet ·
|
|
<a href="/pantry" class="font-medium text-[var(--green-dark)] hover:underline">Vorrat bearbeiten</a>
|
|
</p>
|
|
</div>
|
|
{/if}
|
|
|
|
{#if checkedItems.length > 0}
|
|
<div class="mt-4">
|
|
<p class="mb-1 font-[var(--font-sans)] text-[12px] font-medium uppercase tracking-wide text-[var(--color-text-muted)]">
|
|
Abgehakt ({checkedCount})
|
|
</p>
|
|
<div class="divide-y divide-[var(--color-border)]">
|
|
{#each checkedItems as item (item.id)}
|
|
<ChecklistItem
|
|
{listId}
|
|
itemId={item.id ?? ''}
|
|
name={item.name ?? ''}
|
|
quantity={item.quantity ?? null}
|
|
unit={item.unit ?? null}
|
|
isChecked={true}
|
|
sourceRecipes={item.sourceRecipes ?? []}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/if}
|