123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { ActionIcon, Group, Text, Loader } from '@mantine/core';
|
|
import { showErrorMessage } from '~/utils/utils.ts';
|
|
import { apiGetTeamList, get_team_info } from '~/utils/hms_api.ts';
|
|
import type { DoctorTeamInfo } from '~/utils/models.ts';
|
|
import InfoIcon from 'mdi-react/InfoIcon';
|
|
import { iconMStyle } from '~/styles.ts';
|
|
import { confirmViewTeamMembers } from '~/components/subs/confirms.tsx';
|
|
import { Departments } from '~/utils/hms_enums.ts';
|
|
|
|
const teamCache = new Map<number, DoctorTeamInfo>();
|
|
|
|
interface TeamInfoDisplayProps {
|
|
teamId: number;
|
|
showIcon?: boolean;
|
|
}
|
|
|
|
export function TeamInfoDisplay({ teamId, showIcon = true }: TeamInfoDisplayProps) {
|
|
const [teamInfo, setTeamInfo] = useState<DoctorTeamInfo | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [initialLoad, setInitialLoad] = useState(true);
|
|
|
|
useEffect(() => {
|
|
if (teamCache.has(teamId)) {
|
|
setTeamInfo(teamCache.get(teamId) || null);
|
|
setLoading(false);
|
|
setInitialLoad(false);
|
|
return;
|
|
}
|
|
|
|
fetchTeamInfo();
|
|
}, [teamId]);
|
|
|
|
const fetchTeamInfo = async () => {
|
|
try {
|
|
setLoading(true);
|
|
const detailResponse = await get_team_info(teamId);
|
|
|
|
if (detailResponse.success) {
|
|
const team = detailResponse.data.team;
|
|
teamCache.set(teamId, team);
|
|
setTeamInfo(team);
|
|
} else {
|
|
const listResponse = await apiGetTeamList(-1);
|
|
|
|
if (listResponse.success) {
|
|
const teams = listResponse.data.teams;
|
|
teams.forEach(team => {
|
|
teamCache.set(team.id, team);
|
|
});
|
|
|
|
const team = teams.find(t => t.id === teamId);
|
|
|
|
if (team) {
|
|
setTeamInfo(team);
|
|
} else {
|
|
console.warn(`Team with ID ${teamId} not found`);
|
|
}
|
|
} else {
|
|
showErrorMessage(listResponse.message, "Failed to load team information");
|
|
}
|
|
}
|
|
} catch (error) {
|
|
showErrorMessage("Error loading team information", "Error");
|
|
console.error("Error fetching team information:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
setInitialLoad(false);
|
|
}
|
|
};
|
|
|
|
const handleViewTeamDetails = () => {
|
|
if (!teamInfo) {
|
|
showErrorMessage("Team information not available", "Error");
|
|
return;
|
|
}
|
|
|
|
confirmViewTeamMembers(teamInfo);
|
|
};
|
|
|
|
if (initialLoad) {
|
|
return <Loader size="xs" />;
|
|
}
|
|
|
|
if (!teamInfo) {
|
|
return (
|
|
<Group gap="xs">
|
|
<Text>ID: {teamId}</Text>
|
|
{showIcon && (
|
|
<ActionIcon
|
|
size="sm"
|
|
onClick={fetchTeamInfo}
|
|
loading={loading}
|
|
title="Refresh team information"
|
|
>
|
|
<InfoIcon style={iconMStyle} />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Group gap="xs">
|
|
<Text
|
|
style={{ cursor: 'pointer' }}
|
|
onClick={handleViewTeamDetails}
|
|
title="Click to view team details"
|
|
>
|
|
{teamInfo.department.replace(/_/g, ' ')}
|
|
</Text>
|
|
{showIcon && (
|
|
<ActionIcon
|
|
size="sm"
|
|
onClick={handleViewTeamDetails}
|
|
title="View team details"
|
|
>
|
|
<InfoIcon style={iconMStyle} />
|
|
</ActionIcon>
|
|
)}
|
|
</Group>
|
|
);
|
|
}
|