137 lines
9.2 KiB
Clojure
137 lines
9.2 KiB
Clojure
(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"})]]]]) |