Closer...
This commit is contained in:
parent
f83e80ec9d
commit
2ba678c4a3
GPG key ID:
5B2020A0F9921EF4
|
|
@ -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 $Dashboard from './islands/Dashboard.tsx'
|
||||
import * as $TodoList from './islands/TodoList.tsx'
|
||||
import { type Manifest } from '$fresh/server.ts'
|
||||
|
||||
|
|
@ -31,6 +32,7 @@ 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,
|
||||
|
|
|
|||
146
islands/Dashboard.tsx
Normal file
146
islands/Dashboard.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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 { 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>
|
||||
onNewButtonClicked: JSX.MouseEventHandler<HTMLButtonElement>
|
||||
}
|
||||
|
||||
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 = (
|
||||
{ className, description, hideDone }: Pick<Todo, 'description'> & {
|
||||
className?: string
|
||||
|
|
@ -35,79 +30,6 @@ export function TodoList(
|
|||
)
|
||||
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'}
|
||||
|
|
@ -118,10 +40,7 @@ export function TodoList(
|
|||
</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
|
||||
}}
|
||||
onClick={onNewButtonClicked}
|
||||
>
|
||||
+ New
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,26 @@
|
|||
import { Handlers, PageProps } from '$fresh/server.ts'
|
||||
import { db, Todo, User, UserWithTodos } from '@homeman/models.ts'
|
||||
import { TodoList } from '@homeman/islands/TodoList.tsx'
|
||||
|
||||
const unassignedUserPlaceholder: User = {
|
||||
id: '',
|
||||
createdAt: new Date(),
|
||||
name: 'Shared',
|
||||
avatarUrl: 'http://placekitten.com/512/512',
|
||||
color: '888888',
|
||||
}
|
||||
import Dashboard from '@homeman/islands/Dashboard.tsx'
|
||||
|
||||
interface Data {
|
||||
users: UserWithTodos[]
|
||||
allUsers: Record<string, User>
|
||||
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 },
|
||||
})
|
||||
const allUsers: Data['allUsers'] = {}
|
||||
for (const u of users) {
|
||||
allUsers[u.id] = u
|
||||
}
|
||||
return ctx.render({ users, unassignedTodos, allUsers })
|
||||
return ctx.render({ users, unassignedTodos })
|
||||
},
|
||||
}
|
||||
|
||||
export default function Home(
|
||||
{ data: { users, unassignedTodos, allUsers } }: 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} users={allUsers} />
|
||||
</li>
|
||||
{users.map((u) => (
|
||||
<li>
|
||||
<TodoList user={u} users={allUsers} />
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</main>
|
||||
)
|
||||
export default function Home({ data }: PageProps<Data>) {
|
||||
return <Dashboard {...data} />
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue