319 lines
19 KiB
TypeScript
319 lines
19 KiB
TypeScript
|
import React, { useState, useEffect } from 'react';
|
||
|
|
import type { ProjectDetails, Subset } from '../types';
|
||
|
|
import { getSortedKeys, sortEntriesByKey } from '../utils/sort-utils';
|
||
|
|
import ConfirmModal from './ConfirmModal';
|
||
|
|
|
||
|
|
// Language code to TMS locale mapping (same as backend)
|
||
|
|
const LANG_TO_LOCALE: Record<string, string> = {
|
||
|
|
US: 'en_US',
|
||
|
|
FR: 'fr_FR',
|
||
|
|
ES: 'es_ES',
|
||
|
|
DE: 'de_DE',
|
||
|
|
TW: 'zh_TW',
|
||
|
|
JP: 'ja_JP',
|
||
|
|
TH: 'th_TH',
|
||
|
|
KR: 'ko_KR',
|
||
|
|
KO: 'ko_KR',
|
||
|
|
};
|
||
|
|
|
||
|
|
function getTmsUrl(projectId: number, lang?: string): string {
|
||
|
|
const locale = lang ? LANG_TO_LOCALE[lang.toUpperCase()] : null;
|
||
|
|
const baseUrl = `https://tms.kiledel.com/project/${projectId}`;
|
||
|
|
return locale ? `${baseUrl}?l=${locale}` : baseUrl;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ProjectInfoModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
projectDetails: ProjectDetails | null;
|
||
|
|
isLoading: boolean;
|
||
|
|
onDeleteMember?: (projectId: number, email: string, lang?: string) => Promise<void>;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProjectInfoModal: React.FC<ProjectInfoModalProps> = ({
|
||
|
|
isOpen,
|
||
|
|
onClose,
|
||
|
|
projectDetails,
|
||
|
|
isLoading,
|
||
|
|
onDeleteMember,
|
||
|
|
}) => {
|
||
|
|
const [activeSubsetIndex, setActiveSubsetIndex] = useState(0);
|
||
|
|
const [deletingEmail, setDeletingEmail] = useState<string | null>(null);
|
||
|
|
const [confirmDeleteEmail, setConfirmDeleteEmail] = useState<string | null>(null);
|
||
|
|
const [emailToUsername, setEmailToUsername] = useState<Record<string, string>>({});
|
||
|
|
const [isLoadingUsernames, setIsLoadingUsernames] = useState(false);
|
||
|
|
|
||
|
|
// Fetch usernames when project details change
|
||
|
|
useEffect(() => {
|
||
|
|
if (!projectDetails || !isOpen) return;
|
||
|
|
|
||
|
|
const emails = Object.keys(projectDetails.members);
|
||
|
|
if (emails.length === 0) return;
|
||
|
|
|
||
|
|
const fetchUsernames = async () => {
|
||
|
|
setIsLoadingUsernames(true);
|
||
|
|
try {
|
||
|
|
console.log('Fetching usernames for emails:', emails);
|
||
|
|
const response = await fetch('/api/user/resolve-emails', {
|
||
|
|
method: 'POST',
|
||
|
|
headers: { 'Content-Type': 'application/json' },
|
||
|
|
body: JSON.stringify({ emails }),
|
||
|
|
});
|
||
|
|
const data = await response.json();
|
||
|
|
console.log('Resolve emails response:', data);
|
||
|
|
if (data.success && data.data) {
|
||
|
|
setEmailToUsername(data.data);
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
console.error('Failed to fetch usernames:', error);
|
||
|
|
} finally {
|
||
|
|
setIsLoadingUsernames(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
fetchUsernames();
|
||
|
|
}, [projectDetails?.projectId, isOpen]); // Only re-fetch when project changes
|
||
|
|
|
||
|
|
const handleDeleteMember = async (email: string) => {
|
||
|
|
if (!projectDetails || !onDeleteMember) return;
|
||
|
|
|
||
|
|
setDeletingEmail(email);
|
||
|
|
setConfirmDeleteEmail(null);
|
||
|
|
try {
|
||
|
|
await onDeleteMember(projectDetails.projectId, email, projectDetails.lang);
|
||
|
|
} finally {
|
||
|
|
setDeletingEmail(null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||
|
|
<div className="bg-slate-800 rounded-2xl shadow-2xl border border-slate-700 max-w-5xl w-full max-h-[90vh] overflow-hidden flex flex-col">
|
||
|
|
{/* Header */}
|
||
|
|
<div className="flex items-center justify-between p-6 border-b border-slate-700">
|
||
|
|
<h2 className="text-2xl font-bold text-white">
|
||
|
|
Thông tin Project TMS
|
||
|
|
{projectDetails && (
|
||
|
|
<>
|
||
|
|
{' '}
|
||
|
|
<span className="text-slate-400">(</span>
|
||
|
|
<a
|
||
|
|
href={getTmsUrl(projectDetails.projectId, projectDetails.lang)}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
className="text-cyan-400 hover:text-cyan-300 hover:underline transition-colors text-lg font-normal"
|
||
|
|
>
|
||
|
|
{getTmsUrl(projectDetails.projectId, projectDetails.lang)}
|
||
|
|
</a>
|
||
|
|
<span className="text-slate-400">)</span>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</h2>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="text-slate-400 hover:text-white transition-colors p-2 hover:bg-slate-700 rounded-lg"
|
||
|
|
>
|
||
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Content */}
|
||
|
|
<div className="flex-1 overflow-y-auto p-6 space-y-6">
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="text-center py-12">
|
||
|
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-500"></div>
|
||
|
|
<p className="text-slate-400 mt-4">Đang tải thông tin...</p>
|
||
|
|
</div>
|
||
|
|
) : projectDetails ? (
|
||
|
|
<>
|
||
|
|
{/* Project Members Section - Only show users with both username and email */}
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
|
||
|
|
Project Members
|
||
|
|
{isLoadingUsernames && (
|
||
|
|
<span className="text-xs text-slate-400 animate-pulse">(đang tải usernames...)</span>
|
||
|
|
)}
|
||
|
|
</h3>
|
||
|
|
{(() => {
|
||
|
|
// Filter to only show users with valid TMS username, then sort by username
|
||
|
|
const membersWithUsername = Object.keys(projectDetails.members)
|
||
|
|
.filter(email => {
|
||
|
|
const username = emailToUsername[email];
|
||
|
|
return username && username !== email;
|
||
|
|
})
|
||
|
|
.sort((a, b) => {
|
||
|
|
const usernameA = emailToUsername[a] || '';
|
||
|
|
const usernameB = emailToUsername[b] || '';
|
||
|
|
return usernameA.localeCompare(usernameB);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (membersWithUsername.length === 0) {
|
||
|
|
return <p className="text-slate-400">Không có member TMS nào.</p>;
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="max-h-80 overflow-y-auto pr-2">
|
||
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
|
||
|
|
{membersWithUsername.map((email) => {
|
||
|
|
const username = emailToUsername[email];
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={email}
|
||
|
|
className="bg-slate-700/50 text-slate-200 px-4 py-3 rounded-lg text-sm flex items-center justify-between gap-2 group"
|
||
|
|
title={email}
|
||
|
|
>
|
||
|
|
<div className="truncate flex-1">
|
||
|
|
<div className="font-medium text-indigo-300 truncate">{username}</div>
|
||
|
|
<div className="truncate text-xs text-slate-400">{email}</div>
|
||
|
|
</div>
|
||
|
|
{onDeleteMember && (
|
||
|
|
<button
|
||
|
|
onClick={() => setConfirmDeleteEmail(email)}
|
||
|
|
disabled={deletingEmail === email}
|
||
|
|
className="text-slate-400 hover:text-rose-400 transition-colors p-1 rounded hover:bg-slate-600 flex-shrink-0"
|
||
|
|
title="Xóa khỏi Project"
|
||
|
|
>
|
||
|
|
{deletingEmail === email ? (
|
||
|
|
<svg className="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
|
||
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
||
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||
|
|
</svg>
|
||
|
|
) : (
|
||
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
|
|
</svg>
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})()}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Subsets Section */}
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold text-white mb-4">Subsets</h3>
|
||
|
|
{projectDetails.subsets.length === 0 ? (
|
||
|
|
<p className="text-slate-400">Không có subset nào.</p>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
{/* Subset Tabs */}
|
||
|
|
<div className="flex gap-2 mb-4 overflow-x-auto pb-2">
|
||
|
|
{projectDetails.subsets.map((subset, index) => (
|
||
|
|
<button
|
||
|
|
key={subset.id}
|
||
|
|
onClick={() => setActiveSubsetIndex(index)}
|
||
|
|
className={`px-4 py-2 rounded-lg font-medium whitespace-nowrap transition-colors ${activeSubsetIndex === index
|
||
|
|
? 'bg-indigo-600 text-white'
|
||
|
|
: 'bg-slate-700 text-slate-300 hover:bg-slate-600'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{subset.title}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Active Subset Content */}
|
||
|
|
{projectDetails.subsets[activeSubsetIndex] && (
|
||
|
|
<div className="bg-slate-700/30 rounded-lg overflow-hidden max-h-80 overflow-y-auto">
|
||
|
|
<table className="w-full">
|
||
|
|
<thead className="sticky top-0 bg-slate-700">
|
||
|
|
<tr>
|
||
|
|
<th className="text-left p-4 text-slate-300 font-semibold">Member</th>
|
||
|
|
<th className="text-left p-4 text-slate-300 font-semibold">Access</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{(() => {
|
||
|
|
// Filter subset members to only those with valid TMS username, then sort by username
|
||
|
|
const subsetMembers = Object.entries(projectDetails.subsets[activeSubsetIndex].members)
|
||
|
|
.filter(([email]) => {
|
||
|
|
const username = emailToUsername[email];
|
||
|
|
return username && username !== email;
|
||
|
|
})
|
||
|
|
.sort((a, b) => {
|
||
|
|
const usernameA = emailToUsername[a[0]] || '';
|
||
|
|
const usernameB = emailToUsername[b[0]] || '';
|
||
|
|
return usernameA.localeCompare(usernameB);
|
||
|
|
});
|
||
|
|
|
||
|
|
if (subsetMembers.length === 0) {
|
||
|
|
return (
|
||
|
|
<tr>
|
||
|
|
<td colSpan={2} className="p-4 text-center text-slate-400">
|
||
|
|
Không có member TMS nào trong subset này.
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return subsetMembers.map(
|
||
|
|
([email, role]) => {
|
||
|
|
const username = emailToUsername[email];
|
||
|
|
return (
|
||
|
|
<tr key={email} className="border-t border-slate-700/50">
|
||
|
|
<td className="p-4 text-slate-200" title={email}>{username}</td>
|
||
|
|
<td className="p-4">
|
||
|
|
<span
|
||
|
|
className={`px-3 py-1 rounded-full text-xs font-medium ${role === 'RW'
|
||
|
|
? 'bg-green-500/20 text-green-400'
|
||
|
|
: 'bg-blue-500/20 text-blue-400'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{role}
|
||
|
|
</span>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
})()}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<p className="text-slate-400 text-center py-12">Không có dữ liệu.</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Footer */}
|
||
|
|
<div className="flex justify-end p-6 border-t border-slate-700">
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="px-6 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition-colors"
|
||
|
|
>
|
||
|
|
Đóng
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Confirm Delete Modal */}
|
||
|
|
<ConfirmModal
|
||
|
|
isOpen={!!confirmDeleteEmail}
|
||
|
|
title="Xác nhận xoá"
|
||
|
|
message={`Bạn có chắc muốn xoá "${confirmDeleteEmail}" khỏi Project Members?`}
|
||
|
|
confirmText="Xoá"
|
||
|
|
cancelText="Huỷ"
|
||
|
|
onConfirm={() => confirmDeleteEmail && handleDeleteMember(confirmDeleteEmail)}
|
||
|
|
onCancel={() => setConfirmDeleteEmail(null)}
|
||
|
|
isLoading={!!deletingEmail}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProjectInfoModal;
|