views.cljs 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. (ns microtables-frontend.views
  2. (:require
  3. [re-frame.core :as re-frame]
  4. [microtables-frontend.subs :as subs]
  5. [microtables-frontend.events :as events]
  6. [microtables-frontend.utils :as utils]))
  7. ;; TABLE COMPONENTS
  8. (defn cell [c r data]
  9. (let [datum (utils/get-datum data c r)]
  10. ^{:key (str c r)} [:td
  11. [:input {:id (str c r)
  12. :value (if (= (get datum :view nil) :value)
  13. (get datum :value "")
  14. (get datum :error (get datum :display (get datum :value ""))));TODO: add "highlight" display mode (possibly just a css class)
  15. :on-change #(re-frame/dispatch [::events/edit-cell-value c r datum (.. % -target -value)])
  16. :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
  17. ;TODO: add "dirty" value to pass to on-blur (maybe not necessary??)
  18. :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])}]]))
  19. (defn row [r cols data]
  20. ^{:key (str "row-" r)} [:tr
  21. (cons
  22. ^{:key (str "row-head-" r)} [:th (str r)]
  23. (map #(cell % r data) cols))])
  24. (defn header-row [cols]
  25. ^{:key "header"} [:tr
  26. (cons
  27. ^{:key "corner"} [:th]
  28. (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
  29. (defn sheet [data]
  30. [:table [:tbody
  31. (let [maxrow (utils/highest :row data)
  32. cols (take-while (partial not= (utils/next-letter (utils/highest :col data))) utils/col-letters)]
  33. (cons
  34. (header-row cols)
  35. (map #(row % cols data) (range 1 (inc maxrow)))))]])
  36. (defn main-panel []
  37. (let [data (re-frame/subscribe [::subs/table-data])]
  38. [:div
  39. [:h1 "Microtables"]
  40. [sheet @data]]))