cleans stuff up.
This commit is contained in:
@@ -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]])
|
||||
|
||||
@@ -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]
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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"]]]] ])
|
||||
|
||||
Reference in New Issue
Block a user