feat(aep): carte AEP — push Gitea 2026-04-28
This commit is contained in:
Jules Neny
215
pages/ajouter.vue
Normal file
215
pages/ajouter.vue
Normal file
@@ -0,0 +1,215 @@
|
||||
<template>
|
||||
<div class="max-w-2xl mx-auto px-4 py-8">
|
||||
<NuxtLink to="/" class="text-sm text-sage-600 hover:text-sage-800 inline-flex items-center gap-1 mb-6">
|
||||
← Retour à la liste
|
||||
</NuxtLink>
|
||||
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-2">Proposer une fiche</h1>
|
||||
<p class="text-gray-500 text-sm mb-8">
|
||||
Tu connais une institution, association ou collectif qui mérite d'être référencé ? Propose-le ici. La fiche sera visible après validation par l'équipe.
|
||||
</p>
|
||||
|
||||
<div v-if="success" class="bg-sage-100 border border-sage-300 text-sage-800 rounded-xl px-6 py-5 text-center">
|
||||
<p class="font-semibold text-lg mb-1">Merci !</p>
|
||||
<p class="text-sm">Ta fiche sera visible après modération. On l'examine généralement sous 48h.</p>
|
||||
<button @click="reset" class="mt-4 text-sage-600 underline text-sm hover:text-sage-800">
|
||||
Proposer une autre fiche
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<form v-else @submit.prevent="submit" class="space-y-5">
|
||||
<!-- Nom -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'organisation *</label>
|
||||
<input
|
||||
v-model="form.nom"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Ex : UNSFA, Maison de l'Architecture..."
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Type -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Type d'organisation *</label>
|
||||
<select
|
||||
v-model="form.type_org"
|
||||
required
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm text-gray-700"
|
||||
>
|
||||
<option value="" disabled>Choisir un type...</option>
|
||||
<option value="association">Association</option>
|
||||
<option value="syndicat">Syndicat</option>
|
||||
<option value="institution">Institution</option>
|
||||
<option value="reseau">Réseau</option>
|
||||
<option value="collectif">Collectif</option>
|
||||
<option value="ecole">École</option>
|
||||
<option value="media">Média</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Description *
|
||||
<span class="font-normal text-gray-400">(environ 200 caractères)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.description"
|
||||
required
|
||||
rows="4"
|
||||
placeholder="Présente l'organisation en quelques mots : ses missions, son public cible, ce qu'elle apporte à la communauté..."
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm resize-none"
|
||||
/>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ form.description.length }} caractères</p>
|
||||
</div>
|
||||
|
||||
<!-- Lien -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Site web <span class="font-normal text-gray-400">(facultatif)</span></label>
|
||||
<input
|
||||
v-model="form.lien"
|
||||
type="url"
|
||||
placeholder="https://..."
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Tags -->
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Tags <span class="font-normal text-gray-400">(séparés par des virgules)</span>
|
||||
</label>
|
||||
<input
|
||||
v-model="form.tags"
|
||||
type="text"
|
||||
placeholder="Ex : formation, concours, droit, Paris..."
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Séparateur -->
|
||||
<div class="border-t border-warm-200 pt-5">
|
||||
<p class="text-sm font-medium text-gray-700 mb-4">Ton expérience avec cette organisation</p>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">Ton prénom *</label>
|
||||
<input
|
||||
v-model="form.auteur"
|
||||
type="text"
|
||||
required
|
||||
placeholder="Marie"
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-1">
|
||||
Ton avis / expérience *
|
||||
<span class="font-normal text-gray-400">(environ 500 caractères)</span>
|
||||
</label>
|
||||
<textarea
|
||||
v-model="form.avis"
|
||||
required
|
||||
rows="5"
|
||||
placeholder="Pourquoi tu recommandes cet endroit ? Qu'est-ce que ça t'a apporté ?"
|
||||
class="w-full px-3 py-2.5 rounded-lg border border-warm-300 focus:outline-none focus:ring-2 focus:ring-sage-400 bg-white text-sm resize-none"
|
||||
/>
|
||||
<p class="text-xs text-gray-400 mt-1">{{ form.avis.length }} caractères</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Erreur -->
|
||||
<div v-if="error" class="text-red-600 text-sm bg-red-50 border border-red-200 rounded-lg px-4 py-3">
|
||||
Une erreur s'est produite. Réessaie dans quelques instants.
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:disabled="submitting"
|
||||
class="w-full bg-sage-600 hover:bg-sage-700 disabled:opacity-50 text-white font-semibold py-3 rounded-xl transition-colors text-sm"
|
||||
>
|
||||
{{ submitting ? 'Envoi en cours...' : 'Proposer cette fiche' }}
|
||||
</button>
|
||||
|
||||
<p class="text-xs text-gray-400 text-center">
|
||||
Ta fiche sera examinée par l'équipe avant publication.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const form = reactive({
|
||||
nom: '',
|
||||
type_org: '',
|
||||
description: '',
|
||||
lien: '',
|
||||
tags: '',
|
||||
auteur: '',
|
||||
avis: '',
|
||||
})
|
||||
|
||||
const submitting = ref(false)
|
||||
const success = ref(false)
|
||||
const error = ref(false)
|
||||
|
||||
async function submit() {
|
||||
submitting.value = true
|
||||
error.value = false
|
||||
|
||||
try {
|
||||
// 1. POST organisation avec status=pending
|
||||
const orgResult: any = await $fetch('/api/organisations', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
nom: form.nom,
|
||||
type_org: form.type_org,
|
||||
description: form.description,
|
||||
lien: form.lien || null,
|
||||
tags: form.tags || null,
|
||||
status: 'pending',
|
||||
},
|
||||
})
|
||||
|
||||
// 2. POST avis lié à l'organisation
|
||||
const newOrgId = orgResult?.Id ?? orgResult?.id
|
||||
if (newOrgId && form.avis.trim()) {
|
||||
await $fetch('/api/avis', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
organisation_id: newOrgId,
|
||||
auteur: form.auteur,
|
||||
texte: form.avis,
|
||||
status: 'pending',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
success.value = true
|
||||
} catch (e) {
|
||||
error.value = true
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function reset() {
|
||||
Object.assign(form, {
|
||||
nom: '',
|
||||
type_org: '',
|
||||
description: '',
|
||||
lien: '',
|
||||
tags: '',
|
||||
auteur: '',
|
||||
avis: '',
|
||||
})
|
||||
success.value = false
|
||||
error.value = false
|
||||
}
|
||||
|
||||
useHead({ title: 'Proposer une fiche — AEP' })
|
||||
</script>
|
||||
Reference in New Issue
Block a user