(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-effect "console.log('periods are', periods)" :x-init "$watch('periods', ds => source_date= ds.length > 0 ? ds[0].end : null)" } [:template {:x-for "(v,n) in periods" ":key" "n"} [: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)"} [:span "13 periods, ending " [:span {:x-text "source_date"}]]) (buttons/a-button- {"@click" "periods=[calendarYearPeriod(source_date)]"} [:span "Calendar year (" [:span {:x-text "parseMMDDYYYY(source_date).getFullYear()"}] ")"]) (buttons/a-button- {"@click" "periods=getTwelveCalendarMonthsPeriods(source_date)"} [:span "12 months, ending " [:span {:x-text "parseMMDDYYYY(source_date).toLocaleString('default', { month: 'long' })"}]]) [:hr {:class "h-px my-1 bg-gray-200 border-0 dark:bg-gray-700"} ] (buttons/a-button- {"@click" "periods=getLastMonthPeriods()"} "Last Month") (buttons/a-button- {"@click" "periods=getMonthToDatePeriods()"} "Month to date") (buttons/a-button- {"@click" "periods=getYearToDatePeriods()"} "Year to date") (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"}) "@change-date.camel" "$el.querySelectorAll('.text-inputs.' + calendarWhich)[calendarTarget].focus()"} (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- { :class "text-inputs start" :x-model "periods[i].start" "@focus" "calendarTarget =i; calendarWhich='start'" }) (inputs/text-input- { :class "text-inputs end" :x-model "periods[i].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"}) ]]]]) (defn dates-dropdown- [{:keys [value name]}] [:div {:x-data (hx/json {:dates (map #(atime/unparse-local % atime/normal-date) value)})} [:template {:x-for "v in dates"} [:input {:type "hidden" :name name :x-model "v"}]] (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 "dates.length == 0"} [:span.text-left.text-gray-400 "None selected"]] [:template {:x-if "dates.length < 3 && dates.length > 0"} [:span.inline-flex.gap-2 [:template {:x-for "v in dates"} (tags/pill- {:color :secondary} [:span {:x-text "v"}])]]] [:template {:x-if "dates.length >= 3"} (tags/pill- {:color :secondary} [:span {:x-text "dates.length"}] " dates")] [: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 {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4"} [:div.flex.flex-col.gap-2 (tabs/tabs- {:tabs [{:name "Quick" :content [:div.flex.flex.gap-2 (inputs/multi-calendar-input- {:placeholder "12/21/2020" :x-model "dates"}) [:div.flex.flex-col.gap-2 (buttons/a-button- {"@click" "dates=getFourWeekPeriods(dates[dates.length -1])"} "13 periods") (buttons/a-button- {"@click" "dates=withLastYear(dates[dates.length -1])"} "Add prior year") (buttons/a-button- {"@click" "dates=[]"} "Clear")]]} {:name "Advanced oooo" :content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]" :x-data (hx/json {:calendarTarget "0" }) "@change-date.camel" "$el.querySelectorAll('.text-inputs')[calendarTarget].focus();"} (inputs/calendar-input- {:x-model "dates[calendarTarget]" }) [:div.flex.flex-col.gap-4.p-2 [:div.overflow-y-scroll.flex.flex-col.gap-4 [:template {:x-for "(p, i) in dates" ":key" "i"} [:div.flex.gap-4. (inputs/text-input- {:x-model "dates[i]" "@focus" "calendarTarget =i; " :class "text-inputs"}) (buttons/a-icon-button- {"@click.prevent.stop" "dates=dates.filter((_, i2) => i !== i2); calendarTarget=0"} svg/x)] ]] (buttons/button- {"@click.prevent.stop" "dates.push(null); calendarTarget=0" :class "w-32"} "Add new period")]]}] :active "Quick"})]]]])