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

revamping form.

Browse Source
This commit is contained in:
Bryce Covert
2019-04-26 09:10:30 -07:00
parent dd86b2be48
commit f1269085ae
6 changed files with 223 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/cljs/auto_ap/views/components/expense_accounts_field.cljs
View File

@@ -1,7 +1,7 @@
(ns auto-ap.views.components.expense-accounts-field
(:require [auto-ap.forms :as forms]
[auto-ap.subs :as subs]
[auto-ap.views.components.typeahead :refer [typeahead]]
[auto-ap.views.components.typeahead :refer [typeahead typeahead-entity]]
[auto-ap.views.utils :refer [bind-field dispatch-event ->$]]
[goog.string :as gstring]
[re-frame.core :as re-frame]
@@ -13,7 +13,9 @@
(not (get-in accounts [0 :account :id]))))
(defn default-account [accounts default-account amount]
[{:id (str "new-" (random-uuid))
[{:id (doto (get-in accounts [0 :id]
(str "new-" (random-uuid)))
println)
:amount (Math/abs amount)
:amount-percentage 100
:amount-mode "%"
@@ -24,7 +26,6 @@
(defn from-graphql [accounts total locations]
(println accounts total locations)
(if (seq accounts)
(vec (map
(fn [a]
@@ -133,20 +134,20 @@
[:div.column.is-narrow
(when-not disabled
[:a.delete {:on-click (dispatch-event [::remove-expense-account event expense-accounts id])}])]]
(println "TYPAHEAD" expense-accounts)
[:div.field
[:div.columns
[:div.column
[:p.help "Account"]
[:div.control.is-fullwidth
[bind-field
[typeahead {:matches (map (fn [x] [(:id x) (str (:numeric-code x) " - " (:name x))]) chooseable-expense-accounts)
:disabled disabled
:type "typeahead"
:field [index :account :id]
#_#_:text-field [index :account :name]
:event [::expense-account-changed event expense-accounts max-value]
:subscription expense-accounts}]]]]
[typeahead-entity {:matches chooseable-expense-accounts
:match->text (fn [x ] (str (:numeric-code x) " - " (:name x)))
:disabled disabled
:type "typeahead-entity"
:field [index :account]
:event [::expense-account-changed event expense-accounts max-value]
:subscription expense-accounts}]]]]
[:div.column.is-narrow
[:p.help "Location"]
[:div.control

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

@@ -110,7 +110,7 @@
(defn appearing-side-bar [{:keys [visible?]} & children ]
[appearing {:visible? visible? :enter-class "slide-in-right" :exit-class "slide-out-right" :timeout 500}
[:aside {:class "column is-4 aside menu" :style {:height "calc(100vh - 46px)" :overflow "auto"}}
[:div.sub-main {} children ]]])
(into [: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])

110
src/cljs/auto_ap/views/components/typeahead.cljs
View File

@@ -108,3 +108,113 @@
:else
nil)]))})))
(defn get-valid-entity-matches [matches not-found-description not-found-value text match->text]
(let [valid-matches (take 5 (for [[match i] (map vector matches (range))
:let [t (match->text match)]
:when (str/includes? (or (some-> t .toLowerCase) "") (or (some-> text .toLowerCase) ""))]
match))
valid-matches (if (and not-found-description text)
(concat valid-matches [[:not-found (not-found-description text) (not-found-value text)]])
valid-matches)]
valid-matches))
(defn typeahead-entity [{:keys [matches on-change field value class not-found-description
disabled not-found-value auto-focus]}]
(let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
highlighted (r/atom nil)
]
(r/create-class
{:reagent-render (fn [{:keys [matches on-change disabled match->text field value class not-found-description]}]
(println "RENDERING ZZ" value)
(let [select (fn [entity]
(when on-change
(if (= :not-found entity)
(on-change nil)
(on-change entity))))
text-atom text
text (or (when value (match->text value)) @text)
valid-matches (get-valid-entity-matches matches not-found-description not-found-value text match->text)]
(println "TEXT" value (match->text value) text)
[:div.typeahead
(if disabled
^{:key (str "typeahead" text) } [:input.input {:disabled "disabled" :value text} ]
(if value
^{:key "typeahead"} [:div.input {:class class
:tab-index "0"
:on-key-up (fn [e]
(if (= 8 (.-keyCode e))
(do
(select nil)
(reset! text-atom nil)
true)
false))}
[:div.control
[:div.tags.has-addons
[:span.tag text]
[:a.tag.is-delete {:on-click (fn [] (select nil))}]]]]
^{:key "typeahead"} [:input.input {:type "text"
:class class
:value text
:auto-focus auto-focus
:on-blur (fn [e]
(cond value
nil
(#{"" nil} text)
nil
@highlighted
(do (select @highlighted)
true)
:else
(do (select nil)
(reset! text-atom nil)
true)))
:on-key-down (fn [e]
(condp = (.-keyCode e)
; up
38 (do
(when-let [new-match (->> valid-matches
(take-while #(not= % @highlighted))
(last))]
(reset! highlighted new-match))
true)
;; dwon
40 (do
(when-let [new-match (->> valid-matches
(drop-while #(not= % @highlighted))
(drop 1)
(first))]
(reset! highlighted new-match))
true)
13 (do (.preventDefault e)
(when @highlighted
(select @highlighted)
false))
true))
:on-change (fn [e]
(let [new-matches (get-valid-entity-matches matches not-found-description not-found-value (.. e -target -value) match->text)]
(reset! highlighted (first new-matches)))
(reset! text-atom (.. e -target -value)))}]))
(cond
(and (seq text)
(not value)
(seq valid-matches))
(let [h @highlighted]
[:div.typeahead-menu
[:ul
(for [entity valid-matches]
(let [t (match->text entity)]
^{:key entity} [:li.typeahead-suggestion {:class (if (= entity h)
"typeahead-highlighted")
:on-mouse-down #(do (select entity))} t]))]])
:else
nil)]))})))