From 33fb30032b84f44bf353b4f690b25f096039cd24 Mon Sep 17 00:00:00 2001 From: Thomas Zemp Date: Tue, 3 Dec 2024 11:04:53 +0100 Subject: [PATCH] fix: pr feedback --- src/data-workspace/custom-form/replace-input-node.js | 2 +- src/data-workspace/inputs/generic-input.js | 9 ++++++++- src/data-workspace/inputs/long-text.js | 11 +++++++++-- src/data-workspace/inputs/true-only-checkbox.js | 11 +++++++++-- src/shared/use-blurred-field.js | 3 ++- 5 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/data-workspace/custom-form/replace-input-node.js b/src/data-workspace/custom-form/replace-input-node.js index 1cedee409..f784382ed 100644 --- a/src/data-workspace/custom-form/replace-input-node.js +++ b/src/data-workspace/custom-form/replace-input-node.js @@ -29,7 +29,7 @@ export const replaceInputNode = (domNode, metadata) => { // TODO: This was already there when I started on this branch // Need to check with Kai what his intentions were with it. // const cellProps = getCellPropsByInputType(inputType) - // console.log(domNode) + if (inputType !== INPUT_TYPES.ENTRYFIELD) { return undefined } diff --git a/src/data-workspace/inputs/generic-input.js b/src/data-workspace/inputs/generic-input.js index be0440f26..3e8b7316a 100644 --- a/src/data-workspace/inputs/generic-input.js +++ b/src/data-workspace/inputs/generic-input.js @@ -57,6 +57,13 @@ export const GenericInput = ({ }) => { const [value, setValue] = useState(initialValue) const [lastSyncedValue, setLastSyncedValue] = useState(initialValue) + const [syncTouched, setSyncTouched] = useState(false) + + useEffect(() => { + if (syncTouched) { + setValueSynced(value === lastSyncedValue) + } + }, [value, lastSyncedValue, syncTouched]) const limits = useMinMaxLimits(deId, cocId) @@ -75,6 +82,7 @@ export const GenericInput = ({ const { mutate } = useSetDataValueMutation({ deId, cocId }) const syncData = (newValue) => { + setSyncTouched(true) // todo: Here's where an error state could be set: ('onError') mutate( // Empty values need an empty string @@ -82,7 +90,6 @@ export const GenericInput = ({ { onSuccess: () => { setLastSyncedValue(newValue) - setValueSynced(value === newValue) }, } ) diff --git a/src/data-workspace/inputs/long-text.js b/src/data-workspace/inputs/long-text.js index 882984b76..b5c93ebe7 100644 --- a/src/data-workspace/inputs/long-text.js +++ b/src/data-workspace/inputs/long-text.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { useSetDataValueMutation } from '../../shared/index.js' import styles from './inputs.module.css' import { InputPropTypes } from './utils.js' @@ -16,9 +16,17 @@ export const LongText = ({ }) => { const [value, setValue] = useState(initialValue) const [lastSyncedValue, setLastSyncedValue] = useState(initialValue) + const [syncTouched, setSyncTouched] = useState(false) + + useEffect(() => { + if (syncTouched) { + setValueSynced(value === lastSyncedValue) + } + }, [value, lastSyncedValue, syncTouched]) const { mutate } = useSetDataValueMutation({ deId, cocId }) const syncData = (newValue) => { + setSyncTouched(true) // todo: Here's where an error state could be set: ('onError') mutate( // Empty values need an empty string @@ -26,7 +34,6 @@ export const LongText = ({ { onSuccess: () => { setLastSyncedValue(newValue) - setValueSynced(value === newValue) }, } ) diff --git a/src/data-workspace/inputs/true-only-checkbox.js b/src/data-workspace/inputs/true-only-checkbox.js index 26a0a40d9..a77038e60 100644 --- a/src/data-workspace/inputs/true-only-checkbox.js +++ b/src/data-workspace/inputs/true-only-checkbox.js @@ -1,5 +1,5 @@ import { Checkbox } from '@dhis2/ui' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { useSetDataValueMutation } from '../../shared/index.js' import styles from './inputs.module.css' import { convertBooleanValue, InputPropTypes } from './utils.js' @@ -19,9 +19,17 @@ export const TrueOnlyCheckbox = ({ const [lastSyncedValue, setLastSyncedValue] = useState(() => convertBooleanValue(initialValue) ) + const [syncTouched, setSyncTouched] = useState(false) + + useEffect(() => { + if (syncTouched) { + setValueSynced(value === lastSyncedValue) + } + }, [value, lastSyncedValue, syncTouched]) const { mutate } = useSetDataValueMutation({ deId, cocId }) const syncData = (newValue) => { + setSyncTouched(true) // todo: Here's where an error state could be set: ('onError') mutate( // Empty values need an empty string @@ -29,7 +37,6 @@ export const TrueOnlyCheckbox = ({ { onSuccess: () => { setLastSyncedValue(newValue) - setValueSynced(newValue === value) }, } ) diff --git a/src/shared/use-blurred-field.js b/src/shared/use-blurred-field.js index 68ebfb3df..e907771e3 100644 --- a/src/shared/use-blurred-field.js +++ b/src/shared/use-blurred-field.js @@ -1,4 +1,5 @@ import { useRef } from 'react' +import { getFieldId } from '../data-workspace/get-field-id.js' import { useHighlightedFieldStore } from './stores/highlighted-field-store.js' export const useBlurredField = () => { @@ -6,7 +7,7 @@ export const useBlurredField = () => { const { dataElementId, categoryOptionComboId } = useHighlightedFieldStore((state) => state.getHighlightedField()) || {} - const fieldId = `${dataElementId}.${categoryOptionComboId}` + const fieldId = getFieldId(dataElementId, categoryOptionComboId) const blurredField = previouslyActiveFieldRef.current previouslyActiveFieldRef.current = fieldId