@elyx-code/editor-ui 0.0.2

package/src/lib/table/Table.tsx

@@ -0,0 +1,1069 @@
+import React, { useEffect, useState } from 'react';
+import { checkIsEmptyValue } from '@elyx-code/project-logic-tree';
+import './table.css';
+import Pagination from '../pagination/Pagination';
+import DropdownMenuPopup from '../dropdown/DropdownMenuPopup';
+import Button from '../button/Button';
+import { Tooltip as MuiTooltip } from '@mui/material';
+import TextField from '../text-field/TextField';
+import Tooltip from '../tooltip/Tooltip';
+import {
+	IndexedTableRowSelection,
+	ITableColumnUI,
+	ITableProps,
+	PrimaryKeyTableRowSelection,
+	TableRowSelection,
+	TableSortType
+} from './types';
+import RowForm from './RowForm';
+
+export function resolveColumnTooltip(column: ITableColumnUI): React.ReactNode {
+	return (
+		<div>
+			<p style={{ margin: 0, fontWeight: 'bold', fontSize: 18 }}>
+				{column.label}
+			</p>
+			<p
+				style={{
+					margin: 0,
+					fontSize: 12,
+					color: 'rgba(255, 255, 255, 0.7)'
+				}}
+			>
+				{column.dataTypeLabel
+					? column.dataTypeLabel
+					: column.type
+						? column.type.charAt(0).toUpperCase() +
+							column.type.slice(1)
+						: ''}
+			</p>
+
+			<br />
+			{column.primaryKey && (
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						color: 'rgba(255, 255, 255, 0.7)'
+					}}
+				>
+					Primary property
+				</p>
+			)}
+			{column.sortable && (
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						color: 'rgba(255, 255, 255, 0.7)'
+					}}
+				>
+					Sortable
+				</p>
+			)}
+			{column.searchable && (
+				<p
+					style={{
+						margin: 0,
+						fontSize: 12,
+						color: 'rgba(255, 255, 255, 0.7)'
+					}}
+				>
+					Searchable
+				</p>
+			)}
+			<p
+				style={{
+					margin: 0,
+					fontSize: 12,
+					color: 'rgba(255, 255, 255, 0.7)'
+				}}
+			>
+				{column.editable ? 'Editable' : 'Not editable'}
+			</p>
+
+			<br />
+
+			{column.sort && (
+				<span>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 12,
+							color: 'rgba(255, 255, 255, 0.7)'
+						}}
+					>
+						Used for sorting rows
+					</p>
+					<p
+						style={{
+							margin: 0,
+							fontSize: 12,
+							color: 'rgba(255, 255, 255, 0.7)'
+						}}
+					>
+						{column.sort === 'asc' ? 'Ascending' : 'Descending'}
+					</p>
+				</span>
+			)}
+		</div>
+	);
+}
+
+function getDefaultWidth(size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'): number {
+	switch (size) {
+		case 'xs':
+			return 60;
+		case 'sm':
+			return 100;
+		case 'md':
+			return 140;
+		case 'lg':
+			return 180;
+		case 'xl':
+			return 220;
+		default:
+			return 140;
+	}
+}
+
+export default function Table(props: ITableProps) {
+	const emptyMessage = props.emptyMessage || 'No data';
+	const hideCreate = props.hideCreate || false;
+	const hideSelection = props.hideSelection || false;
+	const hideRowActions = props.hideRowActions || false;
+	const hideDelete = props.hideDelete || false;
+
+	const [isCreating, setIsCreating] = useState<boolean>(false);
+	const [selection, setSelection] = useState<TableRowSelection[]>(
+		props.selection || []
+	);
+	const [selectedAllExistingRows, setSelectedAllExistingRows] =
+		useState<boolean>(false);
+	const [editingRow, setEditingRow] = useState<number | null>(null);
+
+	const { columns = [], rows = [], loading } = props;
+	const searches = props.searches || [];
+	const sorts = props.sorts || [];
+	const pagination = props.pagination;
+	const visibleColumns = (props.columns || [])
+		.filter((column) => !column.hidden)
+		.map((column) => column.value);
+	const filteredColumns = columns.filter((column) =>
+		visibleColumns.includes(column.value)
+	);
+
+	// Column resizing state (loaded from UserSettings)
+	const [widths, setWidths] = useState<Record<string, number>>(() => {
+		const saved = props.project?.userSettings?.columnWidths || {};
+		const initialWidths: Record<string, number> = {};
+		columns.forEach((col) => {
+			const key = `table-${props.tableKey}-col-${col.value}`;
+			initialWidths[col.value] = saved[key] || getDefaultWidth(col.size);
+		});
+		return initialWidths;
+	});
+
+	const columnsKey = columns.map((c) => c.value).join(',');
+	useEffect(() => {
+		const saved = props.project?.userSettings?.columnWidths || {};
+		const newWidths: Record<string, number> = {};
+		columns.forEach((col) => {
+			const key = `table-${props.tableKey}-col-${col.value}`;
+			newWidths[col.value] = saved[key] || getDefaultWidth(col.size);
+		});
+		setWidths(newWidths);
+	}, [props.tableKey, columnsKey, props.project]);
+
+	const startResize = (colValue: string, e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const startX = e.pageX;
+		const startWidth =
+			widths[colValue] ||
+			getDefaultWidth(columns.find((c) => c.value === colValue)?.size);
+
+		const handleMouseMove = (moveEvent: MouseEvent) => {
+			const deltaX = moveEvent.pageX - startX;
+			const newWidth = Math.max(60, startWidth + deltaX);
+			setWidths((prev) => ({
+				...prev,
+				[colValue]: newWidth
+			}));
+		};
+
+		const handleMouseUp = (upEvent: MouseEvent) => {
+			window.removeEventListener('mousemove', handleMouseMove);
+			window.removeEventListener('mouseup', handleMouseUp);
+
+			const deltaX = upEvent.pageX - startX;
+			const finalWidth = Math.max(60, startWidth + deltaX);
+
+			if (props.project?.userSettings) {
+				const currentSettings =
+					props.project.userSettings.columnWidths || {};
+				const key = `table-${props.tableKey}-col-${colValue}`;
+				const updatedSettings = {
+					...currentSettings,
+					[key]: finalWidth
+				};
+				props.project.userSettings.set('columnWidths', updatedSettings);
+			}
+		};
+
+		window.addEventListener('mousemove', handleMouseMove);
+		window.addEventListener('mouseup', handleMouseUp);
+	};
+
+	const allAreSelected =
+		!!selection.length && !!rows.length && selection.length === rows.length;
+	const totalItems = props.totalItems || 0;
+
+	let primaryKeyColumnIndex = -1;
+	const primaryKeyColumnName = columns.find((column, i) => {
+		if (column.primaryKey) {
+			primaryKeyColumnIndex = i;
+			return true;
+		}
+
+		return false;
+	})?.value;
+
+	useEffect(() => {
+		setSelection(props.selection || []);
+	}, [props.selection]);
+
+	const handleSelectionChange = (newSelection: TableRowSelection[]) => {
+		setSelection(newSelection);
+
+		if (!props.onSelection) {
+			return;
+		}
+
+		props.onSelection?.(newSelection);
+	};
+
+	const onSelectAllClick = (checked: boolean) => {
+		// Add all rows to the selection array
+		if (checked) {
+			handleSelectionChange(
+				props.rows.map((_, i) => {
+					if (primaryKeyColumnName) {
+						return {
+							primaryKey:
+								props.rows[i].data[
+									primaryKeyColumnIndex
+								].value.toString() || ''
+						};
+					}
+
+					return { index: i };
+				})
+			);
+		} else {
+			handleSelectionChange([]);
+		}
+	};
+
+	return (
+		<div className="ds_table" key={props.tableKey}>
+			<div style={{ overflowX: 'auto', minWidth: '100%' }}>
+				<table>
+					<div style={{ overflowX: 'scroll' }}>
+						<thead
+							style={{ width: '100%', display: 'inline-grid' }}
+						>
+							<tr className="ds_table-head">
+								<span className="ds_table-row-cell-group">
+									{!hideSelection && (
+										<th className="ds_table-head-cell ds_table-column__size-xs ds_table-head-cell-checkbox">
+											{!loading && !!rows.length && (
+												<input
+													type="checkbox"
+													className="ds_table-row-cell-checkbox-input"
+													checked={allAreSelected}
+													disabled={
+														isCreating ||
+														editingRow !== null
+													}
+													onChange={() =>
+														onSelectAllClick(
+															!allAreSelected
+														)
+													}
+												/>
+											)}
+										</th>
+									)}
+									{(isCreating || editingRow !== null
+										? columns
+										: filteredColumns
+									).map((column) => {
+										const search = searches.find(
+											(search) =>
+												search.column === column.value
+										);
+										const sort = sorts.find(
+											(sort) =>
+												sort.column === column.value
+										);
+
+										const width = widths[column.value];
+										const thStyle: React.CSSProperties = {
+											position: 'relative',
+											...(width
+												? {
+														width: `${width}px`,
+														flexShrink: 0
+													}
+												: {})
+										};
+
+										return (
+											<MuiTooltip
+												key={
+													props.tableKey +
+													'--' +
+													column.value
+												}
+												title={resolveColumnTooltip(
+													column
+												)}
+												placement="top"
+												arrow
+												enterDelay={300}
+											>
+												<th
+													key={column.value}
+													className={`ds_table-head-cell ds_table-column__size-${
+														column.size
+													} ${column.sortable ? 'ds_table-sortable' : ''}`}
+													style={thStyle}
+													onClick={() => {
+														if (column.sortable) {
+															const newSortingDirection =
+																sort?.direction ===
+																	'asc' ||
+																!sort?.direction
+																	? 'desc'
+																	: 'asc';
+															props.onSort?.(
+																column.value,
+																newSortingDirection as TableSortType
+															);
+														}
+													}}
+												>
+													{!!search && (
+														<span
+															onClick={(e) =>
+																e.stopPropagation()
+															}
+														>
+															<TextField
+																key={
+																	column.value +
+																	'-search'
+																}
+																value={
+																	search.value
+																}
+																label={
+																	column.label
+																}
+																disabled={
+																	loading
+																}
+																variant="filled"
+																iconEnd="fa-solid fa-xmark"
+																onChange={(
+																	value: string
+																) =>
+																	props.onSearch?.(
+																		column.value,
+																		value
+																	)
+																}
+																onIconClick={() => {
+																	props.onSearchesUpdate?.(
+																		searches.filter(
+																			(
+																				search
+																			) =>
+																				search.column !==
+																				column.value
+																		)
+																	);
+																}}
+															/>
+														</span>
+													)}
+													{!search &&
+														column.primaryKey && (
+															<i
+																className="ds_table-head-cell__primary-key-icon fa-solid fa-star"
+																onClick={() => {
+																	props.onSearchesUpdate?.(
+																		[
+																			{
+																				column: column.value,
+																				value: ''
+																			},
+																			...searches
+																		]
+																	);
+																}}
+															/>
+														)}
+													{!search &&
+														column.searchable && (
+															<i
+																className="ds_table-head-cell__search-icon fa-solid fa-magnifying-glass"
+																onClick={() => {
+																	props.onSearchesUpdate?.(
+																		[
+																			{
+																				column: column.value,
+																				value: ''
+																			},
+																			...searches
+																		]
+																	);
+																}}
+															/>
+														)}
+													{!search && (
+														<span
+															style={{
+																maxWidth:
+																	'100%',
+																whiteSpace:
+																	'nowrap',
+																textOverflow:
+																	'ellipsis',
+																overflow:
+																	'hidden'
+															}}
+														>
+															<p
+																style={{
+																	margin: 0,
+																	maxWidth:
+																		'100%',
+																	whiteSpace:
+																		'nowrap',
+																	textOverflow:
+																		'ellipsis',
+																	overflow:
+																		'hidden'
+																}}
+															>
+																{column.label}
+																{column.nullable ===
+																	false && (
+																	<span
+																		style={{
+																			fontWeight:
+																				'normal',
+																			color: 'rgba(0, 0, 0, 0.4)',
+																			marginLeft:
+																				'2px'
+																		}}
+																	>
+																		*
+																	</span>
+																)}
+															</p>
+															<p
+																style={{
+																	fontSize:
+																		'12px',
+																	color: 'rgba(107, 114, 128, 0.8)',
+																	margin: '0px'
+																}}
+															>
+																{column.dataTypeLabel
+																	? column.dataTypeLabel
+																	: column.type
+																		? column.type
+																				.charAt(
+																					0
+																				)
+																				.toUpperCase() +
+																			column.type.slice(
+																				1
+																			)
+																		: ''}
+															</p>
+														</span>
+													)}
+													{sort?.direction && (
+														<i
+															className={`ds_table-head-cell__sort-icon ds_table-head-cell-sort__${
+																sort.direction
+															} fa-solid ${
+																sort.direction ===
+																'asc'
+																	? 'fa-sort-up'
+																	: 'fa-sort-down'
+															}`}
+														/>
+													)}
+													<div
+														className="ds_table-resizer"
+														onMouseDown={(e) =>
+															startResize(
+																column.value,
+																e
+															)
+														}
+														onClick={(e) =>
+															e.stopPropagation()
+														}
+													/>
+												</th>
+											</MuiTooltip>
+										);
+									})}
+								</span>
+								{!hideRowActions && (
+									<th
+										className={`ds_table-head-cell ds_table-cell-actions ds_table-column__size-sm`}
+										style={
+											isCreating || editingRow !== null
+												? { paddingRight: '29px' }
+												: undefined
+										}
+									>
+										{/* Additional logic for buttons can be placed here */}
+									</th>
+								)}
+							</tr>
+						</thead>
+						<tbody
+							style={{ width: '100%', display: 'inline-grid' }}
+						>
+							{loading ? (
+								<tr
+									style={{
+										display: 'flex',
+										justifyContent: 'center',
+										alignItems: 'center',
+										width: '100%'
+									}}
+									className="ds_table-body-row"
+								>
+									<td
+										style={{
+											width: '100%',
+											textAlign: 'center'
+										}}
+										className="column1"
+									>
+										Loading...
+									</td>
+								</tr>
+							) : !rows.length ? (
+								<tr
+									style={{
+										display: 'flex',
+										justifyContent: 'center',
+										alignItems: 'center',
+										width: '100%'
+									}}
+									className="ds_table-body-row"
+								>
+									<td
+										style={{
+											width: '100%',
+											textAlign: 'center'
+										}}
+										className="column1"
+									>
+										{emptyMessage}
+									</td>
+								</tr>
+							) : (
+								rows.map((row, index) => {
+									const colsToRender =
+										isCreating || editingRow !== null
+											? columns
+											: filteredColumns;
+
+									return editingRow === index ? (
+										<RowForm
+											key={index}
+											creating={false}
+											columns={columns}
+											disabled={loading}
+											widths={widths}
+											values={row.data.map((column) => ({
+												value: column.value
+											}))}
+											onSubmit={async (values) => {
+												props.onUpdate?.(values);
+												setEditingRow(null);
+											}}
+											onCancel={() => {
+												setEditingRow(null);
+											}}
+										/>
+									) : (
+										<tr
+											key={index}
+											className="ds_table-row"
+										>
+											<span className="ds_table-row-cell-group">
+												{!hideSelection && (
+													<td className="ds_table-row-cell ds_table-head-cell-checkbox ds_table-column__size-xs">
+														<input
+															type="checkbox"
+															className="ds_table-row-cell-checkbox-input"
+															checked={
+																!!selection.find(
+																	(s) =>
+																		(
+																			s as IndexedTableRowSelection
+																		)
+																			.index ===
+																			index ||
+																		(
+																			s as PrimaryKeyTableRowSelection
+																		)
+																			.primaryKey ===
+																			row.data[
+																				primaryKeyColumnIndex
+																			].value.toString()
+																)
+															}
+															disabled={
+																isCreating ||
+																editingRow !==
+																	null
+															}
+															onChange={() => {
+																const updatedSelection =
+																	[
+																		...selection
+																	];
+																let indexInSelection;
+
+																if (
+																	primaryKeyColumnName
+																) {
+																	indexInSelection =
+																		updatedSelection.findIndex(
+																			(
+																				s
+																			) =>
+																				(
+																					s as PrimaryKeyTableRowSelection
+																				)
+																					.primaryKey ===
+																				row.data[
+																					primaryKeyColumnIndex
+																				].value.toString()
+																		);
+																} else {
+																	indexInSelection =
+																		updatedSelection.findIndex(
+																			(
+																				s
+																			) =>
+																				(
+																					s as IndexedTableRowSelection
+																				)
+																					.index ===
+																				index
+																		);
+																}
+
+																if (
+																	indexInSelection ===
+																	-1
+																) {
+																	const newSelection =
+																		primaryKeyColumnName
+																			? {
+																					primaryKey:
+																						row.data[
+																							primaryKeyColumnIndex
+																						].value.toString()
+																				}
+																			: {
+																					index
+																				};
+
+																	updatedSelection.push(
+																		newSelection
+																	);
+																} else {
+																	updatedSelection.splice(
+																		indexInSelection,
+																		1
+																	);
+																}
+
+																handleSelectionChange(
+																	updatedSelection
+																);
+															}}
+														/>
+													</td>
+												)}
+												{colsToRender.map((colUI) => {
+													const originalIndex =
+														columns.findIndex(
+															(c) =>
+																c.value ===
+																colUI.value
+														);
+													const cell = row.data[
+														originalIndex
+													] || { value: '' };
+													const width =
+														widths[colUI.value];
+													const style = width
+														? {
+																width: `${width}px`,
+																flexShrink: 0
+															}
+														: undefined;
+
+													return (
+														<td
+															key={colUI.value}
+															className={`ds_table-row-cell ds_table-column__size-${colUI.size}`}
+															style={style}
+														>
+															{cell.value !==
+																null &&
+															cell.value !==
+																undefined ? (
+																<MuiTooltip
+																	title={
+																		cell.value
+																	}
+																	placement="top"
+																	arrow
+																	enterDelay={
+																		300
+																	}
+																>
+																	<p
+																		style={{
+																			margin: 0,
+																			maxWidth:
+																				'100%',
+																			whiteSpace:
+																				'nowrap',
+																			textOverflow:
+																				'ellipsis',
+																			overflow:
+																				'hidden'
+																		}}
+																	>
+																		{
+																			cell.value
+																		}
+																	</p>
+																</MuiTooltip>
+															) : (
+																<MuiTooltip
+																	title={
+																		<p
+																			style={{
+																				margin: 0,
+																				fontStyle:
+																					'italic'
+																			}}
+																		>
+																			Empty
+																			value
+																		</p>
+																	}
+																	placement="top"
+																	arrow
+																	enterDelay={
+																		300
+																	}
+																>
+																	<span
+																		style={{
+																			color: 'rgba(0, 0, 0, 0.3)',
+																			fontWeight:
+																				'bold'
+																		}}
+																	>
+																		—
+																	</span>
+																</MuiTooltip>
+															)}
+														</td>
+													);
+												})}
+											</span>
+											{!hideRowActions && (
+												<td className="ds_table-row-cell ds_table-cell-actions ds_table-column__size-sm">
+													<Button
+														iconStart="fa-solid fa-ellipsis-vertical"
+														size="small"
+														variant="text"
+														disabled={loading}
+														color="grey"
+														id={`table-row-actions-menu-${index + 1}`}
+													/>
+													<DropdownMenuPopup
+														popupOptions={{
+															anchorQuerySelector: `#table-row-actions-menu-${
+																index + 1
+															}`,
+															placement: 'left',
+															open:
+																loading === true
+																	? false
+																	: undefined
+														}}
+														options={[
+															{
+																onClick:
+																	async () => {
+																		const selection =
+																			primaryKeyColumnName
+																				? {
+																						primaryKey:
+																							row.data[
+																								primaryKeyColumnIndex
+																							]?.value.toString()
+																					}
+																				: {
+																						index
+																					};
+
+																		props.onDelete?.(
+																			selection
+																		);
+																	},
+																label: 'Delete',
+																color: 'error',
+																iconEnd:
+																	'fa-solid fa-trash-can'
+															},
+															{
+																onClick:
+																	async () => {
+																		setEditingRow(
+																			index
+																		);
+																	},
+																label: 'Edit',
+																iconEnd:
+																	'fa-solid fa-pen'
+															}
+														]}
+													/>
+												</td>
+											)}
+										</tr>
+									);
+								})
+							)}
+							{isCreating && (
+								<RowForm
+									creating={true}
+									columns={columns}
+									disabled={loading}
+									widths={widths}
+									onSubmit={async (values) => {
+										props.onCreate?.(values);
+										setIsCreating(false);
+									}}
+									onCancel={() => {
+										setIsCreating(false);
+									}}
+								/>
+							)}
+						</tbody>
+					</div>
+					<tfoot>
+						<div
+							style={{
+								display: 'flex',
+								justifyContent: 'space-between',
+								padding: '10px',
+								width: '100%',
+								paddingRight: '40px',
+								alignItems: 'center'
+							}}
+						>
+							<div
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									gap: '10px'
+								}}
+							>
+								{selection.length ? (
+									!hideDelete && (
+										<>
+											<Button
+												size="small"
+												iconStart="fa-solid fa-trash-can"
+												color="error"
+												disabled={loading}
+												id="table-delete-button"
+												onClick={() => {
+													if (
+														selectedAllExistingRows
+													) {
+														props.onDeleteAll?.();
+														handleSelectionChange(
+															[]
+														);
+													} else {
+														props.onDeleteMany?.(
+															selection
+														);
+														handleSelectionChange(
+															[]
+														);
+													}
+												}}
+											>
+												Delete
+											</Button>
+											<Tooltip
+												placement="bottom"
+												anchorQuerySelector="#table-delete-button"
+											>
+												Delete selected items
+											</Tooltip>
+											<span>
+												You have selected{' '}
+												<b>
+													{selectedAllExistingRows
+														? pagination
+															? totalItems
+															: 0
+														: selection.length}
+												</b>{' '}
+												item
+												{selectedAllExistingRows
+													? pagination
+														? totalItems
+														: 0
+													: selection.length > 1
+														? 's'
+														: ''}
+											</span>
+											{pagination &&
+												totalItems &&
+												totalItems >
+													selection.length && (
+													<>
+														<input
+															type="checkbox"
+															checked={
+																selectedAllExistingRows
+															}
+															onChange={() => {
+																setSelectedAllExistingRows(
+																	!selectedAllExistingRows
+																);
+																if (
+																	!allAreSelected
+																) {
+																	onSelectAllClick(
+																		true
+																	);
+																}
+															}}
+														/>
+														<p
+															style={{
+																fontSize:
+																	'14px',
+																color: 'rgba(0,0,0,0.54)',
+																margin: '0px'
+															}}
+														>
+															Select all{' '}
+															{props.totalItems}{' '}
+															items
+														</p>
+													</>
+												)}
+										</>
+									)
+								) : hideCreate ? null : (
+									<>
+										<Button
+											size="small"
+											iconStart="fa-solid fa-add"
+											disabled={
+												isCreating ||
+												editingRow !== null ||
+												loading
+											}
+											id="table-add-button"
+											onClick={() => {
+												setIsCreating(true);
+											}}
+										>
+											Add
+										</Button>
+										<p
+											style={{
+												fontSize: '12px',
+												color: 'rgba(0,0,0,0.54)',
+												margin: '0px'
+											}}
+										>
+											{props.footerHelperText || ''}
+										</p>
+										<Tooltip
+											placement="bottom"
+											anchorQuerySelector="#table-add-button"
+										>
+											{isCreating
+												? 'Cannot add a new item while editing another'
+												: 'Add a new item'}
+										</Tooltip>
+									</>
+								)}
+							</div>
+							{pagination && (
+								<span
+									style={{
+										display: 'flex',
+										alignItems: 'center',
+										gap: '10px'
+									}}
+								>
+									<p
+										style={{
+											fontSize: '12px',
+											color: 'rgba(0,0,0,0.54)',
+											margin: '0px'
+										}}
+									>
+										Total entries:{' '}
+										<b>{totalItems.toString()}</b>
+									</p>
+									<Pagination
+										disabled={loading}
+										page={pagination.page}
+										onChange={(page) =>
+											pagination.onChange?.(page)
+										}
+										total={pagination.total}
+									/>
+								</span>
+							)}
+						</div>
+					</tfoot>
+				</table>
+			</div>
+		</div>
+	);
+}