diff --git a/libs/renderer/src/components/shared/DataImportFormModal.tsx b/libs/renderer/src/components/shared/DataImportFormModal.tsx index ab90e82db..36c1d1690 100644 --- a/libs/renderer/src/components/shared/DataImportFormModal.tsx +++ b/libs/renderer/src/components/shared/DataImportFormModal.tsx @@ -1,7 +1,7 @@ import { useState, useEffect, useRef } from "react"; import { useFieldArray, useForm, Controller } from "react-hook-form"; import { observer } from "mobx-react-lite"; -import { TableContainer } from "@mui/material"; +import { Checkbox, TableContainer } from "@mui/material"; import { ControlPointDuplicateRounded, CalendarViewMonth, @@ -16,7 +16,6 @@ import { import { runPixel, usePixel } from "@semoss/sdk/react"; import { - Checkbox, useNotification, Typography, TextField, @@ -189,9 +188,9 @@ const SingleTableWrapper = styled("div")(() => ({ marginLeft: "12.5px", })); -const CheckAllIconButton = styled(IconButton)(() => ({ - marginLeft: "-10px", -})); +// const CheckAllIconButton = styled(IconButton)(() => ({ +// marginLeft: "-10px", +// })); const AliasWarningIcon = styled(Tooltip)(() => ({ marginLeft: "10px", @@ -378,7 +377,8 @@ export const DataImportFormModal = observer( }); const notification = useNotification(); - + /** Select all the rows from a Table */ + const [isAllSelected, setIsAllSelected] = useState(false); useEffect(() => { if (editMode) retrieveDatabaseTablesAndEdges(cell.parameters.databaseId); @@ -519,10 +519,50 @@ export const DataImportFormModal = observer( } }; - /** Add all the columns from a Table */ - const addAllTableColumnsHandler = (event) => { - console.log(event); - // TODO: check all columns from table + + /** + * Handles the event when a user clicks the "Select All" button in the Data Import Form Modal. + * If the user clicks the button when all columns are already selected, it unselects all columns. + * If the user clicks the button when no columns are selected, it selects all columns. + * @param {number} tableIndex The index of the table in the watchedTables array. + */ + const addAllTableColumnsHandler = (tableIndex: number) => { + setShownTables(new Set(tableNames)); + setRootTable(watchedTables[tableIndex].name); + // Check if all columns are currently selected. If they are, set allChecked to false. + // If not, set allChecked to true. + const allChecked = !isAllSelected; + const updatedColumns = watchedTables[tableIndex].columns.map((column) => ({ + ...column, + checked: allChecked, + })); + + const freshAliasCountObj = {}; + updatedColumns.forEach((column) => { + if (allChecked) { + // If all columns are being selected, increment the alias count for this column's alias. + const alias = column.userAlias; + if (alias in freshAliasCountObj) { + freshAliasCountObj[alias] += 1; + } else { + freshAliasCountObj[alias] = 1; + } + } + }); + + // Update the aliasesCountObj state variable with the new alias count object. + setAliasesCountObj(freshAliasCountObj); + aliasesCountObjRef.current = { ...freshAliasCountObj }; + + // Update the form value for the columns of the table at the given index with the updated columns array. + formSetValue(`tables.${tableIndex}.columns`, updatedColumns, { + shouldDirty: true, + shouldValidate: true, + }); + + setCheckedColumnsCount(allChecked ? updatedColumns.length : 0); + setIsAllSelected(allChecked); + setJoinsStackHandler(); }; const updateSubmitDispatches = () => { @@ -613,7 +653,7 @@ export const DataImportFormModal = observer( /** New Submit for Import Data --- empty */ const onImportDataSubmit = (data: NewFormData) => { - console.log(data); + console.log("submitted data", data); if (editMode) { retrievePreviewData(); updatePixelRef(); @@ -813,7 +853,6 @@ export const DataImportFormModal = observer( setImportModalPixelWidth(IMPORT_MODAL_WIDTHS.large); setTableNames(newTableNames); - // shown tables filtered only on init load of edit mode if (editMode && !isInitLoadComplete) { const newEdges = [ @@ -850,8 +889,7 @@ export const DataImportFormModal = observer( const pixelTables: Set = new Set(); const pixelColumnNames: string[] = []; const pixelColumnAliases: string[] = []; - const pixelJoins: string[] = []; - + const pixelJoins: string[] = []; watchedTables?.forEach((tableObject) => { const currTableColumns = tableObject.columns; currTableColumns?.forEach((columnObject) => { @@ -1077,7 +1115,7 @@ export const DataImportFormModal = observer( oldAlias = null, ) => { const newAliasesCountObj = { ...aliasesCountObj }; - if (isBeingAdded) { + if (isBeingAdded) { if (newAliasesCountObj[newAlias] > 0) { newAliasesCountObj[newAlias] = newAliasesCountObj[newAlias] + 1; @@ -1108,6 +1146,7 @@ export const DataImportFormModal = observer( delete newAliasesCountObj[oldAlias]; } } + setAliasesCountObj(newAliasesCountObj); aliasesCountObjRef.current = { ...newAliasesCountObj }; @@ -1141,6 +1180,16 @@ export const DataImportFormModal = observer( setCheckedColumnsCount(checkedColumnsCount - 1); } setJoinsStackHandler(); + // After unselecting a row, check if all are selected or not + const tables = dataImportwatch("tables"); + const totalColumns = tables[tableIndex].columns.length; + const selectedCount = tables[tableIndex].columns.filter( + (col) => col.checked, + ).length; + + if (selectedCount === totalColumns) { + setIsAllSelected(true); + } }; /** Pre-Populate form For Edit */ @@ -1151,7 +1200,6 @@ export const DataImportFormModal = observer( const newAliasesCountObj = {}; setCheckedColumnsCount(cell.parameters.selectedColumns.length); - cell.parameters.selectedColumns?.forEach( (selectedColumnTableCombinedString, idx) => { const [currTableName, currColumnName] = @@ -1168,11 +1216,17 @@ export const DataImportFormModal = observer( setAliasesCountObj({ ...newAliasesCountObj }); aliasesCountObjRef.current = { ...newAliasesCountObj }; + let totalColumnsToCheck = 0; + let totalCheckedColumns = 0; + if (newTableFields) { newTableFields?.forEach((newTableObj, tableIdx) => { if (tablesWithCheckedBoxes.has(newTableObj.name)) { const watchedTableColumns = watchedTables[tableIdx].columns; + // Count total columns in this table + totalColumnsToCheck += watchedTableColumns.length; + watchedTableColumns?.forEach( (tableColumnObj, columnIdx) => { const columnName = `${tableColumnObj.tableName}__${tableColumnObj.columnName}`; @@ -1183,6 +1237,7 @@ export const DataImportFormModal = observer( `tables.${tableIdx}.columns.${columnIdx}.checked`, true, ); + totalCheckedColumns += 1; formSetValue( `tables.${tableIdx}.columns.${columnIdx}.userAlias`, columnAlias, @@ -1191,6 +1246,17 @@ export const DataImportFormModal = observer( }, ); } + // If all columns in the table are checked, set isAllSelected to true. + // Otherwise, set isAllSelected to false. + // We do this by comparing the total number of columns in the table + // (totalColumnsToCheck) to the total number of columns that are checked + // (totalCheckedColumns). If the two values are equal, then all columns + // are checked. If not, then some columns are not checked. + if (totalCheckedColumns === totalColumnsToCheck && totalColumnsToCheck > 0) { + setIsAllSelected(true); + } else { + setIsAllSelected(false); + } }); } @@ -1294,7 +1360,6 @@ export const DataImportFormModal = observer( joinsSetCopy.add(newJoinSet); setJoinsSet(joinsSetCopy); }; - return ( @@ -1443,17 +1508,26 @@ export const DataImportFormModal = observer( - - - + + 0 && + checkedColumnsCount < + watchedTables[ + tableIndex + ] + .columns + .length + } + onChange={() => + addAllTableColumnsHandler( + tableIndex, + ) + } // Handle the toggle of "select all" + />