ALmost done on UI improvements.
This commit is contained in:
@@ -3,44 +3,53 @@
|
||||
[auto-ap.events :as events]
|
||||
[auto-ap.routes :as routes]
|
||||
[auto-ap.subs :as subs]
|
||||
[auto-ap.views.components.dropdown :refer [drop-down drop-down-contents]]
|
||||
[auto-ap.views.components.modal :as modal]
|
||||
[auto-ap.views.components.vendor-dialog :as vendor-dialog]
|
||||
[auto-ap.views.utils
|
||||
:refer [active-when appearing bind-field dispatch-event dispatch-event-with-propagation login-url]]
|
||||
:refer [active-when
|
||||
appearing
|
||||
dispatch-event-with-propagation
|
||||
login-url]]
|
||||
[bidi.bidi :as bidi]
|
||||
[clojure.string :as str]
|
||||
[re-frame.core :as re-frame]
|
||||
[reagent.core :as r]))
|
||||
[reagent.core :as r]
|
||||
[auto-ap.forms.builder :as form-builder]
|
||||
[vimsical.re-frame.cofx.inject :as inject]
|
||||
[auto-ap.forms :as forms]))
|
||||
|
||||
(defn navbar-drop-down-contents [{:keys [id]} children ]
|
||||
(let [toggle-fn (fn [] (re-frame/dispatch [::events/toggle-menu id]))]
|
||||
(r/create-class {:component-did-mount (fn [] (.addEventListener js/document "click" toggle-fn))
|
||||
:component-will-unmount (fn [] (.removeEventListener js/document "click" toggle-fn))
|
||||
:reagent-render
|
||||
(fn [children]
|
||||
children)})))
|
||||
|
||||
(defn navbar-drop-down [{:keys [ header id class]} child]
|
||||
(r/create-class
|
||||
{:reagent-render (fn [{:keys [header id]} child]
|
||||
(let [menu-active? @(re-frame/subscribe [::subs/menu-active? id])]
|
||||
[:div { :class (str "navbar-item has-dropdown " (when menu-active? "is-active " ) " " class)}
|
||||
[:a {:class "navbar-link login" :on-click (fn [e]
|
||||
(.preventDefault e)
|
||||
(.stopPropagation e)
|
||||
(re-frame/dispatch [::events/toggle-menu id])
|
||||
true)} header]
|
||||
[appearing {:visible? menu-active? :enter-class "appear" :exit-class "disappear" :timeout 200}
|
||||
[:div {:class "navbar-dropdown"}
|
||||
[navbar-drop-down-contents {:id id}
|
||||
[:div child]]]]]))}))
|
||||
(defn navbar-drop-down [{:keys [ class]} _]
|
||||
(let [!child (r/atom nil)]
|
||||
(r/create-class
|
||||
{:reagent-render (fn [{:keys [header id]} child]
|
||||
(let [menu-active? @(re-frame/subscribe [::subs/menu-active? id])]
|
||||
[:div { :class (str "navbar-item has-dropdown " (when menu-active? "is-active " ) " " class)
|
||||
:ref (fn [n]
|
||||
(reset! !child n))
|
||||
:tab-index 0
|
||||
:onBlur (fn [e]
|
||||
(js/setTimeout (fn []
|
||||
(println @!child)
|
||||
(println (.-activeElement js/document))
|
||||
(when-not (.contains @!child (.-activeElement js/document))
|
||||
(re-frame/dispatch [::events/toggle-menu id])))
|
||||
2))
|
||||
}
|
||||
[:a {:class "navbar-link login" :on-click (fn [e]
|
||||
(.preventDefault e)
|
||||
(.stopPropagation e)
|
||||
(re-frame/dispatch [::events/toggle-menu id])
|
||||
true)} header]
|
||||
[appearing {:visible? menu-active? :enter-class "appear" :exit-class "disappear" :timeout 200}
|
||||
[:div {:class "navbar-dropdown"}
|
||||
[:div child]]]]))})))
|
||||
|
||||
(defn login-dropdown []
|
||||
(let [user (re-frame/subscribe [::subs/user])]
|
||||
(if @user
|
||||
[navbar-drop-down {:header [:span [:span.icon [:i.fa.fa-user] ]
|
||||
[:span (:user/name @user)]] :id ::account}
|
||||
[:span (:user/name @user)]]
|
||||
:id ::account}
|
||||
[:div
|
||||
[:a {:class "navbar-item"
|
||||
:href (bidi/path-for routes/routes :reports)} "My company"]
|
||||
@@ -60,8 +69,8 @@
|
||||
(re-frame/reg-sub
|
||||
::matching-clients
|
||||
:<- [::subs/clients]
|
||||
:<- [::client-search]
|
||||
(fn [[clients {client-search :value}]]
|
||||
:<- [::forms/form ::client-search]
|
||||
(fn [[clients {{client-search :value} :data}]]
|
||||
(if (empty? client-search)
|
||||
clients
|
||||
(if-let [exact-match (first (filter
|
||||
@@ -76,21 +85,46 @@
|
||||
(str/includes? (str/lower-case (:name client)) (str/lower-case client-search))))
|
||||
clients)))))
|
||||
|
||||
(re-frame/reg-event-db
|
||||
::client-search-changed
|
||||
[(re-frame/path [::client-search])]
|
||||
(fn [client-search [_ path value]]
|
||||
(assoc-in client-search path value)))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::client-searched
|
||||
[(re-frame/inject-cofx ::inject/sub [::matching-clients])]
|
||||
(fn [{::keys [matching-clients]}]
|
||||
{:dispatch-n [[::events/swap-client (first matching-clients)]
|
||||
[::events/toggle-menu ::select-client]]}))
|
||||
|
||||
(defn client-dropdown []
|
||||
(let [client (re-frame/subscribe [::subs/client])
|
||||
matching-clients @(re-frame/subscribe [::matching-clients])]
|
||||
|
||||
[navbar-drop-down {:header (str "Company: " (if @client (:name @client)
|
||||
"All"))
|
||||
:id ::select-client}
|
||||
[:div
|
||||
[:a {:class "navbar-item"
|
||||
:on-click (fn []
|
||||
(re-frame/dispatch [::events/toggle-menu ::select-client])
|
||||
(re-frame/dispatch [::forms/form-closing ::client-search])
|
||||
(re-frame/dispatch [::events/swap-client nil]))} "All" ]
|
||||
[:hr {:class "navbar-divider"}]
|
||||
[form-builder/builder {:id ::client-search
|
||||
:submit-event [::client-searched]}
|
||||
[form-builder/raw-field-v2 {:field :value}
|
||||
[:input.input.navbar-item {:placeholder "Company name"
|
||||
:auto-focus true}]]]
|
||||
(for [{:keys [name id] :as client} (take 8 matching-clients)]
|
||||
^{:key id }
|
||||
[:a {:class "navbar-item"
|
||||
:on-click (fn []
|
||||
(re-frame/dispatch [::events/toggle-menu ::select-client])
|
||||
(re-frame/dispatch [::events/swap-client client]))
|
||||
} name])]]))
|
||||
|
||||
(defn navbar [ap]
|
||||
(let [navbar-menu-shown? (r/atom false)]
|
||||
(fn [ap]
|
||||
(let [user (re-frame/subscribe [::subs/user])
|
||||
client (re-frame/subscribe [::subs/client])
|
||||
clients (re-frame/subscribe [::subs/clients])
|
||||
matching-clients @(re-frame/subscribe [::matching-clients])
|
||||
menu (re-frame/subscribe [::subs/menu])
|
||||
client-search @(re-frame/subscribe [::client-search])
|
||||
(let [user (re-frame/subscribe [::subs/user])
|
||||
clients (re-frame/subscribe [::subs/clients])
|
||||
is-initial-loading @(re-frame/subscribe [::subs/is-initial-loading?])]
|
||||
[:nav {:class "navbar has-shadow is-fixed-top is-grey"}
|
||||
|
||||
@@ -133,33 +167,8 @@
|
||||
[:div.navbar-end
|
||||
|
||||
(when (> (count @clients) 1)
|
||||
[navbar-drop-down {:header (str "Company: " (if @client (:name @client)
|
||||
"All"))
|
||||
:id ::select-client}
|
||||
[:div
|
||||
[:a {:class "navbar-item"
|
||||
:on-click (fn []
|
||||
(re-frame/dispatch [::events/swap-client nil]))} "All" ]
|
||||
[:hr {:class "navbar-divider"}]
|
||||
[bind-field
|
||||
[:input.input.navbar-item {:placeholder "Company name"
|
||||
:auto-focus true
|
||||
:field [:value]
|
||||
:on-key-up (fn [k]
|
||||
(when (= 13 (.-which k))
|
||||
(do
|
||||
(re-frame/dispatch [::events/swap-client (first matching-clients)])
|
||||
(re-frame/dispatch [::events/toggle-menu ::select-client])
|
||||
(re-frame/dispatch [::client-search-changed [:value] nil])))
|
||||
)
|
||||
:event [::client-search-changed]
|
||||
:subscription client-search}]]
|
||||
(for [{:keys [name id] :as client} matching-clients]
|
||||
^{:key id }
|
||||
[:a {:class "navbar-item"
|
||||
:on-click (fn []
|
||||
(re-frame/dispatch [::events/swap-client client]))
|
||||
} name])]])])]
|
||||
[client-dropdown]
|
||||
)])]
|
||||
(when-not is-initial-loading
|
||||
[login-dropdown])]
|
||||
|
||||
@@ -167,11 +176,7 @@
|
||||
]))))
|
||||
|
||||
|
||||
(defn footer []
|
||||
[:footer {:style {:padding "1em"}}
|
||||
[:div {:class "content has-text-centered"}
|
||||
[:p
|
||||
[:strong "Integreat"] ]]])
|
||||
|
||||
|
||||
(defn appearing-side-bar [{:keys [visible?]} ]
|
||||
[appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500}
|
||||
@@ -179,7 +184,7 @@
|
||||
(into [:div.sub-main {} ]
|
||||
(r/children (r/current-component)))]])
|
||||
|
||||
(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
|
||||
(defn side-bar-layout [{:keys [side-bar main bottom right-side-bar]}]
|
||||
(let [ap @(re-frame/subscribe [::subs/active-page])
|
||||
client @(re-frame/subscribe [::subs/client])]
|
||||
[:div
|
||||
@@ -200,7 +205,6 @@
|
||||
(when right-side-bar
|
||||
right-side-bar)
|
||||
]
|
||||
#_[footer]
|
||||
[:div
|
||||
bottom]
|
||||
[:div#dz-hidden]]))
|
||||
|
||||
Reference in New Issue
Block a user