Custom compact report layout that puts pagination control into the first row, between the report title and control buttons

compact-report-control.cljc

(ns com.example.ui.custom-report-control
  (:require
    #?@(:cljs
        [[com.fulcrologic.fulcro.dom :as dom :refer [div]]
         [com.fulcrologic.semantic-ui.addons.pagination.ui-pagination :as sui-pagination]]
        :clj
        [[com.fulcrologic.fulcro.dom-server :as dom :refer [div]]])
    [clojure.string :as str]
    [com.fulcrologic.fulcro.components :as comp]
    [com.fulcrologic.fulcro-i18n.i18n :refer [tr trc]]
    [com.fulcrologic.rad.control :as control]
    [com.fulcrologic.rad.options-util :refer [?!]]
    [com.fulcrologic.rad.rendering.semantic-ui.form :as sui-form]
    [com.fulcrologic.rad.report :as report]
    [com.fulcrologic.rad.semantic-ui-options :as suo]))


; copied from com/fulcrologic/fulcro-rad-semantic-ui/1.2.7/fulcro-rad-semantic-ui-1.2.7.jar!/com/fulcrologic/rad/rendering/semantic_ui/report.cljc

(defn paginate
  [report-instance]
  (let [page-count (report/page-count report-instance)]
    (when (> page-count 1)
      (div :.ui.two.column.centered.grid)
      (div :.column
        (div {:style {:paddingTop "4px"}}
          #?(:cljs
             (sui-pagination/ui-pagination {:activePage   (report/current-page report-instance)
                                            :onPageChange (fn [_ data]
                                                            (report/goto-page! report-instance (comp/isoget data "activePage")))
                                            :totalPages   page-count
                                            :boundaryRange 3
                                            :size         "tiny"})))))))

(defn float-right-button
  [report-instance controls controlled? report-action-button-grouping action-layout]
  (div {:className (or (?! report-action-button-grouping report-instance)
                     "ui right floated buttons")}
    (keep (fn [k]
            (let [control (get controls k)]
              (when (and (or (not controlled?) (:local? control))
                      (-> (get control :visible? true)
                        (?! report-instance)))
                (control/render-control report-instance k control))))
      action-layout)))

(comp/defsc CompactReportControls [this {:keys [report-instance] :as env}]
  {:shouldComponentUpdate (fn [_ _ _] true)}
  (let [controls (control/component-controls report-instance)
        {:keys [::report/paginate?]} (comp/component-options report-instance)
        {::suo/keys [report-action-button-grouping]} (suo/get-rendering-options report-instance)
        {:keys [input-layout action-layout]} (control/standard-control-layout report-instance)
        {:com.fulcrologic.rad.container/keys [controlled?]} (comp/get-computed report-instance)]
    (comp/fragment
      (div {:className (or
                         (?! (suo/get-rendering-options report-instance suo/controls-class))
                         ;"ui top attached compact segment"
                         "ui top attached compact")}
        ;(dom/h1 "TEST")
        ; default is 16 wide
        (div :.ui.sixteen.column.grid
          (div :.three.wide.column
            (dom/h3 :.ui.header
              ; title goes here
              (or (some-> report-instance comp/component-options ::report/title (?! report-instance)) (trc "a table that shows a list of rows" "Report"))))
          (div :.ten.wide.column.centered
            (paginate report-instance))
          (div :.three.wide.column
            (float-right-button report-instance controls controlled? report-action-button-grouping action-layout))
          ,)

        #_(dom/h3 :.ui.header
            ; title goes here
            (or (some-> report-instance comp/component-options ::report/title (?! report-instance)) (trc "a table that shows a list of rows" "Report"))
            ; pagination
            (when paginate?
              (let [page-count (report/page-count report-instance)]
                (when (> page-count 1)
                  (div :.ui.two.column.centered.grid
                    (div :.column
                      (div {:style {:paddingTop "4px"}}
                        #?(:cljs
                           (sui-pagination/ui-pagination {:activePage   (report/current-page report-instance)
                                                          :onPageChange (fn [_ data]
                                                                          (report/goto-page! report-instance (comp/isoget data "activePage")))
                                                          :totalPages   page-count
                                                          :size         "tiny"}))))))))
            ; button
            (float-right-button report-instance controls controlled? report-action-button-grouping action-layout)
            #_(div {:className (or (?! report-action-button-grouping report-instance)
                                 "ui right floated buttons")}
                (keep (fn [k]
                        (let [control (get controls k)]
                          (when (and (or (not controlled?) (:local? control))
                                  (-> (get control :visible? true)
                                    (?! report-instance)))
                            (control/render-control report-instance k control))))
                  action-layout)))
        (div :.ui.form
          (map-indexed
            (fn [idx row]
              (div {:key       idx
                    :className (or
                                 (?! (suo/get-rendering-options report-instance suo/report-controls-row-class) report-instance idx)
                                 (sui-form/n-fields-string (count row)))}
                (keep #(let [control (get controls %)]
                         (when (or (not controlled?) (:local? control))
                           (control/render-control report-instance % control))) row)))
            input-layout))
        ;(paginate report-instance)
        #_(when paginate?
            (let [page-count (report/page-count report-instance)]
              (when (> page-count 1)
                (div :.ui.two.column.centered.grid
                  (div :.column
                    (div {:style {:paddingTop "4px"}}
                      #?(:cljs
                         (sui-pagination/ui-pagination {:activePage   (report/current-page report-instance)
                                                        :onPageChange (fn [_ data]
                                                                        (report/goto-page! report-instance (comp/isoget data "activePage")))
                                                        :totalPages   page-count
                                                        :size         "tiny"}))))))))))))


(let [ui-compact-report-controls (comp/factory CompactReportControls)]
  (defn render-compcact-controls [report-instance]
    (ui-compact-report-controls {:report-instance report-instance})))

To use, in your client.cljc file, add this:

(def new-all-controls
  ; this is switched upon at
  ;    [:com.fulcrologic.rad/controls ::control-style->control]
  ;    or :com.fulcrologic.rad.report/control-style->control
  (-> sui/all-controls
      (assoc-in [:com.fulcrologic.rad.report/control-style->control :default]
        sui-report/render-standard-controls)
        ;custom-report/render-compcact-controls)
      (assoc-in [:com.fulcrologic.rad.report/control-style->control :compact]
        custom-report/render-compcact-controls))
        ;sui-report/render-standard-controls))
  ,)

(defn setup-RAD [app]
  ;(rad-app/install-ui-controls! app sui/all-controls)
  (rad-app/install-ui-controls! app new-all-controls)
  (report/install-formatter! app :boolean :affirmation (fn [_ value] (if value "yes" "no"))))

In your RAD report, add this:

   ::report/control-style :compact