avant codex

frontend/src/views/OutilsView.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="p-4 max-w-4xl mx-auto">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold text-yellow">🔧 Outils</h1>
+      <button @click="showForm = true" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">+ Ajouter</button>
+    </div>
+
+    <div v-if="toolsStore.loading" class="text-text-muted text-sm">Chargement...</div>
+    <div v-else-if="!toolsStore.tools.length" class="text-text-muted text-sm py-4">Aucun outil enregistré.</div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+      <div v-for="t in toolsStore.tools" :key="t.id"
+        class="bg-bg-soft rounded-lg p-4 border border-bg-hard flex flex-col gap-2">
+        <div class="flex items-center justify-between">
+          <span class="text-text font-semibold">{{ t.nom }}</span>
+          <div class="flex gap-2">
+            <button @click="startEdit(t)" class="text-yellow text-xs hover:underline">Édit.</button>
+            <button @click="removeTool(t.id!)" class="text-red text-xs hover:underline">Suppr.</button>
+          </div>
+        </div>
+        <span v-if="t.categorie" class="text-xs text-yellow bg-yellow/10 rounded-full px-2 py-0.5 w-fit">{{ t.categorie }}</span>
+        <p v-if="t.description" class="text-text-muted text-xs">{{ t.description }}</p>
+      </div>
+    </div>
+
+    <div v-if="showForm" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center p-4" @click.self="closeForm">
+      <div class="bg-bg-hard rounded-xl p-6 w-full max-w-sm border border-bg-soft">
+        <h2 class="text-text font-bold text-lg mb-4">{{ editId ? 'Modifier l\'outil' : 'Nouvel outil' }}</h2>
+        <form @submit.prevent="submitTool" class="flex flex-col gap-3">
+          <input v-model="form.nom" placeholder="Nom de l'outil *" required
+            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow" />
+          <select v-model="form.categorie"
+            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow">
+            <option value="">Catégorie</option>
+            <option value="beche">Bêche</option>
+            <option value="fourche">Fourche</option>
+            <option value="griffe">Griffe/Grelinette</option>
+            <option value="arrosage">Arrosage</option>
+            <option value="taille">Taille</option>
+            <option value="autre">Autre</option>
+          </select>
+          <textarea v-model="form.description" placeholder="Description..."
+            class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-yellow resize-none h-16" />
+          <div class="flex gap-2 justify-end">
+            <button type="button" @click="closeForm" class="px-4 py-2 text-text-muted hover:text-text text-sm">Annuler</button>
+            <button type="submit" class="bg-yellow text-bg px-4 py-2 rounded-lg text-sm font-semibold hover:opacity-90">
+              {{ editId ? 'Enregistrer' : 'Créer' }}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { useToolsStore } from '@/stores/tools'
+import type { Tool } from '@/api/tools'
+
+const toolsStore = useToolsStore()
+const showForm = ref(false)
+const editId = ref<number | null>(null)
+const form = reactive({ nom: '', categorie: '', description: '' })
+
+function startEdit(t: Tool) {
+  editId.value = t.id!
+  Object.assign(form, { nom: t.nom, categorie: t.categorie || '', description: t.description || '' })
+  showForm.value = true
+}
+
+function closeForm() { showForm.value = false; editId.value = null }
+
+async function submitTool() {
+  if (editId.value) {
+    await toolsStore.update(editId.value, { ...form })
+  } else {
+    await toolsStore.create({ ...form })
+  }
+  Object.assign(form, { nom: '', categorie: '', description: '' })
+  closeForm()
+}
+
+async function removeTool(id: number) {
+  if (confirm('Supprimer cet outil ?')) await toolsStore.remove(id)
+}
+
+onMounted(() => toolsStore.fetchAll())
+</script>