Initial commit: igny8 project

frontend/src/pages/Writer/Images.tsx

@@ -0,0 +1,231 @@
+/**
+ * Images Page - Built with TablePageTemplate
+ * Consistent with Keywords page layout, structure and design
+ */
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import TablePageTemplate from '../../templates/TablePageTemplate';
+import {
+  fetchTaskImages,
+  deleteTaskImage,
+  bulkDeleteTaskImages,
+  autoGenerateImages,
+  TaskImage,
+  TaskImageFilters,
+} from '../../services/api';
+import { useToast } from '../../components/ui/toast/ToastContainer';
+import { FileIcon, DownloadIcon } from '../../icons';
+import { createImagesPageConfig } from '../../config/pages/images.config';
+
+export default function Images() {
+  const toast = useToast();
+
+  // Data state
+  const [images, setImages] = useState<TaskImage[]>([]);
+  const [loading, setLoading] = useState(true);
+  
+  // Filter state
+  const [searchTerm, setSearchTerm] = useState('');
+  const [imageTypeFilter, setImageTypeFilter] = useState('');
+  const [statusFilter, setStatusFilter] = useState('');
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
+  
+  // Pagination state
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalCount, setTotalCount] = useState(0);
+  
+  // Sorting state
+  const [sortBy, setSortBy] = useState<string>('created_at');
+  const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
+  const [showContent, setShowContent] = useState(false);
+
+  // Load images - wrapped in useCallback
+  const loadImages = useCallback(async () => {
+    setLoading(true);
+    setShowContent(false);
+    try {
+      const ordering = sortBy ? `${sortDirection === 'desc' ? '-' : ''}${sortBy}` : '-created_at';
+      
+      const filters: TaskImageFilters = {
+        ...(imageTypeFilter && { image_type: imageTypeFilter }),
+        ...(statusFilter && { status: statusFilter }),
+        page: currentPage,
+        ordering,
+      };
+      
+      // Note: TaskImages API doesn't support search by task title yet
+      // We'll filter client-side for now
+      const data = await fetchTaskImages(filters);
+      let filteredResults = data.results || [];
+      
+      // Client-side search filter
+      if (searchTerm) {
+        filteredResults = filteredResults.filter(img => 
+          img.task_title?.toLowerCase().includes(searchTerm.toLowerCase())
+        );
+      }
+      
+      setImages(filteredResults);
+      setTotalCount(filteredResults.length);
+      setTotalPages(Math.ceil(filteredResults.length / 10));
+      
+      setTimeout(() => {
+        setShowContent(true);
+        setLoading(false);
+      }, 100);
+    } catch (error: any) {
+      console.error('Error loading images:', error);
+      toast.error(`Failed to load images: ${error.message}`);
+      setShowContent(true);
+      setLoading(false);
+    }
+  }, [currentPage, imageTypeFilter, statusFilter, sortBy, sortDirection, searchTerm]);
+
+  useEffect(() => {
+    loadImages();
+  }, [loadImages]);
+
+  // Debounced search
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (currentPage === 1) {
+        loadImages();
+      } else {
+        setCurrentPage(1);
+      }
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [searchTerm, currentPage, loadImages]);
+
+  // Handle sorting
+  const handleSort = (field: string, direction: 'asc' | 'desc') => {
+    setSortBy(field || 'created_at');
+    setSortDirection(direction);
+    setCurrentPage(1);
+  };
+
+  // Bulk export handler
+  const handleBulkExport = useCallback(async (ids: string[]) => {
+    try {
+      if (!ids || ids.length === 0) {
+        throw new Error('No records selected for export');
+      }
+      toast.info('Export functionality coming soon');
+    } catch (error: any) {
+      throw error;
+    }
+  }, []);
+
+  // Bulk action handler
+  const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
+    if (action === 'generate_images') {
+      try {
+        const numIds = ids.map(id => parseInt(id));
+        // Note: autoGenerateImages expects task_ids, not image_ids
+        // This would need to be adjusted based on API design
+        toast.info(`Generate images for ${ids.length} items`);
+        // await autoGenerateImages(numIds);
+      } catch (error: any) {
+        toast.error(`Failed to generate images: ${error.message}`);
+      }
+    } else {
+      toast.info(`Bulk action "${action}" for ${ids.length} items`);
+    }
+  }, []);
+
+  // Create page config
+  const pageConfig = useMemo(() => {
+    return createImagesPageConfig({
+      searchTerm,
+      setSearchTerm,
+      imageTypeFilter,
+      setImageTypeFilter,
+      statusFilter,
+      setStatusFilter,
+      setCurrentPage,
+    });
+  }, [searchTerm, imageTypeFilter, statusFilter]);
+
+  // Calculate header metrics
+  const headerMetrics = useMemo(() => {
+    if (!pageConfig?.headerMetrics) return [];
+    return pageConfig.headerMetrics.map((metric) => ({
+      label: metric.label,
+      value: metric.calculate({ images, totalCount }),
+      accentColor: metric.accentColor,
+    }));
+  }, [pageConfig?.headerMetrics, images, totalCount]);
+
+  return (
+    <TablePageTemplate
+      title="Task Images"
+      titleIcon={<FileIcon className="text-purple-500 size-5" />}
+      subtitle="Manage images for content tasks"
+      columns={pageConfig.columns}
+      data={images}
+      loading={loading}
+      showContent={showContent}
+      filters={pageConfig.filters}
+      filterValues={{
+        search: searchTerm,
+        image_type: imageTypeFilter,
+        status: statusFilter,
+      }}
+      onFilterChange={(key, value) => {
+        const stringValue = value === null || value === undefined ? '' : String(value);
+        if (key === 'search') {
+          setSearchTerm(stringValue);
+        } else if (key === 'image_type') {
+          setImageTypeFilter(stringValue);
+        } else if (key === 'status') {
+          setStatusFilter(stringValue);
+        }
+        setCurrentPage(1);
+      }}
+      onDelete={async (id: number) => {
+        await deleteTaskImage(id);
+        loadImages();
+      }}
+      onBulkDelete={async (ids: number[]) => {
+        // Note: bulkDeleteTaskImages doesn't exist yet, using individual deletes
+        for (const id of ids) {
+          await deleteTaskImage(id);
+        }
+        loadImages();
+        return { deleted_count: ids.length };
+      }}
+      onBulkExport={handleBulkExport}
+      onBulkAction={handleBulkAction}
+      getItemDisplayName={(row: TaskImage) => row.task_title || `Image ${row.id}`}
+      onExport={async () => {
+        toast.info('Export functionality coming soon');
+      }}
+      onExportIcon={<DownloadIcon />}
+      selectionLabel="image"
+      pagination={{
+        currentPage,
+        totalPages,
+        totalCount,
+        onPageChange: setCurrentPage,
+      }}
+      selection={{
+        selectedIds,
+        onSelectionChange: setSelectedIds,
+      }}
+      sorting={{
+        sortBy,
+        sortDirection,
+        onSort: handleSort,
+      }}
+      headerMetrics={headerMetrics}
+      onFilterReset={() => {
+        setSearchTerm('');
+        setImageTypeFilter('');
+        setStatusFilter('');
+        setCurrentPage(1);
+      }}
+    />
+  );
+}