maj via codex
This commit is contained in:
@@ -78,62 +78,107 @@
|
||||
|
||||
<!-- Modal formulaire création / édition -->
|
||||
<div v-if="showForm || editPlant" 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-md border border-bg-soft max-h-[90vh] overflow-y-auto">
|
||||
<div class="bg-bg-hard rounded-xl p-6 w-full max-w-4xl border border-bg-soft max-h-[90vh] overflow-y-auto">
|
||||
<h2 class="text-text font-bold text-lg mb-4">{{ editPlant ? 'Modifier la plante' : 'Nouvelle plante' }}</h2>
|
||||
<form @submit.prevent="submitPlant" class="flex flex-col gap-3">
|
||||
<input v-model="form.nom_commun" placeholder="Nom commun *" required
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<input v-model="form.nom_botanique" placeholder="Nom botanique"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<input v-model="form.variete" placeholder="Variété"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<input v-model="form.famille" placeholder="Famille botanique"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<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-green">
|
||||
<option value="">Catégorie</option>
|
||||
<option value="potager">Potager</option>
|
||||
<option value="fleur">Fleur</option>
|
||||
<option value="arbre">Arbre</option>
|
||||
<option value="arbuste">Arbuste</option>
|
||||
<option value="adventice">Adventice (mauvaise herbe)</option>
|
||||
</select>
|
||||
<select v-model="form.type_plante"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Type</option>
|
||||
<option value="legume">Légume</option>
|
||||
<option value="fruit">Fruit</option>
|
||||
<option value="aromatique">Aromatique</option>
|
||||
<option value="fleur">Fleur</option>
|
||||
<option value="adventice">Adventice</option>
|
||||
</select>
|
||||
<select v-model="form.besoin_eau"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Besoin en eau</option>
|
||||
<option value="faible">Faible</option>
|
||||
<option value="moyen">Moyen</option>
|
||||
<option value="élevé">Élevé</option>
|
||||
</select>
|
||||
<select v-model="form.besoin_soleil"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Ensoleillement</option>
|
||||
<option value="ombre">Ombre</option>
|
||||
<option value="mi-ombre">Mi-ombre</option>
|
||||
<option value="plein soleil">Plein soleil</option>
|
||||
</select>
|
||||
<div class="flex gap-2">
|
||||
<form @submit.prevent="submitPlant" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Nom commun *</label>
|
||||
<input v-model="form.nom_commun" placeholder="Ex: Tomate" required
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Nom utilisé au jardin pour identifier rapidement la plante.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Nom botanique</label>
|
||||
<input v-model="form.nom_botanique" placeholder="Ex: Solanum lycopersicum"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Nom scientifique utile pour éviter les ambiguïtés.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Variété</label>
|
||||
<input v-model="form.variete" placeholder="Ex: Andine Cornue"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Cultivar précis (optionnel).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Famille botanique</label>
|
||||
<input v-model="form.famille" placeholder="Ex: Solanacées"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Permet d'organiser la rotation des cultures.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Catégorie</label>
|
||||
<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-green">
|
||||
<option value="">Catégorie</option>
|
||||
<option value="potager">Potager</option>
|
||||
<option value="fleur">Fleur</option>
|
||||
<option value="arbre">Arbre</option>
|
||||
<option value="arbuste">Arbuste</option>
|
||||
<option value="adventice">Adventice (mauvaise herbe)</option>
|
||||
</select>
|
||||
<p class="text-text-muted text-[11px] mt-1">Classe principale pour filtrer la bibliothèque de plantes.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Type de plante</label>
|
||||
<select v-model="form.type_plante"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Type</option>
|
||||
<option value="legume">Légume</option>
|
||||
<option value="fruit">Fruit</option>
|
||||
<option value="aromatique">Aromatique</option>
|
||||
<option value="fleur">Fleur</option>
|
||||
<option value="adventice">Adventice</option>
|
||||
</select>
|
||||
<p class="text-text-muted text-[11px] mt-1">Type d'usage de la plante (récolte, ornement, etc.).</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Besoin en eau</label>
|
||||
<select v-model="form.besoin_eau"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Besoin en eau</option>
|
||||
<option value="faible">Faible</option>
|
||||
<option value="moyen">Moyen</option>
|
||||
<option value="élevé">Élevé</option>
|
||||
</select>
|
||||
<p class="text-text-muted text-[11px] mt-1">Aide à planifier l'arrosage.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Ensoleillement</label>
|
||||
<select v-model="form.besoin_soleil"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green">
|
||||
<option value="">Ensoleillement</option>
|
||||
<option value="ombre">Ombre</option>
|
||||
<option value="mi-ombre">Mi-ombre</option>
|
||||
<option value="plein soleil">Plein soleil</option>
|
||||
</select>
|
||||
<p class="text-text-muted text-[11px] mt-1">Exposition lumineuse idéale.</p>
|
||||
</div>
|
||||
<div class="lg:col-span-2 flex gap-2">
|
||||
<input v-model.number="form.espacement_cm" type="number" placeholder="Espacement (cm)"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
|
||||
<input v-model.number="form.temp_min_c" type="number" placeholder="T° min (°C)"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm flex-1 outline-none focus:border-green" />
|
||||
</div>
|
||||
<input v-model="form.plantation_mois" placeholder="Mois plantation (ex: 3,4,5)"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<input v-model="form.recolte_mois" placeholder="Mois récolte (ex: 7,8,9)"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<textarea v-model="form.notes" placeholder="Notes..."
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-20" />
|
||||
<div class="flex gap-2 justify-end">
|
||||
<p class="lg:col-span-2 text-text-muted text-[11px] -mt-2">Espacement recommandé en cm et température minimale supportée (en °C).</p>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Mois de plantation</label>
|
||||
<input v-model="form.plantation_mois" placeholder="Ex: 3,4,5"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Liste des mois conseillés, séparés par des virgules.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-text-muted text-xs block mb-1">Mois de récolte</label>
|
||||
<input v-model="form.recolte_mois" placeholder="Ex: 7,8,9"
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Période habituelle de récolte.</p>
|
||||
</div>
|
||||
<div class="lg:col-span-2">
|
||||
<label class="text-text-muted text-xs block mb-1">Notes</label>
|
||||
<textarea v-model="form.notes" placeholder="Observations, maladies, astuces..."
|
||||
class="bg-bg border border-bg-soft rounded-lg px-3 py-2 text-text text-sm w-full outline-none focus:border-green resize-none h-20" />
|
||||
<p class="text-text-muted text-[11px] mt-1">Commentaires libres visibles dans le détail de la plante.</p>
|
||||
</div>
|
||||
<div class="lg:col-span-2 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"
|
||||
|
||||
Reference in New Issue
Block a user