component-factory.cljs

(ns training.component-factory
  (:require-macros [re-com.core :refer [handler-fn]])
  (:require [training.utils :as u]
            [re-com.util    :refer [deref-or-value px]]))

;;
;; A row is a {}. Each key of this {} will have a control as its value. Then also have an :id which we are going to
;; make the row number. The control when created will look like []. See my-checkbox below which is the actual control.
;;
(defn gen-table-row [create-control-fn column-keys row]
  (let [col-infos (zipmap column-keys (range))
        create-control-has-row (partial create-control-fn row)
        cols (vals col-infos)
        controls (map create-control-has-row cols)
        col-keys (keys col-infos)
        _ (u/log col-keys)
        keys-with-controls (map vector col-keys controls)
        res-as-coll (conj keys-with-controls [:id row])
        res (into {} res-as-coll)]
    res))

;;
;; Does everything I want and it is centered in the table
;;
(defn my-checkbox [& {:keys [model on-change]}]
  (let [model       (deref-or-value model)
        callback-fn #(on-change)]
    [:input.toggle {:type "checkbox" :checked model
                    :on-change (handler-fn (callback-fn))}]))

(defn my-table
  [table-css-str
   table-columns
   table-rows]
  (let [labels (into {} table-columns)
        col-keys (or (not-empty (map first table-columns))
                     (->> table-rows
                          (mapcat keys)
                          distinct))
        div-body-style {:overflow-y "scroll" :height "178px"}
        row-style {:align "center" :width "50px" :text-align "center" :horizontal-align "center"}
        table-head (fn []
                     (into
                       [:table {:class table-css-str}]
                       [(into
                          [:thead]
                          [(into
                             [:tr]
                             (concat
                               (for [col col-keys]
                                 [:th {:style row-style} (or (labels col) col)])))])]))
        table-body (fn []
                     (into
                       [:table {:class table-css-str}]
                       [(into
                          [:tbody]
                          (for [row table-rows]
                            (into
                              [:tr]
                              (concat
                                (for [col col-keys]
                                  [:td {:style row-style} (row col)])))))]))
        ]
    [:div (table-head) [:div {:style div-body-style} (table-body)]]))
  
;;
;; This is how the above are called so ought to be commented-out. 
;;
(defn trend-selection-table []
  (let [toggle-checkbox (fn [pos]
                          ;(u/log "To toggle" pos)
                          (dispatch [:toggle-selected-combo pos]))
        chkb-model? (fn [pos]
                      (let [res (subscribe [:particular-combo pos])
                            ;_ (u/log "Enquired on chkb-model? for " pos " where res is " @res)
                            ]
                        res))
        columns @(subscribe [:column-display-names])
        columns-with-column-header (into [{:name "Tube"}] columns)
        _ (u/log columns-with-column-header)
        column-keys (map first columns)
        create-chkbox-fn (partial create-chkbox chkb-model? toggle-checkbox)
        row-gen-fn (partial (with-col-header cf/gen-table-row) create-chkbox-fn column-keys)
        rows (map row-gen-fn (range @(subscribe [:tubes-count])))
        ;_ (u/log (first rows))
        ]
    (cf/my-table "my-table table-striped"
           columns-with-column-header
           rows)
    ))