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 "ransack", "~> 2.5.0"
|
||||
gem "kaminari", "~> 1.2.2"
|
||||
|
||||
group :development, :test do
|
||||
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
|
||||
gem "debug", platforms: %i[ mri mingw x64_mingw ]
|
||||
|
|
|
|||
18
Gemfile.lock
18
Gemfile.lock
|
|
@ -107,6 +107,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.13.0)
|
||||
crass (~> 1.0.2)
|
||||
nokogiri (>= 1.5.9)
|
||||
|
|
@ -176,6 +188,10 @@ GEM
|
|||
zeitwerk (~> 2.5)
|
||||
rainbow (3.1.1)
|
||||
rake (13.0.6)
|
||||
ransack (2.5.0)
|
||||
activerecord (>= 5.2.4)
|
||||
activesupport (>= 5.2.4)
|
||||
i18n
|
||||
redis (4.5.1)
|
||||
regexp_parser (2.2.0)
|
||||
reline (0.3.1)
|
||||
|
|
@ -252,9 +268,11 @@ DEPENDENCIES
|
|||
heroicon
|
||||
importmap-rails
|
||||
jbuilder
|
||||
kaminari (~> 1.2.2)
|
||||
puma (~> 5.0)
|
||||
pundit (~> 2.1.1)
|
||||
rails (~> 7.0.0)
|
||||
ransack (~> 2.5.0)
|
||||
redis (~> 4.0)
|
||||
selenium-webdriver
|
||||
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
|
||||
def index
|
||||
@checks = Check.all
|
||||
# @search = Check.ransack(params[:q])
|
||||
# @checks = @search.result
|
||||
@checks = Check.order(:name).page params[:page]
|
||||
end
|
||||
|
||||
# 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="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">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Hostname
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Description
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @checks.each do |check| %>
|
||||
<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>
|
||||
<!-- BEGIN Table -->
|
||||
<div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Hostname
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Name
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Description
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Date
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Actions</span>
|
||||
</th>
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</thead>
|
||||
<tbody>
|
||||
<% @checks.each do |check| %>
|
||||
<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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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 %>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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 %>
|
||||
|
|
@ -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 %>
|
||||
|
|
@ -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?}"} %>
|
||||
|
|
@ -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 -%>
|
||||
|
|
@ -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 %>
|
||||
|
|
@ -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 New Issue