fix: lỗi bong bóng Tour vẫn xuất hiện và điểm bắt đầu là điểm xuất phát

This commit is contained in:
2026-06-17 17:29:40 +07:00
parent 05dc80bb6d
commit 1933b58f84
3 changed files with 57 additions and 20 deletions
+25 -3
View File
@@ -45,7 +45,7 @@ export const ItineraryTimeline = ({
onSuccess,
isPublicView = false
}: {
onAddLocation?: (legId: string) => void,
onAddLocation?: (legId: string, isStart?: boolean) => void,
onEditLocation?: (location: any) => void,
onQuickNote?: (name: string) => void,
onSuccess?: () => void,
@@ -301,6 +301,27 @@ export const ItineraryTimeline = ({
<div className={`absolute left-6 top-16 ${legIdx === legs.length - 1 ? 'bottom-0' : 'bottom-[-3.5rem]'} w-0.5 bg-blue-100 -z-0`} />
<div className="ml-2">
{/* Nút thêm nhanh "Điểm xuất phát" cho Chặng 1 nếu chưa có */}
{legIdx === 0 && !leg.locations.some(loc => loc.plannedStart && new Date(loc.plannedStart).getTime() === 0) && (
<div className="relative flex group mb-6 opacity-80 hover:opacity-100 transition-opacity">
<div className="z-10 mt-1.5 mr-4">
<div className="w-8 h-8 bg-white rounded-full border-2 border-dashed border-blue-200 flex items-center justify-center text-blue-400">
<MapPin className="w-4 h-4" />
</div>
</div>
<button
onClick={() => onAddLocation?.(leg.id, true)}
className="flex-1 bg-blue-50/20 p-4 rounded-xl border border-dashed border-blue-100 hover:border-blue-400 hover:bg-blue-50 transition-all flex items-center justify-between group"
>
<div className="text-left">
<span className="inline-block px-2 py-0.5 bg-blue-50 text-blue-600 text-[10px] font-bold rounded-md mb-1 uppercase tracking-wider">Điểm xuất phát</span>
<h3 className="font-bold text-gray-400 text-sm italic">Nhấn đ ghim điểm bắt đu cho Tour...</h3>
</div>
<Plus className="w-5 h-5 text-blue-500 group-hover:scale-110 transition-transform" />
</button>
</div>
)}
{leg.locations.map((location, idx) => {
// Tìm vị trí của điểm này trong toàn bộ hành trình
const globalIdx = allLocations.findIndex(loc => loc.id === location.id);
@@ -316,8 +337,9 @@ export const ItineraryTimeline = ({
const locationExpense = leg.expenses?.find((e: any) => e.locationId === location.id);
const isStartPoint = legs[0]?.id === leg.id && idx === 0;
const isEndPoint = legs[legs.length - 1]?.id === leg.id && idx === leg.locations.length - 1;
// Nhận diện điểm mốc dựa trên timestamp đặc biệt (0) thay vì chỉ số mảng
const isStartPoint = location.plannedStart && new Date(location.plannedStart).getTime() === 0;
const isEndPoint = location.plannedEnd && new Date(location.plannedEnd).getTime() === 0;
return (
<div key={location.id}>