views.cljs 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  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 (get-in 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 (.. % -target -value)])
  16. :on-focus #(re-frame/dispatch [::events/movement-enter-cell c r])
  17. :on-blur #(re-frame/dispatch [::events/movement-leave-cell c r])
  18. :on-keyPress #(when (= (.. % -which) 13)
  19. (re-frame/dispatch [::events/press-enter-in-cell c r]))}]]))
  20. (defn row [r cols data]
  21. ^{:key (str "row-" r)} [:tr
  22. (cons
  23. ^{:key (str "row-head-" r)} [:th (str r)]
  24. (map #(cell % r data) cols))])
  25. (defn header-row [cols]
  26. ^{:key "header"} [:tr
  27. (cons
  28. ^{:key "corner"} [:th]
  29. (map (fn [c] ^{:key (str "col-head-" c)} [:th c]) cols))])
  30. (defn sheet [data]
  31. [:table [:tbody
  32. (let [maxrow (utils/highest-row data)
  33. cols (take-while (partial not= (utils/next-letter (utils/highest-col data))) utils/col-letters)]
  34. (cons
  35. (header-row cols)
  36. (map #(row % cols data) (range 1 (inc maxrow)))))]])
  37. (defn main-panel []
  38. (let [data (re-frame/subscribe [::subs/table-data])]
  39. [:div
  40. [:h1 "Microtables"]
  41. [sheet @data]]))