Merge remote-tracking branch 'origin/master'
This commit is contained in:
commit
5e79a4cebf
GPG key ID:
5B2020A0F9921EF4
12
components/Avatar.tsx
Normal file
12
components/Avatar.tsx
Normal 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
44
components/Dialog.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,26 +1,14 @@
|
|||
// import { JSX } from 'preact'
|
||||
// import { IS_BROWSER } from '$fresh/runtime.ts'
|
||||
|
||||
import { Bars3Outline } from 'preact-heroicons'
|
||||
import { Clock } from '@homeman/islands/Clock.tsx'
|
||||
|
||||
export function Nav(/* props: {} */) {
|
||||
return (
|
||||
<nav class='bg-stone-200 dark:bg-stone-800 flex justify-items-start items-center'>
|
||||
<button class='p-4 hover:bg-stone-500/20'>
|
||||
<svg
|
||||
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>
|
||||
<Bars3Outline class='h-6 w-6' />
|
||||
</button>
|
||||
<a class='p-4 hover:bg-stone-500/20' href='/'>
|
||||
Flanagan Family
|
||||
|
|
|
|||
20
components/SectionHead.tsx
Normal file
20
components/SectionHead.tsx
Normal 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
26
components/Select.tsx
Normal 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
14
components/Table.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -29,6 +29,7 @@
|
|||
"tailwindcss": "npm:tailwindcss@3.3.5",
|
||||
"tailwindcss/": "npm:/tailwindcss@3.3.5/",
|
||||
"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/",
|
||||
"@homeman/": "./"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -7,12 +7,15 @@ import * as $_app from './routes/_app.tsx'
|
|||
import * as $admin from './routes/admin.tsx'
|
||||
import * as $api_joke from './routes/api/joke.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 $greet_name_ from './routes/greet/[name].tsx'
|
||||
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 $Dashboard from './islands/Dashboard.tsx'
|
||||
import * as $TodoList from './islands/TodoList.tsx'
|
||||
import { type Manifest } from '$fresh/server.ts'
|
||||
|
||||
const manifest = {
|
||||
|
|
@ -22,6 +25,7 @@ const manifest = {
|
|||
'./routes/admin.tsx': $admin,
|
||||
'./routes/api/joke.ts': $api_joke,
|
||||
'./routes/api/todo.ts': $api_todo,
|
||||
'./routes/api/todo/done.ts': $api_todo_done,
|
||||
'./routes/api/user.ts': $api_user,
|
||||
'./routes/greet/[name].tsx': $greet_name_,
|
||||
'./routes/index.tsx': $index,
|
||||
|
|
@ -30,6 +34,8 @@ const manifest = {
|
|||
'./islands/Admin.tsx': $Admin,
|
||||
'./islands/Clock.tsx': $Clock,
|
||||
'./islands/Counter.tsx': $Counter,
|
||||
'./islands/Dashboard.tsx': $Dashboard,
|
||||
'./islands/TodoList.tsx': $TodoList,
|
||||
},
|
||||
baseUrl: import.meta.url,
|
||||
} satisfies Manifest
|
||||
|
|
|
|||
|
|
@ -1,13 +1,23 @@
|
|||
import { createRef } from 'preact'
|
||||
import { JSX } from 'preact'
|
||||
import { type Signal, useSignal } from '@preact/signals'
|
||||
import { Todo, User } from '@homeman/models.ts'
|
||||
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,
|
||||
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: User[]
|
||||
todos: Todo[]
|
||||
users: Record<string, User>
|
||||
todos: Record<string, Todo>
|
||||
}
|
||||
|
||||
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) {
|
||||
const showAddUserDialog = useSignal(false)
|
||||
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 (
|
||||
<main class='flex flex-col'>
|
||||
<header class='flex items-center border-b-2 border-stone-500/20 '>
|
||||
|
|
@ -32,109 +77,32 @@ export function Admin({ users, todos }: Props) {
|
|||
Administration Page
|
||||
</h1>
|
||||
</header>
|
||||
<dialog
|
||||
class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
|
||||
ref={addUserDialog}
|
||||
<Dialog
|
||||
headerTitle='Add user'
|
||||
show={showAddUserDialog.value}
|
||||
onClose={() => showAddUserDialog.value = false}
|
||||
>
|
||||
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
|
||||
<h1 class='text-xl grow'>Add user</h1>
|
||||
<Button
|
||||
onClick={() => addUserDialog.current?.close()}
|
||||
class='text-xl p-4 border-b-2 mr-4'
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</header>
|
||||
<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}
|
||||
<UserForm
|
||||
onCancelButtonClicked={() => showAddUserDialog.value = false}
|
||||
userData={null}
|
||||
/>
|
||||
</Dialog>
|
||||
<Dialog
|
||||
headerTitle={`Edit '${editUser.value?.name}'`}
|
||||
show={!!editUser.value}
|
||||
onClose={() => editUser.value = null}
|
||||
>
|
||||
<header class='p-4 flex w-full items-center border-b-2 border-stone-500/20'>
|
||||
<h1 class='text-xl grow'>{`Edit '${editUser.value?.name}'`}</h1>
|
||||
<Button
|
||||
onClick={() => editUserDialog.current?.close()}
|
||||
class='text-xl p-4 border-b-2 mr-4'
|
||||
>
|
||||
✕
|
||||
</Button>
|
||||
</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
|
||||
<UserForm
|
||||
onCancelButtonClicked={() => editUser.value = null}
|
||||
userData={editUser.value}
|
||||
/>
|
||||
</Dialog>
|
||||
<SectionHead text={`Users (${users.length})`}>
|
||||
<Button onClick={() => showAddUserDialog.value = true}>
|
||||
<PlusOutline class='w-6 h-6' />
|
||||
</Button>
|
||||
</header>
|
||||
<table class='border-separate [border-spacing:1.25rem] text-left'>
|
||||
</SectionHead>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
|
|
@ -144,15 +112,15 @@ export function Admin({ users, todos }: Props) {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user) => {
|
||||
const { id, name, avatarUrl, color } = user
|
||||
{Object.entries(users).map(([id, user]) => {
|
||||
const { name, avatarUrl, color } = user
|
||||
return (
|
||||
<tr>
|
||||
<td>{name}</td>
|
||||
<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}
|
||||
|
|
@ -163,57 +131,23 @@ export function Admin({ users, todos }: Props) {
|
|||
className='py-2 mr-2'
|
||||
onClick={() => promptDeleteUser(id, name)}
|
||||
>
|
||||
<svg
|
||||
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>
|
||||
<TrashOutline class='w-6 h-6' />
|
||||
</Button>
|
||||
<Button
|
||||
title='Edit'
|
||||
className='py-2'
|
||||
onClick={() => {
|
||||
editUser.value = user
|
||||
editUserDialog.current?.showModal()
|
||||
}}
|
||||
onClick={() => editUser.value = user}
|
||||
>
|
||||
<svg
|
||||
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>
|
||||
<PencilSquareOutline class='w-6 h-6' />
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<header class='flex items-center border-b-2 border-stone-500/20 '>
|
||||
<h1 class='p-5 text-2xl'>
|
||||
Todos ({todos.length})
|
||||
</h1>
|
||||
<Button>+</Button>
|
||||
</header>
|
||||
<table class='border-separate [border-spacing:1.25rem] text-left'>
|
||||
</Table>
|
||||
<SectionHead text={`Todos (${todos.length})`} />
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Description</th>
|
||||
|
|
@ -221,18 +155,20 @@ export function Admin({ users, todos }: Props) {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{todos.map(({ description, assigneeUserId }) => (
|
||||
{Object.entries(todos).map((
|
||||
[_id, { description, assigneeUserId }],
|
||||
) => (
|
||||
<tr>
|
||||
<td>{description}</td>
|
||||
<td>
|
||||
{assigneeUserId == null
|
||||
? 'Unassigned'
|
||||
: usersById[assigneeUserId]?.name}
|
||||
: users[assigneeUserId]?.name}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Table>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
155
islands/Dashboard.tsx
Normal file
155
islands/Dashboard.tsx
Normal 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
74
islands/TodoList.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,27 +1,71 @@
|
|||
import { Handlers } from '$fresh/server.ts'
|
||||
import { db, Todo, TodoModel } from '@homeman/models.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> = {
|
||||
async POST(req, _ctx) {
|
||||
const todo = TodoCreate.parse(await req.json())
|
||||
const newTodo: Todo = { ...todo, id: ulid(), createdAt: new Date() }
|
||||
const result = await db.todos.create({ data: newTodo })
|
||||
return new Response(JSON.stringify(result))
|
||||
},
|
||||
async PUT(req, _ctx) {
|
||||
const todo = TodoModel.parse(await req.json())
|
||||
const result = await db.todos.update({ data: todo })
|
||||
return new Response(JSON.stringify(result))
|
||||
if (req.headers.get('content-type')?.includes('json')) {
|
||||
const result = await createOrUpdate(
|
||||
TodoPayload.parse(await req.json()),
|
||||
)
|
||||
return new Response(JSON.stringify(result))
|
||||
} else {
|
||||
const form = await req.formData()
|
||||
const id = form.get('id')?.toString()
|
||||
|
||||
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) {
|
||||
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 })
|
||||
return new Response(JSON.stringify(result))
|
||||
},
|
||||
async GET(req, _ctx) {
|
||||
// TODO: json or query params
|
||||
const data = await req.json().catch(() => {})
|
||||
const todoData = TodoModel.pick({ id: true }).safeParse(data)
|
||||
if (todoData.success) {
|
||||
|
|
|
|||
14
routes/api/todo/done.ts
Normal file
14
routes/api/todo/done.ts
Normal 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))
|
||||
},
|
||||
}
|
||||
|
|
@ -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 { z } from 'https://deno.land/x/zod@v3.21.4/mod.ts'
|
||||
|
||||
const UserCreate = UserModel.omit({ id: true, createdAt: true })
|
||||
type UserCreate = z.infer<typeof UserCreate>
|
||||
const UserPayload = UserModel.partial({ id: true }).omit({ createdAt: true })
|
||||
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> = {
|
||||
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')) {
|
||||
user = UserCreate.parse(req.json())
|
||||
const result = await createOrUpdate(UserPayload.parse(await req.json()))
|
||||
return new Response(JSON.stringify(result))
|
||||
} else {
|
||||
redirectInstead = true
|
||||
const form = await req.formData()
|
||||
const avatarFile = form.get('avatar') as File
|
||||
if (!avatarFile) {
|
||||
const id = form.get('id')?.toString()
|
||||
|
||||
const avatarFile = form.get('avatar') as (File | null)
|
||||
// validate png/jpg/webp?
|
||||
if (!avatarFile && !id) {
|
||||
throw new Error('invalid avatar file')
|
||||
}
|
||||
|
||||
// TODO: validate png/jpg/webp?
|
||||
console.log(avatarFile.type)
|
||||
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({
|
||||
const user = UserPayload.parse({
|
||||
id: id,
|
||||
name: form.get('name')?.toString(),
|
||||
avatarUrl: `/uploads/${name}`,
|
||||
color: form.get('color')?.toString(),
|
||||
avatarUrl: '',
|
||||
})
|
||||
}
|
||||
|
||||
// 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
|
||||
if (!id) {
|
||||
delete user.id
|
||||
} else {
|
||||
// validate png/jpg/webp?
|
||||
console.log(avatarFile.type)
|
||||
const curUser = await db.users.findFirst({ where: { id: id } })
|
||||
user.avatarUrl = curUser.avatarUrl
|
||||
}
|
||||
|
||||
if (avatarFile) {
|
||||
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}`, {
|
||||
create: true,
|
||||
write: true,
|
||||
})
|
||||
await avatarFile.stream().pipeTo(localAvatarFile.writable)
|
||||
user.avatarUrl = `/uploads/${name}`
|
||||
}
|
||||
}
|
||||
|
||||
const result = await db.users.update({ data: user })
|
||||
if (redirectInstead) {
|
||||
await createOrUpdate(user)
|
||||
|
||||
const url = new URL(req.url)
|
||||
url.pathname = '/admin'
|
||||
return Response.redirect(url, 303)
|
||||
} else {
|
||||
return new Response(JSON.stringify(result))
|
||||
}
|
||||
},
|
||||
async DELETE(req, _ctx) {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,19 @@
|
|||
import { Handlers, PageProps } from '$fresh/server.ts'
|
||||
import { db, Todo, User, UserWithTodos } from '@homeman/models.ts'
|
||||
import { TodoList } from '@homeman/components/TodoList.tsx'
|
||||
|
||||
const unassignedUserPlaceholder: User = {
|
||||
id: '',
|
||||
createdAt: new Date(),
|
||||
name: 'Shared',
|
||||
avatarUrl: 'http://placekitten.com/512/512',
|
||||
color: '888888',
|
||||
}
|
||||
import { db, Todo, UserWithTodos } from '@homeman/models.ts'
|
||||
import Dashboard from '@homeman/islands/Dashboard.tsx'
|
||||
|
||||
interface Data {
|
||||
users: UserWithTodos[]
|
||||
users: Record<string, UserWithTodos>
|
||||
unassignedTodos: Todo[]
|
||||
}
|
||||
|
||||
export const handler: Handlers = {
|
||||
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({
|
||||
where: { assigneeUserId: null },
|
||||
})
|
||||
|
|
@ -25,28 +21,6 @@ export const handler: Handlers = {
|
|||
},
|
||||
}
|
||||
|
||||
export default function Home(
|
||||
{ data: { users, unassignedTodos } }: PageProps<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>
|
||||
)
|
||||
export default function Home({ data }: PageProps<Data>) {
|
||||
return <Dashboard {...data} />
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue