Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (ns app.ui
- (:require [om.next :as om :refer-macros [defui]]
- [untangled.client.mutations :as mut]
- [untangled.client.core :as uc]
- [om.dom :as dom]
- [om.next :as om :refer-macros [defui]]))
- (def example-state
- {:workers/by-id
- {1
- {:worker/id 1,
- :worker/first-name "Teja",
- :worker/last-name "Metrovsek",
- :worker/nick-name "TejaM"},
- 2
- {:worker/id 2,
- :worker/first-name "Timotej",
- :worker/last-name "Zgolec",
- :worker/nick-name "TimotejZ"},
- 3
- {:worker/id 3,
- :worker/first-name "Rok",
- :worker/last-name "Stroven",
- :worker/nick-name "RokS"},
- 4
- {:worker/id 4,
- :worker/first-name "Anja",
- :worker/last-name "Maston",
- :worker/nick-name "AnjaM"},
- 5
- {:worker/id 5,
- :worker/first-name "Zoja",
- :worker/last-name "Kolovin",
- :worker/nick-name "ZojaK"}},
- :workers/table
- {:workers
- [[:workers/by-id 1]
- [:workers/by-id 2]
- [:workers/by-id 3]
- [:workers/by-id 4]
- [:workers/by-id 5]]},
- :ui/locale "en-US"})
- (defui ^:once WorkerRow
- static om/IQuery
- ;(query [this] [:worker/id :worker/first-name :worker/last-name :worker/nick-name])
- (query [this] '[:worker/id :worker/first-name :worker/last-name :worker/nick-name])
- static om/Ident
- (ident [_ props] [:workers/by-id (:worker/id props)])
- Object
- (render [this]
- (let [{:keys [worker/id worker/first-name worker/last-name worker/nick-name]} (om/props this)]
- (dom/tr nil
- (dom/td nil id)
- (dom/td nil first-name)
- (dom/td nil last-name)
- (dom/td nil nick-name)))))
- (def ui-worker-row (om/factory WorkerRow {:keyfn :worker/id}))
- (defui ^:once WorkersTable
- static om/IQuery
- (query [this] `[{:workers ~(om/get-query WorkerRow)}])
- static om/Ident
- (ident [this params] [:workers/table])
- Object
- (render [this]
- (let [{:keys [workers]} (om/props this)]
- (dom/div nil
- (dom/table nil
- (dom/thead nil
- (dom/tr nil
- (dom/th nil "First name")
- (dom/th nil "Last name")
- (dom/th nil "Nick name")))
- (dom/tbody nil
- (map ui-worker-row workers)))))))
- (def ui-worker-table (om/factory WorkersTable))
- ;{:workers/table [{:workers [:worker/id :worker/first-name :worker/last-name :worker/nick-name]}]}
- ;; A UI node, with a co-located query of app state and a definition of the application's initial state.
- ;; The `:once` metadata ensures that figwheel does not redefine the static component with each re-render
- (defui ^:once Root
- ;static uc/InitialAppState
- ;(initial-state [clz params] {:list (uc/initial-state MyList {})})
- static om/IQuery
- (query [this] `[:ui/react-key {:workers/table ~(om/get-query WorkersTable)}])
- Object
- (render [this]
- (let [{:keys [ui/react-key] table-workers :workers/table} (om/props this)]
- (println (:workers/table (om/props this)))
- (dom/div #js {:key react-key}
- (dom/h4 nil "Header")
- (ui-worker-table table-workers)))))
- (defonce app (atom (uc/new-untangled-client :initial-state example-state)))
- (swap! app uc/mount Root "app")
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement