From 52e0fbb21107274dc7c45e46a0637950a2f58e0b Mon Sep 17 00:00:00 2001
From: Ben <benjamen@obdev.io>
Date: Mon, 22 Jan 2024 19:48:38 -0600
Subject: [PATCH] Changed background color, edited Pagination for Participant
 page to better match our look for app

---
 Gemfile                                    |  2 ++
 Gemfile.lock                               | 13 ++++++++
 Makefile                                   |  5 ++++
 app/assets/stylesheets/application.css     |  7 +++++
 app/controllers/participants_controller.rb |  3 +-
 app/views/kaminari/_first_page.html.erb    | 11 +++++++
 app/views/kaminari/_gap.html.erb           |  8 +++++
 app/views/kaminari/_last_page.html.erb     | 11 +++++++
 app/views/kaminari/_next_page.html.erb     | 11 +++++++
 app/views/kaminari/_page.html.erb          | 12 ++++++++
 app/views/kaminari/_paginator.html.erb     | 35 ++++++++++++++++++++++
 app/views/kaminari/_prev_page.html.erb     | 11 +++++++
 app/views/layouts/application.html.erb     |  3 +-
 app/views/participants/index.html.erb      | 11 +++++--
 14 files changed, 139 insertions(+), 4 deletions(-)
 create mode 100644 app/views/kaminari/_first_page.html.erb
 create mode 100644 app/views/kaminari/_gap.html.erb
 create mode 100644 app/views/kaminari/_last_page.html.erb
 create mode 100644 app/views/kaminari/_next_page.html.erb
 create mode 100644 app/views/kaminari/_page.html.erb
 create mode 100644 app/views/kaminari/_paginator.html.erb
 create mode 100644 app/views/kaminari/_prev_page.html.erb

diff --git a/Gemfile b/Gemfile
index 909b3be..5eb6b52 100644
--- a/Gemfile
+++ b/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"
 
diff --git a/Gemfile.lock b/Gemfile.lock
index d476aee..87bbc21 100644
--- a/Gemfile.lock
+++ b/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
diff --git a/Makefile b/Makefile
index 3e94f9d..706723d 100644
--- a/Makefile
+++ b/Makefile
@@ -20,5 +20,10 @@ version:
 # bundle install
 # rails webpacker:install
 
+# gem 'kaminari'
+# bundle install
+# rails g kaminari:views default
+
+
 
 
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 288b9ab..ad84b45 100644
--- a/app/assets/stylesheets/application.css
+++ b/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 */
+}
+
+  
\ No newline at end of file
diff --git a/app/controllers/participants_controller.rb b/app/controllers/participants_controller.rb
index 3347d49..3919f00 100644
--- a/app/controllers/participants_controller.rb
+++ b/app/controllers/participants_controller.rb
@@ -2,8 +2,9 @@ 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
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
new file mode 100644
index 0000000..0cc83b9
--- /dev/null
+++ b/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>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
new file mode 100644
index 0000000..bbb0f98
--- /dev/null
+++ b/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>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
new file mode 100644
index 0000000..bc777b4
--- /dev/null
+++ b/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>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
new file mode 100644
index 0000000..3b0d054
--- /dev/null
+++ b/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>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
new file mode 100644
index 0000000..393bfc4
--- /dev/null
+++ b/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>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
new file mode 100644
index 0000000..056dcbd
--- /dev/null
+++ b/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 -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
new file mode 100644
index 0000000..0f32af4
--- /dev/null
+++ b/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>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 3422395..ed08b44 100644
--- a/app/views/layouts/application.html.erb
+++ b/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' %>
 
diff --git a/app/views/participants/index.html.erb b/app/views/participants/index.html.erb
index d3311c1..36b28f8 100644
--- a/app/views/participants/index.html.erb
+++ b/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>
+
+