mirror of
https://github.com/Dvorinka/MyClubServer.git
synced 2026-06-04 02:32:57 +00:00
dev day #65
This commit is contained in:
Tomas Dvorak
@@ -0,0 +1,177 @@
|
||||
.data-table-container {
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-table thead {
|
||||
background: #f9fafb;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
padding: 12px 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: #374151;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.data-table-sortable {
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.data-table-sortable:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.data-table-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.data-table-sort-icon {
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
font-size: 14px;
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.data-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Striped rows */
|
||||
.data-table-striped tbody tr:nth-child(even) {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
/* Hoverable rows */
|
||||
.data-table-hoverable tbody tr {
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.data-table-hoverable tbody tr:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
/* Clickable rows */
|
||||
.data-table-row-clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Selected rows */
|
||||
.data-table-row-selected {
|
||||
background: #dbeafe !important;
|
||||
}
|
||||
|
||||
/* Alignment */
|
||||
.data-table-align-left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.data-table-align-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-table-align-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Select column */
|
||||
.data-table-select-col {
|
||||
width: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.data-table-select-col input[type="checkbox"] {
|
||||
cursor: pointer;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* Actions column */
|
||||
.data-table-actions-col {
|
||||
width: 120px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Loading state */
|
||||
.data-table-loading-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #e5e7eb;
|
||||
border-top-color: #3b82f6;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.data-table-loading-overlay p {
|
||||
margin-top: 16px;
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Empty state */
|
||||
.data-table-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 60px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.data-table-empty p {
|
||||
color: #6b7280;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 8px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.data-table-header-content {
|
||||
gap: 4px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,216 @@
|
||||
import React, { useMemo } from 'react';
|
||||
import './DataTable.css';
|
||||
|
||||
export interface Column<T> {
|
||||
key: keyof T | string;
|
||||
label: string;
|
||||
sortable?: boolean;
|
||||
render?: (item: T, index: number) => React.ReactNode;
|
||||
width?: string;
|
||||
align?: 'left' | 'center' | 'right';
|
||||
}
|
||||
|
||||
export interface SortConfig {
|
||||
field: string;
|
||||
order: 'asc' | 'desc';
|
||||
}
|
||||
|
||||
export interface DataTableProps<T> {
|
||||
data: T[];
|
||||
columns: Column<T>[];
|
||||
keyField?: keyof T;
|
||||
loading?: boolean;
|
||||
emptyMessage?: string;
|
||||
sortConfig?: SortConfig | null;
|
||||
onSort?: (field: string) => void;
|
||||
onRowClick?: (item: T, index: number) => void;
|
||||
selectable?: boolean;
|
||||
selectedIds?: Set<number | string>;
|
||||
onToggleSelect?: (id: number | string) => void;
|
||||
onToggleSelectAll?: () => void;
|
||||
isAllSelected?: boolean;
|
||||
isSomeSelected?: boolean;
|
||||
actions?: (item: T, index: number) => React.ReactNode;
|
||||
className?: string;
|
||||
striped?: boolean;
|
||||
hoverable?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enhanced data table component with sorting, selection, and custom rendering
|
||||
* Works seamlessly with usePaginatedData, useQueryBuilder, and useBatchSelection hooks
|
||||
*
|
||||
* @example
|
||||
* const { data, loading, setSort } = usePaginatedData('/articles');
|
||||
* const selection = useBatchSelection(data, 'id');
|
||||
*
|
||||
* <DataTable
|
||||
* data={data}
|
||||
* columns={columns}
|
||||
* loading={loading}
|
||||
* onSort={setSort}
|
||||
* selectable
|
||||
* selectedIds={selection.selectedIds}
|
||||
* onToggleSelect={selection.toggle}
|
||||
* onToggleSelectAll={selection.toggleAll}
|
||||
* />
|
||||
*/
|
||||
export function DataTable<T extends Record<string, any>>({
|
||||
data,
|
||||
columns,
|
||||
keyField = 'id' as keyof T,
|
||||
loading = false,
|
||||
emptyMessage = 'No data available',
|
||||
sortConfig,
|
||||
onSort,
|
||||
onRowClick,
|
||||
selectable = false,
|
||||
selectedIds,
|
||||
onToggleSelect,
|
||||
onToggleSelectAll,
|
||||
isAllSelected = false,
|
||||
isSomeSelected = false,
|
||||
actions,
|
||||
className = '',
|
||||
striped = true,
|
||||
hoverable = true,
|
||||
}: DataTableProps<T>) {
|
||||
const tableClasses = useMemo(() => {
|
||||
const classes = ['data-table'];
|
||||
if (striped) classes.push('data-table-striped');
|
||||
if (hoverable) classes.push('data-table-hoverable');
|
||||
if (loading) classes.push('data-table-loading');
|
||||
if (className) classes.push(className);
|
||||
return classes.join(' ');
|
||||
}, [striped, hoverable, loading, className]);
|
||||
|
||||
const handleSort = (field: string, sortable?: boolean) => {
|
||||
if (sortable && onSort) {
|
||||
onSort(field);
|
||||
}
|
||||
};
|
||||
|
||||
const getSortIcon = (field: string) => {
|
||||
if (!sortConfig || sortConfig.field !== field) {
|
||||
return '⇅';
|
||||
}
|
||||
return sortConfig.order === 'asc' ? '↑' : '↓';
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<div className="data-table-loading-overlay">
|
||||
<div className="spinner"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<div className="data-table-empty">
|
||||
<p>{emptyMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="data-table-container">
|
||||
<table className={tableClasses}>
|
||||
<thead>
|
||||
<tr>
|
||||
{selectable && (
|
||||
<th className="data-table-select-col">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAllSelected}
|
||||
ref={(input) => {
|
||||
if (input) {
|
||||
input.indeterminate = isSomeSelected;
|
||||
}
|
||||
}}
|
||||
onChange={onToggleSelectAll}
|
||||
aria-label="Select all rows"
|
||||
/>
|
||||
</th>
|
||||
)}
|
||||
{columns.map((column) => (
|
||||
<th
|
||||
key={String(column.key)}
|
||||
className={`
|
||||
${column.sortable ? 'data-table-sortable' : ''}
|
||||
data-table-align-${column.align || 'left'}
|
||||
`}
|
||||
style={{ width: column.width }}
|
||||
onClick={() => handleSort(String(column.key), column.sortable)}
|
||||
>
|
||||
<div className="data-table-header-content">
|
||||
<span>{column.label}</span>
|
||||
{column.sortable && (
|
||||
<span className="data-table-sort-icon">
|
||||
{getSortIcon(String(column.key))}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
{actions && <th className="data-table-actions-col">Actions</th>}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{data.map((item, index) => {
|
||||
const itemId = item[keyField];
|
||||
const isSelected = selectedIds?.has(itemId) || false;
|
||||
|
||||
return (
|
||||
<tr
|
||||
key={String(itemId)}
|
||||
className={`
|
||||
${isSelected ? 'data-table-row-selected' : ''}
|
||||
${onRowClick ? 'data-table-row-clickable' : ''}
|
||||
`}
|
||||
onClick={() => onRowClick?.(item, index)}
|
||||
>
|
||||
{selectable && (
|
||||
<td
|
||||
className="data-table-select-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isSelected}
|
||||
onChange={() => onToggleSelect?.(itemId)}
|
||||
aria-label={`Select row ${index + 1}`}
|
||||
/>
|
||||
</td>
|
||||
)}
|
||||
{columns.map((column) => (
|
||||
<td
|
||||
key={String(column.key)}
|
||||
className={`data-table-align-${column.align || 'left'}`}
|
||||
>
|
||||
{column.render
|
||||
? column.render(item, index)
|
||||
: String(item[column.key] ?? '')}
|
||||
</td>
|
||||
))}
|
||||
{actions && (
|
||||
<td
|
||||
className="data-table-actions-col"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{actions(item, index)}
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,127 @@
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
border-left: 4px solid;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
color: #666;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* Success */
|
||||
.toast-success {
|
||||
border-left-color: #10b981;
|
||||
}
|
||||
|
||||
.toast-success .toast-icon {
|
||||
background: #d1fae5;
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
/* Error */
|
||||
.toast-error {
|
||||
border-left-color: #ef4444;
|
||||
}
|
||||
|
||||
.toast-error .toast-icon {
|
||||
background: #fee2e2;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Warning */
|
||||
.toast-warning {
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.toast-warning .toast-icon {
|
||||
background: #fef3c7;
|
||||
color: #f59e0b;
|
||||
}
|
||||
|
||||
/* Info */
|
||||
.toast-info {
|
||||
border-left-color: #3b82f6;
|
||||
}
|
||||
|
||||
.toast-info .toast-icon {
|
||||
background: #dbeafe;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 640px) {
|
||||
.toast-container {
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import { Toast } from '../../hooks/useToast';
|
||||
import './ToastContainer.css';
|
||||
|
||||
interface ToastContainerProps {
|
||||
toasts: Toast[];
|
||||
onDismiss: (id: string) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Container component for displaying toast notifications
|
||||
* Use with the useToast hook
|
||||
*
|
||||
* @example
|
||||
* const toast = useToast();
|
||||
* return <ToastContainer toasts={toast.toasts} onDismiss={toast.dismiss} />
|
||||
*/
|
||||
export const ToastContainer: React.FC<ToastContainerProps> = ({ toasts, onDismiss }) => {
|
||||
if (toasts.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="toast-container">
|
||||
{toasts.map((toast) => (
|
||||
<ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface ToastItemProps {
|
||||
toast: Toast;
|
||||
onDismiss: (id: string) => void;
|
||||
}
|
||||
|
||||
const ToastItem: React.FC<ToastItemProps> = ({ toast, onDismiss }) => {
|
||||
const getIcon = () => {
|
||||
switch (toast.type) {
|
||||
case 'success':
|
||||
return '✓';
|
||||
case 'error':
|
||||
return '✕';
|
||||
case 'warning':
|
||||
return '⚠';
|
||||
case 'info':
|
||||
return 'ℹ';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`toast toast-${toast.type}`} role="alert">
|
||||
<div className="toast-icon">{getIcon()}</div>
|
||||
<div className="toast-message">{toast.message}</div>
|
||||
<button
|
||||
className="toast-close"
|
||||
onClick={() => onDismiss(toast.id)}
|
||||
aria-label="Close notification"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,233 @@
|
||||
.article-list-example {
|
||||
padding: 24px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: #111827;
|
||||
}
|
||||
|
||||
.filters-bar {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
min-width: 250px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.filter-select {
|
||||
padding: 10px 16px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.filter-select:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: #eff6ff;
|
||||
border: 1px solid #bfdbfe;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.selected-count {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
padding: 16px;
|
||||
background: #fef2f2;
|
||||
border: 1px solid #fecaca;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.error-message p {
|
||||
margin: 0;
|
||||
color: #991b1b;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-draft {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.table-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
padding: 4px;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
.pagination {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.pagination-info {
|
||||
font-size: 14px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6b7280;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #4b5563;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: #6b7280;
|
||||
border: 1px solid #d1d5db;
|
||||
}
|
||||
|
||||
.btn-ghost:hover:not(:disabled) {
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.article-list-example {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filters-bar {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,284 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { usePaginatedData } from '../../hooks/usePaginatedData';
|
||||
import { useApiDelete } from '../../hooks/useApiMutation';
|
||||
import { useBatchSelection } from '../../hooks/useBatchSelection';
|
||||
import { useToast } from '../../hooks/useToast';
|
||||
import { DataTable, Column } from '../common/DataTable';
|
||||
import { ToastContainer } from '../common/ToastContainer';
|
||||
import { exportToCSV, getExportFilename } from '../../utils/export';
|
||||
import './ArticleListExample.css';
|
||||
|
||||
interface Article {
|
||||
id: number;
|
||||
title: string;
|
||||
published: boolean;
|
||||
created_at: string;
|
||||
author?: {
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Complete example showing how to use all the new utility hooks and components
|
||||
* This demonstrates:
|
||||
* - usePaginatedData for fetching with pagination, search, sort, filters
|
||||
* - useBatchSelection for selecting multiple items
|
||||
* - useApiDelete for deleting items
|
||||
* - useToast for notifications
|
||||
* - DataTable for displaying data
|
||||
* - Export utilities
|
||||
*/
|
||||
export const ArticleListExample: React.FC = () => {
|
||||
// Data fetching with pagination, search, sort, filters
|
||||
const {
|
||||
data: articles,
|
||||
meta,
|
||||
loading,
|
||||
error,
|
||||
setPage,
|
||||
setSearch,
|
||||
setSort,
|
||||
setFilters,
|
||||
refresh,
|
||||
} = usePaginatedData<Article>('/articles', {
|
||||
page_size: 20,
|
||||
});
|
||||
|
||||
// Batch selection
|
||||
const selection = useBatchSelection<Article>(articles, 'id');
|
||||
|
||||
// Update selection when articles change
|
||||
useEffect(() => {
|
||||
selection.setItems(articles);
|
||||
}, [articles]);
|
||||
|
||||
// Toast notifications
|
||||
const toast = useToast();
|
||||
|
||||
// Delete mutation
|
||||
const deleteArticle = useApiDelete<void, { id: number }>((data) => `/articles/${data.id}`);
|
||||
|
||||
// Local state
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [publishedFilter, setPublishedFilter] = useState<string>('all');
|
||||
|
||||
// Handle search input
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const value = e.target.value;
|
||||
setSearchTerm(value);
|
||||
// Debounce search
|
||||
const timeoutId = setTimeout(() => {
|
||||
setSearch(value);
|
||||
}, 500);
|
||||
return () => clearTimeout(timeoutId);
|
||||
};
|
||||
|
||||
// Handle filter change
|
||||
const handleFilterChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
const value = e.target.value;
|
||||
setPublishedFilter(value);
|
||||
if (value === 'all') {
|
||||
setFilters({});
|
||||
} else {
|
||||
setFilters({ published: value === 'published' });
|
||||
}
|
||||
};
|
||||
|
||||
// Handle sort
|
||||
const handleSort = (field: string) => {
|
||||
// Toggle sort order
|
||||
setSort(field, 'desc'); // You'd want to track current order and toggle
|
||||
};
|
||||
|
||||
// Handle delete
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!window.confirm('Are you sure you want to delete this article?')) return;
|
||||
|
||||
const result = await deleteArticle.mutate({ id });
|
||||
if (result !== null) {
|
||||
toast.success('Article deleted successfully');
|
||||
refresh();
|
||||
} else {
|
||||
toast.error(deleteArticle.error || 'Failed to delete article');
|
||||
}
|
||||
};
|
||||
|
||||
// Handle batch delete
|
||||
const handleBatchDelete = async () => {
|
||||
const count = selection.selectedIds.size;
|
||||
if (!window.confirm(`Are you sure you want to delete ${count} articles?`)) return;
|
||||
|
||||
// In real implementation, you'd call a batch delete API
|
||||
toast.info(`Would delete ${count} articles`);
|
||||
selection.deselectAll();
|
||||
};
|
||||
|
||||
// Handle export
|
||||
const handleExport = () => {
|
||||
const filename = getExportFilename('articles', 'csv');
|
||||
const exportData = articles.map((article) => ({
|
||||
ID: article.id,
|
||||
Title: article.title,
|
||||
Published: article.published ? 'Yes' : 'No',
|
||||
Author: article.author?.name || 'Unknown',
|
||||
'Created At': new Date(article.created_at).toLocaleString(),
|
||||
}));
|
||||
exportToCSV(exportData, filename);
|
||||
toast.success('Articles exported successfully');
|
||||
};
|
||||
|
||||
// Table columns configuration
|
||||
const columns: Column<Article>[] = [
|
||||
{
|
||||
key: 'id',
|
||||
label: 'ID',
|
||||
sortable: true,
|
||||
width: '80px',
|
||||
},
|
||||
{
|
||||
key: 'title',
|
||||
label: 'Title',
|
||||
sortable: true,
|
||||
render: (article) => (
|
||||
<div className="article-title">
|
||||
<strong>{article.title}</strong>
|
||||
{!article.published && <span className="badge badge-draft">Draft</span>}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'author',
|
||||
label: 'Author',
|
||||
render: (article) => article.author?.name || 'Unknown',
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
label: 'Created',
|
||||
sortable: true,
|
||||
render: (article) => new Date(article.created_at).toLocaleDateString(),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="article-list-example">
|
||||
<ToastContainer toasts={toast.toasts} onDismiss={toast.dismiss} />
|
||||
|
||||
<div className="page-header">
|
||||
<h1>Articles</h1>
|
||||
<button className="btn btn-primary" onClick={refresh}>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Filters and Search */}
|
||||
<div className="filters-bar">
|
||||
<div className="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search articles..."
|
||||
value={searchTerm}
|
||||
onChange={handleSearchChange}
|
||||
className="search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={publishedFilter}
|
||||
onChange={handleFilterChange}
|
||||
className="filter-select"
|
||||
>
|
||||
<option value="all">All Articles</option>
|
||||
<option value="published">Published</option>
|
||||
<option value="draft">Drafts</option>
|
||||
</select>
|
||||
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={handleExport}
|
||||
disabled={articles.length === 0}
|
||||
>
|
||||
Export CSV
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Batch Actions */}
|
||||
{selection.selectedIds.size > 0 && (
|
||||
<div className="batch-actions">
|
||||
<span className="selected-count">
|
||||
{selection.selectedIds.size} article(s) selected
|
||||
</span>
|
||||
<button className="btn btn-danger" onClick={handleBatchDelete}>
|
||||
Delete Selected
|
||||
</button>
|
||||
<button className="btn btn-ghost" onClick={selection.deselectAll}>
|
||||
Clear Selection
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error Message */}
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
<p>Error: {error}</p>
|
||||
<button onClick={refresh}>Retry</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Data Table */}
|
||||
<DataTable
|
||||
data={articles}
|
||||
columns={columns}
|
||||
loading={loading}
|
||||
emptyMessage="No articles found"
|
||||
selectable
|
||||
selectedIds={selection.selectedIds}
|
||||
onToggleSelect={selection.toggle}
|
||||
onToggleSelectAll={selection.toggleAll}
|
||||
isAllSelected={selection.isAllSelected}
|
||||
isSomeSelected={selection.isSomeSelected}
|
||||
onSort={handleSort}
|
||||
actions={(article) => (
|
||||
<div className="table-actions">
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => console.log('Edit', article.id)}
|
||||
title="Edit"
|
||||
>
|
||||
✏️
|
||||
</button>
|
||||
<button
|
||||
className="btn-icon"
|
||||
onClick={() => handleDelete(article.id)}
|
||||
title="Delete"
|
||||
>
|
||||
🗑️
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
{/* Pagination */}
|
||||
{meta && meta.total_pages > 1 && (
|
||||
<div className="pagination">
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => setPage(meta.page - 1)}
|
||||
disabled={!meta.has_prev}
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
<span className="pagination-info">
|
||||
Page {meta.page} of {meta.total_pages} ({meta.total} total)
|
||||
</span>
|
||||
<button
|
||||
className="btn btn-sm"
|
||||
onClick={() => setPage(meta.page + 1)}
|
||||
disabled={!meta.has_next}
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user