notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Supports pagination selection

Browse Source
This commit is contained in:
Bryce
2023-11-01 08:50:30 -07:00
parent 8c0307ff73
commit 31dc514cdd
4 changed files with 41 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/clj/auto_ap/ssr/components/data_grid.clj
View File

@@ -7,7 +7,9 @@
[bidi.bidi :as bidi]
[hiccup2.core :as hiccup]
[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]
(into [:th.px-4.py-3 {:scope "col" :class (:class params)
@@ -95,13 +97,28 @@
:per-page per-page
:total total
:a-params (fn [page]
{:hx-get (str (bidi/path-for ssr-routes/only-routes
route
:request-method :get)
"?start=" (* page per-page))
:hx-target (str "#" id)
:hx-swap "outerHTML show:#app:top"
:hx-indicator (str "#" id)})}))
;; 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
:request-method :get)
{:start (* page per-page)})
:hx-target (str "#" id)
:hx-swap "outerHTML show:#app:top"
: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 "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..."]]])])