From e65fabf60ebf313bc1c690bc72b50681d272474c Mon Sep 17 00:00:00 2001 From: kagel Date: Wed, 28 Sep 2016 04:12:33 +0300 Subject: [PATCH] Pagination --- src/cljs/commiteth/db.cljs | 17 +++++--- src/cljs/commiteth/handlers.cljs | 20 +++++++-- src/cljs/commiteth/issues.cljs | 62 +++++++++++++++++++-------- src/cljs/commiteth/subscriptions.cljs | 5 +++ 4 files changed, 77 insertions(+), 27 deletions(-) diff --git a/src/cljs/commiteth/db.cljs b/src/cljs/commiteth/db.cljs index 18ac43a..cbb5196 100644 --- a/src/cljs/commiteth/db.cljs +++ b/src/cljs/commiteth/db.cljs @@ -1,10 +1,13 @@ (ns commiteth.db) (def default-db - {:page :issues - :user nil - :user-profile nil - :repos [] - :enabled-repos {} - :all-bounties [] - :owner-bounties []}) + {:page :issues + :user nil + :user-profile nil + :repos [] + :enabled-repos {} + :all-bounties [] + :owner-bounties [] + :pagination {} + :pagination-props {:page-size 10 + :pages-max 10}}) diff --git a/src/cljs/commiteth/handlers.cljs b/src/cljs/commiteth/handlers.cljs index 7319ffb..09cb316 100644 --- a/src/cljs/commiteth/handlers.cljs +++ b/src/cljs/commiteth/handlers.cljs @@ -26,6 +26,19 @@ (fn [db [_ page]] (assoc db :page page))) +(reg-event-db + :set-page + (fn [db [_ table page]] + (assoc-in db [:pagination table :page] page))) + +(reg-event-db + :init-pagination + (fn [db [_ bounties]] + (let [{page-size :page-size} (:pagination-props db)] + (assoc-in db [:pagination :all-bounties] + {:page 0 + :pages (Math/ceil (/ (count bounties) page-size))})))) + (reg-event-fx :set-active-user (fn [{:keys [db]} [_ user]] @@ -43,10 +56,11 @@ :url "/api/bounties" :on-success #(dispatch [:set-bounties %])}})) -(reg-event-db +(reg-event-fx :set-bounties - (fn [db [_ bounties]] - (assoc db :all-bounties bounties))) + (fn [{:keys [db]} [_ bounties]] + {:db (assoc db :all-bounties bounties) + :dispatch [:init-pagination bounties]})) (reg-event-fx :load-owner-bounties diff --git a/src/cljs/commiteth/issues.cljs b/src/cljs/commiteth/issues.cljs index 4968acf..64fa69b 100644 --- a/src/cljs/commiteth/issues.cljs +++ b/src/cljs/commiteth/issues.cljs @@ -2,20 +2,43 @@ (:require [reagent.core :as r] [re-frame.core :as rf])) -(defn pagination [] +(defn- page-btn + [table selected-page current-page] + ^{:key current-page} + [:a {:class (when (= selected-page current-page) "current") + :on-click #(rf/dispatch [:set-page table current-page])} + (str (inc current-page))]) + +(defn pagination [table] (fn [] - [:div.paginate-container - [:div.pagination - [:span.previous-page.disabled "Previous"] - [:em.current "1"] - [:a {:rel "next", :href "#"} "2"] - [:a {:href "#"} "3"] - [:a {:href "#"} "4"] - [:a {:href "#"} "5"] - [:span.gap "…"] - [:a {:href "#"} "10"] - [:a {:href "#"} "11"] - [:a.next-page {:rel "next", :href "#"} "Next"]]])) + (let [{page :page + pages :pages} @(rf/subscribe [:pagination table]) + {pages-max :pages-max} @(rf/subscribe [:get-in [:pagination-props]])] + (when (> pages 1) + (let [last-page (dec pages) + start-page (max 1 (min (- pages pages-max) (max 1 (- page (quot pages-max 2))))) + end-page (min (dec pages) (+ pages-max start-page)) + gap-left (> start-page 1) + gap-right (< end-page last-page)] + [:div.paginate-container + [:div.pagination + [:span.previous-page + (let [disabled (= page 0)] + {:class (when disabled "disabled") + :on-click (when-not disabled + #(rf/dispatch [:set-page table (dec page)]))}) + "Previous"] + (page-btn table page 0) + (when gap-left [:span.gap "…"]) + (map #(page-btn table page %) (range start-page end-page)) + (when gap-right [:span.gap "…"]) + (page-btn table page last-page) + [:span.next-page + (let [disabled (= page last-page)] + {:class (when disabled "disabled") + :on-click (when-not disabled + #(rf/dispatch [:set-page table (inc page)]))}) + "Next"]]]))))) (defn repo-link [owner repo] @@ -63,14 +86,19 @@ (defn issues-list-table [issues-path issue-row-fn] - (let [issues (rf/subscribe issues-path)] - (fn [] + (fn [] + (let [{page :page} @(rf/subscribe (into [:pagination] issues-path)) + {page-size :page-size} @(rf/subscribe [:get-in [:pagination-props]]) + issues (rf/subscribe issues-path) + issues-page (->> @issues + (drop (* page page-size)) + (take page-size))] [:div.issues-list-table [:ul.issues-list - (map issue-row-fn @issues)]]))) + (map issue-row-fn issues-page)]]))) (defn issues-page [] (fn [] [:div.container [(issues-list-table [:all-bounties] issue-row)] - [pagination]])) + [(pagination :all-bounties)]])) diff --git a/src/cljs/commiteth/subscriptions.cljs b/src/cljs/commiteth/subscriptions.cljs index b6b5601..e42c3b5 100644 --- a/src/cljs/commiteth/subscriptions.cljs +++ b/src/cljs/commiteth/subscriptions.cljs @@ -26,6 +26,11 @@ (fn [db _] (:owner-bounties db))) +(reg-sub + :pagination + (fn [db [_ table]] + (get-in db [:pagination table]))) + (reg-sub :get-in (fn [db [_ path]]