lytedev/homeman-deno
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Closer...

Browse source
This commit is contained in:
Daniel Flanagan 2024-01-11 16:23:09 -06:00
parent f83e80ec9d
commit 2ba678c4a3
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
4 changed files with 164 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
fresh.gen.ts
View file

@ -13,6 +13,7 @@ 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 * as $TodoList from './islands/TodoList.tsx'
import { type Manifest } from '$fresh/server.ts' import { type Manifest } from '$fresh/server.ts'
@ -31,6 +32,7 @@ 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, './islands/TodoList.tsx': $TodoList,
}, },
baseUrl: import.meta.url, baseUrl: import.meta.url,

146
islands/Dashboard.tsx Normal file
View file

@ -0,0 +1,146 @@
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<HTMLLabelElement> {
user: User
}
function UserSelectButton(
{ user: { id, avatarUrl, color }, ...props }: UserSelectButtonProps,
) {
const eid = `assigneeUserId_${id}`
return (
<>
<input
aria-hidden='true'
type='radio'
class='hidden left-[99999px]'
id={eid}
name='assigneeUserId'
value={id}
/>
<Label
{...props}
for={eid}
className='cursor-pointer hover:bg-gray-500/20 rounded p-2'
role='button'
aria-pressed='false'
>
<Avatar
className='mb-2'
src={avatarUrl}
/>
<span
style={`color: #${color};`}
class='font-semibold text-center'
>
Shared
</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 tabindex={0} user={unassignedUser} />
</li>
{Object.values(users).map(
(user, i) => {
return (
<li>
<UserSelectButton tabindex={i} 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>
)
}

93
islands/TodoList.tsx
View file

@ -1,22 +1,17 @@
import { Todo, User, UserWithTodos } from '@homeman/models.ts' import { Todo, UserWithTodos } from '@homeman/models.ts'
import { JSX } from 'preact'
import { Button } from '@homeman/components/Button.tsx' import { Button } from '@homeman/components/Button.tsx'
import { Dialog } from '@homeman/components/Dialog.tsx'
import { Avatar } from '@homeman/components/Avatar.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 { export interface Props {
user: UserWithTodos user: UserWithTodos
users: Record<string, User> onNewButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
} }
export function TodoList( export function TodoList(
{ users, user: { id, avatarUrl, assignedTodos, name, color } }: Props, { onNewButtonClicked, user: { avatarUrl, assignedTodos, name, color } }:
Props,
) { ) {
const todoAssignUserId: Signal<string | null> = useSignal(null)
const showAddTodoDialog = useSignal(false)
const todoItem = ( const todoItem = (
{ className, description, hideDone }: Pick<Todo, 'description'> & { { className, description, hideDone }: Pick<Todo, 'description'> & {
className?: string className?: string
@ -35,79 +30,6 @@ export function TodoList(
) )
return ( return (
<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'> <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 <Avatar
className='mb-2' className='mb-2'
src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'} src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
@ -118,10 +40,7 @@ export function TodoList(
</span> </span>
<button <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' 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={() => { onClick={onNewButtonClicked}
showAddTodoDialog.value = true
todoAssignUserId.value = id
}}
> >
+ New + New
</button> </button>

51
routes/index.tsx
View file

@ -1,57 +1,26 @@
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, User, UserWithTodos } from '@homeman/models.ts'
import { TodoList } from '@homeman/islands/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>
allUsers: Record<string, User>
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 },
}) })
const allUsers: Data['allUsers'] = {} return ctx.render({ users, unassignedTodos })
for (const u of users) {
allUsers[u.id] = u
}
return ctx.render({ users, unassignedTodos, allUsers })
}, },
} }
export default function Home( export default function Home({ data }: PageProps<Data>) {
{ data: { users, unassignedTodos, allUsers } }: 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} users={allUsers} />
</li>
{users.map((u) => (
<li>
<TodoList user={u} users={allUsers} />
</li>
))}
</ul>
</main>
)
} }