@axium/tasks 0.1.10 → 0.2.0

package/dist/common.d.ts

@@ -19,6 +19,10 @@ export declare const TaskListInit: z.ZodObject<{
     description: z.ZodOptional<z.ZodNullable<z.ZodString>>;
 }, z.core.$strip>;
 export type TaskListInit = z.infer<typeof TaskListInit>;
+export declare const TaskListUpdate: z.ZodObject<{
+    all_completed: z.ZodOptional<z.ZodBoolean>;
+}, z.core.$strip>;
+export type TaskListUpdate = z.infer<typeof TaskListUpdate>;
 export interface TaskList extends TaskListInit {
     id: string;
     userId: string;
@@ -35,6 +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];
             PUT: [Omit<z.input<typeof TaskInit>, 'listId'>, Task];
             DELETE: TaskList;
         };

package/dist/common.js

@@ -11,3 +11,6 @@ export const TaskListInit = z.object({
     name: z.string().min(1).max(50),
     description: z.string().max(500).nullish(),
 });
+export const TaskListUpdate = z.object({
+    all_completed: z.boolean().optional(),
+});

package/dist/server.js

@@ -4,7 +4,7 @@ import { database, expectedTypes } from '@axium/server/database';
 import { parseBody, withError } from '@axium/server/requests';
 import { addRoute } from '@axium/server/routes';
 import * as z from 'zod';
-import { TaskInit, TaskListInit } from './common.js';
+import { TaskInit, TaskListInit, TaskListUpdate } from './common.js';
 import { jsonArrayFrom } from 'kysely/helpers/postgres';
 expectedTypes.tasks = {
     id: { type: 'uuid', required: true, hasDefault: true },
@@ -91,6 +91,22 @@ addRoute({
             .executeTakeFirstOrThrow()
             .catch(withError('Could not update task list'));
     },
+    async POST(event) {
+        const body = await parseBody(event, TaskListUpdate);
+        const id = event.params.id;
+        await checkAuthForItem(event, 'task_lists', id, Permission.Edit);
+        if (typeof body.all_completed == 'boolean') {
+            await database
+                .updateTable('tasks')
+                .set('completed', body.all_completed)
+                .where('listId', '=', id)
+                .where('completed', '=', !body.all_completed)
+                .returningAll()
+                .executeTakeFirstOrThrow()
+                .catch(withError('Could not update task list'));
+            return;
+        }
+    },
     async DELETE(event) {
         const id = event.params.id;
         await checkAuthForItem(event, 'task_lists', id, Permission.Manage);

package/lib/TaskList.svelte

@@ -7,6 +7,7 @@
 	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();
@@ -22,55 +23,10 @@
 
 		return `[${task.completed ? 'x' : ' '}] ${task.summary}` + children;
 	}
-</script>
 
-{#snippet task_tree(root: Task)}
-	<div class="task">
-		<label for="task-completed#{root.id}" style:cursor="pointer">
-			<Icon i="regular/circle{root.completed ? '-check' : ''}" --size="20px" />
-		</label>
-		<input
-			type="checkbox"
-			name="completed"
-			bind:checked={root.completed}
-			id="task-completed#{root.id}"
-			style:display="none"
-			onchange={e => {
-				root.completed = e.currentTarget.checked;
-				fetchAPI('PATCH', 'tasks/:id', { completed: root.completed }, root.id);
-			}}
-		/>
-		<input
-			type="text"
-			name="summary"
-			class="editable-text"
-			bind:value={root.summary}
-			onchange={e => {
-				root.summary = e.currentTarget.value;
-				fetchAPI('PATCH', 'tasks/:id', { summary: root.summary }, root.id);
-			}}
-		/>
-		<Popover>
-			<div
-				class="menu-item"
-				onclick={() =>
-					fetchAPI('DELETE', 'tasks/:id', {}, root.id).then(() => {
-						tasks.splice(tasks.indexOf(root), 1);
-					})}
-			>
-				<Icon i="trash" /> Delete
-			</div>
-			{#if page.data.session?.user.preferences.debug}
-				<div class="menu-item" onclick={() => copy('text/plain', root.id)}>
-					<Icon i="hashtag" --size="14px" /> Copy ID
-				</div>
-			{/if}
-		</Popover>
-	</div>
-	{#each tasks.filter(task => task.parentId == root.id) as child}
-		{@render task_tree(child)}
-	{/each}
-{/snippet}
+	const rootPending = $derived(tasks.filter(task => !task.parentId && !task.completed));
+	const rootCompleted = $derived(tasks.filter(task => !task.parentId && task.completed));
+</script>
 
 <div class="task-list">
 	<div class="task-list-header">
@@ -107,6 +63,28 @@
 			>
 				<Icon i="regular/file-export" /> Export
 			</div>
+			{#if tasks.some(t => !t.completed)}
+				<div
+					class="menu-item"
+					onclick={() => {
+						for (const task of tasks) task.completed = true;
+						fetchAPI('POST', 'task_lists/:id', { all_completed: true }, list.id);
+					}}
+				>
+					<Icon i="regular/circle-check" /> Complete All
+				</div>
+			{/if}
+			{#if tasks.some(t => t.completed)}
+				<div
+					class="menu-item"
+					onclick={() => {
+						for (const task of tasks) task.completed = false;
+						fetchAPI('POST', 'task_lists/:id', { all_completed: false }, list.id);
+					}}
+				>
+					<Icon i="regular/circle" /> Un-complete All
+				</div>
+			{/if}
 			<div class="menu-item" onclick={() => copy('text/plain', `${location.origin}/tasks/${list.id}`)}>
 				<Icon i="link-horizontal" /> Copy Link
 			</div>
@@ -134,14 +112,14 @@
 		</button>
 	</div>
 	<h4>Pending</h4>
-	{#each tasks.filter(task => !task.parentId && !task.completed) as task}
-		{@render task_tree(task)}
+	{#each rootPending as task, i (task.id)}
+		<TaskTree bind:tasks bind:task={rootPending[i]} />
 	{:else}
 		<i class="subtle">No pending tasks.</i>
 	{/each}
 	<h4>Completed</h4>
-	{#each tasks.filter(task => !task.parentId && task.completed) as task}
-		{@render task_tree(task)}
+	{#each rootCompleted as task, i (task.id)}
+		<TaskTree bind:tasks bind:task={rootCompleted[i]} />
 	{:else}
 		<i class="subtle">No completed tasks.</i>
 	{/each}
@@ -153,17 +131,6 @@
 		border: none;
 	}
 
-	.task {
-		display: grid;
-		grid-template-columns: 1em 1fr 2em;
-		align-items: center;
-		gap: 1em;
-
-		.task {
-			padding-left: 1em;
-		}
-	}
-
 	.task-list {
 		display: flex;
 		flex-direction: column;
@@ -185,12 +152,4 @@
 			padding: 0;
 		}
 	}
-
-	.task :global(.popover-toggle) {
-		visibility: hidden;
-	}
-
-	.task:hover :global(.popover-toggle) {
-		visibility: visible;
-	}
 </style>

package/lib/TaskTree.svelte

@@ -0,0 +1,85 @@
+<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>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/tasks",
-	"version": "0.1.10",
+	"version": "0.2.0",
 	"author": "James Prevett <axium@jamespre.dev> (https://jamespre.dev)",
 	"description": "Tasks for Axium",
 	"funding": {