fix(context): recarga completa y refresco automatico al cambiar de cliente en Contexto
This commit is contained in:
@@ -66,10 +66,7 @@ export default function CalendarPortfolioBoard({
|
||||
const href = latest
|
||||
? `/dashboard/calendario?view=archive&month=${latest}`
|
||||
: '/dashboard/calendario?view=archive';
|
||||
startTransition(() => {
|
||||
router.push(href);
|
||||
router.refresh();
|
||||
});
|
||||
window.location.href = href;
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import React, { useEffect, useState, useTransition } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ChevronDown, Eye, Building2 } from 'lucide-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { ChevronDown, Eye, Building2, Loader2, Check } from 'lucide-react';
|
||||
|
||||
type TenantOpt = { id: string; name: string; slug: string };
|
||||
|
||||
@@ -13,12 +12,11 @@ export default function TenantSwitcher({
|
||||
initialName: string;
|
||||
isAgency: boolean;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [tenants, setTenants] = useState<TenantOpt[]>([]);
|
||||
const [activeName, setActiveName] = useState(initialName);
|
||||
const [activeId, setActiveId] = useState<string | null>(null);
|
||||
const [pending, startTransition] = useTransition();
|
||||
const [switching, setSwitching] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAgency) return;
|
||||
@@ -52,6 +50,8 @@ export default function TenantSwitcher({
|
||||
|
||||
async function select(tenant: TenantOpt | null) {
|
||||
setOpen(false);
|
||||
setSwitching(true);
|
||||
try {
|
||||
await fetch('/api/admin/active-tenant', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
@@ -59,32 +59,65 @@ export default function TenantSwitcher({
|
||||
});
|
||||
setActiveId(tenant?.id ?? null);
|
||||
setActiveName(tenant?.name ?? 'Vista global agencia');
|
||||
startTransition(() => router.refresh());
|
||||
|
||||
// Limpiar query params de tenant para que no haya conflicto
|
||||
const currentUrl = new URL(window.location.href);
|
||||
const hadTenantParam =
|
||||
currentUrl.searchParams.has('tenant') ||
|
||||
currentUrl.searchParams.has('tenant_id') ||
|
||||
currentUrl.searchParams.has('tenantId');
|
||||
|
||||
currentUrl.searchParams.delete('tenant');
|
||||
currentUrl.searchParams.delete('tenant_id');
|
||||
currentUrl.searchParams.delete('tenantId');
|
||||
|
||||
if (hadTenantParam) {
|
||||
window.location.href = currentUrl.toString();
|
||||
} else {
|
||||
window.location.reload();
|
||||
}
|
||||
} catch {
|
||||
window.location.reload();
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
disabled={switching}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200 hover:bg-brand-100 transition-colors"
|
||||
className="inline-flex items-center gap-2 bg-brand-50 text-brand-700 font-semibold px-2.5 py-1 rounded-md border border-brand-200 hover:bg-brand-100 transition-colors disabled:opacity-75 cursor-pointer"
|
||||
title="Cambiar cliente en contexto"
|
||||
>
|
||||
{switching ? (
|
||||
<Loader2 className="w-3.5 h-3.5 animate-spin text-brand-600" />
|
||||
) : (
|
||||
<Eye className="w-3.5 h-3.5" />
|
||||
)}
|
||||
<span className="max-w-[200px] truncate">
|
||||
{activeId ? activeName : 'Vista global agencia'}
|
||||
{switching
|
||||
? 'Cargando cliente…'
|
||||
: activeId
|
||||
? activeName
|
||||
: 'Vista global agencia'}
|
||||
</span>
|
||||
<ChevronDown className="w-3.5 h-3.5 opacity-70" />
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="absolute left-0 top-full mt-2 z-50 w-72 rounded-xl border border-gray-200 bg-white shadow-xl py-1 max-h-80 overflow-y-auto">
|
||||
<button
|
||||
type="button"
|
||||
disabled={pending}
|
||||
disabled={switching}
|
||||
onClick={() => select(null)}
|
||||
className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center gap-2"
|
||||
className="w-full text-left px-3 py-2 text-sm text-gray-700 hover:bg-gray-50 flex items-center justify-between cursor-pointer"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Building2 className="w-3.5 h-3.5 text-amber-500" />
|
||||
Vista global agencia
|
||||
<span>Vista global agencia</span>
|
||||
</div>
|
||||
{!activeId && <Check className="w-3.5 h-3.5 text-brand-600" />}
|
||||
</button>
|
||||
<div className="border-t border-gray-100 my-1" />
|
||||
{tenants.length === 0 ? (
|
||||
@@ -96,14 +129,17 @@ export default function TenantSwitcher({
|
||||
<button
|
||||
key={t.id}
|
||||
type="button"
|
||||
disabled={pending}
|
||||
disabled={switching}
|
||||
onClick={() => select(t)}
|
||||
className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 ${
|
||||
activeId === t.id ? 'text-brand-600' : 'text-gray-800'
|
||||
className={`w-full text-left px-3 py-2 text-sm hover:bg-gray-50 flex items-center justify-between cursor-pointer ${
|
||||
activeId === t.id ? 'text-brand-600 font-semibold bg-brand-50/50' : 'text-gray-800'
|
||||
}`}
|
||||
>
|
||||
<span className="font-medium">{t.name}</span>
|
||||
<span className="block text-[10px] text-gray-500">{t.slug}</span>
|
||||
<div>
|
||||
<span className="font-medium block leading-snug">{t.name}</span>
|
||||
<span className="block text-[10px] text-gray-500 font-mono">{t.slug}</span>
|
||||
</div>
|
||||
{activeId === t.id && <Check className="w-3.5 h-3.5 text-brand-600 shrink-0 ml-2" />}
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user