musclecat/app/src/routes/lists/+page.svelte

51 lines
1.1 KiB
Svelte

<script lang="ts">
import type { ListsResponse } from '$lib/pocketbase-types';
import type { PageData } from './$types';
export let data: PageData;
const rootLists = data.lists.filter((l) => !l.parent);
const children = data.lists.reduce((acc, l) => {
if (acc.has(l.parent)) {
acc.get(l.parent)?.push(l);
} else {
acc.set(l.parent, [l]);
}
return acc;
}, new Map<string, ListsResponse[]>());
// TODO: Replace with navigation logic, such as using a Svelte store or a Router
const goToTasks = (taskId: string) => {
console.log(`Redirecting to tasks for list ${taskId}`);
};
</script>
<ion-header>
<ion-toolbar>
<ion-title>Task Lists</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
{#each rootLists as list}
<ion-item lines="full">
<ion-label>
<h2>{list.name}</h2>
<ion-list>
{#each children.get(list.id) as childList}
<ion-item lines="full">
<ion-label>
<h2>{childList.name}</h2>
</ion-label>
</ion-item>
{/each}
</ion-list>
</ion-label>
</ion-item>
{/each}
</ion-list>
</ion-content>
<style>
/* Additional styles if necessary */
</style>