robin/dttmr-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: List item UI improvements

Browse Source
This commit is contained in:
robin
2026-09-04 10:35:06 +02:00
parent 73663543fd
commit 47034e111c
14 changed files with 374 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/api/__tests__/lists.spec.ts
+7 -7
View File
@@ -5,7 +5,7 @@ import {
createListApi,
getListItemsApi,
createListItemApi,
updateListItemApi,
updateListItemTitleApi,
setListItemCompletedApi,
addUserToListApi,
removeUserFromListApi,
@@ -77,7 +77,7 @@ describe('lists API', () => {
expect(result).toEqual(mockItems)
})
it('setListItemCompletedApi sends POST to /lists/items/{id}', async () => {
it('setListItemCompletedApi sends POST to /lists/items/{id}/complete', async () => {
const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
ok: true,
status: 204,
@@ -87,7 +87,7 @@ describe('lists API', () => {
await setListItemCompletedApi('item-1', { is_completed: true })
expect(fetchMock).toHaveBeenCalledWith(
`${API_BASE_URL}/lists/items/item-1`,
`${API_BASE_URL}/lists/items/item-1/complete`,
expect.objectContaining({ method: 'POST' }),
)
})
@@ -137,18 +137,18 @@ describe('lists API', () => {
expect(result).toEqual(mockItem)
})
it('updateListItemApi sends PUT to /lists/items', async () => {
it('updateListItemTitleApi sends POST to /lists/items/{id}/title', async () => {
const fetchMock = vi.fn<typeof fetch>().mockResolvedValueOnce({
ok: true,
status: 204,
} as unknown as Response)
global.fetch = fetchMock
await updateListItemApi({ list_item_id: 'item-1', is_completed: true })
await updateListItemTitleApi('item-1', { title: 'Free-range eggs' })
expect(fetchMock).toHaveBeenCalledWith(
`${API_BASE_URL}/lists/items`,
expect.objectContaining({ method: 'PUT' }),
`${API_BASE_URL}/lists/items/item-1/title`,
expect.objectContaining({ method: 'POST' }),
)
})
src/api/lists.ts
+12 -9
View File
@@ -5,8 +5,8 @@ import type {
ListItem,
CreateListPayload,
CreateListItemPayload,
UpdateListItemPayload,
SetListItemCompletedPayload,
SetListItemTitlePayload,
AddUserToListPayload,
RemoveUserFromListPayload,
} from '@/types/list'
@@ -43,23 +43,26 @@ export async function createListItemApi(payload: CreateListItemPayload): Promise
return response.json()
}
export async function updateListItemApi(payload: UpdateListItemPayload): Promise<void> {
const response = await apiClient.put('/lists/items', payload)
if (!response.ok) {
throw new Error(await extractErrorMessage(response, 'Failed to update list item'))
}
}
export async function setListItemCompletedApi(
itemId: string,
payload: SetListItemCompletedPayload,
): Promise<void> {
const response = await apiClient.post(`/lists/items/${itemId}`, payload)
const response = await apiClient.post(`/lists/items/${itemId}/complete`, payload)
if (!response.ok) {
throw new Error(await extractErrorMessage(response, 'Failed to update list item status'))
}
}
export async function updateListItemTitleApi(
itemId: string,
payload: SetListItemTitlePayload,
): Promise<void> {
const response = await apiClient.post(`/lists/items/${itemId}/title`, payload)
if (!response.ok) {
throw new Error(await extractErrorMessage(response, 'Failed to update list item title'))
}
}
export async function addUserToListApi(payload: AddUserToListPayload): Promise<void> {
const response = await apiClient.post('/lists/user', payload)
if (!response.ok) {
src/components/ConfirmDeleteModal.vue
+51
View File
@@ -0,0 +1,51 @@
<script setup lang="ts">
import BaseModal from '@/components/BaseModal.vue'
withDefaults(
defineProps<{
title: string
description: string
confirmLabel?: string
}>(),
{
confirmLabel: 'Delete',
},
)
const emit = defineEmits<{
close: []
confirm: []
}>()
function handleClose() {
emit('close')
}
function handleConfirm() {
emit('confirm')
}
</script>
<template>
<BaseModal :title="title" title-id="confirm-delete-modal-title" @close="handleClose">
<p class="modal-description">{{ description }}</p>
<template #footer>
<button type="button" class="btn btn-secondary cancel-btn" @click="handleClose">
Cancel
</button>
<button type="button" class="btn btn-danger confirm-delete-btn" @click="handleConfirm">
{{ confirmLabel }}
</button>
</template>
</BaseModal>
</template>
<style scoped>
.modal-description {
font-size: 0.85rem;
color: var(--c-text-soft);
margin-bottom: 1.25rem;
line-height: 1.4;
}
</style>
src/components/DeleteListItemModal.vue
+31
View File
@@ -0,0 +1,31 @@
<script setup lang="ts">
import type { LocalListItem } from '@/database/db'
import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
const props = defineProps<{
item: LocalListItem
}>()
const emit = defineEmits<{
close: []
confirm: []
}>()
function handleClose() {
emit('close')
}
function handleConfirm() {
emit('confirm')
}
</script>
<template>
<ConfirmDeleteModal
:title="`Delete &quot;${props.item.title}&quot;?`"
description="Are you sure you want to delete this item? This action cannot be undone."
confirm-label="Delete item"
@close="handleClose"
@confirm="handleConfirm"
/>
</template>
src/components/DeleteListModal.vue
+8 -29
View File
@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { LocalList } from '@/database/db'
import BaseModal from '@/components/BaseModal.vue'
import ConfirmDeleteModal from '@/components/ConfirmDeleteModal.vue'
defineProps<{
const props = defineProps<{
list: LocalList
}>()
@@ -21,32 +21,11 @@ function handleConfirm() {
</script>
<template>
<BaseModal
:title="`Delete &quot;${list.name}&quot;?`"
title-id="delete-modal-title"
<ConfirmDeleteModal
:title="`Delete &quot;${props.list.name}&quot;?`"
description="Are you sure you want to delete this list? This action cannot be undone and all items in this list will be deleted."
confirm-label="Delete list"
@close="handleClose"
>
<p class="modal-description">
Are you sure you want to delete this list? This action cannot be undone and all items in this
list will be deleted.
</p>
<template #footer>
<button type="button" class="btn btn-secondary cancel-btn" @click="handleClose">
Cancel
</button>
<button type="button" class="btn btn-danger confirm-delete-btn" @click="handleConfirm">
Delete list
</button>
@confirm="handleConfirm"
/>
</template>
</BaseModal>
</template>
<style scoped>
.modal-description {
font-size: 0.85rem;
color: var(--c-text-soft);
margin-bottom: 1.25rem;
line-height: 1.4;
}
</style>
src/components/ListItemRow.vue
+37 -6
View File
@@ -3,6 +3,7 @@ import { ref } from 'vue'
import type { LocalListItem } from '@/database/db'
import { useListsStore } from '@/stores/lists'
import { useDismissableMenu } from '@/composables/useDismissableMenu'
import DeleteListItemModal from '@/components/DeleteListItemModal.vue'
const props = defineProps<{ item: LocalListItem }>()
@@ -16,6 +17,7 @@ const editedTitle = ref(props.item.title)
// diffing against the live (possibly just-changed) prop and overwriting the
// remote edit with the untouched original text.
const originalTitle = ref(props.item.title)
const showDeleteModal = ref(false)
const {
isOpen: isMenuOpen,
containerRef: menuContainerRef,
@@ -27,6 +29,7 @@ function toggleCompleted() {
}
function startEditing() {
isMenuOpen.value = false
editedTitle.value = props.item.title
originalTitle.value = props.item.title
isEditing.value = true
@@ -35,15 +38,22 @@ function startEditing() {
function saveTitle() {
const title = editedTitle.value.trim()
if (title && title !== originalTitle.value) {
listsStore.updateListItem(props.item.id, { title })
listsStore.updateListItemTitle(props.item.id, title)
}
isEditing.value = false
}
function handleDelete(event: Event) {
event.preventDefault()
event.stopPropagation()
function handleOpenDelete() {
isMenuOpen.value = false
showDeleteModal.value = true
}
function handleCloseDelete() {
showDeleteModal.value = false
}
function handleConfirmDelete() {
showDeleteModal.value = false
listsStore.deleteListItem(props.item.id)
}
</script>
@@ -68,7 +78,7 @@ function handleDelete(event: Event) {
@keyup.escape="isEditing = false"
@blur="saveTitle"
/>
<span v-else class="title" @click="startEditing">{{ item.title }}</span>
<span v-else class="title" @click="toggleCompleted">{{ item.title }}</span>
<span v-if="item.pendingSync" class="pending-dot" title="Not yet synced"></span>
@@ -90,11 +100,25 @@ function handleDelete(event: Event) {
</button>
<div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
<button type="button" class="submenu-item" role="menuitem" @click="startEditing">
<svg
class="submenu-icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M17 3a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L17 3z" />
</svg>
<span>Edit title</span>
</button>
<button
type="button"
class="submenu-item submenu-item-danger"
role="menuitem"
@click="handleDelete"
@click="handleOpenDelete"
>
<svg
class="submenu-icon"
@@ -116,6 +140,13 @@ function handleDelete(event: Event) {
</button>
</div>
</div>
<DeleteListItemModal
v-if="showDeleteModal"
:item="item"
@close="handleCloseDelete"
@confirm="handleConfirmDelete"
/>
</li>
</template>
src/components/__tests__/ConfirmDeleteModal.spec.ts
+79
View File
@@ -0,0 +1,79 @@
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import ConfirmDeleteModal from '../ConfirmDeleteModal.vue'
describe('ConfirmDeleteModal', () => {
it('renders title, description, and default confirm label', () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Groceries"?',
description: 'Are you sure?',
},
})
expect(wrapper.text()).toContain('Delete "Groceries"?')
expect(wrapper.text()).toContain('Are you sure?')
expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete')
expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
})
it('renders a custom confirm label', () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Apples"?',
description: 'Are you sure?',
confirmLabel: 'Delete item',
},
})
expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete item')
})
it('emits confirm event when Delete button is clicked', async () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Groceries"?',
description: 'Are you sure?',
},
})
await wrapper.find('.confirm-delete-btn').trigger('click')
expect(wrapper.emitted('confirm')).toBeTruthy()
})
it('emits close event when Cancel button is clicked', async () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Groceries"?',
description: 'Are you sure?',
},
})
await wrapper.find('.cancel-btn').trigger('click')
expect(wrapper.emitted('close')).toBeTruthy()
})
it('emits close event when close icon button is clicked', async () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Groceries"?',
description: 'Are you sure?',
},
})
await wrapper.find('.close-btn').trigger('click')
expect(wrapper.emitted('close')).toBeTruthy()
})
it('emits close event when clicking overlay background', async () => {
const wrapper = mount(ConfirmDeleteModal, {
props: {
title: 'Delete "Groceries"?',
description: 'Are you sure?',
},
})
await wrapper.find('.modal-overlay').trigger('click')
expect(wrapper.emitted('close')).toBeTruthy()
})
})
src/components/__tests__/DeleteListItemModal.spec.ts
+50
View File
@@ -0,0 +1,50 @@
import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import DeleteListItemModal from '../DeleteListItemModal.vue'
import type { LocalListItem } from '@/database/db'
describe('DeleteListItemModal', () => {
const sampleItem: LocalListItem = {
id: 'item-1',
list_id: 'list-1',
title: 'Apples',
is_completed: false,
created_at: '2026-08-21T00:00:00.000Z',
modified_at: '2026-08-21T00:00:00.000Z',
}
it('renders modal with item title and confirmation prompt', () => {
const wrapper = mount(DeleteListItemModal, {
props: {
item: sampleItem,
},
})
expect(wrapper.text()).toContain('Delete "Apples"?')
expect(wrapper.text()).toContain('Are you sure you want to delete this item?')
expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete item')
expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
})
it('emits confirm event when Delete button is clicked', async () => {
const wrapper = mount(DeleteListItemModal, {
props: {
item: sampleItem,
},
})
await wrapper.find('.confirm-delete-btn').trigger('click')
expect(wrapper.emitted('confirm')).toBeTruthy()
})
it('emits close event when Cancel button is clicked', async () => {
const wrapper = mount(DeleteListItemModal, {
props: {
item: sampleItem,
},
})
await wrapper.find('.cancel-btn').trigger('click')
expect(wrapper.emitted('close')).toBeTruthy()
})
})
src/components/__tests__/ListItemRow.spec.ts
+67 -3
View File
@@ -47,7 +47,39 @@ describe('ListItemRow', () => {
expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
})
it('deletes item when Delete item is clicked in submenu', async () => {
it('toggles completed state when the title text is clicked', async () => {
const wrapper = mount(ListItemRow, {
props: {
item: sampleItem,
},
})
const listsStore = useListsStore()
const toggleSpy = vi.spyOn(listsStore, 'setListItemCompleted').mockResolvedValue()
await wrapper.find('.title').trigger('click')
expect(toggleSpy).toHaveBeenCalledWith('item-1', true)
})
it('opens the title editor via the Edit title submenu item', async () => {
const wrapper = mount(ListItemRow, {
props: {
item: sampleItem,
},
})
await wrapper.find('.menu-trigger-btn').trigger('click')
const editBtn = wrapper.find('.submenu-item:not(.submenu-item-danger)')
expect(editBtn.text()).toContain('Edit title')
await editBtn.trigger('click')
expect(wrapper.find('.title-input').exists()).toBe(true)
expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
})
it('opens a confirmation modal when Delete item is clicked in submenu', async () => {
const wrapper = mount(ListItemRow, {
props: {
item: sampleItem,
@@ -61,10 +93,42 @@ describe('ListItemRow', () => {
await wrapper.find('.menu-trigger-btn').trigger('click')
expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
// 2nd click: delete item
// 2nd click: opens confirmation modal, doesn't delete yet
await wrapper.find('.submenu-item-danger').trigger('click')
expect(deleteSpy).toHaveBeenCalledWith('item-1')
expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
expect(deleteSpy).not.toHaveBeenCalled()
const modal = wrapper.findComponent({ name: 'DeleteListItemModal' })
expect(modal.exists()).toBe(true)
expect(modal.text()).toContain('Delete "Apples"?')
// Confirm deletion in modal
await modal.find('.confirm-delete-btn').trigger('click')
expect(deleteSpy).toHaveBeenCalledWith('item-1')
expect(wrapper.findComponent({ name: 'DeleteListItemModal' }).exists()).toBe(false)
})
it('cancels item deletion when cancel is clicked in confirmation modal', async () => {
const wrapper = mount(ListItemRow, {
props: {
item: sampleItem,
},
})
const listsStore = useListsStore()
const deleteSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
await wrapper.find('.menu-trigger-btn').trigger('click')
await wrapper.find('.submenu-item-danger').trigger('click')
const modal = wrapper.findComponent({ name: 'DeleteListItemModal' })
expect(modal.exists()).toBe(true)
await modal.find('.cancel-btn').trigger('click')
expect(deleteSpy).not.toHaveBeenCalled()
expect(wrapper.findComponent({ name: 'DeleteListItemModal' }).exists()).toBe(false)
})
})
src/database/db.ts
+2 -2
View File
@@ -4,8 +4,8 @@ import type {
ListItem,
CreateListPayload,
CreateListItemPayload,
UpdateListItemPayload,
SetListItemCompletedPayload,
SetListItemTitlePayload,
} from '@/types/list'
export interface LocalList extends List {
@@ -36,7 +36,7 @@ interface SyncQueueEntryBase {
type SyncOperationPayloads = {
createList: CreateListPayload
createListItem: CreateListItemPayload
updateListItem: UpdateListItemPayload
updateListItemTitle: SetListItemTitlePayload
setListItemCompleted: SetListItemCompletedPayload
deleteList: DeleteListPayload
deleteListItem: DeleteListItemPayload
src/stores/__tests__/lists.spec.ts
+7 -8
View File
@@ -109,7 +109,7 @@ const listsApiMocks = vi.hoisted(() => ({
createListApi: vi.fn<() => Promise<unknown>>(),
getListItemsApi: vi.fn<() => Promise<unknown>>(),
createListItemApi: vi.fn<() => Promise<unknown>>(),
updateListItemApi: vi.fn<() => Promise<unknown>>(),
updateListItemTitleApi: vi.fn<() => Promise<unknown>>(),
setListItemCompletedApi: vi.fn<() => Promise<unknown>>(),
addUserToListApi: vi.fn<() => Promise<unknown>>(),
removeUserFromListApi: vi.fn<() => Promise<unknown>>(),
@@ -211,29 +211,28 @@ describe('useListsStore', () => {
expect(store.error).toBe('Network error')
})
it('updates a list item locally and pushes the change to the server', async () => {
it('updates a list item title locally and pushes the change via the dedicated endpoint', async () => {
listsApiMocks.createListItemApi.mockResolvedValueOnce({
id: 'server-item-2',
list_id: '',
title: 'Eggs',
is_completed: false,
})
listsApiMocks.updateListItemApi.mockResolvedValueOnce(undefined)
listsApiMocks.updateListItemTitleApi.mockResolvedValueOnce(undefined)
const store = useListsStore()
await store.createListItem('list-1', 'Eggs')
await store.sync()
const created = store.listItems.find((entry) => entry.title === 'Eggs')!
await store.updateListItem(created.id, { is_completed: true })
await store.updateListItemTitle(created.id, 'Free-range eggs')
await store.sync()
expect(listsApiMocks.updateListItemApi).toHaveBeenCalledWith({
list_item_id: created.id,
is_completed: true,
expect(listsApiMocks.updateListItemTitleApi).toHaveBeenCalledWith(created.id, {
title: 'Free-range eggs',
})
const updated = store.listItems.find((entry) => entry.id === created.id)
expect(updated?.is_completed).toBe(true)
expect(updated?.title).toBe('Free-range eggs')
expect(updated?.pendingSync).toBe(false)
})
src/stores/lists.ts
+9 -13
View File
@@ -13,7 +13,7 @@ import {
createListApi,
getListItemsApi,
createListItemApi,
updateListItemApi,
updateListItemTitleApi,
setListItemCompletedApi,
addUserToListApi,
removeUserFromListApi,
@@ -180,12 +180,9 @@ export const useListsStore = defineStore('lists', () => {
return localItem
}
async function updateListItem(
itemId: string,
changes: { title?: string; is_completed?: boolean },
) {
async function updateListItemTitle(itemId: string, title: string) {
const patch = {
...changes,
title,
modified_at: new Date().toISOString(),
pendingSync: true,
}
@@ -193,8 +190,8 @@ export const useListsStore = defineStore('lists', () => {
const existingItem = listItems.value.find((entry) => entry.id === itemId)
if (existingItem) Object.assign(existingItem, patch)
await enqueue({
type: 'updateListItem',
payload: { list_item_id: itemId, ...changes },
type: 'updateListItemTitle',
payload: { title },
localListItemId: itemId,
})
scheduleSync()
@@ -357,11 +354,10 @@ export const useListsStore = defineStore('lists', () => {
}
break
}
case 'updateListItem': {
await updateListItemApi(entry.payload)
if (entry.localListItemId) {
case 'updateListItemTitle': {
if (!entry.localListItemId) break
await updateListItemTitleApi(entry.localListItemId, entry.payload)
await markListItemSynced(entry.localListItemId)
}
break
}
case 'setListItemCompleted': {
@@ -570,7 +566,7 @@ export const useListsStore = defineStore('lists', () => {
refresh,
createList,
createListItem,
updateListItem,
updateListItemTitle,
setListItemCompleted,
addUserToList,
removeUserFromList,
src/types/list.ts
+4 -6
View File
@@ -25,16 +25,14 @@ export interface CreateListItemPayload {
title: string
}
export interface UpdateListItemPayload {
list_item_id: string
title?: string
is_completed?: boolean
}
export interface SetListItemCompletedPayload {
is_completed: boolean
}
export interface SetListItemTitlePayload {
title: string
}
export interface AddUserToListPayload {
list_id: string
email: string
src/views/__tests__/ListDetailView.spec.ts
+9 -2
View File
@@ -121,7 +121,7 @@ describe('ListDetailView', () => {
expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
})
it('allows deleting list items via two clicks on item row menu', async () => {
it('allows deleting list items via menu and confirmation modal', async () => {
const listsStore = useListsStore()
const deleteItemSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
const sampleList: LocalList = {
@@ -156,9 +156,16 @@ describe('ListDetailView', () => {
const deleteItemBtn = itemRow.find('.submenu-item-danger')
expect(deleteItemBtn.exists()).toBe(true)
// 2nd click: delete item
// 2nd click: opens confirmation modal
await deleteItemBtn.trigger('click')
const modal = itemRow.findComponent({ name: 'DeleteListItemModal' })
expect(modal.exists()).toBe(true)
expect(deleteItemSpy).not.toHaveBeenCalled()
// Confirm deletion in modal
await modal.find('.confirm-delete-btn').trigger('click')
expect(deleteItemSpy).toHaveBeenCalledWith('item-1')
})
})