Merge pull request #366 from sul-dlss/fix-payment-sorting

Allow Payments History to sort when sort option is chosen

app/assets/javascripts/listSort.js

@@ -19,7 +19,17 @@ $(document).on('turbolinks:load', function(){
       ],
   };
 
+  var paymentOptions = {
+    valueNames: [
+      { name: 'bill_description', attr: 'data-sort-bill_description' },
+      { name: 'item_title', attr: 'data-sort-item_title' },
+      { name: 'payment_date', attr: 'data-sort-payment_date' },
+      { name: 'bill_amount', attr: 'data-sort-bill_amount'},
+    ],
+  };
+
   $('#checkouts').listSort(checkoutOptions);
+  $('#payments').listSort(paymentOptions);
   $('#requests').listSort(requestOptions);
 });
 

app/models/payment.rb

@@ -79,6 +79,23 @@ def to_partial_path
     'fines/payment'
   end
 
+  # rubocop:disable Metrics/AbcSize,Metrics/MethodLength
+  def sort_options(key)
+    sort_key = case key
+               when :payment_date
+                 [payment_date.strftime('%FT%T'), item_title, bill_description]
+               when :item_title
+                 [item_title, payment_date, bill_description]
+               when :bill_amount
+                 [bill_amount, payment_date, item_title, bill_description]
+               when :bill_description
+                 [bill_description, payment_date.strftime('%FT%T'), item_title]
+               end
+
+    sort_key.join('---')
+  end
+  # rubocop:enable Metrics/AbcSize,Metrics/MethodLength
+
   private
 
   def fee_pay_info

app/views/fines/_payment.html.erb

@@ -1,19 +1,19 @@
 <li class="list-group-item">
   <div class="row d-flex flex-wrap position-relative">
     <div class="d-flex flex-row flex-grow-1 justify-content-start w-100 row col-md-12 col-lg-6">
-      <div class="col-4 col-md-4 order-md-first description">
+      <div class="col-4 col-md-4 order-md-first bill_description" data-sort-bill_description="<%= h payment.sort_options(:bill_description) %>" >
         <%= payment.bill_description %>
       </div>
 
-      <div class="col-3 col-md-4 order-first order-sm-first">
+      <div class="col-3 col-md-4 order-first order-sm-first bill_amount" data-sort-bill_amount="<%= h payment.sort_options(:bill_amount) %>">
         <%= number_to_currency(payment.bill_amount) %>
       </div>
 
-      <div class="col-5 col-md-4 text-right text-md-left due_date" data-date="<%= payment.payment_date.strftime('%FT%T') %>">
+      <div class="col-5 col-md-4 text-right text-md-left payment_date" data-date="<%= h payment.sort_options(:payment_date) %>" data-sort-payment_date="<%= payment.payment_date %>" >
         <%= l(payment.payment_date, format: :short) %>
       </div>
     </div>
-    <div class="d-flex flex-grow-1 flex-column flex-md-row w-75 row col-md-12 col-lg-6">
+    <div class="d-flex flex-grow-1 flex-column flex-md-row w-75 row col-md-12 col-lg-6 item_title" data-sort-item_title="<%= h payment.sort_options(:item_title) %>">
       <h3 class="col-md-10 clamp-3 record-title list-item-title"><%= payment.item_title %></h3>
     </div>
     <div>

app/views/fines/index.html.erb

@@ -56,25 +56,26 @@
         </a>
 
         <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
-          <li class="dropdown-item active" data-sort="due_date">Reason</li>
-          <li class="dropdown-item" data-sort="status">Date paid</li>
-          <li class="dropdown-item" data-sort="title">Title</li>
+          <li class="dropdown-item" data-sort="bill_description">Reason</li>
+          <li class="dropdown-item active" data-sort="payment_date">Date paid</li>
+          <li class="dropdown-item" data-sort="item_title">Title</li>
+          <li class="dropdown-item" data-sort="bill_amount">Amount</li>
         </ul>
       </div>
     </div>
 
     <div class="d-none d-md-flex row font-weight-bold list-header">
       <div class="row col-md-12 col-lg-6">
-        <div class="col-md-4" data-sort="reason">Reason</div>
-        <div class="col-md-4" data-sort="amount">Amount</div>
-        <div class="col-md-4 active" data-sort="due_date">Paid on</div>
+        <div class="col-md-4" data-sort="bill_description">Reason</div>
+        <div class="col-md-4" data-sort="bill_amount">Amount</div>
+        <div class="col-md-4 active" data-sort="payment_date">Paid on</div>
       </div>
       <div class="row col-md-12 col-lg-6">
-        <div class="col-md-7" data-sort="title">Title</div>
+        <div class="col-md-7" data-sort="item_title">Title</div>
       </div>
     </div>
 
-    <ul class="payments list-group">
+    <ul class="payments list list-group">
       <%= render @payments %>
     </ul>
   </div>

spec/features/fines_spec.rb

@@ -62,7 +62,7 @@
       within('ul.payments') do
         expect(page).to have_css('li', count: 2)
         expect(page).to have_css('li h3', text: 'California : a history')
-        expect(page).to have_css('li .description', text: 'Overdue recall')
+        expect(page).to have_css('li .bill_description', text: 'Overdue recall')
       end
     end
 
@@ -79,6 +79,22 @@
         end
       end
     end
+
+    it 'is sortable', js: true do
+      visit fines_path
+
+      within '#payments' do
+        expect(page).to have_css('.dropdown-toggle', text: 'Sort (Date paid)')
+        find('[data-sort="bill_description"]').click
+
+        expect(page).to have_css('.dropdown-toggle', text: 'Sort (Reason)')
+        expect(page).to have_css('.active[data-sort="bill_description"]', count: 2, visible: false)
+
+        within(first('ul.payments li')) do
+          expect(page).to have_css('.bill_description', text: /Overdue recall/)
+        end
+      end
+    end
   end
 
   context 'when user has a single payment' do
@@ -92,7 +108,7 @@
       within('ul.payments') do
         expect(page).to have_css('li', count: 1)
         expect(page).to have_css('li h3', text: 'No item associated with this payment')
-        expect(page).to have_css('li .description', text: 'Privileges fee')
+        expect(page).to have_css('li .bill_description', text: 'Privileges fee')
       end
     end
 

spec/support/fixtures/patron/payment_history/999181.xml

@@ -10,7 +10,7 @@
     <feePaymentInfo>
       <paymentDate>2013-12-23</paymentDate>
       <paymentAmount ns2:currency="USD">21.00</paymentAmount>
-      <paymentTypeDescription>Payment using credit or debit card via MyAccount</paymentTypeDescription>
+      <paymentTypeID>CREDITCARD</paymentTypeID>
     </feePaymentInfo>
     <feeItemInfo>
       <itemLibraryID>GREEN</itemLibraryID>
@@ -25,7 +25,7 @@
     <feePaymentInfo>
       <paymentDate>2013-12-23</paymentDate>
       <paymentAmount ns2:currency="USD">0.01</paymentAmount>
-      <paymentTypeDescription>Fee cancelled</paymentTypeDescription>
+      <paymentTypeID>FORGIVEN</paymentTypeID>
     </feePaymentInfo>
   </feeInfo>
 </LookupPatronInfoResponse>