notid/integreat
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

ux improvements for erros.

Browse Source
This commit is contained in:
Bryce Covert
2019-02-20 11:39:19 -08:00
parent 91d9ea346d
commit 985b5339af
12 changed files with 134 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/cljs/auto_ap/views/components/dropdown.cljs
View File

@@ -1,6 +1,7 @@
(ns auto-ap.views.components.dropdown
(:require [reagent.core :as r]
[auto-ap.events :as events]
[auto-ap.views.utils :refer [appearing]]
[re-frame.core :as re-frame]
[auto-ap.subs :as subs]))
@@ -22,9 +23,11 @@
"")}
[:div.dropdown-trigger header]
[:div.dropdown-menu {:role "menu"}
[:div.dropdown-content
(when menu-active?
[drop-down-contents {:id id}
child])]]]))})))
[appearing {:visible? menu-active? :enter-class "appear" :exit-class "disappear" :timeout 200}
[:div.dropdown-menu {:role "menu"}
[:div.dropdown-content
(when menu-active?
[drop-down-contents {:id id}
child])]]]
]))})))

29
src/cljs/auto_ap/views/components/invoice_table.cljs
View File

@@ -1,7 +1,7 @@
(ns auto-ap.views.components.invoice-table
(:require [re-frame.core :as re-frame]
[auto-ap.subs :as subs]
[auto-ap.views.utils :refer [date->str dispatch-event delayed-dispatch]]
[auto-ap.views.utils :refer [date->str dispatch-event delayed-dispatch nf]]
[auto-ap.views.components.paginator :refer [paginator]]
[auto-ap.views.components.sorter :refer [sorted-column]]
[auto-ap.views.components.dropdown :refer [drop-down drop-down-contents]]
@@ -9,7 +9,9 @@
[reagent.core :as reagent]
[clojure.string :as str]
[cljs-time.format :as format]
[goog.string :as gstring]))
[goog.string :as gstring]
[goog.i18n.NumberFormat.Format])
)
;; TODO graphql schema enforcement
;; TODO postgres constraints for data integrity
@@ -56,8 +58,6 @@
:start
:end]]]})
(defn invoice-table [{:keys [id invoice-page status on-params-change vendors params check-boxes checked on-check-changed on-edit-invoice on-void-invoice on-unvoid-invoice expense-event]}]
(let [visible-checks @(re-frame/subscribe [::visible-checks])
visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
@@ -120,6 +120,7 @@
[sorted-column {:on-sort opc
:style {:width "8em" :cursor "pointer"}
:sort-key "total"
:class "has-text-right"
:sort-by sort-by
:asc asc}
"Amount"]
@@ -127,6 +128,7 @@
[sorted-column {:on-sort opc
:style {:width "10em" :cursor "pointer"}
:sort-key "outstanding-balance"
:class "has-text-right"
:sort-by sort-by
:asc asc}
"Outstanding"]
@@ -162,8 +164,8 @@
[:td (date->str date) ]
[:td (str/join ", " (set (map :location expense-accounts)))]
[:td (gstring/format "$%.2f" total )]
[:td (gstring/format "$%.2f" outstanding-balance )]
[:td.has-text-right (nf total )]
[:td.has-text-right (nf outstanding-balance )]
[:td.expandable
@@ -192,7 +194,7 @@
(when (and on-void-invoice (= (:outstanding-balance i) (:total i)) (not= ":voided" (:status i)))
[:a.button {:on-click (fn [] (on-void-invoice i))} [:span.icon [:span.icon-bin-2 {:style {:font-weight "400"}}]]])
(when (and on-unvoid-invoice (= ":voided" (:status i)))
[:a {:on-click (fn [] (on-unvoid-invoice i))} [:span [:span.icon [:i.fa.fa-undo]]]])
[:a.button {:on-click (fn [] (on-unvoid-invoice i))} [:span [:span.icon [:i.fa.fa-undo]]]])
(when (seq payments)
[drop-down {:id [::payments id]
:header [:button.button.badge {:data-badge (str (clojure.core/count payments))
@@ -211,15 +213,4 @@
"has-text-success")]}
[:i.fa.fa-money]] (str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ") "
(when (= :cleared (:status (:payment payment)))
(str " - " (:post-date (:transaction (:payment payment))))))]))]]
#_[:div.dropdown.is-right {:class (if (= id visible-checks)
"is-active"
"")}
[:div.dropdown-trigger
]
[:div.dropdown-menu {:role "menu"}
[:div.dropdown-content
]]])]
]]))]]]))))
(str " - " (:post-date (:transaction (:payment payment))))))]))]])]]]))]]]))))

29
src/cljs/auto_ap/views/components/layouts.cljs
View File

@@ -7,11 +7,10 @@
[auto-ap.routes :as routes]
[auto-ap.subs :as subs]
[auto-ap.events :as events]
[auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event]]
[auto-ap.views.utils :refer [active-when active-when= login-url dispatch-event appearing css-transition-group]]
[auto-ap.views.components.vendor-dialog :refer [vendor-dialog]]))
(def css-transition-group
(reagent/adapt-react-class js/ReactTransitionGroup.CSSTransition))
(defn navbar-drop-down-contents [{:keys [id]} children ]
(let [toggle-fn (fn [] (re-frame/dispatch [::events/toggle-menu id]))]
@@ -32,10 +31,10 @@
(.stopPropagation e)
(re-frame/dispatch [::events/toggle-menu id])
true)} header]
[:div {:class "navbar-dropdown"}
(when menu-active?
[navbar-drop-down-contents {:id id}
[:div child]])]]))})))
[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 login-dropdown []
(let [user (re-frame/subscribe [::subs/user])
@@ -105,13 +104,9 @@
[:strong "Integreat"] ]]])
(defn appearing-side-bar [{:keys [visible?]} & children ]
(let [final-state (reagent/atom visible?)]
(fn [{:keys [visible?]} & children]
[css-transition-group {:in visible? :class-names {:exitDone "bounce animated" :exit "slide-out-right" :enter "slide-in-right"} :timeout 500 :onEnter (fn [] (reset! final-state true )) :onExited (fn [] (reset! final-state false))}
(if (or @final-state visible?)
[:aside {:class "column is-3 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}}
[:div.sub-main {} children ]]
[:div])])))
[appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500}
[:aside {:class "column is-3 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}}
[:div.sub-main {} children ]]])
(defn side-bar-layout [{:keys [side-bar main ap bottom right-side-bar]}]
(let [ap @(re-frame/subscribe [::subs/active-page])
@@ -125,7 +120,11 @@
]]]
[:div {:class "column messages hero " :style { :overflow "auto" }, :id "message-feed"}
^{:key (str "active-page-" (:name client))}
[:div.inbox-messages main]]
[:div.inbox-messages
(when-let [error @(re-frame/subscribe [::subs/page-failure])]
[:div.notification.is-warning.animated.fadeInUp
error])
main]]
(when right-side-bar
right-side-bar)
]

5
src/cljs/auto_ap/views/components/sorter.cljs
View File

@@ -25,9 +25,10 @@
[:span.icon
[:i.fa.fa-sort]]))
(defn sorted-column [{:keys [on-sort sort-key sort-by asc style]} & rest]
(defn sorted-column [{:keys [on-sort sort-key sort-by asc style class]} & rest]
[:th {:on-click (fn [e] (on-sort (toggle-sort-by {:asc asc} sort-key)))
:style style}
:style style
:class class}
rest
(sort-icon sort-key sort-by asc)])