bug(case_contact): fixed the order of case contacts

Author: Raushan Kumar Raman

app/javascript/src/case_contact.js

@@ -42,6 +42,12 @@ async function fireSwalFollowupAlert () {
   })
 }
 
+$(document).on('turbo:load', function() {
+  $('.filter-form').on('change', '.filter-input', function() {
+    $(this).closest('form').submit();
+  });
+});
+
 $(() => { // JQuery's callback for the DOM loading
   $('[data-toggle="tooltip"]').tooltip()
   $('.followup-button').on('click', displayFollowupAlert)

app/views/case_contacts/index.html.erb

@@ -15,7 +15,7 @@
   </div>
 </div>
 
-<%= form_for_filterrific @filterrific, url: case_contacts_path, html: {class: "my-4"},
+<%= form_for_filterrific @filterrific, url: case_contacts_path, html: {class: "my-4 filter-form"}, remote: true,
   data: {turbo: true, turbo_frame: :case_contacts, turbo_action: :advance } do |f| %>
   <%= hidden_field_tag 'casa_case_id', params[:casa_case_id] %>
 
@@ -38,18 +38,15 @@
           <div class="select-style-1 mb-0">
             <%= f.label :sorted_by %>
             <div class="select-position">
-              <%= f.select(:sorted_by, @filterrific.select_options[:sorted_by], {}, {class: ""}) %>
+              <%= f.select(:sorted_by, @filterrific.select_options[:sorted_by], {}, {class: "filter-input"}) %>
             </div>
           </div>
           <div class="form-check checkbox-style">
-            <%= f.check_box :no_drafts, class: "form-check-input case-contact-contact-type" %>
+            <%= f.check_box :no_drafts, class: "form-check-input case-contact-contact-type filter-input" %>
             <label class="form-check-label" for="filterrific_no_drafts">Hide drafts</label>
           </div>
         </div>
         <div>
-          <%= button_tag( :class=> "btn-sm main-btn dark-btn") do %>
-            <i class="lni lni-funnel mr-10"></i> Filter
-          <% end %>
           <%= link_to("Reset filters", reset_filterrific_url,
             class: "btn-sm main-btn dark-btn-outline btn-hove",
             data: { turbo: true, turbo_frame: :case_contacts, turbo_action: :advance }) %>
@@ -65,11 +62,11 @@
         </div>
         <div class="col-sm-6 input-style-1">
           <%= f.label "Starting from", for: "filterrific_occurred_starting_at" %>
-          <%= f.date_field(:occurred_starting_at, class: "") %>
+          <%= f.date_field(:occurred_starting_at, class: "filter-input") %>
         </div>
         <div class="col-sm-6 input-style-1">
           <%= f.label "Ending at", for: "filterrific_occurred_ending_at" %>
-          <%= f.date_field(:occurred_ending_at, class: "") %>
+          <%= f.date_field(:occurred_ending_at, class: "filter-input") %>
         </div>
       </div>
       <div class="row mb-4">
@@ -84,7 +81,7 @@
                     <div class="form-check checkbox-style">
                       <%=
                       f.check_box :contact_type,
-                        {multiple: true, class: "form-check-input case-contact-contact-type"},
+                        {multiple: true, class: "form-check-input case-contact-contact-type filter-input"},
                         contact_type.id,
                         nil
                       %>
@@ -107,21 +104,21 @@
           <%= f.label :contact_medium %>
           <div class="select-position">
             <%= f.select(:contact_medium, options_from_collection_for_select(contact_mediums, "value", "label"),
-                                        {include_blank: "Display all"}) %>
+                                        {include_blank: "Display all", class: "filter-input"}) %>
           </div>
         </div>
         <div class="col-md-3 select-style-1 pr-5">
           <%= f.label :want_driving_reimbursement %>
           <div class="select-position">
             <%= f.select(:want_driving_reimbursement, @presenter.boolean_select_options,
-                                                    {include_blank: "Display all"}) %>
+                                                    {include_blank: "Display all", class: "filter-input"}) %>
           </div>
         </div>
         <div class="col-md-3 select-style-1 pr-5">
           <%= f.label :contact_made %>
           <div class="select-position">
             <%= f.select(:contact_made, @presenter.boolean_select_options,
-                                      {include_blank: "Display all"}) %>
+                                      {include_blank: "Display all", class: "filter-input"}) %>
           </div>
         </div>
       </div>