@aehrc/smart-forms-renderer 0.8.1 → 0.9.1

package/src/components/FormComponents/RepeatGroup/RepeatGroup.tsx

@@ -18,7 +18,8 @@
 import React, { useState } from 'react';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrRepeatGroupChangeHandler
+  PropsWithQrRepeatGroupChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import useInitialiseRepeatGroups from '../../../hooks/useInitialiseRepeatGroups';
@@ -38,6 +39,7 @@ import Typography from '@mui/material/Typography';
 
 interface RepeatGroupProps
   extends PropsWithQrRepeatGroupChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   qrItems: QuestionnaireResponseItem[];
@@ -45,7 +47,14 @@ interface RepeatGroupProps
 }
 
 function RepeatGroup(props: RepeatGroupProps) {
-  const { qItem, qrItems, groupCardElevation, parentIsReadOnly, onQrRepeatGroupChange } = props;
+  const {
+    qItem,
+    qrItems,
+    groupCardElevation,
+    showMinimalView,
+    parentIsReadOnly,
+    onQrRepeatGroupChange
+  } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
 
@@ -97,13 +106,47 @@ function RepeatGroup(props: RepeatGroupProps) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
+        <Card elevation={groupCardElevation} sx={{ p: 2 }}>
+          {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
+            const answeredQrItem = createEmptyQrItem(qItem);
+            if (nullableQrItem) {
+              answeredQrItem.item = nullableQrItem.item;
+            }
+
+            return (
+              <RepeatGroupItem
+                key={nanoId}
+                qItem={qItem}
+                answeredQrItem={answeredQrItem}
+                nullableQrItem={nullableQrItem}
+                numOfRepeatGroups={repeatGroups.length}
+                groupCardElevation={groupCardElevation + 1}
+                showMinimalView={showMinimalView}
+                parentIsReadOnly={parentIsReadOnly}
+                onDeleteItem={() => handleDeleteItem(index)}
+                onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+              />
+            );
+          })}
+        </Card>
+      </QGroupContainerBox>
+    );
+  }
+
   return (
     <QGroupContainerBox key={qItem.linkId} cardElevation={groupCardElevation} isRepeated={true}>
       <Card elevation={groupCardElevation} sx={{ p: 3, py: 2.5, mb: 3.5 }}>
-        <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
-          <LabelWrapper qItem={qItem} readOnly={readOnly} />
-        </Typography>
-        <Divider sx={{ mt: 1, mb: 1.5 }} light />
+        {qItem.text ? (
+          <>
+            <Typography variant="h6" color={readOnly ? 'text.secondary' : 'text.primary'}>
+              <LabelWrapper qItem={qItem} readOnly={readOnly} />
+            </Typography>
+            <Divider sx={{ mt: 1, mb: 1.5 }} light />
+          </>
+        ) : null}
         <TransitionGroup>
           {repeatGroups.map(({ nanoId, qrItem: nullableQrItem }, index) => {
             const answeredQrItem = createEmptyQrItem(qItem);

package/src/components/FormComponents/RepeatGroup/RepeatGroupItem.tsx

@@ -21,14 +21,16 @@ import Box from '@mui/material/Box';
 import GroupItem from '../GroupItem/GroupItem';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import DeleteItemButton from './DeleteItemButton';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface RepeatGroupItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
   answeredQrItem: QuestionnaireResponseItem;
@@ -45,6 +47,7 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
     nullableQrItem,
     numOfRepeatGroups,
     groupCardElevation,
+    showMinimalView,
     parentIsReadOnly,
     onDeleteItem,
     onQrItemChange
@@ -64,12 +67,14 @@ function RepeatGroupItem(props: RepeatGroupItemProps) {
           onQrItemChange={onQrItemChange}
         />
       </Box>
-      <DeleteItemButton
-        nullableQrItem={nullableQrItem}
-        numOfRepeatGroups={numOfRepeatGroups}
-        readOnly={readOnly}
-        onDeleteItem={onDeleteItem}
-      />
+      {showMinimalView ? null : (
+        <DeleteItemButton
+          nullableQrItem={nullableQrItem}
+          numOfRepeatGroups={numOfRepeatGroups}
+          readOnly={readOnly}
+          onDeleteItem={onDeleteItem}
+        />
+      )}
     </RepeatGroupContainerStack>
   );
 }

package/src/components/FormComponents/RepeatItem/RepeatField.tsx

@@ -26,16 +26,18 @@ import type {
 } from 'fhir/r4';
 import type {
   PropsWithParentIsReadOnlyAttribute,
-  PropsWithQrItemChangeHandler
+  PropsWithQrItemChangeHandler,
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import DeleteItemButton from './DeleteItemButton';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface RepeatFieldProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
   answer: QuestionnaireResponseItemAnswer | null;
   numOfRepeatAnswers: number;
   onDeleteAnswer: () => void;
@@ -48,6 +50,7 @@ function RepeatField(props: RepeatFieldProps) {
     answer,
     numOfRepeatAnswers,
     parentIsReadOnly,
+    showMinimalView,
     onDeleteAnswer,
     onQrItemChange
   } = props;
@@ -62,16 +65,19 @@ function RepeatField(props: RepeatFieldProps) {
           qrItem={qrItem}
           isRepeated={qItem.repeats ?? false}
           isTabled={false}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       </Box>
-      <DeleteItemButton
-        answer={answer}
-        numOfRepeatAnswers={numOfRepeatAnswers}
-        readOnly={readOnly}
-        onDeleteAnswer={onDeleteAnswer}
-      />
+      {showMinimalView ? null : (
+        <DeleteItemButton
+          answer={answer}
+          numOfRepeatAnswers={numOfRepeatAnswers}
+          readOnly={readOnly}
+          onDeleteAnswer={onDeleteAnswer}
+        />
+      )}
     </RepeatItemContainerStack>
   );
 }

package/src/components/FormComponents/RepeatItem/RepeatItem.tsx

@@ -20,6 +20,7 @@ import type {
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler
 } from '../../../interfaces/renderProps.interface';
+import type { PropsWithShowMinimalViewAttribute } from '../../../interfaces/renderProps.interface';
 import type { QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
 import { nanoid } from 'nanoid';
 import useRenderingExtensions from '../../../hooks/useRenderingExtensions';
@@ -34,14 +35,15 @@ import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface RepeatItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function RepeatItem(props: RepeatItemProps) {
-  const { qItem, qrItem, parentIsReadOnly, onQrItemChange } = props;
+  const { qItem, qrItem, showMinimalView, parentIsReadOnly, onQrItemChange } = props;
 
   const readOnly = useReadOnly(qItem, parentIsReadOnly);
   const { displayInstructions } = useRenderingExtensions(qItem);
@@ -88,6 +90,33 @@ function RepeatItem(props: RepeatItemProps) {
     ]);
   }
 
+  if (showMinimalView) {
+    return (
+      <>
+        {repeatAnswers.map(({ nanoId, answer }, index) => {
+          const repeatAnswerQrItem = createEmptyQrItem(qItem);
+          if (answer) {
+            repeatAnswerQrItem.answer = [answer];
+          }
+
+          return (
+            <RepeatField
+              key={nanoId}
+              qItem={qItem}
+              qrItem={repeatAnswerQrItem}
+              answer={answer}
+              numOfRepeatAnswers={repeatAnswers.length}
+              parentIsReadOnly={parentIsReadOnly}
+              showMinimalView={showMinimalView}
+              onDeleteAnswer={() => handleDeleteItem(index)}
+              onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
+            />
+          );
+        })}
+      </>
+    );
+  }
+
   return (
     <FullWidthFormComponentBox data-test="q-item-repeat-box">
       <ItemFieldGrid qItem={qItem} displayInstructions={displayInstructions} readOnly={readOnly}>
@@ -106,6 +135,7 @@ function RepeatItem(props: RepeatItemProps) {
                   answer={answer}
                   numOfRepeatAnswers={repeatAnswers.length}
                   parentIsReadOnly={parentIsReadOnly}
+                  showMinimalView={showMinimalView}
                   onDeleteAnswer={() => handleDeleteItem(index)}
                   onQrItemChange={(newQrItem) => handleAnswerChange(newQrItem, index)}
                 />

package/src/components/FormComponents/RepeatItem/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 RepeatItem } from './RepeatItem';

package/src/components/FormComponents/SingleItem/SingleItem.tsx

@@ -22,7 +22,7 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import useQuestionnaireStore from '../../../stores/useQuestionnaireStore';
 import SingleItemSwitcher from './SingleItemSwitcher';
@@ -30,17 +30,17 @@ import useHidden from '../../../hooks/useHidden';
 import useReadOnly from '../../../hooks/useReadOnly';
 
 interface SingleItemProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItem(props: SingleItemProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   const updateEnableWhenItem = useQuestionnaireStore((state) => state.updateEnableWhenItem);
@@ -67,7 +67,7 @@ function SingleItem(props: SingleItemProps) {
       qrItem={qrItem}
       isRepeated={isRepeated}
       isTabled={isTabled}
-      textShown={textShown}
+      showMinimalView={showMinimalView}
       parentIsReadOnly={readOnly}
       onQrItemChange={handleQrItemChange}
     />

package/src/components/FormComponents/SingleItem/SingleItemSwitcher.tsx

@@ -25,31 +25,33 @@ import type {
   PropsWithIsTabledAttribute,
   PropsWithParentIsReadOnlyAttribute,
   PropsWithQrItemChangeHandler,
-  PropsWithTextShownAttribute
+  PropsWithShowMinimalViewAttribute
 } from '../../../interfaces/renderProps.interface';
 import StringItem from '../StringItem/StringItem';
 import BooleanItem from '../BooleanItem/BooleanItem';
 import TimeItem from '../TimeItem/TimeItem';
 import DateTimeItem from '../DateTimeItem/DateTimeItem';
-import DateItem from '../DateItem/DateItem';
 import TextItem from '../TextItem/TextItem';
 import DisplayItem from '../DisplayItem/DisplayItem';
-import IntegerItem from '../IntegerItem/IntegerItem';
 import DecimalItem from '../DecimalItem/DecimalItem';
 import UrlItem from '../UrlItem/UrlItem';
+import CustomDateItem from '../CustomDateItem/CustomDateItem';
+import { isSpecificItemControl } from '../../../utils';
+import SliderItem from '../SliderItem/SliderItem';
+import IntegerItem from '../IntegerItem/IntegerItem';
 
 interface SingleItemSwitcherProps
-  extends PropsWithQrItemChangeHandler<QuestionnaireResponseItem>,
+  extends PropsWithQrItemChangeHandler,
     PropsWithIsRepeatedAttribute,
     PropsWithIsTabledAttribute,
-    PropsWithTextShownAttribute,
+    PropsWithShowMinimalViewAttribute,
     PropsWithParentIsReadOnlyAttribute {
   qItem: QuestionnaireItem;
-  qrItem: QuestionnaireResponseItem;
+  qrItem: QuestionnaireResponseItem | null;
 }
 
 function SingleItemSwitcher(props: SingleItemSwitcherProps) {
-  const { qItem, qrItem, isRepeated, isTabled, textShown, parentIsReadOnly, onQrItemChange } =
+  const { qItem, qrItem, isRepeated, isTabled, showMinimalView, parentIsReadOnly, onQrItemChange } =
     props;
 
   switch (qItem.type) {
@@ -88,7 +90,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
       );
     case 'date':
       return (
-        <DateItem
+        <CustomDateItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -121,6 +123,19 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     case 'display':
       return <DisplayItem qItem={qItem} />;
     case 'integer':
+      if (isSpecificItemControl(qItem, 'slider')) {
+        return (
+          <SliderItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+
       return (
         <IntegerItem
           qItem={qItem}
@@ -149,7 +164,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -161,7 +176,7 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           qrItem={qrItem}
           isRepeated={isRepeated}
           isTabled={isTabled}
-          textShown={textShown}
+          showMinimalView={showMinimalView}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
@@ -180,7 +195,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     default:
       return (
         <Typography>
-          Item type not supported yet. Only R4 datatypes are supported at the moment.
+          Item type not supported yet, or something has went wrong. If your questionnnaire is not a
+          FHIR R4 resource, there might be issues rendering it.
         </Typography>
       );
   }

package/src/components/FormComponents/SliderItem/Slider.styles.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 { alpha, styled } from '@mui/material/styles';
+import { Box } from '@mui/material';
+
+export const SliderDisplayBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'hasLabels'
+})<{ hasLabels: boolean }>(({ theme, hasLabels }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 auto',
+  marginBottom: hasLabels ? -20 : 0,
+  padding: theme.spacing(0.5),
+  borderRadius: Number(theme.shape.borderRadius) * 0.5,
+  border: `1px solid ${alpha(theme.palette.text.disabled, 0.5)}`,
+  minWidth: 28,
+  height: 18
+}));

package/src/components/FormComponents/SliderItem/SliderDisplayValue.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+import { SliderDisplayBox } from './Slider.styles';
+import Typography from '@mui/material/Typography';
+import { pxToRem } from '../../../theme/typography';
+
+interface SliderDisplayValueProps {
+  value: number;
+  hasLabels: boolean;
+  isInteracted: boolean;
+}
+
+function SliderDisplayValue(props: SliderDisplayValueProps) {
+  const { value, hasLabels, isInteracted } = props;
+
+  const valueToDisplay = isInteracted ? value : '-';
+
+  return (
+    <SliderDisplayBox hasLabels={hasLabels}>
+      <Typography textAlign="center" color="text.disabled" fontSize={pxToRem(9.5)}>
+        {valueToDisplay}
+      </Typography>
+    </SliderDisplayBox>
+  );
+}
+
+export default SliderDisplayValue;

package/src/components/FormComponents/SliderItem/SliderField.tsx

@@ -0,0 +1,88 @@
+/*
+ * 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 React from 'react';
+import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps.interface';
+import Slider from '@mui/material/Slider';
+import { getSliderMarks } from '../../../utils/slider';
+import Stack from '@mui/material/Stack';
+import SliderLabels from './SliderLabels';
+import SliderDisplayValue from './SliderDisplayValue';
+
+interface SliderFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  value: number;
+  minValue: number;
+  minLabel: string;
+  maxValue: number;
+  maxLabel: string;
+  stepValue: number;
+  isInteracted: boolean;
+  readOnly: boolean;
+  onValueChange: (newValue: number) => void;
+}
+
+function SliderField(props: SliderFieldProps) {
+  const {
+    linkId,
+    value,
+    minValue,
+    maxValue,
+    stepValue,
+    minLabel,
+    maxLabel,
+    isInteracted,
+    readOnly,
+    isTabled,
+    onValueChange
+  } = props;
+
+  const sliderMarks = getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue);
+
+  const sliderSx = {
+    maxWidth: !isTabled ? 280 : 3000,
+    minWidth: 160
+  };
+
+  const hasLabels = !!(minLabel || maxLabel);
+
+  return (
+    <Stack sx={{ ...sliderSx }}>
+      <SliderDisplayValue value={value} hasLabels={hasLabels} isInteracted={isInteracted} />
+      {hasLabels ? <SliderLabels minLabel={minLabel} maxLabel={maxLabel} /> : null}
+      <Slider
+        id={linkId}
+        value={value}
+        min={minValue}
+        max={maxValue}
+        step={stepValue}
+        marks={sliderMarks}
+        sx={{ ...sliderSx }}
+        onChange={(_, newValue) => {
+          if (typeof newValue === 'number') {
+            onValueChange(newValue);
+          }
+        }}
+        disabled={readOnly}
+        valueLabelDisplay="auto"
+        data-test="q-item-slider-field"
+      />
+    </Stack>
+  );
+}
+
+export default SliderField;