reaminig 5-t-9

frontend/src/pages/Sites/PageManager.tsx

@@ -1,10 +1,13 @@
 /**
- * Page Manager
- * Phase 6: Site Integration & Multi-Destination Publishing
+ * Page Manager (Advanced)
+ * Phase 7: Advanced Site Management
+ * Features: Drag-drop reorder, bulk actions, selection
  */
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
-import { PlusIcon, EditIcon, TrashIcon, ArrowUpIcon, ArrowDownIcon } from 'lucide-react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import { PlusIcon, EditIcon, TrashIcon, GripVerticalIcon, CheckSquareIcon, SquareIcon } from 'lucide-react';
 import PageMeta from '../../components/common/PageMeta';
 import { Card } from '../../components/ui/card';
 import Button from '../../components/ui/button/Button';
@@ -21,11 +24,87 @@ interface Page {
   blocks: any[];
 }
 
+// Draggable Page Item Component
+const DraggablePageItem: React.FC<{
+  page: Page;
+  index: number;
+  isSelected: boolean;
+  onSelect: (id: number) => void;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+  movePage: (dragIndex: number, hoverIndex: number) => void;
+}> = ({ page, index, isSelected, onSelect, onEdit, onDelete, movePage }) => {
+  const [{ isDragging }, drag] = useDrag({
+    type: 'page',
+    item: { id: page.id, index },
+    collect: (monitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+
+  const [, drop] = useDrop({
+    accept: 'page',
+    hover: (draggedItem: { id: number; index: number }) => {
+      if (draggedItem.index !== index) {
+        movePage(draggedItem.index, index);
+        draggedItem.index = index;
+      }
+    },
+  });
+
+  return (
+    <div
+      ref={(node) => drag(drop(node))}
+      className={`flex items-center justify-between p-4 border rounded-lg transition-all ${
+        isDragging
+          ? 'opacity-50 border-brand-500 bg-brand-50 dark:bg-brand-900/20'
+          : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800'
+      } ${isSelected ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-300 dark:border-blue-700' : ''}`}
+    >
+      <div className="flex items-center gap-4 flex-1">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onSelect(page.id);
+          }}
+          className="cursor-pointer"
+        >
+          {isSelected ? (
+            <CheckSquareIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
+          ) : (
+            <SquareIcon className="w-5 h-5 text-gray-400" />
+          )}
+        </button>
+        <GripVerticalIcon className="w-5 h-5 text-gray-400 cursor-move" />
+        <div className="flex-1">
+          <h3 className="font-semibold text-gray-900 dark:text-white">{page.title}</h3>
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            /{page.slug} • {page.type} • {page.status} • Order: {page.order}
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={() => onEdit(page.id)}>
+          <EditIcon className="w-4 h-4 mr-1" />
+          Edit
+        </Button>
+        <Button variant="ghost" size="sm" onClick={() => onDelete(page.id)}>
+          <TrashIcon className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
 export default function PageManager() {
   const { siteId } = useParams<{ siteId: string }>();
+  const navigate = useNavigate();
   const toast = useToast();
   const [pages, setPages] = useState<Page[]>([]);
   const [loading, setLoading] = useState(true);
+  const [selectedPages, setSelectedPages] = useState<Set<number>>(new Set());
+  const [isReordering, setIsReordering] = useState(false);
 
   useEffect(() => {
     if (siteId) {
@@ -36,9 +115,20 @@ export default function PageManager() {
   const loadPages = async () => {
     try {
       setLoading(true);
-      // TODO: Load pages from SiteBlueprint API
-      // For now, placeholder
-      setPages([]);
+      // First, get blueprints for this site
+      const blueprintsData = await fetchAPI(`/v1/site-builder/blueprints/?site=${siteId}`);
+      const blueprints = Array.isArray(blueprintsData?.results) ? blueprintsData.results : Array.isArray(blueprintsData) ? blueprintsData : [];
+      
+      if (blueprints.length === 0) {
+        setPages([]);
+        return;
+      }
+
+      // Load pages from the first blueprint (or allow selection)
+      const blueprintId = blueprints[0].id;
+      const pagesData = await fetchAPI(`/v1/site-builder/pages/?site_blueprint=${blueprintId}`);
+      const pagesList = Array.isArray(pagesData?.results) ? pagesData.results : Array.isArray(pagesData) ? pagesData : [];
+      setPages(pagesList.sort((a, b) => a.order - b.order));
     } catch (error: any) {
       toast.error(`Failed to load pages: ${error.message}`);
     } finally {
@@ -47,24 +137,124 @@ export default function PageManager() {
   };
 
   const handleAddPage = () => {
-    // TODO: Navigate to page creation
-    toast.info('Page creation will be implemented in Phase 7');
+    navigate(`/sites/${siteId}/pages/new`);
   };
 
   const handleEditPage = (pageId: number) => {
-    // TODO: Navigate to page editor
-    toast.info('Page editor will be implemented in Phase 7');
+    navigate(`/sites/${siteId}/pages/${pageId}/edit`);
   };
 
   const handleDeletePage = async (pageId: number) => {
     if (!confirm('Are you sure you want to delete this page?')) return;
-    // TODO: Delete page
-    toast.info('Page deletion will be implemented in Phase 7');
+    
+    try {
+      await fetchAPI(`/v1/site-builder/pages/${pageId}/`, {
+        method: 'DELETE',
+      });
+      toast.success('Page deleted successfully');
+      loadPages();
+    } catch (error: any) {
+      toast.error(`Failed to delete page: ${error.message}`);
+    }
   };
 
-  const handleMovePage = async (pageId: number, direction: 'up' | 'down') => {
-    // TODO: Update page order
-    toast.info('Page reordering will be implemented in Phase 7');
+  const movePage = (dragIndex: number, hoverIndex: number) => {
+    const draggedPage = pages[dragIndex];
+    const newPages = [...pages];
+    newPages.splice(dragIndex, 1);
+    newPages.splice(hoverIndex, 0, draggedPage);
+    
+    // Update order values
+    newPages.forEach((page, index) => {
+      page.order = index;
+    });
+    
+    setPages(newPages);
+    setIsReordering(true);
+  };
+
+  const savePageOrder = async () => {
+    try {
+      // Update all pages' order
+      await Promise.all(
+        pages.map((page, index) =>
+          fetchAPI(`/v1/site-builder/pages/${page.id}/`, {
+            method: 'PATCH',
+            body: JSON.stringify({ order: index }),
+          })
+        )
+      );
+      toast.success('Page order saved');
+      setIsReordering(false);
+    } catch (error: any) {
+      toast.error(`Failed to save page order: ${error.message}`);
+      loadPages(); // Reload on error
+    }
+  };
+
+  const handleSelectPage = (pageId: number) => {
+    const newSelected = new Set(selectedPages);
+    if (newSelected.has(pageId)) {
+      newSelected.delete(pageId);
+    } else {
+      newSelected.add(pageId);
+    }
+    setSelectedPages(newSelected);
+  };
+
+  const handleSelectAll = () => {
+    if (selectedPages.size === pages.length) {
+      setSelectedPages(new Set());
+    } else {
+      setSelectedPages(new Set(pages.map((p) => p.id)));
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedPages.size === 0) {
+      toast.error('No pages selected');
+      return;
+    }
+    
+    if (!confirm(`Are you sure you want to delete ${selectedPages.size} page(s)?`)) return;
+
+    try {
+      await Promise.all(
+        Array.from(selectedPages).map((id) =>
+          fetchAPI(`/v1/site-builder/pages/${id}/`, {
+            method: 'DELETE',
+          })
+        )
+      );
+      toast.success(`${selectedPages.size} page(s) deleted successfully`);
+      setSelectedPages(new Set());
+      loadPages();
+    } catch (error: any) {
+      toast.error(`Failed to delete pages: ${error.message}`);
+    }
+  };
+
+  const handleBulkStatusChange = async (newStatus: string) => {
+    if (selectedPages.size === 0) {
+      toast.error('No pages selected');
+      return;
+    }
+
+    try {
+      await Promise.all(
+        Array.from(selectedPages).map((id) =>
+          fetchAPI(`/v1/site-builder/pages/${id}/`, {
+            method: 'PATCH',
+            body: JSON.stringify({ status: newStatus }),
+          })
+        )
+      );
+      toast.success(`${selectedPages.size} page(s) updated`);
+      setSelectedPages(new Set());
+      loadPages();
+    } catch (error: any) {
+      toast.error(`Failed to update pages: ${error.message}`);
+    }
   };
 
   if (loading) {
@@ -107,62 +297,104 @@ export default function PageManager() {
           </Button>
         </Card>
       ) : (
-        <Card className="p-6">
-          <div className="space-y-3">
-            {pages.map((page, index) => (
-              <div
-                key={page.id}
-                className="flex items-center justify-between p-4 border border-gray-200 dark:border-gray-700 rounded-lg"
-              >
-                <div className="flex items-center gap-4 flex-1">
-                  <div className="flex flex-col gap-1">
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => handleMovePage(page.id, 'up')}
-                      disabled={index === 0}
-                    >
-                      <ArrowUpIcon className="w-4 h-4" />
-                    </Button>
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => handleMovePage(page.id, 'down')}
-                      disabled={index === pages.length - 1}
-                    >
-                      <ArrowDownIcon className="w-4 h-4" />
-                    </Button>
-                  </div>
-                  <div className="flex-1">
-                    <h3 className="font-semibold text-gray-900 dark:text-white">
-                      {page.title}
-                    </h3>
-                    <p className="text-sm text-gray-600 dark:text-gray-400">
-                      /{page.slug} • {page.type} • {page.status}
-                    </p>
-                  </div>
-                </div>
+        <>
+          {/* Bulk Actions Bar */}
+          {selectedPages.size > 0 && (
+            <Card className="p-4 mb-4 bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {selectedPages.size} page(s) selected
+                </span>
                 <div className="flex gap-2">
                   <Button
                     variant="outline"
                     size="sm"
-                    onClick={() => handleEditPage(page.id)}
+                    onClick={() => handleBulkStatusChange('draft')}
                   >
-                    <EditIcon className="w-4 h-4 mr-1" />
-                    Edit
+                    Set to Draft
                   </Button>
                   <Button
-                    variant="ghost"
+                    variant="outline"
                     size="sm"
-                    onClick={() => handleDeletePage(page.id)}
+                    onClick={() => handleBulkStatusChange('published')}
                   >
-                    <TrashIcon className="w-4 h-4" />
+                    Set to Published
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={handleBulkDelete}
+                    className="text-red-600 hover:text-red-700"
+                  >
+                    <TrashIcon className="w-4 h-4 mr-1" />
+                    Delete Selected
+                  </Button>
+                  <Button variant="ghost" size="sm" onClick={() => setSelectedPages(new Set())}>
+                    Clear Selection
                   </Button>
                 </div>
               </div>
-            ))}
-          </div>
-        </Card>
+            </Card>
+          )}
+
+          {/* Reorder Save Button */}
+          {isReordering && (
+            <Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  Page order changed. Save to apply changes.
+                </span>
+                <div className="flex gap-2">
+                  <Button variant="outline" size="sm" onClick={() => {
+                    loadPages();
+                    setIsReordering(false);
+                  }}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary" size="sm" onClick={savePageOrder}>
+                    Save Order
+                  </Button>
+                </div>
+              </div>
+            </Card>
+          )}
+
+          <Card className="p-6">
+            <div className="mb-4 flex items-center justify-between">
+              <button
+                type="button"
+                onClick={handleSelectAll}
+                className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white"
+              >
+                {selectedPages.size === pages.length ? (
+                  <CheckSquareIcon className="w-5 h-5 text-brand-600 dark:text-brand-400" />
+                ) : (
+                  <SquareIcon className="w-5 h-5 text-gray-400" />
+                )}
+                <span>Select All</span>
+              </button>
+              <p className="text-sm text-gray-500 dark:text-gray-400">
+                Drag and drop to reorder pages
+              </p>
+            </div>
+            <DndProvider backend={HTML5Backend}>
+              <div className="space-y-3">
+                {pages.map((page, index) => (
+                  <DraggablePageItem
+                    key={page.id}
+                    page={page}
+                    index={index}
+                    isSelected={selectedPages.has(page.id)}
+                    onSelect={handleSelectPage}
+                    onEdit={handleEditPage}
+                    onDelete={handleDeletePage}
+                    movePage={movePage}
+                  />
+                ))}
+              </div>
+            </DndProvider>
+          </Card>
+        </>
       )}
     </div>
   );