234 lines
8.1 KiB
Markdown
234 lines
8.1 KiB
Markdown
# Plant Associations Implementation Plan
|
|
|
|
> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
|
|
|
|
**Goal:** Ajouter des associations favorables/défavorables (plantes amies/ennemies) à chaque plante, éditables depuis la popup d'édition.
|
|
|
|
**Architecture:** Deux colonnes JSON (`associations_favorables`, `associations_defavorables`) dans le modèle `Plant` (List[str] de noms communs). Migration via migrate.py. UI tag-based avec autocomplete et validation croisée dans PlantesView.vue.
|
|
|
|
**Tech Stack:** FastAPI + SQLModel + SQLAlchemy JSON column (backend) · Vue 3 + TypeScript (frontend)
|
|
|
|
---
|
|
|
|
### Task 1: Backend — modèle Plant
|
|
|
|
**Files:**
|
|
- Modify: `backend/app/models/plant.py`
|
|
|
|
**Step 1: Ajouter les imports nécessaires**
|
|
|
|
```python
|
|
from typing import List, Optional
|
|
from sqlalchemy import Column
|
|
from sqlalchemy import JSON as SA_JSON
|
|
```
|
|
|
|
**Step 2: Ajouter les 2 champs dans la classe `Plant`**
|
|
|
|
Après le champ `notes`, avant `created_at` :
|
|
|
|
```python
|
|
associations_favorables: Optional[List[str]] = Field(
|
|
default=None,
|
|
sa_column=Column("associations_favorables", SA_JSON, nullable=True),
|
|
)
|
|
associations_defavorables: Optional[List[str]] = Field(
|
|
default=None,
|
|
sa_column=Column("associations_defavorables", SA_JSON, nullable=True),
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
### Task 2: Backend — migration
|
|
|
|
**Files:**
|
|
- Modify: `backend/app/migrate.py`
|
|
|
|
**Step 1: Ajouter les 2 colonnes dans `EXPECTED_COLUMNS["plant"]`**
|
|
|
|
```python
|
|
"plant": [
|
|
("categorie", "TEXT", None),
|
|
("hauteur_cm", "INTEGER", None),
|
|
("maladies_courantes", "TEXT", None),
|
|
("astuces_culture", "TEXT", None),
|
|
("url_reference", "TEXT", None),
|
|
("associations_favorables", "TEXT", None), # JSON list[str]
|
|
("associations_defavorables", "TEXT", None), # JSON list[str]
|
|
],
|
|
```
|
|
|
|
---
|
|
|
|
### Task 3: Frontend — interface TypeScript
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/api/plants.ts`
|
|
|
|
**Step 1: Ajouter les 2 champs à l'interface `Plant`**
|
|
|
|
```typescript
|
|
associations_favorables?: string[]
|
|
associations_defavorables?: string[]
|
|
```
|
|
|
|
---
|
|
|
|
### Task 4: Frontend — PlantesView.vue (formulaire + détail)
|
|
|
|
**Files:**
|
|
- Modify: `frontend/src/views/PlantesView.vue`
|
|
|
|
**Step 1: Étendre `form` reactive**
|
|
|
|
Dans `const form = reactive({...})` ajouter :
|
|
```typescript
|
|
associations_favorables: [] as string[],
|
|
associations_defavorables: [] as string[],
|
|
```
|
|
|
|
**Step 2: Ajouter ref pour l'autocomplete**
|
|
|
|
```typescript
|
|
const assocInput = reactive({ fav: '', def: '' })
|
|
```
|
|
|
|
**Step 3: Computed — noms de plantes disponibles pour l'autocomplete**
|
|
|
|
```typescript
|
|
const allPlantNames = computed(() =>
|
|
plantsStore.plants
|
|
.map(p => p.nom_commun)
|
|
.filter(n => n && n !== form.nom_commun)
|
|
.sort()
|
|
)
|
|
|
|
function filteredAssocSuggestions(type: 'fav' | 'def') {
|
|
const query = assocInput[type].toLowerCase()
|
|
const excluded = type === 'fav'
|
|
? new Set([...form.associations_favorables, ...form.associations_defavorables])
|
|
: new Set([...form.associations_defavorables, ...form.associations_favorables])
|
|
return allPlantNames.value
|
|
.filter(n => !excluded.has(n) && n.toLowerCase().includes(query))
|
|
.slice(0, 8)
|
|
}
|
|
|
|
function addAssoc(type: 'fav' | 'def', name: string) {
|
|
const list = type === 'fav' ? form.associations_favorables : form.associations_defavorables
|
|
const other = type === 'fav' ? form.associations_defavorables : form.associations_favorables
|
|
if (!name.trim() || list.includes(name) || other.includes(name)) return
|
|
list.push(name)
|
|
assocInput[type] = ''
|
|
}
|
|
|
|
function removeAssoc(type: 'fav' | 'def', name: string) {
|
|
const list = type === 'fav' ? form.associations_favorables : form.associations_defavorables
|
|
const idx = list.indexOf(name)
|
|
if (idx !== -1) list.splice(idx, 1)
|
|
}
|
|
```
|
|
|
|
**Step 4: `startEdit` — peupler les nouvelles listes**
|
|
|
|
```typescript
|
|
associations_favorables: [...(p.associations_favorables ?? [])],
|
|
associations_defavorables: [...(p.associations_defavorables ?? [])],
|
|
```
|
|
|
|
**Step 5: `submitPlant` — inclure les listes dans le payload**
|
|
|
|
Le spread `{ ...form }` les inclut automatiquement — rien à changer.
|
|
|
|
**Step 6: Ajouter le bloc UI dans le formulaire (pleine largeur, après les 2 colonnes existantes)**
|
|
|
|
```html
|
|
<!-- Associations — pleine largeur -->
|
|
<div class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- Favorables -->
|
|
<div>
|
|
<label class="text-[10px] font-black text-green uppercase tracking-widest block mb-2">
|
|
🤝 Associations favorables
|
|
</label>
|
|
<div class="flex flex-wrap gap-1.5 mb-2 min-h-[28px]">
|
|
<span v-for="n in form.associations_favorables" :key="n"
|
|
class="flex items-center gap-1 bg-green/10 border border-green/40 text-green text-[11px] px-2 py-0.5 rounded-full">
|
|
{{ n }}
|
|
<button type="button" @click="removeAssoc('fav', n)" class="hover:text-red leading-none">✕</button>
|
|
</span>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="assocInput.fav"
|
|
placeholder="Nom commun d'une plante..."
|
|
class="w-full bg-bg border border-bg-soft rounded-xl px-3 py-2 text-text text-sm focus:border-green outline-none"
|
|
@keydown.enter.prevent="addAssoc('fav', assocInput.fav)" />
|
|
<ul v-if="assocInput.fav && filteredAssocSuggestions('fav').length"
|
|
class="absolute z-10 mt-1 w-full bg-bg-hard border border-bg-soft rounded-xl shadow-lg overflow-hidden max-h-40 overflow-y-auto">
|
|
<li v-for="s in filteredAssocSuggestions('fav')" :key="s"
|
|
@click="addAssoc('fav', s)"
|
|
class="px-3 py-2 text-sm text-text hover:bg-green/10 hover:text-green cursor-pointer">
|
|
{{ s }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Défavorables -->
|
|
<div>
|
|
<label class="text-[10px] font-black text-red uppercase tracking-widest block mb-2">
|
|
⚡ Associations défavorables
|
|
</label>
|
|
<div class="flex flex-wrap gap-1.5 mb-2 min-h-[28px]">
|
|
<span v-for="n in form.associations_defavorables" :key="n"
|
|
class="flex items-center gap-1 bg-red/10 border border-red/40 text-red text-[11px] px-2 py-0.5 rounded-full">
|
|
{{ n }}
|
|
<button type="button" @click="removeAssoc('def', n)" class="hover:text-red leading-none">✕</button>
|
|
</span>
|
|
</div>
|
|
<div class="relative">
|
|
<input v-model="assocInput.def"
|
|
placeholder="Nom commun d'une plante..."
|
|
class="w-full bg-bg border border-bg-soft rounded-xl px-3 py-2 text-text text-sm focus:border-red outline-none"
|
|
@keydown.enter.prevent="addAssoc('def', assocInput.def)" />
|
|
<ul v-if="assocInput.def && filteredAssocSuggestions('def').length"
|
|
class="absolute z-10 mt-1 w-full bg-bg-hard border border-bg-soft rounded-xl shadow-lg overflow-hidden max-h-40 overflow-y-auto">
|
|
<li v-for="s in filteredAssocSuggestions('def')" :key="s"
|
|
@click="addAssoc('def', s)"
|
|
class="px-3 py-2 text-sm text-text hover:bg-red/10 hover:text-red cursor-pointer">
|
|
{{ s }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
**Step 7: Ajouter le bloc lecture dans la modale détail (après la section Notes)**
|
|
|
|
```html
|
|
<!-- Associations -->
|
|
<div v-if="detailPlant.associations_favorables?.length || detailPlant.associations_defavorables?.length" class="space-y-3">
|
|
<h3 class="text-[10px] font-black text-text-muted uppercase tracking-widest">Associations</h3>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div v-if="detailPlant.associations_favorables?.length">
|
|
<div class="text-[10px] font-black text-green uppercase mb-1.5">🤝 Favorables</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<span v-for="n in detailPlant.associations_favorables" :key="n"
|
|
class="bg-green/10 border border-green/40 text-green text-[11px] px-2 py-0.5 rounded-full">
|
|
{{ n }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div v-if="detailPlant.associations_defavorables?.length">
|
|
<div class="text-[10px] font-black text-red uppercase mb-1.5">⚡ À éviter</div>
|
|
<div class="flex flex-wrap gap-1.5">
|
|
<span v-for="n in detailPlant.associations_defavorables" :key="n"
|
|
class="bg-red/10 border border-red/40 text-red text-[11px] px-2 py-0.5 rounded-full">
|
|
{{ n }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|