Put with forms is a problem?
This commit is contained in:
parent
9534bab6ce
commit
0879b52720
GPG key ID:
5B2020A0F9921EF4
|
|
@ -26,7 +26,7 @@ export function TodoList(
|
|||
return (
|
||||
<div class='p-2 w-1/4 min-w-[15rem] relative flex flex-col grow-0'>
|
||||
<img
|
||||
class='rounded-full w-full mb-2'
|
||||
class='rounded-full w-[15rem] h-[15rem] mb-2 object-cover'
|
||||
src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
|
||||
title={`${name}'s avatar`}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { createRef } 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'
|
||||
|
|
@ -17,7 +18,9 @@ async function promptDeleteUser(id: string, name: string) {
|
|||
}
|
||||
|
||||
export function Admin({ users, todos }: Props) {
|
||||
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
|
||||
|
|
@ -42,7 +45,7 @@ export function Admin({ users, todos }: Props) {
|
|||
action='/api/user'
|
||||
method='post'
|
||||
encType='multipart/form-data'
|
||||
onSubmit={() => console.log('Submitting...')}
|
||||
onSubmit={() => console.log('Submitting new user...')}
|
||||
>
|
||||
<Label for='name'>
|
||||
Name
|
||||
|
|
@ -66,6 +69,55 @@ export function Admin({ users, todos }: Props) {
|
|||
</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'>
|
||||
<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'
|
||||
// Form contains enctype=multipart/form-data, but does not contain method=post.
|
||||
// Submitting normally with method=GET and no enctype instead.
|
||||
method='put'
|
||||
encType='multipart/form-data'
|
||||
onSubmit={() => console.log('Submitting edit user...')}
|
||||
>
|
||||
<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})
|
||||
|
|
@ -84,41 +136,67 @@ export function Admin({ users, todos }: Props) {
|
|||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map(({ id, name, avatarUrl, color }) => (
|
||||
<tr>
|
||||
<td>{name}</td>
|
||||
<td>
|
||||
{avatarUrl == null
|
||||
? 'None'
|
||||
: <img class='h-16 w-16' src={avatarUrl} />}
|
||||
</td>
|
||||
<td style={`color: #${color}`}>
|
||||
#{color}
|
||||
</td>
|
||||
<td>
|
||||
<Button
|
||||
title='Delete'
|
||||
className='py-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'
|
||||
{users.map((user) => {
|
||||
const { id, name, avatarUrl, color } = user
|
||||
return (
|
||||
<tr>
|
||||
<td>{name}</td>
|
||||
<td>
|
||||
{avatarUrl == null
|
||||
? 'None'
|
||||
: <img class='h-16 w-16 object-cover' src={avatarUrl} />}
|
||||
</td>
|
||||
<td style={`color: #${color}`}>
|
||||
#{color}
|
||||
</td>
|
||||
<td class=''>
|
||||
<Button
|
||||
title='Delete'
|
||||
className='py-2 mr-2'
|
||||
onClick={() => promptDeleteUser(id, name)}
|
||||
>
|
||||
<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>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
<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>
|
||||
</Button>
|
||||
<Button
|
||||
title='Edit'
|
||||
className='py-2'
|
||||
onClick={() => {
|
||||
editUser.value = user
|
||||
editUserDialog.current?.showModal()
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
</Button>
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
<header class='flex items-center border-b-2 border-stone-500/20 '>
|
||||
|
|
|
|||
|
|
@ -19,8 +19,8 @@ const User = z.object({
|
|||
createdAt: z.date(),
|
||||
|
||||
name: z.string(),
|
||||
avatarUrl: z.string().nullable(),
|
||||
color: z.string().nullable(),
|
||||
avatarUrl: z.string(),
|
||||
color: z.string(),
|
||||
})
|
||||
export const UserModel = User
|
||||
export type User = z.infer<typeof User>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,12 @@ 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())
|
||||
} else {
|
||||
redirectInstead = true
|
||||
const form = await req.formData()
|
||||
const avatarFile = form.get('avatar') as File
|
||||
if (!avatarFile) {
|
||||
|
|
@ -21,6 +23,7 @@ export const handler: Handlers<User | null> = {
|
|||
}
|
||||
|
||||
// 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}`, {
|
||||
|
|
@ -43,13 +46,56 @@ export const handler: Handlers<User | null> = {
|
|||
|
||||
const newUser: User = { ...user, id: newId, createdAt: new Date() }
|
||||
const result = await db.users.create({ data: newUser })
|
||||
return new Response(JSON.stringify(result))
|
||||
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
|
||||
const user = UserModel.parse(await req.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 {
|
||||
// validate png/jpg/webp?
|
||||
console.log(avatarFile.type)
|
||||
await Deno.mkdir('./static/uploads', { recursive: true })
|
||||
const name = `${user.id}-${avatarFile.name.replaceAll('/', '')}`
|
||||
const localAvatarFile = await Deno.open(`./static/uploads/${name}`, {
|
||||
create: true,
|
||||
write: true,
|
||||
})
|
||||
await avatarFile.stream().pipeTo(localAvatarFile.writable)
|
||||
}
|
||||
}
|
||||
|
||||
const result = await db.users.update({ data: user })
|
||||
return new Response(JSON.stringify(result))
|
||||
if (redirectInstead) {
|
||||
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) {
|
||||
// TODO: form or query params or json
|
||||
|
|
|
|||
Loading…
Reference in a new issue