salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Columns and columns visibility

Browse Source
This commit is contained in:
Desktop
2025-11-12 23:29:31 +05:00
parent 35b6cc6502
commit 5da2092873
12 changed files with 460 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

131
frontend/src/components/common/ColumnSelector.tsx Normal file
View File

@@ -0,0 +1,131 @@
/**
* ColumnSelector Component
* Dropdown with checkboxes to show/hide table columns
*/
import React, { useState, useRef, useEffect } from 'react';
import { ChevronDownIcon } from '../../icons';
import Checkbox from '../form/input/Checkbox';
interface ColumnSelectorProps {
columns: Array<{ key: string; label: string; defaultVisible?: boolean }>;
visibleColumns: Set<string>;
onToggleColumn: (columnKey: string) => void;
className?: string;
}
export default function ColumnSelector({
columns,
visibleColumns,
onToggleColumn,
className = '',
}: ColumnSelectorProps) {
const [isOpen, setIsOpen] = useState(false);
const dropdownRef = useRef<HTMLDivElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
// Close dropdown when clicking outside
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
dropdownRef.current &&
!dropdownRef.current.contains(event.target as Node) &&
buttonRef.current &&
!buttonRef.current.contains(event.target as Node)
) {
setIsOpen(false);
}
};
if (isOpen) {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}
}, [isOpen]);
const visibleCount = visibleColumns.size;
const totalCount = columns.length;
return (
<div className={`relative ${className}`}>
<button
ref={buttonRef}
type="button"
onClick={() => setIsOpen(!isOpen)}
className="inline-flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700 dark:hover:bg-gray-700 transition-colors"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
<span>Columns</span>
<span className="text-xs text-gray-500 dark:text-gray-400">
({visibleCount}/{totalCount})
</span>
<ChevronDownIcon className={`w-4 h-4 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
</button>
{isOpen && (
<div
ref={dropdownRef}
className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800 z-50 max-h-96 overflow-y-auto"
>
<div className="p-2">
<div className="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide border-b border-gray-200 dark:border-gray-700 mb-1">
Show Columns
</div>
<div className="space-y-1">
{columns.map((column) => {
const isVisible = visibleColumns.has(column.key);
return (
<label
key={column.key}
className="flex items-center gap-2 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
>
<Checkbox
checked={isVisible}
onChange={() => {
onToggleColumn(column.key);
}}
/>
<span className="text-sm text-gray-700 dark:text-gray-300 flex-1">
{column.label}
</span>
</label>
);
})}
</div>
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
<button
type="button"
onClick={() => {
// Show all columns
columns.forEach((col) => {
if (!visibleColumns.has(col.key)) {
onToggleColumn(col.key);
}
});
}}
className="w-full px-3 py-1.5 text-xs font-medium text-brand-600 hover:text-brand-700 hover:bg-brand-50 dark:text-brand-400 dark:hover:bg-brand-500/10 rounded-md transition-colors"
>
Show All
</button>
</div>
</div>
</div>
)}
</div>
);
}

46
frontend/src/config/pages/clusters.config.tsx
View File

@@ -27,6 +27,7 @@ export interface ColumnConfig {
align?: 'left' | 'center' | 'right';
width?: string;
render?: (value: any, row: any) => React.ReactNode;
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
export interface FormFieldConfig {
@@ -116,21 +117,24 @@ export const createClustersPageConfig = (
{
key: 'keywords_count',
label: 'Keywords',
sortable: false,
sortable: true,
sortField: 'keywords_count',
width: '120px',
render: (value: number) => value.toLocaleString(),
},
{
key: 'ideas_count',
label: 'Ideas',
sortable: false,
sortable: true,
sortField: 'ideas_count',
width: '120px',
render: (value: number) => value.toLocaleString(),
},
{
key: 'volume',
label: 'Volume',
sortable: false,
sortable: true,
sortField: 'volume',
width: '120px',
render: (value: number) => value.toLocaleString(),
},
@@ -138,7 +142,8 @@ export const createClustersPageConfig = (
...difficultyColumn,
key: 'difficulty',
label: 'Difficulty',
sortable: false,
sortable: true,
sortField: 'difficulty',
align: 'center' as const,
render: (value: number) => {
const difficultyNum = getDifficultyNumber(value);
@@ -179,7 +184,8 @@ export const createClustersPageConfig = (
{
key: 'content_count',
label: 'Content',
sortable: false,
sortable: true,
sortField: 'content_count',
width: '120px',
render: (value: number) => value.toLocaleString(),
},
@@ -202,6 +208,36 @@ export const createClustersPageConfig = (
sortField: 'created_at',
render: (value: string) => formatRelativeDate(value),
},
// Optional columns - hidden by default
{
key: 'description',
label: 'Description',
sortable: false,
defaultVisible: false,
width: '250px',
render: (value: string | null) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
{value || '-'}
</span>
),
},
{
key: 'mapped_pages',
label: 'Mapped Pages',
sortable: true,
sortField: 'mapped_pages',
defaultVisible: false,
width: '120px',
render: (value: number) => value.toLocaleString(),
},
{
key: 'updated_at',
label: 'Updated',
sortable: true,
sortField: 'updated_at',
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
],
filters: [
{

48
frontend/src/config/pages/content.config.tsx
View File

@@ -27,6 +27,7 @@ export interface ColumnConfig {
toggleable?: boolean;
toggleContentKey?: string;
toggleContentLabel?: string;
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
export interface FilterConfig {
@@ -124,7 +125,8 @@ export const createContentPageConfig = (
{
key: 'primary_keyword',
label: 'Primary Keyword',
sortable: false,
sortable: true,
sortField: 'primary_keyword',
width: '150px',
render: (value: string, row: Content) => (
row.primary_keyword ? (
@@ -262,6 +264,50 @@ export const createContentPageConfig = (
);
},
},
// Optional columns - hidden by default
{
key: 'task_title',
label: 'Task Title',
sortable: true,
sortField: 'task_id',
defaultVisible: false,
width: '200px',
render: (_value: string, row: Content) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
{row.task_title || '-'}
</span>
),
},
{
key: 'post_url',
label: 'Post URL',
sortable: false,
defaultVisible: false,
width: '200px',
render: (value: string | null, row: Content) => {
const url = value || row.post_url || null;
return url ? (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 truncate block max-w-[200px]"
>
{url}
</a>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
);
},
},
{
key: 'updated_at',
label: 'Updated',
sortable: true,
sortField: 'updated_at',
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
],
filters: [
{

13
frontend/src/config/pages/ideas.config.tsx
View File

@@ -22,6 +22,7 @@ export interface ColumnConfig {
align?: 'left' | 'center' | 'right';
width?: string;
render?: (value: any, row: any) => React.ReactNode;
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
export interface FormFieldConfig {
@@ -150,7 +151,8 @@ export const createIdeasPageConfig = (
{
key: 'keyword_cluster_name',
label: 'Cluster',
sortable: false,
sortable: true,
sortField: 'keyword_cluster_id',
width: '200px',
render: (_value: string, row: ContentIdea) => row.keyword_cluster_name || '-',
},
@@ -188,6 +190,15 @@ export const createIdeasPageConfig = (
sortField: 'created_at',
render: (value: string) => formatRelativeDate(value),
},
// Optional columns - hidden by default
{
key: 'updated_at',
label: 'Updated',
sortable: true,
sortField: 'updated_at',
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
],
filters: [
{

7
frontend/src/config/pages/images.config.tsx
View File

@@ -18,6 +18,7 @@ export interface ColumnConfig {
align?: 'left' | 'center' | 'right';
width?: string;
render?: (value: any, row: any) => React.ReactNode;
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
export interface FilterConfig {
@@ -60,7 +61,8 @@ export const createImagesPageConfig = (
{
key: 'content_title',
label: 'Content Title',
sortable: false,
sortable: true,
sortField: 'content_title',
width: '250px',
render: (_value: string, row: ContentImagesGroup) => (
<div>
@@ -105,7 +107,8 @@ export const createImagesPageConfig = (
columns.push({
key: 'overall_status',
label: 'Status',
sortable: false,
sortable: true,
sortField: 'overall_status',
width: '180px',
render: (value: string, row: ContentImagesGroup) => {
const statusColors: Record<string, 'success' | 'warning' | 'error' | 'info'> = {

50
frontend/src/config/pages/keywords.config.tsx
View File

@@ -36,6 +36,7 @@ export interface ColumnConfig {
align?: 'left' | 'center' | 'right';
width?: string;
render?: (value: any, row: any) => React.ReactNode;
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
// BulkActionConfig and RowActionConfig are now in table-actions.config.tsx
@@ -163,7 +164,8 @@ export const createKeywordsPageConfig = (
},
{
...clusterColumn,
sortable: false,
sortable: true,
sortField: 'cluster_id',
render: (_value: string, row: Keyword) => row.cluster_name || '-',
},
{
@@ -264,6 +266,52 @@ export const createKeywordsPageConfig = (
sortField: 'created_at',
render: (value: string) => formatRelativeDate(value),
},
// Optional columns - hidden by default
{
key: 'updated_at',
label: 'Updated',
sortable: true,
sortField: 'updated_at',
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
{
key: 'volume_override',
label: 'Volume Override',
sortable: true,
sortField: 'volume_override',
defaultVisible: false,
render: (value: number | null) => value ? value.toLocaleString() : '-',
},
{
key: 'difficulty_override',
label: 'Difficulty Override',
sortable: true,
sortField: 'difficulty_override',
defaultVisible: false,
align: 'center' as const,
render: (value: number | null) => {
if (value === null || value === undefined) return '-';
const difficultyNum = getDifficultyNumber(value);
return typeof difficultyNum === 'number' ? (
<Badge
color={
difficultyNum === 1 || difficultyNum === 2
? 'success'
: difficultyNum === 3
? 'warning'
: 'error'
}
variant={difficultyNum === 5 ? 'solid' : 'light'}
size="sm"
>
{difficultyNum}
</Badge>
) : (
difficultyNum
);
},
},
],
filters: [
{

81
frontend/src/config/pages/tasks.config.tsx
View File

@@ -26,6 +26,7 @@ export interface ColumnConfig {
toggleable?: boolean; // If true, this column will have a toggle button for expanding content
toggleContentKey?: string; // Key of the field containing content to display when toggled
toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline", "Generated Content")
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
export interface FormFieldConfig {
@@ -115,7 +116,8 @@ export const createTasksPageConfig = (
{
key: 'cluster_name',
label: 'Cluster',
sortable: false,
sortable: true,
sortField: 'cluster_id',
width: '200px',
render: (_value: string, row: Task) => row.cluster_name || '-',
},
@@ -176,6 +178,83 @@ export const createTasksPageConfig = (
sortField: 'created_at',
render: (value: string) => formatRelativeDate(value),
},
// Optional columns - hidden by default
{
key: 'idea_title',
label: 'Idea',
sortable: true,
sortField: 'idea_id',
defaultVisible: false,
width: '200px',
render: (_value: string, row: Task) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
{row.idea_title || '-'}
</span>
),
},
{
key: 'keywords',
label: 'Keywords',
sortable: false,
defaultVisible: false,
width: '200px',
render: (value: string | null) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
{value || '-'}
</span>
),
},
{
key: 'meta_title',
label: 'Meta Title',
sortable: false,
defaultVisible: false,
width: '200px',
render: (value: string | null) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[200px]">
{value || '-'}
</span>
),
},
{
key: 'meta_description',
label: 'Meta Description',
sortable: false,
defaultVisible: false,
width: '250px',
render: (value: string | null) => (
<span className="text-sm text-gray-600 dark:text-gray-400 truncate block max-w-[250px]">
{value || '-'}
</span>
),
},
{
key: 'post_url',
label: 'Post URL',
sortable: false,
defaultVisible: false,
width: '200px',
render: (value: string | null) => value ? (
<a
href={value}
target="_blank"
rel="noopener noreferrer"
className="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300 truncate block max-w-[200px]"
>
{value}
</a>
) : (
<span className="text-sm text-gray-400 dark:text-gray-500">-</span>
),
},
{
key: 'updated_at',
label: 'Updated',
sortable: true,
sortField: 'updated_at',
defaultVisible: false,
render: (value: string) => formatRelativeDate(value),
},
],
filters: [
{

2
frontend/src/pages/Planner/Clusters.tsx
View File

@@ -387,7 +387,7 @@ export default function Clusters() {
<>
<PageHeader
title="Keyword Clusters"
badge={{ icon: <GroupIcon />, color: 'green' }}
badge={{ icon: <GroupIcon />, color: 'purple' }}
/>
<TablePageTemplate
columns={pageConfig.columns}

2
frontend/src/pages/Planner/Keywords.tsx
View File

@@ -754,7 +754,7 @@ export default function Keywords() {
<>
<PageHeader
title="Keywords"
badge={{ icon: <ListIcon />, color: 'blue' }}
badge={{ icon: <ListIcon />, color: 'green' }}
/>
<TablePageTemplate
columns={pageConfig.columns}

2
frontend/src/pages/Writer/Dashboard.tsx
View File

@@ -552,7 +552,7 @@ export default function WriterDashboard() {
lastUpdated={lastUpdated}
showRefresh={true}
onRefresh={fetchDashboardData}
badge={{ icon: <PencilIcon />, color: 'green' }}
badge={{ icon: <PencilIcon />, color: 'blue' }}
/>
{/* Hero Section - Key Metric */}

2
frontend/src/pages/Writer/Images.tsx
View File

@@ -387,7 +387,7 @@ export default function Images() {
<>
<PageHeader
title="Content Images"
badge={{ icon: <FileIcon />, color: 'purple' }}
badge={{ icon: <FileIcon />, color: 'orange' }}
/>
<TablePageTemplate
columns={pageConfig.columns}

98
frontend/src/templates/TablePageTemplate.tsx
View File

@@ -40,6 +40,7 @@ import BulkStatusUpdateModal from '../components/common/BulkStatusUpdateModal';
import { CompactPagination } from '../components/ui/pagination';
import { usePageSizeStore } from '../store/pageSizeStore';
import ToggleTableRow, { ToggleButton } from '../components/common/ToggleTableRow';
import ColumnSelector from '../components/common/ColumnSelector';
interface ColumnConfig {
key: string;
@@ -56,6 +57,7 @@ interface ColumnConfig {
toggleable?: boolean; // If true, this column will have a toggle button for expanding content
toggleContentKey?: string; // Key of the field containing content to display when toggled
toggleContentLabel?: string; // Label for the expanded content (e.g., "Content Outline")
defaultVisible?: boolean; // Whether column is visible by default (default: true)
}
interface FilterConfig {
@@ -223,6 +225,78 @@ export default function TablePageTemplate({
const toast = useToast();
const { pageSize, setPageSize } = usePageSizeStore();
// Column visibility state management with localStorage persistence
const getStorageKey = () => {
// Use pathname to create unique storage key per page
return `table-columns-${location.pathname}`;
};
// Initialize visible columns from localStorage or defaults
const initializeVisibleColumns = () => {
const storageKey = getStorageKey();
try {
const saved = localStorage.getItem(storageKey);
if (saved) {
const savedSet = new Set(JSON.parse(saved));
// Validate that all saved columns still exist
const validColumns = columns.filter(col => savedSet.has(col.key));
if (validColumns.length > 0) {
// Add any new columns with defaultVisible !== false
const newColumns = columns
.filter(col => !savedSet.has(col.key) && col.defaultVisible !== false)
.map(col => col.key);
return new Set([...Array.from(validColumns.map(col => col.key)), ...newColumns]);
}
}
} catch (e) {
// Ignore parse errors
}
// Default: show all columns that have defaultVisible !== false
return new Set(
columns
.filter(col => col.defaultVisible !== false)
.map(col => col.key)
);
};
const [visibleColumns, setVisibleColumns] = useState<Set<string>>(initializeVisibleColumns);
// Update visible columns when columns prop changes (e.g., when switching pages)
useEffect(() => {
const newVisibleColumns = initializeVisibleColumns();
setVisibleColumns(newVisibleColumns);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [location.pathname]); // Re-initialize when pathname changes
// Save to localStorage whenever visibleColumns changes
useEffect(() => {
const storageKey = getStorageKey();
try {
localStorage.setItem(storageKey, JSON.stringify(Array.from(visibleColumns)));
} catch (e) {
// Ignore storage errors
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [visibleColumns, location.pathname]);
// Filter columns based on visibility
const visibleColumnsList = useMemo(() => {
return columns.filter(col => visibleColumns.has(col.key));
}, [columns, visibleColumns]);
// Toggle column visibility
const handleToggleColumn = (columnKey: string) => {
setVisibleColumns(prev => {
const newSet = new Set(prev);
if (newSet.has(columnKey)) {
newSet.delete(columnKey);
} else {
newSet.add(columnKey);
}
return newSet;
});
};
// Sync selectedIds with selection prop
// Use JSON.stringify to compare array contents, not just reference, to avoid unnecessary updates
const selectedIdsKey = selection?.selectedIds ? JSON.stringify(selection.selectedIds) : '';
@@ -648,7 +722,17 @@ export default function TablePageTemplate({
)}
{/* Action Buttons - Right aligned */}
<div className="flex gap-2">
<div className="flex gap-2 items-center">
{/* Column Selector */}
<ColumnSelector
columns={columns.map(col => ({
key: col.key,
label: col.label,
defaultVisible: col.defaultVisible !== false,
}))}
visibleColumns={visibleColumns}
onToggleColumn={handleToggleColumn}
/>
{onExportCSV && (
<Button
variant="secondary"
@@ -706,8 +790,8 @@ export default function TablePageTemplate({
)}
</TableCell>
)}
{columns.map((column, colIndex) => {
const isLastColumn = colIndex === columns.length - 1;
{visibleColumnsList.map((column, colIndex) => {
const isLastColumn = colIndex === visibleColumnsList.length - 1;
return (
<TableCell
key={column.key}
@@ -736,7 +820,7 @@ export default function TablePageTemplate({
Array.from({ length: 10 }).map((_, index) => (
<TableRow key={`skeleton-${index}`} className="igny8-skeleton-row">
{selection && <TableCell><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>}
{columns.map((_, colIndex) => (
{visibleColumnsList.map((_, colIndex) => (
<TableCell key={colIndex}><div className="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div></TableCell>
))}
</TableRow>
@@ -760,7 +844,7 @@ export default function TablePageTemplate({
);
// Calculate colSpan for toggle row
const colSpan = (selection ? 1 : 0) + columns.length;
const colSpan = (selection ? 1 : 0) + visibleColumnsList.length;
const handleToggle = (expanded: boolean, id: string | number) => {
setExpandedRows(prev => {
@@ -795,8 +879,8 @@ export default function TablePageTemplate({
/>
</TableCell>
)}
{columns.map((column, colIndex) => {
const isLastColumn = colIndex === columns.length - 1;
{visibleColumnsList.map((column, colIndex) => {
const isLastColumn = colIndex === visibleColumnsList.length - 1;
const rowId = row.id || index;
// Get or create ref for this row's actions button