reaminig 5-t-9
This commit is contained in:
alorig
521
frontend/src/pages/Sites/PostEditor.tsx
Normal file
521
frontend/src/pages/Sites/PostEditor.tsx
Normal file
@@ -0,0 +1,521 @@
|
||||
/**
|
||||
* Post Editor (Advanced)
|
||||
* Phase 7: Advanced Site Management
|
||||
* Full-featured editing: SEO, metadata, tags, categories, HTML content
|
||||
*/
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { SaveIcon, XIcon, EyeIcon, FileTextIcon, SettingsIcon, TagIcon } from 'lucide-react';
|
||||
import PageMeta from '../../components/common/PageMeta';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import Button from '../../components/ui/button/Button';
|
||||
import Label from '../../components/form/Label';
|
||||
import TextArea from '../../components/form/input/TextArea';
|
||||
import SelectDropdown from '../../components/form/SelectDropdown';
|
||||
import { useToast } from '../../components/ui/toast/ToastContainer';
|
||||
import { fetchAPI } from '../../services/api';
|
||||
|
||||
interface Content {
|
||||
id?: number;
|
||||
title: string;
|
||||
html_content?: string;
|
||||
content?: string;
|
||||
meta_title?: string;
|
||||
meta_description?: string;
|
||||
primary_keyword?: string;
|
||||
secondary_keywords?: string[];
|
||||
tags?: string[];
|
||||
categories?: string[];
|
||||
content_type: string;
|
||||
status: string;
|
||||
site: number;
|
||||
sector: number;
|
||||
word_count?: number;
|
||||
metadata?: Record<string, any>;
|
||||
}
|
||||
|
||||
export default function PostEditor() {
|
||||
const { siteId, postId } = useParams<{ siteId: string; postId?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const toast = useToast();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [activeTab, setActiveTab] = useState<'content' | 'seo' | 'metadata'>('content');
|
||||
const [content, setContent] = useState<Content>({
|
||||
title: '',
|
||||
html_content: '',
|
||||
content: '',
|
||||
meta_title: '',
|
||||
meta_description: '',
|
||||
primary_keyword: '',
|
||||
secondary_keywords: [],
|
||||
tags: [],
|
||||
categories: [],
|
||||
content_type: 'article',
|
||||
status: 'draft',
|
||||
site: Number(siteId),
|
||||
sector: 0, // Will be set from site
|
||||
});
|
||||
const [tagInput, setTagInput] = useState('');
|
||||
const [categoryInput, setCategoryInput] = useState('');
|
||||
|
||||
useEffect(() => {
|
||||
if (siteId) {
|
||||
loadSite();
|
||||
if (postId && postId !== 'new') {
|
||||
loadPost();
|
||||
} else {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [siteId, postId]);
|
||||
|
||||
const loadSite = async () => {
|
||||
try {
|
||||
const site = await fetchAPI(`/v1/auth/sites/${siteId}/`);
|
||||
if (site) {
|
||||
setContent((prev) => ({
|
||||
...prev,
|
||||
sector: site.sector || 0,
|
||||
}));
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('Failed to load site:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPost = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const data = await fetchAPI(`/v1/writer/content/${postId}/`);
|
||||
if (data) {
|
||||
setContent({
|
||||
id: data.id,
|
||||
title: data.title || '',
|
||||
html_content: data.html_content || '',
|
||||
content: data.html_content || data.content || '',
|
||||
meta_title: data.meta_title || '',
|
||||
meta_description: data.meta_description || '',
|
||||
primary_keyword: data.primary_keyword || '',
|
||||
secondary_keywords: Array.isArray(data.secondary_keywords) ? data.secondary_keywords : [],
|
||||
tags: Array.isArray(data.tags) ? data.tags : [],
|
||||
categories: Array.isArray(data.categories) ? data.categories : [],
|
||||
content_type: 'article', // Content model doesn't have content_type
|
||||
status: data.status || 'draft',
|
||||
site: data.site || Number(siteId),
|
||||
sector: data.sector || 0,
|
||||
word_count: data.word_count || 0,
|
||||
metadata: data.metadata || {},
|
||||
});
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to load post: ${error.message}`);
|
||||
navigate(`/sites/${siteId}/content`);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!content.title.trim()) {
|
||||
toast.error('Title is required');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setSaving(true);
|
||||
const payload = {
|
||||
...content,
|
||||
html_content: content.html_content || content.content,
|
||||
};
|
||||
|
||||
if (content.id) {
|
||||
// Update existing
|
||||
await fetchAPI(`/v1/writer/content/${content.id}/`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
toast.success('Post updated successfully');
|
||||
} else {
|
||||
// Create new - need to create a task first
|
||||
const taskData = await fetchAPI('/v1/writer/tasks/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
title: content.title,
|
||||
description: content.meta_description || '',
|
||||
keywords: content.primary_keyword || '',
|
||||
site_id: content.site,
|
||||
sector_id: content.sector,
|
||||
content_type: 'article',
|
||||
content_structure: 'blog_post',
|
||||
status: 'completed',
|
||||
}),
|
||||
});
|
||||
|
||||
if (taskData?.id) {
|
||||
const result = await fetchAPI('/v1/writer/content/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
...payload,
|
||||
task_id: taskData.id,
|
||||
}),
|
||||
});
|
||||
toast.success('Post created successfully');
|
||||
if (result?.id) {
|
||||
navigate(`/sites/${siteId}/posts/${result.id}/edit`);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error: any) {
|
||||
toast.error(`Failed to save post: ${error.message}`);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleAddTag = () => {
|
||||
if (tagInput.trim() && !content.tags?.includes(tagInput.trim())) {
|
||||
setContent({
|
||||
...content,
|
||||
tags: [...(content.tags || []), tagInput.trim()],
|
||||
});
|
||||
setTagInput('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveTag = (tag: string) => {
|
||||
setContent({
|
||||
...content,
|
||||
tags: content.tags?.filter((t) => t !== tag) || [],
|
||||
});
|
||||
};
|
||||
|
||||
const handleAddCategory = () => {
|
||||
if (categoryInput.trim() && !content.categories?.includes(categoryInput.trim())) {
|
||||
setContent({
|
||||
...content,
|
||||
categories: [...(content.categories || []), categoryInput.trim()],
|
||||
});
|
||||
setCategoryInput('');
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveCategory = (category: string) => {
|
||||
setContent({
|
||||
...content,
|
||||
categories: content.categories?.filter((c) => c !== category) || [],
|
||||
});
|
||||
};
|
||||
|
||||
const CONTENT_TYPES = [
|
||||
{ value: 'article', label: 'Article' },
|
||||
{ value: 'blog_post', label: 'Blog Post' },
|
||||
{ value: 'page', label: 'Page' },
|
||||
{ value: 'product', label: 'Product' },
|
||||
];
|
||||
|
||||
const STATUS_OPTIONS = [
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'review', label: 'Review' },
|
||||
{ value: 'publish', label: 'Published' },
|
||||
];
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title="Post Editor" />
|
||||
<div className="flex items-center justify-center h-64">
|
||||
<div className="text-gray-500">Loading post...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-6">
|
||||
<PageMeta title={content.id ? 'Edit Post' : 'New Post'} />
|
||||
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
|
||||
{content.id ? 'Edit Post' : 'New Post'}
|
||||
</h1>
|
||||
<p className="text-gray-600 dark:text-gray-400 mt-1">
|
||||
{content.id ? 'Edit your post content' : 'Create a new post'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => navigate(`/sites/${siteId}/content`)}
|
||||
>
|
||||
<XIcon className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={handleSave}
|
||||
disabled={saving}
|
||||
>
|
||||
<SaveIcon className="w-4 h-4 mr-2" />
|
||||
{saving ? 'Saving...' : 'Save Post'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="mb-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('content')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'content'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<FileTextIcon className="w-4 h-4 inline mr-2" />
|
||||
Content
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('seo')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'seo'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<EyeIcon className="w-4 h-4 inline mr-2" />
|
||||
SEO
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setActiveTab('metadata')}
|
||||
className={`px-4 py-2 font-medium border-b-2 transition-colors ${
|
||||
activeTab === 'metadata'
|
||||
? 'border-brand-500 text-brand-600 dark:text-brand-400'
|
||||
: 'border-transparent text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
|
||||
}`}
|
||||
>
|
||||
<TagIcon className="w-4 h-4 inline mr-2" />
|
||||
Metadata
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Content Tab */}
|
||||
{activeTab === 'content' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Title *</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.title}
|
||||
onChange={(e) => setContent({ ...content, title: e.target.value })}
|
||||
placeholder="Enter post title"
|
||||
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label>Content Type</Label>
|
||||
<SelectDropdown
|
||||
options={CONTENT_TYPES}
|
||||
value={content.content_type}
|
||||
onChange={(e) => setContent({ ...content, content_type: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Status</Label>
|
||||
<SelectDropdown
|
||||
options={STATUS_OPTIONS}
|
||||
value={content.status}
|
||||
onChange={(e) => setContent({ ...content, status: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Content (HTML)</Label>
|
||||
<TextArea
|
||||
value={content.html_content || content.content}
|
||||
onChange={(value) => setContent({ ...content, html_content: value, content: value })}
|
||||
rows={25}
|
||||
placeholder="Write your post content here (HTML supported)..."
|
||||
className="mt-1 font-mono text-sm"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
HTML content is supported. Use <p>, <h1>, <h2>, etc. for formatting.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{content.word_count !== undefined && content.word_count > 0 && (
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
Word count: {content.word_count.toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* SEO Tab */}
|
||||
{activeTab === 'seo' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>Meta Title</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.meta_title || ''}
|
||||
onChange={(e) => setContent({ ...content, meta_title: e.target.value })}
|
||||
placeholder="SEO title (recommended: 50-60 characters)"
|
||||
maxLength={60}
|
||||
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{content.meta_title?.length || 0}/60 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Meta Description</Label>
|
||||
<TextArea
|
||||
value={content.meta_description || ''}
|
||||
onChange={(value) => setContent({ ...content, meta_description: value })}
|
||||
rows={4}
|
||||
placeholder="SEO description (recommended: 150-160 characters)"
|
||||
maxLength={160}
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||
{content.meta_description?.length || 0}/160 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Primary Keyword</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.primary_keyword || ''}
|
||||
onChange={(e) => setContent({ ...content, primary_keyword: e.target.value })}
|
||||
placeholder="Main keyword for this content"
|
||||
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Secondary Keywords (comma-separated)</Label>
|
||||
<input
|
||||
type="text"
|
||||
value={content.secondary_keywords?.join(', ') || ''}
|
||||
onChange={(e) => {
|
||||
const keywords = e.target.value.split(',').map((k) => k.trim()).filter(Boolean);
|
||||
setContent({ ...content, secondary_keywords: keywords });
|
||||
}}
|
||||
placeholder="keyword1, keyword2, keyword3"
|
||||
className="mt-1 w-full px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Metadata Tab */}
|
||||
{activeTab === 'metadata' && (
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<Label>Tags</Label>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleAddTag();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a tag and press Enter"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
<Button type="button" onClick={handleAddTag} variant="outline">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{content.tags && content.tags.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{content.tags.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-gray-100 dark:bg-gray-800 rounded-full text-sm"
|
||||
>
|
||||
{tag}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveTag(tag)}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label>Categories</Label>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={categoryInput}
|
||||
onChange={(e) => setCategoryInput(e.target.value)}
|
||||
onKeyPress={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
handleAddCategory();
|
||||
}
|
||||
}}
|
||||
placeholder="Add a category and press Enter"
|
||||
className="flex-1 px-3 py-2 border border-gray-300 dark:border-gray-700 rounded-md dark:bg-gray-800 dark:text-white"
|
||||
/>
|
||||
<Button type="button" onClick={handleAddCategory} variant="outline">
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
{content.categories && content.categories.length > 0 && (
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{content.categories.map((category) => (
|
||||
<span
|
||||
key={category}
|
||||
className="inline-flex items-center gap-1 px-3 py-1 bg-blue-100 dark:bg-blue-900 rounded-full text-sm"
|
||||
>
|
||||
{category}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleRemoveCategory(category)}
|
||||
className="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user