feat: thêm nút tìm kiếm địa điểm cho phần tạo tour, phần thêm địa điểm
This commit is contained in:
@@ -316,8 +316,61 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
|
||||
</div>
|
||||
|
||||
{/* Mini Map Picker */}
|
||||
<div className="h-48 w-full rounded-2xl overflow-hidden mb-6 border border-gray-100 relative shadow-inner group">
|
||||
<MapContainer center={currentCoords} zoom={13} className="h-full w-full">
|
||||
<div className="h-64 w-full rounded-3xl overflow-hidden mb-6 border border-gray-100 relative shadow-xl group">
|
||||
{/* Map Search Bar Overlay - Tích hợp tìm kiếm trực tiếp trên bản đồ */}
|
||||
<div className="absolute top-3 left-3 right-3 z-[1001] pointer-events-none">
|
||||
<div className="relative max-w-sm pointer-events-auto">
|
||||
<div className="relative group">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Tìm địa điểm trên bản đồ..."
|
||||
className="w-full pl-11 pr-10 py-3 bg-white/95 backdrop-blur-md border border-white/20 rounded-2xl shadow-lg outline-none focus:ring-2 focus:ring-blue-500 transition-all text-sm font-bold text-gray-800"
|
||||
value={formData.name}
|
||||
onChange={e => handleSearchLocation(e.target.value)}
|
||||
/>
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-blue-500" />
|
||||
{isSearching ? (
|
||||
<Loader2 className="absolute right-4 top-1/2 -translate-y-1/2 w-4 h-4 animate-spin text-blue-500" />
|
||||
) : formData.name && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); setHasNoResults(false); }}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 p-1.5 hover:bg-gray-100 rounded-full text-gray-400 transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Dropdown kết quả tìm kiếm ngay trong khung bản đồ */}
|
||||
{(searchResults.length > 0 || hasNoResults) && (
|
||||
<div className="absolute left-0 right-0 mt-2 bg-white/95 backdrop-blur-md border border-gray-100 rounded-2xl shadow-2xl overflow-hidden max-h-40 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
|
||||
{hasNoResults ? (
|
||||
<div className="px-4 py-4 text-center text-gray-400 text-xs italic">Không tìm thấy địa điểm phù hợp...</div>
|
||||
) : (
|
||||
searchResults.map((result, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={() => selectSearchResult(result)}
|
||||
className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-colors flex flex-col gap-0.5"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="font-bold text-xs text-gray-900 truncate">{result.namedetails?.name || result.display_name.split(',')[0]}</div>
|
||||
{result.type && (
|
||||
<span className="text-[8px] font-black uppercase text-blue-400 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 shrink-0">{result.type}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 truncate leading-tight">{result.display_name}</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<MapContainer center={currentCoords} zoom={13} className="h-full w-full" zoomControl={false}>
|
||||
<TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
|
||||
<Marker position={currentCoords} />
|
||||
<MapPicker center={currentCoords} onPick={handlePickLocation} />
|
||||
@@ -339,57 +392,15 @@ export const AddLocationModal = ({ isOpen, onClose, tourId, initialLegId, editin
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div className="relative">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">Tên địa điểm</label>
|
||||
<div className="relative group">
|
||||
<input
|
||||
required
|
||||
placeholder="Gõ để tìm kiếm địa điểm..."
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
||||
value={formData.name}
|
||||
onChange={e => handleSearchLocation(e.target.value)}
|
||||
/>
|
||||
<div className="absolute right-4 top-1/2 -translate-y-1/2">
|
||||
{isSearching ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin text-blue-500" />
|
||||
) : formData.name ? (
|
||||
<button type="button" onClick={() => { setFormData({...formData, name: ''}); setSearchResults([]); setHasNoResults(false); }} className="hover:text-red-500 transition-colors">
|
||||
<X className="w-4 h-4 text-gray-400" />
|
||||
</button>
|
||||
) : (
|
||||
<Search className="w-4 h-4 text-gray-300" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{(searchResults.length > 0 || hasNoResults) && (
|
||||
<div className="absolute z-[5000] left-0 right-0 mt-2 bg-white border border-gray-200 rounded-2xl shadow-2xl overflow-hidden max-h-64 overflow-y-auto animate-in slide-in-from-top-2 duration-200">
|
||||
{hasNoResults ? (
|
||||
<div className="px-4 py-6 text-center text-gray-400 text-sm italic">
|
||||
Không tìm thấy địa điểm nào phù hợp...
|
||||
</div>
|
||||
) : (
|
||||
searchResults.map((result, idx) => (
|
||||
<button
|
||||
key={idx}
|
||||
type="button"
|
||||
onClick={(e) => { e.preventDefault(); e.stopPropagation(); selectSearchResult(result); }}
|
||||
className="w-full text-left px-4 py-3 hover:bg-blue-50 border-b border-gray-50 last:border-0 transition-all flex flex-col gap-0.5"
|
||||
>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="font-bold text-sm text-gray-900 line-clamp-1">
|
||||
{result.namedetails?.name || result.display_name.split(',')[0]}
|
||||
</div>
|
||||
{result.type && (
|
||||
<span className="text-[9px] font-black uppercase text-blue-400 bg-blue-50 px-1.5 py-0.5 rounded border border-blue-100 shrink-0">{result.type}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="text-[10px] text-gray-500 line-clamp-2 leading-tight">{result.display_name}</div>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<input
|
||||
required
|
||||
placeholder="Tên địa điểm..."
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl outline-none focus:ring-2 focus:ring-blue-500 transition-all font-bold"
|
||||
value={formData.name}
|
||||
onChange={e => setFormData({...formData, name: e.target.value})}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">Địa chỉ</label>
|
||||
|
||||
Reference in New Issue
Block a user