début de pagination
This commit is contained in:
parent
5b6b99a253
commit
bea4528879
3
Gemfile
3
Gemfile
|
@ -55,6 +55,9 @@ gem "heroicon"
|
||||||
|
|
||||||
gem 'pundit', "~> 2.1.1"
|
gem 'pundit', "~> 2.1.1"
|
||||||
|
|
||||||
|
gem "ransack", "~> 2.5.0"
|
||||||
|
gem "kaminari", "~> 1.2.2"
|
||||||
|
|
||||||
group :development, :test do
|
group :development, :test do
|
||||||
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
|
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
|
||||||
gem "debug", platforms: %i[ mri mingw x64_mingw ]
|
gem "debug", platforms: %i[ mri mingw x64_mingw ]
|
||||||
|
|
18
Gemfile.lock
18
Gemfile.lock
|
@ -107,6 +107,18 @@ GEM
|
||||||
jbuilder (2.11.5)
|
jbuilder (2.11.5)
|
||||||
actionview (>= 5.0.0)
|
actionview (>= 5.0.0)
|
||||||
activesupport (>= 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.13.0)
|
loofah (2.13.0)
|
||||||
crass (~> 1.0.2)
|
crass (~> 1.0.2)
|
||||||
nokogiri (>= 1.5.9)
|
nokogiri (>= 1.5.9)
|
||||||
|
@ -176,6 +188,10 @@ GEM
|
||||||
zeitwerk (~> 2.5)
|
zeitwerk (~> 2.5)
|
||||||
rainbow (3.1.1)
|
rainbow (3.1.1)
|
||||||
rake (13.0.6)
|
rake (13.0.6)
|
||||||
|
ransack (2.5.0)
|
||||||
|
activerecord (>= 5.2.4)
|
||||||
|
activesupport (>= 5.2.4)
|
||||||
|
i18n
|
||||||
redis (4.5.1)
|
redis (4.5.1)
|
||||||
regexp_parser (2.2.0)
|
regexp_parser (2.2.0)
|
||||||
reline (0.3.1)
|
reline (0.3.1)
|
||||||
|
@ -252,9 +268,11 @@ DEPENDENCIES
|
||||||
heroicon
|
heroicon
|
||||||
importmap-rails
|
importmap-rails
|
||||||
jbuilder
|
jbuilder
|
||||||
|
kaminari (~> 1.2.2)
|
||||||
puma (~> 5.0)
|
puma (~> 5.0)
|
||||||
pundit (~> 2.1.1)
|
pundit (~> 2.1.1)
|
||||||
rails (~> 7.0.0)
|
rails (~> 7.0.0)
|
||||||
|
ransack (~> 2.5.0)
|
||||||
redis (~> 4.0)
|
redis (~> 4.0)
|
||||||
selenium-webdriver
|
selenium-webdriver
|
||||||
sprockets-rails
|
sprockets-rails
|
||||||
|
|
|
@ -11,3 +11,28 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.paginate-page {
|
||||||
|
@apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginate-prev-page,
|
||||||
|
.paginate-next-page,
|
||||||
|
.paginate-first-page,
|
||||||
|
.paginate-last-page {
|
||||||
|
@apply px-2
|
||||||
|
}
|
||||||
|
.paginate-page--current {
|
||||||
|
@apply bg-gray-100;
|
||||||
|
}
|
||||||
|
.paginate-first-page {
|
||||||
|
@apply rounded-l-md;
|
||||||
|
}
|
||||||
|
.paginate-last-page {
|
||||||
|
@apply rounded-r-md;
|
||||||
|
}
|
||||||
|
.paginate-page-single {
|
||||||
|
@apply rounded-md text-gray-700 hover:text-gray-500;
|
||||||
|
}
|
||||||
|
}
|
|
@ -3,7 +3,9 @@ class ChecksController < AuthenticatedController
|
||||||
|
|
||||||
# GET /checks or /checks.json
|
# GET /checks or /checks.json
|
||||||
def index
|
def index
|
||||||
@checks = Check.all
|
# @search = Check.ransack(params[:q])
|
||||||
|
# @checks = @search.result
|
||||||
|
@checks = Check.order(:name).page params[:page]
|
||||||
end
|
end
|
||||||
|
|
||||||
# GET /checks/1
|
# GET /checks/1
|
||||||
|
|
|
@ -1,2 +0,0 @@
|
||||||
json.extract! check, :id, :name, :description, :hostname, :created_at, :updated_at
|
|
||||||
json.url check_url(check, format: :json)
|
|
|
@ -1,32 +0,0 @@
|
||||||
<%= form_with(model: check, class: "contents") do |form| %>
|
|
||||||
<% if check.errors.any? %>
|
|
||||||
<div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
|
|
||||||
<h2><%= pluralize(check.errors.count, "error") %> prohibited this check from being saved:</h2>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<% check.errors.each do |error| %>
|
|
||||||
<li><%= error.full_message %></li>
|
|
||||||
<% end %>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="my-5">
|
|
||||||
<%= form.label :name %>
|
|
||||||
<%= form.text_field :name, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-5">
|
|
||||||
<%= form.label :description %>
|
|
||||||
<%= form.text_area :description, rows: 4, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="my-5">
|
|
||||||
<%= form.label :hostname %>
|
|
||||||
<%= form.text_field :hostname, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="inline">
|
|
||||||
<%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
|
@ -1,8 +0,0 @@
|
||||||
<div class="mx-auto md:w-2/3 w-full">
|
|
||||||
<h1 class="font-bold text-4xl">Editing check</h1>
|
|
||||||
|
|
||||||
<%= render "form", check: @check %>
|
|
||||||
|
|
||||||
<%= link_to "Show this check", @check, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
|
|
||||||
<%= link_to "Back to checks", checks_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
|
|
||||||
</div>
|
|
|
@ -8,44 +8,74 @@
|
||||||
|
|
||||||
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
|
||||||
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
|
||||||
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
<!-- BEGIN Table -->
|
||||||
<table class="min-w-full divide-y divide-gray-200">
|
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||||
<thead class="bg-gray-50">
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
<tr>
|
<thead class="bg-gray-50">
|
||||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
<tr>
|
||||||
Hostname
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</th>
|
Hostname
|
||||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
</th>
|
||||||
Name
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</th>
|
Name
|
||||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
</th>
|
||||||
Description
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</th>
|
Description
|
||||||
<th scope="col" class="relative px-6 py-3">
|
</th>
|
||||||
<span class="sr-only">Actions</span>
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
</th>
|
Date
|
||||||
</tr>
|
</th>
|
||||||
</thead>
|
<th scope="col" class="relative px-6 py-3">
|
||||||
<tbody>
|
<span class="sr-only">Actions</span>
|
||||||
<% @checks.each do |check| %>
|
</th>
|
||||||
<tr class="<%= cycle("bg-white", "bg-gray-50") %>">
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
||||||
<%= check.hostname %>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<%= check.name %>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
|
||||||
<%= check.description %>
|
|
||||||
</td>
|
|
||||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
||||||
<%= link_to "Show", check, class: "text-indigo-600 hover:text-indigo-900" %>
|
|
||||||
</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<% end %>
|
</thead>
|
||||||
</tbody>
|
<tbody>
|
||||||
</table>
|
<% @checks.each do |check| %>
|
||||||
</div>
|
<tr class="<%= cycle("bg-white", "bg-gray-50") %>">
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||||
|
<%= check.hostname %>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<%= check.name %>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<%= check.description %>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
<%= check.created_at %>
|
||||||
|
</td>
|
||||||
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
|
<%= link_to "Show", check, class: "text-indigo-600 hover:text-indigo-900" %>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<% end %>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<!-- END Table -->
|
||||||
|
|
||||||
|
<div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
|
||||||
|
<div class="flex-1 flex justify-between sm:hidden">
|
||||||
|
<%= link_to_previous_page @checks, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
|
||||||
|
<%= link_to_next_page @checks, 'Next Page', class: "paginate-page paginate-page-single" %>
|
||||||
|
</div>
|
||||||
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
||||||
|
<div>
|
||||||
|
<p class="text-sm text-gray-700">
|
||||||
|
Showing
|
||||||
|
<span class="font-medium"><%= @checks.offset_value + 1 %></span>
|
||||||
|
to
|
||||||
|
<span class="font-medium"><%= @checks.offset_value + (@checks.respond_to?(:records) ? @checks.records : @checks.to_a).size %></span>
|
||||||
|
of
|
||||||
|
<span class="font-medium"><%= @checks.total_count %></span>
|
||||||
|
results
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<%= paginate @checks %>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
json.array! @checks, partial: "checks/check", as: :check
|
|
|
@ -1,7 +0,0 @@
|
||||||
<div class="mx-auto md:w-2/3 w-full">
|
|
||||||
<h1 class="text-lg font-bold text-4xl">New check</h1>
|
|
||||||
|
|
||||||
<%= render "form", check: @check %>
|
|
||||||
|
|
||||||
<%= link_to 'Back to checks', checks_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
|
|
||||||
</div>
|
|
|
@ -1 +0,0 @@
|
||||||
json.partial! "checks/check", check: @check
|
|
12
app/views/kaminari/_first_page.html.erb
Normal file
12
app/views/kaminari/_first_page.html.erb
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<%# 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
|
||||||
|
-%>
|
||||||
|
<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "paginate-page paginate-first-page" do %>
|
||||||
|
<span class="sr-only"><%= t('views.pagination.first').html_safe %></span>
|
||||||
|
<%= heroicon "chevron-double-left", variant: :solid, options: { class: "h-5 w-5" } %>
|
||||||
|
<% end %>
|
11
app/views/kaminari/_gap.html.erb
Normal file
11
app/views/kaminari/_gap.html.erb
Normal file
|
@ -0,0 +1,11 @@
|
||||||
|
<%# 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="paginate-page">
|
||||||
|
<%= t('views.pagination.truncate').html_safe %>
|
||||||
|
</span>
|
12
app/views/kaminari/_last_page.html.erb
Normal file
12
app/views/kaminari/_last_page.html.erb
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<%# 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
|
||||||
|
-%>
|
||||||
|
<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "paginate-page paginate-last-page" do %>
|
||||||
|
<span class="sr-only"><%= t('views.pagination.last').html_safe %></span>
|
||||||
|
<%= heroicon "chevron-double-right", variant: :solid, options: { class: "h-5 w-5" } %>
|
||||||
|
<% end %>
|
12
app/views/kaminari/_next_page.html.erb
Normal file
12
app/views/kaminari/_next_page.html.erb
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<%# 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
|
||||||
|
-%>
|
||||||
|
<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "paginate-page paginate-next-page" do %>
|
||||||
|
<span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
|
||||||
|
<%= heroicon "chevron-right", variant: :solid, options: { class: "h-5 w-5" } %>
|
||||||
|
<% end %>
|
10
app/views/kaminari/_page.html.erb
Normal file
10
app/views/kaminari/_page.html.erb
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
<%# 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
|
||||||
|
-%>
|
||||||
|
<%= link_to page, url, { remote: false, rel: page.rel, class: "paginate-page #{"paginate-page--current" if page.current?}"} %>
|
27
app/views/kaminari/_paginator.html.erb
Normal file
27
app/views/kaminari/_paginator.html.erb
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
<%# 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 -%>
|
||||||
|
<div>
|
||||||
|
<nav class="relative z-0 inline-flex shadow-sm -space-x-px" role="navigation" aria-label="pager">
|
||||||
|
<%= first_page_tag %>
|
||||||
|
<%= prev_page_tag %>
|
||||||
|
<% each_page do |page| -%>
|
||||||
|
<% if page.display_tag? -%>
|
||||||
|
<%= page_tag page %>
|
||||||
|
<% elsif !page.was_truncated? -%>
|
||||||
|
<%= gap_tag %>
|
||||||
|
<% end -%>
|
||||||
|
<% end -%>
|
||||||
|
<% unless current_page.out_of_range? %>
|
||||||
|
<%= next_page_tag %>
|
||||||
|
<%= last_page_tag %>
|
||||||
|
<% end %>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<% end -%>
|
12
app/views/kaminari/_prev_page.html.erb
Normal file
12
app/views/kaminari/_prev_page.html.erb
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<%# 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
|
||||||
|
-%>
|
||||||
|
<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "paginate-page paginate-prev-page" do %>
|
||||||
|
<span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
|
||||||
|
<%= heroicon "chevron-left", variant: :solid, options: { class: "h-5 w-5" } %>
|
||||||
|
<% end %>
|
14
config/initializers/kaminari_config.rb
Normal file
14
config/initializers/kaminari_config.rb
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
# frozen_string_literal: true
|
||||||
|
|
||||||
|
Kaminari.configure do |config|
|
||||||
|
# config.default_per_page = 25
|
||||||
|
# config.max_per_page = nil
|
||||||
|
# config.window = 4
|
||||||
|
# config.outer_window = 0
|
||||||
|
# config.left = 0
|
||||||
|
# config.right = 0
|
||||||
|
# config.page_method_name = :page
|
||||||
|
# config.param_name = :page
|
||||||
|
# config.max_pages = nil
|
||||||
|
# config.params_on_first_page = false
|
||||||
|
end
|
Loading…
Reference in a new issue