feat: update matrix UI to allow _all_ versions with a particular tag …

…to be specified
pact-foundation · Apr 19, 2018 · 278b3ea · 278b3ea
1 parent c47c27a
commit 278b3ea
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 56 deletions.
diff --git a/lib/pact_broker/ui/controllers/matrix.rb b/lib/pact_broker/ui/controllers/matrix.rb
@@ -59,12 +59,11 @@ class Matrix < Base
         def create_selector_objects(selector_hashes)
           selector_hashes.collect do | selector_hash |
             o = OpenStruct.new(selector_hash)
-            o.tag_disabled = o.tag ? nil : 'disabled'
-            o.version_disabled = o.pacticipant_version_number ? nil : 'disabled'
-            o.specify_latest_tag_checked = o.tag ? 'checked' : nil
-            o.specify_latest_checked = o.latest ? 'checked' : nil
-            o.specify_version_checked = o.pacticipant_version_number ? 'checked' : nil
-            o.specify_all_versions_checked = !(o.tag || o.pacticipant_version_number) ? 'checked' : nil
+            o.specify_latest_tag = o.tag && o.latest ? 'checked' : nil
+            o.specify_all_tagged = o.tag && !o.latest ? 'checked' : nil
+            o.specify_latest = o.latest ? 'checked' : nil
+            o.specify_version = o.pacticipant_version_number ? 'checked' : nil
+            o.specify_all_versions = !(o.tag || o.pacticipant_version_number) ? 'checked' : nil
             o
           end
         end

diff --git a/lib/pact_broker/ui/views/matrix/show.haml b/lib/pact_broker/ui/views/matrix/show.haml
@@ -29,29 +29,27 @@
         %input{name: 'q[]pacticipant', id: "pacticipant1#{index}", value: selector.pacticipant_name}
 
         .input-group
-          %input{type: 'radio', name: "ignorethis#{index}", class: 'specify-all-versions version-selectorizor', value: 'all_versions', id: "pacticipant#{index}_all_versions", checked: selector.specify_all_versions_checked}
-          %label{for: "pacticipant#{index}_all_versions"}
-            All versions
 
         .input-group
-          %input{type: 'radio', name: "ignorethis#{index}", class: 'specify-version version-selectorizor', value: 'version', id: "pacticipant#{index}_by_version", checked: selector.specify_version_checked}
-          %label{for: "pacticipant#{index}_by_version"}
-            Version
-          %input{name: 'q[]version', type: 'text', id: "pacticipant#{index}_version", class: 'by-version', value: selector.pacticipant_version_number}
+          %select{ name: "ignorethis#{index}", class: 'version-selectorizor' }
+            %option{ value: 'specify-all-versions', selected: selector.specify_all_versions }
+              All versions
+            %option{ value: 'specify-latest', selected: selector.specify_latest }
+              Latest version
+            %option{ value: 'specify-version', selected: selector.specify_version }
+              Version number ...
+            %option{ value: 'specify-latest-tag', selected: selector.specify_latest_tag }
+              Latest version with tag ...
+            %option{ value: 'specify-all-tagged', selected: selector.specify_all_tagged }
+              All versions with tag...
 
-        .input-group
-          %input{type: 'radio', name: "ignorethis#{index}", class: 'specify-latest version-selectorizor', value: 'tag', id: "pacticipant#{index}_latest", checked: selector.specify_latest_checked}
-          %label{for: "pacticipant#{index}_latest"}
-            Latest version
-          %input{name: 'q[]latest', value: 'true', hidden: true, class: 'latest-flag'}
+          %input{name: 'q[]version', type: 'text', id: "pacticipant#{index}_version", class: 'version', value: selector.pacticipant_version_number}
+
+          %input{name: 'q[]tag', type: 'text', id: "pacticipant#{index}_tag", class: 'tag', value: selector.tag}
 
-        .input-group
-          %input{type: 'radio', name: "ignorethis#{index}", class: 'specify-latest-tag version-selectorizor', value: 'tag', id: "pacticipant#{index}_by_tag", checked: selector.specify_latest_tag_checked}
-          %label{for: "pacticipant#{index}_by_tag"}
-            Latest version with tag
-          %input{name: 'q[]tag', type: 'text', id: "pacticipant#{index}_tag", class: "by-latest-tag", value: selector.tag}
           %input{name: 'q[]latest', value: 'true', hidden: true, class: 'latest-flag'}
 
+
     %div.top-of-group
       .input-group
         %input{type: 'radio', name: "latestby", class: '', value: '', id: 'all_rows', checked: options.all_rows_checked}

diff --git a/public/javascripts/matrix.js b/public/javascripts/matrix.js
@@ -1,27 +1,48 @@
-function handleRadioButtonClicked() {
-  selectApplicableTextBox($(this));
-  clearOtherTextBoxes($(this));
-}
 
-function selectApplicableTextBox(selectedRadioButton) {
-  selectedRadioButton.closest('.input-group').find('input[type="text"]').first().focus();
+function setTextboxVisibility(selectBox, cssSelector, visibility) {
+  var textbox = selectBox.closest('.selector').find(cssSelector);
+  textbox.toggle(visibility);
+  if(visibility) {
+    textbox.prop('disabled', '');
+    textbox.focus();
+  } else {
+    textbox.prop('disabled', 'disabled');
+  }
 }
 
-function handleTextBoxClicked() {
-  selectApplicableRadioButton($(this));
-  clearOtherTextBoxes($(this));
+function toggleLatestFlag(selectBox, enabled) {
+  var flagElement = selectBox.closest('.selector').find('.latest-flag');
+  if(enabled) {
+    flagElement.prop('disabled', '');
+  } else {
+    flagElement.prop('disabled', 'disabled');
+  }
 }
 
-function selectApplicableRadioButton(selectedTextBox) {
-  selectedTextBox.closest('.input-group').find('.version-selectorizor').prop('checked', 'checked');
+function showApplicableTextBoxes(selectorizor) {
+  var selectorizorType = selectorizor.val();
+  if( selectorizorType === 'specify-version') {
+    setTextboxVisibility(selectorizor, '.version', true);
+    setTextboxVisibility(selectorizor, '.tag', false);
+  }
+  else if( selectorizorType === 'specify-latest-tag' || selectorizorType === 'specify-all-tagged') {
+    setTextboxVisibility(selectorizor, '.version', false);
+    setTextboxVisibility(selectorizor, '.tag', true);
+  }
+  else if ( selectorizorType === 'specify-all-versions' || selectorizorType === 'specify-latest') {
+    setTextboxVisibility(selectorizor, '.version', false);
+    setTextboxVisibility(selectorizor, '.tag', false);
+  }
+
+  if (selectorizorType === 'specify-latest' || selectorizorType === 'specify-latest-tag') {
+    toggleLatestFlag(selectorizor, true);
+  } else {
+    toggleLatestFlag(selectorizor, false);
+  }
 }
 
-function clearOtherTextBoxes(clickedElement) {
-  clickedElement.closest('.selector').find('input[type="text"]').each(function(){
-    if(!$.contains(clickedElement.closest('.input-group')[0], $(this)[0])) {
-      $(this).prop('value', '');
-    }
-  });
+function handleSelectorizorChanged() {
+  showApplicableTextBoxes($(this));
 }
 
 function onSubmit() {
@@ -30,26 +51,12 @@ function onSubmit() {
 }
 
 function disableFieldsThatShouldNotBeSubmitted() {
-  disableInputsForUncheckedRadioButtons();
-  disableRadioButtons();
-}
-
-function disableInputsForUncheckedRadioButtons() {
-  $('.version-selectorizor').each(function(){
-    if($(this).prop('checked') === false) {
-      $(this).closest('.input-group').find('input').prop('disabled', 'disabled');
-    }
-  });
-}
-
-function disableRadioButtons() {
   $('.version-selectorizor').prop('disabled', 'disabled');
 }
 
 $(document).ready(function(){
-  $('.by-version').click(handleTextBoxClicked);
-  $('.by-latest-tag').click(handleTextBoxClicked);
-  $('.version-selectorizor').click(handleRadioButtonClicked);
+  $('.version-selectorizor').change(handleSelectorizorChanged);
+  $('.version-selectorizor').each(function(){ showApplicableTextBoxes($(this)); });
 
   $("#matrix").tablesorter({
     textExtraction : function(node, table, cellIndex){