Merge remote-tracking branch 'origin/master'

This commit is contained in:
Daniel Flanagan 2024-01-12 10:08:47 -06:00
commit 5e79a4cebf
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
17 changed files with 561 additions and 336 deletions

12
components/Avatar.tsx Normal file
View file

@ -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 || ''}`}
/>
)
}

44
components/Dialog.tsx Normal file
View file

@ -0,0 +1,44 @@
import { createRef, JSX } from 'preact'
import { Button } from '@homeman/components/Button.tsx'
import { useEffect } from 'preact/hooks'
interface Props extends JSX.HTMLAttributes<HTMLDialogElement> {
headerTitle: string
show?: boolean
}
export function Dialog(
{ show, headerTitle, children, className, ...props }: Props,
) {
const self = createRef<HTMLDialogElement>()
useEffect(() => {
if (show) {
self.current?.showModal()
} else {
self.current?.close()
}
return () => {
// cleanup
}
}, [show])
return (
<dialog
{...props}
class={`rounded drop-shadow-lg backdrop:bg-stone-500/90 ${className}`}
ref={self}
>
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
<h1 class='text-xl grow'>{headerTitle}</h1>
<Button
onClick={() => self.current?.close()}
class='text-xl p-4 border-b-2 mr-4'
>
</Button>
</header>
{children}
</dialog>
)
}

View file

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

View file

@ -1,26 +1,14 @@
// import { JSX } from 'preact' // import { JSX } from 'preact'
// import { IS_BROWSER } from '$fresh/runtime.ts' // import { IS_BROWSER } from '$fresh/runtime.ts'
import { Bars3Outline } from 'preact-heroicons'
import { Clock } from '@homeman/islands/Clock.tsx' import { Clock } from '@homeman/islands/Clock.tsx'
export function Nav(/* props: {} */) { export function Nav(/* props: {} */) {
return ( return (
<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'> <nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
<button class='p-4 hover:bg-stone-500/20'> <button class='p-4 hover:bg-stone-500/20'>
<svg <Bars3Outline class='h-6 w-6' />
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke-width='1.5'
stroke='currentColor'
class='w-6 h-6'
>
<path
stroke-linecap='round'
stroke-linejoin='round'
d='M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5'
/>
</svg>
</button> </button>
<a class='p-4 hover:bg-stone-500/20' href='/'> <a class='p-4 hover:bg-stone-500/20' href='/'>
Flanagan Family Flanagan Family

View file

@ -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>
)
}

26
components/Select.tsx Normal file
View file

@ -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>
)
}

14
components/Table.tsx Normal file
View file

@ -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>
)
}

View file

@ -1,51 +0,0 @@
import { Todo, UserWithTodos } from '@homeman/models.ts'
import { Button } from '@homeman/components/Button.tsx'
export interface Props {
user: UserWithTodos
}
export function TodoList(
{ user: { avatarUrl, assignedTodos, name, color } }: Props,
) {
const todoItem = (
{ className, description, hideDone }: Pick<Todo, 'description'> & {
className?: string
hideDone?: boolean
},
) => (
<li
style={`border-color: #${color}`}
class={`${
className || ''
} 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'>
<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>
)
}

View file

@ -29,6 +29,7 @@
"tailwindcss": "npm:tailwindcss@3.3.5", "tailwindcss": "npm:tailwindcss@3.3.5",
"tailwindcss/": "npm:/tailwindcss@3.3.5/", "tailwindcss/": "npm:/tailwindcss@3.3.5/",
"tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js", "tailwindcss/plugin": "npm:/tailwindcss@3.3.5/plugin.js",
"preact-heroicons": "https://esm.sh/preact-heroicons@2.1.1",
"$std/": "https://deno.land/std@0.208.0/", "$std/": "https://deno.land/std@0.208.0/",
"@homeman/": "./" "@homeman/": "./"
}, },

View file

@ -7,12 +7,15 @@ import * as $_app from './routes/_app.tsx'
import * as $admin from './routes/admin.tsx' import * as $admin from './routes/admin.tsx'
import * as $api_joke from './routes/api/joke.ts' import * as $api_joke from './routes/api/joke.ts'
import * as $api_todo from './routes/api/todo.ts' import * as $api_todo from './routes/api/todo.ts'
import * as $api_todo_done from './routes/api/todo/done.ts'
import * as $api_user from './routes/api/user.ts' import * as $api_user from './routes/api/user.ts'
import * as $greet_name_ from './routes/greet/[name].tsx' import * as $greet_name_ from './routes/greet/[name].tsx'
import * as $index from './routes/index.tsx' import * as $index from './routes/index.tsx'
import * as $Admin from './islands/Admin.tsx' import * as $Admin from './islands/Admin.tsx'
import * as $Clock from './islands/Clock.tsx' import * as $Clock from './islands/Clock.tsx'
import * as $Counter from './islands/Counter.tsx' import * as $Counter from './islands/Counter.tsx'
import * as $Dashboard from './islands/Dashboard.tsx'
import * as $TodoList from './islands/TodoList.tsx'
import { type Manifest } from '$fresh/server.ts' import { type Manifest } from '$fresh/server.ts'
const manifest = { const manifest = {
@ -22,6 +25,7 @@ const manifest = {
'./routes/admin.tsx': $admin, './routes/admin.tsx': $admin,
'./routes/api/joke.ts': $api_joke, './routes/api/joke.ts': $api_joke,
'./routes/api/todo.ts': $api_todo, './routes/api/todo.ts': $api_todo,
'./routes/api/todo/done.ts': $api_todo_done,
'./routes/api/user.ts': $api_user, './routes/api/user.ts': $api_user,
'./routes/greet/[name].tsx': $greet_name_, './routes/greet/[name].tsx': $greet_name_,
'./routes/index.tsx': $index, './routes/index.tsx': $index,
@ -30,6 +34,8 @@ const manifest = {
'./islands/Admin.tsx': $Admin, './islands/Admin.tsx': $Admin,
'./islands/Clock.tsx': $Clock, './islands/Clock.tsx': $Clock,
'./islands/Counter.tsx': $Counter, './islands/Counter.tsx': $Counter,
'./islands/Dashboard.tsx': $Dashboard,
'./islands/TodoList.tsx': $TodoList,
}, },
baseUrl: import.meta.url, baseUrl: import.meta.url,
} satisfies Manifest } satisfies Manifest

View file

@ -1,13 +1,23 @@
import { createRef } from 'preact' import { JSX } from 'preact'
import { type Signal, useSignal } from '@preact/signals' import { type Signal, useSignal } from '@preact/signals'
import { Todo, User } from '@homeman/models.ts' import { Todo, User } from '@homeman/models.ts'
import { Button } from '@homeman/components/Button.tsx' import { Button } from '@homeman/components/Button.tsx'
import { Input } from '@homeman/components/Input.tsx' import { Input } from '@homeman/components/Input.tsx'
import { Label } from '@homeman/components/Label.tsx' import { Label } from '@homeman/components/Label.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
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 { export interface Props {
users: User[] users: Record<string, User>
todos: Todo[] todos: Record<string, Todo>
} }
async function promptDeleteUser(id: string, name: string) { async function promptDeleteUser(id: string, name: string) {
@ -17,14 +27,49 @@ async function promptDeleteUser(id: string, name: string) {
} }
} }
interface UserFormProps extends JSX.HTMLAttributes<HTMLFormElement> {
onCancelButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
userData: User | null
}
function UserForm(
{ onCancelButtonClicked, userData, ...props }: UserFormProps,
) {
return (
<form
{...props}
class='p-4 gap-4 flex flex-col'
action='/api/user'
method='post'
encType='multipart/form-data'
>
{userData ? <Input type='hidden' name='id' value={userData.id} /> : <></>}
<Label for='name'>
Name
<Input autofocus name='name' value={userData?.name} />
</Label>
<Label for='avatar'>
Avatar
<Input type='file' name='avatar' />
</Label>
<Label for='color'>
Color
<Input type='color' name='color' value={`#${userData?.color}`} />
</Label>
<footer class='flex justify-end gap-2'>
<Button type='button' onClick={onCancelButtonClicked}>
Cancel
</Button>
<Input type='submit' value='Save' />
</footer>
</form>
)
}
export function Admin({ users, todos }: Props) { export function Admin({ users, todos }: Props) {
const showAddUserDialog = useSignal(false)
const editUser: Signal<User | null> = useSignal(null) const editUser: Signal<User | null> = useSignal(null)
const addUserDialog = createRef<HTMLDialogElement>()
const editUserDialog = createRef<HTMLDialogElement>()
const usersById: Record<string, User> = {}
for (const u of users) {
usersById[u.id] = u
}
return ( return (
<main class='flex flex-col'> <main class='flex flex-col'>
<header class='flex items-center border-b-2 border-stone-500/20 '> <header class='flex items-center border-b-2 border-stone-500/20 '>
@ -32,109 +77,32 @@ export function Admin({ users, todos }: Props) {
Administration Page Administration Page
</h1> </h1>
</header> </header>
<dialog <Dialog
class='rounded drop-shadow-lg backdrop:bg-stone-500/90' headerTitle='Add user'
ref={addUserDialog} show={showAddUserDialog.value}
onClose={() => showAddUserDialog.value = false}
> >
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'> <UserForm
<h1 class='text-xl grow'>Add user</h1> onCancelButtonClicked={() => showAddUserDialog.value = false}
<Button userData={null}
onClick={() => addUserDialog.current?.close()} />
class='text-xl p-4 border-b-2 mr-4' </Dialog>
> <Dialog
headerTitle={`Edit '${editUser.value?.name}'`}
</Button> show={!!editUser.value}
</header> onClose={() => editUser.value = null}
<form
class='p-4 gap-4 flex flex-col'
action='/api/user'
method='post'
encType='multipart/form-data'
onSubmit={() => console.log('Submitting new user...')}
>
<Label for='name'>
Name
<Input autofocus name='name' />
</Label>
<Label for='avatar'>
Avatar
<Input type='file' name='avatar' />
</Label>
<Label for='color'>
Color
<Input type='color' name='color' />
</Label>
<footer class='flex justify-end gap-2'>
<Button
onClick={() => addUserDialog.current?.close()}
>
Cancel
</Button>
<Input type='submit' value='Save' />
</footer>
</form>
</dialog>
<dialog
class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
ref={editUserDialog}
> >
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'> <UserForm
<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1> onCancelButtonClicked={() => editUser.value = null}
<Button userData={editUser.value}
onClick={() => editUserDialog.current?.close()} />
class='text-xl p-4 border-b-2 mr-4' </Dialog>
> <SectionHead text={`Users (${users.length})`}>
<Button onClick={() => showAddUserDialog.value = true}>
</Button> <PlusOutline class='w-6 h-6' />
</header>
<form
class='p-4 gap-4 flex flex-col'
action='/api/user'
// TODO:
// Form contains enctype=multipart/form-data, but does not contain method=post.
// Submitting normally with method=GET and no enctype instead.
// possible workaround? https://stackoverflow.com/questions/50691938/patch-and-put-request-does-not-working-with-form-data
method='post'
encType='multipart/form-data'
onSubmit={() => console.log('Submitting edit user...')}
>
<Input type='hidden' name='_method' value='put' />
<Input type='hidden' name='id' value={editUser.value?.id} />
<Label for='name'>
Name
<Input autofocus name='name' value={editUser.value?.name} />
</Label>
<Label for='avatar'>
Avatar
<Input type='file' name='avatar' />
</Label>
<Label for='color'>
Color
<Input
type='color'
name='color'
value={`#${editUser.value?.color}`}
/>
</Label>
<footer class='flex justify-end gap-2'>
<Button
onClick={() => editUserDialog.current?.close()}
>
Cancel
</Button>
<Input type='submit' value='Save' />
</footer>
</form>
</dialog>
<header class='flex items-center border-b-2 border-stone-500/20 '>
<h1 class='p-5 text-2xl'>
Users ({users.length})
</h1>
<Button onClick={() => addUserDialog.current?.showModal()}>
Add User
</Button> </Button>
</header> </SectionHead>
<table class='border-separate [border-spacing:1.25rem] text-left'> <Table>
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -144,15 +112,15 @@ export function Admin({ users, todos }: Props) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{users.map((user) => { {Object.entries(users).map(([id, user]) => {
const { id, name, avatarUrl, color } = user const { name, avatarUrl, color } = user
return ( return (
<tr> <tr>
<td>{name}</td> <td>{name}</td>
<td> <td>
{avatarUrl == null {avatarUrl == null
? 'None' ? 'None'
: <img class='h-16 w-16 object-cover' src={avatarUrl} />} : <Avatar className='h-16 w-16' src={avatarUrl} />}
</td> </td>
<td style={`color: #${color}`}> <td style={`color: #${color}`}>
#{color} #{color}
@ -163,57 +131,23 @@ export function Admin({ users, todos }: Props) {
className='py-2 mr-2' className='py-2 mr-2'
onClick={() => promptDeleteUser(id, name)} onClick={() => promptDeleteUser(id, name)}
> >
<svg <TrashOutline class='w-6 h-6' />
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke-width='1.5'
stroke='currentColor'
class='w-6 h-6'
>
<path
stroke-linecap='round'
stroke-linejoin='round'
d='m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0'
/>
</svg>
</Button> </Button>
<Button <Button
title='Edit' title='Edit'
className='py-2' className='py-2'
onClick={() => { onClick={() => editUser.value = user}
editUser.value = user
editUserDialog.current?.showModal()
}}
> >
<svg <PencilSquareOutline class='w-6 h-6' />
xmlns='http://www.w3.org/2000/svg'
fill='none'
viewBox='0 0 24 24'
stroke-width='1.5'
stroke='currentColor'
class='w-6 h-6'
>
<path
stroke-linecap='round'
stroke-linejoin='round'
d='m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10'
/>
</svg>
</Button> </Button>
</td> </td>
</tr> </tr>
) )
})} })}
</tbody> </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>
<Button>+</Button>
</header>
<table class='border-separate [border-spacing:1.25rem] text-left'>
<thead> <thead>
<tr> <tr>
<th>Description</th> <th>Description</th>
@ -221,18 +155,20 @@ export function Admin({ users, todos }: Props) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{todos.map(({ description, assigneeUserId }) => ( {Object.entries(todos).map((
[_id, { description, assigneeUserId }],
) => (
<tr> <tr>
<td>{description}</td> <td>{description}</td>
<td> <td>
{assigneeUserId == null {assigneeUserId == null
? 'Unassigned' ? 'Unassigned'
: usersById[assigneeUserId]?.name} : users[assigneeUserId]?.name}
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </Table>
</main> </main>
) )
} }

155
islands/Dashboard.tsx Normal file
View file

@ -0,0 +1,155 @@
import { Todo, User, UserWithTodos } from '@homeman/models.ts'
import { Signal, useSignal } from '@preact/signals'
import { TodoList } from '@homeman/islands/TodoList.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
import { Label } from '@homeman/components/Label.tsx'
import { Input } from '@homeman/components/Input.tsx'
import { Avatar } from '@homeman/components/Avatar.tsx'
import { Button } from '@homeman/components/Button.tsx'
import { JSX } from 'preact'
interface Props {
users: Record<string, UserWithTodos>
unassignedTodos: Todo[]
}
const unassignedUserPlaceholder: User = {
id: '',
createdAt: new Date(),
name: 'Shared',
avatarUrl: 'http://placekitten.com/512/512',
color: '888888',
}
interface UserSelectButtonProps extends JSX.HTMLAttributes<HTMLInputElement> {
user: User
}
function UserSelectButton(
{ user: { id, name, avatarUrl, color }, tabindex, ...props }:
UserSelectButtonProps,
) {
const eid = `assigneeUserId_${id}`
return (
<>
<input
aria-hidden='true'
type='radio'
class='peer sr-only'
id={eid}
name='assigneeUserId'
value={id}
{...props}
/>
<Label
for={eid}
style={`border-color: #${color};`}
tabindex={tabindex}
className='cursor-pointer peer-checked:border-t-2 peer-checked:bg-gray-500/20 hover:bg-gray-500/25 rounded p-2'
role='button'
>
<Avatar
className='mb-2'
src={avatarUrl}
/>
<span
style={`color: #${color};`}
class='font-semibold text-center'
>
{name}
</span>
</Label>
</>
)
}
export default function Dashboard({ users, unassignedTodos }: Props) {
const todoAssignUserId: Signal<string | null> = useSignal(null)
const showAddTodoDialog = useSignal(false)
const unassignedUser: UserWithTodos = {
...unassignedUserPlaceholder,
assignedTodos: unassignedTodos,
}
return (
<main class='flex flex-col'>
<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>
<UserSelectButton
checked={todoAssignUserId.value == null}
tabindex={0}
user={unassignedUser}
/>
</li>
{Object.values(users).map(
(user) => {
return (
<li>
<UserSelectButton
checked={todoAssignUserId.value == user.id}
user={user}
/>
</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>
<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
Todos
</h1>
<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
<li>
<TodoList
onNewButtonClicked={() => {
console.log('shared new')
showAddTodoDialog.value = true
todoAssignUserId.value = null
}}
user={unassignedUser}
/>
</li>
{Object.values(users).map((u) => (
<li>
<TodoList
onNewButtonClicked={() => {
showAddTodoDialog.value = true
todoAssignUserId.value = u.id
}}
user={u}
/>
</li>
))}
</ul>
</main>
)
}

74
islands/TodoList.tsx Normal file
View file

@ -0,0 +1,74 @@
import { Todo, UserWithTodos } from '@homeman/models.ts'
import { JSX } from 'preact'
import { Button } from '@homeman/components/Button.tsx'
import { Avatar } from '@homeman/components/Avatar.tsx'
export interface Props {
user: UserWithTodos
onNewButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
}
export function TodoList(
{ onNewButtonClicked, user: { avatarUrl, assignedTodos, name, color } }:
Props,
) {
const todoItem = (
{ id, doneAt, className, description, hideDone }:
& Pick<Todo, 'description' | 'id' | 'doneAt'>
& {
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 gap-2`}
>
{JSON.stringify(doneAt)}
<span class='text-xl'>{description}</span>
{(hideDone || doneAt != null) ? '' : (
<Button
onClick={async () => {
await fetch('/api/todo/done', {
method: 'POST',
body: JSON.stringify({ id }),
})
// TODO: remove the todoitem?
// TODO: confetti
}}
>
Done
</Button>
)}
</li>
)
return (
<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
<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={onNewButtonClicked}
>
+ 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>
)
}

View file

@ -1,27 +1,71 @@
import { Handlers } from '$fresh/server.ts' import { Handlers } from '$fresh/server.ts'
import { db, Todo, TodoModel } from '@homeman/models.ts' import { db, Todo, TodoModel } from '@homeman/models.ts'
import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts' import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
const TodoCreate = TodoModel.omit({ id: true, createdAt: true }) const TodoPayload = TodoModel.partial({ id: true }).omit({ createdAt: true })
type TodoPayload = z.infer<typeof TodoPayload>
async function createOrUpdate(todo: TodoPayload) {
if (!todo.id) {
const newTodo: Todo = {
...todo,
id: ulid(),
createdAt: new Date(),
}
return await db.todos.create({ data: newTodo })
} else {
return await db.todos.update({ where: { id: todo.id }, data: todo })
}
}
export const handler: Handlers<Todo | null> = { export const handler: Handlers<Todo | null> = {
async POST(req, _ctx) { async POST(req, _ctx) {
const todo = TodoCreate.parse(await req.json()) if (req.headers.get('content-type')?.includes('json')) {
const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() } const result = await createOrUpdate(
const result = await db.todos.create({ data: newTodo }) TodoPayload.parse(await req.json()),
return new Response(JSON.stringify(result)) )
}, return new Response(JSON.stringify(result))
async PUT(req, _ctx) { } else {
const todo = TodoModel.parse(await req.json()) const form = await req.formData()
const result = await db.todos.update({ data: todo }) const id = form.get('id')?.toString()
return new Response(JSON.stringify(result))
const doneAt = form.get('doneAt')
console.log('todo POST doneAt:', doneAt)
const todo = TodoPayload.parse({
id: id,
emoji: form.get('emoji')?.toString() || null,
doneAt: form.get('doneAt')?.toString() || null,
description: form.get('description')?.toString(),
assigneeUserId: form.get('assigneeUserId')?.toString(),
})
if (!id) {
delete todo.id
}
await createOrUpdate(todo)
const url = new URL(req.url)
url.pathname = '/'
return Response.redirect(url, 303)
}
}, },
async DELETE(req, _ctx) { async DELETE(req, _ctx) {
const todoData = TodoModel.pick({ id: true }).parse(await req.json()) // TODO: form or query params or json
let data
if (req.headers.get('content-type')?.includes('json')) {
data = await req.json()
} else {
data = { id: new URL(req.url).searchParams.get('id') }
}
const todoData = TodoModel.pick({ id: true }).parse(data)
const result = await db.todos.delete({ where: todoData }) const result = await db.todos.delete({ where: todoData })
return new Response(JSON.stringify(result)) return new Response(JSON.stringify(result))
}, },
async GET(req, _ctx) { async GET(req, _ctx) {
// TODO: json or query params
const data = await req.json().catch(() => {}) const data = await req.json().catch(() => {})
const todoData = TodoModel.pick({ id: true }).safeParse(data) const todoData = TodoModel.pick({ id: true }).safeParse(data)
if (todoData.success) { if (todoData.success) {

14
routes/api/todo/done.ts Normal file
View file

@ -0,0 +1,14 @@
import { Handlers } from '$fresh/server.ts'
import { db, TodoModel } from '@homeman/models.ts'
const Model = TodoModel.pick({ id: true })
export const handler: Handlers = {
async POST(req, _ctx) {
const { id } = Model.parse(await req.json())
const todo = await db.todos.findFirst({ where: { id } })
todo.doneAt = new Date()
const newTodo = await db.todos.update({ where: { id }, data: todo })
return new Response(JSON.stringify(newTodo))
},
}

View file

@ -3,98 +3,66 @@ import { db, User, UserModel } from '@homeman/models.ts'
import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts' import { ulid } from 'https://deno.land/x/ulid@v0.3.0/mod.ts'
import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts' import { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
const UserCreate = UserModel.omit({ id: true, createdAt: true }) const UserPayload = UserModel.partial({ id: true }).omit({ createdAt: true })
type UserCreate = z.infer<typeof UserCreate> type UserPayload = z.infer<typeof UserPayload>
async function createOrUpdate(user: UserPayload) {
if (user.color && user.color[0] == '#') {
user.color = user.color.substring(1)
}
if (!user.id) {
const newUser: User = { ...user, id: ulid(), createdAt: new Date() }
return await db.users.create({ data: newUser })
} else {
return await db.users.update({ where: { id: user.id }, data: user })
}
}
export const handler: Handlers<User | null> = { export const handler: Handlers<User | null> = {
async POST(req, _ctx) { async POST(req, _ctx) {
// handle json or form posts
let user: UserCreate
let redirectInstead = false
const newId = ulid()
if (req.headers.get('content-type')?.includes('json')) { if (req.headers.get('content-type')?.includes('json')) {
user = UserCreate.parse(req.json()) const result = await createOrUpdate(UserPayload.parse(await req.json()))
return new Response(JSON.stringify(result))
} else { } else {
redirectInstead = true
const form = await req.formData() const form = await req.formData()
const avatarFile = form.get('avatar') as File const id = form.get('id')?.toString()
if (!avatarFile) {
const avatarFile = form.get('avatar') as (File | null)
// validate png/jpg/webp?
if (!avatarFile && !id) {
throw new Error('invalid avatar file') throw new Error('invalid avatar file')
} }
// TODO: validate png/jpg/webp? const user = UserPayload.parse({
console.log(avatarFile.type) id: id,
await Deno.mkdir('./static/uploads', { recursive: true })
const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`
const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
create: true,
write: true,
})
await avatarFile.stream().pipeTo(localAvatarFile.writable)
user = UserCreate.parse({
name: form.get('name')?.toString(), name: form.get('name')?.toString(),
avatarUrl: `/uploads/${name}`,
color: form.get('color')?.toString(), color: form.get('color')?.toString(),
avatarUrl: '',
}) })
} if (!id) {
delete user.id
// post processing
if (user.color && user.color[0] == '#') {
user.color = user.color.substring(1)
}
const newUser: User = { ...user, id: newId, createdAt: new Date() }
const result = await db.users.create({ data: newUser })
if (redirectInstead) {
const url = new URL(req.url)
url.pathname = '/admin'
return Response.redirect(url, 303)
} else {
return new Response(JSON.stringify(result))
}
},
async PUT(req, _ctx) {
// TODO: form or json
let model = UserModel.omit({ createdAt: true }).partial({ avatarUrl: true })
let user: z.infer<typeof model>
let redirectInstead = false
if (req.headers.get('content-type')?.includes('json')) {
// TODO: ensure missing fields don't get set to null?
user = model.parse(req.json())
} else {
redirectInstead = true
const form = await req.formData()
user = model.parse({
id: form.get('id')?.toString(),
name: form.get('name')?.toString(),
avatarUrl: null,
color: form.get('color')?.toString(),
})
const avatarFile = form.get('avatar') as (File | null)
if (!avatarFile) {
user.avatarUrl =
(await db.users.findFirst({ where: { id: user.id } })).avatarUrl
} else { } else {
// validate png/jpg/webp? const curUser = await db.users.findFirst({ where: { id: id } })
console.log(avatarFile.type) user.avatarUrl = curUser.avatarUrl
}
if (avatarFile) {
await Deno.mkdir('./static/uploads', { recursive: true }) await Deno.mkdir('./static/uploads', { recursive: true })
const name = `${user.id}-${avatarFile.name.replaceAll('/', '')}` // TODO: id will be undefined here
const name = `${id}-${avatarFile.name.replaceAll('/', '')}`
const localAvatarFile = await Deno.open(`./static/uploads/${name}`, { const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
create: true, create: true,
write: true, write: true,
}) })
await avatarFile.stream().pipeTo(localAvatarFile.writable) await avatarFile.stream().pipeTo(localAvatarFile.writable)
user.avatarUrl = `/uploads/${name}`
} }
}
const result = await db.users.update({ data: user }) await createOrUpdate(user)
if (redirectInstead) {
const url = new URL(req.url) const url = new URL(req.url)
url.pathname = '/admin' url.pathname = '/admin'
return Response.redirect(url, 303) return Response.redirect(url, 303)
} else {
return new Response(JSON.stringify(result))
} }
}, },
async DELETE(req, _ctx) { async DELETE(req, _ctx) {

View file

@ -1,23 +1,19 @@
import { Handlers, PageProps } from '$fresh/server.ts' import { Handlers, PageProps } from '$fresh/server.ts'
import { db, Todo, User, UserWithTodos } from '@homeman/models.ts' import { db, Todo, UserWithTodos } from '@homeman/models.ts'
import { TodoList } from '@homeman/components/TodoList.tsx' import Dashboard from '@homeman/islands/Dashboard.tsx'
const unassignedUserPlaceholder: User = {
id: '',
createdAt: new Date(),
name: 'Shared',
avatarUrl: 'http://placekitten.com/512/512',
color: '888888',
}
interface Data { interface Data {
users: UserWithTodos[] users: Record<string, UserWithTodos>
unassignedTodos: Todo[] unassignedTodos: Todo[]
} }
export const handler: Handlers = { export const handler: Handlers = {
async GET(_req, ctx) { async GET(_req, ctx) {
const users = await db.users.findMany({ include: { assignedTodos: true } }) const users = Object.fromEntries(
(await db.users.findMany({ include: { assignedTodos: true } })).map(
(u) => [u.id, u],
),
)
const unassignedTodos = await db.todos.findMany({ const unassignedTodos = await db.todos.findMany({
where: { assigneeUserId: null }, where: { assigneeUserId: null },
}) })
@ -25,28 +21,6 @@ export const handler: Handlers = {
}, },
} }
export default function Home( export default function Home({ data }: PageProps<Data>) {
{ data: { users, unassignedTodos } }: PageProps<Data>, return <Dashboard {...data} />
) {
const unassignedUser: UserWithTodos = {
...unassignedUserPlaceholder,
assignedTodos: unassignedTodos,
}
return (
<main class='flex flex-col'>
<h1 class='p-5 border-b-2 border-stone-500/20 text-2xl'>
Todos
</h1>
<ul class='p-4 relative flex overflow-x-scroll max-w-screen'>
<li>
<TodoList user={unassignedUser} />
</li>
{users.map((u) => (
<li>
<TodoList user={u} />
</li>
))}
</ul>
</main>
)
} }