diff --git a/app/reflexes/admin/products_v3_reflex.rb b/app/reflexes/admin/products_v3_reflex.rb index 0e36ae2762..0bfc63431a 100644 --- a/app/reflexes/admin/products_v3_reflex.rb +++ b/app/reflexes/admin/products_v3_reflex.rb @@ -2,12 +2,15 @@ module Admin class ProductsV3Reflex < ApplicationReflex - before_reflex :fetch_products, only: [:fetch] + include Pagy::Backend def fetch + fetch_products(element.dataset.page || 1) + cable_ready.replace( selector: "#products-content", - html: render(partial: "admin/products_v3/content", locals: { products: @products }) + html: render(partial: "admin/products_v3/content", + locals: { products: @products, pagy: @pagy }) ).broadcast morph :nothing @@ -16,10 +19,10 @@ module Admin private # copied from ProductsTableComponent - def fetch_products + def fetch_products(page) product_query = OpenFoodNetwork::Permissions.new(current_user) .editable_products.merge(product_scope) - @products = product_query.order(:name).limit(50) + @pagy, @products = pagy(product_query.order(:name), items: 15, page:) end def product_scope diff --git a/app/views/admin/products_v3/_content.html.haml b/app/views/admin/products_v3/_content.html.haml index 2c076973c6..8ac13d94eb 100644 --- a/app/views/admin/products_v3/_content.html.haml +++ b/app/views/admin/products_v3/_content.html.haml @@ -1,10 +1,15 @@ -- if products.any? - = render partial: 'table', locals: { products: products } -- else - #no-products - = t('.no_products_found') - #no-products-actions - %a{ href: "/admin/products/new", class: "button icon-plus", icon: "icon-plus" } - = t(:new_product) - %a{ href: "/admin/products/import", class: "button icon-upload secondary", icon: "icon-upload" } - = t(".import_products") +#products-content + - if products.any? + .container + .sixteen.columns + = render partial: 'sort', locals: { pagy: pagy } + = render partial: 'table', locals: { products: products } + = render partial: 'admin/shared/v3/pagy', locals: { pagy: pagy, reflex: "click->Admin::ProductsV3#fetch" } + - else + #no-products + = t('.no_products_found') + #no-products-actions + %a{ href: "/admin/products/new", class: "button icon-plus", icon: "icon-plus" } + = t(:new_product) + %a{ href: "/admin/products/import", class: "button icon-upload secondary", icon: "icon-upload" } + = t(".import_products") diff --git a/app/views/admin/products_v3/_sort.html.haml b/app/views/admin/products_v3/_sort.html.haml new file mode 100644 index 0000000000..607d99596b --- /dev/null +++ b/app/views/admin/products_v3/_sort.html.haml @@ -0,0 +1,2 @@ +#sort + = t(".pagination.total_html", total: pagy.count, from: pagy.from, to: pagy.to) diff --git a/app/views/admin/shared/v3/_pagy.html.haml b/app/views/admin/shared/v3/_pagy.html.haml new file mode 100644 index 0000000000..016b1c2f2f --- /dev/null +++ b/app/views/admin/shared/v3/_pagy.html.haml @@ -0,0 +1,21 @@ +%nav.pagy_nav.pagination{"aria-label" => "pager", :role => "navigation"} + - if pagy.prev + %a.page.previous{ href: "#", "data-reflex": reflex, "data-page": pagy.prev || 1, "aria-label": "previous"} + %i.icon-chevron-left + - else + %span.page.prev.disabled + %i.icon-chevron-left + - pagy.series.each do |item| # series example: [1, :gap, 7, 8, "9", 10, 11, :gap, 36] + - if item.is_a?(Integer) # page link + %a.page{ href: "#", "data-reflex": reflex, "data-page": item, "aria-label": "page #{item}"} + = item + - elsif item.is_a?(String) # current page + %span.page.current= item + - elsif item == :gap # page gap + %span.page.gap … + - if pagy.next + %a.page.next{ href: "#", "data-reflex": reflex, "data-page": pagy.next || pagy.last, "aria-label": "next"} + %i.icon-chevron-right + - else + %span.page.next.disabled + %i.icon-chevron-right diff --git a/app/webpacker/css/admin/products_v3.scss b/app/webpacker/css/admin/products_v3.scss index 7050cd9983..2b19cfd506 100644 --- a/app/webpacker/css/admin/products_v3.scss +++ b/app/webpacker/css/admin/products_v3.scss @@ -78,4 +78,8 @@ gap: 20px; } } + + #sort { + margin-bottom: 1em; + } } diff --git a/app/webpacker/css/admin_v3/all.scss b/app/webpacker/css/admin_v3/all.scss index 2a56c8a6cc..0655e5773b 100644 --- a/app/webpacker/css/admin_v3/all.scss +++ b/app/webpacker/css/admin_v3/all.scss @@ -22,6 +22,7 @@ @import "globals/variables"; // admin_v3 @import "../admin/variables"; @import "../admin/globals/mixins"; +@import "mixins"; // admin_v3 @import "../admin/plugins/font-awesome"; diff --git a/app/webpacker/css/admin_v3/components/navigation.scss b/app/webpacker/css/admin_v3/components/navigation.scss index 01054103af..6b5a2518ae 100644 --- a/app/webpacker/css/admin_v3/components/navigation.scss +++ b/app/webpacker/css/admin_v3/components/navigation.scss @@ -61,7 +61,7 @@ nav.menu { } #admin-menu { - box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07); + @include defaultBoxShadow; li { .dropdown { diff --git a/app/webpacker/css/admin_v3/components/pagination.scss b/app/webpacker/css/admin_v3/components/pagination.scss index dc269c4227..53167e9996 100644 --- a/app/webpacker/css/admin_v3/components/pagination.scss +++ b/app/webpacker/css/admin_v3/components/pagination.scss @@ -1,21 +1,37 @@ .pagination { text-align: center; - margin: 2em 0 1em; + margin: 0 0 1em; padding: 10px 0; - background-color: $light-grey; + background-color: $color-7; .page { - padding: 5px 8px; + width: 40px; + line-height: 40px; text-align: center; display: inline-block; text-align: center; + background-color: $color-1; + @include defaultBoxShadow; + border-radius: 4px; + color: $color-9; &.current { - background-color: $green; - border-radius: 3px; + background-color: $color-5; color: $white; } + + &.prev { + margin-right: 20px; + } + + &.next { + margin-left: 20px; + } + + &.disabled { + cursor: default; + } } button { diff --git a/app/webpacker/css/admin_v3/mixins.scss b/app/webpacker/css/admin_v3/mixins.scss new file mode 100644 index 0000000000..76f01458be --- /dev/null +++ b/app/webpacker/css/admin_v3/mixins.scss @@ -0,0 +1,3 @@ +@mixin defaultBoxShadow { + box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px rgba(0, 0, 0, 0.07); +} diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss index 4b493c8acb..0611bd80da 100644 --- a/app/webpacker/css/admin_v3/shared/tables.scss +++ b/app/webpacker/css/admin_v3/shared/tables.scss @@ -205,3 +205,7 @@ table { } } } + +table + .pagination { + margin-top: -18px; +} diff --git a/config/locales/en.yml b/config/locales/en.yml index 5eda42785d..30a073dcdf 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -767,6 +767,9 @@ en: header: title: Bulk Edit Products loading: Loading your products + sort: + pagination: + total_html: "%{total} products in your catalogue. Showing %{from} to %{to}." content: no_products_found: No products found import_products: Import multiple products