tasks to published refactor
This commit is contained in:
alorig
229
frontend/src/config/pages/published.config.tsx
Normal file
229
frontend/src/config/pages/published.config.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
/**
|
||||
* Published Page Configuration
|
||||
* Centralized config for Published page table, filters, and actions
|
||||
*/
|
||||
|
||||
import { Content } from '../../services/api';
|
||||
import Badge from '../../components/ui/badge/Badge';
|
||||
import { formatRelativeDate } from '../../utils/date';
|
||||
import { CheckCircleIcon, ArrowRightIcon } from '../../icons';
|
||||
import { STRUCTURE_LABELS, TYPE_LABELS } from '../structureMapping';
|
||||
|
||||
export interface ColumnConfig {
|
||||
key: string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
sortField?: string;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
width?: string;
|
||||
numeric?: boolean;
|
||||
date?: boolean;
|
||||
render?: (value: any, row: any) => React.ReactNode;
|
||||
toggleable?: boolean;
|
||||
toggleContentKey?: string;
|
||||
toggleContentLabel?: string;
|
||||
defaultVisible?: boolean;
|
||||
}
|
||||
|
||||
export interface FilterConfig {
|
||||
key: string;
|
||||
label: string;
|
||||
type: 'text' | 'select';
|
||||
placeholder?: string;
|
||||
options?: Array<{ value: string; label: string }>;
|
||||
}
|
||||
|
||||
export interface HeaderMetricConfig {
|
||||
label: string;
|
||||
accentColor: 'blue' | 'green' | 'amber' | 'purple';
|
||||
calculate: (data: { content: Content[]; totalCount: number }) => number;
|
||||
}
|
||||
|
||||
export interface PublishedPageConfig {
|
||||
columns: ColumnConfig[];
|
||||
filters: FilterConfig[];
|
||||
headerMetrics: HeaderMetricConfig[];
|
||||
}
|
||||
|
||||
export function createPublishedPageConfig(params: {
|
||||
searchTerm: string;
|
||||
setSearchTerm: (value: string) => void;
|
||||
statusFilter: string;
|
||||
setStatusFilter: (value: string) => void;
|
||||
publishStatusFilter: string;
|
||||
setPublishStatusFilter: (value: string) => void;
|
||||
setCurrentPage: (page: number) => void;
|
||||
activeSector: { id: number; name: string } | null;
|
||||
}): PublishedPageConfig {
|
||||
const showSectorColumn = !params.activeSector;
|
||||
|
||||
const columns: ColumnConfig[] = [
|
||||
{
|
||||
key: 'title',
|
||||
label: 'Title',
|
||||
sortable: true,
|
||||
sortField: 'title',
|
||||
toggleable: true,
|
||||
toggleContentKey: 'content_html',
|
||||
toggleContentLabel: 'Generated Content',
|
||||
render: (value: string, row: Content) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-medium text-gray-900 dark:text-white">
|
||||
{value || `Content #${row.id}`}
|
||||
</span>
|
||||
{row.external_url && (
|
||||
<a
|
||||
href={row.external_url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-600 transition-colors"
|
||||
title="View on WordPress"
|
||||
>
|
||||
<ArrowRightIcon className="w-4 h-4" />
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Content Status',
|
||||
sortable: true,
|
||||
sortField: 'status',
|
||||
width: '120px',
|
||||
render: (value: string) => {
|
||||
const statusConfig: Record<string, { color: 'warning' | 'success'; label: string }> = {
|
||||
draft: { color: 'warning', label: 'Draft' },
|
||||
published: { color: 'success', label: 'Published' },
|
||||
};
|
||||
const config = statusConfig[value] || { color: 'warning' as const, label: value };
|
||||
return (
|
||||
<Badge color={config.color} size="sm" variant="light">
|
||||
{config.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'wordpress_status',
|
||||
label: 'WordPress',
|
||||
sortable: false,
|
||||
width: '140px',
|
||||
render: (_value: any, row: Content) => {
|
||||
if (row.external_id && row.external_url) {
|
||||
return (
|
||||
<Badge color="success" size="sm" variant="light">
|
||||
<CheckCircleIcon className="w-3 h-3 mr-1" />
|
||||
Published
|
||||
</Badge>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Badge color="warning" size="sm" variant="light">
|
||||
Not Published
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'content_type',
|
||||
label: 'Type',
|
||||
sortable: true,
|
||||
sortField: 'content_type',
|
||||
width: '120px',
|
||||
render: (value: string) => (
|
||||
<Badge color="primary" size="sm" variant="light">
|
||||
{TYPE_LABELS[value] || value || '-'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'content_structure',
|
||||
label: 'Structure',
|
||||
sortable: true,
|
||||
sortField: 'content_structure',
|
||||
width: '150px',
|
||||
render: (value: string) => (
|
||||
<Badge color="info" size="sm" variant="light">
|
||||
{STRUCTURE_LABELS[value] || value || '-'}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'word_count',
|
||||
label: 'Words',
|
||||
sortable: true,
|
||||
sortField: 'word_count',
|
||||
numeric: true,
|
||||
width: '100px',
|
||||
align: 'right' as const,
|
||||
render: (value: number) => (
|
||||
<span className="text-gray-900 dark:text-white">
|
||||
{value ? value.toLocaleString() : '-'}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
label: 'Created',
|
||||
sortable: true,
|
||||
sortField: 'created_at',
|
||||
date: true,
|
||||
width: '140px',
|
||||
render: (value: string) => (
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
{formatRelativeDate(value)}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const filters: FilterConfig[] = [
|
||||
{
|
||||
key: 'search',
|
||||
label: 'Search',
|
||||
type: 'text',
|
||||
placeholder: 'Search published content...',
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
label: 'Content Status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ value: '', label: 'All Statuses' },
|
||||
{ value: 'draft', label: 'Draft' },
|
||||
{ value: 'published', label: 'Published' },
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'publishStatus',
|
||||
label: 'WordPress Status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ value: '', label: 'All' },
|
||||
{ value: 'published', label: 'Published to WP' },
|
||||
{ value: 'not_published', label: 'Not Published' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
const headerMetrics: HeaderMetricConfig[] = [
|
||||
{
|
||||
label: 'Total Published',
|
||||
accentColor: 'green',
|
||||
calculate: (data: { totalCount: number }) => data.totalCount,
|
||||
},
|
||||
{
|
||||
label: 'On WordPress',
|
||||
accentColor: 'blue',
|
||||
calculate: (data: { content: Content[] }) =>
|
||||
data.content.filter(c => c.external_id).length,
|
||||
},
|
||||
];
|
||||
|
||||
return {
|
||||
columns,
|
||||
filters,
|
||||
headerMetrics,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user