From 0cf3d29aef82dae0aee366f4dae6bb1d3e2c8461 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Saulo=20Mendon=C3=A7a?= <saulomendonca@gmail.com>
Date: Fri, 29 Sep 2017 21:20:48 -0300
Subject: [PATCH] update switch button to group button

Change the status' component to a group button
---
 app/assets/stylesheets/application.scss       | 22 +++++++
 .../_table.html.erb                           | 64 +++++++++++++++++--
 .../institutions_subscriptions/index.html.erb | 19 ------
 .../institutions_subscriptions_test.rb        |  9 +--
 4 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index a565248..022717a 100644
--- a/app/assets/stylesheets/application.scss
+++ b/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;
+}
\ No newline at end of file
diff --git a/app/views/institutions_subscriptions/_table.html.erb b/app/views/institutions_subscriptions/_table.html.erb
index 4a4c09f..176a58b 100644
--- a/app/views/institutions_subscriptions/_table.html.erb
+++ b/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>
\ No newline at end of file
diff --git a/app/views/institutions_subscriptions/index.html.erb b/app/views/institutions_subscriptions/index.html.erb
index 6a9864d..48c2728 100644
--- a/app/views/institutions_subscriptions/index.html.erb
+++ b/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>
\ No newline at end of file
diff --git a/test/integration/institutions_subscriptions_test.rb b/test/integration/institutions_subscriptions_test.rb
index 26b5b65..a1e609b 100644
--- a/test/integration/institutions_subscriptions_test.rb
+++ b/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