Change samples source empty selector component in box creation

app/assets/javascripts/components.js

@@ -18,12 +18,6 @@ function cdx_select_on_change(name, callback) {
   });
 }
 
-$(document).on("change", ".radiotoggle input", function(){
-  $(".radiotoggle input").each(function(i, field) {
-    $("#" + field.value).hide().attr("disabled", true);
-  });
-  $("#" + this.value).removeAttr("disabled").show();
-});
 /*
 This is kind of a exception solution. Because input date's behavior are different.
 Consider this points:

app/assets/javascripts/components/batches_selector.js.jsx

@@ -10,7 +10,17 @@ var BatchesSelector = React.createClass({
       list: [],
     };
   },
-
+  reset: function() {
+    this.setState({
+      batches: [],
+      samples: this.props.samples,
+      concentration: null,
+      replicate: null,
+      distractor: null,
+      instruction: null,
+      list: [],
+    });
+  },
   render: function () {
     let button;
     if (this.state.batches.length > 0) {
@@ -25,6 +35,7 @@ var BatchesSelector = React.createClass({
     }
 
     return (<div className="batches-selector">
+      <a className="clear-batches" href="#" onClick={this.reset}></a>
       <div className="items-count">
         <div className="title">{this.state.list.length}&nbsp;{this.state.list.length == 1 ? "batch" : "batches"}</div>
       </div>

app/assets/javascripts/components/samples_selector.js.jsx

@@ -4,9 +4,12 @@ var SamplesSelector = React.createClass({
       samples: this.props.samples,
     };
   },
-
+  reset: function() {
+    this.setState({ samples: [] });
+  },
   render: function () {
     return (<div className="samples-selector">
+      <a className="clear-samples" href="#" onClick={this.reset}></a>
       {this.renderTitle()}
       {this.state.samples.map(this.renderSample)}
 

app/views/boxes/_form.haml

@@ -43,3 +43,66 @@
   = f.form_actions do
     = f.submit 'Save', class: 'btn-primary', id: 'btn-save'
     = link_to 'Cancel', boxes_path, class: 'btn-link'
+
+.sample-source-change-modal-container.hidden
+  = react_component("ConfirmationModal", 
+                      deletion: true,
+                      cancelFunction: "cancelSampleSourceChange",
+                      confirmFunction: "confirmSampleSourceChange", 
+                      id: "sample-source-confirmation-modal", 
+                      colorClass: "red", 
+                      confirmMessage: "Continue", 
+                      title: "Warning", 
+                      message: "If you change the sample source, the box contents will be emptied. ")
+
+:javascript
+
+  var sourcesRadio = document.querySelectorAll(".radiotoggle input");
+  var oldSource = null;
+  var confirmSampleSourceChange;
+
+  var applySampleSourceChange = function (displayField) {
+    // Hide all the fields and disable them
+    sourcesRadio.forEach(function(otherRadio) {
+      document.getElementById(otherRadio.value).style.display = 'none';
+      document.getElementById(otherRadio.value).setAttribute("disabled", true);
+    });
+    // Show the selected field and enable it
+    document.getElementById(displayField.value).style.display = 'block';
+    document.getElementById(displayField.value).removeAttribute("disabled");
+    // Clear the selectors contents
+    document.querySelector(".clear-batches").click()
+    document.querySelector(".clear-samples").click()
+  }
+
+  function showConfirmModal() {
+    document.querySelector(`.sample-source-change-modal-container`).style.visibility = 'visible';
+  }
+
+  function hideConfirmModal() {
+    document.querySelector(`.sample-source-change-modal-container`).style.visibility = 'hidden';
+  }
+
+  function confirmSampleSourceChangeFn() {
+    applySampleSourceChange(this);
+    hideConfirmModal();
+    // Update the old source only if the user confirmed the change
+    oldSource = this;
+  }
+  function cancelSampleSourceChange() {
+    hideConfirmModal();
+    // Check back the old source since it was not changed
+    oldSource.checked = true;
+  }  
+
+  sourcesRadio.forEach(function(radio) {
+    radio.addEventListener("change", function(evt) {
+      if (oldSource) {
+        confirmSampleSourceChange = confirmSampleSourceChangeFn.bind(this)
+        showConfirmModal();
+      } else {
+        // For the first time, simulate that the user clicked on the confirm button
+        confirmSampleSourceChangeFn.call(this);
+      }
+    });
+  });