jacobh2/F-r-ldraledigplannerare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ask before deleting without leaving the app

Browse Source 
Deleting a period or a day went through the browser's own confirmation box.
It halts the page while it is open, which meant the delete path could not be
driven by anything automated, and it looks nothing like the rest of the app.
Both now ask inline: the first click offers the choice, and only the second
one deletes. That matters more than it did, since deleting a period now takes
its days with it.
This commit is contained in:
Jacob Hagstedt
2026-09-18 00:49:39 +02:00
parent ac3b6a41d7
commit c5587c5b46
8 changed files with 229 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/calendar/PeriodPopover.test.tsx
+21 -12
View File
@@ -46,19 +46,28 @@ describe('PeriodPopover', () => {
expect(screen.getByTestId('period-delete-button')).toHaveTextContent('Ta bort dessa dagar')
})
it('calls onDelete after confirmation', async () => {
vi.spyOn(window, 'confirm').mockReturnValue(true)
mockOnDelete.mockResolvedValue(undefined)
render(<PeriodPopover {...defaultProps} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
})
it('does not call onDelete when confirmation is cancelled', () => {
vi.spyOn(window, 'confirm').mockReturnValue(false)
it('shows an inline confirmation instead of deleting immediately', () => {
render(<PeriodPopover {...defaultProps} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
expect(mockOnDelete).not.toHaveBeenCalled()
expect(screen.getByTestId('period-delete-confirm')).toBeInTheDocument()
})
it('calls onDelete after confirming inline', async () => {
mockOnDelete.mockResolvedValue(undefined)
render(<PeriodPopover {...defaultProps} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
})
it('does not call onDelete when the inline confirmation is cancelled', () => {
render(<PeriodPopover {...defaultProps} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
fireEvent.click(screen.getByTestId('period-delete-cancel-button'))
expect(mockOnDelete).not.toHaveBeenCalled()
expect(screen.queryByTestId('period-delete-confirm')).not.toBeInTheDocument()
expect(screen.getByTestId('period-delete-button')).toBeInTheDocument()
})
})
@@ -217,20 +226,20 @@ describe('PeriodPopover', () => {
})
it('displays a generic local error when onDelete rejects with a non-Error value', async () => {
vi.spyOn(window, 'confirm').mockReturnValue(true)
mockOnDelete.mockRejectedValue('boom')
render(<PeriodPopover {...defaultProps} wish={wish} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
await waitFor(() => {
expect(screen.getByRole('alert')).toHaveTextContent('Det gick inte att skapa perioden')
})
})
it('calls onDelete for a wish-linked band after confirmation', async () => {
vi.spyOn(window, 'confirm').mockReturnValue(true)
mockOnDelete.mockResolvedValue(undefined)
render(<PeriodPopover {...defaultProps} wish={wish} />)
fireEvent.click(screen.getByTestId('period-delete-button'))
fireEvent.click(screen.getByTestId('period-delete-confirm-button'))
await waitFor(() => expect(mockOnDelete).toHaveBeenCalled())
})
frontend/src/components/calendar/PeriodPopover.tsx
+40 -4
View File
@@ -101,6 +101,7 @@ export function PeriodPopover({
lastYear: null,
})
const [localError, setLocalError] = useState<string | null>(null)
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
useEffect(() => {
if (wish) {
@@ -117,6 +118,7 @@ export function PeriodPopover({
})
}
setLocalError(null)
setIsConfirmingDelete(false)
}, [isOpen, wish, startDate, endDate, t])
if (!isOpen) return null
@@ -141,14 +143,22 @@ export function PeriodPopover({
}
}
const handleDelete = async () => {
if (confirm(t('calendar.periodDeleteConfirm'))) {
const handleDeleteClick = () => {
setIsConfirmingDelete(true)
}
const handleCancelDelete = () => {
setIsConfirmingDelete(false)
}
const handleConfirmDelete = async () => {
try {
setLocalError(null)
await onDelete()
} catch (err) {
setLocalError(err instanceof Error ? err.message : t('calendar.periodCreateError'))
}
} finally {
setIsConfirmingDelete(false)
}
}
@@ -339,9 +349,33 @@ export function PeriodPopover({
</div>
<div className="period-popover__footer">
{isConfirmingDelete ? (
<div className="period-popover__delete-confirm" data-testid="period-delete-confirm">
<span className="period-popover__delete-confirm-text">
{t('calendar.periodDeleteConfirm')}
</span>
<button
className="period-popover__button period-popover__button--secondary"
onClick={handleCancelDelete}
disabled={isSaving}
data-testid="period-delete-cancel-button"
>
{t('calendar.periodCancelButton')}
</button>
<button
className="period-popover__button period-popover__button--danger"
onClick={() => void handleDelete()}
onClick={() => void handleConfirmDelete()}
disabled={isSaving}
data-testid="period-delete-confirm-button"
>
{isSaving ? t('calendar.periodDeletingButton') : t('calendar.periodDeleteConfirmButton')}
</button>
</div>
) : (
<>
<button
className="period-popover__button period-popover__button--danger"
onClick={handleDeleteClick}
disabled={isSaving}
data-testid="period-delete-button"
>
@@ -369,6 +403,8 @@ export function PeriodPopover({
{isSaving ? t('calendar.periodSavingButton') : t('calendar.periodSaveButton')}
</button>
)}
</>
)}
</div>
</div>
</div>
frontend/src/components/calendar/period-popover.css
+13
View File
@@ -175,3 +175,16 @@
.period-popover__button--danger:hover:not(:disabled) {
background-color: #b71c1c;
}
.period-popover__delete-confirm {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.period-popover__delete-confirm-text {
font-size: 14px;
color: #333;
margin-right: auto;
}
frontend/src/components/modals/PlannedDayModal.test.tsx
+34 -35
View File
@@ -429,9 +429,6 @@ describe('PlannedDayModal', () => {
})
mockOnDelete.mockRejectedValue(new Error('Delete failed'))
// Mock the confirm dialog
vi.spyOn(window, 'confirm').mockReturnValue(true)
render(
<PlannedDayModal
{...defaultProps}
@@ -443,6 +440,7 @@ describe('PlannedDayModal', () => {
const deleteButton = screen.getByTestId('delete-button')
await userEvent.click(deleteButton)
await userEvent.click(screen.getByTestId('delete-confirm-button'))
await waitFor(() => {
expect(screen.getByRole('alert')).toHaveTextContent('Delete failed')
@@ -455,7 +453,6 @@ describe('PlannedDayModal', () => {
parentPersonalDataUuid: 'p1',
})
mockOnDelete.mockRejectedValue('Some error')
vi.spyOn(window, 'confirm').mockReturnValue(true)
render(
<PlannedDayModal
@@ -468,6 +465,7 @@ describe('PlannedDayModal', () => {
const deleteButton = screen.getByTestId('delete-button')
await userEvent.click(deleteButton)
await userEvent.click(screen.getByTestId('delete-confirm-button'))
await waitFor(() => {
expect(screen.getByRole('alert')).toHaveTextContent('Det gick inte att ta bort den planerade dagen')
@@ -711,38 +709,12 @@ describe('PlannedDayModal', () => {
expect(screen.getByTestId('delete-button')).toBeInTheDocument()
})
it('shows confirmation dialog before deleting', async () => {
it('shows an inline confirmation instead of deleting immediately', async () => {
const existingDay = makePlannedLeaveDay({
id: 'day-1',
parentPersonalDataUuid: 'p1',
})
const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
mockOnDelete.mockResolvedValue(undefined)
render(
<PlannedDayModal
{...defaultProps}
isOpen={true}
existingDay={existingDay}
onDelete={mockOnDelete}
/>
)
const deleteButton = screen.getByTestId('delete-button')
await userEvent.click(deleteButton)
expect(confirmSpy).toHaveBeenCalledWith('Är du säker på att du vill ta bort den här planerade dagen?')
confirmSpy.mockRestore()
})
it('does not call onDelete if confirmation is cancelled', async () => {
const existingDay = makePlannedLeaveDay({
id: 'day-1',
parentPersonalDataUuid: 'p1',
})
const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false)
mockOnDelete.mockResolvedValue(undefined)
render(
@@ -758,16 +730,17 @@ describe('PlannedDayModal', () => {
await userEvent.click(deleteButton)
expect(mockOnDelete).not.toHaveBeenCalled()
confirmSpy.mockRestore()
expect(screen.getByTestId('delete-confirm')).toHaveTextContent(
'Är du säker på att du vill ta bort den här planerade dagen?',
)
})
it('calls onDelete if confirmation is accepted', async () => {
it('does not call onDelete if the inline confirmation is cancelled', async () => {
const existingDay = makePlannedLeaveDay({
id: 'day-1',
parentPersonalDataUuid: 'p1',
})
const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true)
mockOnDelete.mockResolvedValue(undefined)
render(
@@ -781,11 +754,37 @@ describe('PlannedDayModal', () => {
const deleteButton = screen.getByTestId('delete-button')
await userEvent.click(deleteButton)
await userEvent.click(screen.getByTestId('delete-cancel-button'))
expect(mockOnDelete).not.toHaveBeenCalled()
expect(screen.queryByTestId('delete-confirm')).not.toBeInTheDocument()
expect(screen.getByTestId('delete-button')).toBeInTheDocument()
})
it('calls onDelete if the inline confirmation is accepted', async () => {
const existingDay = makePlannedLeaveDay({
id: 'day-1',
parentPersonalDataUuid: 'p1',
})
mockOnDelete.mockResolvedValue(undefined)
render(
<PlannedDayModal
{...defaultProps}
isOpen={true}
existingDay={existingDay}
onDelete={mockOnDelete}
/>
)
const deleteButton = screen.getByTestId('delete-button')
await userEvent.click(deleteButton)
await userEvent.click(screen.getByTestId('delete-confirm-button'))
await waitFor(() => {
expect(mockOnDelete).toHaveBeenCalled()
})
confirmSpy.mockRestore()
})
it('disables delete button when saving', () => {
frontend/src/components/modals/PlannedDayModal.tsx
+42 -4
View File
@@ -55,6 +55,7 @@ export function PlannedDayModal({
const [isDubbeldag, setIsDubbeldag] = useState(false)
const [localError, setLocalError] = useState<string | null>(null)
const [isTogglingOverride, setIsTogglingOverride] = useState(false)
const [isConfirmingDelete, setIsConfirmingDelete] = useState(false)
useEffect(() => {
if (existingDay) {
@@ -67,6 +68,7 @@ export function PlannedDayModal({
setIsDubbeldag(false)
}
setLocalError(null)
setIsConfirmingDelete(false)
}, [isOpen, existingDay, selectedParentId, defaultDayType])
useEffect(() => {
@@ -88,15 +90,24 @@ export function PlannedDayModal({
}
}
const handleDelete = async () => {
const handleDeleteClick = () => {
if (!onDelete) return
setIsConfirmingDelete(true)
}
const handleCancelDelete = () => {
setIsConfirmingDelete(false)
}
const handleConfirmDelete = async () => {
if (!onDelete) return
if (confirm(t('plannedDayModal.confirmDelete'))) {
try {
setLocalError(null)
await onDelete()
} catch (err) {
setLocalError(err instanceof Error ? err.message : t('plannedDayModal.deleteError'))
}
} finally {
setIsConfirmingDelete(false)
}
}
@@ -256,10 +267,35 @@ export function PlannedDayModal({
</div>
<div className="planned-day-modal__footer">
{!isRangeMode && existingDay && onDelete && isConfirmingDelete && (
<div className="planned-day-modal__delete-confirm" data-testid="delete-confirm">
<span className="planned-day-modal__delete-confirm-text">
{t('plannedDayModal.confirmDelete')}
</span>
<button
className="planned-day-modal__button planned-day-modal__button--secondary"
onClick={handleCancelDelete}
disabled={isSaving}
data-testid="delete-cancel-button"
>
{t('plannedDayModal.cancelButton')}
</button>
<button
className="planned-day-modal__button planned-day-modal__button--danger"
onClick={() => void handleConfirmDelete()}
disabled={isSaving}
data-testid="delete-confirm-button"
>
{isSaving ? t('plannedDayModal.deletingButton') : t('plannedDayModal.deleteConfirmButton')}
</button>
</div>
)}
{!isConfirmingDelete && (
<>
{!isRangeMode && existingDay && onDelete && (
<button
className="planned-day-modal__button planned-day-modal__button--danger"
onClick={handleDelete}
onClick={handleDeleteClick}
disabled={isSaving}
data-testid="delete-button"
>
@@ -282,6 +318,8 @@ export function PlannedDayModal({
>
{isSaving ? t('plannedDayModal.savingButton') : t('plannedDayModal.saveButton')}
</button>
</>
)}
</div>
</div>
</div>
frontend/src/components/modals/planned-day-modal.css
+13
View File
@@ -187,3 +187,16 @@
.planned-day-modal__button--danger:hover:not(:disabled) {
background-color: #b71c1c;
}
.planned-day-modal__delete-confirm {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
}
.planned-day-modal__delete-confirm-text {
font-size: 14px;
color: #333;
margin-right: auto;
}
frontend/src/i18n/en/calendar.ts
+2
View File
@@ -40,6 +40,7 @@ export const calendar = {
'plannedDayModal.closeAria': 'Close',
'plannedDayModal.confirmDelete': 'Are you sure you want to delete this planned day?',
'plannedDayModal.deleteButton': 'Delete',
'plannedDayModal.deleteConfirmButton': 'Yes, delete',
'plannedDayModal.deleteError': 'Failed to delete planned day',
'plannedDayModal.deletingButton': 'Deleting…',
'plannedDayModal.doubleDayHint': 'Double days do not apply to vacation',
@@ -108,6 +109,7 @@ export const calendar = {
'calendar.periodDeleteButton': 'Delete period',
'calendar.periodDeletingButton': 'Deleting…',
'calendar.periodDeleteConfirm': 'Are you sure you want to delete this period?',
'calendar.periodDeleteConfirmButton': 'Yes, delete',
'calendar.periodDeleteAdHocButton': 'Delete these days',
'calendar.periodCancelButton': 'Cancel',
'calendar.periodCloseAria': 'Close',
frontend/src/i18n/sv/calendar.ts
+2
View File
@@ -40,6 +40,7 @@ export const calendar = {
'plannedDayModal.closeAria': 'Stäng',
'plannedDayModal.confirmDelete': 'Är du säker på att du vill ta bort den här planerade dagen?',
'plannedDayModal.deleteButton': 'Ta bort',
'plannedDayModal.deleteConfirmButton': 'Ja, ta bort',
'plannedDayModal.deleteError': 'Det gick inte att ta bort den planerade dagen',
'plannedDayModal.deletingButton': 'Tar bort…',
'plannedDayModal.doubleDayHint': 'Dubbeldagar gäller inte för semester',
@@ -108,6 +109,7 @@ export const calendar = {
'calendar.periodDeleteButton': 'Ta bort period',
'calendar.periodDeletingButton': 'Tar bort…',
'calendar.periodDeleteConfirm': 'Är du säker på att du vill ta bort den här perioden?',
'calendar.periodDeleteConfirmButton': 'Ja, ta bort',
'calendar.periodDeleteAdHocButton': 'Ta bort dessa dagar',
'calendar.periodCancelButton': 'Avbryt',
'calendar.periodCloseAria': 'Stäng',