79 lines
4.1 KiB
Clojure
79 lines
4.1 KiB
Clojure
(ns auto-ap.ssr.components.page
|
|
(:require [auto-ap.ssr.components.aside :refer [left-aside-]]
|
|
[auto-ap.ssr.components.navbar :refer [navbar-]]
|
|
[auto-ap.ssr.hx :as hx]
|
|
[auto-ap.ssr.svg :as svg]
|
|
[config.core :refer [env]]
|
|
[hiccup2.core :as hiccup]))
|
|
|
|
(defn page- [{:keys [nav page-specific client clients client-selection identity app-params request] :or {app-params {}} } & children]
|
|
[:div#app { "@notification.document" "notificationDetails=event.detail.value; showNotification=true"
|
|
|
|
:x-data (hx/json {:leftNavShow true
|
|
:showError false
|
|
:errorDetails ""
|
|
:showNotification false
|
|
:notificationDetails ""})
|
|
"@htmx:response-error.camel" "errorDetails = $event.detail.xhr.response; showError=true;"
|
|
}
|
|
(navbar- {:client-selection client-selection
|
|
:clients clients
|
|
:client client
|
|
:identity identity
|
|
:dd-env (:dd-env env)})
|
|
[:div#app-contents.flex.pt-16.overflow-hidden (assoc app-params
|
|
:hx-disinherit "*"
|
|
:x-init "leftNavShow = true")
|
|
(left-aside- {:nav (when nav
|
|
(nav request))
|
|
:page-specific page-specific})
|
|
[:div#main-content {:class "relative w-full h-full overflow-y-auto px-4 bg-gray-100 dark:bg-gray-900 min-h-content lg:pl-64"
|
|
":class" "leftNavShow ? 'lg:pl-64' : ''"
|
|
:x-effect "leftNavShow ? $el.classList.add('lg:pl-64') : $el.classList.remove('lg:pl-64')"
|
|
}
|
|
[: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
|
|
{ "@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.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 {:x-html "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
|
|
[:div.relative
|
|
[:button.absolute.right-2.top-2.w-6.h-6.z-50.text-red-600
|
|
{ "@click" "showError=false"}
|
|
svg/filled-x]]
|
|
|
|
[:div.m-4.overflow-auto.z-30.flex.center-items.justify-center.text-red-800.bg-red-50.dark:bg-gray-800.dark:text-red-400.border-red-300.rounded-lg.border.max-h-96
|
|
{:x-show "showError"
|
|
"x-transition:enter" "transition duration-300"
|
|
"x-transition:enter-start" "opacity-0"
|
|
"x-transition:enter-end" "opacity-100"}
|
|
|
|
[:div {:class "p-4 mb-4 text-lg w-full" :role "alert"}
|
|
[:div.inline-block.w-8.h-8.mr-2 svg/alert]
|
|
[:span.font-medium "Oh, drat! An unexpected error has occurred."]
|
|
[:div.text-sm {:x-data (hx/json {"expandError" false})}
|
|
[:p "Integreat staff have been notified and are looking into it. "]
|
|
[:p "To see error details, " [:a.underline.cursor-pointer {"@click" "expandError=true"} "click here"] "."]
|
|
[:pre#error-details.text-xs {:x-show "expandError" :x-text "errorDetails"}]]]]]]
|
|
(into
|
|
[:div.p-4]
|
|
children)]]
|
|
|
|
])
|