donut-gestprojet/frontend/src/pages/admin/AdminMembersPage.vue

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { RouterLink } from 'vue-router'
import { api, ApiError } from '@/api/client'
import type { Member, Paginated } from '@/types/api'
import AdminSubNav from '@/components/AdminSubNav.vue'
import LoadingState from '@/components/LoadingState.vue'
import ErrorState from '@/components/ErrorState.vue'
import Avatar from '@/components/Avatar.vue'
import { formatDate } from '@/utils/formatDate'

const members = ref<Member[]>([])
const loading = ref(true)
const error = ref<string | null>(null)
const searchQ = ref('')

async function load() {
  loading.value = true
  error.value = null
  try {
    const r = await api.get<Paginated<Member>>('/api/members', { query: { per_page: 100 } })
    members.value = r.data
  } catch (e) {
    error.value = e instanceof ApiError ? (e.payload.message ?? e.code) : 'Erreur réseau'
  } finally {
    loading.value = false
  }
}
onMounted(load)

const filtered = computed(() => {
  if (!searchQ.value.trim()) return members.value
  const q = searchQ.value.trim().toLowerCase()
  return members.value.filter(m =>
    m.display_name.toLowerCase().includes(q) ||
    (m.bio ?? '').toLowerCase().includes(q),
  )
})

async function destroy(m: Member) {
  if (!confirm(`Supprimer définitivement « ${m.display_name} » ?\nLe membre sera retiré de tous les projets.`)) return
  try {
    await api.delete(`/api/members/${encodeURIComponent(m.slug)}`)
    members.value = members.value.filter(x => x.id !== m.id)
  } catch (e) {
    if (e instanceof ApiError) alert(`Erreur : ${e.payload.message ?? e.code}`)
  }
}

const KIND_LABEL = {
  person: 'Personne',
  collective: 'Collectif',
  org: 'Organisation',
} as const
</script>

<template>
  <section class="px-10 py-8 max-w-7xl">
    <header class="mb-6">
      <h1 class="text-3xl font-semibold text-donut-text">Administration</h1>
      <p class="text-donut-muted mt-1">Annuaire des membres.</p>
    </header>
    <AdminSubNav />

    <div class="mt-6 flex items-center justify-between gap-2 flex-wrap">
      <input
        v-model="searchQ"
        type="search"
        placeholder="Rechercher un membre…"
        class="bg-donut-surface border border-donut-border rounded-lg px-3 py-2 text-sm outline-none focus:border-donut-text w-64"
      />
      <RouterLink
        :to="{ name: 'admin-member-new' }"
        class="flex items-center gap-1.5 bg-donut-text text-white rounded-lg px-3.5 py-2 text-sm font-medium hover:bg-black transition-colors"
      >
        <svg viewBox="0 0 24 24" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
          <path d="M12 5v14M5 12h14" />
        </svg>
        Nouveau membre
      </RouterLink>
    </div>

    <LoadingState v-if="loading" class="mt-8" />
    <ErrorState v-else-if="error" :message="error" :retry="load" class="mt-8" />

    <div v-else class="mt-4 rounded-xl border border-donut-border bg-donut-surface overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 border-b border-donut-border text-xs uppercase tracking-wider text-donut-muted">
          <tr>
            <th class="text-left px-4 py-3 font-medium">Nom</th>
            <th class="text-left px-4 py-3 font-medium">Type</th>
            <th class="text-left px-4 py-3 font-medium">Contact</th>
            <th class="text-left px-4 py-3 font-medium">Ajouté</th>
            <th class="text-right px-4 py-3 font-medium">Actions</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="filtered.length === 0">
            <td colspan="5" class="px-4 py-8 text-center text-donut-muted text-sm">
              Aucun membre.
            </td>
          </tr>
          <tr v-for="m in filtered" :key="m.id" class="border-t border-donut-border hover:bg-gray-50">
            <td class="px-4 py-3">
              <div class="flex items-center gap-2.5">
                <Avatar :name="m.display_name" :initials="m.initials" :avatar-url="m.avatar_url" :size="32" />
                <div>
                  <RouterLink
                    :to="{ name: 'admin-member-edit', params: { slug: m.slug } }"
                    class="font-medium text-donut-text hover:underline"
                  >{{ m.display_name }}</RouterLink>
                  <div v-if="m.bio" class="text-xs text-donut-muted truncate max-w-md">{{ m.bio }}</div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3 text-donut-muted">{{ KIND_LABEL[m.kind] }}</td>
            <td class="px-4 py-3 text-donut-muted text-xs">
              <a v-if="m.contact_email" :href="`mailto:${m.contact_email}`" class="hover:underline">{{ m.contact_email }}</a>
              <a v-if="m.website_url" :href="m.website_url" target="_blank" rel="noopener" class="hover:underline block">{{ m.website_url }}</a>
              <span v-if="!m.contact_email && !m.website_url" class="text-donut-muted">—</span>
            </td>
            <td class="px-4 py-3 text-donut-muted">{{ formatDate(m.created_at) }}</td>
            <td class="px-4 py-3 text-right">
              <div class="inline-flex items-center gap-3">
                <RouterLink
                  :to="{ name: 'admin-member-edit', params: { slug: m.slug } }"
                  class="text-donut-text hover:underline text-xs font-medium"
                >Éditer</RouterLink>
                <button
                  type="button"
                  class="text-red-500 hover:text-red-700 text-xs font-medium"
                  @click="destroy(m)"
                >Supprimer</button>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="mt-4 text-xs text-donut-muted">{{ filtered.length }} membre{{ filtered.length > 1 ? 's' : '' }}.</p>
  </section>
</template>