ui.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]))

(defn- menu-link-tab-item-dom [this {:keys [id label icon tabkey] :as args}]
  (dom/li #js {:key label}
          (dom/a (clj->js (merge {:href "#"}
                                 (when tabkey {:onClick (switch-tab-fn this tabkey)})))
                 (when icon (dom/i #js {:className (str "fa fa-fw " icon)}))
                 (str (when icon " ") label))))

(defui ^:once MenuItem
  Object
  (render [this]
    (let [{:keys [id label icon tabkey] :as spec} (om/get-props this)]
      (menu-link-tab-item-dom this spec))))

(def menu-item-factory (om/factory MenuItem {:keyfn :id}))

(def menu-spec [{:id :dashboard :label "Dashboard" :icon "fa-dashboard" :tabkey :dashboard-tab :enabled true}
                {:id :sources :label "Sources" :icon "fa-file-text-o" :tabkey :sources-tab :enabled true}
                {:id :import :label "Import" :icon "fa-upload" :tabkey :import-tab :enabled true}
                {:id :settings :label "Settings" :icon "fa-gear" :tabkey :settings-tab :enabled true}])

(defui ^:once NavSidebar
  Object
  (componentDidMount [this] (om/set-state! this {:data-menu-open false}))
  (render [this]
    (dom/div #js {:className "navbar-default sidebar"}
             (dom/div #js {:className "sidebar-nav navbar-collapse"}
                      (dom/ul #js {:className "nav in"}
                              (map menu-item-f menu-spec))
                      ))))

(def nav-sidebar (om/factory NavSidebar))

(defui ^:once TopBar
  static om/IQuery
  (query [this] ['[:ui/loading-data _] '[:app-info _] {:nav-sidebar (om/get-query NavSidebar)}])
  Object
  (render [this]
    (let [{:keys [app-info ui/loading-data]} (om/props this)]
      (dom/div #js {:className "nav navbar-default navbar-static-top"}
               (nav-sidebar)))))

(def top-bar (om/factory TopBar))

(defui ^:once Root
  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"}
               (top-bar topbar)
               (ui-switcher tabs)
               ))))