a lot of progress on typeaheads, etc.

This commit is contained in:
Bryce Covert
2018-05-23 11:27:31 -07:00
parent 1a72859bd8
commit e445adec02
18 changed files with 214 additions and 85 deletions

View File

@@ -28,7 +28,6 @@
(re-frame/reg-sub
::modal-state
(fn [db [_ id]]
(println "ID" id)
(get (:modal-state db) id)))
(re-frame/reg-sub

View File

@@ -0,0 +1,63 @@
(ns auto-ap.views.components.typeahead
(:require [reagent.core :as r]
[clojure.string :as str]))
(defn typeahead [{:keys [matches on-change field value]}]
(let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
highlighted (r/atom 0)
selected (r/atom (first (first (filter #(= (first %) value) matches))))
select (fn [[id t]]
(reset! selected id)
(reset! text t)
(println [id t])
(when on-change
(on-change id)))]
(fn [{:keys [matches on-change field value]}]
(let [valid-matches (take 5 (for [[[id t :as match] i] (map vector matches (range))
:when (str/includes? (.toLowerCase t) (.toLowerCase @text))]
match))]
[:div.typeahead
(if @selected
[:div.input
[:div.control
[:div.tags.has-addons
[:span.tag @text]
[:a.tag.is-delete {:on-click (fn [] (select [nil ""]))}]]]]
[:input.input {:type "text"
:field [:vendor]
:value @text
:on-blur (fn [e]
(cond @selected
nil
(#{"" nil} @text)
nil
(seq valid-matches)
(do (select (first valid-matches))
true)
:else
(do (select [nil ""])
true)))
:on-key-up (fn [e]
(if (= 13 (.-keyCode e))
(do
(select (first valid-matches))
false)
true))
:on-change (fn [e]
(reset! highlighted (ffirst valid-matches))
(select [nil (.. e -target -value)]))}
])
(when (and (seq @text)
(not @selected)
(seq valid-matches))
[:div.typeahead-menu
[:ul
(for [[id t :as match] valid-matches]
[:li.typeahead-suggestion {:class (if (= id @highlighted)
"typeahead-highlighted")
:on-mouse-down #(do (println "MATCH" match) (select match))} t])]])]))))

View File

@@ -9,6 +9,7 @@
[auto-ap.views.pages.check :as check]
[auto-ap.views.components.invoice-table :refer [invoice-table] :as invoice-table]
[auto-ap.views.components.modal :refer [modal action-modal]]
[auto-ap.views.components.typeahead :refer [typeahead]]
[auto-ap.subs :as subs]
[auto-ap.events :as events]))
@@ -190,7 +191,29 @@
(re-frame/reg-event-fx
::create-invoice
(fn [{:keys [db]} _]
{}))
{:graphql
{:token (-> db :user)
:query-obj {:venia/operation {:operation/type :mutation
:operation/name "AddInvoice"}
:venia/queries [{:query/data [:add-invoice
{:invoice @(re-frame/subscribe [::new-invoice])}
[:id :total :outstanding-balance :date :invoice-number
[:company [:id :name]]
[:vendor [:id :name]]
]]}]}
:on-success [::invoice-created]}}))
(re-frame/reg-event-fx
::invoice-created
(fn [{:keys [db]} [_ result]]
{:dispatch [::events/modal-completed ::new-invoice]
:db (-> db
(update-in [::invoice-page :invoices]
(fn [is]
(into [(:add-invoice result)]
is)))
(dissoc ::new-invoice))}))
(defn print-checks-modal []
(let [{:keys [checked]} @(re-frame/subscribe [::invoice-page])
@@ -240,55 +263,7 @@
:max outstanding-balance
:step "0.01"}]]]]]])]]])))
(defn typeahead [{:keys [matches on-change field value]}]
(let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
highlighted (r/atom 0)
selected (r/atom (first (first (filter #(= (first %) value) matches))))
select (fn [[id t]]
(reset! selected id)
(reset! text t)
(println [id t])
(when on-change
(on-change id)))]
(fn [{:keys [matches on-change field value]}]
(let [valid-matches (take 5 (for [[[id t :as match] i] (map vector matches (range))
:when (str/includes? (.toLowerCase t) (.toLowerCase @text))]
match))]
[:div.typeahead
[:input.input {:type "text"
:field [:vendor]
:value @text
:on-blur (fn [e]
(cond @selected
nil
(seq valid-matches)
(do (select (first valid-matches))
true)
:else
(do (select [nil ""])
true))
)
:on-key-up (fn [e]
(if (= 13 (.-keyCode e))
(do
(select (first valid-matches))
false)
true))
:on-change (fn [e]
(reset! highlighted (ffirst valid-matches))
(select [nil (.. e -target -value)]))}]
(when (and (seq @text)
(not @selected)
(seq valid-matches))
[:div.typeahead-menu
[:ul
(for [[id t :as match] valid-matches]
[:li.typeahead-suggestion {:class (if (= id @highlighted)
"typeahead-highlighted")
:on-mouse-down #(do (println "MATCH" match) (select match))} t])]])]))))
(defn new-invoice-modal []
(let [data @(re-frame/subscribe [::new-invoice])