feat: thêm tính năng ghi note cho Tour

2026-06-17 12:28:24 +07:00
parent e66f242c2c
commit 7ad785fed9
6 changed files with 681 additions and 16 deletions
@@ -4,6 +4,7 @@ import { ExploreMap } from './pages/ExploreMap';
 import { TourDetailPage } from './pages/TourDetailPage';
 import { SignupPage } from './pages/SignupPage';
 import { MyPhotosPage } from './pages/MyPhotosPage';
+import { MyNotePage } from './pages/MyNotePage';
 import { useTourStore } from './store/useTourStore';
 import { ConfirmProvider } from './hooks/useConfirm';
 import { NotificationProvider } from './hooks/useNotification';
@@ -13,7 +14,7 @@ function App() {
  const viewTourId = params.get('viewTour');

  const [user, setUser] = useState<any>(null);
-  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos'>(viewTourId ? 'tourDetail' : 'landing');
+  const [currentPage, setCurrentPage] = useState<'landing' | 'explore' | 'tourDetail' | 'signup' | 'myPhotos' | 'notes'>(viewTourId ? 'tourDetail' : 'landing');
  const [currentTourId, setCurrentTourId] = useState<string | null>(viewTourId);
  const [isPublicTourView, setIsPublicTourView] = useState(!!viewTourId);

@@ -94,10 +95,15 @@ function App() {
              tourId={currentTourId!} 
              onBack={handleBackFromTourDetail}
              isPublicView={isPublicTourView}
+              onOpenNotes={() => setCurrentPage('notes')}
            />
          );
        }

+        if (currentPage === 'notes') {
+          return <MyNotePage onBack={() => setCurrentPage('tourDetail')} />;
+        }
+
        if (currentPage === 'explore') {
          return (
            <ExploreMap 
@@ -0,0 +1,242 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { ChevronLeft, FileText, Plus, Search, Trash2, Loader2, Save, Calendar } from 'lucide-react';
+import ReactQuill, { Quill } from 'react-quill-new'; // Nếu react-quill gặp lỗi với React 18, hãy dùng react-quill-new
+import 'react-quill-new/dist/quill.snow.css';
+
+// Cấu hình Lucide Icons cho Quill
+const Icons = Quill.import('ui/icons');
+Icons['bold'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/><path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z"/></svg>';
+Icons['italic'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="19" y1="4" x2="10" y2="4"/><line x1="14" y1="20" x2="5" y2="20"/><line x1="15" y1="4" x2="9" y2="20"/></svg>';
+Icons['underline'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3"/><line x1="4" y1="21" x2="20" y2="21"/></svg>';
+Icons['strike'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M16 4H9a3 3 0 0 0-2.83 4"/><path d="M14 12a4 4 0 0 1 0 8H6"/><line x1="4" y1="12" x2="20" y2="12"/></svg>';
+Icons['link'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>';
+Icons['image'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>';
+Icons['clean'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.9-9.9c1-1 2.5-1 3.4 0l4.4 4.4c1 1 1 2.5 0 3.4L11 21Z"/><path d="m22 21-5.9-5.9"/><path d="M16 11l-5 5"/></svg>';
+Icons['table'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h18v18H3z"/><path d="M3 9h18"/><path d="M3 15h18"/><path d="M9 3v18"/><path d="M15 3v18"/></svg>';
+Icons['header']['1'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="m17 12 3-2v8"/></svg>';
+Icons['header']['2'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h8"/><path d="M4 18V6"/><path d="M12 18V6"/><path d="M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1"/></svg>';
+Icons['list']['bullet'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>';
+Icons['list']['check'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></svg>';
+Icons['align'][''] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="17" y1="18" x2="3" y2="18"/></svg>';
+Icons['align']['center'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="10" x2="6" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="18" y1="18" x2="6" y2="18"/></svg>';
+Icons['align']['right'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="10" x2="7" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="7" y2="18"/></svg>';
+Icons['align']['justify'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="21" y1="10" x2="3" y2="10"/><line x1="21" y1="6" x2="3" y2="6"/><line x1="21" y1="14" x2="3" y2="14"/><line x1="21" y1="18" x2="3" y2="18"/></svg>';
+Icons['indent']['+1'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="11 17 16 12 11 7"/><line x1="18" y1="12" x2="3" y2="12"/></svg>';
+Icons['indent']['-1'] = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 17 3 12 8 7"/><line x1="21" y1="12" x2="6" y2="12"/></svg>';
+
+interface Note {
+  id: string;
+  title: string;
+  content: string;
+  createdAt: string;
+}
+
+export const MyNotePage = ({ onBack }: { onBack: () => void }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [notes, setNotes] = useState<Note[]>([]);
+  const [isCreating, setIsCreating] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  
+  const quillRef = useRef<ReactQuill>(null);
+
+  // State cho form ghi chú
+  const [noteForm, setNoteForm] = useState({ title: '', content: '' });
+
+  // Khôi phục ghi chú từ localStorage khi load trang
+  useEffect(() => {
+    const saved = localStorage.getItem('my_journey_notes');
+    if (saved) {
+      try { 
+        const parsed = JSON.parse(saved);
+        if (Array.isArray(parsed)) {
+          setNotes(parsed);
+        }
+      } catch (e) { console.error("Lỗi parse notes:", e); }
+    }
+  }, []);
+
+  // Tự động lưu ghi chú vào localStorage khi có thay đổi
+  useEffect(() => {
+    localStorage.setItem('my_journey_notes', JSON.stringify(notes));
+  }, [notes]);
+
+  // Cấu hình các công cụ định dạng cho ReactQuill
+  const quillModules = useMemo(() => ({
+    table: true,
+    toolbar: {
+      container: [
+        [{ 'header': 1 }, { 'header': 2 }],
+        ['bold', 'italic', 'underline', 'strike'],
+        [{ 'align': [] }],
+        [{ 'indent': '-1'}, { 'indent': '+1' }],
+        [{ 'list': 'bullet' }, { 'list': 'check' }],
+        ['link', 'image', 'table', 'clean'],
+      ],
+      handlers: {
+        table: function() {
+          const rows = prompt('Nhập số hàng:', '3');
+          const cols = prompt('Nhập số cột:', '3');
+          if (rows && cols) {
+            const quill = (quillRef.current as any)?.getEditor();
+            if (quill) {
+              quill.getModule('table').insertTable(parseInt(rows), parseInt(cols));
+            }
+          }
+        }
+      }
+    },
+  }), []);
+
+  const handleSaveNote = () => {
+    if (!noteForm.title.trim() && !noteForm.content.trim()) return;
+    
+    const note: Note = {
+      id: Date.now().toString(),
+      title: noteForm.title || 'Ghi chú không tiêu đề',
+      content: noteForm.content,
+      createdAt: new Date().toISOString(),
+    };
+
+    setNotes([note, ...notes]);
+    setIsCreating(false);
+    setNoteForm({ title: '', content: '' });
+  };
+
+  const handleDeleteNote = (id: string) => {
+    if (window.confirm("Bạn có chắc chắn muốn xóa ghi chú này?")) {
+      setNotes(prev => prev.filter(n => n.id !== id));
+    }
+  };
+
+  const filteredNotes = (notes || []).filter(n => {
+    const title = (n.title || '').toLowerCase();
+    const content = (n.content || '').replace(/<[^>]*>/g, '').toLowerCase();
+    const query = searchQuery.toLowerCase();
+    
+    return title.includes(query) || content.includes(query);
+  });
+
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col">
+      {/* Header */}
+      <div className="sticky top-0 z-30 bg-white/80 backdrop-blur-md border-b border-gray-100 px-4 py-4 flex items-center gap-4">
+        <button onClick={onBack} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
+          <ChevronLeft className="w-6 h-6 text-gray-600" />
+        </button>
+        <div>
+          <h1 className="text-xl font-black text-gray-900">Ghi chú của tôi</h1>
+          <p className="text-[10px] font-bold text-gray-400 uppercase tracking-widest">Sổ tay hành trình cá nhân</p>
+        </div>
+      </div>
+
+      <div className="flex-1 p-6 max-w-2xl mx-auto w-full">
+        {!isCreating && (
+          <div className="flex items-center gap-4 mb-8">
+            <div className="relative flex-1">
+              <input 
+                type="text" 
+                placeholder="Tìm kiếm nội dung ghi chú..." 
+                className="w-full pl-10 pr-4 py-3 bg-white rounded-2xl border border-gray-100 shadow-sm focus:ring-2 focus:ring-amber-500 outline-none transition-all text-sm"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+              <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+            </div>
+            <button 
+              onClick={() => setIsCreating(true)}
+              className="p-3 bg-amber-500 text-white rounded-2xl shadow-lg shadow-amber-200 hover:bg-amber-600 transition-all active:scale-95"
+            >
+              <Plus className="w-6 h-6" />
+            </button>
+          </div>
+        )}
+
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center py-20 text-gray-400">
+            <Loader2 className="w-10 h-10 animate-spin mb-4" />
+            <p className="font-bold">Đang tải ghi chú...</p>
+          </div>
+        ) : isCreating ? (
+          <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4">
+            <input
+              type="text"
+              placeholder="Tiêu đề ghi chú..."
+              className="w-full px-4 py-3 bg-white rounded-2xl border border-gray-100 shadow-sm focus:ring-2 focus:ring-amber-500 outline-none transition-all text-lg font-bold"
+              value={noteForm.title}
+              onChange={(e) => setNoteForm({ ...noteForm, title: e.target.value })}
+            />
+            <div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden min-h-[500px] flex flex-col">
+              <ReactQuill 
+                ref={quillRef}
+                theme="snow" 
+                value={noteForm.content} 
+                onChange={(content) => setNoteForm({ ...noteForm, content })}
+                modules={quillModules}
+                placeholder="Bắt đầu viết cảm nhận của bạn tại đây..."
+                className="flex-1 flex flex-col [&_.ql-container]:flex-1 [&_.ql-container]:flex [&_.ql-container]:flex-col [&_.ql-editor]:flex-1 [&_.ql-editor]:text-base [&_.ql-toolbar]:flex [&_.ql-toolbar]:flex-wrap sm:[&_.ql-toolbar]:flex-nowrap [&_.ql-toolbar]:border-0 [&_.ql-toolbar]:border-b [&_.ql-toolbar]:border-gray-50 [&_.ql-editor_table]:border-collapse [&_.ql-editor_table]:w-full [&_.ql-editor_td]:border [&_.ql-editor_td]:border-gray-200 [&_.ql-editor_td]:p-2 [&_.ql-editor_.ql-align-center]:text-center [&_.ql-editor_.ql-align-right]:text-right [&_.ql-editor_.ql-align-justify]:text-justify [&_.ql-picker-options]:!z-[50] [&_.ql-picker-options]:!shadow-xl [&_.ql-picker-options]:!rounded-xl [&_.ql-picker-options]:!border-gray-100 [&_.ql-stroke]:!stroke-gray-500 [&_.ql-fill]:!fill-gray-500 [&_button:hover_.ql-stroke]:!stroke-amber-500 [&_button:hover_.ql-fill]:!stroke-amber-500 [&_button.ql-active_.ql-stroke]:!stroke-amber-500"
+              />
+            </div>
+            <div className="flex gap-3">
+              <button 
+                onClick={handleSaveNote}
+                className="flex-1 flex items-center justify-center gap-2 bg-amber-500 hover:bg-amber-600 text-white py-4 rounded-2xl font-black uppercase tracking-widest text-xs transition-all shadow-lg shadow-amber-200"
+              >
+                <Save className="w-5 h-5" /> Lưu ghi chú
+              </button>
+              <button 
+                onClick={() => { setIsCreating(false); setNoteForm({ title: '', content: '' }); }}
+                className="px-6 py-4 bg-gray-100 hover:bg-gray-200 text-gray-500 rounded-2xl font-black uppercase tracking-widest text-xs transition-all"
+              >
+                Hủy
+              </button>
+            </div>
+          </div>
+        ) : filteredNotes.length > 0 ? (
+          <div className="grid grid-cols-1 gap-4">
+            {filteredNotes.map((note) => (
+              <div key={note.id} className="bg-white p-5 rounded-3xl border border-gray-100 shadow-sm hover:shadow-md transition-all group">
+                <div className="flex justify-between items-start mb-3">
+                  <div>
+                    <h4 className="font-bold text-gray-900">{note.title}</h4>
+                    <div className="flex items-center gap-2 text-[10px] text-gray-400 font-bold uppercase mt-1">
+                      <Calendar className="w-3 h-3" />
+                      {new Date(note.createdAt).toLocaleDateString('vi-VN')}
+                    </div>
+                  </div>
+                  <button 
+                    onClick={() => handleDeleteNote(note.id)}
+                    className="p-2 text-gray-300 hover:text-red-500 hover:bg-red-50 rounded-xl transition-all opacity-0 group-hover:opacity-100"
+                  >
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+                <div 
+                  className="text-sm text-gray-600 line-clamp-3 prose prose-sm max-w-none ql-editor !p-0 [&_table]:border-collapse [&_table]:w-full [&_td]:border [&_td]:border-gray-200 [&_td]:p-2 [&_.ql-align-center]:text-center [&_.ql-align-right]:text-right [&_.ql-align-justify]:text-justify"
+                  dangerouslySetInnerHTML={{ __html: note.content }}
+                />
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="text-center py-24 bg-white rounded-[40px] border-2 border-dashed border-gray-100 shadow-inner">
+            <div className="w-20 h-20 bg-amber-50 rounded-3xl flex items-center justify-center mx-auto mb-6 text-amber-500">
+              <FileText className="w-10 h-10" />
+            </div>
+            <h3 className="text-xl font-bold text-gray-900">{searchQuery ? 'Không tìm thấy ghi chú' : 'Chưa có ghi chú nào'}</h3>
+            <p className="text-sm text-gray-400 max-w-xs mx-auto mt-2">
+              {searchQuery ? 'Hãy thử tìm kiếm với từ khóa khác.' : 'Hãy lưu lại những cảm nhận, lịch trình riêng hoặc các lưu ý quan trọng cho hành trình của bạn.'}
+            </p>
+            {!searchQuery && (
+            <button 
+              onClick={() => setIsCreating(true)}
+              className="mt-8 inline-flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-xs transition-all shadow-lg shadow-amber-200 active:scale-95"
+            >
+              <Plus className="w-5 h-5" /> Tạo ghi chú mới
+            </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
@@ -35,7 +35,8 @@ import {
  MessageSquare,
  Share2,
  Tag as TagIcon,
-  Trash2
+  Trash2,
+  FileText
 } from 'lucide-react';
 import L from 'leaflet';

@@ -171,7 +172,17 @@ const MapContextMenu = ({ onAction }: { onAction: (action: string, latlng: L.Lat
  );
 };

-export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBack: () => void, tourId: string, isPublicView?: boolean }) => {
+export const TourDetailPage = ({ 
+  onBack, 
+  tourId, 
+  isPublicView = false, 
+  onOpenNotes 
+}: { 
+  onBack: () => void, 
+  tourId: string, 
+  isPublicView?: boolean, 
+  onOpenNotes?: () => void 
+}) => {
  // Tách biệt các state và actions để tối ưu performance - Chuyển lên đầu để tránh lỗi initialization
  const currentTour = useTourStore(state => state.currentTour);
  const legs = useTourStore(state => state.legs);
@@ -642,16 +653,28 @@ export const TourDetailPage = ({ onBack, tourId, isPublicView = false }: { onBac
        <h1 className="text-lg font-bold text-gray-800 truncate px-4 flex-1 text-center">
          {tourInfo.title}
        </h1>
-        {/* Nút chia sẻ: Chỉ dành cho OWNER, MANAGER, MEMBER */}
-        {canShare && (
-          <button 
-            onClick={handleShare}
-            className="p-2 hover:bg-blue-50 text-blue-600 rounded-full transition-colors"
-            title="Chia sẻ tour"
-          >
-            <Share2 className="w-5 h-5" />
-          </button>
-        )}
+        <div className="flex items-center gap-1">
+          {/* Nút Ghi chú: Chỉ hiển thị cho người dùng đã đăng nhập và không phải view công khai */}
+          {!isPublicView && onOpenNotes && (
+            <button 
+              onClick={onOpenNotes}
+              className="p-2 hover:bg-amber-50 text-amber-600 rounded-full transition-colors"
+              title="Ghi chú của tôi"
+            >
+              <FileText className="w-5 h-5" />
+            </button>
+          )}
+          {/* Nút chia sẻ: Chỉ dành cho OWNER, MANAGER, MEMBER */}
+          {canShare && (
+            <button 
+              onClick={handleShare}
+              className="p-2 hover:bg-blue-50 text-blue-600 rounded-full transition-colors"
+              title="Chia sẻ tour"
+            >
+              <Share2 className="w-5 h-5" />
+            </button>
+          )}
+        </div>
      </div>
      {/* Tour Header Info */}
      <div className="relative min-h-[480px] w-full bg-blue-900 flex flex-col justify-end">