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,
	PlusOutline,
	PlusSolid,
	TrashOutline,
} from 'preact-heroicons'
import { Table } from '@homeman/components/Table.tsx'
import { SectionHead } from '@homeman/components/SectionHead.tsx'
import { Avatar } from '@homeman/components/Avatar.tsx'

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()
	}
}

async function promptDeleteTodo(id: string, description: string) {
	if (confirm(`Are you sure you want to delete '${description}' (${id})?`)) {
		await fetch(`/api/todo`, {
			method: 'DELETE',
			headers: { 'content-type': 'application/json' },
			body: JSON.stringify({ id }),
		})
		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'>
			<header class='flex items-center border-b-2 border-stone-500/20 '>
				<h1 class='p-5 text-2xl'>
					Administration Page
				</h1>
			</header>
			<Dialog
				headerTitle='Add user'
				show={showAddUserDialog.value}
				onClose={() => showAddUserDialog.value = false}
			>
				<UserForm
					onCancelButtonClicked={() => showAddUserDialog.value = false}
					userData={null}
				/>
			</Dialog>
			<Dialog
				headerTitle={`Edit '${editUser.value?.name}'`}
				show={!!editUser.value}
				onClose={() => editUser.value = null}
			>
				<UserForm
					onCancelButtonClicked={() => editUser.value = null}
					userData={editUser.value}
				/>
			</Dialog>
			<SectionHead text={`Users (${Object.keys(users).length})`}>
				<Button onClick={() => showAddUserDialog.value = true}>
					<PlusOutline class='w-6 h-6' />
				</Button>
			</SectionHead>
			<Table>
				<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'
										: <Avatar className='h-[64px] w-[64px]' src={avatarUrl} />}
								</td>
								<td style={`color: #${color}`}>
									#{color}
								</td>
								<td class=''>
									<Button
										title='Delete'
										className='py-2 mr-2 hover:bg-rose-500'
										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>
			<SectionHead text={`Todos (${todos.length})`} />
			<Table>
				<thead>
					<tr>
						<th>Description</th>
						<th>Assignee</th>
						<th>Done At</th>
						<th>Emoji</th>
						<th>Actions</th>
					</tr>
				</thead>
				<tbody>
					{Object.entries(todos).map((
						[_index, { id, emoji, doneAt, description, assigneeUserId }],
					) => (
						<tr>
							<td>{description}</td>
							<td
								style={`color: #${
									assigneeUserId == null
										? 'ffffff'
										: users[assigneeUserId]?.color
								}`}
							>
								{assigneeUserId == null
									? 'Unassigned'
									: users[assigneeUserId]?.name}
							</td>
							<td>{doneAt == null ? 'Not Done' : doneAt.toLocaleString()}</td>
							<td>{emoji || 'No Emoji'}</td>
							<td>
								<Button
									title='Delete'
									className='py-2 mr-2 hover:bg-rose-500'
									onClick={() => promptDeleteTodo(id, description)}
								>
									<TrashOutline class='w-6 h-6' />
								</Button>
							</td>
						</tr>
					))}
				</tbody>
			</Table>
		</main>
	)
}