From 1e8cff6ffd92f5344d55ae88cd4361497abd8a07 Mon Sep 17 00:00:00 2001 From: himanshudube97 Date: Tue, 15 Oct 2024 09:57:22 +0530 Subject: [PATCH 1/2] second serach bar added --- .../OperationPanel/Forms/UnpivotOpForm.tsx | 125 +++++++----------- 1 file changed, 48 insertions(+), 77 deletions(-) diff --git a/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx b/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx index ab4f4d84..8afb456d 100644 --- a/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx +++ b/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx @@ -33,7 +33,8 @@ const UnpivotOpForm = ({ const [srcColumns, setSrcColumns] = useState([]); const globalContext = useContext(GlobalContext); const [inputModels, setInputModels] = useState([]); // used for edit; will have information about the input nodes to the operation being edited - const [colFieldData, setColFieldData] = useState([]); + const [searchUnpivot, setSearchUnpivot] = useState(''); // Search value for unpivot + const [searchExclude, setSearchExclude] = useState(''); // Search value for exclude const [selectAllCheckbox, setSelectAllCheckbox] = useState<{ is_unpivot: boolean; is_exclude: boolean; @@ -68,7 +69,7 @@ const UnpivotOpForm = ({ }); const { - fields: unpivotColFields, + fields: unpivotColFields, // use this as the central state replace: unpivotColReplace, update: unpivotColUpdate, } = useFieldArray({ @@ -79,8 +80,6 @@ const UnpivotOpForm = ({ const fetchAndSetSourceColumns = async () => { if (node?.type === SRC_MODEL_NODE) { - //change - try { const data: ColumnData[] = await httpGet( session, @@ -95,7 +94,6 @@ const UnpivotOpForm = ({ is_exclude_checked: false, })); setValue('unpivot_columns', unpivot_col_fields); - setColFieldData(unpivot_col_fields); } catch (error) { console.log(error); } @@ -142,7 +140,6 @@ const UnpivotOpForm = ({ if (finalAction === 'create') { operationNode = await httpPost(session, `transform/dbt_project/model/`, postData); } else if (finalAction === 'edit') { - // need this input to be sent for the first step in chain postData.input_uuid = inputModels.length > 0 && inputModels[0]?.uuid ? inputModels[0].uuid : ''; operationNode = await httpPut( @@ -172,7 +169,6 @@ const UnpivotOpForm = ({ const { config: opConfig, input_models } = config; setInputModels(input_models); - // form data; will differ based on operations in progress const { source_columns, exclude_columns, @@ -196,8 +192,6 @@ const UnpivotOpForm = ({ unpivot_value_name: unpivot_value_name, unpivot_columns: unpivot_col_fields, }); - - setColFieldData(unpivot_col_fields); } catch (error) { console.error(error); } finally { @@ -205,86 +199,55 @@ const UnpivotOpForm = ({ } }; - const handleSearch = (value: string) => { - const trimmedSubstring = value?.toLowerCase(); - const filteredColumns = unpivotColFields?.filter((colField) => { - const stringToSearch = colField?.col?.toLowerCase(); - return stringToSearch?.includes(trimmedSubstring); - }); - setColFieldData(filteredColumns); + const handleSearchUnpivot = (value: string) => { + setSearchUnpivot(value.toLowerCase()); }; - const handleSelectAll = (event: React.ChangeEvent, is_exclude: boolean) => { - // Filter the fields based on the search results stored in colFieldData - const filteredFields = unpivotColFields.filter((field) => - colFieldData.some((colField) => colField.col === field.col) - ); - - // Update the filtered fields based on the select all checkbox - const updatedFields = filteredFields.map((field) => ({ - col: field.col, - is_unpivot_checked: is_exclude - ? event.target.checked - ? false - : field.is_unpivot_checked - : event.target.checked, - is_exclude_checked: is_exclude - ? event.target.checked - : event.target.checked - ? false - : field.is_exclude_checked, - })); - - setColFieldData(updatedFields); - - // Merge the updated fields with the original unpivotColFields - const mergedFields = unpivotColFields.map( - (field) => updatedFields.find((updatedField) => updatedField.col === field.col) || field - ); - - unpivotColReplace(mergedFields); + const handleSearchExclude = (value: string) => { + setSearchExclude(value.toLowerCase()); }; + // Filtered lists for both unpivot and exclude based on search terms + const filteredUnpivotColumns = unpivotColFields.filter((col) => + col.col.toLowerCase().includes(searchUnpivot) + ); + const filteredExcludeColumns = unpivotColFields.filter((col) => + col.col.toLowerCase().includes(searchExclude) + ); + const handleUnpivotColUpdate = ( event: React.ChangeEvent, - index: number, + columnName: string, is_exclude: boolean ) => { - const field = colFieldData[index]; - const updatedFields = colFieldData.map((colField) => { - if (colField.col == field.col) { + const updatedFields = unpivotColFields.map((colField) => { + if (colField.col === columnName) { return { - col: field.col, + ...colField, is_unpivot_checked: is_exclude ? event.target.checked ? false - : field.is_unpivot_checked + : colField.is_unpivot_checked : event.target.checked, is_exclude_checked: is_exclude ? event.target.checked : event.target.checked ? false - : field.is_exclude_checked, + : colField.is_exclude_checked, }; } return colField; }); - const originalIndex = unpivotColFields?.findIndex((colField) => colField.col == field.col); + unpivotColReplace(updatedFields); // Replace the entire array with updated values + }; - unpivotColUpdate(originalIndex, { + const handleSelectAll = (event: React.ChangeEvent, is_exclude: boolean) => { + const updatedFields = unpivotColFields.map((field) => ({ col: field.col, - is_unpivot_checked: is_exclude - ? event.target.checked - ? false - : field.is_unpivot_checked - : event.target.checked, - is_exclude_checked: is_exclude - ? event.target.checked - : event.target.checked - ? false - : field.is_exclude_checked, - }); - setColFieldData(updatedFields); + is_unpivot_checked: is_exclude ? false : event.target.checked, + is_exclude_checked: is_exclude ? event.target.checked : false, + })); + unpivotColReplace(updatedFields); }; useEffect(() => { @@ -297,15 +260,15 @@ const UnpivotOpForm = ({ }, [session, node]); useEffect(() => { - if (colFieldData?.length > 0) { + if (unpivotColFields?.length > 0) { const selectAll = { is_exclude: true, is_unpivot: true }; - colFieldData?.forEach((colField) => { + unpivotColFields?.forEach((colField) => { if (!colField.is_exclude_checked) selectAll.is_exclude = false; if (!colField.is_unpivot_checked) selectAll.is_unpivot = false; }); setSelectAllCheckbox(selectAll); } - }, [colFieldData]); + }, [unpivotColFields]); return ( @@ -313,8 +276,8 @@ const UnpivotOpForm = ({ handleSearch(event.target.value)} + placeholder="Search by column name for unpivot" + onChange={(event) => handleSearchUnpivot(event.target.value)} /> , ], ], - ...colFieldData.map((field, idx) => [ + ...filteredUnpivotColumns.map((field, idx) => [ ) => { - handleUnpivotColUpdate(event, idx, false); + handleUnpivotColUpdate(event, field.col, false); }} /> } @@ -400,6 +363,14 @@ const UnpivotOpForm = ({ )} + + {/* Second Search bar for "Columns to keep in output table" */} + handleSearchExclude(event.target.value)} + /> , ], ], - ...colFieldData.map((field, idx) => [ + ...filteredExcludeColumns.map((field) => [ ) => { - handleUnpivotColUpdate(event, idx, true); + handleUnpivotColUpdate(event, field.col, true); }} /> } From 840a44f18ceb97bd3300bb323d556c21cadae7f9 Mon Sep 17 00:00:00 2001 From: himanshudube97 Date: Thu, 17 Oct 2024 00:13:06 +0530 Subject: [PATCH 2/2] done --- .../Components/OperationPanel/Forms/UnpivotOpForm.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx b/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx index 8afb456d..1356ad0f 100644 --- a/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx +++ b/src/components/TransformWorkflow/FlowEditor/Components/OperationPanel/Forms/UnpivotOpForm.tsx @@ -140,6 +140,7 @@ const UnpivotOpForm = ({ if (finalAction === 'create') { operationNode = await httpPost(session, `transform/dbt_project/model/`, postData); } else if (finalAction === 'edit') { + // need this input to be sent for the first step in chain postData.input_uuid = inputModels.length > 0 && inputModels[0]?.uuid ? inputModels[0].uuid : ''; operationNode = await httpPut( @@ -169,6 +170,7 @@ const UnpivotOpForm = ({ const { config: opConfig, input_models } = config; setInputModels(input_models); + // form data; will differ based on operations in progress const { source_columns, exclude_columns, @@ -332,7 +334,7 @@ const UnpivotOpForm = ({ }} > , ], ], - ...filteredExcludeColumns.map((field) => [ + ...filteredExcludeColumns.map((field, idx) => [