From c7197364d13c649840df49b9519b9701024de2cf Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 23 Mar 2022 16:40:21 +0100
Subject: [PATCH] Add a pagination component that handle pagy

---
 app/components/pagination_component.rb        | 15 ++++
 .../pagination_component.html.haml            | 16 +++++
 .../pagination_component.scss                 | 69 +++++++++++++++++++
 app/webpacker/css/admin/all.scss              |  1 +
 4 files changed, 101 insertions(+)
 create mode 100644 app/components/pagination_component.rb
 create mode 100644 app/components/pagination_component/pagination_component.html.haml
 create mode 100644 app/components/pagination_component/pagination_component.scss

diff --git a/app/components/pagination_component.rb b/app/components/pagination_component.rb
new file mode 100644
index 0000000000..af3664cbc0
--- /dev/null
+++ b/app/components/pagination_component.rb
@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+class PaginationComponent < ViewComponentReflex::Component
+  def initialize(pagy:, data:)
+    super
+    @count = pagy.count
+    @page = pagy.page
+    @per_page = pagy.items
+    @pages = pagy.pages
+    @next = pagy.next
+    @prev = pagy.prev
+    @data = data
+    @series = pagy.series
+  end
+end
diff --git a/app/components/pagination_component/pagination_component.html.haml b/app/components/pagination_component/pagination_component.html.haml
new file mode 100644
index 0000000000..3f3620b2da
--- /dev/null
+++ b/app/components/pagination_component/pagination_component.html.haml
@@ -0,0 +1,16 @@
+= component_controller do
+  %nav{"aria-label": "pagination"}
+    .pagination
+      .pagination-prev{data: @prev.nil? ? nil : @data, "data-page": @prev, class: "#{'inactive' if @prev.nil?}"}
+        Previous
+      .pagination-pages
+        - @series.each do |page|
+          - if page == :gap
+            .pagination-gap
+              …
+          - else
+            .pagination-page{data: @data, "data-page": page, class: "#{'active' if page.to_i == @page}"}
+              = page
+      .pagination-next{data: @next.nil? ? nil : @data, "data-page": @next, class: "#{'inactive' if @next.nil?}"}
+        Next
+
diff --git a/app/components/pagination_component/pagination_component.scss b/app/components/pagination_component/pagination_component.scss
new file mode 100644
index 0000000000..d862ede35f
--- /dev/null
+++ b/app/components/pagination_component/pagination_component.scss
@@ -0,0 +1,69 @@
+nav {
+  .pagination {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    font-size: 14px;
+
+    .pagination-prev, .pagination-next {
+      cursor: pointer;
+
+      &:after, &:before {
+        font-size: 2em;
+        position: relative;
+        top: 3px;
+      }
+
+      &.inactive {
+        cursor: default;
+        color: #999;
+      }
+    }
+
+    .pagination-prev {
+      margin-left: 10px;
+
+      &:before {
+        content: "‹";
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+
+    .pagination-next {
+      margin-right: 10px;
+
+      &:after {
+        content: "›";
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
+
+
+    .pagination-pages {
+      display: flex;
+      align-items: flex-end;
+
+      .pagination-gap, .pagination-page {
+        padding: 0 0.5rem;
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+
+      .pagination-gap {
+        color: #999;
+      }
+
+      .pagination-page {
+        color: #6788A2;
+        cursor: pointer;
+        &.active {
+          border-top: 3px solid #5498DA;
+          color: #5498DA;
+          cursor: default;
+        }
+      }
+    }
+  }
+}
diff --git a/app/webpacker/css/admin/all.scss b/app/webpacker/css/admin/all.scss
index bbc4b6ee73..61cfbd035c 100644
--- a/app/webpacker/css/admin/all.scss
+++ b/app/webpacker/css/admin/all.scss
@@ -124,5 +124,6 @@
 @import "app/components/selector_component/selector_component";
 @import "app/components/products_table_component/products_table_component";
 @import "app/components/super_selector_component/super_selector_component";
+@import "app/components/pagination_component/pagination_component";
 
 @import "v2/main.scss";