update switch button to group button

app/assets/stylesheets/application.scss

@@ -38,3 +38,25 @@ $link-color: color("light-blue", "darken-1") !default;
     font-size: 0.8em;
   }
 }
+
+.group_button_right {
+    -webkit-border-top-right-radius: 20px;
+    -webkit-border-bottom-right-radius: 20px;
+    -moz-border-radius-topright: 20px;
+    -moz-border-radius-bottomright: 20px;
+    border-top-right-radius: 20px;
+    border-bottom-right-radius: 20px;
+    margin-left: -3px;
+    padding-left: 15px;
+    padding-right: 10px;
+}
+.group_button_left {
+    -webkit-border-top-left-radius: 20px;
+    -webkit-border-bottom-left-radius: 20px;
+    -moz-border-radius-topleft: 20px;
+    -moz-border-radius-bottomleft: 20px;
+    border-top-left-radius: 20px;
+    border-bottom-left-radius: 20px;
+    padding-right: 15px;
+    padding-left: 10px;
+}

app/views/institutions_subscriptions/_table.html.erb

@@ -33,17 +33,67 @@
             </td>
             <td><%= I18n.l(subscription.created_at.to_date) %></td>
             <td>
-                <div class="switch">
-                <label>
-                    <%= t('actions.reject') %>
-                    <%= check_box_tag 'accept_subscription', subscription.id, subscription.approved?, :id => "accept_subscription_#{subscription.id}" %>
-                    <span class="lever"></span>
-                    <%= t('actions.approve') %>
-                </label>
+                <div id="group_button_status">
+                    <%= hidden_field :subscription, :id, :value => subscription.id %>
+                    <a class="reject_button waves-effect waves-light btn group_button_left <%='grey lighten-1' unless subscription.rejected? %>">
+                        <i class="material-icons left">do_not_disturb</i>
+                        <%= t('actions.reject') %>
+                    </a>
+                    <a class="accept_button waves-effect waves-light btn group_button_right <%= 'grey lighten-1' unless subscription.approved? %>">
+                        <i class="material-icons right">check_circle</i>
+                        <%= t('actions.approve') %>
+                    </a>
                 </div>
             </td>
             </tr>
         <% end %>
         </tbody>
     </table>
+
+
+<script>
+  $(document).ready(function () {
+
+    function updateStatus(element, status) {
+      var checkbox = $(element).parent().find("input#subscription_id");
+      var id=checkbox.val();
+      $.ajax({
+        url: '/subscriptions/'+id+'.json',
+        type:'PUT',
+        data: {
+          subscription: {
+            status: status
+          }
+        }
+      }).success(function(a){
+        updateStatusView(element, a.status)
+        msg = '<%= t('messages.updated') %>'
+        Materialize.toast(msg, 3000, 'blue');
+      }).fail(function(){
+        msg = '<%= t('messages.error_update') %>'
+        Materialize.toast(msg, 3000, 'red');
+      });
+    }
+
+    function updateStatusView(element, status){
+        var leftButton = $(element).parent().find('.group_button_left');
+        var rightButton = $(element).parent().find('.group_button_right');
+        if(status == "approved"){
+          leftButton.addClass( "grey lighten-1" );
+          rightButton.removeClass( "grey lighten-1" );
+        }else{
+          leftButton.removeClass( "grey lighten-1" );
+          rightButton.addClass( "grey lighten-1" );
+        }
+    }
+
+    $("a.accept_button").on('click', function(event) {
+      updateStatus(event.target, 'approved');
+    });
+
+    $("a.reject_button").on('click', function(event) {
+      updateStatus(event.target, 'rejected');
+    });
+  });
+</script>
 </div>

app/views/institutions_subscriptions/index.html.erb

@@ -53,24 +53,5 @@
         return false;
       }
     });
-
-    $("input[type=checkbox][name='accept_subscription']").on('change', function() {
-      var status = this.checked? 'approved' : 'rejected';
-      $.ajax({
-        url: '/subscriptions/'+$(this).val()+'.json',
-        type:'PUT',
-        data: {
-          subscription: {
-            status: status
-          }
-        }
-      }).success(function(a){
-        msg = '<%= t('messages.updated') %>'
-        Materialize.toast(msg, 3000, 'blue');
-      }).fail(function(){
-        msg = '<%= t('messages.error_update') %>'
-        Materialize.toast(msg, 3000, 'red');
-      });
-    });
   });
 </script>

test/integration/institutions_subscriptions_test.rb

@@ -31,15 +31,16 @@ class AproveSubscriptionTest < ActionDispatch::IntegrationTest
 
         assert_select "td", "Job 1"
 
-        assert_select "div.switch input[type=\"checkbox\"]", 2
-        assert_select "div.switch input[type=\"checkbox\"][checked]", 1
+        assert_select "a.accept_button", 2
+        assert_select "a.accept_button.grey", 1
     end
 
+
     test "filter list subscriptions of one institutions" do
         get institution_subscriptions_path(@institution.id)
-        assert_select "div.switch input[type=\"checkbox\"]", 2
+        assert_select "a.accept_button", 2
         get institution_subscriptions_path(@institution.id, :search => 'Job 1')
         assert_response :success
-        assert_select "div.switch input[type=\"checkbox\"]", 1
+        assert_select "a.accept_button", 1
     end
 end