cleans stuff up.

This commit is contained in:
2024-11-23 21:13:15 -08:00
parent 39d8e6e71f
commit 98dcdb5a55
12 changed files with 79 additions and 92 deletions

View File

@@ -236,8 +236,3 @@
(if (seq children)
children
"Save")))
(defn tooltip- [{:as params} & children]
[:div (assoc params
:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 p-4 absolute")
[:span children]])

View File

@@ -1,20 +1,19 @@
(ns auto-ap.ssr.components.data-grid
(:require
[auto-ap.logging :as alog]
[auto-ap.ssr-routes :as ssr-routes]
[auto-ap.ssr.components.buttons :refer [a-button-]]
[auto-ap.ssr.components.card :refer [content-card-]]
[auto-ap.ssr.components.inputs :as inputs]
[auto-ap.ssr.components.paginator :refer [paginator-]]
[auto-ap.ssr.hiccup-helper :as hh]
[auto-ap.ssr.hx :as hx]
[auto-ap.ssr.hx :as hx :refer [js-fn]]
[bidi.bidi :as bidi]
[hiccup.util :as hu]
[hiccup2.core :as hiccup]))
(defn header- [params & rest]
(into [:th.px-4.py-3 {:scope "col" :class (:class params)
"_" (hiccup/raw (when (:sort-key params ) (format "on click trigger sorted(key:\"%s\")", (:sort-key params))))
"@click" (format "$dispatch('sorted', {key: '%s'})" (:sort-key params))
:style (:style params)}]
(if (:sort-key params)
[(into [:a {:href "#"} ] rest)]
@@ -22,7 +21,7 @@
(defn sort-header- [params & rest]
[:th.px-4.py-3 {:scope "col" :class (:class params)
"_" (hiccup/raw (format "on click trigger sorted(key:\"%s\")", (:sort-key params)))}
"@click" (format "$dispatch('sorted', {key: '%s'})" (:sort-key params)) }
(into [:a {:href "#"} ] rest)])
(defn row- [params & rest]

View File

@@ -7,13 +7,13 @@
[hiccup2.core :as hiccup]))
(defn page- [{:keys [nav page-specific client clients client-selection identity app-params request] :or {app-params {}} } & children]
[:div#app {"_" (hiccup/raw "
on notification from body put event.detail.value into #notification-details then add .htmx-added to #notification-holder then remove .hidden from #notification-holder then wait 30ms then remove .htmx-added from #notification-holder "
)
[:div#app { "@notification.document" "notificationDetails=event.detail.value; showNotification=true"
:x-data (hx/json {:leftNavShow true
:showError false
:errorDetails ""})
:errorDetails ""
:showNotification false
:notificationDetails ""})
"@htmx:response-error.camel" "errorDetails = $event.detail.xhr.response; showError=true;"
}
(navbar- {:client-selection client-selection
@@ -31,18 +31,25 @@
":class" "leftNavShow ? 'lg:pl-64' : ''"
:x-effect "leftNavShow ? $el.classList.add('lg:pl-64') : $el.classList.remove('lg:pl-64')"
}
[:div#notification-holder.hidden
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg
[:div#notification-holder
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg {:x-show "showNotification" }
[:div.relative
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-blue-400
{"_" (hiccup/raw "on click add .hidden to #notification-holder")}
{ "@click" "showNotification=false"}
svg/filled-x]]
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-blue-800.bg-blue-50.dark:bg-gray-800.dark:text-blue-400.border-blue-300.rounded-lg.border.transition-all.duration-500.fade-in.slide-up.max-h-96
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-blue-800.bg-blue-50.dark:bg-gray-800.dark:text-blue-400.border-blue-300.rounded-lg.border.max-h-96
{:x-show "showNotification"
"x-transition:enter" "transition duration-300 transform ease-in-out"
"x-transition:enter-start" "opacity-0 translate-y-full"
"x-transition:enter-end" "opacity-100 translate-y-0"
"x-transition:leave" "transition duration-300 transform ease-in-out"
"x-transition:leave-start" "opacity-100 translate-y-0"
"x-transition:leave-end" "opacity-0 translate-y-full"}
[:div {:class "p-4 text-lg w-full" :role "alert"}
[:div.text-sm
[:pre#notification-details.text-xs]]]]]]
[:pre#notification-details.text-xs {:x-text "notificationDetails"}]]]]]]
[:div {:x-show "showError"
:x-init ""}
[:div.fixed.top-0.right-0.left-0.z-30.mx-auto.max-w-screen-lg.w-screen-lg.my-0.pt-8.rounded-lg

View File

@@ -11,18 +11,15 @@
[:div {:class "flex items-center ml-3 mr-10"}
[:div
[:button#user-menu-button {:type "button", :class "flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600", :aria-expanded "false"
"_" (hiccup/raw "init call initUserDropdown()")}
"@click" "$tooltip($refs.tooltip, {content: ()=>$refs.tooltip.innerHTML, theme: $store.darkMode.on ? 'dark' : 'light', allowHTML: true, interactive:true})"
}
[:span {:class "sr-only"} "Open user menu"]
[:img {:class "w-8 h-8 rounded-full", :src (pull-attr (dc/db conn) :user/profile-image-url (:db/id identity)) :alt "user photo" :referrerpolicy "no-referrer"}]]]
[:div#user-menu {:class "z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 mr-10"}
[:template {:class ""
:x-ref "tooltip"}
[:div {:class "px-4 py-3", :role "none"}
[:p {:class "text-sm text-gray-900 dark:text-white", :role "none"} (:user/name identity)]
[:p {:class "text-sm font-medium text-gray-900 truncate dark:text-gray-300", :role "none"} (pull-attr (dc/db conn) :user/email (:db/id identity))]
#_(icon-button-
{"_" (hiccup/raw "on click toggle .dark on <body />")}
[:div.h-4.w-4
[:div.hidden.dark:block svg/sun]
[:div.dark:hidden svg/moon]])]
[:p {:class "text-sm font-medium text-gray-900 truncate dark:text-gray-300", :role "none"} (pull-attr (dc/db conn) :user/email (:db/id identity))] ]
[:ul {:class "py-1", :role "none"}
[:li
[:a {:href (bidi/path-for ssr-routes/only-routes :company), :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "My Company"]]
@@ -31,32 +28,7 @@
:class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Admin"])
[:li
[:a {:href "#", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"
"_" (hiccup/raw "on click toggle .dark on <body />")}
"@click.prevent" "$store.darkMode.toggle()" }
"Night Mode"]]
[:li
[:a {:href "/logout", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Sign out"]]]]
[:script {:lang "text/javascript"}
(hiccup/raw
"
function initUserDropdown() {
var $dropdownTargetEl = document.getElementById('user-menu');
// set the element that trigger the dropdown menu on click
var $dropdownTriggerEl = document.getElementById('user-menu-button');
var userDrowdown = new Dropdown($dropdownTargetEl, $dropdownTriggerEl, {
placement: 'bottom',
triggerType: 'click',
offsetSkidding: 0,
offsetDistance: 10,
delay: 5000,
onHide: () => {
},
onShow: () => {
},
onToggle: () => {
}
});
}
")]])
[:a {:href "/logout", :class "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white", :role "menuitem"} "Sign out"]]]] ])