Revert "123"

This reverts commit 5f25631329.

frontend/src/components/WordPressPublish/BulkWordPressPublish.tsx

@@ -1,268 +0,0 @@
-import React, { useState } from 'react';
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  Typography,
-  Alert,
-  Box,
-  CircularProgress,
-  List,
-  ListItem,
-  ListItemText,
-  Divider
-} from '@mui/material';
-import {
-  Publish as PublishIcon,
-  CheckCircle as SuccessIcon,
-  Error as ErrorIcon
-} from '@mui/icons-material';
-import { fetchAPI } from '../../services/api';
-
-interface BulkWordPressPublishProps {
-  contentItems: Array<{
-    content_id: number;
-    content_title: string;
-    overall_status: 'pending' | 'partial' | 'complete' | 'failed';
-  }>;
-  onPublishComplete?: (results: { success: string[], failed: string[] }) => void;
-}
-
-interface PublishResult {
-  id: number;
-  title: string;
-  status: 'success' | 'failed' | 'pending';
-  message?: string;
-}
-
-export const BulkWordPressPublish: React.FC<BulkWordPressPublishProps> = ({
-  contentItems,
-  onPublishComplete
-}) => {
-  const [open, setOpen] = useState(false);
-  const [publishing, setPublishing] = useState(false);
-  const [results, setResults] = useState<PublishResult[]>([]);
-  
-  // Filter items that are ready to publish
-  const readyToPublish = contentItems.filter(item => 
-    item.overall_status === 'complete'
-  );
-  
-  const handleBulkPublish = async () => {
-    if (readyToPublish.length === 0) return;
-    
-    setPublishing(true);
-    setResults([]);
-    
-    let successCount = 0;
-    let failedCount = 0;
-    const publishResults: PublishResult[] = [];
-    
-    // Process each item individually
-    for (const item of readyToPublish) {
-      try {
-        const response = await fetchAPI(`/api/wordpress/publish/`, {
-          method: 'POST',
-          body: JSON.stringify({
-            content_id: item.content_id.toString()
-          }),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-        
-        if (response.success) {
-          successCount++;
-          publishResults.push({
-            id: item.content_id,
-            title: item.content_title,
-            status: 'success',
-            message: 'Published successfully'
-          });
-        } else {
-          failedCount++;
-          publishResults.push({
-            id: item.content_id,
-            title: item.content_title,
-            status: 'failed',
-            message: response.message || 'Publishing failed'
-          });
-        }
-      } catch (error: any) {
-        failedCount++;
-        publishResults.push({
-          id: item.content_id,
-          title: item.content_title,
-          status: 'failed',
-          message: error.message || 'Network error'
-        });
-      }
-    }
-    
-    setResults(publishResults);
-    setPublishing(false);
-    
-    // Notify parent component
-    if (onPublishComplete) {
-      const success = publishResults.filter(r => r.status === 'success').map(r => r.id.toString());
-      const failed = publishResults.filter(r => r.status === 'failed').map(r => r.id.toString());
-      onPublishComplete({ success, failed });
-    }
-  };
-  
-  const handleClose = () => {
-    if (!publishing) {
-      setOpen(false);
-      setResults([]);
-    }
-  };
-  
-  const successCount = results.filter(r => r.status === 'success').length;
-  const failedCount = results.filter(r => r.status === 'failed').length;
-  
-  if (readyToPublish.length === 0) {
-    return null; // Don't show button if nothing to publish
-  }
-  
-  return (
-    <>
-      <Button
-        variant="contained"
-        color="primary"
-        startIcon={<PublishIcon />}
-        onClick={() => setOpen(true)}
-        size="small"
-      >
-        Publish Ready ({readyToPublish.length})
-      </Button>
-      
-      <Dialog 
-        open={open} 
-        onClose={handleClose}
-        maxWidth="md"
-        fullWidth
-        disableEscapeKeyDown={publishing}
-      >
-        <DialogTitle>
-          Bulk Publish to WordPress
-        </DialogTitle>
-        
-        <DialogContent>
-          {!publishing && results.length === 0 && (
-            <>
-              <Typography variant="body1" gutterBottom>
-                Ready to publish <strong>{readyToPublish.length}</strong> content items to WordPress:
-              </Typography>
-              
-              <Alert severity="info" sx={{ mt: 2, mb: 2 }}>
-                Only content with generated images will be published.
-              </Alert>
-              
-              <Box sx={{ maxHeight: 300, overflow: 'auto', border: 1, borderColor: 'divider', borderRadius: 1 }}>
-                <List dense>
-                  {readyToPublish.map((item, index) => (
-                    <div key={item.content_id}>
-                      <ListItem>
-                        <ListItemText 
-                          primary={item.content_title}
-                          secondary={`ID: ${item.content_id}`}
-                        />
-                      </ListItem>
-                      {index < readyToPublish.length - 1 && <Divider />}
-                    </div>
-                  ))}
-                </List>
-              </Box>
-            </>
-          )}
-          
-          {publishing && (
-            <Box display="flex" alignItems="center" gap={2} py={4}>
-              <CircularProgress />
-              <Typography>
-                Publishing {readyToPublish.length} items to WordPress...
-              </Typography>
-            </Box>
-          )}
-          
-          {!publishing && results.length > 0 && (
-            <>
-              <Box sx={{ mb: 2 }}>
-                {successCount > 0 && (
-                  <Alert severity="success" sx={{ mb: 1 }}>
-                    ✓ Successfully published {successCount} items
-                  </Alert>
-                )}
-                
-                {failedCount > 0 && (
-                  <Alert severity="error">
-                    ✗ Failed to publish {failedCount} items
-                  </Alert>
-                )}
-              </Box>
-              
-              <Typography variant="h6" gutterBottom>
-                Results:
-              </Typography>
-              
-              <Box sx={{ maxHeight: 400, overflow: 'auto', border: 1, borderColor: 'divider', borderRadius: 1 }}>
-                <List dense>
-                  {results.map((result, index) => (
-                    <div key={result.id}>
-                      <ListItem>
-                        <Box display="flex" alignItems="center" width="100%">
-                          {result.status === 'success' ? (
-                            <SuccessIcon color="success" sx={{ mr: 1 }} />
-                          ) : (
-                            <ErrorIcon color="error" sx={{ mr: 1 }} />
-                          )}
-                          <ListItemText 
-                            primary={result.title}
-                            secondary={result.message}
-                          />
-                        </Box>
-                      </ListItem>
-                      {index < results.length - 1 && <Divider />}
-                    </div>
-                  ))}
-                </List>
-              </Box>
-            </>
-          )}
-        </DialogContent>
-        
-        <DialogActions>
-          {!publishing && results.length === 0 && (
-            <>
-              <Button onClick={handleClose}>
-                Cancel
-              </Button>
-              <Button 
-                onClick={handleBulkPublish}
-                variant="contained"
-                color="primary"
-                startIcon={<PublishIcon />}
-              >
-                Publish All ({readyToPublish.length})
-              </Button>
-            </>
-          )}
-          
-          {publishing && (
-            <Button disabled>
-              Publishing...
-            </Button>
-          )}
-          
-          {!publishing && results.length > 0 && (
-            <Button onClick={handleClose} variant="contained">
-              Close
-            </Button>
-          )}
-        </DialogActions>
-      </Dialog>
-    </>
-  );
-};

frontend/src/components/WordPressPublish/index.ts

@@ -1,3 +1,2 @@
 export { WordPressPublish } from './WordPressPublish';
-export { BulkWordPressPublish } from './BulkWordPressPublish';
 export type { WordPressPublishProps } from './WordPressPublish';

frontend/src/config/pages/table-actions.config.tsx

@@ -338,7 +338,14 @@ const tableActionsConfigs: Record<string, TableActionsConfig> = {
         variant: 'primary',
       },
     ],
-    bulkActions: [],
+    bulkActions: [
+      {
+        key: 'bulk_publish_wordpress',
+        label: 'Publish Ready to WordPress',
+        icon: <ArrowRightIcon className="w-5 h-5" />,
+        variant: 'success',
+      },
+    ],
   },
   // Default config (fallback)
   default: {

frontend/src/pages/Writer/Images.tsx

@@ -14,6 +14,7 @@ import {
   bulkUpdateImagesStatus,
   ContentImage,
   fetchAPI,
+  publishContent,
 } from '../../services/api';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import { FileIcon, DownloadIcon, BoltIcon, TaskIcon, ImageIcon, CheckCircleIcon } from '../../icons';
@@ -24,7 +25,6 @@ import { useResourceDebug } from '../../hooks/useResourceDebug';
 import PageHeader from '../../components/common/PageHeader';
 import ModuleNavigationTabs from '../../components/navigation/ModuleNavigationTabs';
 import { Modal } from '../../components/ui/modal';
-import { BulkWordPressPublish } from '../../components/WordPressPublish';
 
 export default function Images() {
   const toast = useToast();
@@ -208,8 +208,50 @@ export default function Images() {
 
   // Bulk action handler
   const handleBulkAction = useCallback(async (action: string, ids: string[]) => {
-    toast.info(`Bulk action "${action}" for ${ids.length} items`);
-  }, [toast]);
+    if (action === 'bulk_publish_wordpress') {
+      // Filter to only publish items that have images generated 
+      const readyItems = images
+        .filter(item => ids.includes(item.content_id.toString()))
+        .filter(item => item.overall_status === 'complete');
+      
+      if (readyItems.length === 0) {
+        toast.warning('No items are ready for WordPress publishing. Items must have generated images and not already be published.');
+        return;
+      }
+      
+      try {
+        let successCount = 0;
+        let failedCount = 0;
+        const errors: string[] = [];
+        
+        // Process each item individually using the existing publishContent function
+        for (const item of readyItems) {
+          try {
+            await publishContent(item.content_id);
+            successCount++;
+          } catch (error: any) {
+            failedCount++;
+            errors.push(`${item.content_title}: ${error.message}`);
+          }
+        }
+        
+        if (successCount > 0) {
+          toast.success(`Successfully published ${successCount} item(s) to WordPress`);
+        }
+        if (failedCount > 0) {
+          toast.warning(`${failedCount} item(s) failed to publish`);
+        }
+        
+        // Reload images to reflect the updated WordPress status
+        loadImages();
+      } catch (error: any) {
+        console.error('Bulk WordPress publish error:', error);
+        toast.error(`Failed to bulk publish to WordPress: ${error.message || 'Network error'}`);
+      }
+    } else {
+      toast.info(`Bulk action "${action}" for ${ids.length} items`);
+    }
+  }, [images, toast, loadImages]);
 
   // Row action handler
   const handleRowAction = useCallback(async (action: string, row: ContentImagesGroup) => {
@@ -218,25 +260,13 @@ export default function Images() {
       setStatusUpdateRecordName(row.content_title || `Content #${row.content_id}`);
       setIsStatusModalOpen(true);
     } else if (action === 'publish_wordpress') {
-      // Handle WordPress publishing for individual item using WordPress API endpoint
+      // Handle WordPress publishing for individual item using existing publishContent function
       try {
-        const response = await fetchAPI(`/api/wordpress/publish/`, {
-          method: 'POST',
-          body: JSON.stringify({
-            content_id: row.content_id.toString()
-          }),
-          headers: {
-            'Content-Type': 'application/json',
-          },
-        });
-        
-        if (response.success) {
-          toast.success(`Successfully published "${row.content_title}" to WordPress!`);
-          // Reload images to reflect the updated WordPress status
-          loadImages();
-        } else {
-          toast.error(`Failed to publish: ${response.message}`);
-        }
+        // Use the existing publishContent function from the API
+        const result = await publishContent(row.content_id);
+        toast.success(`Successfully published "${row.content_title}" to WordPress! View at: ${result.external_url}`);
+        // Reload images to reflect the updated WordPress status
+        loadImages();
       } catch (error: any) {
         console.error('WordPress publish error:', error);
         toast.error(`Failed to publish to WordPress: ${error.message || 'Network error'}`);
@@ -501,24 +531,6 @@ export default function Images() {
         title="Content Images" 
         badge={{ icon: <FileIcon />, color: 'orange' }}
         navigation={<ModuleNavigationTabs tabs={writerTabs} />}
-        actions={
-          <BulkWordPressPublish
-            contentItems={images.map(item => ({
-              content_id: item.content_id,
-              content_title: item.content_title,
-              overall_status: item.overall_status
-            }))}
-            onPublishComplete={(results) => {
-              if (results.success.length > 0) {
-                toast.success(`Published ${results.success.length} items successfully`);
-              }
-              if (results.failed.length > 0) {
-                toast.error(`Failed to publish ${results.failed.length} items`);
-              }
-              loadImages();
-            }}
-          />
-        }
       />
       <TablePageTemplate
       columns={pageConfig.columns}