Pandore/FanKarr
1
0 Fork 0
Code Activity

feat(auth): migration multi-utilisateurs, rôles admin/user et token API par compte

Browse Source 
feat(users): gestion des comptes et système d'invitations avec page d'administration

feat(requests): demandes de séries avec fusion des saisons, vue admin et widget dashboard

feat(jellyfin): synchronisation des comptes, SSO token exchange et API publique v1
This commit is contained in:
MasutaYunikon committed 2026-05-22 20:12:05 +02:00
1 parent dfb515b0f8
commit dabd1d429e
25 files changed
+2865 -225
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/RequestsView.vue
+259
View File
@@ -0,0 +1,259 @@
<template>
<div class="px-4 md:px-8 py-8 max-w-4xl">
<div class="flex items-center justify-between mb-6">
<div>
<h1 class="text-lg font-semibold text-primary">Demandes</h1>
<p class="text-sm text-muted mt-0.5">
{{ auth.isAdmin ? 'Toutes les demandes des utilisateurs.' : 'Vos demandes de séries.' }}
</p>
</div>
<!-- Filtres statuts -->
<div class="flex items-center gap-1">
<button
v-for="f in filters" :key="f.value"
@click="activeFilter = f.value"
class="px-3 py-1.5 rounded-lg text-xs transition"
:class="activeFilter === f.value
? 'bg-accent text-white'
: 'text-muted hover:text-primary hover:bg-hover'"
>
{{ f.label }}
<span v-if="counts[f.value]" class="ml-1 opacity-70">({{ counts[f.value] }})</span>
</button>
</div>
</div>
<!-- Statistiques (admin) -->
<div v-if="auth.isAdmin" class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
<div class="settings-card flex flex-col gap-1">
<span class="text-xs text-muted">En attente</span>
<span class="text-2xl font-semibold text-yellow-400">{{ counts.pending }}</span>
</div>
<div class="settings-card flex flex-col gap-1">
<span class="text-xs text-muted">Approuvées</span>
<span class="text-2xl font-semibold text-blue-400">{{ counts.approved }}</span>
</div>
<div class="settings-card flex flex-col gap-1">
<span class="text-xs text-muted">Disponibles</span>
<span class="text-2xl font-semibold text-green-400">{{ counts.completed }}</span>
</div>
<div class="settings-card flex flex-col gap-1">
<span class="text-xs text-muted">Refusées</span>
<span class="text-2xl font-semibold" :class="counts.rejected > 0 ? 'text-red-400' : 'text-muted'">{{ counts.rejected }}</span>
</div>
</div>
<!-- Liste -->
<div v-if="loading" class="flex items-center gap-2 text-muted text-sm py-8">
<div class="w-4 h-4 border border-border border-t-accent rounded-full animate-spin" />
Chargement…
</div>
<div v-else-if="filtered.length === 0" class="settings-card text-sm text-muted py-8 text-center">
Aucune demande {{ activeFilter !== 'all' ? `avec ce statut` : '' }}.
</div>
<div v-else class="flex flex-col gap-3">
<div
v-for="req in filtered" :key="req.id"
class="settings-card flex flex-col gap-3"
>
<div class="flex items-start justify-between gap-4 flex-wrap">
<!-- Infos série -->
<div class="flex-1 min-w-0">
<div class="flex items-center gap-2 flex-wrap">
<RouterLink :to="`/series/${req.serieId}`" class="text-sm font-semibold text-primary hover:text-accent transition truncate">
{{ req.serieName }}
</RouterLink>
<span class="text-xs px-2 py-0.5 rounded border shrink-0" :class="statusClass(req.status)">
{{ statusLabel(req.status) }}
</span>
</div>
<!-- Saisons fusionnées -->
<p class="text-xs text-muted mt-1">
<template v-if="mergedSeasons(req).length === 0">Toutes les saisons</template>
<template v-else>
Saisons : {{ mergedSeasons(req).map(s => s === 0 ? 'SP' : `S${s}`).join(', ') }}
</template>
</p>
<!-- Message de refus -->
<p v-if="req.rejectionMessage" class="text-xs text-red-400 mt-1">
Refus : {{ req.rejectionMessage }}
</p>
</div>
<!-- Actions admin -->
<div v-if="auth.isAdmin" class="flex items-center gap-1 shrink-0">
<button
v-if="req.status === 'pending' || req.status === 'rejected'"
@click="approve(req)"
class="btn-ghost text-xs text-blue-400 hover:text-blue-300"
>Approuver</button>
<button
v-if="req.status === 'approved'"
@click="complete(req)"
class="btn-ghost text-xs text-green-400 hover:text-green-300"
>Marquer disponible</button>
<button
v-if="req.status !== 'rejected'"
@click="openRejectModal(req)"
class="btn-ghost text-xs text-red-400 hover:text-red-300"
>Refuser</button>
<button @click="remove(req)" class="btn-ghost text-xs text-muted hover:text-red-400">Supprimer</button>
</div>
</div>
<!-- Requesters (admin) -->
<div v-if="auth.isAdmin && req.requesters.length > 0" class="flex flex-wrap gap-2">
<div v-for="r in req.requesters" :key="r.userId"
class="flex items-center gap-1.5 px-2 py-1 rounded-lg bg-shell border border-border text-xs">
<span class="w-4 h-4 rounded-full bg-border flex items-center justify-center text-[9px] font-semibold text-muted shrink-0">
{{ r.username[0].toUpperCase() }}
</span>
<span class="text-muted">{{ r.username }}</span>
<span v-if="r.seasons.length > 0" class="text-muted/60">
({{ r.seasons.map((s: number) => s === 0 ? 'SP' : `S${s}`).join(', ') }})
</span>
</div>
</div>
<p class="text-[11px] text-muted">Demandé {{ formatRelative(req.createdAt) }}</p>
</div>
</div>
<!-- Modal refus -->
<Teleport to="body">
<div v-if="rejectModal" class="fixed inset-0 bg-black/60 z-50 flex items-center justify-center px-4" @click.self="rejectModal = null">
<div class="settings-card w-full max-w-sm flex flex-col gap-4 p-6">
<p class="text-sm font-semibold text-primary">Refuser la demande</p>
<p class="text-xs text-muted truncate">{{ rejectModal.serieName }}</p>
<div>
<label class="settings-label mb-1.5">Message de refus (optionnel)</label>
<input v-model="rejectMessage" type="text" class="settings-input" placeholder="Raison du refus…" @keyup.enter="confirmReject" />
</div>
<div class="flex gap-2 justify-end">
<button @click="rejectModal = null" class="btn-ghost">Annuler</button>
<button @click="confirmReject" class="px-4 py-2 rounded-lg border border-red-500/30 text-red-400 bg-red-500/10 hover:bg-red-500/20 transition text-xs">
Refuser
</button>
</div>
</div>
</div>
</Teleport>
</div>
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
interface Requester { userId: string; username: string; seasons: number[]; requestedAt: string }
interface SerieRequest {
id: string; serieId: number; serieName: string
requesters: Requester[]; status: string
rejectionMessage?: string; createdAt: string; updatedAt: string
}
const auth = useAuthStore()
const loading = ref(true)
const requests = ref<SerieRequest[]>([])
const activeFilter = ref<string>('all')
const filters = [
{ value: 'all', label: 'Toutes' },
{ value: 'pending', label: 'En attente' },
{ value: 'approved', label: 'Approuvées' },
{ value: 'completed', label: 'Disponibles' },
{ value: 'rejected', label: 'Refusées' },
]
const counts = computed(() => ({
all : requests.value.length,
pending : requests.value.filter(r => r.status === 'pending').length,
approved : requests.value.filter(r => r.status === 'approved').length,
completed: requests.value.filter(r => r.status === 'completed').length,
rejected : requests.value.filter(r => r.status === 'rejected').length,
}))
const filtered = computed(() =>
activeFilter.value === 'all'
? requests.value
: requests.value.filter(r => r.status === activeFilter.value)
)
async function load() {
loading.value = true
const res = await fetch('/api/requests', { credentials: 'include' })
if (res.ok) requests.value = await res.json()
loading.value = false
}
onMounted(load)
// ── Actions admin ─────────────────────────────────────────────
async function approve(req: SerieRequest) {
const res = await fetch(`/api/requests/${req.id}`, {
method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify({ action: 'approve' }),
})
if (res.ok) load()
}
async function complete(req: SerieRequest) {
const res = await fetch(`/api/requests/${req.id}`, {
method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify({ action: 'complete' }),
})
if (res.ok) load()
}
async function remove(req: SerieRequest) {
if (!confirm(`Supprimer la demande pour "${req.serieName}" ?`)) return
await fetch(`/api/requests/${req.id}`, { method: 'DELETE', credentials: 'include' })
load()
}
const rejectModal = ref<SerieRequest | null>(null)
const rejectMessage = ref('')
function openRejectModal(req: SerieRequest) { rejectModal.value = req; rejectMessage.value = '' }
async function confirmReject() {
if (!rejectModal.value) return
await fetch(`/api/requests/${rejectModal.value.id}`, {
method: 'PATCH', headers: { 'Content-Type': 'application/json' }, credentials: 'include',
body: JSON.stringify({ action: 'reject', rejectionMessage: rejectMessage.value || undefined }),
})
rejectModal.value = null
load()
}
// ── Helpers ───────────────────────────────────────────────────
function mergedSeasons(req: SerieRequest): number[] {
if (req.requesters.some(r => r.seasons.length === 0)) return []
const all = new Set<number>()
req.requesters.forEach(r => r.seasons.forEach(s => all.add(s)))
return [...all].sort((a, b) => a - b)
}
function statusLabel(s: string) {
return { pending: 'En attente', approved: 'Approuvée', rejected: 'Refusée', completed: 'Disponible' }[s] ?? s
}
function statusClass(s: string) {
return {
pending : 'bg-yellow-500/10 text-yellow-400 border-yellow-500/20',
approved : 'bg-blue-500/10 text-blue-400 border-blue-500/20',
rejected : 'bg-red-500/10 text-red-400 border-red-500/20',
completed: 'bg-green-500/10 text-green-400 border-green-500/20',
}[s] ?? ''
}
function formatRelative(iso: string): string {
const diff = Date.now() - new Date(iso).getTime()
const m = Math.floor(diff / 60000), h = Math.floor(diff / 3600000), d = Math.floor(diff / 86400000)
if (m < 1) return "à l'instant"
if (m < 60) return `il y a ${m}min`
if (h < 24) return `il y a ${h}h`
return `il y a ${d}j`
}
</script>