Supports pagination selection
This commit is contained in:
@@ -7,7 +7,9 @@
|
|||||||
[bidi.bidi :as bidi]
|
[bidi.bidi :as bidi]
|
||||||
[hiccup2.core :as hiccup]
|
[hiccup2.core :as hiccup]
|
||||||
[auto-ap.ssr.hx :as hx]
|
[auto-ap.ssr.hx :as hx]
|
||||||
[auto-ap.ssr.components.inputs :as inputs]))
|
[auto-ap.ssr.components.inputs :as inputs]
|
||||||
|
[auto-ap.ssr.hiccup-helper :as hh]
|
||||||
|
[hiccup.util :as hu]))
|
||||||
|
|
||||||
(defn header- [params & rest]
|
(defn header- [params & rest]
|
||||||
(into [:th.px-4.py-3 {:scope "col" :class (:class params)
|
(into [:th.px-4.py-3 {:scope "col" :class (:class params)
|
||||||
@@ -95,13 +97,28 @@
|
|||||||
:per-page per-page
|
:per-page per-page
|
||||||
:total total
|
:total total
|
||||||
:a-params (fn [page]
|
:a-params (fn [page]
|
||||||
{:hx-get (str (bidi/path-for ssr-routes/only-routes
|
;; TODO it might be good to have a more global form defined in the specific page
|
||||||
|
;; with elements that are part of item
|
||||||
|
;; that way this is not deeply coupled
|
||||||
|
;; for example, including filters and pagination is awkward
|
||||||
|
;; TODO the other way to think about this is that we want the request to include
|
||||||
|
;; all of the correct parameters, not parameters to merge with the current ones.
|
||||||
|
;; think sorting, filters, pagination
|
||||||
|
{:hx-get (hu/url (bidi/path-for ssr-routes/only-routes
|
||||||
route
|
route
|
||||||
:request-method :get)
|
:request-method :get)
|
||||||
"?start=" (* page per-page))
|
{:start (* page per-page)})
|
||||||
:hx-target (str "#" id)
|
:hx-target (str "#" id)
|
||||||
:hx-swap "outerHTML show:#app:top"
|
:hx-swap "outerHTML show:#app:top"
|
||||||
:hx-indicator (str "#" id)})}))
|
:hx-indicator (str "#" id)})
|
||||||
|
:per-page-params {:hx-get (hu/url (bidi/path-for ssr-routes/only-routes
|
||||||
|
route
|
||||||
|
:request-method :get))
|
||||||
|
:hx-trigger "change"
|
||||||
|
:hx-include "this"
|
||||||
|
:hx-target (str "#" id) ;
|
||||||
|
:hx-swap "outerHTML show:#app:top"
|
||||||
|
:hx-indicator (str "#" id)}}))
|
||||||
[:div {:class "htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2 overflow-hidden w-full h-full"}
|
[:div {:class "htmx-indicator absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2 overflow-hidden w-full h-full"}
|
||||||
[:div {:class "flex items-center justify-center w-full h-full border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 bg-opacity-50" }
|
[:div {:class "flex items-center justify-center w-full h-full border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700 bg-opacity-50" }
|
||||||
[:div {:class "px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200"} "loading..."]]])])
|
[:div {:class "px-3 py-1 text-xs font-medium leading-none text-center text-blue-800 bg-blue-200 rounded-full animate-pulse dark:bg-blue-900 dark:text-blue-200"} "loading..."]]])])
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
(ns auto-ap.ssr.components.paginator
|
(ns auto-ap.ssr.components.paginator
|
||||||
(:require [auto-ap.ssr.svg :as svg]))
|
(:require [auto-ap.ssr.svg :as svg]
|
||||||
|
[auto-ap.ssr.components.inputs :as inputs]))
|
||||||
|
|
||||||
(defn bound [x y z]
|
(defn bound [x y z]
|
||||||
(cond
|
(cond
|
||||||
@@ -15,8 +16,8 @@
|
|||||||
(def elipsis-button
|
(def elipsis-button
|
||||||
[:p {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"} "..."])
|
[:p {:href "#", :class "flex items-center justify-center px-3 py-2 text-sm leading-tight text-gray-500 bg-white border border-gray-300 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400"} "..."])
|
||||||
|
|
||||||
(defn paginator-internal- [{:keys [start per-page end total a-params]}]
|
(defn paginator-internal- [{:keys [start per-page end total a-params per-page-params]}]
|
||||||
(let [per-page (or per-page 20)
|
(let [per-page (or per-page 25)
|
||||||
max-buttons 5
|
max-buttons 5
|
||||||
buttons-before (Math/floor (/ max-buttons 2))
|
buttons-before (Math/floor (/ max-buttons 2))
|
||||||
total-pages (long (Math/max (long 1) (long (Math/ceil (/ total per-page)))))
|
total-pages (long (Math/max (long 1) (long (Math/ceil (/ total per-page)))))
|
||||||
@@ -52,7 +53,15 @@
|
|||||||
(list
|
(list
|
||||||
(first all-buttons)
|
(first all-buttons)
|
||||||
elipsis-button))]
|
elipsis-button))]
|
||||||
[:nav
|
[:nav.flex.items-center.space-x-3
|
||||||
|
[:span.text-sm.text-gray-500 "Per page"]
|
||||||
|
(inputs/select- (merge per-page-params
|
||||||
|
{:options [[25 "25"]
|
||||||
|
[50 "50"]
|
||||||
|
[100 "100"]
|
||||||
|
[200 "200"]]
|
||||||
|
:value per-page
|
||||||
|
:name "per-page"}))
|
||||||
[:ul {:class "inline-flex items-stretch -space-x-px"}
|
[:ul {:class "inline-flex items-stretch -space-x-px"}
|
||||||
extended-first-page-button
|
extended-first-page-button
|
||||||
(apply list (subvec all-buttons first-page-button last-page-button))
|
(apply list (subvec all-buttons first-page-button last-page-button))
|
||||||
|
|||||||
@@ -73,7 +73,7 @@
|
|||||||
|
|
||||||
(defn table* [grid-spec user {{:keys [start per-page flash-id sort]} :parsed-query-params :as request}]
|
(defn table* [grid-spec user {{:keys [start per-page flash-id sort]} :parsed-query-params :as request}]
|
||||||
(let [start (or start 0)
|
(let [start (or start 0)
|
||||||
per-page (or per-page 30)
|
per-page (or per-page 25)
|
||||||
[entities total] ((:fetch-page grid-spec)
|
[entities total] ((:fetch-page grid-spec)
|
||||||
request)]
|
request)]
|
||||||
|
|
||||||
|
|||||||
@@ -38,7 +38,8 @@
|
|||||||
[clojure.string :as str]
|
[clojure.string :as str]
|
||||||
[config.core :refer [env]]
|
[config.core :refer [env]]
|
||||||
[datomic.api :as dc]
|
[datomic.api :as dc]
|
||||||
[malli.core :as mc]))
|
[malli.core :as mc]
|
||||||
|
[auto-ap.logging :as alog]))
|
||||||
|
|
||||||
(defn filters [request]
|
(defn filters [request]
|
||||||
[:form {"hx-trigger" "change delay:500ms, keyup changed from:.hot-filter delay:1000ms"
|
[:form {"hx-trigger" "change delay:500ms, keyup changed from:.hot-filter delay:1000ms"
|
||||||
|
|||||||
Reference in New Issue
Block a user