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

Makes company 1099 page work better and faster

Browse Source
This commit is contained in:
Bryce Covert
2023-05-12 12:27:48 -07:00
parent 0e814a8a4a
commit e78c73e093
15 changed files with 519 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

206
src/clj/auto_ap/ssr/company_dropdown.clj
View File

@@ -2,103 +2,130 @@
(:require
[auto-ap.datomic :refer [conn]]
[auto-ap.graphql.utils :refer [assert-can-see-client]]
[iol-ion.query :refer [can-see-client?]]
[auto-ap.ssr-routes :as ssr-routes]
[auto-ap.ssr.components.navbar-dropdown :refer [navbar-dropdown]]
[auto-ap.ssr.svg :as svg]
[auto-ap.ssr.utils :refer [html-response]]
[bidi.bidi :as bidi]
[datomic.api :as dc]
[hiccup2.core :as hiccup]))
[hiccup2.core :as hiccup]
[iol-ion.query :refer [can-see-client?]]))
(defn dropdown-contents [{:keys [identity]}]
(let [options (->> (dc/q '[:find ?c ?n
:in $ ?user
:where [?c :client/name ?n]
[(iol-ion.query/can-see-client? ?user ?c)]]
(dc/db conn)
identity)
(map (fn [[k v]]
{"key" k
"value" v})))]
(html-response
[:div.navbar-dropdown {:style {:width "20em"}}
[:a.navbar-item {:hx-put (bidi/path-for ssr-routes/only-routes
:active-client
:request-method :put)
:hx-target "#company-dropdown"
:hx-swap "outerHTML"
:hx-trigger "click"}
"All"]
[:hr.navbar-divider]
[:input#company-search.input.navbar-item {:placeholder "Company name"
:name "search-text"
:autoFocus true} ]
[:input#company-search-value {:type "hidden"
(defn dropdown-search-results* [{:keys [options]}]
[:ul
(for [option options]
[:li
[:div {:class "flex items-center pl-2 rounded hover:bg-green-100 dark:hover:bg-green-600"}
[:a {:href "#" :class "w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300"
"_" (hiccup/raw "on click set value of <#company-search-value/> to @data-value then send selected to #company-dropdown")
:data-value (get option "key")}
(get option "value")]]])])
(defn get-clients [identity query]
(dc/q '[:find ?c ?n
:in $ ?user ?q
:where [?c :client/name ?n]
[(clojure.string/includes? ?n ?q)]
[(iol-ion.query/can-see-client? ?user ?c)]]
(dc/db conn)
identity
(or query "")))
(defn dropdown-search-results [{:keys [identity] :as request}]
(html-response
(dropdown-search-results* {:options (->> (get-clients identity (get (:query-params request) "search-text"))
(map (fn [[k v]]
{"key" k
"value" v})))
:client (:client (:session request))})))
(defn dropdown [{:keys [client]}]
[:div#company-dropdown
{:hx-put (bidi/path-for ssr-routes/only-routes
:active-client
:request-method :put)
:hx-target "#company-dropdown"
:hx-include "#company-search-value"
:hx-swap "outerHTML"
:hx-trigger "selected"}
[:script
(hiccup/raw
"localStorage.setItem(\"last-client-id\", \""(:db/id client)"\")")]
[:div
[:button#company-dropdown-button { :class "text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
:type "button"}
(if client
(:client/name client)
"All Companies")
[:div.w-4.h-4.ml-2
svg/drop-down]]
[:div#company-dropdown-list.hidden {"_" (hiccup/raw "init call initCompanyDropdown()")
}
[:div {:class "z-10 bg-white rounded-lg shadow w-64 dark:bg-gray-700 slide-up duration-500 transition-all"}
[:div {:class "p-3"}
[:label {:for "input-group-search", :class "sr-only"} "Search"]
[:div {:class "relative"}
[:div {:class "absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"}
[:div.w-5.h-5.text-gray-500.dark:text-gray-400
svg/search]]
[:input#company-search {:placeholder "Company name"
:name "search-text"
:class "block w-full p-2 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
:autoFocus true
:tab-index -1
:hx-trigger "keyup changed delay:500ms, search"
:hx-get (bidi/path-for ssr-routes/only-routes
:company-dropdown-search-results)
:hx-target "#company-search-results"
:hx-swap "innerHTML"} ]]
[:input#company-search-value {:type "hidden"
:autocomplete "off"
:name "search-client"
:hx-put (bidi/path-for ssr-routes/only-routes
:active-client
:request-method :put)
:hx-target "#company-dropdown"
:hx-swap "outerHTML"
:hx-trigger "change"} ]
[:script
(hiccup/raw
(str "
var z = new autoComplete({
selector:\"#company-search\",
placeholder: \"Company Name....\",
data: {
keys: [\"value\"],
src: " (cheshire.core/encode
options)
:name "search-client"
:hx-put (bidi/path-for ssr-routes/only-routes
:active-client
:request-method :put)
:hx-target "#company-dropdown"
:hx-swap "outerHTML"
:hx-trigger "change changed"} ]]
[:div.divide-y.divide-gray-100
[:div#company-search-results {:class "h-48 px-3 pb-3 overflow-y-auto text-sm text-gray-700 dark:text-gray-200"}]
[:div {:class "flex items-center pl-2 rounded hover:bg-green-100 dark:hover:bg-green-600"}
"
},
resultItem: {
highlight:true,
class: \"autocomplete-suggestion\",
selected: \"highlighted\"
[:button {:class "w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300"
:hx-put (bidi/path-for ssr-routes/only-routes
:active-client
:request-method :put)
:hx-target "#company-dropdown"
:hx-swap "outerHTML"
:hx-trigger "click"}
"All"]]]
]]
[:script {:lang "text/javascript"}
(hiccup/raw
"
function initCompanyDropdown() {
var $dropdownTargetEl = document.getElementById('company-dropdown-list');
},
resultsList: {
tabSelect: true
},
submit: true
// set the element that trigger the dropdown menu on click
var $dropdownTriggerEl = document.getElementById('company-dropdown-button');
});
z.input.addEventListener(\"selection\", function (event) {
z.input.blur();
z.input.value = event.detail.selection.value.value;
document.getElementById(\"company-search-value\").value= event.detail.selection.value.key;
document.getElementById(\"company-search-value\").dispatchEvent(new Event('change'));
});
"))]])))
(defn dropdown [request]
(let [client (get-in request [:session :client])]
(navbar-dropdown
"company-dropdown"
[:span
(if client
(str "Company: " (:client/name client))
"Company")
[:script
(hiccup/raw
"localStorage.setItem(\"last-client-id\", \""(:db/id client)"\")")]]
[:div {:hx-get
(bidi/path-for ssr-routes/only-routes
:company-dropdown-contents)
:hx-swap "outerHTML"
:hx-trigger "intersect delay:150ms"
:hx-target "closest .navbar-dropdown"
:style {:width "20em"
:height "80px"}
}
[:div.loader.is-loading.is-active.is-centered]])))
var dropdownOptions = {
placement: 'bottom',
triggerType: 'click',
offsetSkidding: 0,
offsetDistance: 10,
delay: 300,
onHide: () => {
},
onShow: () => {
document.getElementById('company-search').focus()
},
onToggle: () => {
}
};
var companyDrowdown = new Dropdown($dropdownTargetEl, $dropdownTriggerEl, dropdownOptions);
}
")]]])
(defn active-client [{:keys [identity params] :as request}]
(let [client-id (some-> (or (:search-client params) (get params "search-client")) not-empty Long/parseLong)]
@@ -109,7 +136,8 @@ document.getElementById(\"company-search-value\").dispatchEvent(new Event('chang
(dc/pull (dc/db conn) [:db/id :client/name :client/code] client-id)))]
(assoc
(html-response
(dropdown (assoc request :session new-session)))
(dropdown {:client (:client new-session)
:identity identity}))
:session
new-session
:headers