@aehrc/smart-forms-renderer 0.13.2 → 0.14.0

package/src/components/FormComponents/OpenChoiceItems/OpenChoiceSelectAnswerValueSetItem.tsx

@@ -52,7 +52,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
   }
 
   // Get codings/options from valueSet
-  const { codings, serverError } = useValueSetCodings(qItem);
+  const { codings, terminologyError } = useValueSetCodings(qItem);
 
   // Event handlers
   function handleValueChange(newValue: Coding | string | null) {
@@ -79,7 +79,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
         qItem={qItem}
         options={codings}
         valueSelect={valueSelect}
-        serverError={serverError}
+        terminologyError={terminologyError}
         isTabled={isTabled}
         readOnly={readOnly}
         onValueChange={handleValueChange}
@@ -94,7 +94,7 @@ function OpenChoiceSelectAnswerValueSetItem(props: OpenChoiceSelectAnswerValueSe
           qItem={qItem}
           options={codings}
           valueSelect={valueSelect}
-          serverError={serverError}
+          terminologyError={terminologyError}
           isTabled={isTabled}
           readOnly={readOnly}
           onValueChange={handleValueChange}

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

@@ -39,6 +39,7 @@ import CustomDateItem from '../CustomDateItem/CustomDateItem';
 import { isSpecificItemControl } from '../../../utils';
 import SliderItem from '../SliderItem/SliderItem';
 import IntegerItem from '../IntegerItem/IntegerItem';
+import AttachmentItem from '../AttachmentItem/AttachmentItem';
 
 interface SingleItemSwitcherProps
   extends PropsWithQrItemChangeHandler,
@@ -55,9 +56,11 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     props;
 
   switch (qItem.type) {
-    case 'string':
+    case 'display':
+      return <DisplayItem qItem={qItem} />;
+    case 'boolean':
       return (
-        <StringItem
+        <BooleanItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -66,9 +69,9 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'boolean':
+    case 'decimal':
       return (
-        <BooleanItem
+        <DecimalItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -77,9 +80,22 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'time':
+    case 'integer':
+      if (isSpecificItemControl(qItem, 'slider')) {
+        return (
+          <SliderItem
+            qItem={qItem}
+            qrItem={qrItem}
+            isRepeated={isRepeated}
+            isTabled={isTabled}
+            parentIsReadOnly={parentIsReadOnly}
+            onQrItemChange={onQrItemChange}
+          />
+        );
+      }
+
       return (
-        <TimeItem
+        <IntegerItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -110,34 +126,20 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'text':
+    case 'time':
       return (
-        <TextItem
+        <TimeItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
+          isTabled={isTabled}
           parentIsReadOnly={parentIsReadOnly}
           onQrItemChange={onQrItemChange}
         />
       );
-    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}
-          />
-        );
-      }
-
+    case 'string':
       return (
-        <IntegerItem
+        <StringItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -146,9 +148,19 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'decimal':
+    case 'text':
       return (
-        <DecimalItem
+        <TextItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'url':
+      return (
+        <UrlItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -181,9 +193,33 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
           onQrItemChange={onQrItemChange}
         />
       );
-    case 'url':
+    case 'attachment':
       return (
-        <UrlItem
+        <AttachmentItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'reference':
+      // FIXME reference item uses the same component as string item currently
+      return (
+        <StringItem
+          qItem={qItem}
+          qrItem={qrItem}
+          isRepeated={isRepeated}
+          isTabled={isTabled}
+          parentIsReadOnly={parentIsReadOnly}
+          onQrItemChange={onQrItemChange}
+        />
+      );
+    case 'quantity':
+      // FIXME quantity item uses the same component as decimal item currently
+      return (
+        <DecimalItem
           qItem={qItem}
           qrItem={qrItem}
           isRepeated={isRepeated}
@@ -195,8 +231,8 @@ function SingleItemSwitcher(props: SingleItemSwitcherProps) {
     default:
       return (
         <Typography>
-          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.
+          Item type <b>{qItem.type}</b> 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/SliderField.tsx

@@ -22,6 +22,7 @@ import { getSliderMarks } from '../../../utils/slider';
 import Stack from '@mui/material/Stack';
 import SliderLabels from './SliderLabels';
 import SliderDisplayValue from './SliderDisplayValue';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface SliderFieldProps extends PropsWithIsTabledAttribute {
   linkId: string;
@@ -54,7 +55,7 @@ function SliderField(props: SliderFieldProps) {
   const sliderMarks = getSliderMarks(minValue, maxValue, minLabel, maxLabel, stepValue);
 
   const sliderSx = {
-    maxWidth: !isTabled ? 280 : 3000,
+    maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000,
     minWidth: 160
   };
 

package/src/components/FormComponents/Textfield.styles.ts

@@ -18,12 +18,14 @@
 import { styled } from '@mui/material/styles';
 import TextField from '@mui/material/TextField';
 
+export const TEXT_FIELD_WIDTH = 320;
+
 // Always use this accompanied by the TextField prop fullWidth
 export const StandardTextField = styled(TextField, {
   shouldForwardProp: (prop) => prop !== 'isTabled'
 })<{ isTabled: boolean }>(({ isTabled }) => ({
   // Set 280 as the standard width for a field
   // Set a theoretical infinite maxWidth if field is within a table to fill the table row
-  maxWidth: !isTabled ? 280 : 3000,
+  maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000,
   minWidth: 160
 }));

package/src/components/FormComponents/TimeItem/TimeField.tsx

@@ -20,6 +20,7 @@ import type { PropsWithIsTabledAttribute } from '../../../interfaces/renderProps
 import type { Dayjs } from 'dayjs';
 import { LocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { TEXT_FIELD_WIDTH } from '../Textfield.styles';
 
 interface TimeFieldProps extends PropsWithIsTabledAttribute {
   value: Dayjs | null;
@@ -39,7 +40,7 @@ function TimeField(props: TimeFieldProps) {
         value={value}
         disabled={readOnly}
         label={displayPrompt}
-        sx={{ maxWidth: !isTabled ? 280 : 3000, minWidth: 160 }}
+        sx={{ maxWidth: !isTabled ? TEXT_FIELD_WIDTH : 3000, minWidth: 160 }}
         slotProps={{
           textField: {
             fullWidth: true

package/src/hooks/UseFileDrop.ts

@@ -0,0 +1,53 @@
+/*
+ * Copyright 2024 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 type { ConnectDropTarget, DropTargetMonitor } from 'react-dnd';
+import { useDrop } from 'react-dnd';
+import { NativeTypes } from 'react-dnd-html5-backend';
+
+interface UseFileDrop {
+  canDrop: boolean;
+  isOver: boolean;
+  dropTarget: ConnectDropTarget;
+}
+
+function UseFileDrop(onDrop: (item: { files: any[] }) => void): UseFileDrop {
+  const [{ canDrop, isOver }, drop] = useDrop(
+    () => ({
+      accept: [NativeTypes.FILE],
+      drop(item: { files: any[] }) {
+        if (onDrop) {
+          onDrop(item);
+        }
+      },
+      canDrop() {
+        return true;
+      },
+      collect: (monitor: DropTargetMonitor) => {
+        return {
+          isOver: monitor.isOver(),
+          canDrop: monitor.canDrop()
+        };
+      }
+    }),
+    [onDrop]
+  );
+
+  return { canDrop, isOver, dropTarget: drop };
+}
+
+export default UseFileDrop;

package/src/hooks/useAttachmentUrlValidation.ts

@@ -0,0 +1,27 @@
+/*
+ * 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.
+ */
+
+function useAttachmentUrlValidation(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch (error) {
+    return false;
+  }
+}
+
+export default useAttachmentUrlValidation;

package/src/hooks/useValueSetCodings.ts

@@ -28,7 +28,15 @@ import fhirpath from 'fhirpath';
 import fhirpath_r4_model from 'fhirpath/fhir-context/r4';
 import { useQuestionnaireStore, useSmartConfigStore, useTerminologyServerStore } from '../stores';
 
-function useValueSetCodings(qItem: QuestionnaireItem) {
+export interface TerminologyError {
+  error: Error | null;
+  answerValueSet: string;
+}
+
+function useValueSetCodings(qItem: QuestionnaireItem): {
+  codings: Coding[];
+  terminologyError: TerminologyError;
+} {
   const patient = useSmartConfigStore.use.patient();
   const user = useSmartConfigStore.use.user();
   const encounter = useSmartConfigStore.use.encounter();
@@ -145,7 +153,7 @@ function useValueSetCodings(qItem: QuestionnaireItem) {
     }
   }, [qItem]);
 
-  return { codings, serverError };
+  return { codings, terminologyError: { error: serverError, answerValueSet: valueSetUrl ?? '' } };
 }
 
 export default useValueSetCodings;

package/src/utils/fileUtils.ts

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2024 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 type { Attachment } from 'fhir/r4';
+
+export function getFileSize(fileSizeString: string) {
+  if (fileSizeString.length < 7) {
+    return `${Math.round(+fileSizeString / 1024)}kb`;
+  }
+
+  return `${Math.round(+fileSizeString / 1024) / 1000}MB`;
+}
+
+const fileToBase64 = (file: File) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result);
+    reader.onerror = reject;
+  });
+
+export async function createAttachmentAnswer(
+  file: File | null,
+  url: string,
+  fileName: string
+): Promise<Attachment | null> {
+  if (!file || url === '') {
+    return null;
+  }
+
+  try {
+    const base64Data = (await fileToBase64(file)) as string;
+    const attachment: Attachment = {
+      contentType: file.type,
+      data: base64Data,
+      size: file.size
+    };
+
+    if (url) {
+      attachment.url = url;
+    }
+
+    if (fileName) {
+      attachment.title = fileName;
+    }
+
+    return attachment;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+}

package/src/utils/validateQuestionnaire.ts

@@ -15,14 +15,19 @@
  * limitations under the License.
  */
 
-import type { QuestionnaireResponse, QuestionnaireResponseItemAnswer } from 'fhir/r4';
-import { Questionnaire, QuestionnaireItem, QuestionnaireResponseItem } from 'fhir/r4';
+import type {
+  Questionnaire,
+  QuestionnaireItem,
+  QuestionnaireResponse,
+  QuestionnaireResponseItem,
+  QuestionnaireResponseItemAnswer
+} from 'fhir/r4';
 import { getQrItemsIndex, mapQItemsIndex } from './mapItem';
-import { EnableWhenExpression, EnableWhenItems } from '../interfaces/enableWhen.interface';
+import type { EnableWhenExpression, EnableWhenItems } from '../interfaces/enableWhen.interface';
 import { isHidden } from './qItem';
 import { getRegexValidation } from './itemControl';
 import { structuredDataCapture } from 'fhir-sdc-helpers';
-import { RegexValidation } from '../interfaces/regex.interface';
+import type { RegexValidation } from '../interfaces/regex.interface';
 
 export type InvalidType = 'regex' | 'minLength' | 'maxLength' | 'required';
 
@@ -38,7 +43,6 @@ interface ValidateQuestionnaireParams {
 /**
  * Recursively go through the questionnaireResponse and check for un-filled required qItems
  * At the moment item.required for group items are not checked
- * FIXME will eventually be renamed to validate questionnaire
  *
  * @author Sean Fong
  */
@@ -129,7 +133,7 @@ function validateItemRecursive(params: ValidateItemRecursiveParams) {
 
   // FIXME repeat groups not working
   if (qItem.type === 'group' && qItem.repeats) {
-    return validateRepeatGroup(qItem, qrItem, invalidItems);
+    return;
   }
 
   const childQItems = qItem.item;
@@ -227,13 +231,13 @@ function validateSingleItem(
   return invalidItems;
 }
 
-function validateRepeatGroup(
-  qItem: QuestionnaireItem,
-  qrItems: QuestionnaireResponseItem,
-  invalidLinkIds: Record<string, InvalidType>
-) {
-  return;
-}
+// function validateRepeatGroup(
+//   qItem: QuestionnaireItem,
+//   qrItems: QuestionnaireResponseItem,
+//   invalidLinkIds: Record<string, InvalidType>
+// ) {
+//   return;
+// }
 
 function getInputInString(answer: QuestionnaireResponseItemAnswer) {
   if (answer.valueString) {