feat(#17): CRUD de categorias — API Go + tela Vue + testes unitários

API REST /api/categories (GET/POST/PUT/DELETE) com regras de negócio: categorias padrão não podem ser excluídas; categorias com transações vinculadas também bloqueadas. Tela Vue com formulário inline de criação/edição, indicador visual de categorias padrão e botão de exclusão condicional. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
2026-05-26 20:11:54 -03:00
parent a3d8f363a5
commit d6782d51a5
12 changed files with 720 additions and 1 deletions
@@ -1,3 +1,34 @@
+<script setup lang="ts">
+</script>
+
 <template>
+  <header class="app-header">
+    <span class="app-title">💰 Financeiro Carvalho</span>
+    <nav class="app-nav">
+      <RouterLink to="/">Início</RouterLink>
+      <RouterLink to="/categorias">Categorias</RouterLink>
+    </nav>
+  </header>
  <RouterView />
 </template>
+
+<style>
+*, *::before, *::after { box-sizing: border-box; }
+body { margin: 0; font-family: system-ui, sans-serif; background: #f8fafc; color: #1e293b; }
+a { color: inherit; text-decoration: none; }
+</style>
+
+<style scoped>
+.app-header {
+  display: flex;
+  align-items: center;
+  gap: 2rem;
+  padding: 0.75rem 1.5rem;
+  background: #1e293b;
+  color: #f8fafc;
+}
+.app-title { font-weight: 700; font-size: 1rem; }
+.app-nav { display: flex; gap: 1.25rem; }
+.app-nav a { font-size: 0.875rem; opacity: 0.8; }
+.app-nav a.router-link-active { opacity: 1; text-decoration: underline; }
+</style>
@@ -9,6 +9,11 @@ const router = createRouter({
      name: 'home',
      component: HomeView,
    },
+    {
+      path: '/categorias',
+      name: 'categories',
+      component: () => import('../views/CategoriesView.vue'),
+    },
  ],
 })

@@ -0,0 +1,20 @@
+const BASE = '/api'
+
+async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    method,
+    headers: body ? { 'Content-Type': 'application/json' } : {},
+    body: body ? JSON.stringify(body) : undefined,
+  })
+  if (res.status === 204) return undefined as T
+  const data = await res.json()
+  if (!res.ok) throw new Error(data.error ?? 'Erro desconhecido')
+  return data as T
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>('GET', path),
+  post: <T>(path: string, body: unknown) => request<T>('POST', path, body),
+  put: <T>(path: string, body: unknown) => request<T>('PUT', path, body),
+  delete: (path: string) => request<void>('DELETE', path),
+}
@@ -0,0 +1,50 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { api } from '@/services/api'
+
+export interface Category {
+  id: number
+  name: string
+  color: string
+  is_default: boolean
+  created_at: string
+  updated_at: string
+}
+
+export const useCategoriesStore = defineStore('categories', () => {
+  const categories = ref<Category[]>([])
+  const loading = ref(false)
+  const error = ref<string | null>(null)
+
+  async function fetchAll() {
+    loading.value = true
+    error.value = null
+    try {
+      categories.value = await api.get<Category[]>('/categories')
+    } catch (e: any) {
+      error.value = e.message
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function create(name: string, color: string) {
+    const cat = await api.post<Category>('/categories', { name, color })
+    categories.value.push(cat)
+    return cat
+  }
+
+  async function update(id: number, name: string, color: string) {
+    const cat = await api.put<Category>(`/categories/${id}`, { name, color })
+    const idx = categories.value.findIndex((c) => c.id === id)
+    if (idx !== -1) categories.value[idx] = cat
+    return cat
+  }
+
+  async function remove(id: number) {
+    await api.delete(`/categories/${id}`)
+    categories.value = categories.value.filter((c) => c.id !== id)
+  }
+
+  return { categories, loading, error, fetchAll, create, update, remove }
+})
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useCategoriesStore } from '@/stores/categories'
+
+const store = useCategoriesStore()
+onMounted(() => store.fetchAll())
+
+const form = ref({ name: '', color: '#6B7280' })
+const editId = ref<number | null>(null)
+const formError = ref<string | null>(null)
+
+function startEdit(id: number, name: string, color: string) {
+  editId.value = id
+  form.value = { name, color }
+  formError.value = null
+}
+
+function cancelEdit() {
+  editId.value = null
+  form.value = { name: '', color: '#6B7280' }
+  formError.value = null
+}
+
+async function submit() {
+  formError.value = null
+  try {
+    if (editId.value !== null) {
+      await store.update(editId.value, form.value.name, form.value.color)
+      cancelEdit()
+    } else {
+      await store.create(form.value.name, form.value.color)
+      form.value = { name: '', color: '#6B7280' }
+    }
+  } catch (e: any) {
+    formError.value = e.message
+  }
+}
+
+async function remove(id: number, name: string) {
+  if (!confirm(`Excluir a categoria "${name}"?`)) return
+  try {
+    await store.remove(id)
+  } catch (e: any) {
+    alert(e.message)
+  }
+}
+</script>
+
+<template>
+  <div class="page">
+    <h1>Categorias</h1>
+
+    <form class="form-card" @submit.prevent="submit">
+      <h2>{{ editId !== null ? 'Editar categoria' : 'Nova categoria' }}</h2>
+      <div class="field-row">
+        <input
+          v-model="form.name"
+          placeholder="Nome da categoria"
+          required
+          class="input-name"
+        />
+        <div class="color-field">
+          <input type="color" v-model="form.color" class="input-color" />
+          <span class="color-hex">{{ form.color }}</span>
+        </div>
+      </div>
+      <p v-if="formError" class="form-error">{{ formError }}</p>
+      <div class="form-actions">
+        <button type="submit" class="btn btn-primary">
+          {{ editId !== null ? 'Salvar' : 'Criar' }}
+        </button>
+        <button v-if="editId !== null" type="button" class="btn btn-ghost" @click="cancelEdit">
+          Cancelar
+        </button>
+      </div>
+    </form>
+
+    <p v-if="store.loading">Carregando…</p>
+    <p v-else-if="store.error" class="form-error">{{ store.error }}</p>
+
+    <ul v-else class="category-list">
+      <li
+        v-for="cat in store.categories"
+        :key="cat.id"
+        class="category-item"
+        :class="{ editing: editId === cat.id }"
+      >
+        <span class="color-dot" :style="{ background: cat.color }" />
+        <span class="cat-name">{{ cat.name }}</span>
+        <span v-if="cat.is_default" class="badge">padrão</span>
+        <div class="cat-actions">
+          <button class="btn btn-sm" @click="startEdit(cat.id, cat.name, cat.color)">Editar</button>
+          <button
+            v-if="!cat.is_default"
+            class="btn btn-sm btn-danger"
+            @click="remove(cat.id, cat.name)"
+          >
+            Excluir
+          </button>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 1.5rem 1rem;
+  font-family: sans-serif;
+}
+h1 { margin-bottom: 1.25rem; font-size: 1.5rem; }
+h2 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; }
+
+.form-card {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1.5rem;
+}
+.field-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
+.input-name { flex: 1; min-width: 0; padding: 0.5rem 0.75rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: 0.95rem; }
+.color-field { display: flex; align-items: center; gap: 0.25rem; }
+.input-color { width: 2.5rem; height: 2.5rem; border: none; cursor: pointer; border-radius: 4px; padding: 0; }
+.color-hex { font-size: 0.8rem; color: #6b7280; width: 4rem; }
+.form-error { color: #dc2626; font-size: 0.875rem; margin: 0.5rem 0 0; }
+.form-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
+
+.btn {
+  padding: 0.4rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  background: #fff;
+}
+.btn-primary { background: #4f46e5; color: #fff; border-color: #4f46e5; }
+.btn-ghost { background: transparent; }
+.btn-danger { color: #dc2626; border-color: #fca5a5; }
+.btn-sm { padding: 0.25rem 0.6rem; }
+
+.category-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
+.category-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.65rem 0.75rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #fff;
+}
+.category-item.editing { border-color: #4f46e5; box-shadow: 0 0 0 2px #e0e7ff; }
+.color-dot { width: 1rem; height: 1rem; border-radius: 50%; flex-shrink: 0; }
+.cat-name { flex: 1; font-size: 0.95rem; }
+.badge { font-size: 0.7rem; background: #f3f4f6; color: #6b7280; padding: 0.15rem 0.4rem; border-radius: 4px; }
+.cat-actions { display: flex; gap: 0.4rem; }
+</style>