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

Makes the entire form work but it just looks janky

Browse Source
This commit is contained in:
Bryce
2023-10-19 22:11:19 -07:00
parent 6059e8a4ca
commit 6863684d9e
21 changed files with 1334 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/clj/auto_ap/ssr/components/data_grid.clj
View File

@@ -37,8 +37,8 @@
[:input {:id "checkbox-all", :type "checkbox", :class "w-4 h-4 bg-gray-100 border-gray-300 rounded text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"}]
[:label {:for "checkbox-all", :class "sr-only"} "checkbox"]]])
(defn data-grid- [{:keys [headers thead-params]} & rest]
[:table {:class "w-full text-sm text-left text-gray-500 dark:text-gray-400"}
(defn data-grid- [{:keys [headers thead-params id]} & rest]
[:table {:class "w-full text-sm text-left text-gray-500 dark:text-gray-400" :id id}
[:thead (assoc thead-params :class "text-xs text-gray-800 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400")
(into
[:tr]

40
src/clj/auto_ap/ssr/components/dialog.clj
View File

@@ -2,43 +2,15 @@
(:require [hiccup2.core :as hiccup]))
(defn modal- [params & children]
[:div
[:div#modal-holder { :tabindex "-1", :class "fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center hidden" :aria-hidden true
"_" (hiccup/raw "on closeModal transition <#modal-holder .modal-content /> opacity to 0.0 over 300ms then call hideModal() ")}
[:div {:class (str "relative w-full max-h-full " (or (:modal-class params) " max-w-2xl "))}
(into [:div#modal-content]
children)]
]
[:script {:lang "text/javascript"}
(hiccup/raw "
var modal_element = document.getElementById('modal-holder');
var modal_options = {
placement: 'center',
backdrop: 'dynamic',
backdropClasess: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
closable: true,
onOpen: function() {
modal_element.dispatchEvent('openModal');
},
onHide: function() {
modal_element.outerHTML='<div id=\"modal-holder\"><div class=\"relative w-full max-w-2xl max-h-full\"><div id=\"modal-content\"></div></div></div>';
},
};
var curModal = new Modal(modal_element, modal_options);
curModal.show();
function hideModal() {
curModal.hide();
}
")
]])
[:div {:class (str "relative w-full max-h-full " (or (:modal-class params) " max-w-2xl "))}
(into [:div#modal-content]
children)]
)
(defn modal-card- [params header content footer]
[:div#modal-card params
[:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in slide-up duration-300 transition-all modal-content"}
[:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in-settle slide-up-settle duration-300 transition-all modal-content"}
[:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header]
[:div {:class "p-6 space-y-6"}
content]
[:div footer]]
])
[:div footer]]])

51
src/clj/auto_ap/ssr/components/inputs.clj
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 "&nbsp;")]))
(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}])

2
src/clj/auto_ap/ssr/components/page.clj
View File

@@ -49,4 +49,4 @@
(into
[:div.p-4]
children)]]
[:div#modal-holder]])
])

23
src/clj/auto_ap/ssr/components/radio.clj
View File

@@ -1,22 +1,23 @@
(ns auto-ap.ssr.components.radio)
(defn radio- [{:keys [options name title size] :or {size :medium}}]
(defn radio- [{:keys [options name title size] :or {size :medium} selected-value :value}]
[:h3 {:class "mb-4 font-semibold text-gray-900 dark:text-white"} title]
[:ul {:class "w-48 text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white"}
(for [{:keys [value content]} options]
[:li {:class "w-full border-b border-gray-200 rounded-t-lg dark:border-gray-600"}
[:div {:class "flex items-center pl-3"}
[:input {:id (str "list-" name "-" value)
:type "radio",
:value value
:name name
:class
(cond-> "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
(= size :small)
(str " " "text-xs")
[:input (cond-> {:id (str "list-" name "-" value)
:type "radio",
:value value
:name name
:class
(cond-> "w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-700 dark:focus:ring-offset-gray-700 focus:ring-2 dark:bg-gray-600 dark:border-gray-500"
(= size :small)
(str " " "text-xs")
(= size :medium)
(str " " "text-sm"))}]
(= size :medium)
(str " " "text-sm"))}
(= (cond-> selected-value (keyword? selected-value) clojure.core/name) value) (assoc :checked true))]
[:label {:for (str "list-" name "-" value)
:class
(cond-> "w-full ml-2 font-medium text-gray-900 dark:text-gray-300"