@axium/tasks 0.2.0 → 0.2.2

package/dist/common.d.ts

@@ -39,7 +39,7 @@ declare module '@axium/core/api' {
         'task_lists/:id': {
             GET: WithRequired<TaskList, 'tasks'>;
             PATCH: [z.input<typeof TaskListInit>, TaskList];
-            POST: [z.input<typeof TaskListUpdate>, void];
+            POST: [z.input<typeof TaskListUpdate>, {}];
             PUT: [Omit<z.input<typeof TaskInit>, 'listId'>, Task];
             DELETE: TaskList;
         };

package/dist/plugin.d.ts

@@ -52,5 +52,10 @@ declare const _default: {
     dependencies: {
         zod: string;
     };
+    apps: {
+        id: string;
+        name: string;
+        icon: string;
+    }[];
 };
 export default _default;

package/dist/plugin.js

@@ -1,5 +1,4 @@
 import * as acl from '@axium/server/acl';
-import { addApp } from '@axium/server/apps';
 import { count, createIndex, database, warnExists } from '@axium/server/database';
 import { done, start } from '@axium/server/io';
 import { sql } from 'kysely';
@@ -56,12 +55,6 @@ async function remove() {
     await database.schema.dropTable('task_lists').execute().then(done);
     await acl.dropTable('task_lists');
 }
-addApp({
-    id: 'tasks',
-    name: 'Tasks',
-    icon: 'list-check',
-    version: pkg.version,
-});
 export default {
     ...pkg,
     statusText,

package/dist/server.js

@@ -104,8 +104,8 @@ addRoute({
                 .returningAll()
                 .executeTakeFirstOrThrow()
                 .catch(withError('Could not update task list'));
-            return;
         }
+        return {};
     },
     async DELETE(event) {
         const id = event.params.id;

package/lib/TaskList.svelte

@@ -7,7 +7,6 @@
 	import type { Task, TaskList } from '@axium/tasks/common';
 	import type { WithRequired } from 'utilium';
 	import { download } from 'utilium/dom.js';
-	import TaskTree from './TaskTree.svelte';
 
 	let { list = $bindable(), lists = $bindable() }: { list: WithRequired<TaskList, 'tasks'>; lists?: WithRequired<TaskList, 'tasks'>[] } =
 		$props();
@@ -23,11 +22,57 @@
 
 		return `[${task.completed ? 'x' : ' '}] ${task.summary}` + children;
 	}
-
-	const rootPending = $derived(tasks.filter(task => !task.parentId && !task.completed));
-	const rootCompleted = $derived(tasks.filter(task => !task.parentId && task.completed));
 </script>
 
+{#snippet task_tree(task: Task)}
+	<div class="task">
+		<label for="task-completed#{task.id}" style:cursor="pointer">
+			<Icon i="regular/circle{task.completed ? '-check' : ''}" --size="20px" />
+		</label>
+		<input
+			type="checkbox"
+			name="completed"
+			bind:checked={task.completed}
+			id="task-completed#{task.id}"
+			style:display="none"
+			onchange={e => {
+				task.completed = e.currentTarget.checked;
+				fetchAPI('PATCH', 'tasks/:id', { completed: task.completed }, task.id);
+			}}
+		/>
+		<input
+			type="text"
+			name="summary"
+			class="editable-text"
+			bind:value={task.summary}
+			onchange={e => {
+				task.summary = e.currentTarget.value;
+				fetchAPI('PATCH', 'tasks/:id', { summary: task.summary }, task.id);
+			}}
+		/>
+		<Popover>
+			<div
+				class="menu-item"
+				onclick={() =>
+					fetchAPI('DELETE', 'tasks/:id', {}, task.id).then(() => {
+						tasks.splice(tasks.indexOf(task), 1);
+					})}
+			>
+				<Icon i="trash" /> Delete
+			</div>
+			{#if page.data.session?.user.preferences.debug}
+				<div class="menu-item" onclick={() => copy('text/plain', task.id)}>
+					<Icon i="hashtag" --size="14px" /> Copy ID
+				</div>
+			{/if}
+		</Popover>
+	</div>
+
+	{#each tasks.filter(task => task.parentId == task.id) as task (task.id)}
+		{@render task_tree(task)}
+	{/each}
+{/snippet}
+
 <div class="task-list">
 	<div class="task-list-header">
 		<input
@@ -112,14 +157,14 @@
 		</button>
 	</div>
 	<h4>Pending</h4>
-	{#each rootPending as task, i (task.id)}
-		<TaskTree bind:tasks bind:task={rootPending[i]} />
+	{#each tasks.filter(task => !task.parentId && !task.completed) as task (task.id)}
+		{@render task_tree(task)}
 	{:else}
 		<i class="subtle">No pending tasks.</i>
 	{/each}
 	<h4>Completed</h4>
-	{#each rootCompleted as task, i (task.id)}
-		<TaskTree bind:tasks bind:task={rootCompleted[i]} />
+	{#each tasks.filter(task => !task.parentId && task.completed) as task (task.id)}
+		{@render task_tree(task)}
 	{:else}
 		<i class="subtle">No completed tasks.</i>
 	{/each}
@@ -131,6 +176,25 @@
 		border: none;
 	}
 
+	.task {
+		display: grid;
+		grid-template-columns: 1em 1fr 2em;
+		align-items: center;
+		gap: 1em;
+
+		.task {
+			padding-left: 1em;
+		}
+	}
+
+	.task :global(.popover-toggle) {
+		visibility: hidden;
+	}
+
+	.task:hover :global(.popover-toggle) {
+		visibility: visible;
+	}
+
 	.task-list {
 		display: flex;
 		flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "Tasks for Axium",
 	"funding": {
@@ -36,12 +36,19 @@
 	},
 	"peerDependencies": {
 		"@axium/client": ">=0.4.0",
-		"@axium/core": ">=0.6.0",
-		"@axium/server": ">=0.22.0",
+		"@axium/core": ">=0.7.0",
+		"@axium/server": ">=0.23.0",
 		"@sveltejs/kit": "^2.27.3",
 		"utilium": "^2.3.8"
 	},
 	"dependencies": {
 		"zod": "^4.0.5"
-	}
+	},
+	"apps": [
+		{
+			"id": "tasks",
+			"name": "Tasks",
+			"icon": "list-check"
+		}
+	]
 }

package/lib/TaskTree.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	import { fetchAPI } from '@axium/client/requests';
-	import type { Task } from '@axium/tasks/common';
-	import { Icon, Popover } from '@axium/client/components';
-	import { page } from '$app/state';
-	import { copy } from '@axium/client/clipboard';
-	import TaskTree from './TaskTree.svelte';
-
-	let { task = $bindable(), tasks = $bindable() }: { task: Task; tasks: Task[] } = $props();
-
-	const children = $derived(tasks.filter(task => task.parentId == task.id));
-</script>
-
-<div class="task">
-	<label for="task-completed#{task.id}" style:cursor="pointer">
-		<Icon i="regular/circle{task.completed ? '-check' : ''}" --size="20px" />
-	</label>
-	<input
-		type="checkbox"
-		name="completed"
-		bind:checked={task.completed}
-		id="task-completed#{task.id}"
-		style:display="none"
-		onchange={e => {
-			task.completed = e.currentTarget.checked;
-			fetchAPI('PATCH', 'tasks/:id', { completed: task.completed }, task.id);
-		}}
-	/>
-	<input
-		type="text"
-		name="summary"
-		class="editable-text"
-		bind:value={task.summary}
-		onchange={e => {
-			task.summary = e.currentTarget.value;
-			fetchAPI('PATCH', 'tasks/:id', { summary: task.summary }, task.id);
-		}}
-	/>
-	<Popover>
-		<div
-			class="menu-item"
-			onclick={() =>
-				fetchAPI('DELETE', 'tasks/:id', {}, task.id).then(() => {
-					tasks.splice(tasks.indexOf(task), 1);
-				})}
-		>
-			<Icon i="trash" /> Delete
-		</div>
-		{#if page.data.session?.user.preferences.debug}
-			<div class="menu-item" onclick={() => copy('text/plain', task.id)}>
-				<Icon i="hashtag" --size="14px" /> Copy ID
-			</div>
-		{/if}
-	</Popover>
-</div>
-
-{#each children as task, i (task.id)}
-	<TaskTree bind:tasks bind:task={children[i]} />
-{/each}
-
-<style>
-	.editable-text {
-		background: none;
-		border: none;
-	}
-
-	.task {
-		display: grid;
-		grid-template-columns: 1em 1fr 2em;
-		align-items: center;
-		gap: 1em;
-
-		.task {
-			padding-left: 1em;
-		}
-	}
-
-	.task :global(.popover-toggle) {
-		visibility: hidden;
-	}
-
-	.task:hover :global(.popover-toggle) {
-		visibility: visible;
-	}
-</style>