@aehrc/smart-forms-renderer 0.7.0 → 0.7.2

package/src/components/FormComponents/Tables/QItemGroupTableRow.tsx

@@ -17,7 +17,7 @@
 
 import React from 'react';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
-import { createQrGroup, updateQrGroup } from '../../../utils/qrItem';
+import { createQrGroup, updateQrItemsInGroup } from '../../../utils/qrItem';
 import SingleItem from '../SingleItem/SingleItem';
 import { getQrItemsIndex } from '../../../utils/mapItem';
 import { StandardTableCell } from './Table.styles';
@@ -42,7 +42,7 @@ function QItemGroupTableRow(props: Props) {
 
   function handleQrRowItemChange(newQrRowItem: QuestionnaireResponseItem) {
     const qrRow: QuestionnaireResponseItem = { ...row };
-    updateQrGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
+    updateQrItemsInGroup(newQrRowItem, null, qrRow, qItemsIndexMap);
     onQrItemChange(qrRow);
   }
 

package/src/components/FormComponents/Tables/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { default as GroupTable } from './QItemGroupTable';

package/src/components/FormComponents/TextItem/TextItem.tsx

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 import type {
   PropsWithIsRepeatedAttribute,
   PropsWithQrItemChangeHandler
@@ -30,6 +30,7 @@ import { FullWidthFormComponentBox } from '../../Box.styles';
 import TextField from './TextField';
 import useStringCalculatedExpression from '../../../hooks/useStringCalculatedExpression';
 import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import useStringInput from '../../../hooks/useStringInput';
 
 interface TextItemProps
   extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
@@ -57,7 +58,7 @@ function TextItem(props: TextItemProps) {
   if (qrItem?.answer && qrItem?.answer[0].valueString) {
     valueText = qrItem.answer[0].valueString;
   }
-  const [input, setInput] = useState(valueText);
+  const [input, setInput] = useStringInput(valueText);
 
   // Perform validation checks
   const feedback = useValidationError(input, regexValidation, maxLength);

package/src/components/FormComponents/index.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export * from './SingleItem';
+export * from './RepeatGroup';
+export * from './Tables';

package/src/components/Renderer/BaseRenderer.tsx

@@ -15,13 +15,17 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import Container from '@mui/material/Container';
 import Fade from '@mui/material/Fade';
 import FormTopLevelItem from './FormTopLevelItem';
 import type { QuestionnaireResponse, QuestionnaireResponseItem } from 'fhir/r4';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import useQuestionnaireResponseStore from '../../stores/useQuestionnaireResponseStore';
+import cloneDeep from 'lodash.clonedeep';
+import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
+import type { QrRepeatGroup } from '../../interfaces/repeatGroup.interface';
 
 function BaseRenderer() {
   const sourceQuestionnaire = useQuestionnaireStore((state) => state.sourceQuestionnaire);
@@ -29,48 +33,65 @@ function BaseRenderer() {
   const updatableResponse = useQuestionnaireResponseStore((state) => state.updatableResponse);
   const updateResponse = useQuestionnaireResponseStore((state) => state.updateResponse);
 
-  function handleTopLevelQRItemChange(newTopLevelQItem: QuestionnaireResponseItem, index: number) {
-    if (!updatableResponse.item || updatableResponse.item.length === 0) {
+  const qItemsIndexMap = useMemo(() => mapQItemsIndex(sourceQuestionnaire), [sourceQuestionnaire]);
+
+  function handleTopLevelQRItemSingleChange(
+    newTopLevelQRItem: QuestionnaireResponseItem,
+    index: number
+  ) {
+    const updatedResponse: QuestionnaireResponse = cloneDeep(updatableResponse);
+    if (!updatedResponse.item || updatedResponse.item.length === 0) {
       return;
     }
 
-    const updatedItems = [...updatableResponse.item]; // Copy the original array of items
-    updatedItems[index] = newTopLevelQItem; // Modify the item at the specified index
+    const updatedItems = [...updatedResponse.item]; // Copy the original array of items
+    updatedItems[index] = newTopLevelQRItem; // Modify the item at the specified index
 
-    const updatedResponse: QuestionnaireResponse = {
-      ...updatableResponse,
-      item: updatedItems
-    };
+    updatedResponse.item = updatedItems;
+
+    updateExpressions(updatedResponse);
+    updateResponse(updatedResponse);
+  }
+
+  function handleTopLevelQRItemMultipleChange(newTopLevelQRItems: QrRepeatGroup) {
+    const updatedResponse: QuestionnaireResponse = cloneDeep(updatableResponse);
+    if (!updatedResponse.item || updatedResponse.item.length === 0) {
+      return;
+    }
+
+    updateQrItemsInGroup(null, newTopLevelQRItems, updatedResponse, qItemsIndexMap);
 
     updateExpressions(updatedResponse);
     updateResponse(updatedResponse);
   }
 
   const topLevelQItems = sourceQuestionnaire.item;
-  const topLevelQRItems = updatableResponse.item;
+  const topLevelQRItems = cloneDeep(updatableResponse.item) ?? [];
 
   if (!topLevelQItems) {
     return <>Questionnaire does not have any items</>;
   }
 
+  // If an item has multiple answers, it is a repeat group
+  const topLevelQRItemsByIndex: (QuestionnaireResponseItem | QuestionnaireResponseItem[])[] =
+    getQrItemsIndex(topLevelQItems, topLevelQRItems, qItemsIndexMap);
+
   return (
     <Fade in={true} timeout={500}>
       <Container maxWidth="xl">
         {topLevelQItems.map((qItem, index) => {
-          const qrItem = topLevelQRItems
-            ? topLevelQRItems[index]
-            : {
-                linkId: qItem.linkId,
-                text: qItem.text
-              };
+          const qrItemOrItems = topLevelQRItemsByIndex[index];
 
           return (
             <FormTopLevelItem
               key={qItem.linkId}
               topLevelQItem={qItem}
-              topLevelQRItem={qrItem}
+              topLevelQRItemOrItems={qrItemOrItems}
               onQrItemChange={(newTopLevelQRItem) =>
-                handleTopLevelQRItemChange(newTopLevelQRItem, index)
+                handleTopLevelQRItemSingleChange(newTopLevelQRItem, index)
+              }
+              onQrRepeatGroupChange={(newTopLevelQRItems) =>
+                handleTopLevelQRItemMultipleChange(newTopLevelQRItems)
               }
             />
           );

package/src/components/Renderer/FormBodyCollapsible.tsx

@@ -19,7 +19,7 @@ import React, { useMemo } from 'react';
 import Stack from '@mui/material/Stack';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
-import { updateQrGroup } from '../../utils/qrItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
 import FormBodySingleCollapsibleWrapper from './FormBodySingleCollapsibleWrapper';
@@ -46,7 +46,7 @@ function FormBodyCollapsibleWrapper(props: FormBodyCollapsibleProps) {
   const qrItems = topLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
     onQrItemChange(topLevelQRItem);
   }
 

package/src/components/Renderer/FormBodyTabbed.tsx

@@ -22,7 +22,7 @@ import TabContext from '@mui/lab/TabContext';
 import TabPanel from '@mui/lab/TabPanel';
 import { getQrItemsIndex, mapQItemsIndex } from '../../utils/mapItem';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
-import { updateQrGroup } from '../../utils/qrItem';
+import { updateQrItemsInGroup } from '../../utils/qrItem';
 import FormBodyTabListWrapper from '../Tabs/FormBodyTabListWrapper';
 import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../stores/useQuestionnaireStore';
@@ -47,7 +47,7 @@ function FormBodyTabbed(props: FormBodyTabbedProps) {
   const qrItems = topLevelQRItem.item;
 
   function handleQrGroupChange(qrItem: QuestionnaireResponseItem) {
-    updateQrGroup(qrItem, null, topLevelQRItem, indexMap);
+    updateQrItemsInGroup(qrItem, null, topLevelQRItem, indexMap);
     onQrItemChange(topLevelQRItem);
   }
 

package/src/components/Renderer/FormTopLevelItem.tsx

@@ -21,17 +21,24 @@ import FormBodyTabbed from './FormBodyTabbed';
 import { containsTabs, isTabContainer } from '../../utils/tabs';
 import GroupItem from '../FormComponents/GroupItem/GroupItem';
 import SingleItem from '../FormComponents/SingleItem/SingleItem';
-import type { PropsWithQrItemChangeHandler } from '../../interfaces/renderProps.interface';
+import type {
+  PropsWithQrItemChangeHandler,
+  PropsWithQrRepeatGroupChangeHandler
+} from '../../interfaces/renderProps.interface';
 import FormBodyCollapsible from './FormBodyCollapsible';
 import useResponsive from '../../hooks/useResponsive';
+import useHidden from '../../hooks/useHidden';
+import GroupItemSwitcher from '../FormComponents/GroupItem/GroupItemSwitcher';
 
-interface FormTopLevelItemProps extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem> {
+interface FormTopLevelItemProps
+  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+    PropsWithQrRepeatGroupChangeHandler {
   topLevelQItem: QuestionnaireItem;
-  topLevelQRItem: QuestionnaireResponseItem;
+  topLevelQRItemOrItems: QuestionnaireResponseItem | QuestionnaireResponseItem[];
 }
 
 function FormTopLevelItem(props: FormTopLevelItemProps) {
-  const { topLevelQItem, topLevelQRItem, onQrItemChange } = props;
+  const { topLevelQItem, topLevelQRItemOrItems, onQrItemChange, onQrRepeatGroupChange } = props;
 
   const itemIsTabContainer = isTabContainer(topLevelQItem);
   const itemContainsTabs = containsTabs(topLevelQItem);
@@ -40,6 +47,28 @@ function FormTopLevelItem(props: FormTopLevelItemProps) {
 
   const itemIsGroup = topLevelQItem.type === 'group';
 
+  const itemIsHidden = useHidden(topLevelQItem);
+  if (itemIsHidden) {
+    return null;
+  }
+
+  // If item has multiple answers, use a group item switcher to determine how to render it.
+  const hasMultipleAnswers = Array.isArray(topLevelQRItemOrItems);
+  if (hasMultipleAnswers) {
+    return (
+      <GroupItemSwitcher
+        qItem={topLevelQItem}
+        qrItemOrItems={topLevelQRItemOrItems}
+        groupCardElevation={1}
+        onQrItemChange={onQrItemChange}
+        onQrRepeatGroupChange={onQrRepeatGroupChange}
+      />
+    );
+  }
+
+  // At this point, item only has one answer
+  const topLevelQRItem = topLevelQRItemOrItems;
+
   // If form is tabbed, it is rendered as a tabbed form
   if (itemContainsTabs || itemIsTabContainer) {
     if (isDesktop) {

package/src/components/index.ts

@@ -16,3 +16,4 @@
  */
 
 export * from './Renderer';
+export * from './FormComponents';

package/src/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useHidden } from './useHidden';

package/src/hooks/useInitialiseRepeatAnswers.ts

@@ -15,28 +15,39 @@
  * limitations under the License.
  */
 
-import type { QuestionnaireResponseItem } from 'fhir/r4';
+import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import type { RepeatAnswer } from '../interfaces/repeatItem.interface';
 import { nanoid } from 'nanoid';
+import { useMemo } from 'react';
 
-function useInitialiseRepeatAnswers(qrItem: QuestionnaireResponseItem): RepeatAnswer[] {
-  let initialRepeatAnswers: RepeatAnswer[] = [
-    {
-      nanoId: nanoid(),
-      answer: null
-    }
-  ];
+function useInitialiseRepeatAnswers(
+  qItem: QuestionnaireItem,
+  qrItem: QuestionnaireResponseItem
+): RepeatAnswer[] {
+  return useMemo(
+    () => {
+      let initialRepeatAnswers: RepeatAnswer[] = [
+        {
+          nanoId: nanoid(),
+          answer: null
+        }
+      ];
 
-  if (qrItem?.answer) {
-    initialRepeatAnswers = qrItem.answer.map((answer) => {
-      return {
-        nanoId: nanoid(),
-        answer
-      };
-    });
-  }
+      if (qrItem?.answer) {
+        initialRepeatAnswers = qrItem.answer.map((answer) => {
+          return {
+            nanoId: nanoid(),
+            answer
+          };
+        });
+      }
 
-  return initialRepeatAnswers;
+      return initialRepeatAnswers;
+    },
+    // init initialRepeatAnswers on first render only, leave dependency array empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [qItem]
+  );
 }
 
 export default useInitialiseRepeatAnswers;

package/src/hooks/useInitialiseRepeatGroups.ts

@@ -16,27 +16,38 @@
  */
 
 import type { QuestionnaireResponseItem } from 'fhir/r4';
+import { QuestionnaireItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import type { RepeatGroupSingle } from '../interfaces/repeatGroup.interface';
+import { useMemo } from 'react';
 
-function useInitialiseRepeatGroups(qrItems: QuestionnaireResponseItem[]): RepeatGroupSingle[] {
-  let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
-    {
-      nanoId: nanoid(),
-      qrItem: null
-    }
-  ];
+function useInitialiseRepeatGroups(
+  qItem: QuestionnaireItem,
+  qrItems: QuestionnaireResponseItem[]
+): RepeatGroupSingle[] {
+  return useMemo(
+    () => {
+      let initialRepeatGroupAnswers: RepeatGroupSingle[] = [
+        {
+          nanoId: nanoid(),
+          qrItem: null
+        }
+      ];
 
-  if (qrItems.length > 0) {
-    initialRepeatGroupAnswers = qrItems.map((qrItem) => {
-      return {
-        nanoId: nanoid(),
-        qrItem
-      };
-    });
-  }
-
-  return initialRepeatGroupAnswers;
+      if (qrItems.length > 0) {
+        initialRepeatGroupAnswers = qrItems.map((qrItem) => {
+          return {
+            nanoId: nanoid(),
+            qrItem
+          };
+        });
+      }
+      return initialRepeatGroupAnswers;
+    },
+    // init initialRepeatAnswers on first render only, leave dependency array empty
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [qItem]
+  );
 }
 
 export default useInitialiseRepeatGroups;

package/src/hooks/useNumberInput.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+function useNumberInput(valueFromProps: number): [number, Dispatch<SetStateAction<number>>] {
+  const [value, setValue] = useState(valueFromProps);
+
+  useEffect(
+    () => {
+      if (value !== valueFromProps) {
+        setValue(valueFromProps);
+      }
+    },
+    // Only trigger this effect if prop value changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [valueFromProps]
+  );
+
+  return [value, setValue];
+}
+
+export default useNumberInput;

package/src/hooks/useStringInput.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2023 Commonwealth Scientific and Industrial Research
+ * Organisation (CSIRO) ABN 41 687 119 230.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+function useStringInput(valueFromProps: string): [string, Dispatch<SetStateAction<string>>] {
+  const [input, setInput] = useState(valueFromProps);
+
+  useEffect(
+    () => {
+      if (input !== valueFromProps) {
+        setInput(valueFromProps);
+      }
+    },
+    // Only trigger this effect if prop value changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [valueFromProps]
+  );
+
+  return [input, setInput];
+}
+
+export default useStringInput;

package/src/index.ts

@@ -3,9 +3,15 @@ import type { Questionnaire, QuestionnaireResponse } from 'fhir/r4';
 import { createQuestionnaireResponse } from './utils/qrItem';
 import useQuestionnaireResponseStore from './stores/useQuestionnaireResponseStore';
 import { removeHiddenAnswers } from './utils/removeHidden';
+import type { ItemToRepopulate } from './utils/repopulateItems';
+import { getItemsToRepopulate } from './utils/repopulateItems';
+import { repopulateItemsIntoResponse } from './utils/repopulateIntoResponse';
 
 export * from './components';
 export * from './stores';
+export * from './hooks';
+export * from './utils';
+export type { ItemToRepopulate };
 
 /**
  * Build the form with an initial Questionnaire and an optional filled QuestionnaireResponse.
@@ -72,3 +78,40 @@ export function removeHiddenAnswersFromResponse(
     enableWhenExpressions
   });
 }
+
+/**
+ * Re-populate stuff
+ *
+ * @author Sean Fong
+ */
+export function generateItemsToRepopulate(populatedResponse: QuestionnaireResponse) {
+  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
+  const itemTypes = useQuestionnaireStore.getState().itemTypes;
+  const tabs = useQuestionnaireStore.getState().tabs;
+  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
+  console.log(updatableResponse);
+
+  return getItemsToRepopulate(
+    sourceQuestionnaire,
+    itemTypes,
+    tabs,
+    populatedResponse,
+    updatableResponse
+  );
+}
+
+/**
+ * Re-populate stuff
+ *
+ * @author Sean Fong
+ */
+export function repopulate(checkedItemsToRepopulate: Record<string, ItemToRepopulate>) {
+  const sourceQuestionnaire = useQuestionnaireStore.getState().sourceQuestionnaire;
+  const updatableResponse = useQuestionnaireResponseStore.getState().updatableResponse;
+
+  return repopulateItemsIntoResponse(
+    sourceQuestionnaire,
+    updatableResponse,
+    checkedItemsToRepopulate
+  );
+}

package/src/interfaces/questionnaireStore.interface.ts

@@ -24,6 +24,7 @@ import type { AnswerExpression } from './answerExpression.interface';
 import type { Coding } from 'fhir/r4';
 
 export interface QuestionnaireModel {
+  itemTypes: Record<string, string>;
   tabs: Tabs;
   variables: Variables;
   launchContexts: Record<string, LaunchContext>;

package/src/stores/useQuestionnaireResponseStore.ts

@@ -2,11 +2,12 @@ import { create } from 'zustand';
 import type { QuestionnaireResponse } from 'fhir/r4';
 import { emptyResponse } from '../utils/emptyResource';
 import cloneDeep from 'lodash.clonedeep';
+import { diff } from 'json-diff';
 
 export interface UseQuestionnaireResponseStoreType {
   sourceResponse: QuestionnaireResponse;
   updatableResponse: QuestionnaireResponse;
-  hasChanges: boolean;
+  formChangesHistory: object[];
   buildSourceResponse: (response: QuestionnaireResponse) => void;
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => void;
   updateResponse: (updatedResponse: QuestionnaireResponse) => void;
@@ -15,10 +16,10 @@ export interface UseQuestionnaireResponseStoreType {
   destroySourceResponse: () => void;
 }
 
-const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>()((set) => ({
+const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>()((set, get) => ({
   sourceResponse: cloneDeep(emptyResponse),
   updatableResponse: cloneDeep(emptyResponse),
-  hasChanges: false,
+  formChangesHistory: [],
   buildSourceResponse: (questionnaireResponse: QuestionnaireResponse) => {
     set(() => ({
       sourceResponse: questionnaireResponse,
@@ -26,32 +27,35 @@ const useQuestionnaireResponseStore = create<UseQuestionnaireResponseStoreType>(
     }));
   },
   setUpdatableResponseAsPopulated: (populatedResponse: QuestionnaireResponse) => {
+    const formChanges = diff(get().updatableResponse, populatedResponse, { full: true });
     set(() => ({
       updatableResponse: populatedResponse,
-      hasChanges: false
+      formChangesHistory: [...get().formChangesHistory, formChanges]
     }));
   },
-  updateResponse: (updatedResponse: QuestionnaireResponse) =>
+  updateResponse: (updatedResponse: QuestionnaireResponse) => {
+    const formChanges = diff(get().updatableResponse, updatedResponse, { full: true });
     set(() => ({
       updatableResponse: updatedResponse,
-      hasChanges: true
-    })),
+      formChangesHistory: [...get().formChangesHistory, formChanges]
+    }));
+  },
   setUpdatableResponseAsSaved: (savedResponse: QuestionnaireResponse) =>
     set(() => ({
       sourceResponse: savedResponse,
       updatableResponse: savedResponse,
-      hasChanges: false
+      formChangesHistory: []
     })),
   setUpdatableResponseAsEmpty: (clearedResponse: QuestionnaireResponse) =>
     set(() => ({
       updatableResponse: clearedResponse,
-      hasChanges: false
+      formChangesHistory: []
     })),
   destroySourceResponse: () =>
     set(() => ({
       sourceResponse: cloneDeep(emptyResponse),
       updatableResponse: cloneDeep(emptyResponse),
-      hasChanges: false
+      formChangesHistory: []
     }))
 }));