tabs.cljs

(ns ratatosk-client.ui
  (:require [om.next :as om :refer-macros [defui]]
            [untangled.client.mutations :as mut]
            [om.dom :as dom]
            [untangled.client.core :as uc]))

(defui ^:once Main
  static uc/InitialAppState
  (initial-state [clz params] {:id 1 :type :dashboard-tab :extra {:foo :bar}})
  static om/IQuery
  (query [this] [:id :type :extra])
  Object
  (render [this]
    (dom/h2 nil "DASHBOARD PANEL")))

(def ui-dashboard (om/factory Main {:keyfn :id}))

(defui ^:once Settings
  static uc/InitialAppState
  (initial-state [clz params] {:id 1 :type :settings-tab :args {:a 1}})
  static om/IQuery
  (query [this] [:id :type :args])
  Object
  (render [this]
    (let [{:keys [extra]} (om/props this)]
      (dom/h2 nil "SETTINGS PANEL"))))

(def ui-settings (om/factory Settings {:keyfn :id}))

(defui Switcher
  static uc/InitialAppState
  (initial-state [clz params] (uc/initial-state Main {}))
  static om/IQuery
  (query [this] {:dashboard-tab (om/get-query Main)
                 :settings-tab  (om/get-query Settings)})
  static om/Ident
  (ident [this {:keys [type id]}] [type id])
  Object
  (render [this]
    (let [{:keys [type] :as props} (om/props this)]
      (untangled.client.logging/debug "type:" type)
      (dom/div #js {:id "page-wrapper" :style {:min-height "351px"}}
               (dom/div #js {:className "row"}
                        (dom/div #js {:className "col-lg-12"}
                                 ;; these buttons don't - they change app-state but don't trigger a re-render of Switcher.
                                 (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :dashboard-tab})])} "Dashboard")
                                 (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :settings-tab})])} "Settings")
                                 (case type
                                   :dashboard-tab (ui-dashboard props)
                                   :settings-tab (ui-settings props)
                                   (dom/h1 nil "NO PANEL"))))))
    ))

(def ui-switcher (om/factory Switcher))

(defui ^:once Root
  static uc/InitialAppState
  (initial-state [clz params] {:ui/react-key "ROOT"
                               :ui/app-version "2016.04"
                               :topbar (uc/initial-state TopBar {})
                               :tabs (uc/initial-state Switcher {})})
  static om/IQuery
  (query [this] [:ui/react-key :ui/loading-data :ui/app-version
                 {:topbar (om/get-query TopBar)}
                 {:tabs (om/get-query Switcher)}])
  Object
  (render [this]
    (let [{:keys [ui/react-key ui/loading-data ui/app-version topbar tabs]} (om/props this)]
      (dom/div #js {:key (or react-key "ROOT") :id "wrapper"}
               ;; these buttons work
               (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :dashboard-tab})])} "Dashboard")
               (dom/button #js {:onClick #(om/transact! this '[(app/choose-tab {:tab :settings-tab})])} "Settings")
               (ui-switcher tabs)
               ))))