100 lines
4.1 KiB
Clojure
100 lines
4.1 KiB
Clojure
(ns auto-ap.ssr.components.data-grid
|
|
(:require
|
|
[auto-ap.ssr-routes :as ssr-routes]
|
|
[auto-ap.ssr.components.card :refer [content-card-]]
|
|
[auto-ap.ssr.components.paginator :refer [paginator-]]
|
|
[bidi.bidi :as bidi]
|
|
[hiccup2.core :as hiccup]))
|
|
|
|
(defn header- [params & rest]
|
|
(into [:th.px-4.py-3 {:scope "col" :class (:class params)
|
|
"_" (hiccup/raw (when (:sort-key params ) (format "on click trigger sorted(key:\"%s\")", (:sort-key params))))}]
|
|
(if (:sort-key params)
|
|
[(into [:a {:href "#"} ] rest)]
|
|
rest)))
|
|
|
|
(defn sort-header- [params & rest]
|
|
[:th.px-4.py-3 {:scope "col" :class (:class params)
|
|
"_" (hiccup/raw (format "on click trigger sorted(key:\"%s\")", (:sort-key params)))}
|
|
(into [:a {:href "#"} ] rest)])
|
|
|
|
(defn row- [params & rest]
|
|
(into [:tr (update params
|
|
:class str " border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700")] rest))
|
|
|
|
(defn cell- [params & rest]
|
|
(into [:td.px-4.py-2 {:class (:class params)}] rest))
|
|
|
|
(defn right-stack-cell- [params & rest]
|
|
(cell- params (into [:div.flex.flex-row-reverse.items-center.justify-between
|
|
rest]))
|
|
)
|
|
|
|
(defn checkbox-header- [params & rest]
|
|
[:th {:scope "col", :class "p-4"}
|
|
[:div {:class "flex items-center"}
|
|
[:input {:id "checkbox-all", :type "checkbox", :class "w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"}]
|
|
[:label {:for "checkbox-all", :class "sr-only"} "checkbox"]]])
|
|
|
|
(defn data-grid- [{:keys [headers thead-params]} & rest]
|
|
[:table {:class "w-full text-sm text-left text-gray-500 dark:text-gray-400"}
|
|
[:thead (assoc thead-params :class "text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400")
|
|
(into
|
|
[:tr]
|
|
headers)]
|
|
(into
|
|
[:tbody]
|
|
rest)])
|
|
|
|
;; needed for tailwind
|
|
;; lg:table-cell md:table-cell
|
|
|
|
(defn data-grid-card- [{:keys [id
|
|
route
|
|
title
|
|
paginate?
|
|
action-buttons
|
|
total
|
|
subtitle
|
|
thead-params
|
|
start
|
|
per-page
|
|
flash-id
|
|
headers
|
|
rows] :as params}]
|
|
[:div {:hx-get (bidi/path-for ssr-routes/only-routes
|
|
route
|
|
:request-method :get)
|
|
:hx-trigger "clientSelected from:body"
|
|
:hx-swap "outerHTML swap:300ms"
|
|
:id id}
|
|
(content-card-
|
|
{}
|
|
[:div {:class "flex flex-col px-4 py-3 space-y-3 lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4 text-gray-800 dark:text-gray-100"}
|
|
[:div
|
|
[:h1.text-2xl.mb-3.font-bold title]
|
|
[:div {:class "flex items-center flex-1 space-x-4"}
|
|
[:h5
|
|
(when subtitle
|
|
[:span subtitle])]]]
|
|
(into [:div {:class "flex flex-col flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"}]
|
|
action-buttons)]
|
|
[:div {:class "overflow-x-auto"}
|
|
(data-grid- {:headers headers
|
|
:thead-params thead-params}
|
|
rows)]
|
|
|
|
(when (or paginate?
|
|
(nil? paginate?))
|
|
(paginator- {:start start
|
|
:end (Math/min (+ start per-page) total)
|
|
: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"})})))])
|