Makes an experience for balance sheet multi choice
This commit is contained in:
@@ -356,22 +356,28 @@
|
||||
(for [v (:value params)
|
||||
:when v]
|
||||
(some-> v (atime/unparse-local atime/normal-date))))]
|
||||
(println "MY VALUE IS" value)
|
||||
[:div.shrink {:x-data (hx/json {:value value})}
|
||||
[:input
|
||||
[:div.shrink {:x-data (hx/json {:value value
|
||||
:dp nil })
|
||||
:x-modelable "value"
|
||||
:x-model (:x-model params) }
|
||||
[:template {:x-for "v in value"}
|
||||
[:input {:type "hidden" :name (:name params) :x-model "v"}]]
|
||||
[:div
|
||||
(-> params
|
||||
(update :class (fnil hh/add-class "") default-input-classes)
|
||||
(assoc :x-modelable "value")
|
||||
(assoc :type "text")
|
||||
(assoc :x-data (hx/json {:dp nil}) )
|
||||
(assoc :value value)
|
||||
(assoc :x-init " dp = initMultiDatepicker($el);")
|
||||
;; the data-date field has to be bound before the datepicker can be initialized
|
||||
(assoc :x-init "$nextTick(() => { dp = initMultiDatepicker($el, value); ;}); ")
|
||||
(assoc "x-effect" "setTimeout(()=> { if(dp) { dp.setDate(Array.from(value), {clear: true}); }}, 2000) ")
|
||||
(assoc ":data-date" "Array.prototype.join.call(value, ', ')")
|
||||
(assoc "@htmx:before-history-save" "destroyDatepicker(dp)" )
|
||||
(assoc "@htmx:before-cleanup-element" "destroyDatepicker(dp)" )
|
||||
(assoc "@change" "value = $event.target.value;")
|
||||
(assoc "hx-on" (hiccup/raw "changeDate: htmx.trigger(this, \"change\") "))
|
||||
(assoc "x-destroy" "destroyDatepicker(dp)")
|
||||
(assoc "@change-date.camel" "console.log('date changing'); value = dp.getDate(\"mm/dd/yyyy\");")
|
||||
|
||||
(update :class #(str % (use-size size) " w-full"))
|
||||
(dissoc :size))]]))
|
||||
(dissoc :size :name :x-model :x-modelable))]]))
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -290,9 +290,33 @@
|
||||
(fc/with-field :date
|
||||
(com/validated-inline-field {:label "Date"
|
||||
:errors (fc/field-errors)}
|
||||
(com/multi-date-input {:placeholder "12/21/2020"
|
||||
:name (fc/field-name)
|
||||
:value (fc/field-value)})))
|
||||
[:div {:x-data (hx/json {:dates (map #(atime/unparse-local % atime/normal-date) (fc/field-value))}) }
|
||||
[:template {:x-for "v in dates"}
|
||||
[:input {:type "hidden"
|
||||
:name (fc/field-name)
|
||||
:x-model "v"}] ]
|
||||
(com/a-button {"x-tooltip.on.click.theme.dropdown.placement.bottom.interactive" "{content: ()=> $refs.tooltip.innerHTML, allowHTML: true, appendTo: $root}"}
|
||||
|
||||
[: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" }
|
||||
(com/pill {:color :secondary}
|
||||
[:span {:x-text "v"}])]]]
|
||||
[:template {:x-if "dates.length >= 3"}
|
||||
(com/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
|
||||
(com/multi-date-input {:placeholder "12/21/2020"
|
||||
:x-model "dates" })
|
||||
(com/a-button {"@click" "dates=getFourWeekPeriods(dates[dates.length -1])"} "13 periods")
|
||||
(com/a-button {"@click" "dates=[]"} "Clear")]]]]))
|
||||
|
||||
(com/button {:color :primary :class "w-32"}
|
||||
"Run")
|
||||
|
||||
Reference in New Issue
Block a user