feat: add task creation board
This commit is contained in:
Urban Modig
@ -1,4 +1,4 @@
|
||||
import { cleanup, fireEvent, render, screen } from '@testing-library/react'
|
||||
import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react'
|
||||
import { afterEach, beforeEach, expect, test, vi } from 'vitest'
|
||||
import App from './App'
|
||||
|
||||
@ -15,6 +15,30 @@ const users = [
|
||||
},
|
||||
]
|
||||
|
||||
const tasks = [
|
||||
{
|
||||
id: '00000000-0000-0000-0000-000000000001',
|
||||
title: 'Dammsuga',
|
||||
description: 'Bottenvåningen',
|
||||
status: 'WAITING',
|
||||
createdAt: '2026-07-24T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: '00000000-0000-0000-0000-000000000002',
|
||||
title: 'Diska',
|
||||
description: null,
|
||||
status: 'IN_PROGRESS',
|
||||
createdAt: '2026-07-24T10:01:00Z',
|
||||
},
|
||||
{
|
||||
id: '00000000-0000-0000-0000-000000000003',
|
||||
title: 'Vattna blommor',
|
||||
description: null,
|
||||
status: 'COMPLETED',
|
||||
createdAt: '2026-07-24T10:02:00Z',
|
||||
},
|
||||
]
|
||||
|
||||
beforeEach(() => {
|
||||
window.localStorage.clear()
|
||||
})
|
||||
@ -42,13 +66,14 @@ test('befintliga användare utan lokalt val visar Vem är du', async () => {
|
||||
expect(screen.getByRole('button', { name: 'Anna' })).toBeInTheDocument()
|
||||
})
|
||||
|
||||
test('val av användare lagrar id och visar startsidan', async () => {
|
||||
mockJsonResponse(users)
|
||||
test('val av användare lagrar id och visar brädan', async () => {
|
||||
mockUsersAndTasks(users, [])
|
||||
render(<App />)
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: 'Urban' }))
|
||||
|
||||
expect(screen.getByRole('heading', { name: 'Hej Urban' })).toBeInTheDocument()
|
||||
expect(await screen.findByRole('heading', { name: 'Uppgifter' })).toBeInTheDocument()
|
||||
expect(screen.getByText('Urban')).toBeInTheDocument()
|
||||
expect(window.localStorage.getItem('hemhub.activeUserId')).toBe(users[0].id)
|
||||
})
|
||||
|
||||
@ -57,22 +82,23 @@ test('skapad användare blir automatiskt aktiv', async () => {
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse([]))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(createdUser, 201))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse([]))
|
||||
|
||||
render(<App />)
|
||||
|
||||
fireEvent.change(await screen.findByLabelText('Namn'), { target: { value: ' Urban ' } })
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Skapa användare' }))
|
||||
|
||||
expect(await screen.findByRole('heading', { name: 'Hej Urban' })).toBeInTheDocument()
|
||||
expect(await screen.findByRole('heading', { name: 'Uppgifter' })).toBeInTheDocument()
|
||||
expect(window.localStorage.getItem('hemhub.activeUserId')).toBe(createdUser.id)
|
||||
expect(fetchMock).toHaveBeenLastCalledWith('/api/users', {
|
||||
expect(fetchMock).toHaveBeenNthCalledWith(2, '/api/users', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ name: 'Urban' }),
|
||||
})
|
||||
})
|
||||
|
||||
test('skapandefel visas utan att namnet försvinner', async () => {
|
||||
test('skapandefel för användare visas utan att namnet försvinner', async () => {
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse([]))
|
||||
fetchMock.mockResolvedValueOnce(
|
||||
@ -97,18 +123,20 @@ test('skapandefel visas utan att namnet försvinner', async () => {
|
||||
expect(input).toHaveValue('Urban')
|
||||
})
|
||||
|
||||
test('Byt användare rensar valt id och visar användarvalet', async () => {
|
||||
test('Logga ut rensar valt id och väljer inte användaren automatiskt', async () => {
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
mockJsonResponse(users)
|
||||
mockUsersAndTasks(users, [])
|
||||
render(<App />)
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: 'Byt användare' }))
|
||||
fireEvent.click(await screen.findByRole('button', { name: 'Logga ut' }))
|
||||
|
||||
expect(screen.getByRole('heading', { name: 'Vem är du?' })).toBeInTheDocument()
|
||||
expect(screen.getByRole('button', { name: 'Urban' })).toBeInTheDocument()
|
||||
expect(screen.queryByRole('heading', { name: 'Uppgifter' })).not.toBeInTheDocument()
|
||||
expect(window.localStorage.getItem('hemhub.activeUserId')).toBeNull()
|
||||
})
|
||||
|
||||
test('hämtningsfel visas som fel och kan återförsökas', async () => {
|
||||
test('hämtningsfel för användare visas som fel och kan återförsökas', async () => {
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockRejectedValueOnce(new Error('Nätverksfel'))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(users))
|
||||
@ -133,6 +161,147 @@ test('ogiltigt lagrat användar-id rensas', async () => {
|
||||
expect(window.localStorage.getItem('hemhub.activeUserId')).toBeNull()
|
||||
})
|
||||
|
||||
test('brädan visar tre kolumner och grupperar hämtade uppgifter', async () => {
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
mockUsersAndTasks(users, tasks)
|
||||
|
||||
render(<App />)
|
||||
|
||||
const waiting = await screen.findByRole('region', { name: 'Väntande' })
|
||||
const inProgress = screen.getByRole('region', { name: 'Pågående' })
|
||||
const completed = screen.getByRole('region', { name: 'Klart' })
|
||||
|
||||
expect(within(waiting).getByText('Dammsuga')).toBeInTheDocument()
|
||||
expect(within(waiting).getByText('Bottenvåningen')).toBeInTheDocument()
|
||||
expect(within(inProgress).getByText('Diska')).toBeInTheDocument()
|
||||
expect(within(completed).getByText('Vattna blommor')).toBeInTheDocument()
|
||||
expect(screen.queryByText(/Inga uppgifter/i)).not.toBeInTheDocument()
|
||||
})
|
||||
|
||||
test('Ny uppgift öppnar modalen med fokus i titelfältet', async () => {
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
mockUsersAndTasks(users, [])
|
||||
render(<App />)
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: 'Ny uppgift' }))
|
||||
|
||||
expect(screen.getByRole('dialog', { name: 'Skapa ny uppgift' })).toBeInTheDocument()
|
||||
expect(screen.getByLabelText('Titel')).toHaveFocus()
|
||||
})
|
||||
|
||||
test.each([
|
||||
{
|
||||
sätt: 'stängningskrysset',
|
||||
close: () => fireEvent.click(screen.getByRole('button', { name: 'Stäng' })),
|
||||
},
|
||||
{
|
||||
sätt: 'Escape',
|
||||
close: () => fireEvent.keyDown(window, { key: 'Escape' }),
|
||||
},
|
||||
{
|
||||
sätt: 'modalens bakgrund',
|
||||
close: () => {
|
||||
const backdrop = screen.getByRole('dialog', { name: 'Skapa ny uppgift' }).parentElement
|
||||
|
||||
if (!backdrop) {
|
||||
throw new Error('Modalens bakgrund saknas')
|
||||
}
|
||||
|
||||
fireEvent.mouseDown(backdrop)
|
||||
},
|
||||
},
|
||||
])('modalen stängs med $sätt och rensar formuläret', async ({ close }) => {
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
mockUsersAndTasks(users, [])
|
||||
render(<App />)
|
||||
|
||||
fireEvent.click(await screen.findByRole('button', { name: 'Ny uppgift' }))
|
||||
fireEvent.change(screen.getByLabelText('Titel'), { target: { value: 'Dammsuga' } })
|
||||
fireEvent.change(screen.getByLabelText('Beskrivning (valfri)'), {
|
||||
target: { value: 'Bottenvåningen' },
|
||||
})
|
||||
|
||||
close()
|
||||
|
||||
expect(screen.queryByRole('dialog', { name: 'Skapa ny uppgift' })).not.toBeInTheDocument()
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Ny uppgift' }))
|
||||
|
||||
expect(screen.getByLabelText('Titel')).toHaveValue('')
|
||||
expect(screen.getByLabelText('Beskrivning (valfri)')).toHaveValue('')
|
||||
})
|
||||
|
||||
test('en skapad uppgift visas längst ned i Väntande och modalen stängs', async () => {
|
||||
const createdTask = {
|
||||
id: '00000000-0000-0000-0000-000000000004',
|
||||
title: 'Putsa fönster',
|
||||
description: 'Köket',
|
||||
status: 'WAITING',
|
||||
createdAt: '2026-07-24T10:03:00Z',
|
||||
}
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(users))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse([tasks[0]]))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(createdTask, 201))
|
||||
|
||||
render(<App />)
|
||||
|
||||
await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Ny uppgift' }))
|
||||
fireEvent.change(screen.getByLabelText('Titel'), { target: { value: ' Putsa fönster ' } })
|
||||
fireEvent.change(screen.getByLabelText('Beskrivning (valfri)'), {
|
||||
target: { value: ' Köket ' },
|
||||
})
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Skapa uppgift' }))
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.queryByRole('dialog', { name: 'Skapa ny uppgift' })).not.toBeInTheDocument(),
|
||||
)
|
||||
const waiting = screen.getByRole('region', { name: 'Väntande' })
|
||||
expect(within(waiting).getAllByRole('article').map((card) => card.textContent)).toEqual([
|
||||
'DammsugaBottenvåningen',
|
||||
'Putsa fönsterKöket',
|
||||
])
|
||||
expect(fetchMock).toHaveBeenLastCalledWith('/api/tasks', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ title: 'Putsa fönster', description: 'Köket' }),
|
||||
})
|
||||
})
|
||||
|
||||
test('formulärdata bevaras när skapande av uppgift misslyckas', async () => {
|
||||
window.localStorage.setItem('hemhub.activeUserId', users[0].id)
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(users))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse([]))
|
||||
fetchMock.mockResolvedValueOnce(
|
||||
jsonResponse({ code: 'INVALID_TASK', message: 'Uppgiften är ogiltig.' }, 400),
|
||||
)
|
||||
|
||||
render(<App />)
|
||||
|
||||
await waitFor(() => expect(fetchMock).toHaveBeenCalledTimes(2))
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Ny uppgift' }))
|
||||
const title = screen.getByLabelText('Titel')
|
||||
const description = screen.getByLabelText('Beskrivning (valfri)')
|
||||
fireEvent.change(title, { target: { value: 'Dammsuga' } })
|
||||
fireEvent.change(description, { target: { value: 'Bottenvåningen' } })
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Skapa uppgift' }))
|
||||
|
||||
expect(await screen.findByRole('alert')).toHaveTextContent('Uppgiften är ogiltig.')
|
||||
expect(screen.getByRole('dialog', { name: 'Skapa ny uppgift' })).toBeInTheDocument()
|
||||
expect(title).toHaveValue('Dammsuga')
|
||||
expect(description).toHaveValue('Bottenvåningen')
|
||||
})
|
||||
|
||||
function mockUsersAndTasks(userResponse: unknown, taskResponse: unknown) {
|
||||
const fetchMock = vi.spyOn(globalThis, 'fetch')
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(userResponse))
|
||||
fetchMock.mockResolvedValueOnce(jsonResponse(taskResponse))
|
||||
return fetchMock
|
||||
}
|
||||
|
||||
function mockJsonResponse(body: unknown, status = 200) {
|
||||
return vi.spyOn(globalThis, 'fetch').mockResolvedValue(jsonResponse(body, status))
|
||||
}
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import { FormEvent, useEffect, useRef, useState } from 'react'
|
||||
import TaskBoard from './TaskBoard'
|
||||
|
||||
type User = {
|
||||
id: string
|
||||
@ -55,19 +56,19 @@ function App() {
|
||||
setActiveUser(user)
|
||||
}
|
||||
|
||||
const switchUser = () => {
|
||||
const logOut = () => {
|
||||
window.localStorage.removeItem(ACTIVE_USER_KEY)
|
||||
setActiveUser(null)
|
||||
setShowCreateUser(false)
|
||||
}
|
||||
|
||||
if (loadState === 'loading') {
|
||||
return <main>Laddar HemHub…</main>
|
||||
return <main className="panel">Laddar HemHub…</main>
|
||||
}
|
||||
|
||||
if (loadState === 'error') {
|
||||
return (
|
||||
<main>
|
||||
<main className="panel">
|
||||
<h1>HemHub</h1>
|
||||
<p>Kunde inte ansluta till HemHub.</p>
|
||||
<button type="button" onClick={() => void loadUsers()}>
|
||||
@ -78,16 +79,7 @@ function App() {
|
||||
}
|
||||
|
||||
if (activeUser) {
|
||||
return (
|
||||
<main>
|
||||
<h1>HemHub</h1>
|
||||
<h2>Hej {activeUser.name}</h2>
|
||||
<p>Du är vald som aktiv användare.</p>
|
||||
<button type="button" onClick={switchUser}>
|
||||
Byt användare
|
||||
</button>
|
||||
</main>
|
||||
)
|
||||
return <TaskBoard activeUserName={activeUser.name} onLogOut={logOut} />
|
||||
}
|
||||
|
||||
if (showCreateUser) {
|
||||
@ -104,7 +96,7 @@ function App() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<main className="panel">
|
||||
<h1>HemHub</h1>
|
||||
<h2>Vem är du?</h2>
|
||||
<div className="user-list">
|
||||
@ -183,7 +175,7 @@ function CreateUserForm({ hasExistingUsers, onCancel, onCreated }: CreateUserFor
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<main className="panel">
|
||||
<h1>HemHub</h1>
|
||||
<h2>Skapa användare</h2>
|
||||
<form onSubmit={(event) => void submit(event)}>
|
||||
|
||||
249
frontend/src/TaskBoard.tsx
Normal file
249
frontend/src/TaskBoard.tsx
Normal file
@ -0,0 +1,249 @@
|
||||
import { FormEvent, MouseEvent, useEffect, useRef, useState } from 'react'
|
||||
|
||||
type TaskStatus = 'WAITING' | 'IN_PROGRESS' | 'COMPLETED'
|
||||
|
||||
type Task = {
|
||||
id: string
|
||||
title: string
|
||||
description: string | null
|
||||
status: TaskStatus
|
||||
createdAt: string
|
||||
}
|
||||
|
||||
type ApiError = {
|
||||
message?: string
|
||||
}
|
||||
|
||||
type TaskBoardProps = {
|
||||
activeUserName: string
|
||||
onLogOut: () => void
|
||||
}
|
||||
|
||||
const columns: { status: TaskStatus; title: string }[] = [
|
||||
{ status: 'WAITING', title: 'Väntande' },
|
||||
{ status: 'IN_PROGRESS', title: 'Pågående' },
|
||||
{ status: 'COMPLETED', title: 'Klart' },
|
||||
]
|
||||
|
||||
function TaskBoard({ activeUserName, onLogOut }: TaskBoardProps) {
|
||||
const [tasks, setTasks] = useState<Task[]>([])
|
||||
const [loadState, setLoadState] = useState<'loading' | 'ready' | 'error'>('loading')
|
||||
const [showCreateTask, setShowCreateTask] = useState(false)
|
||||
|
||||
const loadTasks = async () => {
|
||||
setLoadState('loading')
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/tasks')
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Kunde inte hämta uppgifter')
|
||||
}
|
||||
|
||||
setTasks((await response.json()) as Task[])
|
||||
setLoadState('ready')
|
||||
} catch {
|
||||
setLoadState('error')
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
void loadTasks()
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<main className="task-app">
|
||||
<header className="app-header">
|
||||
<div>
|
||||
<p className="eyebrow">HemHub</p>
|
||||
<h1>Uppgifter</h1>
|
||||
</div>
|
||||
<div className="user-controls">
|
||||
<span>{activeUserName}</span>
|
||||
<button type="button" className="secondary compact" onClick={onLogOut}>
|
||||
Logga ut
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="board-toolbar">
|
||||
<div aria-live="polite">
|
||||
{loadState === 'loading' && 'Laddar uppgifter…'}
|
||||
{loadState === 'error' && (
|
||||
<>
|
||||
Kunde inte hämta uppgifter.
|
||||
<button type="button" className="link-button" onClick={() => void loadTasks()}>
|
||||
Försök igen
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<button type="button" onClick={() => setShowCreateTask(true)}>
|
||||
Ny uppgift
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<section className="board" aria-label="Uppgiftsbräda">
|
||||
{columns.map((column) => (
|
||||
<section className="board-column" key={column.status} aria-labelledby={column.status}>
|
||||
<h2 id={column.status}>{column.title}</h2>
|
||||
<div className="task-list">
|
||||
{tasks
|
||||
.filter((task) => task.status === column.status)
|
||||
.map((task) => (
|
||||
<article className="task-card" key={task.id}>
|
||||
<h3>{task.title}</h3>
|
||||
{task.description && <p>{task.description}</p>}
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</section>
|
||||
|
||||
{showCreateTask && (
|
||||
<CreateTaskModal
|
||||
onClose={() => setShowCreateTask(false)}
|
||||
onCreated={(task) => {
|
||||
setTasks((currentTasks) => [...currentTasks, task])
|
||||
setShowCreateTask(false)
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
type CreateTaskModalProps = {
|
||||
onClose: () => void
|
||||
onCreated: (task: Task) => void
|
||||
}
|
||||
|
||||
function CreateTaskModal({ onClose, onCreated }: CreateTaskModalProps) {
|
||||
const [title, setTitle] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [error, setError] = useState('')
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const isSubmittingRef = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
const closeOnEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && !isSubmittingRef.current) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', closeOnEscape)
|
||||
return () => window.removeEventListener('keydown', closeOnEscape)
|
||||
}, [onClose])
|
||||
|
||||
const closeFromBackdrop = (event: MouseEvent<HTMLDivElement>) => {
|
||||
if (event.target === event.currentTarget && !isSubmittingRef.current) {
|
||||
onClose()
|
||||
}
|
||||
}
|
||||
|
||||
const submit = async (event: FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
|
||||
if (isSubmittingRef.current) {
|
||||
return
|
||||
}
|
||||
|
||||
const trimmedTitle = title.trim()
|
||||
const trimmedDescription = description.trim()
|
||||
|
||||
if (!trimmedTitle || [...trimmedTitle].length > 100) {
|
||||
setError('Titeln måste innehålla mellan 1 och 100 tecken.')
|
||||
return
|
||||
}
|
||||
|
||||
if ([...trimmedDescription].length > 500) {
|
||||
setError('Beskrivningen får innehålla högst 500 tecken.')
|
||||
return
|
||||
}
|
||||
|
||||
setError('')
|
||||
isSubmittingRef.current = true
|
||||
setIsSubmitting(true)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/tasks', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
title: trimmedTitle,
|
||||
description: trimmedDescription || null,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const apiError = (await response.json().catch(() => ({}))) as ApiError
|
||||
setError(apiError.message ?? 'Det gick inte att skapa uppgiften. Försök igen.')
|
||||
return
|
||||
}
|
||||
|
||||
onCreated((await response.json()) as Task)
|
||||
} catch {
|
||||
setError('Det gick inte att skapa uppgiften. Försök igen.')
|
||||
} finally {
|
||||
isSubmittingRef.current = false
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="modal-backdrop" onMouseDown={closeFromBackdrop}>
|
||||
<section
|
||||
className="modal"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="create-task-title"
|
||||
>
|
||||
<div className="modal-header">
|
||||
<h2 id="create-task-title">Skapa ny uppgift</h2>
|
||||
<button
|
||||
type="button"
|
||||
className="close-button"
|
||||
aria-label="Stäng"
|
||||
disabled={isSubmitting}
|
||||
onClick={onClose}
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
<form onSubmit={(event) => void submit(event)}>
|
||||
<label htmlFor="task-title">Titel</label>
|
||||
<input
|
||||
id="task-title"
|
||||
autoFocus
|
||||
value={title}
|
||||
disabled={isSubmitting}
|
||||
onChange={(event) => setTitle(event.target.value)}
|
||||
/>
|
||||
|
||||
<label htmlFor="task-description">Beskrivning (valfri)</label>
|
||||
<textarea
|
||||
id="task-description"
|
||||
rows={5}
|
||||
value={description}
|
||||
disabled={isSubmitting}
|
||||
onChange={(event) => setDescription(event.target.value)}
|
||||
/>
|
||||
|
||||
{error && (
|
||||
<p className="error" role="alert">
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting ? 'Skapar…' : 'Skapa uppgift'}
|
||||
</button>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default TaskBoard
|
||||
@ -8,7 +8,7 @@ body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
.panel {
|
||||
max-width: 40rem;
|
||||
margin: 6rem auto;
|
||||
padding: 2rem;
|
||||
@ -22,7 +22,8 @@ h1 {
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
input,
|
||||
textarea {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
@ -36,7 +37,8 @@ button {
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
input:disabled {
|
||||
input:disabled,
|
||||
textarea:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.65;
|
||||
}
|
||||
@ -68,6 +70,168 @@ input {
|
||||
border-radius: 0.4rem;
|
||||
}
|
||||
|
||||
textarea {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
padding: 0.6rem;
|
||||
border: 1px solid #9ca3af;
|
||||
border-radius: 0.4rem;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.error {
|
||||
margin: 0;
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.task-app {
|
||||
min-height: 100vh;
|
||||
padding: 2rem clamp(1rem, 4vw, 4rem);
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.app-header,
|
||||
.board-toolbar,
|
||||
.user-controls,
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
margin: 0 auto 2rem;
|
||||
max-width: 90rem;
|
||||
}
|
||||
|
||||
.app-header h1,
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
color: #64748b;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.user-controls {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.compact {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.board-toolbar {
|
||||
min-height: 2.75rem;
|
||||
margin: 0 auto 1rem;
|
||||
max-width: 90rem;
|
||||
}
|
||||
|
||||
.link-button {
|
||||
padding: 0.25rem 0.5rem;
|
||||
color: #2563eb;
|
||||
background: transparent;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.board {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 1rem;
|
||||
margin: 0 auto;
|
||||
max-width: 90rem;
|
||||
}
|
||||
|
||||
.board-column {
|
||||
min-height: 20rem;
|
||||
padding: 1rem;
|
||||
border-radius: 0.75rem;
|
||||
background: #e5e7eb;
|
||||
}
|
||||
|
||||
.board-column h2 {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.task-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.task-card {
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
background: white;
|
||||
box-shadow: 0 0.125rem 0.4rem rgb(0 0 0 / 8%);
|
||||
}
|
||||
|
||||
.task-card h3,
|
||||
.task-card p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.task-card p {
|
||||
margin-top: 0.5rem;
|
||||
color: #475569;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
background: rgb(15 23 42 / 55%);
|
||||
}
|
||||
|
||||
.modal {
|
||||
width: min(100%, 34rem);
|
||||
padding: 1.5rem;
|
||||
border-radius: 0.75rem;
|
||||
background: white;
|
||||
box-shadow: 0 1rem 3rem rgb(0 0 0 / 25%);
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
padding: 0.2rem 0.55rem;
|
||||
color: #475569;
|
||||
background: transparent;
|
||||
font-size: 1.75rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 48rem) {
|
||||
.panel {
|
||||
margin: 2rem 1rem;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.user-controls {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.board {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.board-column {
|
||||
min-height: 8rem;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user