feat: Add SurgicalBlockObsHandler with reusable dynamic URL token resolver

package.json

@@ -88,6 +88,7 @@
     "react-test-renderer": "^16.12.0",
     "react-textarea-autosize": "^4.0.5",
     "sinon-as-promised": "^4.0.3",
+    "moment": "^2.29.1",
     "whatwg-fetch": "^1.0.0"
   },
   "resolutions": {

src/components/SurgicalBlock.jsx

@@ -0,0 +1,116 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Util } from 'src/helpers/Util';
+import ComponentStore from 'src/helpers/componentStore';
+import { AutoComplete } from 'src/components/AutoComplete.jsx';
+import { httpInterceptor } from 'src/helpers/httpInterceptor';
+import Constants from 'src/constants';
+import find from 'lodash/find';
+
+export class SurgicalBlock extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { surgeryOptions: [] };
+    this.onValueChange = this.onValueChange.bind(this);
+  }
+
+  componentDidMount() {
+    const { properties } = this.props;
+    const defaultUrl = '/openmrs/ws/rest/v1/surgicalBlock' +
+      '?activeBlocks=true' +
+      '&startDatetime={NOW-30d}' +
+      '&endDatetime={NOW}' +
+      '&includeVoided=false' +
+      '&v=custom:(id,uuid,' +
+      'provider:(uuid,person:(uuid,display),attributes:(attributeType:(display),value,voided)),' +
+      'location:(uuid,name),startDatetime,endDatetime,' +
+      'surgicalAppointments:(id,uuid,patient:(uuid,display,' +
+      'person:(age,gender,birthdate)),' +
+      'actualStartDatetime,actualEndDatetime,status,notes,sortWeight,' +
+      'bedNumber,bedLocation,surgicalAppointmentAttributes,patientObservations))';
+
+    const url = Util.resolveUrlTokens(properties.URL || defaultUrl);
+
+    httpInterceptor
+      .get(url)
+      .then((data) => {
+        const { patientUuid } = this.props;
+        const surgeryOptions = [];
+        (data.results || []).forEach((block) => {
+          (block.surgicalAppointments || []).forEach((surgicalAppointment) => {
+            if (!patientUuid || (surgicalAppointment.patient &&
+                surgicalAppointment.patient.uuid === patientUuid)) {
+              surgeryOptions.push(this._formatSurgeryOption(block, surgicalAppointment));
+            }
+          });
+        });
+        this.setState({ surgeryOptions });
+      })
+      .catch(() => {
+        this.props.showNotification('Failed to fetch surgical blocks', Constants.messageType.error);
+      });
+  }
+
+  onValueChange(value, errors) {
+    const updatedValue = value ? value.id : undefined;
+    this.props.onChange({ value: updatedValue, errors });
+  }
+
+  _formatSurgeryOption(block, surgicalAppointment) {
+    const date = this._formatDate(block.startDatetime);
+    const surgeon = block.provider && block.provider.person
+      ? block.provider.person.display : '';
+    return { id: surgicalAppointment.uuid, name: `${date} - ${surgeon}` };
+  }
+
+  _formatDate(datetime) {
+    if (!datetime) return '';
+    return moment(datetime).format('DD/MM/YYYY');
+  }
+
+  _getValue(savedValue) {
+    return find(this.state.surgeryOptions, (option) => option.id === savedValue);
+  }
+
+  render() {
+    const value = this.props.value ? this._getValue(this.props.value) : undefined;
+    const { properties } = this.props;
+    const isSearchable = (properties.style === 'autocomplete');
+    const minimumInput = isSearchable ? 2 : 0;
+    return (
+      <AutoComplete {...this.props}
+        asynchronous={false}
+        minimumInput={minimumInput}
+        onValueChange={this.onValueChange}
+        options={this.state.surgeryOptions}
+        searchable={isSearchable}
+        value={value}
+      />
+    );
+  }
+}
+
+SurgicalBlock.propTypes = {
+  addMore: PropTypes.bool,
+  enabled: PropTypes.bool,
+  formFieldPath: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  patientUuid: PropTypes.string,
+  properties: PropTypes.object.isRequired,
+  showNotification: PropTypes.func.isRequired,
+  validate: PropTypes.bool.isRequired,
+  validations: PropTypes.array.isRequired,
+  value: PropTypes.string,
+};
+
+SurgicalBlock.defaultProps = {
+  autofocus: false,
+  enabled: true,
+  labelKey: 'name',
+  valueKey: 'id',
+  searchable: false,
+};
+
+ComponentStore.registerComponent('SurgicalBlockObsHandler', SurgicalBlock);

src/components/designer/SurgicalBlock.jsx

@@ -0,0 +1,118 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import moment from 'moment';
+import { Util } from 'src/helpers/Util';
+import ComponentStore from 'src/helpers/componentStore';
+import { AutoComplete } from 'src/components/AutoComplete.jsx';
+import { httpInterceptor } from 'src/helpers/httpInterceptor';
+
+export class SurgicalBlockDesigner extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { surgeryOptions: [] };
+  }
+
+  componentDidMount() {
+    const { metadata: { properties }, setError } = this.props;
+    const defaultUrl = '/openmrs/ws/rest/v1/surgicalBlock' +
+      '?activeBlocks=true' +
+      '&startDatetime={NOW-30d}' +
+      '&endDatetime={NOW}' +
+      '&includeVoided=false' +
+      '&v=custom:(id,uuid,' +
+      'provider:(uuid,person:(uuid,display),attributes:(attributeType:(display),value,voided)),' +
+      'location:(uuid,name),startDatetime,endDatetime,' +
+      'surgicalAppointments:(id,uuid,patient:(uuid,display,' +
+      'person:(age,gender,birthdate)),' +
+      'actualStartDatetime,actualEndDatetime,status,notes,sortWeight,' +
+      'bedNumber,bedLocation,surgicalAppointmentAttributes,patientObservations))';
+
+    const url = Util.resolveUrlTokens(properties.URL || defaultUrl);
+
+    httpInterceptor
+      .get(url)
+      .then((data) => {
+        const options = (data.results || []).map((block) => {
+          const date = moment(block.startDatetime).format('DD/MM/YYYY');
+          const surgeon = block.provider && block.provider.person
+            ? block.provider.person.display : '';
+          return { id: block.uuid, name: `${date} - ${surgeon}` };
+        });
+        this.setState({ surgeryOptions: options });
+      })
+      .catch(() => {
+        if (setError) {
+          setError({ message: 'Invalid Surgical Block URL' });
+        }
+      });
+  }
+
+  render() {
+    const { properties } = this.props.metadata;
+    const isSearchable = (properties.style === 'autocomplete');
+    const minimumInput = isSearchable ? 2 : 0;
+    return (
+      <AutoComplete
+        asynchronous={false}
+        enabled
+        labelKey="name"
+        minimumInput={minimumInput}
+        options={this.state.surgeryOptions}
+        searchable={isSearchable}
+        valueKey="id"
+      />
+    );
+  }
+}
+
+SurgicalBlockDesigner.propTypes = {
+  metadata: PropTypes.shape({
+    concept: PropTypes.object.isRequired,
+    displayType: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    properties: PropTypes.object.isRequired,
+    type: PropTypes.string,
+  }),
+  setError: PropTypes.func,
+};
+
+const descriptor = {
+  control: SurgicalBlockDesigner,
+  designProperties: {
+    isTopLevelComponent: false,
+  },
+  metadata: {
+    attributes: [
+      {
+        name: 'properties',
+        dataType: 'complex',
+        attributes: [
+          {
+            name: 'URL',
+            dataType: 'string',
+            defaultValue: '/openmrs/ws/rest/v1/surgicalBlock?activeBlocks=true' +
+              '&startDatetime={NOW-30d}&endDatetime={NOW}&includeVoided=false' +
+              '&v=custom:(id,uuid,provider:(uuid,person:(uuid,display),' +
+              'attributes:(attributeType:(display),value,voided)),location:(uuid,name),' +
+              'startDatetime,endDatetime,' +
+              'surgicalAppointments:(id,uuid,patient:(uuid,display,' +
+              'person:(age,gender,birthdate)),' +
+              'actualStartDatetime,actualEndDatetime,status,notes,sortWeight,' +
+              'bedNumber,bedLocation,surgicalAppointmentAttributes,patientObservations))',
+            elementType: 'text',
+          },
+          {
+            name: 'style',
+            dataType: 'string',
+            defaultValue: 'dropdown',
+            elementType: 'dropdown',
+            options: ['autocomplete', 'dropdown'],
+          },
+        ],
+      },
+    ],
+  },
+};
+
+ComponentStore.registerDesignerComponent('SurgicalBlockObsHandler', descriptor);

src/helpers/Util.js

@@ -1,4 +1,6 @@
 
+import moment from 'moment';
+
 export class Util {
   static toInt(obj) {
     return Number.parseInt(obj, 10);
@@ -92,6 +94,25 @@ export class Util {
     });
   }
 
+  static resolveUrlTokens(url) {
+    const DATE_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSZZ';
+    const UNITS = { d: 'days' };
+    return url.replace(/\{([^}]+)\}/g, (match, token) => {
+      if (token === 'NOW') {
+        return encodeURIComponent(moment().endOf('day').format(DATE_FORMAT));
+      }
+      const relativeMatch = token.match(/^NOW-(\d+)(d)$/);
+      if (relativeMatch) {
+        const amount = parseInt(relativeMatch[1], 10);
+        const unit = UNITS[relativeMatch[2]];
+        return encodeURIComponent(
+          moment().subtract(amount, unit).startOf('day').format(DATE_FORMAT)
+        );
+      }
+      return match;
+    });
+  }
+
   static debounce(func, delay) {
     let timeoutId;
     return (...args) => {

src/index.jsx

@@ -19,6 +19,7 @@ export { Image } from 'components/Image.jsx';
 export { Video } from 'components/Video.jsx';
 export { Location } from 'components/Location.jsx';
 export { Provider } from 'components/Provider.jsx';
+export { SurgicalBlock } from 'components/SurgicalBlock.jsx';
 export { FreeTextAutoComplete } from 'components/FreeTextAutoComplete.jsx';
 
 //  -----------designer components------------------
@@ -45,6 +46,7 @@ export { ImageDesigner } from 'components/designer/Image.jsx';
 export { VideoDesigner } from 'components/designer/Video.jsx';
 export { LocationDesigner } from 'components/designer/Location.jsx';
 export { ProviderDesigner } from 'components/designer/Provider.jsx';
+export { SurgicalBlockDesigner } from 'components/designer/SurgicalBlock.jsx';
 
 // -------------------------- helpers ---------------------