feature/tab-warning-flag #44
@@ -64,6 +64,14 @@ export class OrganizationController {
|
|||||||
return this.organizationService.searchCounterpartOrganizations(req.user.id, organizationId, q);
|
return this.organizationService.searchCounterpartOrganizations(req.user.id, organizationId, q);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Get('connections/pending-count')
|
||||||
|
@UseGuards(JwtAuthGuard)
|
||||||
|
@ApiOperation({ summary: 'Count incoming pending connection requests for sidebar badge' })
|
||||||
|
countPendingConnections(@Req() req: { user: { id: string; organizationId?: string } }) {
|
||||||
|
const organizationId = this.organizationService.getOrganizationIdFromUser(req.user);
|
||||||
|
return this.organizationService.countIncomingPendingConnections(req.user.id, organizationId);
|
||||||
|
}
|
||||||
|
|
||||||
@Get('connections')
|
@Get('connections')
|
||||||
@UseGuards(JwtAuthGuard)
|
@UseGuards(JwtAuthGuard)
|
||||||
@ApiOperation({ summary: 'List counterpart connections for current organization' })
|
@ApiOperation({ summary: 'List counterpart connections for current organization' })
|
||||||
|
|||||||
@@ -160,6 +160,29 @@ export class OrganizationService {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** Lightweight count for sidebar badge — incoming PENDING requests only. */
|
||||||
|
async countIncomingPendingConnections(userId: string, organizationId: string) {
|
||||||
|
const actor = await this.getActorMembership(userId, organizationId);
|
||||||
|
if (!actor || !this.canEditOrganizations(actor)) {
|
||||||
|
throw new ForbiddenException('You do not have permission to manage organizations');
|
||||||
|
}
|
||||||
|
|
||||||
|
const links = await this.prisma.organizationLink.findMany({
|
||||||
|
where: {
|
||||||
|
status: LinkStatus.PENDING,
|
||||||
|
OR: [{ organizationAId: organizationId }, { organizationBId: organizationId }],
|
||||||
|
},
|
||||||
|
select: { sharedDataTypes: true },
|
||||||
|
});
|
||||||
|
|
||||||
|
const count = links.filter((link) => {
|
||||||
|
const requesterOrgId = this.getRequesterOrganizationId(link.sharedDataTypes);
|
||||||
|
return requesterOrgId !== null && requesterOrgId !== organizationId;
|
||||||
|
}).length;
|
||||||
|
|
||||||
|
return { success: true, data: { count } };
|
||||||
|
}
|
||||||
|
|
||||||
async listInvitationHistory(userId: string, organizationId: string) {
|
async listInvitationHistory(userId: string, organizationId: string) {
|
||||||
const actor = await this.getActorMembership(userId, organizationId);
|
const actor = await this.getActorMembership(userId, organizationId);
|
||||||
if (!actor || !this.canEditOrganizations(actor)) {
|
if (!actor || !this.canEditOrganizations(actor)) {
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { useTranslations } from 'next-intl';
|
|||||||
import { useToast } from '@/lib/hooks/useToast';
|
import { useToast } from '@/lib/hooks/useToast';
|
||||||
import { Check, Trash2, UserPlus, X } from 'lucide-react';
|
import { Check, Trash2, UserPlus, X } from 'lucide-react';
|
||||||
import { useAuth } from '@/lib/hooks/useAuth';
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
|
import { notifyPendingConnectionsChanged } from '@/lib/hooks/usePendingConnectionsCount';
|
||||||
import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
|
import { useOrganizationInviteLinkCopy } from '@/lib/hooks/useOrganizationInviteLinkCopy';
|
||||||
import {
|
import {
|
||||||
organizationApi,
|
organizationApi,
|
||||||
@@ -254,6 +255,7 @@ export default function OrganizationsPage() {
|
|||||||
toast.showSuccess(
|
toast.showSuccess(
|
||||||
action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
|
action === 'ACCEPT' ? t('successAccepted') : t('successDeclined'),
|
||||||
);
|
);
|
||||||
|
notifyPendingConnectionsChanged();
|
||||||
await loadList();
|
await loadList();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
toast.showError(formatApiMessage(e));
|
toast.showError(formatApiMessage(e));
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import {
|
|||||||
CreditCard,
|
CreditCard,
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { useAuth } from '@/lib/hooks/useAuth';
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
|
import { usePendingConnectionsCount } from '@/lib/hooks/usePendingConnectionsCount';
|
||||||
import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
|
import { canAccessAppointmentsSection, canViewTab } from '@/components/shared/permissions';
|
||||||
import {
|
import {
|
||||||
counterpartOrganizationType,
|
counterpartOrganizationType,
|
||||||
@@ -24,6 +25,8 @@ function Sidebar() {
|
|||||||
const tCommon = useTranslations('common');
|
const tCommon = useTranslations('common');
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const { currentOrganization } = useAuth();
|
const { currentOrganization } = useAuth();
|
||||||
|
const pendingConnectionsCount = usePendingConnectionsCount();
|
||||||
|
|
||||||
|
|
||||||
const menu = useMemo(
|
const menu = useMemo(
|
||||||
() => [
|
() => [
|
||||||
@@ -66,6 +69,8 @@ function Sidebar() {
|
|||||||
{visibleMenu.map((item) => {
|
{visibleMenu.map((item) => {
|
||||||
const Icon = item.icon;
|
const Icon = item.icon;
|
||||||
const isActive = pathname === item.path;
|
const isActive = pathname === item.path;
|
||||||
|
const showPendingBadge =
|
||||||
|
item.path === '/organizations' && pendingConnectionsCount > 0;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
@@ -79,7 +84,15 @@ function Sidebar() {
|
|||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<Icon className="w-[18px] h-[18px] icon-flat" />
|
<Icon className="w-[18px] h-[18px] icon-flat" />
|
||||||
<span className="text-sm">{item.name}</span>
|
<span className="text-sm flex-1">{item.name}</span>
|
||||||
|
{showPendingBadge && (
|
||||||
|
<span
|
||||||
|
className="min-w-[1.25rem] rounded-full bg-badge-warning-bg px-1.5 py-0.5 text-center text-xs font-medium tabular-nums text-badge-warning-fg border border-badge-warning-border"
|
||||||
|
aria-label={`${pendingConnectionsCount} pending connection requests`}
|
||||||
|
>
|
||||||
|
{pendingConnectionsCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
|||||||
@@ -46,6 +46,11 @@ export const organizationApi = {
|
|||||||
return response.data;
|
return response.data;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
pendingIncomingCount: async (): Promise<{ success: boolean; data: { count: number } }> => {
|
||||||
|
const response = await apiClient.get('/organizations/connections/pending-count');
|
||||||
|
return response.data;
|
||||||
|
},
|
||||||
|
|
||||||
listInvitations: async (): Promise<{
|
listInvitations: async (): Promise<{
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: { items: OrganizationInvitationHistoryItemDto[] };
|
data: { items: OrganizationInvitationHistoryItemDto[] };
|
||||||
|
|||||||
48
frontend/src/lib/hooks/usePendingConnectionsCount.ts
Normal file
48
frontend/src/lib/hooks/usePendingConnectionsCount.ts
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import { useCallback, useEffect, useState } from 'react';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import { canViewTab } from '@/components/shared/permissions';
|
||||||
|
import { organizationApi } from '@/lib/api/organization';
|
||||||
|
import { useAuth } from '@/lib/hooks/useAuth';
|
||||||
|
|
||||||
|
/** Tell the sidebar badge to refetch after accept/decline on the organizations page. */
|
||||||
|
export function notifyPendingConnectionsChanged() {
|
||||||
|
window.dispatchEvent(new Event('pending-connections-changed'));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar-only: fetches GET /organizations/connections/pending-count.
|
||||||
|
* Independent from the organizations tab list API.
|
||||||
|
*/
|
||||||
|
export function usePendingConnectionsCount(): number {
|
||||||
|
const pathname = usePathname();
|
||||||
|
const { currentOrganization } = useAuth();
|
||||||
|
const [count, setCount] = useState(0);
|
||||||
|
|
||||||
|
const fetchCount = useCallback(async () => {
|
||||||
|
if (!currentOrganization?.id || !canViewTab(currentOrganization, 'TAB_ORGANIZATIONS_READ')) {
|
||||||
|
setCount(0);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const res = await organizationApi.pendingIncomingCount();
|
||||||
|
setCount(res.data.count);
|
||||||
|
} catch {
|
||||||
|
setCount(0);
|
||||||
|
}
|
||||||
|
}, [currentOrganization]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
void fetchCount();
|
||||||
|
}, [fetchCount, pathname]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const onChanged = () => void fetchCount();
|
||||||
|
window.addEventListener('pending-connections-changed', onChanged);
|
||||||
|
return () => window.removeEventListener('pending-connections-changed', onChanged);
|
||||||
|
}, [fetchCount]);
|
||||||
|
|
||||||
|
return count;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user