Making investigate improvements.

This commit is contained in:
2024-11-17 22:01:48 -08:00
parent 18172df3f8
commit f634d8fd81
6 changed files with 232 additions and 128 deletions

View File

@@ -75,26 +75,28 @@
thead-params
start
per-page
root-params
flash-id
headers
raw?
rows] :as params} & children]
(let [card (if raw? raw-table-card content-card-)]
(card
(cond-> { :id id :class (cond-> "group" raw? (hh/add-class "raw h-full flex flex-col overflow-hidden"))}
(cond-> { :id id :class (cond-> "group" raw? (hh/add-class "raw h-full flex flex-col overflow-hidden")) }
root-params (merge root-params)
route (assoc
:hx-get (bidi/path-for ssr-routes/only-routes
route
:request-method :get)
:hx-trigger "clientSelected from:body, invalidated from:body"
:hx-swap "outerHTML swap:300ms"))
[:div {:class " group-[.raw]:hidden flex flex-col px-4 py-3 space-y-3 lg:flex-row lg:items-baseline lg:justify-between lg:space-y-0 lg:space-x-4 text-gray-800 dark:text-gray-100"}
[:div {:class " flex flex-col px-4 py-3 space-y-3 lg:flex-row lg:items-baseline lg:justify-between lg:space-y-0 lg:space-x-4 text-gray-800 dark:text-gray-100"}
[:h1.text-2xl.mb-3.font-bold title]
[:div {:class "flex items-center flex-1 space-x-4"}
[:h5
(when subtitle
[:span subtitle])]]
(into [:div {:class "flex flex-col flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"}]
(into [:div {:class "group-[.raw]:hidden flex flex-col flex-shrink-0 space-y-3 md:flex-row md:items-center lg:justify-end md:space-y-0 md:space-x-3"}]
action-buttons)]
[:div {:class "overflow-x-auto contents"}
(data-grid- {:headers headers

View File

@@ -0,0 +1,77 @@
(ns auto-ap.ssr.components.periods
(:require
[auto-ap.ssr.components.buttons :as buttons]
[auto-ap.ssr.components.inputs :as inputs]
[auto-ap.ssr.components.tabs :as tabs]
[auto-ap.ssr.components.tags :as tags]
[auto-ap.ssr.hx :as hx]
[auto-ap.ssr.svg :as svg]
[auto-ap.time :as atime]))
(defn periods-dropdown- [{:keys [value]}]
[:div {:x-data (hx/json {:periods (map (fn [p]
{:start (atime/unparse-local (:start p) atime/normal-date)
:end (atime/unparse-local (:end p) atime/normal-date)})
value)
:source_date (-> value
first
:end
(atime/unparse-local atime/normal-date))})
:x-init "$watch('periods', ds => source_date= ds.length > 0 ? ds[0].end : null)"}
[:template {:x-for "(v,n) in periods"}
[:div
[:input {:type "hidden"
":name" "'periods[' + n + '][start]'"
:x-model "v.start"}]
[:input {:type "hidden"
":name" "'periods[' + n + '][end]'"
:x-model "v.end"}]]]
(buttons/a-button- {"x-tooltip.on.click.theme.dropdown.placement.bottom.interactive" "{content: ()=> $refs.tooltip.innerHTML, allowHTML: true, appendTo: $root}"
:indicator? false}
[:template {:x-if "periods.length == 0"}
[:span.text-left.text-gray-400 "None selected"]]
[:template {:x-if "periods.length < 3 && periods.length > 0"}
[:span.inline-flex.gap-2
[:template {:x-for "p in periods"}
(tags/pill- {:color :secondary}
[:span {:x-text "p.start"}]
" - "
[:span {:x-text "p.end"}])]]]
[:template {:x-if "periods.length >= 3"}
(tags/pill- {:color :secondary}
[:span {:x-text "periods.length"}]
" periods selected")]
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down])
[:template {:x-ref "tooltip"}
[:div.p-4.gap-2 {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4 w-[700px] "}
[:div.flex.flex-col.gap-2
(tabs/tabs-
{:tabs [{:name "Quick"
:content [:div.flex.flex.gap-2
(inputs/calendar-input- {:placeholder "12/21/2020" :x-model "source_date"})
[:div.flex.flex-col.gap-2
(buttons/a-button- {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} "13 periods")
(buttons/a-button- {"@click" "periods=[calendarYearPeriod(source_date)]"} "Calendar year")
(buttons/a-button- {"@click" "periods=getLastMonthPeriods()"} "Last Month")
(buttons/a-button- {"@click" "periods=[]"} "Clear")]]}
{:name "Advanced"
:content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
:x-data (hx/json {:calendarTarget "0"
:calendarWhich "start"}) }
(inputs/calendar-input- {:x-model "periods[calendarTarget][calendarWhich]"})
[:div.flex.flex-col.gap-4.p-2
[:div.overflow-y-scroll.flex.flex-col.gap-4
[:template {:x-for "(p, i) in periods" ":key" "i"}
[:div.flex.gap-4.
(inputs/text-input- { :x-model "p.start" "@focus" "calendarTarget =i; calendarWhich='start'" })
(inputs/text-input- { :x-model "p.end" "@focus" "calendarTarget =i; calendarWhich='end'"})
(buttons/a-icon-button- {"@click.prevent.stop" "periods=periods.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)]
#_(com/pill {:color :secondary}
[:span {:x-text "p.start"}]
" - "
[:span {:x-text "p.end"}])]]
(buttons/button- {"@click.prevent.stop" "periods.push({start: '', end: ''}); calendarTarget=0" :class "w-32"} "Add new period")]
]}]
:active "Quick"}) ]]]])