feat(admin): add Szolgáltatók sidebar menu group with providers pages
- Added 'Szolgáltatók' menu group to sidebar with 'Összes szolgáltató' (/providers) and 'Jóváhagyásra váró' (/providers/pending) sub-items - Extended pageTitle computed property with provider route titles - Providers pages: index.vue (list), pending.vue (moderation queue), [id].vue (details) Closes #351
This commit is contained in:
Roo
@@ -321,6 +321,27 @@ const menuGroups: MenuGroup[] = [
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: 'Szolgáltatók',
|
||||||
|
items: [
|
||||||
|
{
|
||||||
|
label: 'Szolgáltatók',
|
||||||
|
icon: '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" /></svg>',
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '/providers',
|
||||||
|
label: 'Összes szolgáltató',
|
||||||
|
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/providers/pending',
|
||||||
|
label: 'Jóváhagyásra váró',
|
||||||
|
icon: '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: 'Felhasználók & Partnerek',
|
title: 'Felhasználók & Partnerek',
|
||||||
items: [
|
items: [
|
||||||
@@ -473,6 +494,11 @@ const pageTitle = computed(() => {
|
|||||||
if (route.path.startsWith('/users')) return 'Felhasználók'
|
if (route.path.startsWith('/users')) return 'Felhasználók'
|
||||||
if (route.path.startsWith('/logs')) return 'Rendszernaplók'
|
if (route.path.startsWith('/logs')) return 'Rendszernaplók'
|
||||||
if (route.path.startsWith('/packages')) return 'Csomagok'
|
if (route.path.startsWith('/packages')) return 'Csomagok'
|
||||||
|
if (route.path.startsWith('/providers')) {
|
||||||
|
if (route.path === '/providers/pending') return 'Jóváhagyásra váró szolgáltatók'
|
||||||
|
if (route.path.startsWith('/providers/')) return 'Szolgáltató részletek'
|
||||||
|
return 'Szolgáltatók'
|
||||||
|
}
|
||||||
if (route.path.startsWith('/gamification')) {
|
if (route.path.startsWith('/gamification')) {
|
||||||
if (route.path === '/gamification') return 'Gamification HQ'
|
if (route.path === '/gamification') return 'Gamification HQ'
|
||||||
if (route.path === '/gamification/point-rules') return 'Pontszabályok'
|
if (route.path === '/gamification/point-rules') return 'Pontszabályok'
|
||||||
|
|||||||
566
frontend_admin/pages/providers/[id].vue
Normal file
566
frontend_admin/pages/providers/[id].vue
Normal file
@@ -0,0 +1,566 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Back Button & Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<button
|
||||||
|
@click="goBack"
|
||||||
|
class="inline-flex items-center gap-1.5 text-sm text-slate-400 hover:text-white transition mb-4"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
||||||
|
</svg>
|
||||||
|
Vissza a szolgáltatókhoz
|
||||||
|
</button>
|
||||||
|
<h1 class="text-2xl font-bold text-white">Szolgáltató részletek</h1>
|
||||||
|
<p class="text-slate-400 mt-1">Szolgáltató #{{ $route.params.id }}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div v-if="loading" class="flex items-center justify-center py-20">
|
||||||
|
<div class="text-slate-400 flex items-center gap-3">
|
||||||
|
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
<span>Szolgáltató betöltése...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error State -->
|
||||||
|
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
|
||||||
|
<p class="text-rose-400">Hiba történt a szolgáltató betöltése közben.</p>
|
||||||
|
<button @click="fetchProvider" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">Újrapróbálkozás</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Not Found -->
|
||||||
|
<div v-else-if="!provider" class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<p class="text-slate-400 text-center py-12">A szolgáltató nem található.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<!-- Status Banner -->
|
||||||
|
<div
|
||||||
|
class="rounded-xl border p-4 mb-6 flex items-center gap-3"
|
||||||
|
:class="statusBannerClass"
|
||||||
|
>
|
||||||
|
<span class="flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center" :class="statusIconClass">
|
||||||
|
<svg v-if="provider.status === 'approved'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else-if="provider.status === 'pending'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<p class="text-sm font-medium" :class="statusTextClass">{{ statusLabel(provider.status) }}</p>
|
||||||
|
<p class="text-xs mt-0.5" :class="statusSubtextClass">{{ statusDescription(provider.status) }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Content Grid -->
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||||
|
<!-- Left Column: Basic Info -->
|
||||||
|
<div class="lg:col-span-2 space-y-6">
|
||||||
|
<!-- Basic Information -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-4">Alapadatok</h2>
|
||||||
|
<dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Név</dt>
|
||||||
|
<dd class="text-sm text-white mt-1 font-medium">{{ provider.name }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Kategória</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.category || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Forrás</dt>
|
||||||
|
<dd class="mt-1">
|
||||||
|
<code class="text-sm font-mono text-amber-300 bg-amber-500/10 px-2 py-0.5 rounded">{{ provider.source }}</code>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Validációs pontszám</dt>
|
||||||
|
<dd class="mt-1">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-24 h-2 bg-slate-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
class="h-full rounded-full transition-all"
|
||||||
|
:class="provider.validation_score >= 50 ? 'bg-emerald-500' : provider.validation_score >= 20 ? 'bg-amber-500' : 'bg-slate-500'"
|
||||||
|
:style="{ width: Math.min(provider.validation_score, 100) + '%' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="text-sm text-white font-medium">{{ provider.validation_score }}</span>
|
||||||
|
</div>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Létrehozva</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ formatDate(provider.created_at) }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Beküldő user ID</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.added_by_user_id || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Address Information -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-4">Cím adatok</h2>
|
||||||
|
<dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div class="md:col-span-2">
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Teljes cím</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.address || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Város</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.city || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Irányítószám</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.address_zip || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Utca</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.address_street_name || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Házszám</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.address_house_number || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Plus Code</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.plus_code || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Information -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-4">Elérhetőség</h2>
|
||||||
|
<dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Telefon</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.contact_phone || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Email</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">{{ provider.contact_email || '—' }}</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt class="text-xs text-slate-500 uppercase tracking-wider">Weboldal</dt>
|
||||||
|
<dd class="text-sm text-white mt-1">
|
||||||
|
<a v-if="provider.website" :href="provider.website" target="_blank" class="text-indigo-400 hover:text-indigo-300 underline">
|
||||||
|
{{ provider.website }}
|
||||||
|
</a>
|
||||||
|
<span v-else>—</span>
|
||||||
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Column: Actions -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<!-- Moderation Actions -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-4">Moderációs műveletek</h2>
|
||||||
|
|
||||||
|
<!-- Pending Actions -->
|
||||||
|
<div v-if="provider.status === 'pending'" class="space-y-3">
|
||||||
|
<button
|
||||||
|
@click="approveProvider"
|
||||||
|
:disabled="actionLoading"
|
||||||
|
class="w-full px-4 py-3 bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-600/50 text-white rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<svg v-if="actionLoading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Jóváhagyás
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="openRejectModal"
|
||||||
|
:disabled="actionLoading"
|
||||||
|
class="w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
Elutasítás
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Approved Actions -->
|
||||||
|
<div v-else-if="provider.status === 'approved'" class="space-y-3">
|
||||||
|
<button
|
||||||
|
@click="openFlagModal"
|
||||||
|
:disabled="actionLoading"
|
||||||
|
class="w-full px-4 py-3 bg-purple-600/20 hover:bg-purple-600/40 disabled:opacity-50 text-purple-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
|
||||||
|
</svg>
|
||||||
|
Megjelölés (Flag)
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="deleteProvider"
|
||||||
|
:disabled="actionLoading"
|
||||||
|
class="w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
Törlés (Soft Delete)
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Rejected / Flagged Info -->
|
||||||
|
<div v-else class="text-sm text-slate-400 text-center py-4">
|
||||||
|
<p>A szolgáltató {{ provider.status === 'rejected' ? 'elutasításra' : 'megjelölésre' }} került.</p>
|
||||||
|
<button
|
||||||
|
@click="deleteProvider"
|
||||||
|
:disabled="actionLoading"
|
||||||
|
class="mt-3 w-full px-4 py-3 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center justify-center gap-2"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||||||
|
</svg>
|
||||||
|
Törlés
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Evidence Image -->
|
||||||
|
<div v-if="provider.evidence_image_path" class="bg-slate-800 rounded-xl border border-slate-700 p-6">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-4">Bizonyíték kép</h2>
|
||||||
|
<img
|
||||||
|
:src="provider.evidence_image_path"
|
||||||
|
alt="Evidence"
|
||||||
|
class="w-full rounded-lg border border-slate-600"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Reject Modal -->
|
||||||
|
<div v-if="showRejectModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRejectModal = false">
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-2">Szolgáltató elutasítása</h2>
|
||||||
|
<p class="text-sm text-slate-400 mb-6">
|
||||||
|
Biztosan elutasítod a(z) <strong class="text-white">{{ provider?.name }}</strong> szolgáltatót?
|
||||||
|
</p>
|
||||||
|
<form @submit.prevent="rejectProvider">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-slate-300 mb-1">Indoklás (opcionális)</label>
|
||||||
|
<textarea
|
||||||
|
v-model="rejectReason"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Add meg az elutasítás okát..."
|
||||||
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-rose-500/50 focus:border-rose-500 text-sm resize-none"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button type="button" @click="showRejectModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Mégse</button>
|
||||||
|
<button type="submit" :disabled="actionLoading" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
|
||||||
|
<svg v-if="actionLoading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
Elutasítás
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Flag Modal -->
|
||||||
|
<div v-if="showFlagModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showFlagModal = false">
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-2">Szolgáltató megjelölése</h2>
|
||||||
|
<p class="text-sm text-slate-400 mb-6">
|
||||||
|
Megjelölöd a(z) <strong class="text-white">{{ provider?.name }}</strong> szolgáltatót? Ez visszavonja a jóváhagyását.
|
||||||
|
</p>
|
||||||
|
<form @submit.prevent="flagProvider">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-slate-300 mb-1">Indoklás (opcionális)</label>
|
||||||
|
<textarea
|
||||||
|
v-model="flagReason"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Add meg a megjelölés okát..."
|
||||||
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-purple-500/50 focus:border-purple-500 text-sm resize-none"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button type="button" @click="showFlagModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Mégse</button>
|
||||||
|
<button type="submit" :disabled="actionLoading" class="px-4 py-2 bg-purple-600 hover:bg-purple-500 disabled:bg-purple-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
|
||||||
|
<svg v-if="actionLoading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
Megjelölés
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Toast -->
|
||||||
|
<div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
|
||||||
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
{{ toast }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
middleware: 'auth',
|
||||||
|
})
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const { formatDate } = useFormatter()
|
||||||
|
|
||||||
|
interface ProviderDetail {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
address: string
|
||||||
|
city: string | null
|
||||||
|
address_zip: string | null
|
||||||
|
address_street_name: string | null
|
||||||
|
address_street_type: string | null
|
||||||
|
address_house_number: string | null
|
||||||
|
plus_code: string | null
|
||||||
|
contact_phone: string | null
|
||||||
|
contact_email: string | null
|
||||||
|
website: string | null
|
||||||
|
category: string | null
|
||||||
|
status: string
|
||||||
|
source: string
|
||||||
|
validation_score: number
|
||||||
|
evidence_image_path: string | null
|
||||||
|
added_by_user_id: number | null
|
||||||
|
created_at: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
const error = ref(false)
|
||||||
|
const provider = ref<ProviderDetail | null>(null)
|
||||||
|
const toast = ref('')
|
||||||
|
const actionLoading = ref(false)
|
||||||
|
|
||||||
|
// Reject modal
|
||||||
|
const showRejectModal = ref(false)
|
||||||
|
const rejectReason = ref('')
|
||||||
|
|
||||||
|
// Flag modal
|
||||||
|
const showFlagModal = ref(false)
|
||||||
|
const flagReason = ref('')
|
||||||
|
|
||||||
|
function getHeaders(): Record<string, string> {
|
||||||
|
const tokenCookie = useCookie('access_token')
|
||||||
|
const token = tokenCookie.value
|
||||||
|
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(msg: string) {
|
||||||
|
toast.value = msg
|
||||||
|
setTimeout(() => { toast.value = '' }, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function goBack() {
|
||||||
|
router.push('/providers')
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(status: string): string {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'Függőben lévő szolgáltató',
|
||||||
|
approved: 'Jóváhagyott szolgáltató',
|
||||||
|
rejected: 'Elutasított szolgáltató',
|
||||||
|
flagged: 'Megjelölt szolgáltató',
|
||||||
|
}
|
||||||
|
return map[status] || status
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusDescription(status: string): string {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'Ez a szolgáltató még moderálásra vár. Jóváhagyhatod vagy elutasíthatod.',
|
||||||
|
approved: 'A szolgáltató jóváhagyásra került és elérhető a felhasználók számára.',
|
||||||
|
rejected: 'A szolgáltató elutasításra került és nem elérhető.',
|
||||||
|
flagged: 'A szolgáltató megjelölésre került és visszavonásra került a jóváhagyása.',
|
||||||
|
}
|
||||||
|
return map[status] || ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const statusBannerClass = computed(() => {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'bg-amber-500/10 border-amber-500/30',
|
||||||
|
approved: 'bg-emerald-500/10 border-emerald-500/30',
|
||||||
|
rejected: 'bg-rose-500/10 border-rose-500/30',
|
||||||
|
flagged: 'bg-purple-500/10 border-purple-500/30',
|
||||||
|
}
|
||||||
|
return map[provider.value?.status || ''] || 'bg-slate-500/10 border-slate-500/30'
|
||||||
|
})
|
||||||
|
|
||||||
|
const statusIconClass = computed(() => {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'bg-amber-500/20 text-amber-400',
|
||||||
|
approved: 'bg-emerald-500/20 text-emerald-400',
|
||||||
|
rejected: 'bg-rose-500/20 text-rose-400',
|
||||||
|
flagged: 'bg-purple-500/20 text-purple-400',
|
||||||
|
}
|
||||||
|
return map[provider.value?.status || ''] || 'bg-slate-500/20 text-slate-400'
|
||||||
|
})
|
||||||
|
|
||||||
|
const statusTextClass = computed(() => {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'text-amber-400',
|
||||||
|
approved: 'text-emerald-400',
|
||||||
|
rejected: 'text-rose-400',
|
||||||
|
flagged: 'text-purple-400',
|
||||||
|
}
|
||||||
|
return map[provider.value?.status || ''] || 'text-slate-400'
|
||||||
|
})
|
||||||
|
|
||||||
|
const statusSubtextClass = computed(() => {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'text-amber-400/70',
|
||||||
|
approved: 'text-emerald-400/70',
|
||||||
|
rejected: 'text-rose-400/70',
|
||||||
|
flagged: 'text-purple-400/70',
|
||||||
|
}
|
||||||
|
return map[provider.value?.status || ''] || 'text-slate-400/70'
|
||||||
|
})
|
||||||
|
|
||||||
|
async function fetchProvider() {
|
||||||
|
loading.value = true
|
||||||
|
error.value = false
|
||||||
|
try {
|
||||||
|
const data = await $fetch<ProviderDetail>(`/api/v1/admin/providers/${route.params.id}`, { headers: getHeaders() })
|
||||||
|
provider.value = data
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to fetch provider:', e)
|
||||||
|
error.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function approveProvider() {
|
||||||
|
if (!provider.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${provider.value.id}/approve`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getHeaders(),
|
||||||
|
body: { reason: 'Admin approved via detail page' },
|
||||||
|
})
|
||||||
|
showToast(`"${provider.value.name}" sikeresen jóváhagyva`)
|
||||||
|
await fetchProvider()
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to approve provider:', e)
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRejectModal() {
|
||||||
|
rejectReason.value = ''
|
||||||
|
showRejectModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function rejectProvider() {
|
||||||
|
if (!provider.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${provider.value.id}/reject`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getHeaders(),
|
||||||
|
body: { reason: rejectReason.value || 'Admin rejected via detail page' },
|
||||||
|
})
|
||||||
|
showToast(`"${provider.value.name}" elutasítva`)
|
||||||
|
showRejectModal.value = false
|
||||||
|
await fetchProvider()
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to reject provider:', e)
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openFlagModal() {
|
||||||
|
flagReason.value = ''
|
||||||
|
showFlagModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function flagProvider() {
|
||||||
|
if (!provider.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${provider.value.id}/flag`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getHeaders(),
|
||||||
|
body: { reason: flagReason.value || 'Admin flagged via detail page' },
|
||||||
|
})
|
||||||
|
showToast(`"${provider.value.name}" megjelölve`)
|
||||||
|
showFlagModal.value = false
|
||||||
|
await fetchProvider()
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to flag provider:', e)
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteProvider() {
|
||||||
|
if (!provider.value) return
|
||||||
|
actionLoading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${provider.value.id}`, {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: getHeaders(),
|
||||||
|
})
|
||||||
|
showToast(`"${provider.value.name}" törölve`)
|
||||||
|
setTimeout(() => router.push('/providers'), 1500)
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to delete provider:', e)
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchProvider()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.animate-slide-up {
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
362
frontend_admin/pages/providers/index.vue
Normal file
362
frontend_admin/pages/providers/index.vue
Normal file
@@ -0,0 +1,362 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-white">Szolgáltatók</h1>
|
||||||
|
<p class="text-slate-400 mt-1">Szolgáltatók listázása, keresése és moderálása</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Stats Cards -->
|
||||||
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4">
|
||||||
|
<p class="text-xs text-slate-400 uppercase tracking-wider">Összes</p>
|
||||||
|
<p class="text-2xl font-bold text-white mt-1">{{ stats.total }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-amber-500/30 p-4">
|
||||||
|
<p class="text-xs text-slate-400 uppercase tracking-wider">Függőben</p>
|
||||||
|
<p class="text-2xl font-bold text-amber-400 mt-1">{{ stats.pending }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-emerald-500/30 p-4">
|
||||||
|
<p class="text-xs text-slate-400 uppercase tracking-wider">Jóváhagyott</p>
|
||||||
|
<p class="text-2xl font-bold text-emerald-400 mt-1">{{ stats.approved }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-rose-500/30 p-4">
|
||||||
|
<p class="text-xs text-slate-400 uppercase tracking-wider">Elutasított</p>
|
||||||
|
<p class="text-2xl font-bold text-rose-400 mt-1">{{ stats.rejected }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-purple-500/30 p-4">
|
||||||
|
<p class="text-xs text-slate-400 uppercase tracking-wider">Megjelölt</p>
|
||||||
|
<p class="text-2xl font-bold text-purple-400 mt-1">{{ stats.flagged }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div v-if="loading" class="flex items-center justify-center py-20">
|
||||||
|
<div class="text-slate-400 flex items-center gap-3">
|
||||||
|
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
<span>Szolgáltatók betöltése...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error State -->
|
||||||
|
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
|
||||||
|
<p class="text-rose-400">Hiba történt a szolgáltatók betöltése közben.</p>
|
||||||
|
<button @click="fetchProviders" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">Újrapróbálkozás</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<!-- Filters -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-4 mb-6">
|
||||||
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
|
<!-- Search -->
|
||||||
|
<div class="flex-1 min-w-[200px]">
|
||||||
|
<input
|
||||||
|
v-model="filters.search"
|
||||||
|
type="text"
|
||||||
|
placeholder="Keresés név alapján..."
|
||||||
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
||||||
|
@input="onSearchInput"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Filter -->
|
||||||
|
<select
|
||||||
|
v-model="filters.status"
|
||||||
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
||||||
|
@change="fetchProviders"
|
||||||
|
>
|
||||||
|
<option value="">Minden státusz</option>
|
||||||
|
<option value="pending">Függőben</option>
|
||||||
|
<option value="approved">Jóváhagyott</option>
|
||||||
|
<option value="rejected">Elutasított</option>
|
||||||
|
<option value="flagged">Megjelölt</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Source Filter -->
|
||||||
|
<select
|
||||||
|
v-model="filters.source"
|
||||||
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
||||||
|
@change="fetchProviders"
|
||||||
|
>
|
||||||
|
<option value="">Minden forrás</option>
|
||||||
|
<option value="manual">Kézi</option>
|
||||||
|
<option value="ocr">OCR</option>
|
||||||
|
<option value="import">Import</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<!-- Sort -->
|
||||||
|
<select
|
||||||
|
v-model="filters.sort_by"
|
||||||
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 text-sm"
|
||||||
|
@change="fetchProviders"
|
||||||
|
>
|
||||||
|
<option value="created_at">Létrehozás dátuma</option>
|
||||||
|
<option value="name">Név</option>
|
||||||
|
<option value="validation_score">Validációs pontszám</option>
|
||||||
|
</select>
|
||||||
|
|
||||||
|
<button
|
||||||
|
@click="filters.sort_order = filters.sort_order === 'asc' ? 'desc' : 'asc'; fetchProviders()"
|
||||||
|
class="px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white hover:bg-slate-600 transition text-sm flex items-center gap-1"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" :class="filters.sort_order === 'asc' ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
||||||
|
</svg>
|
||||||
|
{{ filters.sort_order === 'asc' ? 'Növekvő' : 'Csökkenő' }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Providers Table -->
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 overflow-hidden">
|
||||||
|
<table class="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr class="border-b border-slate-700">
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">ID</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Név</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Cím</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Státusz</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Forrás</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Validáció</th>
|
||||||
|
<th class="text-left px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Létrehozva</th>
|
||||||
|
<th class="text-right px-6 py-4 text-xs font-medium text-slate-400 uppercase tracking-wider">Műveletek</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody class="divide-y divide-slate-700/50">
|
||||||
|
<tr v-for="provider in providers" :key="provider.id" class="hover:bg-slate-700/30 transition">
|
||||||
|
<td class="px-6 py-4 text-sm text-slate-400">{{ provider.id }}</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<NuxtLink :to="`/providers/${provider.id}`" class="text-sm font-medium text-indigo-400 hover:text-indigo-300 transition">
|
||||||
|
{{ provider.name }}
|
||||||
|
</NuxtLink>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-slate-300 max-w-[200px] truncate">{{ provider.address || '—' }}</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" :class="statusClass(provider.status)">
|
||||||
|
{{ statusLabel(provider.status) }}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<code class="text-xs font-mono text-slate-400 bg-slate-700/50 px-2 py-0.5 rounded">{{ provider.source }}</code>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<div class="w-16 h-1.5 bg-slate-700 rounded-full overflow-hidden">
|
||||||
|
<div
|
||||||
|
class="h-full rounded-full transition-all"
|
||||||
|
:class="provider.validation_score >= 50 ? 'bg-emerald-500' : provider.validation_score >= 20 ? 'bg-amber-500' : 'bg-slate-500'"
|
||||||
|
:style="{ width: Math.min(provider.validation_score, 100) + '%' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-slate-400">{{ provider.validation_score }}</span>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 text-sm text-slate-400">{{ formatDate(provider.created_at) }}</td>
|
||||||
|
<td class="px-6 py-4 text-right">
|
||||||
|
<div class="flex items-center justify-end gap-2">
|
||||||
|
<NuxtLink
|
||||||
|
:to="`/providers/${provider.id}`"
|
||||||
|
class="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-700 transition"
|
||||||
|
title="Részletek"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr v-if="providers.length === 0">
|
||||||
|
<td colspan="8" class="px-6 py-12 text-center text-sm text-slate-500">
|
||||||
|
Nincs megjeleníthető szolgáltató.
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Pagination -->
|
||||||
|
<div class="flex items-center justify-between mt-6">
|
||||||
|
<p class="text-sm text-slate-400">
|
||||||
|
{{ providers.length }} találat (összesen: {{ stats.total }})
|
||||||
|
</p>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
:disabled="filters.skip <= 0"
|
||||||
|
@click="filters.skip = Math.max(0, filters.skip - filters.limit); fetchProviders()"
|
||||||
|
class="px-3 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-600 transition text-sm"
|
||||||
|
>
|
||||||
|
Előző
|
||||||
|
</button>
|
||||||
|
<span class="text-sm text-slate-400">
|
||||||
|
{{ Math.floor(filters.skip / filters.limit) + 1 }}. oldal
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
:disabled="providers.length < filters.limit"
|
||||||
|
@click="filters.skip += filters.limit; fetchProviders()"
|
||||||
|
class="px-3 py-1.5 bg-slate-700 border border-slate-600 rounded-lg text-white disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-600 transition text-sm"
|
||||||
|
>
|
||||||
|
Következő
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Success Toast -->
|
||||||
|
<div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
|
||||||
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
{{ toast }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
middleware: 'auth',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { formatDate } = useFormatter()
|
||||||
|
|
||||||
|
interface ProviderListItem {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
address: string | null
|
||||||
|
city: string | null
|
||||||
|
category: string | null
|
||||||
|
status: string
|
||||||
|
source: string
|
||||||
|
validation_score: number
|
||||||
|
added_by_user_id: number | null
|
||||||
|
created_at: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ProviderStats {
|
||||||
|
total: number
|
||||||
|
pending: number
|
||||||
|
approved: number
|
||||||
|
rejected: number
|
||||||
|
flagged: number
|
||||||
|
total_validations: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
const error = ref(false)
|
||||||
|
const providers = ref<ProviderListItem[]>([])
|
||||||
|
const stats = ref<ProviderStats>({
|
||||||
|
total: 0,
|
||||||
|
pending: 0,
|
||||||
|
approved: 0,
|
||||||
|
rejected: 0,
|
||||||
|
flagged: 0,
|
||||||
|
total_validations: 0,
|
||||||
|
})
|
||||||
|
const toast = ref('')
|
||||||
|
let searchTimeout: ReturnType<typeof setTimeout> | null = null
|
||||||
|
|
||||||
|
const filters = reactive({
|
||||||
|
search: '',
|
||||||
|
status: '',
|
||||||
|
source: '',
|
||||||
|
sort_by: 'created_at',
|
||||||
|
sort_order: 'desc',
|
||||||
|
skip: 0,
|
||||||
|
limit: 50,
|
||||||
|
})
|
||||||
|
|
||||||
|
function getHeaders(): Record<string, string> {
|
||||||
|
const tokenCookie = useCookie('access_token')
|
||||||
|
const token = tokenCookie.value
|
||||||
|
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(msg: string) {
|
||||||
|
toast.value = msg
|
||||||
|
setTimeout(() => { toast.value = '' }, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusClass(status: string): string {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'bg-amber-500/10 text-amber-400',
|
||||||
|
approved: 'bg-emerald-500/10 text-emerald-400',
|
||||||
|
rejected: 'bg-rose-500/10 text-rose-400',
|
||||||
|
flagged: 'bg-purple-500/10 text-purple-400',
|
||||||
|
}
|
||||||
|
return map[status] || 'bg-slate-500/10 text-slate-400'
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusLabel(status: string): string {
|
||||||
|
const map: Record<string, string> = {
|
||||||
|
pending: 'Függőben',
|
||||||
|
approved: 'Jóváhagyott',
|
||||||
|
rejected: 'Elutasított',
|
||||||
|
flagged: 'Megjelölt',
|
||||||
|
}
|
||||||
|
return map[status] || status
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSearchInput() {
|
||||||
|
if (searchTimeout) clearTimeout(searchTimeout)
|
||||||
|
searchTimeout = setTimeout(() => {
|
||||||
|
filters.skip = 0
|
||||||
|
fetchProviders()
|
||||||
|
}, 400)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchStats() {
|
||||||
|
try {
|
||||||
|
const data = await $fetch<ProviderStats>('/api/v1/admin/providers/stats', { headers: getHeaders() })
|
||||||
|
stats.value = data
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to fetch provider stats:', e)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchProviders() {
|
||||||
|
loading.value = true
|
||||||
|
error.value = false
|
||||||
|
try {
|
||||||
|
const params = new URLSearchParams()
|
||||||
|
params.append('skip', String(filters.skip))
|
||||||
|
params.append('limit', String(filters.limit))
|
||||||
|
params.append('sort_by', filters.sort_by)
|
||||||
|
params.append('sort_order', filters.sort_order)
|
||||||
|
if (filters.status) params.append('status', filters.status)
|
||||||
|
if (filters.source) params.append('source', filters.source)
|
||||||
|
if (filters.search) params.append('search', filters.search)
|
||||||
|
|
||||||
|
const data = await $fetch<ProviderListItem[]>(`/api/v1/admin/providers?${params.toString()}`, { headers: getHeaders() })
|
||||||
|
providers.value = data
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to fetch providers:', e)
|
||||||
|
error.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchStats()
|
||||||
|
fetchProviders()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.animate-slide-up {
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
277
frontend_admin/pages/providers/pending.vue
Normal file
277
frontend_admin/pages/providers/pending.vue
Normal file
@@ -0,0 +1,277 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Page Header -->
|
||||||
|
<div class="mb-8">
|
||||||
|
<h1 class="text-2xl font-bold text-white">Jóváhagyásra váró szolgáltatók</h1>
|
||||||
|
<p class="text-slate-400 mt-1">A közösség által beküldött szolgáltatók moderációs sora</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Loading State -->
|
||||||
|
<div v-if="loading" class="flex items-center justify-center py-20">
|
||||||
|
<div class="text-slate-400 flex items-center gap-3">
|
||||||
|
<svg class="w-5 h-5 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
<span>Függőben lévő szolgáltatók betöltése...</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Error State -->
|
||||||
|
<div v-else-if="error" class="bg-rose-500/10 border border-rose-500/30 rounded-xl p-6 mb-8">
|
||||||
|
<p class="text-rose-400">Hiba történt a szolgáltatók betöltése közben.</p>
|
||||||
|
<button @click="fetchPendingProviders" class="mt-3 text-sm text-rose-300 hover:text-rose-200 underline">Újrapróbálkozás</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<!-- Pending Queue -->
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div
|
||||||
|
v-for="provider in providers"
|
||||||
|
:key="provider.id"
|
||||||
|
class="bg-slate-800 rounded-xl border border-slate-700 p-6 hover:border-amber-500/30 transition"
|
||||||
|
>
|
||||||
|
<div class="flex items-start justify-between gap-4">
|
||||||
|
<!-- Left: Provider Info -->
|
||||||
|
<div class="flex-1 min-w-0">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<h3 class="text-lg font-semibold text-white truncate">{{ provider.name }}</h3>
|
||||||
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-500/10 text-amber-400">
|
||||||
|
Függőben
|
||||||
|
</span>
|
||||||
|
<code class="text-xs font-mono text-slate-400 bg-slate-700/50 px-2 py-0.5 rounded">{{ provider.source }}</code>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-2 gap-x-8 gap-y-2 text-sm">
|
||||||
|
<div v-if="provider.address" class="text-slate-300">
|
||||||
|
<span class="text-slate-500">Cím:</span> {{ provider.address }}
|
||||||
|
</div>
|
||||||
|
<div v-if="provider.city" class="text-slate-300">
|
||||||
|
<span class="text-slate-500">Város:</span> {{ provider.city }}
|
||||||
|
</div>
|
||||||
|
<div v-if="provider.category" class="text-slate-300">
|
||||||
|
<span class="text-slate-500">Kategória:</span> {{ provider.category }}
|
||||||
|
</div>
|
||||||
|
<div class="text-slate-300">
|
||||||
|
<span class="text-slate-500">Validációs pontszám:</span>
|
||||||
|
<span class="text-amber-400 font-medium ml-1">{{ provider.validation_score }}</span>
|
||||||
|
</div>
|
||||||
|
<div v-if="provider.created_at" class="text-slate-300">
|
||||||
|
<span class="text-slate-500">Beküldve:</span> {{ formatDate(provider.created_at) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Actions -->
|
||||||
|
<div class="flex flex-col gap-2 flex-shrink-0">
|
||||||
|
<button
|
||||||
|
@click="approveProvider(provider)"
|
||||||
|
:disabled="actionLoading === provider.id"
|
||||||
|
class="px-4 py-2 bg-emerald-600 hover:bg-emerald-500 disabled:bg-emerald-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<svg v-if="actionLoading === provider.id" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
|
||||||
|
</svg>
|
||||||
|
Jóváhagyás
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
@click="openRejectModal(provider)"
|
||||||
|
:disabled="actionLoading === provider.id"
|
||||||
|
class="px-4 py-2 bg-rose-600/20 hover:bg-rose-600/40 disabled:opacity-50 text-rose-400 rounded-lg text-sm font-medium transition flex items-center gap-2"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||||
|
</svg>
|
||||||
|
Elutasítás
|
||||||
|
</button>
|
||||||
|
<NuxtLink
|
||||||
|
:to="`/providers/${provider.id}`"
|
||||||
|
class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-slate-300 rounded-lg text-sm font-medium transition flex items-center gap-2 text-center"
|
||||||
|
>
|
||||||
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||||
|
</svg>
|
||||||
|
Részletek
|
||||||
|
</NuxtLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty State -->
|
||||||
|
<div v-if="providers.length === 0" class="bg-slate-800 rounded-xl border border-slate-700 p-12 text-center">
|
||||||
|
<svg class="w-12 h-12 mx-auto text-slate-600 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
<h3 class="text-lg font-medium text-slate-400 mb-1">Nincs függőben lévő szolgáltató</h3>
|
||||||
|
<p class="text-sm text-slate-500">Minden beküldött szolgáltató fel lett dolgozva.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- Reject Modal -->
|
||||||
|
<div v-if="showRejectModal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" @click.self="showRejectModal = false">
|
||||||
|
<div class="bg-slate-800 rounded-xl border border-slate-700 p-6 w-full max-w-lg mx-4 shadow-2xl">
|
||||||
|
<h2 class="text-lg font-semibold text-white mb-2">Szolgáltató elutasítása</h2>
|
||||||
|
<p class="text-sm text-slate-400 mb-6">
|
||||||
|
Biztosan elutasítod a(z) <strong class="text-white">{{ rejectingProvider?.name }}</strong> szolgáltatót?
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<form @submit.prevent="rejectProvider">
|
||||||
|
<div class="mb-4">
|
||||||
|
<label class="block text-sm font-medium text-slate-300 mb-1">Indoklás (opcionális)</label>
|
||||||
|
<textarea
|
||||||
|
v-model="rejectReason"
|
||||||
|
rows="3"
|
||||||
|
placeholder="Add meg az elutasítás okát..."
|
||||||
|
class="w-full px-3 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white placeholder-slate-500 focus:outline-none focus:ring-2 focus:ring-rose-500/50 focus:border-rose-500 text-sm resize-none"
|
||||||
|
></textarea>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex justify-end gap-3">
|
||||||
|
<button type="button" @click="showRejectModal = false" class="px-4 py-2 text-sm text-slate-400 hover:text-white transition">Mégse</button>
|
||||||
|
<button type="submit" :disabled="rejectLoading" class="px-4 py-2 bg-rose-600 hover:bg-rose-500 disabled:bg-rose-600/50 text-white rounded-lg text-sm font-medium transition flex items-center gap-2">
|
||||||
|
<svg v-if="rejectLoading" class="w-4 h-4 animate-spin" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
Elutasítás
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Success Toast -->
|
||||||
|
<div v-if="toast" class="fixed bottom-6 right-6 z-50 bg-emerald-600 text-white px-4 py-3 rounded-lg shadow-lg text-sm flex items-center gap-2 animate-slide-up">
|
||||||
|
<svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||||
|
</svg>
|
||||||
|
{{ toast }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
definePageMeta({
|
||||||
|
middleware: 'auth',
|
||||||
|
})
|
||||||
|
|
||||||
|
const { formatDate } = useFormatter()
|
||||||
|
|
||||||
|
interface ProviderListItem {
|
||||||
|
id: number
|
||||||
|
name: string
|
||||||
|
address: string | null
|
||||||
|
city: string | null
|
||||||
|
category: string | null
|
||||||
|
status: string
|
||||||
|
source: string
|
||||||
|
validation_score: number
|
||||||
|
added_by_user_id: number | null
|
||||||
|
created_at: string | null
|
||||||
|
}
|
||||||
|
|
||||||
|
const loading = ref(true)
|
||||||
|
const error = ref(false)
|
||||||
|
const providers = ref<ProviderListItem[]>([])
|
||||||
|
const toast = ref('')
|
||||||
|
const actionLoading = ref<number | null>(null)
|
||||||
|
const showRejectModal = ref(false)
|
||||||
|
const rejectingProvider = ref<ProviderListItem | null>(null)
|
||||||
|
const rejectReason = ref('')
|
||||||
|
const rejectLoading = ref(false)
|
||||||
|
|
||||||
|
function getHeaders(): Record<string, string> {
|
||||||
|
const tokenCookie = useCookie('access_token')
|
||||||
|
const token = tokenCookie.value
|
||||||
|
return token ? { Authorization: `Bearer ${token}`, 'Content-Type': 'application/json' } : { 'Content-Type': 'application/json' }
|
||||||
|
}
|
||||||
|
|
||||||
|
function showToast(msg: string) {
|
||||||
|
toast.value = msg
|
||||||
|
setTimeout(() => { toast.value = '' }, 3000)
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchPendingProviders() {
|
||||||
|
loading.value = true
|
||||||
|
error.value = false
|
||||||
|
try {
|
||||||
|
const data = await $fetch<ProviderListItem[]>('/api/v1/admin/providers?status=pending&limit=100&sort_by=created_at&sort_order=asc', { headers: getHeaders() })
|
||||||
|
providers.value = data
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Failed to fetch pending providers:', e)
|
||||||
|
error.value = true
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function approveProvider(provider: ProviderListItem) {
|
||||||
|
actionLoading.value = provider.id
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${provider.id}/approve`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getHeaders(),
|
||||||
|
body: { reason: 'Admin approved via pending queue' },
|
||||||
|
})
|
||||||
|
showToast(`"${provider.name}" sikeresen jóváhagyva`)
|
||||||
|
providers.value = providers.value.filter(p => p.id !== provider.id)
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to approve provider:', e)
|
||||||
|
} finally {
|
||||||
|
actionLoading.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRejectModal(provider: ProviderListItem) {
|
||||||
|
rejectingProvider.value = provider
|
||||||
|
rejectReason.value = ''
|
||||||
|
showRejectModal.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
async function rejectProvider() {
|
||||||
|
if (!rejectingProvider.value) return
|
||||||
|
rejectLoading.value = true
|
||||||
|
try {
|
||||||
|
await $fetch(`/api/v1/admin/providers/${rejectingProvider.value.id}/reject`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: getHeaders(),
|
||||||
|
body: { reason: rejectReason.value || 'Admin rejected via pending queue' },
|
||||||
|
})
|
||||||
|
showToast(`"${rejectingProvider.value.name}" elutasítva`)
|
||||||
|
providers.value = providers.value.filter(p => p.id !== rejectingProvider.value!.id)
|
||||||
|
showRejectModal.value = false
|
||||||
|
rejectingProvider.value = null
|
||||||
|
} catch (e: any) {
|
||||||
|
const detail = e?.response?._data?.detail || e?.data?.detail || 'Ismeretlen hiba'
|
||||||
|
showToast(`Hiba: ${detail}`)
|
||||||
|
console.error('Failed to reject provider:', e)
|
||||||
|
} finally {
|
||||||
|
rejectLoading.value = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
fetchPendingProviders()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.animate-slide-up {
|
||||||
|
animation: slideUp 0.3s ease-out;
|
||||||
|
}
|
||||||
|
@keyframes slideUp {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(1rem);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user