3dtours/travelplanning
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: thêm thành viên ngoài hệ thống vào Tour

Browse Source
This commit is contained in:
3dtours
2026-06-20 17:56:56 +07:00
parent ae97f061e8
commit 52706cab7d
17 changed files with 533 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/TourDetailPage.tsx
+30 -25
View File
@@ -1411,7 +1411,7 @@ export const TourDetailPage = ({
const tourInfo = {
title: currentTour?.title || "Hành trình khám phá TP.HCM",
date: tourDateDisplay,
membersCount: currentTour?.participants?.filter((p: any) => p.user)?.length || 0,
membersCount: currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.length || 0,
budget: currentTour?.totalCost ? `${Number(currentTour.totalCost).toLocaleString()} VND` : "0 VND",
coverImage: getMostLikedPhoto(currentTour?.photos || [])?.imageUrl || "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?q=80&w=2070&auto=format&fit=crop"
};
@@ -1507,19 +1507,26 @@ export const TourDetailPage = ({
{/* Member Avatars Stack */}
<div className="flex items-center gap-2 mt-4">
<div className="flex flex-wrap gap-2"> {/* Always show participants */}
{currentTour?.participants?.filter((p: any) => p.user)?.slice(0, 5).map((p: any, i: number) => (
<button
key={p.userId || i}
onClick={() => {
setSelectedMember(p);
setIsMemberDetailOpen(true);
}}
className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
title={p.user?.name || p.userId}
>
<img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
</button>
))}
{currentTour?.participants?.filter((p: any) => p.user || p.displayName)?.slice(0, 5).map((p: any) => {
const memberName = p.user?.name || p.displayName || 'Thành viên';
return (
<button
key={p.id}
onClick={() => {
setSelectedMember(p);
setIsMemberDetailOpen(true);
}}
className="w-10 h-10 rounded-full border-2 border-white bg-blue-100 flex items-center justify-center text-blue-600 font-bold overflow-hidden shadow-lg hover:scale-110 transition-transform"
title={memberName}
>
{p.user ? (
<img src={`https://i.pravatar.cc/100?u=${p.userId}`} alt="Avatar" />
) : (
<span>{memberName.charAt(0)}</span>
)}
</button>
);
})}
{isOwner && !isPublicView && joinRequests.slice(0, 3).map((req: any) => ( // Hide join requests in public view
<div key={req.id} className="relative group">
<div className="w-10 h-10 rounded-full border-2 border-amber-400 bg-amber-50 flex items-center justify-center text-amber-700 font-bold overflow-hidden shadow-lg">
@@ -1589,18 +1596,16 @@ export const TourDetailPage = ({
</div>
)}
</div>
{!isPublicView && ( // Hide add member button in public view
{!isPublicView && canInvite && (
<button
onClick={() => {
if (!currentTour) return;
if (canInvite) setIsAddMemberOpen(true);
setIsAddMemberOpen(true);
}}
disabled={!canInvite}
className={`p-2 rounded-full border backdrop-blur-sm transition-all ml-2 ${
canInvite ? 'bg-white/10 hover:bg-white/20 border-white/20' : 'bg-white/5 border-white/10 opacity-50'
}`}
className="flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/20 bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition-all ml-2 shadow-md hover:scale-105 active:scale-95"
>
<Plus className="w-4 h-4" />
<Plus className="w-3.5 h-3.5" />
Thêm thành viên
</button>
)}
</div>
@@ -2796,11 +2801,11 @@ export const TourDetailPage = ({
<div className="relative w-full max-w-sm bg-white rounded-2xl shadow-2xl p-5">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-full bg-blue-100 border border-blue-200 flex items-center justify-center text-blue-700 font-bold">
{selectedMember.user?.name?.charAt(0) || '?'}
{selectedMember.user?.name?.charAt(0) || selectedMember.displayName?.charAt(0) || '?'}
</div>
<div>
<div className="text-base font-bold text-gray-900">{selectedMember.user?.name || 'Chưa đặt tên'}</div>
<div className="text-xs text-gray-500">{selectedMember.user?.email}</div>
<div className="text-base font-bold text-gray-900">{selectedMember.user?.name || selectedMember.displayName || 'Chưa đặt tên'}</div>
<div className="text-xs text-gray-500">{selectedMember.user?.email || 'Thành viên ngoài hệ thống'}</div>
<div className="text-[10px] font-semibold text-gray-500">{selectedMember.role}</div>
</div>
</div>
@@ -2817,7 +2822,7 @@ export const TourDetailPage = ({
onClick={async () => {
if (!currentTour || !selectedMember) return;
try {
await removeMember(currentTour.id, selectedMember.userId);
await removeMember(currentTour.id, selectedMember.userId || selectedMember.id);
setIsMemberDetailOpen(false);
} catch (e) {
notify({ title: 'Thông báo', message: 'Không thể xóa thành viên', type: 'error' });