Put with forms is a problem?

This commit is contained in:
Daniel Flanagan 2024-01-07 16:21:14 -06:00
parent 9534bab6ce
commit 0879b52720
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
4 changed files with 165 additions and 41 deletions

View file

@ -26,7 +26,7 @@ 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'>
<img <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'} src={avatarUrl != null ? avatarUrl : 'https://placehold.co/512x512'}
title={`${name}'s avatar`} title={`${name}'s avatar`}
/> />

View file

@ -1,4 +1,5 @@
import { createRef } from 'preact' import { createRef } from 'preact'
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'
@ -17,7 +18,9 @@ async function promptDeleteUser(id: string, name: string) {
} }
export function Admin({ users, todos }: Props) { export function Admin({ users, todos }: Props) {
const editUser: Signal<User | null> = useSignal(null)
const addUserDialog = createRef<HTMLDialogElement>() const addUserDialog = createRef<HTMLDialogElement>()
const editUserDialog = createRef<HTMLDialogElement>()
const usersById: Record<string, User> = {} const usersById: Record<string, User> = {}
for (const u of users) { for (const u of users) {
usersById[u.id] = u usersById[u.id] = u
@ -42,7 +45,7 @@ export function Admin({ users, todos }: Props) {
action='/api/user' action='/api/user'
method='post' method='post'
encType='multipart/form-data' encType='multipart/form-data'
onSubmit={() => console.log('Submitting...')} onSubmit={() => console.log('Submitting new user...')}
> >
<Label for='name'> <Label for='name'>
Name Name
@ -66,6 +69,55 @@ export function Admin({ users, todos }: Props) {
</footer> </footer>
</form> </form>
</dialog> </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 '> <header class='flex items-center border-b-2 border-stone-500/20 '>
<h1 class='p-5 text-2xl'> <h1 class='p-5 text-2xl'>
Users ({users.length}) Users ({users.length})
@ -84,21 +136,23 @@ export function Admin({ users, todos }: Props) {
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{users.map(({ id, name, avatarUrl, color }) => ( {users.map((user) => {
const { id, name, avatarUrl, color } = user
return (
<tr> <tr>
<td>{name}</td> <td>{name}</td>
<td> <td>
{avatarUrl == null {avatarUrl == null
? 'None' ? 'None'
: <img class='h-16 w-16' src={avatarUrl} />} : <img class='h-16 w-16 object-cover' src={avatarUrl} />}
</td> </td>
<td style={`color: #${color}`}> <td style={`color: #${color}`}>
#{color} #{color}
</td> </td>
<td> <td class=''>
<Button <Button
title='Delete' title='Delete'
className='py-2' className='py-2 mr-2'
onClick={() => promptDeleteUser(id, name)} onClick={() => promptDeleteUser(id, name)}
> >
<svg <svg
@ -116,9 +170,33 @@ export function Admin({ users, todos }: Props) {
/> />
</svg> </svg>
</Button> </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> </td>
</tr> </tr>
))} )
})}
</tbody> </tbody>
</table> </table>
<header class='flex items-center border-b-2 border-stone-500/20 '> <header class='flex items-center border-b-2 border-stone-500/20 '>

View file

@ -19,8 +19,8 @@ const User = z.object({
createdAt: z.date(), createdAt: z.date(),
name: z.string(), name: z.string(),
avatarUrl: z.string().nullable(), avatarUrl: z.string(),
color: z.string().nullable(), color: z.string(),
}) })
export const UserModel = User export const UserModel = User
export type User = z.infer<typeof User> export type User = z.infer<typeof User>

View file

@ -10,10 +10,12 @@ export const handler: Handlers<User | null> = {
async POST(req, _ctx) { async POST(req, _ctx) {
// handle json or form posts // handle json or form posts
let user: UserCreate let user: UserCreate
let redirectInstead = false
const newId = ulid() const newId = ulid()
if (req.headers.get('content-type')?.includes('json')) { if (req.headers.get('content-type')?.includes('json')) {
user = UserCreate.parse(req.json()) user = UserCreate.parse(req.json())
} else { } else {
redirectInstead = true
const form = await req.formData() const form = await req.formData()
const avatarFile = form.get('avatar') as File const avatarFile = form.get('avatar') as File
if (!avatarFile) { if (!avatarFile) {
@ -21,6 +23,7 @@ export const handler: Handlers<User | null> = {
} }
// validate png/jpg/webp? // validate png/jpg/webp?
console.log(avatarFile.type)
await Deno.mkdir('./static/uploads', { recursive: true }) await Deno.mkdir('./static/uploads', { recursive: true })
const name = `${newId}-${avatarFile.name.replaceAll('/', '')}` const name = `${newId}-${avatarFile.name.replaceAll('/', '')}`
const localAvatarFile = await Deno.open(`./static/uploads/${name}`, { 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 newUser: User = { ...user, id: newId, createdAt: new Date() }
const result = await db.users.create({ data: newUser }) 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)) return new Response(JSON.stringify(result))
}
}, },
async PUT(req, _ctx) { async PUT(req, _ctx) {
// TODO: form or json // 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 }) const result = await db.users.update({ data: user })
if (redirectInstead) {
const url = new URL(req.url)
url.pathname = '/admin'
return Response.redirect(url, 303)
} else {
return new Response(JSON.stringify(result)) return new Response(JSON.stringify(result))
}
}, },
async DELETE(req, _ctx) { async DELETE(req, _ctx) {
// TODO: form or query params or json // TODO: form or query params or json