nav-carte/pages/ajouter.vue

<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>