From 1e4dabfa07d4419b775c016e6ac141b37fe87f87 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Thu, 12 Oct 2023 23:27:49 -0700
Subject: [PATCH] makes user page better.

---
 resources/input.css                           |  37 ++++--
 resources/public/output.css                   | 118 ++++++++++++++----
 src/clj/auto_ap/ssr/company.clj               |   4 +-
 src/clj/auto_ap/ssr/components/inputs.clj     |  61 ++++-----
 src/clj/auto_ap/ssr/ui.clj                    |  10 +-
 src/clj/auto_ap/ssr/users.clj                 |   7 +-
 .../auto_ap/shared_views/admin/side_bar.cljc  |   2 +-
 7 files changed, 166 insertions(+), 73 deletions(-)

diff --git a/resources/input.css b/resources/input.css
index 675234f2..ef65f702 100644
--- a/resources/input.css
+++ b/resources/input.css
@@ -78,20 +78,35 @@
 }
 
 
-.select2 {
-    @apply text-xs !important;
+.choices {
+    @apply border-0 !important;
 }
-.select2-dropdown {
-    @apply p-2 mb-6 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-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 text-xs !important;
+.choices__list--multiple {
+}
+.choices__inner {
+    @apply  bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 dark:bg-gray-700 p-1 !important;
 }
 
-.select2-selection__choice {
-    @apply bg-primary-100 dark:bg-primary-700 text-gray-900 dark:text-gray-200 !important;
+.choices__inner .choices__input {
+    @apply  m-0 bg-gray-50 dark:bg-gray-700 dark:text-white !important;
+}
+
+.choices__inner .choices__item {
+    @apply   bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300   text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap border-gray-400 !important;
+}
+.choices__list--dropdown {
+    @apply  bg-white rounded-lg shadow dark:bg-gray-700 !important;
+}
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+    @apply   bg-green-300 text-green-800 dark:bg-green-900 dark:text-green-300 !important;
+}
+
+.choices[data-type*="select-multiple"] .choices__button {
+    @apply   border-gray-500 focus:ring-blue-500 focus:border-blue-500 !important;
     
 }
-.select2-search {
-    @apply h-4 !important;
-}
-.select2-selection {
-    @apply py-2.5 !important;
+
+.choices__inner .choices__item:focus-within {
+    @apply  bg-green-500 border-gray-500 ring-blue-500 border-blue-500 !important;
+    
 }
diff --git a/resources/public/output.css b/resources/public/output.css
index e225b687..c6f28794 100644
--- a/resources/public/output.css
+++ b/resources/public/output.css
@@ -2484,34 +2484,37 @@ input:checked + .toggle-bg {
   min-height: calc(100vh - 4em);
 }
 
-.select2 {
-  font-size: 0.75rem !important;
-  line-height: 1rem !important;
+.choices {
+  border-width: 0px !important;
 }
 
-.select2-dropdown {
-  margin-bottom: 1.5rem !important;
+.choices__list--multiple {
+}
+
+.choices__inner {
+  display: block !important;
+  width: 100% !important;
   border-radius: 0.5rem !important;
   border-width: 1px !important;
   --tw-border-opacity: 1 !important;
   border-color: rgb(209 213 219 / var(--tw-border-opacity)) !important;
   --tw-bg-opacity: 1 !important;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
-  padding: 0.5rem !important;
-  font-size: 0.75rem !important;
-  line-height: 1rem !important;
+  padding: 0.25rem !important;
+  font-size: 0.875rem !important;
+  line-height: 1.25rem !important;
   --tw-text-opacity: 1 !important;
   color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
 }
 
-.select2-dropdown:focus {
+.choices__inner:focus {
   --tw-border-opacity: 1 !important;
   border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
 }
 
-:is(.dark .select2-dropdown) {
+:is(.dark .choices__inner) {
   --tw-border-opacity: 1 !important;
   border-color: rgb(75 85 99 / var(--tw-border-opacity)) !important;
   --tw-bg-opacity: 1 !important;
@@ -2520,44 +2523,109 @@ input:checked + .toggle-bg {
   color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
-:is(.dark .select2-dropdown)::-moz-placeholder {
+:is(.dark .choices__inner)::-moz-placeholder {
   --tw-placeholder-opacity: 1 !important;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity)) !important;
 }
 
-:is(.dark .select2-dropdown)::placeholder {
+:is(.dark .choices__inner)::placeholder {
   --tw-placeholder-opacity: 1 !important;
   color: rgb(156 163 175 / var(--tw-placeholder-opacity)) !important;
 }
 
-:is(.dark .select2-dropdown:focus) {
+:is(.dark .choices__inner:focus) {
   --tw-border-opacity: 1 !important;
   border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
   --tw-ring-opacity: 1 !important;
   --tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
 }
 
-.select2-selection__choice {
+.choices__inner .choices__input {
+  margin: 0px !important;
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(228 240 213 / var(--tw-bg-opacity)) !important;
-  --tw-text-opacity: 1 !important;
-  color: rgb(17 24 39 / var(--tw-text-opacity)) !important;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity)) !important;
 }
 
-:is(.dark .select2-selection__choice) {
+:is(.dark .choices__inner .choices__input) {
   --tw-bg-opacity: 1 !important;
-  background-color: rgb(73 109 28 / var(--tw-bg-opacity)) !important;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
   --tw-text-opacity: 1 !important;
-  color: rgb(229 231 235 / var(--tw-text-opacity)) !important;
+  color: rgb(255 255 255 / var(--tw-text-opacity)) !important;
 }
 
-.select2-search {
-  height: 1rem !important;
+.choices__inner .choices__item {
+  white-space: nowrap !important;
+  border-radius: 0.25rem !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity)) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(175 211 130 / var(--tw-bg-opacity)) !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.5rem !important;
+  padding-top: 0.125rem !important;
+  padding-bottom: 0.125rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1rem !important;
+  font-weight: 500 !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(48 72 18 / var(--tw-text-opacity)) !important;
 }
 
-.select2-selection {
-  padding-top: 0.625rem !important;
-  padding-bottom: 0.625rem !important;
+:is(.dark .choices__inner .choices__item) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(24 36 9 / var(--tw-bg-opacity)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(175 211 130 / var(--tw-text-opacity)) !important;
+}
+
+.choices__list--dropdown {
+  border-radius: 0.5rem !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity)) !important;
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1) !important;
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color) !important;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
+}
+
+:is(.dark .choices__list--dropdown) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important;
+}
+
+.choices__list--dropdown .choices__item--selectable.is-highlighted {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(175 211 130 / var(--tw-bg-opacity)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(48 72 18 / var(--tw-text-opacity)) !important;
+}
+
+:is(.dark .choices__list--dropdown .choices__item--selectable.is-highlighted) {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(24 36 9 / var(--tw-bg-opacity)) !important;
+  --tw-text-opacity: 1 !important;
+  color: rgb(175 211 130 / var(--tw-text-opacity)) !important;
+}
+
+.choices[data-type*="select-multiple"] .choices__button {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity)) !important;
+}
+
+.choices[data-type*="select-multiple"] .choices__button:focus {
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
+}
+
+.choices__inner .choices__item:focus-within {
+  border-color: rgb(107 114 128 / var(--tw-border-opacity)) !important;
+  --tw-border-opacity: 1 !important;
+  border-color: rgb(0 156 234 / var(--tw-border-opacity)) !important;
+  --tw-bg-opacity: 1 !important;
+  background-color: rgb(121 181 46 / var(--tw-bg-opacity)) !important;
+  --tw-ring-opacity: 1 !important;
+  --tw-ring-color: rgb(0 156 234 / var(--tw-ring-opacity)) !important;
 }
 
 .hover\:scale-105:hover {
diff --git a/src/clj/auto_ap/ssr/company.clj b/src/clj/auto_ap/ssr/company.clj
index 86b31b58..65e3b71d 100644
--- a/src/clj/auto_ap/ssr/company.clj
+++ b/src/clj/auto_ap/ssr/company.clj
@@ -80,9 +80,9 @@
                                                "limit"  300}))))
         valid-clients (for [n     name-like-ids
                             :when (valid-client-ids n)]
-                        {"id" n "text" (pull-attr (dc/db conn) :client/name n)}
+                        {"value" n "label" (pull-attr (dc/db conn) :client/name n)}
                         )]
-    {:body {"results" valid-clients}}))
+    {:body (take 10 valid-clients)}))
 
 (def search (wrap-json-response search))
 
diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj
index b607e55b..e2999a6d 100644
--- a/src/clj/auto_ap/ssr/components/inputs.clj
+++ b/src/clj/auto_ap/ssr/components/inputs.clj
@@ -1,12 +1,13 @@
 (ns auto-ap.ssr.components.inputs
-  (:require [hiccup2.core :as hiccup]
-            [auto-ap.ssr.svg :as svg]
-            [bidi.bidi :as bidi]))
+  (:require
+   [hiccup2.core :as hiccup]))
 
 (defn select- [params & children]
   (into 
-    [:select {:class (str (:class params) " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
-              :name  (:name params)}
+    [:select (-> params
+                 (dissoc :allow-blank? :value :options)
+                 (update 
+                   :class str  " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"))
      (cond->> 
          (map (fn [[k v]]
                 [:option {:value k :selected (= k (:value params))} v])
@@ -15,35 +16,39 @@
     children))
 
 (defn typeahead- [params]
-  [:div {:class (:class params)}
+  [:div {}
    [:select (-> params
                 (dissoc :url)
-                (assoc :width ""))
+                (dissoc :value)
+                (assoc :width "")
+                )
     (for [[k v] (:value params)]
       [:option {:value k :selected true} v]
       )
-    [:script {:lang "javascript"}
-     (hiccup/raw (format "$(document).ready(function() {$(\"#%s\").select2({ajax: {url: '%s', dataType: 'json'}, minimumInputLength: 4, placeholder: \"%s\"})})"
-                         (:id params)
-                         (:url params)
-                         (or (:placeholder params)
-                             "Type to search")))]]])
+    ]
+   [:script {:lang "javascript"}
+    (hiccup/raw (format "
+(function () {
+var element = document.getElementById('%s');
+var c = new Choices(element, {removeItems: true, removeItemButton:true, searchFloor: 3});
+
+element.addEventListener('search', function (e) {
+    let data = fetch('%s?q=' + e.detail.value)
+    .then(res => res.json())
+    .then(data => {
+      c.setChoices(data, 'value', 'label', true)
+    });
+});
+element.addEventListener('choice', function (e) {
+c.clearChoices();
+    })
+})();
+
+"
+                        (:id params)
+                        (:url params)
+                        ))]])
 
-(defn typeahead-results- [{:keys [options]}]
-  [:ul 
-   (for [{:keys [id name]} 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"
-            #_#_:hx-put     (bidi/path-for ssr-routes/only-routes
-                                       :active-client
-                                       :request-method :put)
-            :hx-target  "#company-dropdown"
-            :hx-headers (format "{\"x-clients\": \"[%d]\"}" id)
-            :hx-swap    "outerHTML"
-            :hx-trigger "click"}
-        name]]])])
 
 (defn use-size [size]
   (if (= :small size)
diff --git a/src/clj/auto_ap/ssr/ui.clj b/src/clj/auto_ap/ssr/ui.clj
index 70041cfb..55cbcc8c 100644
--- a/src/clj/auto_ap/ssr/ui.clj
+++ b/src/clj/auto_ap/ssr/ui.clj
@@ -23,7 +23,7 @@
      [:link {:rel "icon" :type "image/png" :href "/favicon.png"}]
      [:link {:rel "stylesheet", :href "/output.css"}]
 
-     [:script {:src "https://code.jquery.com/jquery-3.7.1.min.js"}]
+     #_[:script {:src "https://code.jquery.com/jquery-3.7.1.min.js"}]
      [:script {:src "https://unpkg.com/hyperscript.org@0.9.7/dist/_hyperscript.min.js"}]
      [:script {:src "https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js"}]
      [:script {:src "https://cdn.plaid.com/link/v2/stable/link-initialize.js"}]
@@ -35,8 +35,12 @@
     [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/css/datepicker.min.css"}]
 
     [:script {:type "text/javascript" :src "https://cdn.jsdelivr.net/npm/vanillajs-datepicker@1.1.4/dist/js/datepicker-full.min.js"}]
-    [:script {:type "text/javascript", :src "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"}]
-    [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"}]
+
+
+    #_[:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/base.min.css"}]
+    [:link {:rel "stylesheet" :href "https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/styles/choices.min.css"}]
+    [:script {:src "https://cdn.jsdelivr.net/npm/choices.js@9.0.1/public/assets/scripts/choices.min.js"}]
+
     [:script {:src "https://unpkg.com/dropzone@5.9.3/dist/min/dropzone.min.js"}]
     [:link {:rel "stylesheet" :href "https://unpkg.com/dropzone@5/dist/min/dropzone.min.css"  :type "text/css"}]
     [:style
diff --git a/src/clj/auto_ap/ssr/users.clj b/src/clj/auto_ap/ssr/users.clj
index 8117babe..9e4dadb8 100644
--- a/src/clj/auto_ap/ssr/users.clj
+++ b/src/clj/auto_ap/ssr/users.clj
@@ -19,10 +19,10 @@
    [auto-ap.time :as atime]
    [bidi.bidi :as bidi]
    [buddy.sign.jwt :as jwt]
-   [clj-http.client :as client]
    [clojure.string :as str]
    [config.core :refer [env]]
-   [datomic.api :as dc]))
+   [datomic.api :as dc]
+   [malli.core :as mc]))
 
 (defn filters [request]
   [:form {"hx-trigger"         "change delay:500ms, keyup changed from:.hot-filter delay:1000ms"
@@ -290,6 +290,7 @@
              (com/field {:label "Role"}
                         (com/select {:name        "role"
                                      :class "w-36"
+                                     :autofocus true
                                      :id          "role"
                                      :value       (name (:user/role user))
                                      :options [["none" "None"]
@@ -304,7 +305,7 @@
                                         :multiple "multiple"
                                         :url (bidi/path-for ssr-routes/only-routes
                                                             :company-search)
-                                        :id      "role"
+                                        :id      "clients"
                                         :value (map
                                                  (fn [client]
                                                    [(:db/id client) (:client/name client)])
diff --git a/src/cljc/auto_ap/shared_views/admin/side_bar.cljc b/src/cljc/auto_ap/shared_views/admin/side_bar.cljc
index c2dacca6..fc4256d1 100644
--- a/src/cljc/auto_ap/shared_views/admin/side_bar.cljc
+++ b/src/cljc/auto_ap/shared_views/admin/side_bar.cljc
@@ -52,7 +52,7 @@
                :icon-class   "icon icon-single-neutral-book"
                :test-route   #{:admin-users}
                :active-route active-route
-               :route        :admin-users
+               :route        :users
                :icon-style {:font-size "25px"}})
    (menu-item {:label        "Accounts"
                :icon-class   "icon icon-list-bullets"