Toying with components with Om

gistfile1.clj

(ns app.crud
  (:require 
    [om.core :as om :include-macros true]
    [om.dom :as dom :include-macros true]
    [ajax.core :refer [GET]]   
    [app.utils :refer [e-value]]))


(defn js-margin-right []
  #js {:margin-right "10px"})

(defn input-pesquisa [cur owner]
  (reify
    om/IInitState
    (init-state [_])
    om/IRender
    (render [_]
      (dom/div #js {:className "form-group"
                    :style (js-margin-right)}
        (dom/input #js {:type "text"
                        :className "form-control"
                        :style #js {:width "20em"}
                        :placeholder "Digite a pesquisa e pressione enter"})
                    )
      )
    ))

(defn botoes-navegacao [cur owner]
  (reify
    om/IInitState
    (init-state [_]
      )
    om/IRender
    (render [_]
      (dom/div #js {:className "form-group btn-group"
                    :style (js-margin-right)}
        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-backward"}))

        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-chevron-left"}))

        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-chevron-right"}))))))


(defn botoes-edicao [cur owner]
  (reify
    om/IInitState
    (init-state [_]
      )
    om/IRender
    (render [_]
      (dom/div #js {:className "form-group btn-group"
                    :style (js-margin-right)}
        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-plus"}))

        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-ok"}))

        (dom/button #js {:className "btn btn-default"
                         :style (js-margin-right)}
          (dom/span #js {:className "fa fa-undo"}))

        (dom/button #js {:className "btn btn-default"}
          (dom/span #js {:className "glyphicon glyphicon-trash"}))
               ))))

 
(defn tabela-simples [{:keys [lista] :as cur} 
                      owner 
                      {:keys [uri id-fn nome-fn nome-label]}]
  (let [id-fn (if (nil? id-fn) :id id-fn)
        nome-fn (if (nil? nome-fn) :nome nome-fn) 
        nome-label (if (nil? nome-label) "Nome" nome-label)]
   (reify
    om/IInitState
    (init-state [_]
      {:lista lista})
    om/IDidMount
    (did-mount [_ _]
      (GET uri
        {:handler 
          (fn [r]
           (om/transact! cur #(assoc % :lista r)))}))
    om/IRender
    (render [_]
      (dom/table #js {:className "table table-hover"}
        (dom/thead nil
          (dom/tr nil
            (dom/th nil nome-label)))

        (dom/tbody nil
          (om/build-all 
            (fn [registro]
              (let [nome (nome-fn registro)]
                (om/component
                  (dom/tr nil
                    (dom/td nil nome)))))
            lista)))))))

(defn teste [cur owner]
  (om/component
    (dom/div nil 
      (dom/form #js {:className "form-inline"
                     :role "form"}
        (dom/div #js {:className "row"}
          (om/build botoes-navegacao cur )
          (om/build input-pesquisa cur)
          (om/build botoes-edicao cur )))

      (dom/div #js {:className "row"}
        (dom/div #js {:className "col-md-4"}
          (om/build tabela-simples cur {:opts {:uri "/empresa"
                                               :nome-label "Empresa"}}))))))