homeman-deno/islands/Admin.tsx

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, TrashOutline } from 'preact-heroicons'

export interface Props {
	users: Record<string, User>
	todos: Record<string, Todo>
}

async function promptDeleteUser(id: string, name: string) {
	if (confirm(`Are you sure you want to delete ${name} (${id})?`)) {
		await fetch(`/api/user?id=${id}`, { method: 'DELETE' })
		location.reload()
	}
}

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)

	return (
		<main class='flex flex-col'>
			<Dialog
				headerTitle='Add user'
				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
				show={showAddUserDialog.value}
				onClose={() => showAddUserDialog.value = false}
			>
				<UserForm
					onCancelButtonClicked={() => showAddUserDialog.value = false}
					userData={null}
				/>
			</Dialog>
			<Dialog
				headerTitle={`Edit '${editUser.value?.name}'`}
				class='rounded drop-shadow-lg backdrop:bg-stone-500/90'
				show={!!editUser.value}
				onClose={() => editUser.value = null}
			>
				<UserForm
					userData={editUser.value}
					onCancelButtonClicked={() => editUser.value = null}
				/>
			</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={() => showAddUserDialog.value = true}>
					Add User
				</Button>
			</header>
			<table class='border-separate [border-spacing:1.25rem] text-left'>
				<thead>
					<tr>
						<th>Name</th>
						<th>Avatar</th>
						<th>Color</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					{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} />}
								</td>
								<td style={`color: #${color}`}>
									#{color}
								</td>
								<td class=''>
									<Button
										title='Delete'
										className='py-2 mr-2'
										onClick={() => promptDeleteUser(id, name)}
									>
										<TrashOutline class='w-6 h-6' />
									</Button>
									<Button
										title='Edit'
										className='py-2'
										onClick={() => editUser.value = user}
									>
										<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>
			</header>
			<table class='border-separate [border-spacing:1.25rem] text-left'>
				<thead>
					<tr>
						<th>Description</th>
						<th>Assignee</th>
					</tr>
				</thead>
				<tbody>
					{Object.entries(todos).map((
						[_id, { description, assigneeUserId }],
					) => (
						<tr>
							<td>{description}</td>
							<td>
								{assigneeUserId == null
									? 'Unassigned'
									: users[assigneeUserId]?.name}
							</td>
						</tr>
					))}
				</tbody>
			</table>
		</main>
	)
}