Makes the entire form work but it just looks janky

This commit is contained in:
2023-10-19 22:11:19 -07:00
parent 6059e8a4ca
commit 6863684d9e
21 changed files with 1334 additions and 181 deletions

View File

@@ -1,6 +1,7 @@
(ns auto-ap.ssr.components.inputs
(:require
[hiccup2.core :as hiccup]))
[hiccup2.core :as hiccup]
[clojure.string :as str]))
(defn select- [params & children]
@@ -22,22 +23,24 @@
[:select (-> params
(dissoc :url)
(dissoc :value)
)
(for [[k v] (if (:multiple params)
(:value params)
(dissoc :value-fn)
(dissoc :content-fn))
(for [value (if (:multiple params)
(:value params)
[(:value params)])
:when k]
[:option {:value k :selected true} v]
)
:when ((:value-fn params first) value)]
[:option {:value ((:value-fn params first) value) :selected true} ((:content-fn params second) value)])
[:script {:lang "javascript"}
(hiccup/raw (format "
(function () {
var element = document.getElementById('%s');
var c = new Choices(element, {removeItems: true, removeItemButton:true, searchFloor: 3, searchPlaceholderValue: '%s'});
let baseUrl = '%s';
element.addEventListener('search', function (e) {
let data = fetch('%s?q=' + e.detail.value)
let fullUrl = baseUrl + (baseUrl.includes(\"?\") ? \"&\" : \"?\") + \"q=\" + e.detail.value;
let data = fetch(fullUrl)
.then(res => res.json())
.then(data => {
c.setChoices(data, 'value', 'label', true)
@@ -77,6 +80,17 @@ c.clearChoices();
(update :class #(str % (use-size size)))
(assoc :type "number"
:step "0.01")
(dissoc :size))])
(defn int-input- [{:keys [size] :as params}]
[:input
(-> params
(update
:class str " bg-gray-50 border border-gray-300 text-gray-900 rounded-lg focus:ring-blue-500 focus:border-blue-500 block 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-right appearance-none"
)
(update :class #(str % (use-size size)))
(assoc :type "number"
:step "1")
(dissoc :size))
])
@@ -93,12 +107,21 @@ c.clearChoices();
(update :class #(str % (use-size size)))
(dissoc :size))]])
(defn field-errors- [{:keys [source key]} & rest]
(if-let [errors (:errors (cond-> (meta source)
key (get key)))]
[:div.text-red-500 (str/join ", " errors)]
[:div (hiccup/raw " ")]))
(defn field- [params & rest]
(into
[:div {:id (:id params)}
[:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)]]
rest))
[:div {:id (:id params)}
[:label {:class "block mb-2 text-sm font-medium text-gray-900 dark:text-white"} (:label params)]
rest
(when (:error-source params)
(field-errors- {:source (:error-source params)
:key (:error-key params)}))])
(defn hidden- [{:keys [name value]}]
[:input {:type "hidden" :value value :name name}]
)
[:input {:type "hidden" :value value :name name}])