aneurinandClaude Sonnet 5
bc1142b929
API: GET /api/lists is now ordered alphabetically (COLLATE NOCASE) by title with no other option, and TodoListController rejects a create past 100 lists per owner with 409. New TodoListRepository::countForOwner. Frontend: HomeView replaces the placeholder with the user's lists (rendered in API order) and a create form (title + optional description). New Pinia lists store fetches and creates, re-fetching after a create so the new list sorts into place; it is reset on logout. Form disables and explains at 100 lists; create errors surface inline. Neutral .badge with a .badge--warn variant; dropped the unused .facts styles. Tests: alphabetical ordering and the 100-list cap. Suite: 17 passing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
import { ApiError } from '../lib/api'
|
|
import { useAuthStore } from '../stores/auth'
|
|
import { MAX_LISTS, useListsStore } from '../stores/lists'
|
|
|
|
const auth = useAuthStore()
|
|
const lists = useListsStore()
|
|
|
|
const loadError = ref<string | null>(null)
|
|
|
|
const title = ref('')
|
|
const description = ref('')
|
|
const createError = ref<ApiError | null>(null)
|
|
const submitting = ref(false)
|
|
|
|
onMounted(load)
|
|
|
|
async function load() {
|
|
loadError.value = null
|
|
try {
|
|
await lists.fetchLists()
|
|
} catch (e) {
|
|
loadError.value = e instanceof ApiError ? e.message : 'Could not load your lists.'
|
|
}
|
|
}
|
|
|
|
async function onCreate() {
|
|
submitting.value = true
|
|
createError.value = null
|
|
try {
|
|
await lists.createList(title.value, description.value)
|
|
title.value = ''
|
|
description.value = ''
|
|
} catch (e) {
|
|
createError.value = e instanceof ApiError ? e : new ApiError('Could not create the list.', 0)
|
|
} finally {
|
|
submitting.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="card">
|
|
<h1>Your lists</h1>
|
|
|
|
<div v-if="!auth.emailVerified" class="notice">
|
|
Your email address <strong>{{ auth.user?.email }}</strong> has not been
|
|
verified yet.
|
|
</div>
|
|
|
|
<form class="form" @submit.prevent="onCreate">
|
|
<label>
|
|
<span>New list title</span>
|
|
<input v-model="title" type="text" maxlength="255" required :disabled="lists.lists.length >= MAX_LISTS" />
|
|
<small v-if="createError?.fieldError('title')" class="field-error">
|
|
{{ createError.fieldError('title') }}
|
|
</small>
|
|
</label>
|
|
|
|
<label>
|
|
<span>Description <span class="hint">(optional)</span></span>
|
|
<input v-model="description" type="text" maxlength="2000" :disabled="lists.lists.length >= MAX_LISTS" />
|
|
</label>
|
|
|
|
<p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
|
|
{{ createError.message }}
|
|
</p>
|
|
|
|
<button type="submit" :disabled="submitting || lists.lists.length >= MAX_LISTS">
|
|
{{ submitting ? 'Creating…' : 'Create list' }}
|
|
</button>
|
|
|
|
<p v-if="lists.lists.length >= MAX_LISTS" class="hint">
|
|
You have reached the maximum of {{ MAX_LISTS }} lists.
|
|
</p>
|
|
</form>
|
|
|
|
<p v-if="loadError" class="form-error">{{ loadError }}</p>
|
|
<p v-else-if="lists.loading && !lists.loaded" class="muted">Loading…</p>
|
|
<p v-else-if="lists.lists.length === 0" class="muted">
|
|
No lists yet — create your first one above.
|
|
</p>
|
|
|
|
<ul v-else class="lists">
|
|
<li v-for="list in lists.lists" :key="list.id" class="lists__item">
|
|
<div class="lists__head">
|
|
<span class="lists__title">{{ list.title }}</span>
|
|
<span class="badge">{{ list.completed_count }} / {{ list.item_count }} done</span>
|
|
</div>
|
|
<p v-if="list.description" class="muted">{{ list.description }}</p>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</template>
|