Merge pull request #649 from aehrc/issue/647

Add attachment, reference and quantity component. For issue #639 and #640

apps/smart-forms-app/src/features/playground/components/Playground.tsx

@@ -107,7 +107,7 @@ function Playground() {
   }
 
   return (
-    <DndProvider backend={HTML5Backend}>
+    <DndProvider backend={HTML5Backend} context={window}>
       <Allotment defaultSizes={[40, 60]}>
         <Box sx={{ height: '100%', overflow: 'auto' }}>
           {buildingState === 'built' ? (

apps/smart-forms-app/src/features/renderer/components/FormPage/FormRenderer/FormWrapper.tsx

@@ -38,7 +38,7 @@ function FormWrapper() {
     return <FormInvalid questionnaire={sourceQuestionnaire} />;
   }
 
-  if (topLevelQItems.length === 0 || topLevelQRItems.length === 0) {
+  if (topLevelQItems.length === 0) {
     return <FormInvalid questionnaire={sourceQuestionnaire} />;
   }
 

packages/smart-forms-renderer/package.json

@@ -35,6 +35,8 @@
     "lodash.debounce": "^4.0.8",
     "nanoid": "^5.0.1",
     "react-beautiful-dnd": "^13.1.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-markdown": "^8.0.7",
     "zustand": "^4.4.6"
   },

packages/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentField.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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 { StandardTextField } from '../Textfield.styles';
+import AttachmentFileCollector from './AttachmentFileCollector';
+import Typography from '@mui/material/Typography';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import type { AttachmentValues } from './AttachmentItem';
+import AttachmentUrlField from './AttachmentUrlField';
+
+interface AttachmentFieldProps extends PropsWithIsTabledAttribute {
+  linkId: string;
+  attachmentValues: AttachmentValues;
+  readOnly: boolean;
+  onUploadFile: (file: File | null) => void;
+  onUrlChange: (url: string) => void;
+  onFileNameChange: (fileName: string) => void;
+}
+
+function AttachmentField(props: AttachmentFieldProps) {
+  const {
+    linkId,
+    attachmentValues,
+    readOnly,
+    isTabled,
+    onUploadFile,
+    onUrlChange,
+    onFileNameChange
+  } = props;
+
+  const { uploadedFile, url, fileName } = attachmentValues;
+
+  return (
+    <>
+      <Stack rowGap={1}>
+        <Typography variant="subtitle2">
+          An attachment must either have a file or a URL, or both.
+        </Typography>
+        <Box>
+          <AttachmentFileCollector
+            uploadedFile={uploadedFile}
+            isTabled={isTabled}
+            onUploadFile={onUploadFile}
+          />
+        </Box>
+
+        <AttachmentUrlField
+          linkId={linkId}
+          url={url}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onUrlChange={onUrlChange}
+        />
+
+        <Box>
+          <Typography variant="body2">File name (optional)</Typography>
+          <StandardTextField
+            fullWidth
+            isTabled={isTabled}
+            id={linkId}
+            value={fileName}
+            onChange={(event) => onFileNameChange(event.target.value)}
+            disabled={readOnly}
+            size="small"
+            data-test="q-item-attachment-field"
+          />
+        </Box>
+
+        {uploadedFile && url ? (
+          <Typography variant="subtitle2">
+            Ensure that the attached file and URL has the same content.
+          </Typography>
+        ) : null}
+      </Stack>
+    </>
+  );
+}
+
+export default AttachmentField;

packages/smart-forms-renderer/src/components/FormComponents/AttachmentItem/AttachmentFieldWrapper.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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 { HTML5Backend } from 'react-dnd-html5-backend';
+//
+// <DndProvider backend={HTML5Backend}>
+
+import React from 'react';
+import AttachmentField from './AttachmentField';
+import { FullWidthFormComponentBox } from '../../Box.styles';
+import ItemFieldGrid from '../ItemParts/ItemFieldGrid';
+import type {
+  PropsWithIsRepeatedAttribute,
+  PropsWithIsTabledAttribute
+} from '../../../interfaces/renderProps.interface';
+import type { QuestionnaireItem } from 'fhir/r4';
+import type { AttachmentValues } from './AttachmentItem';
+
+interface AttachmentFieldWrapperProps
+  extends PropsWithIsRepeatedAttribute,
+    PropsWithIsTabledAttribute {
+  qItem: QuestionnaireItem;
+  attachmentValues: AttachmentValues;
+  readOnly: boolean;
+  onUploadFile: (file: File | null) => void;
+  onUrlChange: (url: string) => void;
+  onFileNameChange: (fileName: string) => void;
+}
+
+function AttachmentFieldWrapper(props: AttachmentFieldWrapperProps) {
+  const {
+    qItem,
+    attachmentValues,
+    readOnly,
+    isRepeated,
+    isTabled,
+    onUploadFile,
+    onUrlChange,
+    onFileNameChange
+  } = props;
+
+  if (isRepeated) {
+    return (
+      <AttachmentField
+        linkId={qItem.linkId}
+        attachmentValues={attachmentValues}
+        readOnly={readOnly}
+        isTabled={isTabled}
+        onUploadFile={onUploadFile}
+        onUrlChange={onUrlChange}
+        onFileNameChange={onFileNameChange}
+      />
+    );
+  }
+
+  return (
+    <FullWidthFormComponentBox data-test="q-item-attachment-box">
+      <ItemFieldGrid qItem={qItem} readOnly={readOnly}>
+        <AttachmentField
+          linkId={qItem.linkId}
+          attachmentValues={attachmentValues}
+          readOnly={readOnly}
+          isTabled={isTabled}
+          onUploadFile={onUploadFile}
+          onUrlChange={onUrlChange}
+          onFileNameChange={onFileNameChange}
+        />
+      </ItemFieldGrid>
+    </FullWidthFormComponentBox>
+  );
+}
+
+export default AttachmentFieldWrapper;