Issue/639

documentation/docs/api/smart-forms-renderer/interfaces/QuestionnaireStoreType.md

@@ -71,6 +71,14 @@ Key-value pair of calculated expressions `Record<linkId, array of calculated exp
 
 ***
 
+### currentPageIndex
+
+> **currentPageIndex**: `number`
+
+Index of the current page
+
+***
+
 ### currentTabIndex
 
 > **currentTabIndex**: `number`
@@ -161,6 +169,24 @@ Key-value pair of launch contexts `Record<launch context name, launch context pr
 
 ***
 
+### markPageAsComplete()
+
+> **markPageAsComplete**: (`pageLinkId`) => `void`
+
+Used to mark a page index as complete
+
+#### Parameters
+
+| Parameter | Type |
+| :------ | :------ |
+| `pageLinkId` | `string` |
+
+#### Returns
+
+`void`
+
+***
+
 ### markTabAsComplete()
 
 > **markTabAsComplete**: (`tabLinkId`) => `void`
@@ -217,6 +243,14 @@ Used to set the focused linkId
 
 ***
 
+### pages
+
+> **pages**: `Pages`
+
+Key-value pair of pages `Record<linkId, Page>`
+
+***
+
 ### populatedContext
 
 > **populatedContext**: `Record`\<`string`, `any`\>
@@ -293,6 +327,24 @@ FHIR R4 Questionnaire to render
 
 ***
 
+### switchPage()
+
+> **switchPage**: (`newPageIndex`) => `void`
+
+Used to switch the current page index
+
+#### Parameters
+
+| Parameter | Type |
+| :------ | :------ |
+| `newPageIndex` | `number` |
+
+#### Returns
+
+`void`
+
+***
+
 ### switchTab()
 
 > **switchTab**: (`newTabIndex`) => `void`

documentation/docs/api/smart-forms-renderer/variables/useQuestionnaireStore.md

@@ -81,6 +81,14 @@ This is the React version of the store which can be used as React hooks in React
 
 `Record`\<`string`, `CalculatedExpression`[]\>
 
+### use.currentPageIndex()
+
+> **currentPageIndex**: () => `number`
+
+#### Returns
+
+`number`
+
 ### use.currentTabIndex()
 
 > **currentTabIndex**: () => `number`
@@ -173,6 +181,24 @@ This is the React version of the store which can be used as React hooks in React
 
 `Record`\<`string`, [`LaunchContext`](../interfaces/LaunchContext.md)\>
 
+### use.markPageAsComplete()
+
+> **markPageAsComplete**: () => (`pageLinkId`) => `void`
+
+#### Returns
+
+`Function`
+
+##### Parameters
+
+| Parameter | Type |
+| :------ | :------ |
+| `pageLinkId` | `string` |
+
+##### Returns
+
+`void`
+
 ### use.markTabAsComplete()
 
 > **markTabAsComplete**: () => (`tabLinkId`) => `void`
@@ -229,6 +255,14 @@ This is the React version of the store which can be used as React hooks in React
 
 `void`
 
+### use.pages()
+
+> **pages**: () => `Pages`
+
+#### Returns
+
+`Pages`
+
 ### use.populatedContext()
 
 > **populatedContext**: () => `Record`\<`string`, `any`\>
@@ -305,6 +339,24 @@ This is the React version of the store which can be used as React hooks in React
 
 `Questionnaire`
 
+### use.switchPage()
+
+> **switchPage**: () => (`newPageIndex`) => `void`
+
+#### Returns
+
+`Function`
+
+##### Parameters
+
+| Parameter | Type |
+| :------ | :------ |
+| `newPageIndex` | `number` |
+
+##### Returns
+
+`void`
+
 ### use.switchTab()
 
 > **switchTab**: () => (`newTabIndex`) => `void`

documentation/docs/components/quantity.mdx

@@ -12,7 +12,7 @@ There is an extension "http://hl7.org/fhir/StructureDefinition/questionnaire-uni
 
 :::warning
 
-This component is not thoroughly tested yet. It is currently using the same exact UI component as **[decimal](/docs/components/decimal)**. Please use it with caution.
+This component is not thoroughly tested yet. Please use it with caution.
 
 :::
 
@@ -26,7 +26,39 @@ This component is not thoroughly tested yet. It is currently using the same exac
     width="100%"
     height="100"
   />
-</IframeContainer>{' '}
+</IframeContainer>
+
+#### With Response
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-itemtype-quantity--quantity-basic-response">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-quantity--quantity-basic-response"
+    width="100%"
+    height="100"
+  />
+</IframeContainer>
+
+### Advanced usage
+
+#### With Unit Options
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-itemtype-quantity--quantity-unit-option-response">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-quantity--quantity-unit-option-response"
+    width="100%"
+    height="100"
+  />
+</IframeContainer>
+
+#### Calculations
+
+<IframeContainer storyUrl="https://smartforms.csiro.au/storybook/index.html?path=/story/component-itemtype-quantity--quantity-calculation">
+  <iframe
+    src="https://smartforms.csiro.au/storybook/iframe.html?args=&id=component-itemtype-quantity--quantity-calculation"
+    width="100%"
+    height="100"
+  />
+</IframeContainer>
 
 ### SDC Supported extensions
 

packages/sdc-assemble/README.md

@@ -54,10 +54,14 @@ export default defineConfig({
         // other modules as required...
       ]
     }
-  }
+  },
+  resolve: { preserveSymlinks: true }
 });
 ```
 
+During development, please change the `module` element in `tsconfig.json` to `"ES6"` and comment out the above changes. Otherwise `tsc -w` will not work properly.
+
+
 ## Sample implementation
 We have used this module as a microservice in our forms server https://smartforms.csiro.au/api/fhir/Questionnaire/$assemble. 
 

packages/sdc-populate/README.md

@@ -24,9 +24,12 @@ export default defineConfig({
         // other modules as required...
       ]
     }
-  }
+  },
+  resolve: { preserveSymlinks: true }
 });
 ```
 
+During development, please change the `module` element in `tsconfig.json` to `"ES6"` and comment out the above changes. Otherwise `tsc -w` will not work properly.
+
 
 

packages/sdc-populate/src/SDCPopulateQuestionnaireOperation/utils/addDisplayToCodings.ts

@@ -125,5 +125,10 @@ export async function resolveLookupPromises(
 }
 
 function valueIsCoding(initialExpressionValue: any): initialExpressionValue is Coding {
-  return initialExpressionValue && initialExpressionValue.system && initialExpressionValue.code;
+  return (
+    initialExpressionValue &&
+    initialExpressionValue.system &&
+    initialExpressionValue.code &&
+    !initialExpressionValue.unit // To exclude valueQuantity objects
+  );
 }

packages/sdc-populate/src/SDCPopulateQuestionnaireOperation/utils/parse.ts

@@ -102,7 +102,11 @@ export function parseValueToAnswer(
     }
   }
 
-  if (typeof value === 'object') {
+  if (typeof value === 'object' && value.unit) {
+    return { valueQuantity: value };
+  }
+
+  if (typeof value === 'object' && value.system && value.code) {
     return { valueCoding: value };
   }
 

packages/smart-forms-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aehrc/smart-forms-renderer",
-  "version": "0.37.2",
+  "version": "0.38.2",
   "description": "FHIR Structured Data Captured (SDC) rendering engine for Smart Forms",
   "main": "lib/index.js",
   "scripts": {

packages/smart-forms-renderer/src/components/FormComponents/QuantityItem/QuantityComparatorField.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Autocomplete from '@mui/material/Autocomplete';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import MuiTextField from '../TextItem/MuiTextField';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import type { Quantity } from 'fhir/r4';
+
+interface QuantityComparatorFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  options: Quantity['comparator'][];
+  valueSelect: Quantity['comparator'] | null;
+  readOnly: boolean;
+  onChange: (newValue: Quantity['comparator'] | null) => void;
+}
+
+function QuantityComparatorField(props: QuantityComparatorFieldProps) {
+  const { linkId, options, valueSelect, readOnly, onChange } = props;
+
+  return (
+    <Box>
+      <Autocomplete
+        id={linkId + '-comparator'}
+        value={valueSelect ?? null}
+        options={options}
+        onChange={(_, newValue) => onChange(newValue as Quantity['comparator'])}
+        autoHighlight
+        sx={{ width: 88 }}
+        disabled={readOnly}
+        size="small"
+        renderInput={(params) => <MuiTextField sx={{ width: 88 }} {...params} />}
+      />
+      <Typography variant="caption" color="text.secondary">
+        Symbol (optional)
+      </Typography>
+    </Box>
+  );
+}
+
+export default QuantityComparatorField;

packages/smart-forms-renderer/src/components/FormComponents/QuantityItem/QuantityField.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import InputAdornment from '@mui/material/InputAdornment';
+import FadingCheckIcon from '../ItemParts/FadingCheckIcon';
+import { StandardTextField } from '../Textfield.styles';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+
+interface QuantityFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  input: string;
+  feedback: string;
+  displayPrompt: string;
+  displayUnit: string;
+  entryFormat: string;
+  readOnly: boolean;
+  calcExpUpdated: boolean;
+  onInputChange: (value: string) => void;
+}
+
+function QuantityField(props: QuantityFieldProps) {
+  const {
+    linkId,
+    input,
+    feedback,
+    displayPrompt,
+    displayUnit,
+    entryFormat,
+    readOnly,
+    calcExpUpdated,
+    isTabled,
+    onInputChange
+  } = props;
+
+  return (
+    <StandardTextField
+      id={linkId}
+      value={input}
+      error={!!feedback}
+      onChange={(event) => onInputChange(event.target.value)}
+      disabled={readOnly}
+      label={displayPrompt}
+      placeholder={entryFormat === '' ? '0.0' : entryFormat}
+      fullWidth
+      isTabled={isTabled}
+      size="small"
+      inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position={'end'}>
+            <FadingCheckIcon fadeIn={calcExpUpdated} disabled={readOnly} />
+            {displayUnit}
+          </InputAdornment>
+        )
+      }}
+      helperText={feedback}
+      data-test="q-item-quantity-field"
+    />
+  );
+}
+
+export default QuantityField;