fhir-react 0.3.5 → 0.3.8

package/src/components/resources/QuestionnaireResponse/Group.js

@@ -0,0 +1,70 @@
+import _get from 'lodash/get';
+import { MissingValue } from '../../ui';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Answers from './Answers';
+import Questions from './Questions';
+
+const Group = ({ data, prepareItems, isChild = false }) => {
+  if (!Array.isArray(data) || data.length === 0) {
+    return null;
+  }
+
+  return data.map(prepareItems).map((item, i) => {
+    const title =
+      _get(item, 'title') ||
+      _get(item, 'text') ||
+      _get(item, '_linkId.fhir_comments.0');
+
+    return (
+      <ul
+        key={`questionnaire-response-item-${i}`}
+        className="fhir-resource__QuestionnaireResponse-list"
+      >
+        <li
+          className={
+            isChild
+              ? 'fhir-resource__QuestionnaireResponse-list-title-question'
+              : 'fhir-resource__QuestionnaireResponse-list-title'
+          }
+          data-testid={`linkId-${item.linkId}`}
+        >
+          {title || <MissingValue />}
+        </li>
+        {item.isGroup && (
+          <li>
+            <Group data={item.group} prepareItems={prepareItems} isChild />
+          </li>
+        )}
+        {!item.isGroup && (
+          <>
+            {item.question && (
+              <li>
+                <Questions
+                  questions={item.question}
+                  prepareItems={prepareItems}
+                />
+              </li>
+            )}
+            {item.answer && (
+              <li>
+                <Answers
+                  data={item.answer}
+                  prepareItems={prepareItems}
+                  data-testid={`answer-${item.linkId}`}
+                />
+              </li>
+            )}
+          </>
+        )}
+      </ul>
+    );
+  });
+};
+
+Group.propTypes = {
+  data: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Group;

package/src/components/resources/QuestionnaireResponse/Items.js

@@ -0,0 +1,45 @@
+import fhirVersions from '../fhirResourceVersions';
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+
+const Items = ({ fhirVersion, data }) => {
+  if (fhirVersion === fhirVersions.DSTU2) {
+    const prepareItems = item => {
+      return {
+        ...item,
+        isGroup: !!_get(item, 'group'),
+      };
+    };
+
+    if (data.isGroup) {
+      return <Group data={data.data} prepareItems={prepareItems} />;
+    }
+    return (
+      <Group data={[{ question: data.data }]} prepareItems={prepareItems} />
+    );
+  }
+
+  if (fhirVersion === fhirVersions.STU3 || fhirVersion === fhirVersions.R4) {
+    const prepareItems = item => ({
+      ...item,
+      group: !!_get(item, 'item') ? _get(item, 'item') : null,
+      isGroup: !!_get(item, 'item'),
+    });
+    return <Group data={[{ question: data }]} prepareItems={prepareItems} />;
+  }
+
+  return null;
+};
+
+Items.propTypes = {
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+  fhirVersion: PropTypes.oneOf([
+    fhirVersions.DSTU2,
+    fhirVersions.STU3,
+    fhirVersions.R4,
+  ]).isRequired,
+};
+
+export default Items;

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.css

@@ -1,21 +1,45 @@
 .fhir-resource__QuestionnaireResponse-list {
   list-style: none;
-  border: 1px solid #f0f0f0;
-  padding: 2px;
-  margin: 2px 2px 2px 20px;
+  padding: 0;
+  margin: 0;
+}
+
+.fhir-resource__QuestionnaireResponse-list:first-of-type {
+  padding-top: 20px;
 }
 
 .fhir-resource__QuestionnaireResponse-list-title {
-  background-color: #f6f6f6;
-  padding: 2px 2px 4px 2px;
+  padding: 2px 2px 8px 2px;
+  font-weight: bold;
+}
+
+.fhir-resource__QuestionnaireResponse-list-title-question {
+  background: #f8f9fa;
+  align-items: center;
+  margin-bottom: 56px;
+  padding-left: 16px;
+  border-radius: 4px;
+  color: #adb5bd;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list {
   list-style: none;
+  padding-left: 0;
+  display: block;
+  color: #adb5bd;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list li {
-  border-bottom: 1px solid #f5f5f5;
+  display: block;
+  margin-bottom: 56px;
+}
+
+.fhir-resource__QuestionnaireResponse-questions-list-element {
+  background: #f8f9fa;
+  border-radius: 4px;
+  width: 100%;
+  padding-left: 16px;
+  margin-bottom: 56px;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list li:last-child {
@@ -23,11 +47,12 @@
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list-item-details {
-  margin-left: 20px;
+  margin: -30px 0;
 }
 
 .fhir-resource__QuestionnaireResponse-questions-list-item-details-el {
   display: inline-block;
+  color: black;
   margin-right: 15px;
-  color: blue;
+  margin-left: 20px;
 }

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.js

@@ -2,221 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-  MissingValue,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 import Date from '../../datatypes/Date';
 import fhirVersions from '../fhirResourceVersions';
 import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference/Reference';
-import Attachment from '../../datatypes/Attachment';
-import Quantity from '../../datatypes/Quantity';
 import './QuestionnaireResponse.css';
+import Accordion from '../../containers/Accordion';
+import Items from './Items';
 
 const DEFAULT_TITLE = 'Questionnaire Response';
 
-const getQuestionText = item => {
-  let text = _get(item, 'text');
-  if (!text) {
-    // DSTU2
-    const groupConcept = _get(item, 'concept.0');
-    if (groupConcept) {
-      text = <Coding fhirData={groupConcept} />;
-    }
-    text = text ? text : <MissingValue />;
-    // STU3
-    const groupCode = _get(item, 'code.0');
-    if (!text && groupCode) {
-      text = <Coding fhirData={groupCode} />;
-    }
-  }
-  return text;
-};
-
-const answerTypes = {
-  valueString: value => value,
-  valueDecimal: value => value,
-  valueInteger: value => value,
-  valueDate: value => <Date fhirData={value} />,
-  valueDateTime: value => <Date fhirData={value} />,
-  valueCoding: value => <Coding fhirData={value} />,
-  valueAttachment: value => <Attachment fhirData={value} />,
-  valueQuantity: value => <Quantity fhirData={value} />,
-  valueBoolean: value => (value ? 'Yes' : 'No'),
-};
-
-const Answers = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data)) {
-    return null;
-  }
-  return (
-    <div className="fhir-resource__QuestionnaireResponse-questions-list-item-details">
-      {data.map(answer => {
-        return Object.keys(answer).map((answerKey, i) => {
-          const toRender = [];
-          if (typeof answerTypes[answerKey] === 'function') {
-            toRender.push(
-              <div
-                key={`item-${i}`}
-                className="fhir-resource__QuestionnaireResponse-questions-list-item-details-el"
-                data-testid={`${props['data-testid']}-${i}`}
-              >
-                {answerTypes[answerKey](answer[answerKey])}{' '}
-              </div>,
-            );
-          }
-          if (_get(answer, 'item')) {
-            toRender.push(
-              <Group
-                key={`item-answer-${i}`}
-                data={answer.item}
-                prepareItems={prepareItems}
-              />,
-            );
-          }
-          return toRender;
-        });
-      })}
-    </div>
-  );
-};
-
-const Group = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-
-  return data.map(prepareItems).map((item, i) => {
-    const title =
-      _get(item, 'title') ||
-      _get(item, 'text') ||
-      _get(item, '_linkId.fhir_comments.0');
-
-    return (
-      <ul
-        key={`item-${i}`}
-        className="fhir-resource__QuestionnaireResponse-list"
-      >
-        <li
-          className="fhir-resource__QuestionnaireResponse-list-title"
-          data-testid={`linkId-${item.linkId}`}
-        >
-          {title || <MissingValue />}
-        </li>
-        {item.isGroup && (
-          <li>
-            <Group data={item.group} prepareItems={prepareItems} />
-          </li>
-        )}
-        {!item.isGroup && (
-          <>
-            {item.question && (
-              <li>
-                <Questions
-                  questions={item.question}
-                  prepareItems={prepareItems}
-                />
-              </li>
-            )}
-            {item.answer && (
-              <li>
-                <Answers
-                  data={item.answer}
-                  prepareItems={prepareItems}
-                  data-testid={`answer-${item.linkId}`}
-                />
-              </li>
-            )}
-          </>
-        )}
-      </ul>
-    );
-  });
-};
-
-Group.propTypes = {
-  data: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Questions = props => {
-  const { questions, prepareItems } = props;
-  if (!Array.isArray(questions) || questions.length === 0) {
-    return null;
-  }
-  return (
-    <ul className="fhir-resource__QuestionnaireResponse-questions-list">
-      {questions.map(prepareItems).map((item, i) => {
-        const text = getQuestionText(item);
-        const hasGroup = item.isGroup;
-        const answers = _get(item, 'answer', []);
-        return (
-          <li key={`item-${i}`} data-testid={`linkId-${item.linkId}`}>
-            {text}
-            {answers && <Answers data={item.answer} />}
-            {hasGroup && (
-              <Group data={item.group} prepareItems={prepareItems} />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-Questions.propTypes = {
-  questions: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Items = props => {
-  const { fhirVersion, data } = props;
-  if (fhirVersion === fhirVersions.DSTU2) {
-    const prepareItems = item => {
-      return {
-        ...item,
-        isGroup: !!_get(item, 'group'),
-      };
-    };
-
-    if (data.isGroup) {
-      return <Group data={data.data} prepareItems={prepareItems} />;
-    }
-    return (
-      <Group data={[{ question: data.data }]} prepareItems={prepareItems} />
-    );
-  }
-
-  if (fhirVersion === fhirVersions.STU3 || fhirVersion === fhirVersions.R4) {
-    const prepareItems = item => ({
-      ...item,
-      group: !!_get(item, 'item') ? _get(item, 'item') : null,
-      isGroup: !!_get(item, 'item'),
-    });
-    return <Group data={[{ question: data }]} prepareItems={prepareItems} />;
-  }
-
-  return null;
-};
-
-Items.propTypes = {
-  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  fhirVersion: PropTypes.oneOf([
-    fhirVersions.DSTU2,
-    fhirVersions.STU3,
-    fhirVersions.R4,
-  ]).isRequired,
-};
-
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status');
   const dateTime = _get(fhirResource, 'authored');
@@ -275,8 +71,12 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const QuestionnaireResponse = props => {
-  const { fhirResource, fhirVersion } = props;
+const QuestionnaireResponse = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+}) => {
   let fhirResourceData = {};
 
   try {
@@ -296,34 +96,50 @@ const QuestionnaireResponse = props => {
     rootItems,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Author',
+      testId: 'author',
+      data: author && <Reference fhirData={author} />,
+      status: author,
+    },
+  ];
+
   return (
-    <Root name="Questionnaire">
-      <Header>
-        <Title>{title || DEFAULT_TITLE}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {dateTime && (
-          <BadgeSecondary data-testid="dateTime">
-            <Date fhirData={dateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {author && (
-          <Value label="Author" data-testid="author">
-            <Reference fhirData={author} />
-          </Value>
-        )}
-        {rootItems && (
-          <div className="overflow-auto">
-            <Items fhirVersion={fhirVersion} data={rootItems} />
-          </div>
-        )}
-      </Body>
+    <Root name="QuestionnaireResponse">
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="QuestionnaireResponse"
+            title={title || DEFAULT_TITLE}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              dateTime && (
+                <Value label="On" data-testid="dateTime">
+                  <Date fhirData={dateTime} isBlack />
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {rootItems && (
+              <div className="overflow-auto">
+                <Items fhirVersion={fhirVersion} data={rootItems} />
+              </div>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.stories.js

@@ -14,6 +14,9 @@ import stu3Example2 from '../../../fixtures/stu3/resources/questionnaireResponse
 import r4Example1 from '../../../fixtures/r4/resources/questionnaireResponse/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/questionnaireResponse/example2.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import QuestionnaireResponseIcon from '../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg';
+
 export default { title: 'QuestionnaireResponse' };
 
 export const DefaultVisualizationDSTU2 = () => {
@@ -22,6 +25,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <QuestionnaireResponse
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={require('../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg')}
     />
   );
 };
@@ -32,6 +36,7 @@ export const Example2OfDSTU2 = () => {
     <QuestionnaireResponse
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={QuestionnaireResponseIcon}
     />
   );
 };
@@ -42,6 +47,7 @@ export const Example3OfDSTU2 = () => {
     <QuestionnaireResponse
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -52,6 +58,7 @@ export const Example1OfSTU3 = () => {
     <QuestionnaireResponse
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={false}
     />
   );
 };
@@ -62,6 +69,7 @@ export const Example2OfSTU3 = () => {
     <QuestionnaireResponse
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons="random text"
     />
   );
 };

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import QuestionnaireResponse from './QuestionnaireResponse';
 import fhirVersions from '../fhirResourceVersions';
@@ -24,7 +24,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('completed');
     expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
-    expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
+    expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
     expect(getByTestId('linkId-1.1').textContent).toEqual(
@@ -91,7 +91,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('completed');
     expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
-    expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
+    expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
     expect(getByTestId('linkId-1.1').textContent).toEqual(
@@ -112,4 +112,39 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Do you drink alchohol?',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <QuestionnaireResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <QuestionnaireResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

package/src/components/resources/QuestionnaireResponse/Questions.js

@@ -0,0 +1,43 @@
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+import Answers from './Answers';
+import { getQuestionText } from './getQuestionText';
+
+const Questions = ({ questions, prepareItems }) => {
+  if (!Array.isArray(questions) || questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="fhir-resource__QuestionnaireResponse-questions-list">
+      {questions.map(prepareItems).map((item, i) => {
+        const text = getQuestionText(item);
+        const hasGroup = item.isGroup;
+        const answers = _get(item, 'answer', []);
+        return (
+          <li
+            key={`questionnaire-response-questions-item-${i}`}
+            data-testid={`linkId-${item.linkId}`}
+          >
+            <div className="fhir-resource__QuestionnaireResponse-questions-list-element">
+              {text}
+            </div>
+            {answers && <Answers data={item.answer} />}
+            {hasGroup && (
+              <Group data={item.group} prepareItems={prepareItems} isChild />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+Questions.propTypes = {
+  questions: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Questions;

package/src/components/resources/QuestionnaireResponse/getQuestionText.js

@@ -0,0 +1,22 @@
+import _get from 'lodash/get';
+import Coding from '../../datatypes/Coding';
+import { MissingValue } from '../../ui';
+import React from 'react';
+
+export const getQuestionText = item => {
+  let text = _get(item, 'text');
+  if (!text) {
+    // DSTU2
+    const groupConcept = _get(item, 'concept.0');
+    if (groupConcept) {
+      text = <Coding fhirData={groupConcept} />;
+    }
+    text = text ? text : <MissingValue />;
+    // STU3
+    const groupCode = _get(item, 'code.0');
+    if (!text && groupCode) {
+      text = <Coding fhirData={groupCode} />;
+    }
+  }
+  return text;
+};