fhir-react 0.3.5 → 0.3.8

package/src/components/resources/Questionnaire/Questionnaire.js

@@ -2,164 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 
-import { Root, Header, Title, Badge, BadgeSecondary, Body } from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 import Date from '../../datatypes/Date';
 import Coding from '../../datatypes/Coding';
 
 import './Questionnaire.css';
-import Reference from '../../datatypes/Reference/Reference';
 import fhirVersions from '../fhirResourceVersions';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-
-const getQuestionText = item => {
-  let text = _get(item, 'text');
-  if (!text) {
-    // DSTU2
-    const groupConcept = _get(item, 'concept.0');
-    if (groupConcept) {
-      text = <Coding fhirData={groupConcept} />;
-    }
-    // STU3 & R4
-    const groupCode = _get(item, 'code.0');
-    if (!text && groupCode) {
-      text = <Coding fhirData={groupCode} />;
-    }
-  }
-  return text;
-};
-
-const Questions = props => {
-  const { questions, prepareItems } = props;
-  if (!Array.isArray(questions) || questions.length === 0) {
-    return null;
-  }
-
-  return (
-    <ul className="fhir-resource__Questionnaire-questions-list">
-      {questions.map((item, i) => {
-        const hasLinkId = item.linkId;
-        let type = _get(item, 'type');
-        if (type === 'group') {
-          type = '';
-        }
-        const options = _get(item, 'options');
-
-        const text = getQuestionText(item);
-        const hasDetails = type || options;
-        return (
-          <li key={`item-${i}`} data-testid={`linkId-${item.linkId}`}>
-            {hasLinkId && <Badge>{item.linkId}</Badge>}
-            {text}
-            {hasDetails && (
-              <div className="fhir-resource__Questionnaire-questions-list-item-details">
-                {type && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Type: {type}
-                  </div>
-                )}
-                {options && (
-                  <div className="fhir-resource__Questionnaire-questions-list-item-details-el">
-                    Options: <Reference fhirData={options} />
-                  </div>
-                )}
-              </div>
-            )}
-            {item.item && (
-              <Group data={item.item} prepareItems={prepareItems} />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-Questions.propTypes = {
-  questions: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Group = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-
-  return data.map(prepareItems).map((item, i) => {
-    const linkId = _get(item, 'linkId', '');
-
-    const text = getQuestionText(item);
-    let nestedItems = _get(item, 'item', []);
-    nestedItems = nestedItems.map(prepareItems);
-    const isGroup = _get(item, 'isGroup');
-    return (
-      <ul key={`item-${i}`} className="fhir-resource__Questionnaire-list">
-        <li
-          className="fhir-resource__Questionnaire-list-title"
-          data-testid={`linkId-${item.linkId}`}
-        >
-          <Badge>{linkId}</Badge>
-          <span>{text}</span>
-        </li>
-        {!isGroup && (
-          <li>
-            {<Questions questions={nestedItems} prepareItems={prepareItems} />}
-          </li>
-        )}
-        {isGroup && (
-          <li>
-            <Group data={nestedItems} prepareItems={prepareItems} />
-          </li>
-        )}
-      </ul>
-    );
-  });
-};
-
-Group.propTypes = {
-  data: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Items = props => {
-  const { fhirVersion, data } = props;
-
-  if (fhirVersion === fhirVersions.DSTU2) {
-    const prepareItems = item => ({
-      ...item,
-      item: _get(item, 'question') || _get(item, 'group') || [],
-      isGroup: !!_get(item, 'group'),
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  if (fhirVersion === fhirVersions.STU3) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  if (fhirVersion === fhirVersions.R4) {
-    const prepareItems = item => ({
-      ...item,
-      isGroup: _get(item, 'type') === 'group',
-    });
-    return <Group data={data} prepareItems={prepareItems} />;
-  }
-
-  return null;
-};
-
-Items.propTypes = {
-  data: PropTypes.array,
-  fhirVersion: PropTypes.oneOf([
-    fhirVersions.DSTU2,
-    fhirVersions.STU3,
-    fhirVersions.R4,
-  ]).isRequired,
-};
+import Items from './Items';
+import Accordion from '../../containers/Accordion';
 
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status');
@@ -224,8 +75,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const Questionnaire = props => {
-  const { fhirResource, fhirVersion } = props;
+const Questionnaire = ({ fhirResource, fhirVersion, fhirIcons, onClick }) => {
   let fhirResourceData = {};
 
   try {
@@ -238,22 +88,33 @@ const Questionnaire = props => {
 
   return (
     <Root name="Questionnaire">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {dateTime && (
-          <BadgeSecondary data-testid="dateTime">
-            <Date fhirData={dateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {rootItems && (
-          <div className="overflow-auto">
-            <Items fhirVersion={fhirVersion} data={rootItems} />
-          </div>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="Questionnaire"
+            title={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>
+            {rootItems && (
+              <div className="overflow-auto">
+                <Items fhirVersion={fhirVersion} data={rootItems} />
+              </div>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+      />
     </Root>
   );
 };

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

@@ -15,6 +15,9 @@ import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.js
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 import r4Example3 from '../../../fixtures/r4/resources/questionnaire/example3.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+import QuestionnaireIcon from '../../../assets/containers/Questionnaire/questionnaire.svg';
+
 export default { title: 'Questionnaire' };
 
 export const DefaultVisualizationDSTU2 = () => {
@@ -23,6 +26,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={require('../../../assets/containers/Questionnaire/questionnaire.svg')}
     />
   );
 };
@@ -33,6 +37,7 @@ export const Example2OfDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={QuestionnaireIcon}
     />
   );
 };
@@ -43,6 +48,7 @@ export const Example3OfDSTU2 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.DSTU2}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -53,6 +59,7 @@ export const Example1OfSTU3 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={false}
     />
   );
 };
@@ -63,6 +70,7 @@ export const Example2OfSTU3 = () => {
     <Questionnaire
       fhirResource={fhirResource}
       fhirVersion={fhirVersions.STU3}
+      fhirIcons={'random text'}
     />
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import Questionnaire from './Questionnaire';
 import fhirVersions from '../fhirResourceVersions';
@@ -13,7 +13,151 @@ import stu3Example2 from '../../../fixtures/stu3/resources/questionnaire/example
 import r4Example1 from '../../../fixtures/r4/resources/questionnaire/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/questionnaire/example2.json';
 
+import fhirIcons from '../../../fixtures/example-icons';
+
 describe('Questionnaire should render component correctly', () => {
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
+  it('component without a fhirIcons props should render a default icon', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('questionnaire');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with a false as a fhirIcons props should render a placeholder', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: false,
+    };
+
+    const { getByTestId } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByTestId('placeholder');
+
+    expect(headerIcon).toBeTruthy();
+  });
+
+  it('component with the img as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: (
+        <img
+          src={require('../assets/containers/Questionnaire/questionnaire.svg')}
+          alt="clipboard and pen"
+        />
+      ),
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the resources object as a fhirIcons props should render an img', () => {
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: fhirIcons,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('clipboard and pen');
+
+    expect(headerIcon.getAttribute('src')).toContain('IMAGE_MOCK');
+  });
+
+  it('component with the url as a fhirIcons props should render an img', () => {
+    const avatarSrc =
+      'https://www.gravatar.com/avatar/?s=50&r=any&default=identicon&forcedefault=1';
+    const defaultProps = {
+      fhirVersion: fhirVersions.DSTU2,
+      fhirResource: dstu2Example1,
+      fhirIcons: avatarSrc,
+    };
+
+    const { getByAltText } = render(<Questionnaire {...defaultProps} />);
+    const headerIcon = getByAltText('header icon');
+
+    expect(headerIcon.getAttribute('src')).toContain(avatarSrc);
+  });
+
   it('should render component correctly with DSTU2 source data', () => {
     const defaultProps = {
       fhirResource: dstu2Example1,
@@ -34,16 +178,16 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toEqual(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -90,21 +234,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -151,21 +295,21 @@ describe('Questionnaire should render component correctly', () => {
 
     // contain subgroup description
     expect(String(getByTestId('linkId-2').textContent).trim()).toContain(
-      '2General questions',
+      'General questions',
     );
 
     // contain id and test of questions of subgroup
     expect(String(getByTestId('linkId-2.1').textContent).trim()).toContain(
-      '2.1What is your gender?',
+      'What is your gender?',
     );
     expect(String(getByTestId('linkId-2.2').textContent).trim()).toEqual(
-      '2.2What is your date of birth?',
+      'What is your date of birth?',
     );
     expect(String(getByTestId('linkId-2.3').textContent).trim()).toEqual(
-      '2.3What is your country of birth?',
+      'What is your country of birth?',
     );
     expect(String(getByTestId('linkId-2.4').textContent).trim()).toEqual(
-      '2.4What is your marital status?',
+      'What is your marital status?',
     );
   });
 
@@ -196,4 +340,39 @@ describe('Questionnaire should render component correctly', () => {
       String(getByTestId('linkId-1.1.1.1.1').textContent).trim(),
     ).toContain('Angina Pectoris');
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <Questionnaire {...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(
+      <Questionnaire {...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/Questionnaire/Questions.js

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

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

@@ -0,0 +1,20 @@
+import _get from 'lodash/get';
+import Coding from '../../datatypes/Coding';
+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} />;
+    }
+    // STU3 & R4
+    const groupCode = _get(item, 'code.0');
+    if (!text && groupCode) {
+      text = <Coding fhirData={groupCode} />;
+    }
+  }
+  return text;
+};

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

@@ -0,0 +1,59 @@
+import Date from '../../datatypes/Date';
+import Coding from '../../datatypes/Coding';
+import Attachment from '../../datatypes/Attachment';
+import Quantity from '../../datatypes/Quantity';
+import _get from 'lodash/get';
+import React from 'react';
+import Group from './Group';
+
+const answerTypes = {
+  valueString: value => value,
+  valueDecimal: value => value,
+  valueInteger: value => value,
+  valueDate: value => <Date fhirData={value} isBlack />,
+  valueDateTime: value => <Date fhirData={value} isBlack />,
+  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={`questionnaire-response-answer-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={`questionnaire-response-answer-group-item-${i}`}
+                data={answer.item}
+                prepareItems={prepareItems}
+                isChild
+              />,
+            );
+          }
+          return toRender;
+        });
+      })}
+    </div>
+  );
+};
+
+export default Answers;