feat: added delete list & list items

2026-08-21 21:52:26 +02:00
parent 7273fe85d3
commit 0007f96c35
17 changed files with 1639 additions and 10 deletions
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useListsStore } from '@/stores/lists'
 import ListItemRow from '@/components/ListItemRow.vue'
+import DeleteListModal from '@/components/DeleteListModal.vue'

 const props = defineProps<{ id: string }>()

@@ -12,10 +13,32 @@ const listsStore = useListsStore()
 const newItemTitle = ref('')
 const isAddingItem = ref(false)
 const itemError = ref('')
+const isMenuOpen = ref(false)
+const showDeleteModal = ref(false)
+const menuContainerRef = ref<HTMLElement | null>(null)
+
+function handleClickOutside(event: MouseEvent) {
+  if (menuContainerRef.value && !menuContainerRef.value.contains(event.target as Node)) {
+    isMenuOpen.value = false
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && isMenuOpen.value) {
+    isMenuOpen.value = false
+  }
+}

 onMounted(() => {
  listsStore.loadLists()
  listsStore.loadListItems(props.id)
+  document.addEventListener('click', handleClickOutside)
+  document.addEventListener('keydown', handleKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keydown', handleKeydown)
 })

 const list = computed(() => listsStore.lists.find((entry) => entry.id === props.id))
@@ -23,6 +46,32 @@ const items = computed(() => listsStore.itemsForList(props.id))
 const pendingItems = computed(() => items.value.filter((item) => !item.is_completed))
 const completedItems = computed(() => items.value.filter((item) => item.is_completed))

+function toggleMenu(event: Event) {
+  event.preventDefault()
+  event.stopPropagation()
+  isMenuOpen.value = !isMenuOpen.value
+}
+
+function handleOpenDelete() {
+  isMenuOpen.value = false
+  showDeleteModal.value = true
+}
+
+function handleCloseDelete() {
+  showDeleteModal.value = false
+}
+
+async function handleConfirmDelete() {
+  if (!list.value) return
+  showDeleteModal.value = false
+  try {
+    await listsStore.deleteList(list.value.id)
+    router.push('/')
+  } catch (err) {
+    itemError.value = err instanceof Error ? err.message : 'Failed to delete list'
+  }
+}
+
 async function handleAddItem() {
  const title = newItemTitle.value.trim()
  if (!title) return
@@ -45,7 +94,52 @@ async function handleAddItem() {
    <button type="button" class="back-link" @click="router.push('/')">‹ Lists</button>

    <template v-if="list">
-      <h1>{{ list.name }}</h1>
+      <div class="list-header">
+        <h1>{{ list.name }}</h1>
+
+        <div ref="menuContainerRef" class="menu-container">
+          <button
+            type="button"
+            class="menu-trigger-btn"
+            aria-label="List options"
+            aria-haspopup="true"
+            :aria-expanded="isMenuOpen"
+            title="More options"
+            @click="toggleMenu"
+          >
+            <svg class="dots-icon" viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
+              <circle cx="5" cy="12" r="2" />
+              <circle cx="12" cy="12" r="2" />
+              <circle cx="19" cy="12" r="2" />
+            </svg>
+          </button>
+
+          <div v-if="isMenuOpen" class="submenu-dropdown card" role="menu">
+            <button
+              type="button"
+              class="submenu-item submenu-item-danger"
+              role="menuitem"
+              @click="handleOpenDelete"
+            >
+              <svg
+                class="submenu-icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="3 6 5 6 21 6" />
+                <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+                <line x1="10" y1="11" x2="10" y2="17" />
+                <line x1="14" y1="11" x2="14" y2="17" />
+              </svg>
+              <span>Delete list</span>
+            </button>
+          </div>
+        </div>
+      </div>
      <p v-if="list.pendingSync" class="pending-note">This list hasn't synced to the server yet.</p>

      <form class="new-item-form" @submit.prevent="handleAddItem">
@@ -82,6 +176,13 @@ async function handleAddItem() {
      </section>

      <p v-if="items.length === 0" class="empty-hint">No items yet — add your first one above.</p>
+
+      <DeleteListModal
+        v-if="showDeleteModal && list"
+        :list="list"
+        @close="handleCloseDelete"
+        @confirm="handleConfirmDelete"
+      />
    </template>

    <p v-else class="empty-hint">List not found on this device.</p>
@@ -99,11 +200,22 @@ async function handleAddItem() {
  cursor: pointer;
 }

-h1 {
-  font-size: 1.35rem;
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
  margin-bottom: 0.5rem;
 }

+.list-header h1 {
+  font-size: 1.35rem;
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .pending-note {
  font-size: 0.8rem;
  color: var(--c-warning);
@@ -150,4 +262,102 @@ h1 {
  text-align: center;
  padding: 1.5rem 0;
 }
+
+.menu-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.menu-trigger-btn {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-sm);
+  color: var(--c-text-soft);
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out;
+}
+
+.menu-trigger-btn:hover,
+.menu-trigger-btn[aria-expanded='true'] {
+  background-color: var(--c-bg-mute);
+  color: var(--c-heading);
+  border-color: var(--c-border);
+}
+
+.dots-icon {
+  display: block;
+}
+
+.submenu-dropdown {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 30;
+  min-width: 140px;
+  background-color: var(--c-bg-elevated);
+  border: 1px solid var(--c-border-hover);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  padding: 0.35rem;
+  animation: dropdownIn 0.12s ease-out;
+}
+
+.submenu-item {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  width: 100%;
+  padding: 0.5rem 0.65rem;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: var(--c-heading);
+  font-size: 0.85rem;
+  cursor: pointer;
+  text-align: left;
+  transition:
+    background-color 0.15s ease-in-out,
+    color 0.15s ease-in-out;
+}
+
+.submenu-item:hover {
+  background-color: var(--c-bg-mute);
+  color: var(--c-accent-strong);
+}
+
+.submenu-item-danger {
+  color: var(--c-danger);
+}
+
+.submenu-item-danger:hover {
+  background-color: var(--c-danger-bg);
+  color: var(--c-danger);
+}
+
+.submenu-icon {
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+}
+
+@keyframes dropdownIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
 </style>
@@ -4,6 +4,7 @@ import { useListsStore } from '@/stores/lists'
 import type { LocalList } from '@/database/db'
 import ListCard from '@/components/ListCard.vue'
 import ShareListModal from '@/components/ShareListModal.vue'
+import DeleteListModal from '@/components/DeleteListModal.vue'

 const listsStore = useListsStore()

@@ -11,6 +12,7 @@ const newListName = ref('')
 const isCreating = ref(false)
 const createError = ref('')
 const sharingList = ref<LocalList | null>(null)
+const deletingList = ref<LocalList | null>(null)

 onMounted(() => {
  listsStore.loadLists()
@@ -24,6 +26,25 @@ function handleCloseShare() {
  sharingList.value = null
 }

+function handleOpenDelete(list: LocalList) {
+  deletingList.value = list
+}
+
+function handleCloseDelete() {
+  deletingList.value = null
+}
+
+async function handleConfirmDelete() {
+  if (!deletingList.value) return
+  const listId = deletingList.value.id
+  deletingList.value = null
+  try {
+    await listsStore.deleteList(listId)
+  } catch (err) {
+    createError.value = err instanceof Error ? err.message : 'Failed to delete list'
+  }
+}
+
 async function handleCreateList() {
  const name = newListName.value.trim()
  if (!name) return
@@ -67,7 +88,11 @@ async function handleCreateList() {

    <ul v-if="listsStore.sortedLists.length > 0" class="lists">
      <li v-for="list in listsStore.sortedLists" :key="list.id">
-        <ListCard :list="list" @share="handleOpenShare(list)" />
+        <ListCard
+          :list="list"
+          @share="handleOpenShare(list)"
+          @delete="handleOpenDelete(list)"
+        />
      </li>
    </ul>

@@ -77,6 +102,12 @@ async function handleCreateList() {
    </div>

    <ShareListModal v-if="sharingList" :list="sharingList" @close="handleCloseShare" />
+    <DeleteListModal
+      v-if="deletingList"
+      :list="deletingList"
+      @close="handleCloseDelete"
+      @confirm="handleConfirmDelete"
+    />
  </main>
 </template>

@@ -0,0 +1,160 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListDetailView from '../ListDetailView.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+const pushMock = vi.fn<(to: string) => void>()
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: pushMock,
+  }),
+}))
+
+describe('ListDetailView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+    pushMock.mockClear()
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'loadLists').mockImplementation(async () => {})
+    vi.spyOn(listsStore, 'loadListItems').mockImplementation(async () => {})
+  })
+
+  it('renders list items without the share card', () => {
+    const listsStore = useListsStore()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    expect(wrapper.text()).toContain('Groceries')
+    expect(wrapper.text()).not.toContain('Share this list')
+    expect(wrapper.find('.share-card').exists()).toBe(false)
+  })
+
+  it('opens confirmation modal and deletes list upon confirmation, then redirects to /', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const headerMenuBtn = wrapper.find('.list-header .menu-trigger-btn')
+    expect(headerMenuBtn.exists()).toBe(true)
+
+    // 1st click: open list options menu
+    await headerMenuBtn.trigger('click')
+    const deleteBtn = wrapper.find('.list-header .submenu-item-danger')
+    expect(deleteBtn.exists()).toBe(true)
+    expect(deleteBtn.text()).toContain('Delete list')
+
+    // 2nd click: opens confirmation modal
+    await deleteBtn.trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Delete "Groceries"?')
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(pushMock).not.toHaveBeenCalled()
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('list-1')
+    expect(pushMock).toHaveBeenCalledWith('/')
+  })
+
+  it('cancels list deletion when cancel is clicked in confirmation modal', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const headerMenuBtn = wrapper.find('.list-header .menu-trigger-btn')
+    await headerMenuBtn.trigger('click')
+    await wrapper.find('.list-header .submenu-item-danger').trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+
+    await modal.find('.cancel-btn').trigger('click')
+
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(pushMock).not.toHaveBeenCalled()
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+
+  it('allows deleting list items via two clicks on item row menu', async () => {
+    const listsStore = useListsStore()
+    const deleteItemSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Groceries',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+    listsStore.listItems = [
+      {
+        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',
+      },
+    ]
+
+    const wrapper = mount(ListDetailView, {
+      props: {
+        id: 'list-1',
+      },
+    })
+
+    const itemRow = wrapper.findComponent({ name: 'ListItemRow' })
+    expect(itemRow.exists()).toBe(true)
+
+    // 1st click: open item menu
+    await itemRow.find('.menu-trigger-btn').trigger('click')
+    const deleteItemBtn = itemRow.find('.submenu-item-danger')
+    expect(deleteItemBtn.exists()).toBe(true)
+
+    // 2nd click: delete item
+    await deleteItemBtn.trigger('click')
+
+    expect(deleteItemSpy).toHaveBeenCalledWith('item-1')
+  })
+})
@@ -0,0 +1,126 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListsView from '../ListsView.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+describe('ListsView', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'loadLists').mockImplementation(async () => {})
+  })
+
+  it('renders lists and opens share modal when list card emits share', async () => {
+    const listsStore = useListsStore()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Shopping')
+    expect(wrapper.findComponent({ name: 'ShareListModal' }).exists()).toBe(false)
+
+    // Trigger share from ListCard
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    await wrapper.find('.submenu-item').trigger('click')
+
+    expect(wrapper.findComponent({ name: 'ShareListModal' }).exists()).toBe(true)
+    expect(wrapper.find('#share-modal-title').text()).toBe('Share "Shopping"')
+  })
+
+  it('opens confirmation modal and deletes list upon confirmation', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+
+    // Click 1: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    // Click 2: click delete list option in menu
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    // Modal should now be open
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+    expect(modal.text()).toContain('Delete "Shopping"?')
+    expect(deleteSpy).not.toHaveBeenCalled()
+
+    // Confirm deletion in modal
+    await modal.find('.confirm-delete-btn').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('list-1')
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+
+  it('cancels list deletion when cancel is clicked in confirmation modal', async () => {
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteList').mockResolvedValue()
+    const sampleList: LocalList = {
+      id: 'list-1',
+      name: 'Shopping',
+      created_at: '2026-08-21T00:00:00.000Z',
+      modified_at: '2026-08-21T00:00:00.000Z',
+    }
+    listsStore.lists = [sampleList]
+
+    const wrapper = mount(ListsView, {
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    // Click 1: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    // Click 2: click delete list option in menu
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    const modal = wrapper.findComponent({ name: 'DeleteListModal' })
+    expect(modal.exists()).toBe(true)
+
+    // Cancel in modal
+    await modal.find('.cancel-btn').trigger('click')
+
+    expect(deleteSpy).not.toHaveBeenCalled()
+    expect(wrapper.findComponent({ name: 'DeleteListModal' }).exists()).toBe(false)
+  })
+})