Rename lists -> projects and items -> cards throughout
Project scope shifts from a todo list to a project-management app. This is a straight terminology rename across code, comments, migrations, tests, and docs — no behaviour change. - DB: table todo_lists -> projects, todo_items -> cards, column todo_items.list_id -> cards.project_id, indexes renamed. Migrations 003/004 rewritten in place (destructive; recreate the volume with `down -v`). - API: /api/lists -> /api/projects, nested /items -> /cards, reorder body item_ids -> card_ids, JSON keys list/lists/item/items -> project/projects/ card/cards, item_count -> card_count, list_id -> project_id, and the matching error messages. - PHP: TodoList/TodoItem Repository + Controller -> Project/Card; shared SQL aliases l/i -> p/c. - Frontend: stores lists.ts/items.ts -> projects.ts/cards.ts (useProjectsStore / useCardsStore, MAX_PROJECTS), ListView -> ProjectView, TodoItemRow -> CardRow, route /lists/:id -> /projects/:id (name "project"), types TodoList/ TodoItem -> Project/Card, and all UI copy. CSS .lists*/.list-head* -> .projects*/.project-head*, .item* -> .card-row* (kept the generic .card panel class), .items -> .cards. - Product name in the header, PWA manifest, index.html title and package descriptions -> "Project Manager" / "Projects". Backend suite: 37 passing. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
+23
-23
@@ -2,10 +2,10 @@
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
import { ApiError } from '../lib/api'
|
||||
import { useAuthStore } from '../stores/auth'
|
||||
import { MAX_LISTS, useListsStore } from '../stores/lists'
|
||||
import { MAX_PROJECTS, useProjectsStore } from '../stores/projects'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const lists = useListsStore()
|
||||
const projects = useProjectsStore()
|
||||
|
||||
const loadError = ref<string | null>(null)
|
||||
|
||||
@@ -13,10 +13,10 @@ const title = ref('')
|
||||
const createError = ref<ApiError | null>(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
const atLimit = computed(() => lists.lists.length >= MAX_LISTS)
|
||||
const atLimit = computed(() => projects.projects.length >= MAX_PROJECTS)
|
||||
const summary = computed(() => {
|
||||
const n = lists.lists.length
|
||||
return `You have ${n} ${n === 1 ? 'list' : 'lists'}.`
|
||||
const n = projects.projects.length
|
||||
return `You have ${n} ${n === 1 ? 'project' : 'projects'}.`
|
||||
})
|
||||
|
||||
onMounted(load)
|
||||
@@ -24,9 +24,9 @@ onMounted(load)
|
||||
async function load() {
|
||||
loadError.value = null
|
||||
try {
|
||||
await lists.fetchLists()
|
||||
await projects.fetchProjects()
|
||||
} catch (e) {
|
||||
loadError.value = e instanceof ApiError ? e.message : 'Could not load your lists.'
|
||||
loadError.value = e instanceof ApiError ? e.message : 'Could not load your projects.'
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,10 +34,10 @@ async function onCreate() {
|
||||
submitting.value = true
|
||||
createError.value = null
|
||||
try {
|
||||
await lists.createList(title.value)
|
||||
await projects.createProject(title.value)
|
||||
title.value = ''
|
||||
} catch (e) {
|
||||
createError.value = e instanceof ApiError ? e : new ApiError('Could not create the list.', 0)
|
||||
createError.value = e instanceof ApiError ? e : new ApiError('Could not create the project.', 0)
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -46,7 +46,7 @@ async function onCreate() {
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<h1>Your lists</h1>
|
||||
<h1>Your projects</h1>
|
||||
|
||||
<div v-if="!auth.emailVerified" class="notice">
|
||||
Your email address <strong>{{ auth.user?.email }}</strong> has not been
|
||||
@@ -54,29 +54,29 @@ async function onCreate() {
|
||||
</div>
|
||||
|
||||
<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="projects.loading && !projects.loaded" class="muted">Loading…</p>
|
||||
|
||||
<template v-else>
|
||||
<p class="muted">{{ summary }}</p>
|
||||
|
||||
<p v-if="lists.lists.length === 0" class="muted">
|
||||
No lists yet — create your first one below.
|
||||
<p v-if="projects.projects.length === 0" class="muted">
|
||||
No projects yet — create your first one below.
|
||||
</p>
|
||||
|
||||
<ul v-else class="lists">
|
||||
<li v-for="list in lists.lists" :key="list.id" class="lists__item">
|
||||
<RouterLink :to="{ name: 'list', params: { id: list.id } }" class="lists__link">
|
||||
<div class="lists__head">
|
||||
<span class="lists__title">{{ list.title }}</span>
|
||||
<span class="badge">{{ list.completed_count }} / {{ list.item_count }} done</span>
|
||||
<ul v-else class="projects">
|
||||
<li v-for="project in projects.projects" :key="project.id" class="projects__item">
|
||||
<RouterLink :to="{ name: 'project', params: { id: project.id } }" class="projects__link">
|
||||
<div class="projects__head">
|
||||
<span class="projects__title">{{ project.title }}</span>
|
||||
<span class="badge">{{ project.completed_count }} / {{ project.card_count }} done</span>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<form class="form form--new-list" @submit.prevent="onCreate">
|
||||
<form class="form form--new-project" @submit.prevent="onCreate">
|
||||
<label>
|
||||
<span>New list title</span>
|
||||
<span>New project title</span>
|
||||
<input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
|
||||
<small v-if="createError?.fieldError('title')" class="field-error">
|
||||
{{ createError.fieldError('title') }}
|
||||
@@ -88,11 +88,11 @@ async function onCreate() {
|
||||
</p>
|
||||
|
||||
<button type="submit" :disabled="submitting || atLimit">
|
||||
{{ submitting ? 'Creating…' : 'Create list' }}
|
||||
{{ submitting ? 'Creating…' : 'Create project' }}
|
||||
</button>
|
||||
|
||||
<p v-if="atLimit" class="hint">
|
||||
You have reached the maximum of {{ MAX_LISTS }} lists.
|
||||
You have reached the maximum of {{ MAX_PROJECTS }} projects.
|
||||
</p>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
@@ -2,19 +2,19 @@
|
||||
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 CardRow from '../components/CardRow.vue'
|
||||
import { ApiError, apiRequest } from '../lib/api'
|
||||
import { useItemsStore } from '../stores/items'
|
||||
import { useListsStore } from '../stores/lists'
|
||||
import type { TodoItem, TodoList } from '../types'
|
||||
import { useCardsStore } from '../stores/cards'
|
||||
import { useProjectsStore } from '../stores/projects'
|
||||
import type { Card, Project } from '../types'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const items = useItemsStore()
|
||||
const lists = useListsStore()
|
||||
const cards = useCardsStore()
|
||||
const projects = useProjectsStore()
|
||||
|
||||
const listId = Number(route.params.id)
|
||||
const list = ref<TodoList | null>(null)
|
||||
const projectId = Number(route.params.id)
|
||||
const project = ref<Project | null>(null)
|
||||
const loadError = ref<string | null>(null)
|
||||
const actionError = ref<string | null>(null)
|
||||
|
||||
@@ -31,12 +31,12 @@ 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.`
|
||||
const total = cards.cards.length
|
||||
if (total === 0) return 'No cards yet.'
|
||||
return `${cards.completedCount()} of ${total} done.`
|
||||
})
|
||||
|
||||
watch(list, (value) => {
|
||||
watch(project, (value) => {
|
||||
if (value) {
|
||||
titleDraft.value = value.title
|
||||
descriptionDraft.value = value.description
|
||||
@@ -65,52 +65,52 @@ function onKeydown(event: KeyboardEvent) {
|
||||
async function load() {
|
||||
loadError.value = null
|
||||
try {
|
||||
const [{ list: fetched }] = await Promise.all([
|
||||
apiRequest<{ list: TodoList }>(`/lists/${listId}`, { auth: true }),
|
||||
items.load(listId),
|
||||
const [{ project: fetched }] = await Promise.all([
|
||||
apiRequest<{ project: Project }>(`/projects/${projectId}`, { auth: true }),
|
||||
cards.load(projectId),
|
||||
])
|
||||
list.value = fetched
|
||||
project.value = fetched
|
||||
} catch (e) {
|
||||
if (e instanceof ApiError && e.status === 404) {
|
||||
loadError.value = 'That list does not exist.'
|
||||
loadError.value = 'That project does not exist.'
|
||||
} else {
|
||||
loadError.value = e instanceof ApiError ? e.message : 'Could not load the list.'
|
||||
loadError.value = e instanceof ApiError ? e.message : 'Could not load the project.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function patchList(fields: { title?: string; description?: string }) {
|
||||
async function patchProject(fields: { title?: string; description?: string }) {
|
||||
actionError.value = null
|
||||
try {
|
||||
const { list: updated } = await apiRequest<{ list: TodoList }>(`/lists/${listId}`, {
|
||||
const { project: updated } = await apiRequest<{ project: Project }>(`/projects/${projectId}`, {
|
||||
method: 'PATCH',
|
||||
auth: true,
|
||||
body: fields,
|
||||
})
|
||||
list.value = updated
|
||||
project.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
|
||||
if (project.value) {
|
||||
titleDraft.value = project.value.title
|
||||
descriptionDraft.value = project.value.description
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function saveTitle() {
|
||||
if (!list.value) return
|
||||
if (!project.value) return
|
||||
const next = titleDraft.value.trim()
|
||||
if (next === '') {
|
||||
titleDraft.value = list.value.title // title is required
|
||||
titleDraft.value = project.value.title // title is required
|
||||
return
|
||||
}
|
||||
if (next !== list.value.title) void patchList({ title: next })
|
||||
if (next !== project.value.title) void patchProject({ title: next })
|
||||
}
|
||||
|
||||
function saveDescription() {
|
||||
if (!list.value) return
|
||||
if (!project.value) return
|
||||
const next = descriptionDraft.value.trim()
|
||||
if (next !== list.value.description) void patchList({ description: next })
|
||||
if (next !== project.value.description) void patchProject({ description: next })
|
||||
}
|
||||
|
||||
function askDelete() {
|
||||
@@ -123,12 +123,12 @@ async function confirmDelete() {
|
||||
deleting.value = true
|
||||
deleteError.value = null
|
||||
try {
|
||||
await apiRequest(`/lists/${listId}`, { method: 'DELETE', auth: true })
|
||||
lists.reset()
|
||||
items.reset()
|
||||
await apiRequest(`/projects/${projectId}`, { method: 'DELETE', auth: true })
|
||||
projects.reset()
|
||||
cards.reset()
|
||||
await router.push('/')
|
||||
} catch (e) {
|
||||
deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the list.'
|
||||
deleteError.value = e instanceof ApiError ? e.message : 'Could not delete the project.'
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
@@ -140,23 +140,23 @@ async function run(op: Promise<unknown>) {
|
||||
await op
|
||||
} catch (e) {
|
||||
actionError.value = e instanceof ApiError ? e.message : 'Something went wrong.'
|
||||
await items.load(listId)
|
||||
await cards.load(projectId)
|
||||
}
|
||||
}
|
||||
|
||||
function onReorder(event: { oldIndex?: number; newIndex?: number }) {
|
||||
if (event.oldIndex === event.newIndex) return
|
||||
void run(items.persistOrder())
|
||||
void run(cards.persistOrder())
|
||||
}
|
||||
|
||||
async function onCreate() {
|
||||
submitting.value = true
|
||||
actionError.value = null
|
||||
try {
|
||||
await items.add(newText.value)
|
||||
await cards.add(newText.value)
|
||||
newText.value = ''
|
||||
} catch (e) {
|
||||
actionError.value = e instanceof ApiError ? e.message : 'Could not add the item.'
|
||||
actionError.value = e instanceof ApiError ? e.message : 'Could not add the card.'
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
@@ -165,18 +165,18 @@ async function onCreate() {
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<p><RouterLink to="/">← All lists</RouterLink></p>
|
||||
<p><RouterLink to="/">← All projects</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">
|
||||
<template v-else-if="project">
|
||||
<div class="project-head">
|
||||
<h1 class="project-head__title">
|
||||
<input
|
||||
v-model="titleDraft"
|
||||
type="text"
|
||||
maxlength="255"
|
||||
aria-label="List title"
|
||||
aria-label="Project title"
|
||||
@blur="saveTitle"
|
||||
@keyup.enter="($event.target as HTMLInputElement).blur()"
|
||||
/>
|
||||
@@ -203,7 +203,7 @@ async function onCreate() {
|
||||
class="menu__item menu__item--danger"
|
||||
@click="askDelete"
|
||||
>
|
||||
Delete list
|
||||
Delete project
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -213,47 +213,47 @@ async function onCreate() {
|
||||
|
||||
<textarea
|
||||
v-model="descriptionDraft"
|
||||
class="list-head__desc"
|
||||
class="project-head__desc"
|
||||
rows="2"
|
||||
maxlength="2000"
|
||||
placeholder="Add a description"
|
||||
aria-label="List description"
|
||||
aria-label="Project 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>
|
||||
<p v-if="cards.loading && !cards.loaded" class="muted">Loading…</p>
|
||||
|
||||
<draggable
|
||||
v-else-if="items.items.length"
|
||||
:list="items.items"
|
||||
v-else-if="cards.cards.length"
|
||||
:list="cards.cards"
|
||||
item-key="id"
|
||||
tag="ul"
|
||||
class="items"
|
||||
handle=".item__handle"
|
||||
ghost-class="item--ghost"
|
||||
class="cards"
|
||||
handle=".card-row__handle"
|
||||
ghost-class="card-row--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 #item="{ element }: { element: Card }">
|
||||
<CardRow
|
||||
:card="element"
|
||||
@toggle="(v) => run(cards.setComplete(element, v))"
|
||||
@save-text="(v) => run(cards.setText(element, v))"
|
||||
@delete="run(cards.remove(element))"
|
||||
/>
|
||||
</template>
|
||||
</draggable>
|
||||
|
||||
<form class="form form--new-list" @submit.prevent="onCreate">
|
||||
<form class="form form--new-card" @submit.prevent="onCreate">
|
||||
<label>
|
||||
<span>New item</span>
|
||||
<span>New card</span>
|
||||
<input v-model="newText" type="text" maxlength="1000" required />
|
||||
</label>
|
||||
<button type="submit" :disabled="submitting">
|
||||
{{ submitting ? 'Adding…' : 'Add item' }}
|
||||
{{ submitting ? 'Adding…' : 'Add card' }}
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
@@ -268,10 +268,10 @@ async function onCreate() {
|
||||
>
|
||||
<div class="modal__backdrop" @click="confirmingDelete = false" />
|
||||
<div class="modal__dialog">
|
||||
<h2 id="confirm-delete-title">Delete this list?</h2>
|
||||
<h2 id="confirm-delete-title">Delete this project?</h2>
|
||||
<p class="muted">
|
||||
“{{ list?.title }}” and its {{ items.items.length }}
|
||||
item{{ items.items.length === 1 ? '' : 's' }} will be permanently deleted.
|
||||
“{{ project?.title }}” and its {{ cards.cards.length }}
|
||||
card{{ cards.cards.length === 1 ? '' : 's' }} will be permanently deleted.
|
||||
</p>
|
||||
<p v-if="deleteError" class="form-error">{{ deleteError }}</p>
|
||||
<div class="modal__actions">
|
||||
@@ -285,7 +285,7 @@ async function onCreate() {
|
||||
Cancel
|
||||
</button>
|
||||
<button type="button" class="btn-danger" :disabled="deleting" @click="confirmDelete">
|
||||
{{ deleting ? 'Deleting…' : 'Delete list' }}
|
||||
{{ deleting ? 'Deleting…' : 'Delete project' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user