project-manager/web/src/views/ListView.vue

<script setup lang="ts">
import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import draggable from 'vuedraggable'
import TodoItemRow from '../components/TodoItemRow.vue'
import { ApiError, apiRequest } from '../lib/api'
import { useItemsStore } from '../stores/items'
import { useListsStore } from '../stores/lists'
import type { TodoItem, TodoList } from '../types'

const route = useRoute()
const router = useRouter()
const items = useItemsStore()
const lists = useListsStore()

const listId = Number(route.params.id)
const list = ref<TodoList | null>(null)
const loadError = ref<string | null>(null)
const actionError = ref<string | null>(null)

const titleDraft = ref('')
const descriptionDraft = ref('')

const menuOpen = ref(false)
const confirmingDelete = ref(false)
const deleting = ref(false)
const deleteError = ref<string | null>(null)
const cancelButton = ref<HTMLButtonElement>()

const newText = ref('')
const submitting = ref(false)

const summary = computed(() => {
  const total = items.items.length
  if (total === 0) return 'No items yet.'
  return `${items.completedCount()} of ${total} done.`
})

watch(list, (value) => {
  if (value) {
    titleDraft.value = value.title
    descriptionDraft.value = value.description
  }
})

watch(confirmingDelete, async (open) => {
  if (open) {
    await nextTick()
    cancelButton.value?.focus()
  }
})

onMounted(() => {
  void load()
  window.addEventListener('keydown', onKeydown)
})
onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown))

function onKeydown(event: KeyboardEvent) {
  if (event.key !== 'Escape') return
  if (confirmingDelete.value) confirmingDelete.value = false
  else if (menuOpen.value) menuOpen.value = false
}

async function load() {
  loadError.value = null
  try {
    const [{ list: fetched }] = await Promise.all([
      apiRequest<{ list: TodoList }>(`/lists/${listId}`, { auth: true }),
      items.load(listId),
    ])
    list.value = fetched
  } catch (e) {
    if (e instanceof ApiError && e.status === 404) {
      loadError.value = 'That list does not exist.'
    } else {
      loadError.value = e instanceof ApiError ? e.message : 'Could not load the list.'
    }
  }
}

async function patchList(fields: { title?: string; description?: string }) {
  actionError.value = null
  try {
    const { list: updated } = await apiRequest<{ list: TodoList }>(`/lists/${listId}`, {
      method: 'PATCH',
      auth: true,
      body: fields,
    })
    list.value = updated
  } catch (e) {
    actionError.value = e instanceof ApiError ? e.message : 'Could not save the change.'
    if (list.value) {
      titleDraft.value = list.value.title
      descriptionDraft.value = list.value.description
    }
  }
}

function saveTitle() {
  if (!list.value) return
  const next = titleDraft.value.trim()
  if (next === '') {
    titleDraft.value = list.value.title // title is required
    return
  }
  if (next !== list.value.title) void patchList({ title: next })
}

function saveDescription() {
  if (!list.value) return
  const next = descriptionDraft.value.trim()
  if (next !== list.value.description) void patchList({ description: next })
}

function askDelete() {
  menuOpen.value = false
  deleteError.value = null
  confirmingDelete.value = true
}

async function confirmDelete() {
  deleting.value = true
  deleteError.value = null
  try {
    await apiRequest(`/lists/${listId}`, { method: 'DELETE', auth: true })
    lists.reset()
    items.reset()
    await router.push('/')
  } catch (e) {
    deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the list.'
    deleting.value = false
  }
}

/** Run a store mutation, surfacing failures and resyncing from the server. */
async function run(op: Promise<unknown>) {
  actionError.value = null
  try {
    await op
  } catch (e) {
    actionError.value = e instanceof ApiError ? e.message : 'Something went wrong.'
    await items.load(listId)
  }
}

function onReorder(event: { oldIndex?: number; newIndex?: number }) {
  if (event.oldIndex === event.newIndex) return
  void run(items.persistOrder())
}

async function onCreate() {
  submitting.value = true
  actionError.value = null
  try {
    await items.add(newText.value)
    newText.value = ''
  } catch (e) {
    actionError.value = e instanceof ApiError ? e.message : 'Could not add the item.'
  } finally {
    submitting.value = false
  }
}
</script>

<template>
  <section class="card">
    <p><RouterLink to="/">&larr; All lists</RouterLink></p>

    <p v-if="loadError" class="form-error">{{ loadError }}</p>

    <template v-else-if="list">
      <div class="list-head">
        <h1 class="list-head__title">
          <input
            v-model="titleDraft"
            type="text"
            maxlength="255"
            aria-label="List title"
            @blur="saveTitle"
            @keyup.enter="($event.target as HTMLInputElement).blur()"
          />
        </h1>

        <div class="menu">
          <button
            type="button"
            class="menu__toggle"
            aria-haspopup="true"
            :aria-expanded="menuOpen"
            @click="menuOpen = !menuOpen"
          >
            Manage &#9662;
          </button>

          <template v-if="menuOpen">
            <div class="menu__backdrop" @click="menuOpen = false" />
            <ul class="menu__list" role="menu">
              <li role="none">
                <button
                  type="button"
                  role="menuitem"
                  class="menu__item menu__item--danger"
                  @click="askDelete"
                >
                  Delete list
                </button>
              </li>
            </ul>
          </template>
        </div>
      </div>

      <textarea
        v-model="descriptionDraft"
        class="list-head__desc"
        rows="2"
        maxlength="2000"
        placeholder="Add a description"
        aria-label="List description"
        @blur="saveDescription"
      />

      <p class="muted">{{ summary }}</p>
      <p v-if="actionError" class="form-error">{{ actionError }}</p>

      <p v-if="items.loading && !items.loaded" class="muted">Loading…</p>

      <draggable
        v-else-if="items.items.length"
        :list="items.items"
        item-key="id"
        tag="ul"
        class="items"
        handle=".item__handle"
        ghost-class="item--ghost"
        :animation="150"
        @end="onReorder"
      >
        <template #item="{ element }: { element: TodoItem }">
          <TodoItemRow
            :item="element"
            @toggle="(v) => run(items.setComplete(element, v))"
            @save-text="(v) => run(items.setText(element, v))"
            @delete="run(items.remove(element))"
          />
        </template>
      </draggable>

      <form class="form form--new-list" @submit.prevent="onCreate">
        <label>
          <span>New item</span>
          <input v-model="newText" type="text" maxlength="1000" required />
        </label>
        <button type="submit" :disabled="submitting">
          {{ submitting ? 'Adding…' : 'Add item' }}
        </button>
      </form>
    </template>
  </section>

  <div
    v-if="confirmingDelete"
    class="modal"
    role="dialog"
    aria-modal="true"
    aria-labelledby="confirm-delete-title"
  >
    <div class="modal__backdrop" @click="confirmingDelete = false" />
    <div class="modal__dialog">
      <h2 id="confirm-delete-title">Delete this list?</h2>
      <p class="muted">
        &ldquo;{{ list?.title }}&rdquo; and its {{ items.items.length }}
        item{{ items.items.length === 1 ? '' : 's' }} will be permanently deleted.
      </p>
      <p v-if="deleteError" class="form-error">{{ deleteError }}</p>
      <div class="modal__actions">
        <button
          ref="cancelButton"
          type="button"
          class="btn-secondary"
          :disabled="deleting"
          @click="confirmingDelete = false"
        >
          Cancel
        </button>
        <button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
          {{ deleting ? 'Deleting…' : 'Delete list' }}
        </button>
      </div>
    </div>
  </div>
</template>