notid/integreat
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

applying feedback

Browse Source
This commit is contained in:
Bryce
2024-11-20 09:48:07 -08:00
parent d534b9e10f
commit a4a40fc9c2
6 changed files with 73 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
src/clj/auto_ap/ssr/components/periods.clj
View File

@@ -74,4 +74,55 @@
[:span {:x-text "p.end"}])]]
(buttons/button- {"@click.prevent.stop" "periods.push({start: '', end: ''}); calendarTarget=0" :class "w-32"} "Add new period")]
]}]
:active "Quick"}) ]]]])
: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"
:content [:div.flex.gap-4 {:class "overflow-hidden max-h-[300px]"
:x-data (hx/json {:calendarTarget "0" })}
(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 "p" "@focus" "calendarTarget =i; 'start'"})
(buttons/a-icon-button- {"@click.prevent.stop" "dates=dates.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" "dates.push(null); calendarTarget=0" :class "w-32"} "Add new period")]]}]
:active "Quick"})]]]])