Changed background color, edited Pagination for Participant page to better match our look for app

Gemfile

@@ -30,6 +30,8 @@ gem 'devise'
 
 gem 'webpacker'
 
+gem 'kaminari'
+
 # Use Redis adapter to run Action Cable in production
 # gem "redis", ">= 4.0.1"
 

Gemfile.lock

@@ -124,6 +124,18 @@ GEM
     jbuilder (2.11.5)
       actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
+    kaminari (1.2.2)
+      activesupport (>= 4.1.0)
+      kaminari-actionview (= 1.2.2)
+      kaminari-activerecord (= 1.2.2)
+      kaminari-core (= 1.2.2)
+    kaminari-actionview (1.2.2)
+      actionview
+      kaminari-core (= 1.2.2)
+    kaminari-activerecord (1.2.2)
+      activerecord
+      kaminari-core (= 1.2.2)
+    kaminari-core (1.2.2)
     loofah (2.22.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
@@ -283,6 +295,7 @@ DEPENDENCIES
   devise
   importmap-rails
   jbuilder
+  kaminari
   puma (>= 5.0)
   rails (~> 7.1.2)
   selenium-webdriver

Makefile

@@ -20,5 +20,10 @@ version:
 # bundle install
 # rails webpacker:install
 
+# gem 'kaminari'
+# bundle install
+# rails g kaminari:views default
+
+
 
 

app/assets/stylesheets/application.css

@@ -13,3 +13,10 @@
  *= require_tree .
  *= require_self
  */
+
+ /* Add your custom styles here */
+.bg-light-grey {
+    background-color: #e6e5e5da; /* Light grey color */
+}
+
+  

app/controllers/participants_controller.rb

@@ -2,9 +2,10 @@ class ParticipantsController < ApplicationController
   before_action :set_participant, only: [:show, :edit, :update, :destroy]
   
   def index
-    @participants = Participant.all
+    @participants = Participant.order(:last_name).page(params[:page]).per(10) # Adjust the number per page as needed
   end
   
+
   def show
   end
 

app/views/kaminari/_first_page.html.erb

@@ -0,0 +1,11 @@
+<%# Link to the "First" page
+  - available local variables
+    url:           url to the first page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="first">
+  <%= link_to_unless current_page.first?, t('views.pagination.first').html_safe, url, remote: remote %>
+</span>

app/views/kaminari/_gap.html.erb

@@ -0,0 +1,8 @@
+<%# Non-link tag that stands for skipped pages...
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="page gap"><%= t('views.pagination.truncate').html_safe %></span>

app/views/kaminari/_last_page.html.erb

@@ -0,0 +1,11 @@
+<%# Link to the "Last" page
+  - available local variables
+    url:           url to the last page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="last">
+  <%= link_to_unless current_page.last?, t('views.pagination.last').html_safe, url, remote: remote %>
+</span>

app/views/kaminari/_next_page.html.erb

@@ -0,0 +1,11 @@
+<%# Link to the "Next" page
+  - available local variables
+    url:           url to the next page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="next">
+  <%= link_to_unless current_page.last?, t('views.pagination.next').html_safe, url, rel: 'next', remote: remote %>
+</span>

app/views/kaminari/_page.html.erb

@@ -0,0 +1,12 @@
+<%# Link showing page number
+  - available local variables
+    page:          a page object for "this" page
+    url:           url to this page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="page<%= ' current' if page.current? %>">
+  <%= link_to_unless page.current?, page, url, {remote: remote, rel: page.rel} %>
+</span>

app/views/kaminari/_paginator.html.erb

@@ -0,0 +1,35 @@
+<%# The container tag
+  - available local variables
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+    paginator:     the paginator that renders the pagination tags inside
+-%>
+<%= paginator.render do -%>
+  <nav aria-label="Page navigation">
+    <ul class="pagination">
+      <li class="page-item <%= 'disabled' if current_page.first? %>">
+        <%= link_to 'First', participants_path(page: 1), class: 'page-link' unless current_page.first? %>
+      </li>
+      <li class="page-item <%= 'disabled' if current_page.first? %>">
+        <%= link_to 'Previous', participants_path(page: current_page.number - 1), class: 'page-link' unless current_page.first? %>
+      </li>
+      <% each_page do |page| -%>
+        <% if page.display_tag? -%>
+          <li class="page-item <%= 'active' if page.number == current_page.number %>">
+          <%= link_to page.number, participants_path(page: page.number), class: 'page-link' %>
+        </li>
+        <% elsif !page.was_truncated? -%>
+          <li class="page-item disabled"><span class="page-link">…</span></li>
+        <% end -%>
+      <% end -%>
+      <li class="page-item <%= 'disabled' if current_page.last? %>">
+        <%= link_to 'Next', participants_path(page: current_page.number + 1), class: 'page-link' unless current_page.last? %>
+      </li>
+      <li class="page-item <%= 'disabled' if current_page.last? %>">
+        <%= link_to 'Last', participants_path(page: total_pages), class: 'page-link' unless current_page.last? %>
+      </li>
+    </ul>
+  </nav>
+<% end -%>

app/views/kaminari/_prev_page.html.erb

@@ -0,0 +1,11 @@
+<%# Link to the "Previous" page
+  - available local variables
+    url:           url to the previous page
+    current_page:  a page object for the currently displayed page
+    total_pages:   total number of pages
+    per_page:      number of items to fetch per page
+    remote:        data-remote
+-%>
+<span class="prev">
+  <%= link_to_unless current_page.first?, t('views.pagination.previous').html_safe, url, rel: 'prev', remote: remote %>
+</span>

app/views/layouts/application.html.erb

@@ -6,13 +6,14 @@
     <title>Obdev</title>
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
     <%= csrf_meta_tags %>
+    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
     <%= javascript_include_tag 'rails-ujs', 'data-turbolinks-track': 'reload' %>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 
   </head>
 
-  <body>
+  <body class="bg-light-grey">
 
     <%= render 'layouts/navbar' %>
 

app/views/participants/index.html.erb

@@ -3,8 +3,12 @@
 
   <div class="text-center mt-3">
     <%= link_to 'New Participant', new_participant_path, class: 'btn btn-primary mb-3' %>
+    
   </div>
 
+  <%= paginate @participants %>
+
+
   <table class="table table-striped table-hover">
     <thead class="table-dark">
       <tr>
@@ -32,18 +36,21 @@
           <td><%= participant.dob.strftime('%B %d, %Y') if participant.dob %></td>
           
           <td>
-            <%= link_to participant, class: 'btn btn-sm btn-info' do %>
+            <%= link_to participant, class: 'btn btn-sm btn-secondary' do %>
             <i class="bi bi-eye"></i><!-- Eyeball icon for 'Show' -->
             <% end %>
           </td>
           <td>
-            <%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-primary' do %>
+            <%= link_to edit_participant_path(participant), class: 'btn btn-sm btn-warning' do %>
             <i class="bi bi-pencil-fill"></i> <!-- Pencil icon for 'Edit' -->
             <% end %>
           </td>
         </tr>
       <% end %>
+
     </tbody>
   </table>
 
 </div>
+
+