pagination: user expects to see requirements broken down by pages
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi,

I hope you're well! Here's the feature request in Gherkin syntax

As a user, I want to see pagination on /requirements, so that I can see requirements grouped by numbers.

Given Im on /requirements
When I click 2
Then I expect to see all requirements related to 2

Commit preferred with test case to https://github.com/akshatpradhan/compliance_chimp/pull/117/files

In order to paginate the sub-requirements by requirement we need to add the tree structure. I'll work on this and then add the paginate by requirements feature
kc00l over 5 years ago
uhm, on second thought there's no need for a full fledged hierarchical structure. I'll just use the first digit of the requirement name, for now.
kc00l over 5 years ago
awarded to kc00l

Crowdsource coding tasks.

2 Solutions


If you add the pagination like so:

<ul class="pagination" style="margin: 0;">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="#">9</a></li>
    <li><a href="#">10</a></li>
    <li><a href="#">11</a></li>
    <li><a href="#">12</a></li>
</ul>

And an id attribute to each requirement li:

<li id="requirement-1-1-1-a" class="resolved">
    ...
</li>

You can accomplish the pagination in jQuery alone:

$('.pagination li').click(function (event) {
  $(this).toggleClass('active');

  if ($(this).hasClass('active')) {
    $(this).closest('ul').find('li').removeClass('active'); $(this).addClass('active');
  }

  if ($(this).closest('ul').find('li.active').length > 0) {
    $('li[id^="requirement-"]').hide();
    $('li[id^="requirement-' + $(this).closest('ul').find('li.active').text() + '"]').show();
  }

  else {
    $('li[id^="requirement-"]').show();
  }

  event.preventDefault();
});

Not submitting a PR since I'm not experienced with the Rails asset pipeline and I don't wanna break anything.

This takes advantage of CSS3 query selector ^ (starts-with operator). See a working demo here.

@alixaxel Sorry! I already did this part! I was looking for someone to add a commit to this PR with the controller/model logic to make this work for mongoid: https://github.com/akshatpradhan/compliance_chimp/pull/117/files
akshatpradhan over 5 years ago
@akshatpradhan: Ah right, I wasn't sure if you wanted backend or frontend pagination.
alixaxel over 5 years ago
No need to tip man, but thanks!
alixaxel over 5 years ago
Winning solution

I added more commits to the pull request #117. I originally planned for a full fledged hierarchical structure for requirements (1 -> 1.1 -> 1.1.1) but I don't think this is necessary for the moment.

I added a "parent" string field to the Requirement model which is populated in the seeds.rb file by using the first two digits of the name field. I first check whether the requirement is "A.foo" and in this case I assign "A" as the parent.

For the pagination I'm filtering the requirements query by the parent field which is passed as an argument in each pagination link :

<%= link_to "1", requirements_path(parent: "1") %>

For prettier urls I added a custom collection route for requirements:

resources :requirements do
  get ":parent", actions: :index, on: :collection, as: "paginate"
  ...
end

This way I can rewrite pagination links as:

<%= link_to "1", paginate_requirements_path(parent: "1") %>
This is really interesting but why not use kaminari?
akshatpradhan over 5 years ago
Tricky, tricky. I started using kaminari with its array pagination feature but it turned out to be a mess and couldn't render the correct array for kaminari to parse as paginatable array. You'll notice I used some of the kaminari tricks (i.e. the pretty urls). I admit it was simpler doing this with a "from scratch" approach which is not too hacky. By the way, pagination can be done with AJAX with some tiny modifications and it could also be integrated easily if we decide to use angular.js.
kc00l over 5 years ago
Are you sure AJAX is the right way to go with this? I ask because loading all gazillion requirements into the browser feels like its really slowing it down. I made a video to show the bugs I'm noticing: http://youtu.be/1BWzWlOW7G0
akshatpradhan over 5 years ago
Rails html processor is sluggish. That's why I was suggesting using angular.js.
kc00l over 5 years ago
Did you run rake db:purge && rake db:setup ?
kc00l over 5 years ago
I didn't, was i suppose to do that?
akshatpradhan over 5 years ago
Yeah, sorry I should have specified that in the pull request. Pagination requires having a "parent" field for each requirement which I added in the seeds.rb file :-) I'll update the PR description.
kc00l over 5 years ago
View Timeline