[Rahul] | BAH-4131 | Add. Concept UUID As Input Id Attribute

src/components/AutoComplete.jsx

@@ -183,7 +183,7 @@ export class AutoComplete extends Component {
 
   render() {
     const { autofocus, autoload, cache, enabled, filterOptions, labelKey, valueKey,
-      asynchronous, multiSelect, minimumInput, searchable } = this.props;
+      asynchronous, multiSelect, minimumInput, searchable, conceptUuid } = this.props;
     const props = {
       autofocus,
       backspaceRemoves: true,
@@ -204,6 +204,7 @@ export class AutoComplete extends Component {
       return (
         <div className={className}>
           <Select.Async
+            id={conceptUuid}
             {...props}
             autoload={autoload}
             cache={cache}
@@ -218,6 +219,7 @@ export class AutoComplete extends Component {
     return (
       <div className={className}>
         <Select
+          id={conceptUuid}
           {...props}
           filterOptions={null}
           noResultsText={this.state.noResultsText}
@@ -232,6 +234,7 @@ export class AutoComplete extends Component {
 }
 
 AutoComplete.propTypes = {
+  conceptUuid: PropTypes.string,
   asynchronous: PropTypes.bool,
   autofocus: PropTypes.bool,
   autoload: PropTypes.bool,

src/components/Button.jsx

@@ -111,6 +111,8 @@ export class Button extends Component {
         key={index}
         onClick={() => this.changeValue(option)}
         title={option[this.props.nameKey]}
+        id={option[this.props.nameKey]}
+        name={this.props.conceptUuid}
       >
         <i className="fa fa-ok"></i>{option[this.props.nameKey]}
       </button>
@@ -120,13 +122,14 @@ export class Button extends Component {
   render() {
     const className =
       classNames('form-control-buttons', { 'form-builder-error': this.state.hasErrors });
-    return <div className={className}>{this.displayButtons()}</div>;
+    return <div className={className} id={this.props.conceptUuid}>{this.displayButtons()}</div>;
   }
 
 
 }
 
 Button.propTypes = {
+  conceptUuid: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,
   multiSelect: PropTypes.bool,

src/components/CodedControl.jsx

@@ -134,6 +134,7 @@ export class CodedControl extends Component {
 
   _getChildProps(displayType) {
     const {
+      conceptUuid,
       enabled,
       formFieldPath,
       value,
@@ -143,6 +144,7 @@ export class CodedControl extends Component {
       properties: { multiSelect },
     } = this.props;
     const props = {
+      conceptUuid,
       enabled,
       formFieldPath,
       value: this._getValue(value, multiSelect),
@@ -192,6 +194,7 @@ export class CodedControl extends Component {
 }
 
 CodedControl.propTypes = {
+  conceptUuid: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,
   intl: IntlShape,

src/components/Comment.jsx

@@ -28,6 +28,7 @@ export class Comment extends Component {
         <div className="obs-comment-section-wrap">
           <div className="obs-control-field text-area-wrap">
           <Textarea
+            id={this.props.conceptUuid}
             className="obs-comment-section fl"
             defaultValue={this.props.comment}
             maxLength="255"
@@ -71,6 +72,7 @@ export class Comment extends Component {
 }
 
 Comment.propTypes = {
+  conceptUuid: PropTypes.string,
   comment: PropTypes.string,
   conceptHandler: PropTypes.string,
   datatype: PropTypes.string,

src/components/Date.jsx

@@ -74,6 +74,7 @@ export class Date extends Component {
     const defaultValue = this.props.value || '';
     return (
       <input
+        id={this.props.conceptUuid}
         className={classNames({ 'form-builder-error': this.state.hasErrors })}
         disabled={!this.props.enabled}
         onChange={(e) => this.handleChange(e)}
@@ -85,6 +86,7 @@ export class Date extends Component {
 }
 
 Date.propTypes = {
+  conceptUuid: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,
   onChange: PropTypes.func.isRequired,

src/components/DateTime.jsx

@@ -109,13 +109,15 @@ export class DateTime extends Component {
     return (
       <div>
         <input
+          id={this.props.conceptUuid}
           className={classNames({ 'form-builder-error': this.state.hasErrors })}
           disabled={!this.props.enabled}
           onChange={(e) => this.handleDateChange(e)}
           type="date"
           value={this.dateValue}
         />
         <input
+          id={this.props.conceptUuid}
           className={classNames({ 'form-builder-error': this.state.hasErrors })}
           disabled={!this.props.enabled}
           onChange={(e) => this.handleTimeChange(e)}
@@ -128,6 +130,7 @@ export class DateTime extends Component {
 }
 
 DateTime.propTypes = {
+  conceptUuid: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,
   onChange: PropTypes.func.isRequired,

src/components/DropDown.jsx

@@ -17,6 +17,7 @@ export class DropDown extends PureComponent {
 }
 
 DropDown.propTypes = {
+  conceptUuid: PropTypes.string,
   autofocus: PropTypes.bool,
   enabled: PropTypes.bool,
   labelKey: PropTypes.string,

src/components/FreeTextAutoComplete.jsx

@@ -28,6 +28,7 @@ export class FreeTextAutoComplete extends Component {
     const { multi, clearable, backspaceRemoves, deleteRemoves } = this.props;
     return (
       <Select.Creatable
+        id={this.props.conceptUuid}
         backspaceRemoves={backspaceRemoves}
         clearable={clearable}
         deleteRemoves={deleteRemoves}
@@ -41,6 +42,7 @@ export class FreeTextAutoComplete extends Component {
 }
 
 FreeTextAutoComplete.propTypes = {
+  conceptUuid: PropTypes.string,
   backspaceRemoves: PropTypes.bool.isRequired,
   clearable: PropTypes.bool.isRequired,
   deleteRemoves: PropTypes.bool.isRequired,

src/components/Label.jsx

@@ -15,7 +15,7 @@ export class Label extends Component {
     const { intl, enabled, metadata: { value, units } } = this.props;
     const disableClass = enabled ? '' : 'disabled-label';
     return (<label
-      className={`${disableClass}`}
+      className={`${disableClass}`} for={this.props.metadata.uuid}
     >
       {intl.formatMessage({
         defaultMessage: value,
@@ -32,6 +32,7 @@ Label.propTypes = {
   hidden: PropTypes.bool,
   intl: IntlShape,
   metadata: PropTypes.shape({
+    uuid: PropTypes.string.isRequired,
     type: PropTypes.string.isRequired,
     units: PropTypes.string,
     value: PropTypes.string.isRequired,

src/components/NumericBox.jsx

@@ -101,7 +101,7 @@ export class NumericBox extends Component {
   }
 
   render() {
-    const { lowNormal, hiNormal } = this.props;
+    const { lowNormal, hiNormal, conceptUuid } = this.props;
     if (NumericBoxDesigner.getRange(lowNormal, hiNormal) !== '') {
       return (
         <div className="fl">
@@ -113,7 +113,7 @@ export class NumericBox extends Component {
             ref={(elem) => {
               this.input = elem;
             }}
-            step="any" type="number"
+            step="any" type="number" name={conceptUuid} id={conceptUuid}
           />
           <span className="form-builder-valid-range">
             {NumericBoxDesigner.getRange(lowNormal, hiNormal)}
@@ -131,14 +131,15 @@ export class NumericBox extends Component {
           ref={(elem) => {
             this.input = elem;
           }}
-          step="any" type="number"
+          step="any" type="number" name={conceptUuid} id={conceptUuid}
         />
       </div>
     );
   }
 }
 
 NumericBox.propTypes = {
+  conceptUuid: PropTypes.string,
   conceptClass: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string.isRequired,

src/components/ObsControl.jsx

@@ -84,6 +84,7 @@ export class ObsControl extends addMoreDecorator(Component) {
       validateForm,
       formFieldPath,
       patientUuid: this.props.patientUuid,
+      conceptUuid: this.props.metadata.concept.uuid,
       addMore: isAddMoreEnabled,
       validations,
       value: this.props.value.value,
@@ -109,10 +110,10 @@ export class ObsControl extends addMoreDecorator(Component) {
   }
 
   displayLabel() {
-    const { enabled, intl, hidden, metadata: { properties, label, units } } = this.props;
+    const { enabled, intl, hidden, metadata: { properties, label, units, concept } } = this.props;
     const { concept: { description } } = this.props.metadata;
     const hideLabel = find(properties, (value, key) => (key === 'hideLabel' && value));
-    const labelMetadata = { ...label, units: this._getUnits(units) };
+    const labelMetadata = { ...label, ...concept, units: this._getUnits(units) };
     const showHintButton = this.state && this.state.showHintButton;
     const labelComponent = (<Label enabled={enabled} hidden={hidden}
       intl={intl} metadata={labelMetadata}

src/components/Provider.jsx

@@ -60,6 +60,7 @@ export class Provider extends Component {
 }
 
 Provider.propTypes = {
+  conceptUuid: PropTypes.string,
   addMore: PropTypes.bool,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,

src/components/RadioButton.jsx

@@ -51,6 +51,7 @@ export class RadioButton extends Component {
         <input
           checked={this.state.value === option.value}
           key={index}
+          id={this.props.conceptUuid}
           name={name}
           type="radio"
           value={option.value}
@@ -68,6 +69,7 @@ export class RadioButton extends Component {
 }
 
 RadioButton.propTypes = {
+  conceptUuid: PropTypes.string,
   onValueChange: PropTypes.func.isRequired,
   options: PropTypes.array.isRequired,
   validate: PropTypes.bool.isRequired,

src/components/TextBox.jsx

@@ -78,13 +78,16 @@ export class TextBox extends Component {
         disabled={!this.props.enabled}
         onChange={(e) => this.handleChange(e)}
         value={defaultValue}
+        name={this.props.conceptUuid}
+        id={this.props.conceptUuid}
       />
         </div>
     );
   }
 }
 
 TextBox.propTypes = {
+  conceptUuid: PropTypes.string,
   enabled: PropTypes.bool,
   formFieldPath: PropTypes.string,
   onChange: PropTypes.func.isRequired,