project-manager/web/src/views/HomeView.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>