@elyx-code/editor-ui 0.0.2

package/src/components/test-relational-database/DatabaseTable.tsx

@@ -0,0 +1,913 @@
+import React, { useEffect, useState } from 'react';
+import Table from '../../lib/table/Table';
+import { useNavigate, useParams } from 'react-router-dom';
+import DropdownButton from '../../lib/dropdown/DropdownButton';
+import { popupNotification } from '../../popup-notification';
+import { EditorService } from '../../services/editor';
+import {
+	IDataBaseDetails,
+	ISelectQueryResult,
+	Table as LocalSQLTable
+} from '../../services/local-relational-database';
+import {
+	IndexedTableRowSelection,
+	ITableColumnUI,
+	ITableRow,
+	ITableSort,
+	PrimaryKeyTableRowSelection,
+	TableColumnType,
+	TableRowSelection,
+	TableSortType
+} from '../../lib/table/types';
+import {
+	createQueryErrorMessage,
+	fromColumnInstanceToColumnTransfer
+} from '../../services/local-relational-database/utils';
+import {
+	DefinitionEntityState,
+	resolveEntityName,
+	SQLAST as SQLASTLib,
+	searchStatementUtils,
+	checkIsEmptyValue
+} from '@elyx-code/project-logic-tree';
+import {
+	getJoinClausesFromSelectStatementSync,
+	getAllSelectedColumnNamesFromSelectClause
+} from '../../services/database';
+import { IDynamicValue } from '../../services/editor/value-store';
+import { Logger } from '@elyx-code/common-ts-utils';
+import Button from '../../lib/button/Button';
+
+type SQLAST = SQLASTLib.Program;
+
+const NUMBER_OF_ROWS = 5;
+
+export interface IDatabaseTableProps {
+	project: EditorService;
+	database: string;
+	onSelection?: (entries: TableRowSelection[]) => void;
+	canNavigate?: boolean;
+	onlyTable?: boolean;
+	emptyMessage?: string;
+	selectedTable?: string;
+	initialQuery?: {
+		ast: SQLAST;
+		dynamicInputs: IDynamicValue[];
+	};
+	selection: TableRowSelection[];
+	onSyntheticTable?: (entity: DefinitionEntityState) => void;
+}
+
+function toRowCellString(value: any): string | null {
+	if (value === null || value === undefined) return null;
+	return String(value);
+}
+
+function DatabaseTable(props: IDatabaseTableProps) {
+	const onlyTable = props.onlyTable ?? false;
+	const canNavigate = props.canNavigate ?? true;
+	const databaseClient = props.database
+		? props.project.localDatabaseStore?.getDatabase(props.database)
+		: null;
+	const [databaseDetails, setDatabaseDetails] =
+		useState<IDataBaseDetails | null>(null);
+	const navigate = useNavigate();
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [rows, setRows] = useState<ITableRow[]>([]);
+	const [columns, setColumns] = useState<ITableColumnUI[]>([]);
+	const [currentPage, setCurrentPage] = useState<number>(1);
+	const [totalItems, setTotalItems] = useState<number>(0);
+	const [sorts, setSorts] = useState<ITableSort[]>([]);
+	const [searches, setSearches] = useState<
+		{ column: string; value: string }[]
+	>([]);
+	const { id: projectId, selectedTable: urlSelectedTable } = useParams<{
+		id: string;
+		selectedTable: string;
+	}>();
+
+	let primaryKeyIndex: number = 0;
+	const primaryKeyName = (columns || []).find((col, ind) => {
+		if (col.primaryKey) {
+			primaryKeyIndex = ind;
+			return true;
+		}
+
+		return false;
+	})?.value;
+
+	const resolveInitialSelectedTable = (): string | null => {
+		if (!!props.initialQuery?.ast) {
+			const selectStatement =
+				searchStatementUtils.getSelectStatementFromProgram(
+					props.initialQuery?.ast
+				);
+
+			if (selectStatement) {
+				const tableFromQuery =
+					searchStatementUtils.getMainSourceNameFromSelectStatement(
+						selectStatement
+					);
+				const joinsResults = getJoinClausesFromSelectStatementSync(
+					selectStatement,
+					{
+						onDescribeTable: (tableName) => {
+							return databaseClient?.getTable(tableName);
+						}
+					}
+				);
+
+				const selectClause =
+					searchStatementUtils.getSelectClauseFromSelectStatement(
+						selectStatement
+					);
+
+				const allSelectedColumns =
+					getAllSelectedColumnNamesFromSelectClause(selectClause);
+
+				// if all selected columns is empty, it means it selected ALL columns, which is what we want
+				if (
+					tableFromQuery?.type === 'table' &&
+					!joinsResults.joins.length &&
+					!allSelectedColumns.length
+				) {
+					return tableFromQuery.name;
+				}
+			}
+
+			return null;
+		}
+
+		if (props.selectedTable) {
+			return props.selectedTable;
+		} else {
+			return urlSelectedTable || null;
+		}
+	};
+
+	const resolvedSelectedTable = resolveInitialSelectedTable();
+
+	useEffect(() => {
+		if (props.database) {
+			init();
+		}
+	}, [props.database]);
+
+	// When the filters change, load more
+	useEffect(() => {
+		loadMore();
+	}, [currentPage, sorts, searches]);
+
+	// When the selected table changes
+	useEffect(() => {
+		if (!resolvedSelectedTable || !databaseClient || !databaseDetails) {
+			return;
+		}
+
+		const tableInstance = databaseClient.getTable(resolvedSelectedTable);
+
+		// Navigate if the table has changed
+		if (tableInstance.entity.id !== resolvedSelectedTable && canNavigate) {
+			navigate(
+				`${props.project?.editorBasePath}/test-relational-database/${databaseClient.entity.id}/table/${tableInstance.entity.id}`
+			);
+
+			loadMore();
+		}
+	}, [resolvedSelectedTable]);
+
+	const getDatabaseDetails = async (): Promise<IDataBaseDetails> => {
+		const table = databaseClient.getTable(resolvedSelectedTable);
+
+		const result = await databaseClient.describe({
+			tableName: table?.tableName || null,
+			limit: NUMBER_OF_ROWS
+		});
+
+		return result;
+	};
+
+	const reset = () => {
+		// If there is data in the state, clear it
+		if (rows.length || columns.length) {
+			setRows([]);
+			setColumns([]);
+			setTotalItems(0);
+		}
+	};
+
+	const init = async () => {
+		setIsLoading(true);
+
+		if (!databaseClient && props.database) {
+			popupNotification({
+				text: 'Given test database not found',
+				color: 'error'
+			});
+
+			if (canNavigate) {
+				navigate(`${props.project?.editorBasePath}`);
+			}
+			return;
+		}
+
+		if (!!props.initialQuery) {
+			await queryDatabase();
+
+			setIsLoading(false);
+			return;
+		}
+
+		const [databaseResponse] = await Promise.all([getDatabaseDetails()]);
+
+		setDatabaseDetails(databaseResponse);
+
+		// Modify structure of column as needed for table
+		const columns = databaseResponse.data?.columns || [];
+
+		const formattedColumns = columns.map((column) => ({
+			...fromColumnInstanceToColumnTransfer(column.column),
+			label: column.as,
+			value: column.as
+		}));
+
+		setColumns(formattedColumns);
+
+		setTotalItems(databaseResponse.data?.total || 0);
+
+		// Modify structure of rows as needed for table
+		// Turn object into array of objects where every key is a column ()
+		const rows = (databaseResponse.data?.rows || []).map((row) =>
+			mapAndSortRowColumns(row, formattedColumns)
+		);
+
+		setRows(rows);
+
+		setIsLoading(false);
+	};
+
+	// Compiles and runs the latest query as raw SQL
+	const queryDatabase = async () => {
+		let table: LocalSQLTable | undefined;
+		try {
+			const selectStatement =
+				searchStatementUtils.getSelectStatementFromProgram(
+					props.initialQuery?.ast
+				);
+
+			if (!selectStatement) {
+				return;
+			}
+
+			const result: ISelectQueryResult = (await databaseClient?.run(
+				props.initialQuery?.ast,
+				props.initialQuery?.dynamicInputs
+			)) as ISelectQueryResult;
+
+			if (!result) {
+				return;
+			}
+
+			const formattedColumns: ITableColumnUI[] = result?.columns.map(
+				(column) => ({
+					...fromColumnInstanceToColumnTransfer(column.column),
+					label: column.as,
+					value: column.as,
+					searchable: !!result.tableName,
+					editable: !!result.tableName,
+					sortable: !!result.tableName
+				})
+			);
+
+			setColumns(formattedColumns);
+
+			const formattedRows = result.rows.map((row) =>
+				mapAndSortRowColumns(row, formattedColumns)
+			);
+
+			setTotalItems(result.total);
+			setRows(formattedRows);
+		} catch (error) {
+			Logger.error(error);
+			const message = createQueryErrorMessage(
+				error,
+				!!databaseDetails?.items
+					? databaseDetails.items
+					: table
+						? [table]
+						: []
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+	};
+
+	useEffect(() => {
+		const loadFromQuery = async () => {
+			setIsLoading(true);
+			await queryDatabase();
+			setIsLoading(false);
+		};
+
+		if (!!props.initialQuery?.ast) {
+			loadFromQuery();
+		} else if (!resolvedSelectedTable) {
+			reset();
+		}
+	}, [props.initialQuery]);
+
+	const mapAndSortRowColumns = (
+		row: {
+			[columnName: string]: any;
+		},
+		tableColumns: ITableColumnUI[]
+	) => {
+		const sortedColumnValues: { value: string | null }[] = [];
+
+		Object.keys(row).forEach((columnName) => {
+			const columnIndex = tableColumns.findIndex(
+				(column) => column.value === columnName
+			);
+			if (columnIndex === -1) return;
+
+			sortedColumnValues[columnIndex] = {
+				value: toRowCellString(row[columnName])
+			};
+		});
+
+		for (let i = 0; i < tableColumns.length; i++) {
+			if (!sortedColumnValues[i]) {
+				sortedColumnValues[i] = {
+					value: null
+				};
+			}
+		}
+
+		return {
+			data: sortedColumnValues
+		};
+	};
+
+	const loadMore = async () => {
+		if (!resolvedSelectedTable || !databaseClient || !databaseDetails) {
+			return;
+		}
+
+		setIsLoading(true);
+
+		const offset = (currentPage - 1) * NUMBER_OF_ROWS;
+
+		const whereClause = searches.length
+			? searches.reduce((acc, search) => {
+					const searchedColumn = columns.find(
+						(column) => column.value === search.column
+					);
+
+					const searchedColumnDataType = searchedColumn.type;
+
+					return {
+						...acc,
+						[search.column]:
+							searchedColumnDataType === TableColumnType.String
+								? {
+										like: '%' + search.value + '%'
+									}
+								: search.value
+					};
+				}, {})
+			: undefined;
+
+		const selectQueryRequest = {
+			from: databaseClient.getTable(resolvedSelectedTable).tableName,
+			where: whereClause,
+			limit: NUMBER_OF_ROWS,
+			skip: offset,
+			order: sorts[0]
+				? [{ by: sorts[0].column, type: sorts[0].direction }]
+				: null
+		};
+
+		const response = await databaseClient.select(selectQueryRequest);
+		const table = databaseClient.getTable(resolvedSelectedTable);
+
+		const data = {
+			items: response,
+			total: table.total
+		};
+
+		const rows = (data.items || []).map((row) =>
+			mapAndSortRowColumns(row, columns)
+		);
+
+		setRows(rows);
+		setTotalItems(data?.total || 0);
+		setIsLoading(false);
+	};
+
+	const insertRow = async (
+		values: {
+			column: string;
+			value: any;
+		}[]
+	) => {
+		setIsLoading(true);
+		// Convert table entity id (resolvedSelectedTable) to table name
+		const tableDef = databaseClient.getTable(resolvedSelectedTable);
+
+		const selectedTableName = tableDef.tableName;
+
+		const insertQueryRequest = {
+			into: selectedTableName,
+			values: [
+				values.reduce((acc, column) => {
+					let sanitizedValue = sanitizeValueForColumn(
+						column.value,
+						column.column
+					);
+
+					return {
+						...acc,
+						[column.column]: sanitizedValue
+					};
+				}, {})
+			]
+		};
+
+		try {
+			await databaseClient.insert(insertQueryRequest);
+			await loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails.items
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+
+		setIsLoading(false);
+	};
+
+	const sanitizeValueForColumn = (value: any, columnName: string) => {
+		let sanitizedValue = value;
+		const columnDefinition = columns.find(
+			(tableColumn) => tableColumn.value === columnName
+		);
+
+		if (columnDefinition) {
+			if (checkIsEmptyValue(value)) {
+				sanitizedValue = null;
+			} else if (columnDefinition.type === TableColumnType.Date) {
+				sanitizedValue = new Date(value);
+			} else if (columnDefinition.type === TableColumnType.Number) {
+				sanitizedValue = Number(value);
+			} else if (columnDefinition.type === TableColumnType.Boolean) {
+				sanitizedValue = value === 'true' || value === true;
+			}
+		}
+
+		return sanitizedValue;
+	};
+
+	const updateRow = async (values: any[]) => {
+		setIsLoading(true);
+		const selectedTableName = databaseClient.getTable(
+			resolvedSelectedTable
+		).tableName;
+
+		const primaryKeyName = columns.find((col) => col.primaryKey)?.value;
+
+		const primaryKeyRawValue = values.find(
+			(column) => column.column === primaryKeyName
+		)?.value;
+
+		const primaryKeyValue = sanitizeValueForColumn(
+			primaryKeyRawValue,
+			primaryKeyName
+		);
+
+		const filteredValues = values.filter((column) => {
+			const foundColumn = columns.find(
+				(tableColumn) => tableColumn.value === column.column
+			);
+
+			return foundColumn?.editable;
+		});
+
+		const valuesObject = filteredValues.reduce((acc, column) => {
+			return {
+				...acc,
+				[column.column]: sanitizeValueForColumn(
+					column.value,
+					column.column
+				)
+			};
+		}, {});
+
+		const updateQueryRequest = {
+			in: selectedTableName,
+			set: valuesObject,
+			where: {
+				[primaryKeyName]: primaryKeyValue
+			}
+		};
+
+		try {
+			await databaseClient.update(updateQueryRequest);
+			await loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails.items
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+	};
+
+	const deleteRow = async (value: TableRowSelection) => {
+		setIsLoading(true);
+		const selectedTableName = databaseClient.getTable(
+			resolvedSelectedTable
+		).tableName;
+
+		const primaryKeyIndex = columns.findIndex(
+			(column) => column.primaryKey
+		);
+
+		const currentRows = rows;
+		const foundRow = (value as PrimaryKeyTableRowSelection).primaryKey
+			? currentRows.find(
+					(row) =>
+						row.data[primaryKeyIndex]?.value ===
+						(value as PrimaryKeyTableRowSelection).primaryKey
+				)
+			: currentRows[(value as IndexedTableRowSelection).index];
+
+		const rowId = sanitizeValueForColumn(
+			foundRow.data[primaryKeyIndex].value,
+			primaryKeyName
+		);
+
+		const deleteQueryRequest = {
+			from: selectedTableName,
+			where: {
+				[primaryKeyName]: rowId
+			}
+		};
+
+		try {
+			await databaseClient.remove(deleteQueryRequest);
+			await loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails.items
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+	};
+
+	const deleteRows = async (values: TableRowSelection[]) => {
+		setIsLoading(true);
+		const selectedTableName = databaseClient.getTable(
+			resolvedSelectedTable
+		).tableName;
+		const currentRows = rows;
+
+		const rowIndexes = values.map((value) => {
+			if ((value as PrimaryKeyTableRowSelection).primaryKey) {
+				return currentRows.findIndex(
+					(row) =>
+						row.data[primaryKeyIndex].value ===
+						(value as PrimaryKeyTableRowSelection).primaryKey
+				);
+			} else {
+				return (value as IndexedTableRowSelection).index;
+			}
+		});
+
+		const rowsToDelete = rowIndexes.map(
+			(rowIndex) => currentRows[rowIndex]
+		);
+
+		const rowIds = rowsToDelete.map((row) =>
+			sanitizeValueForColumn(
+				row.data[primaryKeyIndex].value,
+				primaryKeyName
+			)
+		);
+
+		const [firstRow, ...rest] = rowIds;
+
+		const deleteQueryRequest = {
+			from: selectedTableName,
+			where: {
+				[primaryKeyName]: firstRow,
+				or: rest.reduce((acc, rowId) => {
+					return {
+						...acc,
+						[primaryKeyName]: rowId
+					};
+				}, {})
+			}
+		};
+
+		try {
+			await databaseClient.remove(deleteQueryRequest);
+			await loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails.items
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+	};
+
+	const handleCreate = (values: any) => {
+		insertRow(values);
+	};
+
+	const handleUpdate = (values: any) => {
+		updateRow(values);
+	};
+
+	const handleDelete = (value: TableRowSelection) => {
+		deleteRow(value);
+	};
+
+	const handleDeleteMany = (values: TableRowSelection[]) => {
+		deleteRows(values);
+	};
+
+	const handleSearch = (column: string, value: string) => {
+		const searchesCopy = [...searches];
+
+		const searchIndex = searchesCopy.findIndex(
+			(search: any) => search.column === column
+		);
+
+		if (searchIndex === -1) {
+			searchesCopy.push({ column, value });
+			setSearches(searchesCopy);
+		} else {
+			// Only update value if it's different
+			if (searchesCopy[searchIndex].value === value) {
+				return;
+			}
+
+			searchesCopy[searchIndex] = { column, value };
+
+			setSearches(searchesCopy);
+		}
+	};
+
+	const handleSearchesUpdate = (
+		newSearches: { column: string; value: string }[]
+	) => {
+		if (newSearches.length > searches.length) {
+			setSearches(newSearches);
+			return;
+		} else {
+			setSearches(newSearches);
+		}
+	};
+
+	const handleDeleteAll = async () => {
+		setIsLoading(true);
+		try {
+			await databaseClient.clear(
+				databaseClient.getTable(resolvedSelectedTable).tableName
+			);
+			loadMore();
+		} catch (error) {
+			const message = createQueryErrorMessage(
+				error,
+				databaseDetails.items
+			);
+
+			popupNotification({
+				text: message,
+				color: 'error'
+			});
+		}
+	};
+
+	const handleSort = (column: string, direction: TableSortType) => {
+		setSorts([{ column, direction }]);
+	};
+
+	const handleSortsUpdate = (
+		newSorts: { column: string; direction: TableSortType }[]
+	) => {
+		setSorts(newSorts);
+	};
+
+	const totalPages = Math.ceil(totalItems / NUMBER_OF_ROWS) || 1;
+
+	return (
+		<div>
+			{onlyTable ? null : canNavigate ? (
+				<div
+					style={{
+						marginLeft: '80px',
+						marginBottom: '24px',
+						marginRight: '30px'
+					}}
+				>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+							marginBottom: '8px'
+						}}
+					>
+						<span>Selected database entity:</span>
+					</h3>
+
+					<span
+						style={{
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center',
+							width: '100%'
+						}}
+					>
+						{databaseDetails ? (
+							<div
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									gap: '8px'
+								}}
+							>
+								<DropdownButton
+									value={resolvedSelectedTable}
+									id="database-table-selection-button"
+									options={
+										databaseDetails.items.map((table) => ({
+											value: table.entity.id,
+											label: table.entity.name,
+											iconStart: 'fa-solid fa-table',
+											onClick: () => {
+												navigate(
+													`${props.project?.editorBasePath}/test-relational-database/${databaseClient.entity.id}/table/${table.tableName}`
+												);
+												setColumns(
+													table.columns.map(
+														(column) =>
+															fromColumnInstanceToColumnTransfer(
+																column
+															)
+													)
+												);
+											}
+										})) || []
+									}
+								/>
+								{!!resolvedSelectedTable && (
+									<Button
+										variant="outlined"
+										size="small"
+										iconStart={
+											isLoading
+												? 'fa-solid fa-spinner fa-spin'
+												: 'fa-solid fa-rotate-right'
+										}
+										onClick={() => loadMore()}
+										disabled={isLoading}
+									/>
+								)}
+							</div>
+						) : (
+							'Loading...'
+						)}
+					</span>
+				</div>
+			) : (
+				<div
+					style={{
+						marginLeft: '80px',
+						marginBottom: '24px',
+						marginRight: '30px'
+					}}
+				>
+					<h3
+						style={{
+							display: 'flex',
+							gap: '6px',
+							fontWeight: 'normal',
+							margin: '0px',
+							marginBottom: '8px'
+						}}
+					>
+						<span>Selected database entity:</span>
+					</h3>
+
+					<span
+						style={{
+							display: 'flex',
+							justifyContent: 'space-between',
+							alignItems: 'center'
+						}}
+					>
+						{databaseDetails ? (
+							<span
+								style={{
+									display: 'flex',
+									alignItems: 'center',
+									gap: 8
+								}}
+							>
+								<i
+									className="fas fa-table"
+									style={{
+										fontSize: 16
+									}}
+								/>
+								<h3
+									style={{
+										margin: 0,
+										fontSize: 17
+									}}
+								>
+									{resolveEntityName(
+										databaseClient.getTable(
+											resolvedSelectedTable
+										).entity,
+										props.project.logic
+									)}
+								</h3>
+							</span>
+						) : (
+							'Loading...'
+						)}
+					</span>
+				</div>
+			)}
+			<div
+				style={{ marginLeft: '30px', marginRight: '30px', minWidth: 0 }}
+			>
+				<Table
+					project={props.project}
+					tableKey={urlSelectedTable}
+					totalItems={totalItems}
+					searches={searches}
+					sorts={sorts}
+					emptyMessage={props.emptyMessage}
+					footerHelperText="Modifying the database directly bypasses the code. No events or actions are triggered."
+					loading={isLoading}
+					columns={columns.map((column) => ({
+						...column,
+						size: 'lg'
+					}))}
+					selection={props.selection}
+					hideCreate={!databaseClient || !resolvedSelectedTable}
+					hideDelete={!resolvedSelectedTable}
+					hideSelection={!resolvedSelectedTable}
+					hideRowActions={!resolvedSelectedTable}
+					onSearch={handleSearch}
+					onSearchesUpdate={handleSearchesUpdate}
+					onSelection={props.onSelection}
+					rows={rows}
+					onCreate={handleCreate}
+					onUpdate={handleUpdate}
+					onDelete={handleDelete}
+					onDeleteMany={handleDeleteMany}
+					onDeleteAll={handleDeleteAll}
+					onSort={handleSort}
+					onSortsUpdate={handleSortsUpdate}
+					pagination={{
+						onChange: (page: number) => {
+							setCurrentPage(page);
+						},
+						total: totalPages,
+						page: currentPage
+					}}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default DatabaseTable;