From bea4528879ef6b2346c95b2a4fd254f0160ebf82 Mon Sep 17 00:00:00 2001 From: Jeremy Lecour Date: Thu, 27 Jan 2022 15:36:40 +0100 Subject: [PATCH] =?UTF-8?q?d=C3=A9but=20de=20pagination?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Gemfile | 3 + Gemfile.lock | 18 +++ .../stylesheets/application.tailwind.css | 25 +++++ app/controllers/checks_controller.rb | 4 +- app/views/checks/_check.json.jbuilder | 2 - app/views/checks/_form.html.erb | 32 ------ app/views/checks/edit.html.erb | 8 -- app/views/checks/index.html.erb | 104 +++++++++++------- app/views/checks/index.json.jbuilder | 1 - app/views/checks/new.html.erb | 7 -- app/views/checks/show.json.jbuilder | 1 - app/views/kaminari/_first_page.html.erb | 12 ++ app/views/kaminari/_gap.html.erb | 11 ++ app/views/kaminari/_last_page.html.erb | 12 ++ app/views/kaminari/_next_page.html.erb | 12 ++ app/views/kaminari/_page.html.erb | 10 ++ app/views/kaminari/_paginator.html.erb | 27 +++++ app/views/kaminari/_prev_page.html.erb | 12 ++ config/initializers/kaminari_config.rb | 14 +++ 19 files changed, 226 insertions(+), 89 deletions(-) delete mode 100644 app/views/checks/_check.json.jbuilder delete mode 100644 app/views/checks/_form.html.erb delete mode 100644 app/views/checks/edit.html.erb delete mode 100644 app/views/checks/index.json.jbuilder delete mode 100644 app/views/checks/new.html.erb delete mode 100644 app/views/checks/show.json.jbuilder 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 create mode 100644 config/initializers/kaminari_config.rb diff --git a/Gemfile b/Gemfile index b2342b0..a789554 100644 --- a/Gemfile +++ b/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 ] diff --git a/Gemfile.lock b/Gemfile.lock index de943fb..3b80a40 100644 --- a/Gemfile.lock +++ b/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 diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index 8666d2f..302cae7 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -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; + } +} \ No newline at end of file diff --git a/app/controllers/checks_controller.rb b/app/controllers/checks_controller.rb index 03cf6b4..4ee0a57 100644 --- a/app/controllers/checks_controller.rb +++ b/app/controllers/checks_controller.rb @@ -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 diff --git a/app/views/checks/_check.json.jbuilder b/app/views/checks/_check.json.jbuilder deleted file mode 100644 index e4b0c14..0000000 --- a/app/views/checks/_check.json.jbuilder +++ /dev/null @@ -1,2 +0,0 @@ -json.extract! check, :id, :name, :description, :hostname, :created_at, :updated_at -json.url check_url(check, format: :json) diff --git a/app/views/checks/_form.html.erb b/app/views/checks/_form.html.erb deleted file mode 100644 index 827dc18..0000000 --- a/app/views/checks/_form.html.erb +++ /dev/null @@ -1,32 +0,0 @@ -<%= form_with(model: check, class: "contents") do |form| %> - <% if check.errors.any? %> -
-

<%= pluralize(check.errors.count, "error") %> prohibited this check from being saved:

- - -
- <% end %> - -
- <%= 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" %> -
- -
- <%= 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" %> -
- -
- <%= 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" %> -
- -
- <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %> -
-<% end %> diff --git a/app/views/checks/edit.html.erb b/app/views/checks/edit.html.erb deleted file mode 100644 index acc169d..0000000 --- a/app/views/checks/edit.html.erb +++ /dev/null @@ -1,8 +0,0 @@ -
-

Editing check

- - <%= 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" %> -
diff --git a/app/views/checks/index.html.erb b/app/views/checks/index.html.erb index b77655b..6da1e15 100644 --- a/app/views/checks/index.html.erb +++ b/app/views/checks/index.html.erb @@ -8,44 +8,74 @@
-
- - - - - - - - - - - <% @checks.each do |check| %> - "> - - - - + +
+
- Hostname - - Name - - Description - - Actions -
- <%= check.hostname %> - - <%= check.name %> - - <%= check.description %> - - <%= link_to "Show", check, class: "text-indigo-600 hover:text-indigo-900" %> -
+ + + + + + + - <% end %> - -
+ Hostname + + Name + + Description + + Date + + Actions +
-
+ + + <% @checks.each do |check| %> + "> + + <%= check.hostname %> + + + <%= check.name %> + + + <%= check.description %> + + + <%= check.created_at %> + + + <%= link_to "Show", check, class: "text-indigo-600 hover:text-indigo-900" %> + + + <% end %> + + +
+ + +
+
+ <%= 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" %> +
+ +
+
diff --git a/app/views/checks/index.json.jbuilder b/app/views/checks/index.json.jbuilder deleted file mode 100644 index fb8a917..0000000 --- a/app/views/checks/index.json.jbuilder +++ /dev/null @@ -1 +0,0 @@ -json.array! @checks, partial: "checks/check", as: :check diff --git a/app/views/checks/new.html.erb b/app/views/checks/new.html.erb deleted file mode 100644 index f3b7d9a..0000000 --- a/app/views/checks/new.html.erb +++ /dev/null @@ -1,7 +0,0 @@ -
-

New check

- - <%= 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" %> -
diff --git a/app/views/checks/show.json.jbuilder b/app/views/checks/show.json.jbuilder deleted file mode 100644 index bd47a45..0000000 --- a/app/views/checks/show.json.jbuilder +++ /dev/null @@ -1 +0,0 @@ -json.partial! "checks/check", check: @check diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb new file mode 100644 index 0000000..7cb2a9d --- /dev/null +++ b/app/views/kaminari/_first_page.html.erb @@ -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 %> + <%= t('views.pagination.first').html_safe %> + <%= heroicon "chevron-double-left", variant: :solid, options: { class: "h-5 w-5" } %> +<% end %> diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb new file mode 100644 index 0000000..658dad4 --- /dev/null +++ b/app/views/kaminari/_gap.html.erb @@ -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 +-%> + + + <%= t('views.pagination.truncate').html_safe %> + diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb new file mode 100644 index 0000000..faa6035 --- /dev/null +++ b/app/views/kaminari/_last_page.html.erb @@ -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 %> + <%= t('views.pagination.last').html_safe %> + <%= heroicon "chevron-double-right", variant: :solid, options: { class: "h-5 w-5" } %> +<% end %> diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb new file mode 100644 index 0000000..0846b6a --- /dev/null +++ b/app/views/kaminari/_next_page.html.erb @@ -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 %> + <%= t('views.pagination.next').html_safe %> + <%= heroicon "chevron-right", variant: :solid, options: { class: "h-5 w-5" } %> +<% end %> diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb new file mode 100644 index 0000000..df5abb6 --- /dev/null +++ b/app/views/kaminari/_page.html.erb @@ -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?}"} %> diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb new file mode 100644 index 0000000..2f9d142 --- /dev/null +++ b/app/views/kaminari/_paginator.html.erb @@ -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 -%> +
+ +
+<% 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..1701488 --- /dev/null +++ b/app/views/kaminari/_prev_page.html.erb @@ -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 %> + <%= t('views.pagination.previous').html_safe %> + <%= heroicon "chevron-left", variant: :solid, options: { class: "h-5 w-5" } %> +<% end %> diff --git a/config/initializers/kaminari_config.rb b/config/initializers/kaminari_config.rb new file mode 100644 index 0000000..4ba6ee3 --- /dev/null +++ b/config/initializers/kaminari_config.rb @@ -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