mostly reorganized

This commit is contained in:
Bryce Covert
2019-01-24 09:18:47 -08:00
parent e75ef6b884
commit 336d0779ff
3 changed files with 162 additions and 191 deletions

View File

@@ -130,6 +130,12 @@
.nav.menu .nav-item.is-active .icon-btn .fa { .nav.menu .nav-item.is-active .icon-btn .fa {
color: #2EB398; color: #2EB398;
} }
nav.navbar .navbar-item.is-active {
background-color: #f5f5f5;
color: #363636;
}
.aside { .aside {
display:block; display:block;
background-color: #F9F9F9; background-color: #F9F9F9;
@@ -171,12 +177,12 @@
padding: 10px 0; padding: 10px 0;
color: #6F7B7E; color: #6F7B7E;
} }
.aside .main .item.active { .aside .main .item.is-active {
background-color: #F1F1F1; background-color: #F1F1F1;
margin: 0 -50px; margin: 0 -50px;
padding-left: 50px; padding-left: 50px;
} }
.aside .main .item:active,.aside .main .item:hover { .aside .main .item:is-active,.aside .main .item:hover {
background-color: #F2F2F2; background-color: #F2F2F2;
margin: 0 -50px; margin: 0 -50px;
padding-left: 50px; padding-left: 50px;
@@ -295,7 +301,7 @@
font-weight: bold; font-weight: bold;
color: #B6C7D1; color: #B6C7D1;
} }
.card.active { .card.is-active {
background-color:#F5F5F5; background-color:#F5F5F5;
} }
.table { table-layout: fixed } .table { table-layout: fixed }

View File

@@ -5,7 +5,7 @@
[auto-ap.routes :as routes] [auto-ap.routes :as routes]
[auto-ap.subs :as subs] [auto-ap.subs :as subs]
[auto-ap.events :as events] [auto-ap.events :as events]
[auto-ap.views.utils :refer [active-when= login-url dispatch-event]] [auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event]]
[auto-ap.entities.clients :as clients] [auto-ap.entities.clients :as clients]
[auto-ap.views.pages :as pages] [auto-ap.views.pages :as pages]
[auto-ap.views.components.vendor-dialog :refer [vendor-dialog]])) [auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]))
@@ -34,130 +34,47 @@
(defn login-dropdown [] (defn login-dropdown []
(let [user (re-frame/subscribe [::subs/user]) (let [user (re-frame/subscribe [::subs/user])
menu (re-frame/subscribe [::subs/menu])] menu (re-frame/subscribe [::subs/menu])]
[:div {:id "navMenu", :class "navbar-menu"} (if @user
[:div {:class "navbar-end"} [:div {:class (str "navbar-item has-dropdown " (when (get-in @menu [:account :active?]) "is-active"))}
(if @user
[:div {:class (str "navbar-item has-dropdown " (when (get-in @menu [:account :active?]) "is-active"))} [:a {:class "navbar-link login" :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} (:user/name @user)]
[:div {:class "navbar-dropdown"}
[:a {:class "navbar-link login" :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} (:user/name @user)] [:a {:class "navbar-item"} "My profile"]
[:div {:class "navbar-dropdown"} (when (= "admin" (:user/role @user))
[:a {:class "navbar-item"} "My profile"] [:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin)
(when (= "admin" (:user/role @user)) :on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} "Administration"])
[:a {:class "navbar-item" :href (bidi/path-for routes/routes :admin) [:hr {:class "navbar-divider"}]
:on-click (fn [e] (re-frame/dispatch [::events/toggle-menu :account]))} "Administration"]) [:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]]
[:hr {:class "navbar-divider"}] [:a.navbar-item {:href login-url} "Login"])))
[:a.navbar-item {:on-click (fn [e] (.preventDefault e) (re-frame/dispatch [::events/logout]))} "Logout"]]]
[:a.navbar-item {:href login-url} "Login"])]]))
(defmulti layout page->layout) (defn navbar [ap]
(defmethod layout :admin-left-panel [ap]
(let [client (re-frame/subscribe [::subs/client]) (let [client (re-frame/subscribe [::subs/client])
clients (re-frame/subscribe [::subs/clients]) clients (re-frame/subscribe [::subs/clients])
menu (re-frame/subscribe [::subs/menu])] menu (re-frame/subscribe [::subs/menu])]
[:nav {:class "navbar has-shadow"}
[:div
[:nav {:class "navbar has-shadow"}
[:div {:class "container"}
[:div {:class "navbar-brand"}
[:a {:class "navbar-item", :href "../"}
[:img {:src "/img/logo.png"}]
]]
[:div {:class "navbar-burger burger", :data-target "navMenu"}
[:span]
[:span]
[:span]]
[login-dropdown]]]
[:div {:class "columns", :id "mail-app"}
[:aside {:class "column is-narrow aside menu hero is-fullheight"}
[:div.main
[:p.menu-label "General"]
[:p.menu-item
[:a {:href (bidi/path-for routes/routes :admin) , :class (str "item" (active-when= ap :admin))}
[:span {:class "icon"}
[:i {:class "fa fa-tachometer"}]]
[:span {:class "name"} "Dashboard"]]]
[:p.menu-label "Setup"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-clients) , :class (str "item" (active-when= ap :admin-clients))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Clients"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-vendors) , :class (str "item" (active-when= ap :admin-vendors))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Vendors"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-users), :class (str "item" (active-when= ap :admin-users))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Users"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-yodlee), :class (str "item" (active-when= ap :admin-yodlee))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Yodlee Link"]]]
[:ul ]]
[:p.menu-label "History"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-reminders) , :class (str "item" (active-when= ap :admin-reminders))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Reminders"]]]]
[:p.menu-label "Import"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-excel-import) , :class (str "item" (active-when= ap :admin-excel-import))}
[:span {:class "icon"}
[:i {:class "fa fa-download"}]]
[:span {:class "name"} "Excel Invoices"]]]]]
[:div.left-nav
[:div {:class "compose has-text-centered"}
[:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index)}
[:span {:class "compose"} "Back"]]]]]
[:div {:class "column messages hero is-fullheight", :id "message-feed"}
^{:key (str "active-page-" (:name @client))}
[:div.inbox-messages
[pages/active-page ap]]]]
[:footer {:class "footer"}
[:div {:class "container"}
[:div {:class "content has-text-centered"}
[:p
[:strong "Integreat"]]
[:p
[:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
[:i {:class "fa fa-github"}]]]]]]
[:div#dz-hidden]]))
(defmethod layout :left-panel [ap]
(let [client (re-frame/subscribe [::subs/client])
clients (re-frame/subscribe [::subs/clients])
menu (re-frame/subscribe [::subs/menu])]
[:div
[:nav {:class "navbar has-shadow"}
[:div {:class "container"} [:div {:class "container"}
[:div {:class "navbar-brand"} [:div {:class "navbar-brand"}
[:a {:class "navbar-item", :href "../"} [:a {:class "navbar-item", :href "../"}
[:img {:src "/img/logo.png"}]]] [:img {:src "/img/logo.png"}]]]
[:div {:id "navMenu", :class "navbar-menu " [:div.navbar-menu
:on-click (fn [] (re-frame/dispatch [::events/toggle-menu :client]))}
[:div.navbar-start [:div.navbar-start
[:a.navbar-item {:class [(active-when ap #{:unpaid-invoices :paid-invoices})]
:href (bidi/path-for routes/routes :unpaid-invoices)}
"Invoices" ]
[:a.navbar-item {:class [(active-when ap = :checks)]
:href (bidi/path-for routes/routes :checks)}
"Payments" ]
[:a.navbar-item {:class [(active-when ap = :transactions)]
:href (bidi/path-for routes/routes :transactions)}
"Transactions" ]]
[:div {:class "navbar-burger burger", :data-target "navMenu"}
[:span]
[:span]
[:span]]
[:div.navbar-end
[:div { :class (str "navbar-item has-dropdown " (when (get-in @menu [:client :active?]) "is-active"))} [:div { :class (str "navbar-item has-dropdown " (when (get-in @menu [:client :active?]) "is-active"))}
[:a {:class "navbar-link login"} "Client: " (if @client (:name @client) [:a {:class "navbar-link login" :on-click (fn [] (re-frame/dispatch [::events/toggle-menu :client]))} "Client: " (if @client (:name @client)
"All")] "All")]
[:div {:class "navbar-dropdown"} [:div {:class "navbar-dropdown"}
[:a {:class "navbar-item" [:a {:class "navbar-item"
:on-click (fn [] (re-frame/dispatch [::events/swap-client nil])) :on-click (fn [] (re-frame/dispatch [::events/swap-client nil]))
@@ -167,81 +84,125 @@
^{:key id } ^{:key id }
[:a {:class "navbar-item" [:a {:class "navbar-item"
:on-click (fn [] (re-frame/dispatch [::events/swap-client client])) :on-click (fn [] (re-frame/dispatch [::events/swap-client client]))
} name])]]]] } name])]]]]
[:div {:class "navbar-burger burger", :data-target "navMenu"} [login-dropdown]]]))
[:span]
[:span]
[:span]]
[login-dropdown]]]
[:div {:class "columns", :id "mail-app"}
[:aside {:class "column is-narrow aside menu hero is-fullheight"}
[:div.main.left-nav
[:p.menu-label "General"]
[:p.menu-item
[:a {:href (bidi/path-for routes/routes :index) , :class (str "item" (active-when= ap :index))}
[:span {:class "icon"}
[:i {:class "fa fa-tachometer"}]]
[:span {:class "name"} "Dashboard"]]]
[:p.menu-label "Accounts Payable"] (defn footer []
[:ul.menu-list [:footer {:class "footer"}
#_[:li.menu-item [:div {:class "container"}
[:a {:href (bidi/path-for routes/routes :import-invoices) , :class (str "item" (active-when= ap :import-invoices))} [:div {:class "content has-text-centered"}
[:span {:class "icon"} [:p
[:i {:class "fa fa-star-o"}]] [:strong "Integreat"]]
[:p
[:span {:class "name"} "Upload Invoices"]]] [:a {:class "icon", :href "https://github.com/dansup/bulma-templates"}
[:li.menu-item [:i {:class "fa fa-github"}]]]]]])
[:a {:href (bidi/path-for routes/routes :unpaid-invoices), :class (str "item" (active-when= ap :unpaid-invoices))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-open-o"}]]
[:span {:class "name"} "Unpaid Invoices"]]
]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :paid-invoices), :class (str "item" (active-when= ap :paid-invoices))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Paid Invoices"]]
]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :checks), :class (str "item" (active-when= ap :checks))}
[:span {:class "icon"}
[:i {:class "fa fa-money"}]]
[:span {:class "name"} "Checks"]]]
[:li.menu-item (defn side-bar-layout [{:keys [side-bar main ap bottom]}]
[:a {:href (bidi/path-for routes/routes :transactions), :class (str "item" (active-when= ap :transactions))} [:div
[:span {:class "icon"} [navbar ap]
[:i {:class "fa fa-exchange"}]] [:div {:class "columns ", :id "mail-app"}
[:span {:class "name"} "Transactions"]]] [:aside {:class "column is-narrow aside menu hero is-fullheight"}
[:div.main.left-nav
side-bar
]
[:div {:class "compose has-text-centered"}
[:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index)
:on-click (dispatch-event [::events/modal-status ::user-editing-vendor {:visible? true}])}
[:span {:class "compose"} "New Vendor"]]]]]
[:div {:class "column messages hero is-fullheight", :id "message-feed"} ]]
^{:key (str "active-page-" (:name @client))} [:div {:class "column messages hero is-fullheight", :id "message-feed"}
[:div.inbox-messages ^{:key (str "active-page-")}
[pages/active-page ap]]]] [:div.inbox-messages
[:footer {:class "footer"} main]]]
[:div {:class "container"} [footer]
[:div {:class "content has-text-centered"}
[:p bottom
[:strong "Integreat"]] [:div#dz-hidden]])
[:p
[:a {:class "icon", :href "https://github.com/dansup/bulma-templates"} (defmulti layout page->layout)
[:i {:class "fa fa-github"}]]]]]]
[:div#dz-hidden] (defmethod layout :admin-left-panel [ap]
[vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor]) [side-bar-layout {:side-bar
:save-event [::events/save-vendor] [:div
:change-event [::events/change-nested-form-state [:user-editing-vendor]] [:p.menu-label "General"]
:id ::user-editing-vendor}]])) [:p.menu-item
[:a {:href (bidi/path-for routes/routes :admin) , :class (str "item" (active-when ap = :admin))}
[:span {:class "icon"}
[:i {:class "fa fa-tachometer"}]]
[:span {:class "name"} "Dashboard"]]]
[:p.menu-label "Setup"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-clients) , :class (str "item" (active-when ap = :admin-clients))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Clients"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-vendors) , :class (str "item" (active-when ap = :admin-vendors))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Vendors"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-users), :class (str "item" (active-when ap = :admin-users))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Users"]]]
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-yodlee), :class (str "item" (active-when ap = :admin-yodlee))}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Yodlee Link"]]]
[:ul ]]
[:p.menu-label "History"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-reminders) , :class (str "item" (active-when ap = :admin-reminders))}
[:span {:class "icon"}
[:i {:class "fa fa-star-o"}]]
[:span {:class "name"} "Reminders"]]]]
[:p.menu-label "Import"]
[:ul.menu-list
[:li.menu-item
[:a {:href (bidi/path-for routes/routes :admin-excel-import) , :class (str "item" (active-when ap = :admin-excel-import))}
[:span {:class "icon"}
[:i {:class "fa fa-download"}]]
[:span {:class "name"} "Excel Invoices"]]]]]
:main [pages/active-page ap]
:ap ap
:bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor])
:save-event [::events/save-vendor]
:change-event [::events/change-nested-form-state [:user-editing-vendor]]
:id ::user-editing-vendor}]}])
(defmethod layout :left-panel [ap]
[side-bar-layout {:side-bar [:div [:p.menu-label "Type"]
[:ul.menu-list
[:li.menu-item
[:a.item {:href (bidi/path-for routes/routes :unpaid-invoices)
:class [(active-when ap = :unpaid-invoices)]}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-open-o"}]]
[:span {:class "name"} "Unpaid Invoices"]]]
[:li.menu-item
[:a.item {:href (bidi/path-for routes/routes :paid-invoices)
:class [(active-when ap = :paid-invoices)]}
[:span {:class "icon"}
[:i {:class "fa fa-envelope-o"}]]
[:span {:class "name"} "Paid Invoices"]]]]
[:div {:class "compose has-text-centered"}
[:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :index)
:on-click (dispatch-event [::events/modal-status ::user-editing-vendor {:visible? true}])}
[:span {:class "compose"} "New Vendor"]]]]
:main [pages/active-page ap]
:bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor])
:save-event [::events/save-vendor]
:change-event [::events/change-nested-form-state [:user-editing-vendor]]
:id ::user-editing-vendor}]
:ap ap}])
(defmethod layout :blank [ap] (defmethod layout :blank [ap]
[:div [:div

View File

@@ -8,7 +8,11 @@
[cljs-time.format :as format])) [cljs-time.format :as format]))
(defn active-when= [active-page candidate] (defn active-when= [active-page candidate]
(when (= active-page candidate) " active")) (when (= active-page candidate) " is-active"))
(defn active-when [active-page f & rest]
(when (apply f (into [active-page] rest)) " is-active"))
(def login-url (def login-url
(let [client-id "264081895820-0nndcfo3pbtqf30sro82vgq5r27h8736.apps.googleusercontent.com" (let [client-id "264081895820-0nndcfo3pbtqf30sro82vgq5r27h8736.apps.googleusercontent.com"