diff --git a/frontend/src/app/common/report.ts b/frontend/src/app/common/report.ts index 0dcf1503..00cdb9fc 100644 --- a/frontend/src/app/common/report.ts +++ b/frontend/src/app/common/report.ts @@ -1,9 +1,15 @@ import config from '../../config'; import { ProvisionJson, SaveProvisionData } from '../components/table/reports/SelectedProvisionsTable'; import { VariableJson } from '../components/table/reports/VariablesTable'; -// import { ProvisionData } from '../content/display/Provisions'; -import { VariableData } from '../content/display/Variables'; -import { DTR, DTRDisplayObject, DocType, DocumentDataDTO, DocumentDataObject, ProvisionGroup } from '../types/types'; +import { + DTR, + DTRDisplayObject, + DocType, + DocumentDataDTO, + DocumentDataObject, + ProvisionGroup, + VariableData, +} from '../types/types'; import { buildDTRDisplayData } from '../util/util'; import * as api from './api'; @@ -42,19 +48,6 @@ export const getMandatoryProvisionsByDocTypeId = async (document_type_id: number return response; }; -// export const getDocumentProvisionsByDocTypeIdDtid = async ( -// document_type_id: number, -// dtid: number -// ): Promise<{ provisions: ProvisionData[]; provisionIds: number[] }> => { -// const url = `${config.API_BASE_URL}/report/provisions/${document_type_id}/${dtid}`; -// const getParameters = api.generateApiParameters(url); -// const response: { provisions: ProvisionData[]; provisionIds: number[] } = await api.get<{ -// provisions: ProvisionData[]; -// provisionIds: number[]; -// }>(getParameters); -// return response; -// }; - export const getDocumentVariablesByDocTypeIdDtid = async ( document_type_id: number, dtid: number diff --git a/frontend/src/app/components/table/reports/VariablesTable.tsx b/frontend/src/app/components/table/reports/VariablesTable.tsx index 7d3630d7..2adcc430 100644 --- a/frontend/src/app/components/table/reports/VariablesTable.tsx +++ b/frontend/src/app/components/table/reports/VariablesTable.tsx @@ -2,9 +2,8 @@ import React, { FC, useEffect, useState } from 'react'; import { DataTable } from '../common/DataTable'; import { ColumnDef, createColumnHelper } from '@tanstack/react-table'; import { Variable } from '../../../types/types'; -import { useDispatch, useSelector } from 'react-redux'; +import { useSelector } from 'react-redux'; import { RootState } from '../../../store/store'; -import { setVariables } from '../../../store/reducers/variableSlice'; export type SaveVariableData = { provision_id: number; @@ -19,10 +18,11 @@ export type VariableJson = { variable_value: string; }; -const VariablesTable: React.FC = React.memo(() => { +const VariablesTable: React.FC<{ onVariableEdit: (variableId: number, newValue: string) => void }> = ({ + onVariableEdit, +}) => { const [filteredVariables, setFilteredVariables] = useState([]); // provisions in the currently selected group - const dispatch = useDispatch(); const selectedVariableIds = useSelector((state: RootState) => state.variable.selectedVariableIds); const variables: Variable[] = useSelector((state: RootState) => state.variable.variables); @@ -41,11 +41,9 @@ const VariablesTable: React.FC = React.memo(() => { }, [variables, selectedVariableIds]); const handleEdit = (variableId: number, newValue: string) => { - const newVariables = variables.map((variable) => - variable.id === variableId ? { ...variable, variable_value: newValue } : variable - ); - dispatch(setVariables(newVariables)); + onVariableEdit(variableId, newValue); }; + console.log('re-render'); const columnHelper = createColumnHelper(); const columns: ColumnDef[] = [ @@ -93,7 +91,7 @@ const VariablesTable: React.FC = React.memo(() => { initialSorting={[{ id: 'variable_name', desc: false }]} /> ); -}); +}; interface TableCellProps { getValue: () => any; @@ -119,4 +117,4 @@ const TableCell: FC = ({ getValue, variableId, onCellUpdate }) = return ; }; -export default VariablesTable; +export default React.memo(VariablesTable); diff --git a/frontend/src/app/content/display/Variables.tsx b/frontend/src/app/content/display/Variables.tsx deleted file mode 100644 index 25afcd01..00000000 --- a/frontend/src/app/content/display/Variables.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { FC, useEffect, useState } from 'react'; -import { getDocumentVariablesByDocTypeIdDtid } from '../../common/report'; -import VariablesTable, { VariableJson } from '../../components/table/reports/VariablesTable'; -import { DocType, Provision, Variable } from '../../types/types'; -import { RootState } from '../../store/store'; -import { useDispatch, useSelector } from 'react-redux'; - -interface VariablesProps { - dtid: number; - documentType: DocType; - updateHandler: (variableJson: VariableJson[]) => void; -} - -export type VariableData = { - id: number; - variable_name: string; - variable_value: string; - help_text: string; - create_userid: string; - update_userid: string; - create_timestamp: string; - update_timestamp: string; - provision: Provision; -}; - -const Variables: FC = ({ dtid, documentType, updateHandler }) => { - // const [allVariables, setAllVariables] = useState([]); - - return ( - <> - - - ); -}; - -export default Variables; diff --git a/frontend/src/app/content/pages/LandingPage.tsx b/frontend/src/app/content/pages/LandingPage.tsx index 1b9a0801..0b749bdf 100644 --- a/frontend/src/app/content/pages/LandingPage.tsx +++ b/frontend/src/app/content/pages/LandingPage.tsx @@ -1,4 +1,4 @@ -import { FC, useEffect, useState } from 'react'; +import { FC, useCallback, useEffect, useState } from 'react'; import Collapsible from '../../../app/components/common/Collapsible'; import { DTRDisplayObject, @@ -43,6 +43,8 @@ const LandingPage: FC = () => { const [documentType, setDocumentType] = useState(null); const [documentTypes, setDocumentTypes] = useState([]); + const [variableEdits, setVariableEdits] = useState<{ [variableId: number]: string }>({}); + const dispatch = useDispatch(); const selectedProvisionIds: number[] = useSelector((state: RootState) => state.provision.selectedProvisionIds); const provisions = useSelector((state: RootState) => state.provision.provisions); @@ -177,6 +179,13 @@ const LandingPage: FC = () => { } }; + const handleVariableEdit = useCallback((variableId: number, newValue: string) => { + setVariableEdits((prevEdits) => ({ + ...prevEdits, + [variableId]: newValue, + })); + }, []); + const getSaveData = () => { const selectedProvisions = provisions.filter((provision) => selectedProvisionIds.includes(provision.provision_id)); const provisionSaveData: SaveProvisionData[] = selectedProvisions.map((provision) => { @@ -185,10 +194,20 @@ const LandingPage: FC = () => { doc_type_provision_id: provision.id, }; }); + const selectedVariables: Variable[] = variables.filter((variable) => selectedVariableIds.includes(variable.id)); - const variableSaveData: SaveVariableData[] = selectedVariables.map((variable) => { + const updatedVariables = selectedVariables.map((variable) => { + if (variableEdits[variable.id] !== undefined) { + return { ...variable, variable_value: variableEdits[variable.id] }; + } + return variable; + }); + dispatch(setVariables(updatedVariables)); + setVariableEdits({}); + const variableSaveData: SaveVariableData[] = updatedVariables.map((variable) => { return { variable_id: variable.id, variable_value: variable.variable_value, provision_id: variable.provision_id }; }); + return { variableSaveData, provisionSaveData }; }; @@ -308,7 +327,7 @@ const LandingPage: FC = () => { - + ) : ( diff --git a/frontend/src/app/types/types.ts b/frontend/src/app/types/types.ts index e2bcc985..240e730e 100644 --- a/frontend/src/app/types/types.ts +++ b/frontend/src/app/types/types.ts @@ -348,3 +348,15 @@ export type ReducedProvisionDataObject = { update_timestamp: string; provision_group: ProvisionGroup; }; + +export type VariableData = { + id: number; + variable_name: string; + variable_value: string; + help_text: string; + create_userid: string; + update_userid: string; + create_timestamp: string; + update_timestamp: string; + provision: Provision; +};