Working on simplified table
This commit is contained in:
Bryce Covert
154
src/cljs/auto_ap/views/components/grid.cljs
Normal file
154
src/cljs/auto_ap/views/components/grid.cljs
Normal file
@@ -0,0 +1,154 @@
|
||||
(ns auto-ap.views.components.grid
|
||||
(:require [reagent.core :as r]))
|
||||
|
||||
(defn toggle-sort-by [params sort-key sort-name]
|
||||
(let [[found? sort] (reduce
|
||||
(fn [[found? sort] sort-item]
|
||||
(if (= sort-key (:sort-key sort-item))
|
||||
[true (conj sort
|
||||
(update sort-item :asc not))]
|
||||
[found? (conj sort sort-item)]))
|
||||
[false []]
|
||||
(:sort params))
|
||||
sort (if found?
|
||||
sort
|
||||
(conj sort {:sort-key sort-key
|
||||
:sort-name sort-name
|
||||
:asc true}))]
|
||||
|
||||
(-> params
|
||||
(assoc :sort sort))))
|
||||
|
||||
(defn sort-icon [which sort]
|
||||
(let [sort-item (first (filter #(= which (:sort-key %)) sort))]
|
||||
(cond
|
||||
(and sort-item (:asc sort-item))
|
||||
[:span.icon
|
||||
[:i.fa.fa-sort-up]]
|
||||
|
||||
(and sort-item (not (:asc sort-item)))
|
||||
[:span.icon
|
||||
[:i.fa.fa-sort-down]]
|
||||
|
||||
:else
|
||||
[:span.icon
|
||||
[:i.fa.fa-sort]])))
|
||||
|
||||
(defn bound [x y z]
|
||||
(cond
|
||||
(< z x)
|
||||
x
|
||||
(< y x)
|
||||
x
|
||||
(> y z)
|
||||
z
|
||||
:else
|
||||
y))
|
||||
|
||||
(defn paginator [{:keys [start end count total on-change]}]
|
||||
(let [per-page 100
|
||||
max-buttons 5
|
||||
buttons-before (Math/floor (/ max-buttons 2))
|
||||
total-pages (Math/ceil (/ total per-page))
|
||||
current-page (Math/floor (/ start per-page))
|
||||
first-page-button (bound 0 (- current-page buttons-before) (- total-pages max-buttons))
|
||||
all-buttons (into [] (for [x (range total-pages)]
|
||||
^{:key x}
|
||||
[:li
|
||||
[:a.pagination-link {:class (when (= current-page x)
|
||||
"is-current")
|
||||
:on-click (fn [e] (on-change {:start (* x per-page)}))}
|
||||
(inc x)]]))
|
||||
|
||||
|
||||
last-page-button (Math/min total-pages (+ max-buttons first-page-button))
|
||||
|
||||
extended-last-page-button (when (not= last-page-button total-pages)
|
||||
(list
|
||||
^ {:key -1} [:li [:span.pagination-ellipsis "…"]]
|
||||
^ {:key -2} (last all-buttons)))
|
||||
|
||||
extended-first-page-button (when (not= first-page-button 0)
|
||||
(list
|
||||
^{:key -1} (first all-buttons)
|
||||
^{:key -2} [:li [:span.pagination-ellipsis "…"]]))]
|
||||
|
||||
|
||||
[:nav.pagination {:role "pagination"}
|
||||
[:ul.pagination-list
|
||||
extended-first-page-button
|
||||
(apply list (subvec all-buttons first-page-button last-page-button))
|
||||
extended-last-page-button
|
||||
"Showing " (Math/min (inc start) total) "-" end "/" total]]))
|
||||
|
||||
(defn sort-by-list [{:keys [sort on-change]}]
|
||||
[:div.field.is-grouped.is-grouped-multiline
|
||||
(for [{:keys [sort-key sort-name asc]} sort]
|
||||
^{:key sort-key}
|
||||
[:div.control
|
||||
[:div.tags.has-addons
|
||||
[:div.tag.is-medium [:span.icon (if asc
|
||||
[:i.fa.fa-sort-up]
|
||||
[:i.fa.fa-sort-down])]
|
||||
[:span sort-name] ]
|
||||
[:a.tag.is-medium.is-delete {:on-click (fn []
|
||||
(on-change {:sort (filter #(not= sort-key (:sort-key %)) sort)}))}]]])])
|
||||
|
||||
(defn grid [{:keys [on-params-change params status column-count]}]
|
||||
{:grid-container (fn grid-container [{:keys [start end count total]}]
|
||||
(into [:div
|
||||
[:div.level
|
||||
[:div.level-left
|
||||
[:div.level-item
|
||||
[paginator {:start start :end end :count count :total total
|
||||
:on-change on-params-change}]]
|
||||
[:div.level-item
|
||||
[sort-by-list {:sort (:sort @params)
|
||||
:on-change on-params-change}]]]]]
|
||||
(r/children (r/current-component))))
|
||||
:table (fn table []
|
||||
(r/create-class {:reagent-render
|
||||
(fn [{:keys [fullwidth]}]
|
||||
(into
|
||||
[:table.table.compact {:class (if fullwidth
|
||||
["is-fullwidth"])}]
|
||||
(r/children (r/current-component))))}))
|
||||
:table-header (fn table-head []
|
||||
(r/create-class {:reagent-render
|
||||
(fn [{:keys []}]
|
||||
(into
|
||||
[:thead]
|
||||
(r/children (r/current-component))))}))
|
||||
:table-header-cell (fn table-header-cell [{:keys [style class]}]
|
||||
(into [:th {:style style
|
||||
:class class}]
|
||||
(r/children (r/current-component))))
|
||||
|
||||
:table-row (fn table-row [{:keys [class]}]
|
||||
(into [:tr {:class class}]
|
||||
(r/children (r/current-component))))
|
||||
:table-cell (fn table-cell [params]
|
||||
(into [:td params]
|
||||
(r/children (r/current-component))))
|
||||
:table-body (fn table-body []
|
||||
(if (:loading @status)
|
||||
[:tbody
|
||||
[:tr
|
||||
[:td {:col-span column-count}
|
||||
[:div.container
|
||||
[:div.columns.is-centered
|
||||
[:div.column.is-narrow
|
||||
[:div.loader.is-loading.is-active.is-table-loader.is-centered]]]]]
|
||||
]]
|
||||
(into [:tbody]
|
||||
(r/children (r/current-component)))))
|
||||
:table-sortable-header-cell (fn table-sortable-header-cell [{:keys [style class sort-key sort-name asc]}]
|
||||
(conj (into
|
||||
[:th {:on-click (fn [e]
|
||||
(on-params-change
|
||||
(toggle-sort-by {:sort (:sort @params)} sort-key sort-name)))
|
||||
:style (assoc style
|
||||
:cursor "pointer")
|
||||
:class class}]
|
||||
(r/children (r/current-component)))
|
||||
(sort-icon sort-key (:sort @params))))})
|
||||
Reference in New Issue
Block a user