71 lines
2 KiB
TypeScript
71 lines
2 KiB
TypeScript
|
|
|
|
import { FormGenerator } from '../FormGenerator/FormGenerator';
|
|
import { Popup, EditForm } from '../ui/Popup';
|
|
import { useWorkflowsLogic } from './workflowsLogic';
|
|
import { WorkflowsTableProps } from './workflowsTypes';
|
|
import styles from './WorkflowsTable.module.css';
|
|
|
|
function WorkflowsTable({ className = '' }: WorkflowsTableProps) {
|
|
const logic = useWorkflowsLogic();
|
|
|
|
// Show error state
|
|
if (logic.error) {
|
|
return (
|
|
<div className={`${styles.workflowsTable} ${className}`}>
|
|
<div className={styles.errorState}>
|
|
<p>Error loading workflows: {logic.error}</p>
|
|
<button onClick={logic.refetch} className={styles.retryButton}>
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={`${styles.workflowsTable} ${className}`}>
|
|
<FormGenerator
|
|
data={logic.workflows}
|
|
columns={logic.columns}
|
|
searchable={true}
|
|
filterable={true}
|
|
sortable={true}
|
|
resizable={true}
|
|
pagination={true}
|
|
pageSize={10}
|
|
loading={logic.loading}
|
|
actions={logic.actions}
|
|
onDelete={logic.handleDeleteSingle}
|
|
onDeleteMultiple={logic.handleDeleteMultiple}
|
|
onRefresh={logic.refetch}
|
|
className={styles.workflowsFormGenerator}
|
|
onRowClick={(workflow: any) => {
|
|
// TODO: Navigate to workflow detail view
|
|
console.log('Clicked workflow:', workflow);
|
|
}}
|
|
/>
|
|
|
|
{/* Edit Workflow Modal */}
|
|
<Popup
|
|
isOpen={logic.editModalOpen}
|
|
title="Edit Workflow"
|
|
onClose={logic.handleCancelEdit}
|
|
size="small"
|
|
>
|
|
{logic.editingWorkflow && (
|
|
<EditForm
|
|
data={logic.editingWorkflow}
|
|
fields={logic.editWorkflowFields}
|
|
onSave={logic.handleSaveWorkflow}
|
|
onCancel={logic.handleCancelEdit}
|
|
saveButtonText="Save"
|
|
cancelButtonText="Cancel"
|
|
/>
|
|
)}
|
|
</Popup>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default WorkflowsTable;
|