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

feat: cho phép người dùng chỉnh sửa thông tin ảnh đã upload

Browse Source
This commit is contained in:
3dtours
2026-06-20 07:37:01 +07:00
parent 4373ed684a
commit 9da8a9494d
18 changed files with 987 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/MyPhotosPage.tsx
+193 -19
View File
@@ -1,5 +1,5 @@
import React, { useEffect, useState, useMemo } from 'react';
import { ChevronLeft, Image as ImageIcon, Download, Calendar, MapPin, Loader2, Filter, X, Trash2 } from 'lucide-react';
import { ChevronLeft, Image as ImageIcon, Download, Calendar, MapPin, Loader2, Filter, X, Trash2, Edit } from 'lucide-react';
import { useNotification } from '@/hooks/useNotification';
import { useConfirm } from '@/hooks/useConfirm';
@@ -13,6 +13,66 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
const notify = useNotification();
const confirm = useConfirm();
const [isEditing, setIsEditing] = useState(false);
const [editTitle, setEditTitle] = useState('');
const [editDescription, setEditDescription] = useState('');
const [editLat, setEditLat] = useState<number | ''>('');
const [editLng, setEditLng] = useState<number | ''>('');
const [isSavingEdit, setIsSavingEdit] = useState(false);
useEffect(() => {
if (selectedPhotoForDisplay) {
setEditTitle(selectedPhotoForDisplay.metadata?.title || '');
setEditDescription(selectedPhotoForDisplay.metadata?.description || '');
setEditLat(selectedPhotoForDisplay.metadata?.lat ?? '');
setEditLng(selectedPhotoForDisplay.metadata?.lng ?? '');
setIsEditing(false);
}
}, [selectedPhotoForDisplay]);
const handleSaveEdit = async () => {
if (editLat !== '' && (isNaN(editLat) || editLat < -90 || editLat > 90)) {
notify({ title: 'Lỗi', message: 'Vĩ độ không hợp lệ (-90 đến 90).', type: 'error' });
return;
}
if (editLng !== '' && (isNaN(editLng) || editLng < -180 || editLng > 180)) {
notify({ title: 'Lỗi', message: 'Kinh độ không hợp lệ (-180 đến 180).', type: 'error' });
return;
}
setIsSavingEdit(true);
try {
const response = await fetch(`/api/v1/photos/${selectedPhotoForDisplay.id}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify({
title: editTitle,
description: editDescription,
latitude: editLat === '' ? undefined : editLat,
longitude: editLng === '' ? undefined : editLng
})
});
if (!response.ok) throw new Error('Failed to update photo info');
const updatedPhoto = await response.json();
notify({ title: 'Thành công', message: 'Thông tin ảnh đã được cập nhật.', type: 'success' });
// Update photos list
setPhotos(prev => prev.map(p => p.id === updatedPhoto.id ? { ...p, metadata: updatedPhoto.metadata } : p));
// Update selectedPhotoForDisplay
setSelectedPhotoForDisplay((prev: any) => prev ? ({ ...prev, metadata: updatedPhoto.metadata }) : null);
setIsEditing(false);
} catch (error) {
notify({ title: 'Lỗi', message: 'Không thể cập nhật thông tin ảnh. Vui lòng thử lại.', type: 'error' });
} finally {
setIsSavingEdit(false);
}
};
useEffect(() => {
const fetchPhotos = async () => {
try {
@@ -231,26 +291,140 @@ export const MyPhotosPage = ({ onBack }: { onBack: () => void }) => {
<Trash2 className="w-5 h-5" />
</button>
<div className="mt-6 w-full flex items-center justify-between px-2">
<div className="space-y-1">
<div className="flex items-center gap-2 text-gray-900 font-bold">
<MapPin className="w-4 h-4 text-blue-500" />
{selectedPhotoForDisplay.tour?.title || 'Không rõ hành trình'}
<div className="mt-6 w-full flex flex-col gap-4 px-2">
{isEditing ? (
<div className="space-y-3 bg-gray-50 border border-gray-150 p-4 rounded-2xl w-full">
<h4 className="text-xs font-black uppercase tracking-wider text-blue-605">Chỉnh sửa thông tin ảnh</h4>
<div className="space-y-2">
<div>
<label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Tiêu đề</label>
<input
type="text"
value={editTitle}
onChange={(e) => setEditTitle(e.target.value)}
placeholder="Nhập tiêu đề..."
className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Mô tả</label>
<textarea
value={editDescription}
onChange={(e) => setEditDescription(e.target.value)}
placeholder="Nhập mô tả..."
rows={2}
className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent resize-none"
/>
</div>
<div className="grid grid-cols-2 gap-2">
<div>
<label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Vĩ độ</label>
<input
type="number"
step="any"
value={editLat}
onChange={(e) => setEditLat(e.target.value === '' ? '' : parseFloat(e.target.value))}
placeholder="Vĩ độ..."
className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
</div>
<div>
<label className="block text-[10px] uppercase font-bold tracking-wider text-gray-500 mb-1">Kinh độ</label>
<input
type="number"
step="any"
value={editLng}
onChange={(e) => setEditLng(e.target.value === '' ? '' : parseFloat(e.target.value))}
placeholder="Kinh độ..."
className="w-full bg-white border border-gray-200 text-gray-800 rounded-xl px-3 py-2 text-xs focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
</div>
<div className="flex justify-end gap-2 mt-2">
<button
onClick={() => setIsEditing(false)}
disabled={isSavingEdit}
className="px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg text-xs font-bold transition-all"
>
Hủy
</button>
<button
onClick={handleSaveEdit}
disabled={isSavingEdit}
className="flex items-center gap-1 px-4 py-1.5 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white rounded-lg text-xs font-bold transition-all"
>
{isSavingEdit ? (
<>
<Loader2 className="w-3.5 h-3.5 animate-spin" />
Đang lưu...
</>
) : (
'Lưu lại'
)}
</button>
</div>
</div>
<div className="flex items-center gap-2 text-gray-400 text-xs font-medium uppercase tracking-wider">
<Calendar className="w-3.5 h-3.5" />
{new Date(selectedPhotoForDisplay.capturedAt).toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
) : (
<div className="flex flex-col gap-3 w-full">
<div className="flex justify-between items-start gap-4">
<div className="flex-1">
{selectedPhotoForDisplay.metadata?.title ? (
<h3 className="text-base font-extrabold text-gray-900 break-words">
{selectedPhotoForDisplay.metadata.title}
</h3>
) : (
<span className="text-xs text-gray-400 italic block mb-1">Chưa có tiêu đề</span>
)}
{selectedPhotoForDisplay.metadata?.description ? (
<p className="text-xs text-gray-600 leading-relaxed mt-1 break-words">
{selectedPhotoForDisplay.metadata.description}
</p>
) : (
<span className="text-[11px] text-gray-400 italic block mt-1">Chưa có mô tả</span>
)}
</div>
<button
onClick={() => setIsEditing(true)}
className="p-2 bg-gray-100 hover:bg-gray-200 border border-gray-200 rounded-xl text-gray-500 hover:text-gray-700 transition-all shrink-0"
title="Chỉnh sửa thông tin"
>
<Edit className="w-4 h-4" />
</button>
</div>
<div className="flex flex-wrap items-center justify-between gap-4 border-t border-gray-100 pt-3">
<div className="space-y-1">
<div className="flex items-center gap-2 text-gray-900 font-bold text-xs">
<MapPin className="w-4 h-4 text-blue-500" />
{selectedPhotoForDisplay.tour?.title || 'Không rõ hành trình'}
{selectedPhotoForDisplay.metadata?.lat && selectedPhotoForDisplay.metadata?.lng && (
<span className="text-[11px] text-gray-400 font-normal ml-1">
({selectedPhotoForDisplay.metadata.lat.toFixed(4)}, {selectedPhotoForDisplay.metadata.lng.toFixed(4)})
</span>
)}
</div>
<div className="flex items-center gap-2 text-gray-450 text-[10px] font-bold uppercase tracking-wider">
<Calendar className="w-3.5 h-3.5" />
{new Date(selectedPhotoForDisplay.capturedAt).toLocaleDateString('vi-VN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
</div>
</div>
{selectedPhotoForDisplay.originalUrl && (
<a
href={selectedPhotoForDisplay.originalUrl}
download
className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold uppercase tracking-widest text-[9px] transition-all shadow-md active:scale-95 shrink-0"
>
<Download className="w-3.5 h-3.5" /> Tải ảnh gốc
</a>
)}
</div>
</div>
</div>
{selectedPhotoForDisplay.originalUrl && (
<a
href={selectedPhotoForDisplay.originalUrl}
download
className="flex items-center gap-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all shadow-lg shadow-blue-900/20 active:scale-95"
>
<Download className="w-4 h-4" /> Tải xuống ảnh gốc
</a>
)}
</div>
</div>