WIP todo assignment

components/Avatar.tsx

@@ -0,0 +1,12 @@
+import { JSX } from 'preact'
+
+export function Avatar(
+	{ className, ...props }: JSX.HTMLAttributes<HTMLImageElement>,
+) {
+	return (
+		<img
+			{...props}
+			class={`rounded-full object-cover h-60 w-60 ${className || ''}`}
+		/>
+	)
+}

components/Label.tsx

@@ -4,7 +4,7 @@ export function Label(
 	{ children, className, ...props }: JSX.HTMLAttributes<HTMLLabelElement>,
 ) {
 	return (
-		<label {...props} class={`flex flex-col ${className}`} for='name'>
+		<label {...props} class={`flex flex-col ${className}`}>
 			{children}
 		</label>
 	)

components/SectionHead.tsx

@@ -0,0 +1,20 @@
+import { JSX } from 'preact'
+
+export interface Props extends JSX.HTMLAttributes<HTMLElement> {
+	text: string
+}
+export function SectionHead(
+	{ text, children, className, ...props }: Props,
+) {
+	return (
+		<header
+			{...props}
+			class={`flex items-center border-b-2 border-stone-500/20 ${className}`}
+		>
+			<h1 class='flex items-center gap-4 p-5 text-2xl'>
+				{text}
+				{children}
+			</h1>
+		</header>
+	)
+}

components/Select.tsx

@@ -0,0 +1,26 @@
+import { JSX } from 'preact'
+
+export function Select(
+	{ children, className, ...props }: JSX.HTMLAttributes<HTMLSelectElement>,
+) {
+	if (!props.id && props.name) {
+		props.id = props.name
+	} else if (!props.name && props.id) {
+		props.name = props.id
+	}
+	let defaultClassName =
+		'border-2 bg-stone-500/20 border-stone-500/20 px-2 py-1 rounded'
+	if (props.type == 'submit') {
+		defaultClassName =
+			'px-2 py-1 bg-emerald-500/20 rounded hover:bg-gray-500/25 cursor-pointer transition-colors'
+	}
+
+	return (
+		<select
+			{...props}
+			class={`${defaultClassName} ${className}`}
+		>
+			{children}
+		</select>
+	)
+}

components/Table.tsx

@@ -0,0 +1,14 @@
+import { JSX } from 'preact'
+
+export function Table(
+	{ children, className, ...props }: JSX.HTMLAttributes<HTMLTableElement>,
+) {
+	return (
+		<table
+			{...props}
+			class={`border-separate [border-spacing:1.25rem] text-left ${className}`}
+		>
+			{children}
+		</table>
+	)
+}

components/TodoList.tsx

@@ -1,61 +0,0 @@
-import { Todo, UserWithTodos } from '@homeman/models.ts'
-import { Button } from '@homeman/components/Button.tsx'
-import { Dialog } from '@homeman/components/Dialog.tsx'
-import { createRef } from 'preact'
-
-export interface Props {
-	user: UserWithTodos
-}
-
-export function TodoList(
-	{ user: { avatarUrl, assignedTodos, name, color } }: Props,
-) {
-	const addTodoDialog = createRef<HTMLDialogElement>()
-	const todoItem = (
-		{ className, description, hideDone }: Pick<Todo, 'description'> & {
-			className?: string
-			hideDone?: boolean
-		},
-	) => (
-		<li
-			style={`border-color: #${color}`}
-			class={`${className || ''} ${
-				hideDone ? '' : 'border-l-4'
-			} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
-		>
-			<span class='text-xl'>{description}</span>
-			{hideDone ? '' : <Button class='mt-2'>Done</Button>}
-		</li>
-	)
-	return (
-		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
-			<Dialog
-				headerTitle='Add todo'
-				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
-				ref={addTodoDialog}
-			>
-				sup
-			</Dialog>
-			<img
-				class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
-				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
-				title={`${name}'s avatar`}
-			/>
-			<span style={`color: #${color};`} class='font-semibold text-center'>
-				{name}
-			</span>
-			<button class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'>
-				+ New
-			</button>
-			<ul class='flex flex-col gap-y-4'>
-				{assignedTodos.length < 1
-					? todoItem({
-						description: 'All clear! 🎉',
-						className: 'text-center',
-						hideDone: true,
-					})
-					: assignedTodos.map(todoItem)}
-			</ul>
-		</div>
-	)
-}

fresh.gen.ts

@@ -13,6 +13,7 @@ import * as $index from './routes/index.tsx'
 import * as $Admin from './islands/Admin.tsx'
 import * as $Clock from './islands/Clock.tsx'
 import * as $Counter from './islands/Counter.tsx'
+import * as $TodoList from './islands/TodoList.tsx'
 import { type Manifest } from '$fresh/server.ts'
 
 const manifest = {
@@ -30,6 +31,7 @@ const manifest = {
 		'./islands/Admin.tsx': $Admin,
 		'./islands/Clock.tsx': $Clock,
 		'./islands/Counter.tsx': $Counter,
+		'./islands/TodoList.tsx': $TodoList,
 	},
 	baseUrl: import.meta.url,
 } satisfies Manifest

islands/Admin.tsx

@@ -5,7 +5,15 @@ import { Button } from '@homeman/components/Button.tsx'
 import { Input } from '@homeman/components/Input.tsx'
 import { Label } from '@homeman/components/Label.tsx'
 import { Dialog } from '@homeman/components/Dialog.tsx'
-import { PencilSquareOutline, TrashOutline } from 'preact-heroicons'
+import {
+	PencilSquareOutline,
+	PlusOutline,
+	PlusSolid,
+	TrashOutline,
+} from 'preact-heroicons'
+import { Table } from '@homeman/components/Table.tsx'
+import { SectionHead } from '@homeman/components/SectionHead.tsx'
+import { Avatar } from '@homeman/components/Avatar.tsx'
 
 export interface Props {
 	users: Record<string, User>
@@ -66,7 +74,6 @@ export function Admin({ users, todos }: Props) {
 		<main class='flex flex-col'>
 			<Dialog
 				headerTitle='Add user'
-				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
 				show={showAddUserDialog.value}
 				onClose={() => showAddUserDialog.value = false}
 			>
@@ -77,24 +84,20 @@ export function Admin({ users, todos }: Props) {
 			</Dialog>
 			<Dialog
 				headerTitle={`Edit '${editUser.value?.name}'`}
-				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
 				show={!!editUser.value}
 				onClose={() => editUser.value = null}
 			>
 				<UserForm
-					userData={editUser.value}
 					onCancelButtonClicked={() => editUser.value = null}
+					userData={editUser.value}
 				/>
 			</Dialog>
-			<header class='flex items-center border-b-2 border-stone-500/20 '>
+			<SectionHead text={`Users (${users.length})`}>
-				<h1 class='p-5 text-2xl'>
-					Users ({users.length})
-				</h1>
 				<Button onClick={() => showAddUserDialog.value = true}>
-					Add User
+					<PlusOutline class='w-6 h-6' />
 				</Button>
-			</header>
+			</SectionHead>
-			<table class='border-separate [border-spacing:1.25rem] text-left'>
+			<Table>
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -112,7 +115,7 @@ export function Admin({ users, todos }: Props) {
 								<td>
 									{avatarUrl == null
 										? 'None'
-										: <img class='h-16 w-16 object-cover' src={avatarUrl} />}
+										: <Avatar className='h-16 w-16' src={avatarUrl} />}
 								</td>
 								<td style={`color: #${color}`}>
 									#{color}
@@ -137,13 +140,9 @@ export function Admin({ users, todos }: Props) {
 						)
 					})}
 				</tbody>
-			</table>
+			</Table>
-			<header class='flex items-center border-b-2 border-stone-500/20 '>
+			<SectionHead text={`Todos (${todos.length})`} />
-				<h1 class='p-5 text-2xl'>
+			<Table>
-					Todos ({todos.length})
-				</h1>
-			</header>
-			<table class='border-separate [border-spacing:1.25rem] text-left'>
 				<thead>
 					<tr>
 						<th>Description</th>
@@ -164,7 +163,7 @@ export function Admin({ users, todos }: Props) {
 						</tr>
 					))}
 				</tbody>
-			</table>
+			</Table>
 		</main>
 	)
 }

islands/TodoList.tsx

@@ -0,0 +1,139 @@
+import { Todo, User, UserWithTodos } from '@homeman/models.ts'
+import { Button } from '@homeman/components/Button.tsx'
+import { Dialog } from '@homeman/components/Dialog.tsx'
+import { Avatar } from '@homeman/components/Avatar.tsx'
+import { Signal, useSignal } from '@preact/signals'
+import { Input } from '@homeman/components/Input.tsx'
+import { Label } from '@homeman/components/Label.tsx'
+
+export interface Props {
+	user: UserWithTodos
+	users: Record<string, User>
+}
+
+export function TodoList(
+	{ users, user: { id, avatarUrl, assignedTodos, name, color } }: Props,
+) {
+	const todoAssignUserId: Signal<string | null> = useSignal(null)
+	const showAddTodoDialog = useSignal(false)
+
+	const todoItem = (
+		{ className, description, hideDone }: Pick<Todo, 'description'> & {
+			className?: string
+			hideDone?: boolean
+		},
+	) => (
+		<li
+			style={`border-color: #${color}`}
+			class={`${className || ''} ${
+				hideDone ? '' : 'border-l-4'
+			} p-4 rounded drop-shadow-lg bg-white dark:bg-stone-900 flex flex-col`}
+		>
+			<span class='text-xl'>{description}</span>
+			{hideDone ? '' : <Button class='mt-2'>Done</Button>}
+		</li>
+	)
+	return (
+		<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
+			<Dialog
+				headerTitle='Add todo'
+				show={showAddTodoDialog.value}
+				onClose={() => showAddTodoDialog.value = false}
+			>
+				<form
+					class='p-4 gap-4 flex flex-col'
+					action='/api/todo'
+					method='post'
+					encType='multipart/form-data'
+				>
+					<Label for='description'>
+						Description
+						<Input autofocus name='description' />
+					</Label>
+					<span>
+						Assignee
+						<ul class='flex gap-2'>
+							<li>
+								<input
+									type='radio'
+									id='assigneeUserId_unassigned'
+									name='assigneeUserId'
+									value=''
+								/>
+								<Label for='assigneeUserId_unassigned'>
+									<Avatar
+										className='mb-2'
+										src='http://placekitten.com/512/512'
+									/>
+									<span
+										style={`color: #888888;`}
+										class='font-semibold text-center'
+									>
+										Shared
+									</span>
+								</Label>
+							</li>
+							{Object.entries(users).map(([id, { avatarUrl, color }]) => {
+								const eid = `assigneeUserId_${id}`
+								return (
+									<li>
+										<input
+											type='radio'
+											id={eid}
+											name='assigneeUserId'
+											value={id}
+										/>
+										<Label for={eid}>
+											<Avatar className='mb-2' src={avatarUrl} />
+											<span
+												style={`color: #${color};`}
+												class='font-semibold text-center'
+											>
+												{name}
+											</span>
+										</Label>
+									</li>
+								)
+							})}
+						</ul>
+					</span>
+					<footer class='flex justify-end gap-2'>
+						<Button
+							type='button'
+							onClick={() => showAddTodoDialog.value = false}
+						>
+							Cancel
+						</Button>
+						<Input type='submit' value='Save' />
+					</footer>
+				</form>
+			</Dialog>
+			<Avatar
+				className='mb-2'
+				src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
+				title={`${name}'s avatar`}
+			/>
+			<span style={`color: #${color};`} class='font-semibold text-center'>
+				{name}
+			</span>
+			<button
+				class='mt-4 mb-4 text-left w-full px-2 py-1 rounded-lg border-[1px] text-stone-500 border-stone-500 opacity-50 hover:opacity-100'
+				onClick={() => {
+					showAddTodoDialog.value = true
+					todoAssignUserId.value = id
+				}}
+			>
+				+ New
+			</button>
+			<ul class='flex flex-col gap-y-4'>
+				{assignedTodos.length < 1
+					? todoItem({
+						description: 'All clear! 🎉',
+						className: 'text-center',
+						hideDone: true,
+					})
+					: assignedTodos.map(todoItem)}
+			</ul>
+		</div>
+	)
+}

routes/api/user.ts

@@ -48,6 +48,7 @@ export const handler: Handlers<User | null> = {
 
 			if (avatarFile) {
 				await Deno.mkdir('./static/uploads', { recursive: true })
+				// TODO: id will be undefined here
 				const name = `${id}-${avatarFile.name.replaceAll('/', '')}`
 				const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
 					create: true,

routes/index.tsx

@@ -1,6 +1,6 @@
 import { Handlers, PageProps } from '$fresh/server.ts'
 import { db, Todo, User, UserWithTodos } from '@homeman/models.ts'
-import { TodoList } from '@homeman/components/TodoList.tsx'
+import { TodoList } from '@homeman/islands/TodoList.tsx'
 
 const unassignedUserPlaceholder: User = {
 	id: '',
@@ -12,6 +12,7 @@ const unassignedUserPlaceholder: User = {
 
 interface Data {
 	users: UserWithTodos[]
+	allUsers: Record<string, User>
 	unassignedTodos: Todo[]
 }
 
@@ -21,12 +22,16 @@ export const handler: Handlers = {
 		const unassignedTodos = await db.todos.findMany({
 			where: { assigneeUserId: null },
 		})
-		return ctx.render({ users, unassignedTodos })
+		const allUsers: Data['allUsers'] = {}
+		for (const u of users) {
+			allUsers[u.id] = u
+		}
+		return ctx.render({ users, unassignedTodos, allUsers })
 	},
 }
 
 export default function Home(
-	{ data: { users, unassignedTodos } }: PageProps<Data>,
+	{ data: { users, unassignedTodos, allUsers } }: PageProps<Data>,
 ) {
 	const unassignedUser: UserWithTodos = {
 		...unassignedUserPlaceholder,
@@ -39,11 +44,11 @@ export default function Home(
 			</h1>
 			<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
 				<li>
-					<TodoList user={unassignedUser} />
+					<TodoList user={unassignedUser} users={allUsers} />
 				</li>
 				{users.map((u) => (
 					<li>
-						<TodoList user={u} />
+						<TodoList user={u} users={allUsers} />
 					</li>
 				))}
 			</ul>