a lot of progress on typeaheads, etc.
This commit is contained in:
@@ -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
|
||||
|
||||
63
src/cljs/auto_ap/views/components/typeahead.cljs
Normal file
63
src/cljs/auto_ap/views/components/typeahead.cljs
Normal 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])]])]))))
|
||||
@@ -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])
|
||||
|
||||
Reference in New Issue
Block a user