diff --git a/src/client/hocs/withStore.js b/src/client/hocs/withStore.js index cad96aa..9017300 100644 --- a/src/client/hocs/withStore.js +++ b/src/client/hocs/withStore.js @@ -5,7 +5,10 @@ import { useTableOptions, } from 'client/hooks/Calculation/useOptions'; import { useStatus, useTableStatus } from 'client/hooks/Calculation/useStatus'; -import { useValidation } from 'client/hooks/Calculation/useValidation'; +import { + useTableValidation, + useValidation, +} from 'client/hooks/Calculation/useValidation'; import { useStoreValue, useTableValue, @@ -69,6 +72,13 @@ export const withTableValue = Component => ({ propName, }); const { status } = useTableStatus({ tableName, rowIndex, propName }); + const { validateStatus, message } = useTableValidation({ + tableName, + rowIndex, + propName, + validation, + }); + const { options, filter } = useTableOptions({ tableName, rowIndex, @@ -81,6 +91,8 @@ export const withTableValue = Component => ({ value={value} setCurrentValue={setCurrentValue} status={status} + validateStatus={validateStatus} + message={message} options={options} filter={filter} /> diff --git a/src/client/hooks/Calculation/useValidation.ts b/src/client/hooks/Calculation/useValidation.ts index 31eded0..9db490f 100644 --- a/src/client/hooks/Calculation/useValidation.ts +++ b/src/client/hooks/Calculation/useValidation.ts @@ -1,3 +1,5 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import { TableNames, TableValuesNames } from './../../../core/types/tables'; import { ValidateStatus } from 'antd/lib/form/FormItem'; import { INVALID_INPUT as INVALID_INPUT_MESSAGE } from 'core/constants/errorMessages'; import { ElementsNames } from 'core/types/elements'; @@ -11,6 +13,14 @@ interface IUseValidationArgs { validation: TValidation; } +interface IUseTableValidationArgs { + tableName: TableNames; + rowIndex: number; + propName: TableValuesNames; + value: any; + validation: TValidation; +} + export const useValidation = ({ elementName, value, @@ -39,7 +49,76 @@ export const useValidation = ({ calculationStore.setValidation(elementName, validationResult); } } - }, [calculationStore, elementName, validator, value]); + }, [value]); + + const getValidateStatus = (): ValidateStatus | undefined => { + if (isValid === undefined) { + return undefined; + } + return isValid === false ? 'error' : 'success'; + }; + + const getMessage = (): string | undefined => { + if (isValid === false) { + return errorMessage || INVALID_INPUT_MESSAGE; + } + }; + + return { + isValid, + validateStatus: getValidateStatus(), + message: getMessage(), + }; +}; + +export const useTableValidation = ({ + tableName, + rowIndex, + propName, + value, + validation, +}: IUseTableValidationArgs) => { + const { validator, errorMessage } = validation || { + validator: undefined, + errorMessage: undefined, + }; + const [isValid, setValidation] = useState(undefined); + const { calculationStore } = useStores(); + + const validationStatus = + calculationStore.tables[tableName].rows[rowIndex][propName]?.validation; + useEffect(() => { + setValidation(validationStatus); + }, [validationStatus]); + + useEffect(() => { + if (value === undefined || value === '') { + calculationStore.setTableRows( + tableName, + rowIndex, + )([ + { + [propName]: { + validation: undefined, + }, + }, + ]); + } else { + if (validator) { + let validationResult = validator(value); + calculationStore.setTableRows( + tableName, + rowIndex, + )([ + { + [propName]: { + validation: validationResult, + }, + }, + ]); + } + } + }, [value]); const getValidateStatus = (): ValidateStatus | undefined => { if (isValid === undefined) { diff --git a/src/client/stores/CalculationStore/Data/tables.js b/src/client/stores/CalculationStore/Data/tables.js index 9678f1f..d135dbc 100644 --- a/src/client/stores/CalculationStore/Data/tables.js +++ b/src/client/stores/CalculationStore/Data/tables.js @@ -43,6 +43,12 @@ const tablesActions = { }; }, + setTableRow(tableName, rowIndex, override) { + return row => { + this.setTableRows(tableName, rowIndex, override)([row]); + }; + }, + setTableColumns(tableName, override) { return columnParams => { for (let paramsName in columnParams) { diff --git a/src/client/stores/CalculationStore/Effects/reaction.ts b/src/client/stores/CalculationStore/Effects/reaction.ts index c5fe329..70b7dcb 100644 --- a/src/client/stores/CalculationStore/Effects/reaction.ts +++ b/src/client/stores/CalculationStore/Effects/reaction.ts @@ -2096,24 +2096,20 @@ const reactionEffects: IReactionEffect[] = [ effect: ({ insTerm, kaskoRowIndex, leasingPeriod }) => { if (insTerm === 100000001 && leasingPeriod > 15 && kaskoRowIndex) { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insured: { value: 100000001, status: Status.Disabled }, - }, - ]); + )({ + insured: { value: 100000001, status: Status.Disabled }, + }); } else { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insured: { status: Status.Default }, - }, - ]); + )({ + insured: { status: Status.Default }, + }); } }, }), @@ -2135,79 +2131,65 @@ const reactionEffects: IReactionEffect[] = [ if (leasingPeriod) { if (leasingPeriod < 12) { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insured: { value: 100000000, status: Status.Disabled }, - }, - ]); + )({ + insured: { value: 100000000, status: Status.Disabled }, + }); if (osagoRowIndex >= 0) { - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', osagoRowIndex, - )([ - { - insured: { value: 100000000, status: Status.Disabled }, - }, - ]); + )({ + insured: { value: 100000000, status: Status.Disabled }, + }); } } else { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insured: { value: 100000000, status: Status.Default }, - }, - ]); + )({ + insured: { value: 100000000, status: Status.Default }, + }); if (osagoRowIndex >= 0) { - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', osagoRowIndex, - )([ - { - insured: { status: Status.Default }, - }, - ]); + )({ + insured: { status: Status.Default }, + }); } } if (leasingPeriod < 13) { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insTerm: { value: 100000000, status: Status.Disabled }, - }, - ]); + )({ + insTerm: { value: 100000000, status: Status.Disabled }, + }); return; } else if (leasingPeriod > 12 && leasingPeriod < 16) { if (kaskoRowIndex >= 0) - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insTerm: { value: 100000001, status: Status.Disabled }, - }, - ]); + )({ + insTerm: { value: 100000001, status: Status.Disabled }, + }); return; } else { if (kaskoRowIndex >= 0) { - calculationStore.setTableRows( + calculationStore.setTableRow( 'tableInsurance', kaskoRowIndex, - )([ - { - insured: { status: Status.Default }, - insTerm: { status: Status.Default }, - }, - ]); + )({ + insured: { status: Status.Default }, + insTerm: { status: Status.Default }, + }); } } } diff --git a/src/core/types/stores.ts b/src/core/types/stores.ts index c49dc9e..730f2bb 100644 --- a/src/core/types/stores.ts +++ b/src/core/types/stores.ts @@ -67,6 +67,12 @@ interface ICalculationTables { override?: boolean, ) => (rows: TableProps[]) => void; + setTableRow: ( + tableName: TableNames, + rowIndex: number, + override?: boolean, + ) => (row: TableProps) => void; + setTableColumns: ( tableName: TableNames, override?: boolean, diff --git a/src/core/types/tables.ts b/src/core/types/tables.ts index a7dcffe..51a6cb6 100644 --- a/src/core/types/tables.ts +++ b/src/core/types/tables.ts @@ -23,7 +23,7 @@ export type TCellCallback = ( export interface ITableCell { value?: any; status?: Status; - validations?: boolean; + validation?: boolean; filter?: TElementFilter; }