Adds advanced view

This commit is contained in:
2024-11-13 20:03:04 -08:00
parent 6291a6c8cd
commit d119e01857
9 changed files with 553 additions and 60 deletions

View File

@@ -139,6 +139,69 @@
:table table-contents
:warning (not-empty (str/join "\n " (filter not-empty [warning (:warning report)])))}))))])
(defn- periods-dropdown []
[: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)})
(fc/field-value))
:source_date (-> (fc/field-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"}]]]
(com/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"}
(com/pill {:color :secondary}
[:span {:x-text "p.start"}]
" - "
[:span {:x-text "p.end"}])]]]
[:template {:x-if "periods.length >= 3"}
(com/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
(com/tabs
{:tabs [{:name "Quick"
:content [:div.flex.flex.gap-2
(com/calendar-input {:placeholder "12/21/2020" :x-model "source_date"})
[:div.flex.flex-col.gap-2
(com/a-button {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} "13 periods")
(com/a-button {"@click" "periods=[calendarYearPeriod(source_date)]"} "Calendar year")
(com/a-button {"@click" "periods=getLastMonthPeriods()"} "Last Month")
(com/a-button {"@click" "periods=[]"} "Clear")]]}
{:name "Advanced"
:content [:div.flex.flex-col.gap-2 {:class "max-h-[500px] overflow-scroll"}
[:template {:x-for "(p, i) in periods" ":key" "i"}
[:div.flex.gap-2
(com/text-input { :x-model "p.start" })
(com/text-input { :x-model "p.end" })
(com/a-icon-button {"@click.prevent.stop" "periods=periods.filter((_, i2) => i !== i2)"} svg/x)]
#_(com/pill {:color :secondary}
[:span {:x-text "p.start"}]
" - "
[:span {:x-text "p.end"}])]
(com/button {"@click.prevent.stop" "periods.push({start: '', end: ''})" :class "w-32"} "Add new period")
]}]
:active "Quick"}) ]]]])
(defn form* [request & children]
(let [params (or (:query-params request) {})]
(fc/start-form
@@ -166,53 +229,7 @@
(fc/with-field :periods
(com/validated-inline-field {:label "Periods"
:errors (fc/field-errors)}
[: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)})
(fc/field-value))
:source_date (-> (fc/field-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
(fc/with-field 0
(fc/with-field :start
[:input {:type "hidden"
":name" "'periods[' + n + '][start]'"
:x-model "v.start"}]))
(fc/with-field 0
(fc/with-field :end
[:input {:type "hidden"
":name" "'periods[' + n + '][end]'"
:x-model "v.end"}]))]]
(com/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"}
(com/pill {:color :secondary}
[:span {:x-text "p.start"}]
" - "
[:span {:x-text "p.end"}])]]]
[:template {:x-if "periods.length >= 3"}
(com/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 {: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
(com/calendar-input {:placeholder "12/21/2020" :x-model "source_date"})
(com/a-button {"@click" "periods=getFourWeekPeriodsPeriods(source_date)"} "13 periods")
(com/a-button {"@click" "periods=[calendarYearPeriod(source_date)]"} "Calendar year")
(com/a-button {"@click" "periods=[lastYearPeriod(source_date)]"} "Full year")
(com/a-button {"@click" "periods=[]"} "Clear")]]]]))
(periods-dropdown)))
(fc/with-field :column-per-location
(com/toggle {:name (fc/field-name)
:checked (fc/field-value)}