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

makes user page better.

Browse Source
This commit is contained in:
Bryce
2023-10-12 23:27:49 -07:00
parent d9fec54062
commit 1e4dabfa07
7 changed files with 166 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/input.css
View File

@@ -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;
}

118
resources/public/output.css
View File

@@ -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 {

4
src/clj/auto_ap/ssr/company.clj
View File

@@ -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))

61
src/clj/auto_ap/ssr/components/inputs.clj
View File

@@ -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)

10
src/clj/auto_ap/ssr/ui.clj
View File

@@ -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

7
src/clj/auto_ap/ssr/users.clj
View File

@@ -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)])

2
src/cljc/auto_ap/shared_views/admin/side_bar.cljc
View File

@@ -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"