diff --git a/resources/public/css/main.css b/resources/public/css/main.css
new file mode 100644
index 00000000..6d203d6e
--- /dev/null
+++ b/resources/public/css/main.css
@@ -0,0 +1,355 @@
+ form.dz { border: 2px dashed lightgray;}
+
+ html,body {
+ font-family: 'Open Sans', serif;
+ font-size: 14px;
+ line-height: 1.5;
+ height: 100%;
+ background-color: #fff;
+}
+
+ @keyframes scaleUp {
+ from { opacity: 0; transform: translateY(10px); transform-origin: top center; }
+ }
+ @keyframes appear {
+ from { opacity: 0; }
+ }
+ @keyframes slideIn {
+ from {
+ -webkit-transform: translateY(-100%);
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+ }
+
+ @keyframes slideInFromBelow {
+ from {
+ -webkit-transform: translateY(25%);
+ transform: translateY(25%);
+ opacity: 0;
+ }
+ }
+
+ @keyframes moveToTop {
+ from { }
+ to { -webkit-transform: translateY(-100%); transform:
+ translateY(-100%); }
+ }
+
+ @keyframes flashWarning {
+ from {
+ background-color: #00d1b2;
+
+ }
+ to {
+ background-color: inherit;
+
+ }
+ }
+
+ @keyframes flashPrimary {
+ from {
+ background-color: #00d1b2;
+
+ }
+ to {
+
+ background-color: inherit;
+
+
+ }
+ }
+
+ tbody tr.live-removed {
+ animation: flashWarning 1.0s ease both;
+ animation-fill-mode: forwards;
+ }
+ tbody tr.live-added {
+ animation: flashPrimary 1.0s ease both;
+ animation-fill-mode: forwards;
+ }
+ .left-nav {
+ width: 300px;
+ }
+.nav.is-dark {
+ background-color: #232B2D;
+ color: #F6F7F7;
+}
+.nav.is-dark .nav-item a, .nav.is-dark a.nav-item {
+ color: #F6F7F7;
+}
+.nav.is-dark .nav-item a.button.is-default {
+ color: #F6F7F7;
+ background-color: transparent;
+ border-width: 2px;
+}
+.nav.menu {
+ border-bottom: 1px solid #e1e1e1;
+}
+.nav.menu .nav-item .icon-btn {
+ border: 3px solid #B7C6C9;
+ border-radius: 90px;
+ padding: 5px 7px;
+ color: #B7C6C9;
+}
+.nav.menu .nav-item.is-active .icon-btn {
+ color: #2EB398;
+ border: 3px solid #2EB398;
+}
+ .slideInFromBelow {
+ animation: slideInFromBelow 1.5s ease both;
+ }
+
+ .modal {
+ animation: appear .7s ease both;
+ }
+ .inbox-messages {
+ animation: scaleUp .3s ease both;
+ }
+.nav.menu .nav-item .icon-btn .fa {
+ font-size: 20px;
+ color: #B7C6C9;
+}
+.nav.menu .nav-item.is-active .icon-btn .fa {
+ color: #2EB398;
+}
+
+
+nav.navbar .navbar-item.is-active {
+ background-color: #f5f5f5;
+ color: #363636;
+}
+.aside {
+ display:block;
+ background-color: #F9F9F9;
+ border-right: 1px solid #DEDEDE;
+}
+.messages {
+ display:block;
+ background-color: #fff;
+ border-right: 1px solid #DEDEDE;
+}
+.message {
+ display:block;
+ background-color: #fff;
+}
+.aside .compose {
+ height: 95px;
+ margin:0 -10px;
+ padding: 25px 30px;
+}
+.aside .compose .button {
+ color: #F6F7F7;
+}
+.aside .compose .button .compose {
+ font-size: 14px;
+ font-weight: 700;
+}
+.aside .main {
+ padding: 40px;
+ color: #6F7B7E;
+}
+.aside .title {
+ color: #6F7B7E;
+ font-size: 12px;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+.aside .main .item {
+ display: block;
+ padding: 10px 0;
+ color: #6F7B7E;
+}
+.aside .main .item.is-active {
+ background-color: #F1F1F1;
+ margin: 0 -50px;
+ padding-left: 50px;
+}
+.aside .main .item:is-active,.aside .main .item:hover {
+ background-color: #F2F2F2;
+ margin: 0 -50px;
+ padding-left: 50px;
+}
+.aside .main .icon {
+ font-size: 19px;
+ padding-right: 30px;
+ color: #A0A0A0;
+}
+.aside .main .name {
+ font-size: 15px;
+ color: #5D5D5D;
+ font-weight: 500;
+}
+.messages {
+ padding: 40px 20px;
+}
+.message {
+ padding: 40px 20px;
+}
+.messages .action-buttons {
+ padding: 0;
+ margin-top: -20px;
+}
+.message .action-buttons {
+ padding: 0;
+ margin-top: -5px;
+}
+.action-buttons .control.is-grouped {
+ display: inline-block;
+ margin-right: 30px;
+}
+.action-buttons .control.is-grouped:last-child {
+ margin-right: 0;
+}
+.action-buttons .control.is-grouped .button:first-child {
+ border-radius: 5px 0 0 5px;
+}
+.action-buttons .control.is-grouped .button:last-child {
+ border-radius: 0 5px 5px 0;
+}
+.action-buttons .control.is-grouped .button {
+ margin-right: -5px;
+ border-radius: 0;
+}
+.pg {
+ display: inline-block;
+ top:10px;
+}
+.action-buttons .pg .title {
+ display: block;
+ margin-top: 0;
+ padding-top: 0;
+ margin-bottom: 3px;
+ font-size:12px;
+ color: #AAAAA;
+}
+.action-buttons .pg a{
+ font-size:12px;
+ color: #AAAAAA;
+ text-decoration: none;
+}
+.is-grouped .button {
+ background-image: linear-gradient(#F8F8F8, #F1F1F1);
+}
+.is-grouped .button .fa {
+ font-size: 15px;
+ color: #AAAAAA;
+}
+.inbox-messages .card {
+ width: 100%;
+}
+.inbox-messages strong {
+ color: #5D5D5D;
+}
+.inbox-messages .msg-check {
+ padding: 0 20px;
+}
+.inbox-messages .msg-subject {
+ padding: 10px 0;
+ color: #5D5D5D;
+}
+.inbox-messages .msg-attachment {
+ float:right;
+}
+.inbox-messages .msg-snippet {
+ padding: 5px 20px 0px 5px;
+}
+.inbox-messages .msg-subject .fa {
+ font-size: 14px;
+ padding:3px 0;
+}
+.inbox-messages .msg-timestamp {
+ float: right;
+ padding: 0 20px;
+ color: #5D5D5D;
+}
+.message-preview .avatar {
+ display: inline-block;
+}
+.message-preview .top .address {
+ display: inline-block;
+ padding: 0 20px;
+}
+.avatar img {
+ width: 40px;
+ border-radius: 50px;
+ border: 2px solid #999;
+ padding: 2px;
+}
+.address .name {
+ font-size: 16px;
+ font-weight: bold;
+}
+.address .email {
+ font-weight: bold;
+ color: #B6C7D1;
+}
+.card.is-active {
+ background-color:#F5F5F5;
+}
+ .table { table-layout: fixed }
+ .table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; }
+ .table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; }
+
+ .typeahead {
+ position:relative;
+ overflow:visible;
+ }
+
+ .modal {
+ overflow: visible;
+ }
+
+ .modal-card-body {
+ overflow: visible;
+ }
+
+.typeahead-menu {
+ position:absolute;
+ display: inline-block;
+ width: 100%;
+ top: 100%;
+ left: 0;
+ z-index: 10000;
+ overflow: auto;
+ float: left;
+ min-width: 160px;
+ padding: 5px 0;
+ margin: 2px 0 0;
+ list-style: none;
+ font-size: 14px;
+ text-align: left;
+ background-color: #ffffff;
+ border: 1px solid #cccccc;
+ border: 1px solid rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+ /* background-clip: padding-box; */
+
+}
+ .modal-card {
+ overflow: auto;
+ }
+
+.typeahead-suggestion {
+ display: block;
+ overflow: visible;
+ padding: 3px 20px;
+ clear: both;
+ font-weight: normal;
+ line-height: 1.42857143;
+ color: #333333;
+ white-space: nowrap;
+}
+.typeahead-suggestion:hover,
+.typeahead-suggestion:focus,
+ .typeahead-menu:not(:hover) .typeahead-highlighted
+ {
+ color: #ffffff;
+ text-decoration: none;
+ outline: 0;
+ background-color: #00d1b2;
+ cursor: pointer;
+}
+
diff --git a/resources/public/index.html b/resources/public/index.html
index d444e8b7..f300878c 100644
--- a/resources/public/index.html
+++ b/resources/public/index.html
@@ -11,365 +11,7 @@
-
-
+
diff --git a/src/cljs/auto_ap/views/components/expense_accounts_dialog.cljs b/src/cljs/auto_ap/views/components/expense_accounts_dialog.cljs
index e993f24c..fc79fa5f 100644
--- a/src/cljs/auto_ap/views/components/expense_accounts_dialog.cljs
+++ b/src/cljs/auto_ap/views/components/expense_accounts_dialog.cljs
@@ -31,6 +31,7 @@
(re-frame/reg-event-fx
::change-expense-accounts-saving
(fn [{:keys [db]} [_ on-success id ]]
+
(let [{:keys [id expense-accounts]} (get-in db [::change-expense-accounts :invoice])]
{:graphql
{:token (-> db :user)
@@ -49,7 +50,7 @@
[:expense_accounts [:amount :id :location :expense_account_id
[:expense_account [:id :name [:parent [:id :name]]]]]]
[:client [:name :id :locations]]
- [:payments [:amount [:payment [:amount :s3_url :check_number ]]]]
+ [:payments [:amount :id [:payment [:amount :s3_url :check_number ]]]]
]]}]}
:on-success on-success}})))
diff --git a/src/cljs/auto_ap/views/components/invoice_table.cljs b/src/cljs/auto_ap/views/components/invoice_table.cljs
index 9d183119..ad650072 100644
--- a/src/cljs/auto_ap/views/components/invoice_table.cljs
+++ b/src/cljs/auto_ap/views/components/invoice_table.cljs
@@ -201,7 +201,7 @@
[:div.dropdown-menu {:role "menu"}
[:div.dropdown-content
(for [payment payments]
- (if (:s3-url (:payment payment))
+ (if (:s3-url (:payment payment))
^{:key (:id payment)}
[:a.dropdown-item {:href (:s3-url (:payment payment)) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str " " (:check-number (:payment payment)) " (" (gstring/format "$%.2f" (:amount payment) ) ")")]
diff --git a/src/cljs/auto_ap/views/components/invoices/side_bar.cljs b/src/cljs/auto_ap/views/components/invoices/side_bar.cljs
index 8c3ca2c2..bda9e7fd 100644
--- a/src/cljs/auto_ap/views/components/invoices/side_bar.cljs
+++ b/src/cljs/auto_ap/views/components/invoices/side_bar.cljs
@@ -19,16 +19,15 @@
[:li.menu-item
[:a.item {:href (bidi/path-for routes/routes :unpaid-invoices)
:class [(active-when ap = :unpaid-invoices)]}
- [:span {:class "icon icon-accounting-document" :style {"font-size" "25px"}}]
+ [:span {:class "icon icon-accounting-document" :style {:font-size "25px"}}]
[: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 icon-accounting-invoice-mail" :style {"font-size" "25px"}}]
+ [:span {:class "icon icon-accounting-invoice-mail" :style {:font-size "25px"}}]
- [:span {:class "name"} "Paid Invoices"]]]]
- ]
+ [:span {:class "name"} "Paid Invoices"]]]]]
[:div
rest]
[:div {:class "compose has-text-centered"}
diff --git a/src/cljs/auto_ap/views/components/typeahead.cljs b/src/cljs/auto_ap/views/components/typeahead.cljs
index cb296a18..9015405a 100644
--- a/src/cljs/auto_ap/views/components/typeahead.cljs
+++ b/src/cljs/auto_ap/views/components/typeahead.cljs
@@ -30,7 +30,7 @@
valid-matches (get-valid-matches matches not-found-description not-found-value text)]
[:div.typeahead
(if @selected
- [:div.input {:class class
+ ^{:key "typeahead"} [:div.input {:class class
:tab-index "0"
:on-key-up (fn [e]
(if (= 8 (.-keyCode e))
@@ -42,9 +42,8 @@
[:div.tags.has-addons
[:span.tag text]
[:a.tag.is-delete {:on-click (fn [] (select [nil "" nil]))}]]]]
- [:input.input {:type "text"
+ ^{:key "typeahead"} [:input.input {:type "text"
:class class
- :field field
:value text
:auto-focus auto-focus
:on-blur (fn [e]
@@ -54,35 +53,36 @@
(#{"" nil} text)
nil
- (seq valid-matches)
- (do (select (first valid-matches))
+ @highlighted
+ (do (select @highlighted)
true)
:else
(do (select [nil ""])
true)))
- :on-key-up (fn [e]
+ :on-key-down (fn [e]
(condp = (.-keyCode e)
; up
38 (do
(when-let [new-match (->> valid-matches
- (take-while #(not= (first %) @highlighted))
+ (take-while #(not= % @highlighted))
(last))]
(reset! highlighted new-match))
true)
;; dwon
40 (do
(when-let [new-match (->> valid-matches
- (drop-while #(not= (first %) @highlighted))
+ (drop-while #(not= % @highlighted))
(drop 1)
(first))]
(reset! highlighted new-match))
true)
- 13 (when @highlighted
- (select @highlighted)
- false)
- true)
- )
+ 13 (do (.preventDefault e)
+ (when @highlighted
+
+ (select @highlighted)
+ false))
+ true))
:on-change (fn [e]
(let [new-matches (get-valid-matches matches not-found-description not-found-value (.. e -target -value))]
(reset! highlighted (first new-matches)))
diff --git a/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs b/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs
index 8779278b..9f6fc5ad 100644
--- a/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs
+++ b/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs
@@ -170,7 +170,6 @@
(re-frame/reg-event-fx
::print-checks
(fn [{:keys [db]} [_ bank-account-id type]]
- (println type)
(let [invoice-amounts (by :id :outstanding-balance (get-in db [::invoice-page :invoices]))]
{:db (-> db
@@ -786,13 +785,15 @@
(defn unpaid-invoices-page []
[side-bar-layout {:side-bar [invoices-side-bar {}
- [:p.menu-label "Vendor"]
- [:div
- [vendor-filter]]
- [:p.menu-label "Invoice #"]
- [:div
- [invoice-number-filter]
- ]]
+ ^{:key "extra-filter"}
+ [:div
+ [:p.menu-label "Vendor"]
+ [:div [vendor-filter]]
+ [:p.menu-label "Invoice #"]
+ [:div
+ [invoice-number-filter]
+ ]]
+ ]
:main [unpaid-invoices-content]
:bottom [vendor-dialog {:vendor @(re-frame/subscribe [::subs/user-editing-vendor])
:save-event [::events/save-vendor]