robsontenorio
commented
3 months ago No errors on console ? Show your model variables definition.
Closed ndarproj closed 3 months ago
robsontenorio
commented
3 months ago No errors on console ? Show your model variables definition.
ndarproj
commented
3 months ago @robsontenorio yes, no errors on console
idk if this would help but http://localhost:8000/livewire/update returns this whenever i update the selectbox that populates the values.
{
"components": [
{
"snapshot": "{\"data\":{\"metric\":[{\"name\":\"q\",\"point_allocation\":2,\"point_step\":1,\"free_points\":0,\"icon\":\"default.svg\",\"metric_type_id\":1,\"input_page_help\":\"asdasdsad\",\"helpful_info\":\"q\",\"auto_messaging_copy\":\"r\"},{\"class\":\"App\\\\Models\\\\Metric\",\"connection\":null,\"s\":\"elmdl\"}],\"selectedJourney\":\"\",\"selectedSeason\":\"\",\"selectedInterval\":\"\",\"selectedMetricLibrary\":\"9cb6ca60-f395-4d9d-92a5-faf5424c5f8c\",\"metricLibraries\":[[],{\"keys\":[\"9cb6ca60-f395-4d9d-92a5-faf5424c5f8c\"],\"class\":\"Illuminate\\\\Database\\\\Eloquent\\\\Collection\",\"modelClass\":\"App\\\\Models\\\\MetricLibrary\",\"s\":\"elcl\"}],\"allMetricTypes\":[[],{\"keys\":[1,2,3,4],\"class\":\"Illuminate\\\\Database\\\\Eloquent\\\\Collection\",\"modelClass\":\"App\\\\Models\\\\MetricType\",\"s\":\"elcl\"}],\"allJourneys\":[[],{\"keys\":[\"9cb6ca0d-1931-49d8-911b-72dbb09621a3\"],\"class\":\"Illuminate\\\\Database\\\\Eloquent\\\\Collection\",\"modelClass\":\"App\\\\Models\\\\Journey\",\"relations\":[\"seasons\"],\"s\":\"elcl\"}],\"allSeasons\":null,\"allIntervals\":null,\"icons\":[[[{\"id\":\"default.svg\",\"name\":\"Default\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/default.svg\"},{\"s\":\"arr\"}],[{\"id\":\"exercise.svg\",\"name\":\"Exercise\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/exercise.svg\"},{\"s\":\"arr\"}],[{\"id\":\"food.svg\",\"name\":\"Food\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/food.svg\"},{\"s\":\"arr\"}],[{\"id\":\"mind.svg\",\"name\":\"Mind\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/mind.svg\"},{\"s\":\"arr\"}],[{\"id\":\"stick.svg\",\"name\":\"Stick\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/stick.svg\"},{\"s\":\"arr\"}],[{\"id\":\"water.svg\",\"name\":\"Water\",\"src\":\"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/water.svg\"},{\"s\":\"arr\"}]],{\"s\":\"arr\"}]},\"memo\":{\"id\":\"NLbSbzR7uF2CA9Yob77d\",\"name\":\"metric.form\",\"path\":\"admin\\\/metrics\\\/form\",\"method\":\"GET\",\"children\":[],\"scripts\":[],\"assets\":[],\"errors\":[],\"locale\":\"en\"},\"checksum\":\"99630f32487eedf3a735b1cf9dbce540b45825496b9dd7ef0c0118b7ce43cbdf\"}",
"effects": {
"returns": [],
"html": "<div wire:id=\"NLbSbzR7uF2CA9Yob77d\">\n <div class=\"space-y-8 divide-y divide-gray-200\">\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 md:gap-6\">\n <div class=\"md:col-span-1\">\n <div class=\"px-4 space-y-4 sm:px-0\">\n <h3 class=\"text-lg font-medium leading-6 text-gray-900\">Metric Template<\/h3>\n <p class=\"mt-1 text-sm text-gray-600\">Select a Metric template to get started with one of our\n recommended metrics or create your own!<\/p>\n <p class=\"mt-1 text-sm text-gray-600\">If you select a Metric template, the copy in the\n 'Metric Details' section will be populated for you. Feel free to edit this to suit your\n needs.<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-5 md:col-span-2 md:mt-0\">\n <div class=\"shadow sm:overflow-hidden sm:rounded-md\">\n <div class=\"px-4 py-5 space-y-6 bg-white sm:p-6\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <div class=\"col-span-2\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary677fe344a87a6ff7a40b137fad6cc7f7selectedMetricLibrary\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Metric Library\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"relative flex-1\">\n <select\n id=\"mary677fe344a87a6ff7a40b137fad6cc7f7selectedMetricLibrary\"\n wire:model.lazy=\"selectedMetricLibrary\"\n class=\"select select-primary w-full font-normal\" wire:model.lazy=\"selectedMetricLibrary\"\n\n >\n <!--[if BLOCK]><![endif]--> <option value=\"\">Select Metric Library<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--> <option value=\"9cb6ca60-f395-4d9d-92a5-faf5424c5f8c\" >q<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n <\/select>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div> <\/div>\n <div class=\"col-span-2\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary8c0638ceadaed913db71067e0a289314metric.metric_type_id\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Metric Type\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"relative flex-1\">\n <select\n id=\"mary8c0638ceadaed913db71067e0a289314metric.metric_type_id\"\n wire:model=\"metric.metric_type_id\"\n class=\"select select-primary w-full font-normal\" wire:model=\"metric.metric_type_id\"\n\n >\n <!--[if BLOCK]><![endif]--> <option value=\"\">Select Metric Type<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--> <option value=\"1\" >Points<\/option>\n <option value=\"2\" >Negative Points<\/option>\n <option value=\"3\" >Yes\/No<\/option>\n <option value=\"4\" >Exercise<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n <\/select>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div> <\/div>\n <\/div>\n <div class=\"text-right\">\n <button class=\"inline-flex justify-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-300\" wire:click=\"submit\">\n Save\n<\/button> <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 md:gap-6\">\n <div class=\"md:col-span-1\">\n <div class=\"px-4 space-y-4 sm:px-0\">\n <h3 class=\"text-lg font-medium leading-6 text-gray-900\">Metric Setup<\/h3>\n <p class=\"mt-1 text-sm text-gray-600\">Attach your Metric to a game or journey and configure the timings.<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-5 md:col-span-2 md:mt-0\">\n <div class=\"shadow sm:overflow-hidden sm:rounded-md\">\n <div class=\"px-4 py-5 space-y-6 bg-white sm:p-6\">\n <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n <div class=\"col-span-1\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary11406f6afc5d00f4291e7aeeb8ae46a7metric.name\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Name\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX\/SUFFIX\/PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX \/ PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"flex-1 relative\">\n <!-- MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INPUT -->\n <input\n id=\"mary11406f6afc5d00f4291e7aeeb8ae46a7metric.name\"\n placeholder = \"Name \"\n\n \n class=\"input input-primary w-full peer\" type=\"text\" wire:model=\"metric.name\" placeholder=\"Name\"\n \/>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CLEAR ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- SUFFIX\/APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: PREFIX\/SUFFIX\/APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n<\/div> <\/div>\n <div class=\"col-span-1\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"marye26c715b1b9a159848fe4bb951d3629fmetric.point_allocation\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Point Allocation\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX\/SUFFIX\/PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX \/ PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"flex-1 relative\">\n <!-- MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INPUT -->\n <input\n id=\"marye26c715b1b9a159848fe4bb951d3629fmetric.point_allocation\"\n placeholder = \"Point Allocation \"\n\n \n class=\"input input-primary w-full peer\" type=\"number\" wire:model=\"metric.point_allocation\" placeholder=\"Point Allocation\"\n \/>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CLEAR ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- SUFFIX\/APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: PREFIX\/SUFFIX\/APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n<\/div> <\/div>\n\n <div class=\"col-span-1\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"maryddc243262033d2e10c4bfeb759b71727metric.point_step\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Point Step\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX\/SUFFIX\/PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX \/ PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"flex-1 relative\">\n <!-- MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INPUT -->\n <input\n id=\"maryddc243262033d2e10c4bfeb759b71727metric.point_step\"\n placeholder = \"Point Step \"\n\n \n class=\"input input-primary w-full peer\" type=\"number\" wire:model=\"metric.point_step\" placeholder=\"Point Step\"\n \/>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CLEAR ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- SUFFIX\/APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: PREFIX\/SUFFIX\/APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n<\/div> <\/div>\n\n <div class=\" col-span-1\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"maryf09f06258b1cf2a7c8224e22492cbdb2metric.free_points\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Free Points\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX\/SUFFIX\/PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREFIX \/ PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"flex-1 relative\">\n <!-- MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INPUT -->\n <input\n id=\"maryf09f06258b1cf2a7c8224e22492cbdb2metric.free_points\"\n placeholder = \"Free Points \"\n\n \n class=\"input input-primary w-full peer\" type=\"number\" wire:model=\"metric.free_points\" placeholder=\"Free Points\"\n \/>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CLEAR ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HIDDEN MONEY INPUT + END MONEY SETUP -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- SUFFIX\/APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: PREFIX\/SUFFIX\/APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n<\/div> <\/div>\n\n <div class=\"col-span-1\">\n <div x-data=\"{ focused: false, selection: window.Livewire.find('NLbSbzR7uF2CA9Yob77d').entangle('metric.icon') }\">\n <div\n @click.outside = \"clear()\"\n @keyup.esc = \"clear()\"\n\n x-data=\"{\n options: [{"id":"default.svg","name":"Default","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/default.svg"},{"id":"exercise.svg","name":"Exercise","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/exercise.svg"},{"id":"food.svg","name":"Food","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/food.svg"},{"id":"mind.svg","name":"Mind","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/mind.svg"},{"id":"stick.svg","name":"Stick","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/stick.svg"},{"id":"water.svg","name":"Water","src":"http:\\\/\\\/localhost:8000\\\/images\\\/metrics\\\/water.svg"}],\n isSingle: true,\n isSearchable: false,\n isReadonly: false,\n isDisabled: false,\n isRequired: false,\n minChars: 0,\n\n init() {\n \/\/ Fix weird issue when navigating back\n document.addEventListener('livewire:navigating', () => {\n let elements = document.querySelectorAll('.mary-choices-element');\n elements.forEach(el => el.remove());\n });\n },\n get selectedOptions() {\n return this.isSingle\n ? this.options.filter(i => i.id == this.selection)\n : this.selection.map(i => this.options.filter(o => o.id == i)[0])\n },\n get noResults() {\n if (!this.isSearchable || this.$refs.searchInput.value == '') {\n return false\n }\n\n return this.isSingle\n ? (this.selection && this.options.length == 1) || (!this.selection && this.options.length == 0)\n : this.options.length <= this.selection.length\n },\n get isAllSelected() {\n return this.options.length == this.selection.length\n },\n get isSelectionEmpty() {\n return this.isSingle\n ? this.selection == null || this.selection == ''\n : this.selection.length == 0\n },\n selectAll() {\n this.selection = this.options.map(i => i.id)\n },\n clear() {\n this.focused = false;\n this.$refs.searchInput.value = ''\n },\n reset() {\n this.clear();\n this.isSingle\n ? this.selection = null\n : this.selection = []\n\n this.dispatchChangeEvent({ value: this.selection})\n },\n focus() {\n if (this.isReadonly || this.isDisabled) {\n return\n }\n\n this.focused = true\n this.$refs.searchInput.focus()\n },\n isActive(id) {\n return this.isSingle\n ? this.selection == id\n : this.selection.includes(id)\n },\n toggle(id) {\n if (this.isReadonly || this.isDisabled) {\n return\n }\n\n if (this.isSingle) {\n this.selection = id\n this.focused = false\n } else {\n this.selection.includes(id)\n ? this.selection = this.selection.filter(i => i != id)\n : this.selection.push(id)\n }\n\n this.dispatchChangeEvent({ value: this.selection })\n\n this.$refs.searchInput.value = ''\n this.$refs.searchInput.focus()\n },\n search(value) {\n if (value.length < this.minChars) {\n return\n }\n\n \/\/ Call search function from parent component\n \/\/ `search(value)` or `search(value, extra1, extra2 ...)`\n window.Livewire.find('NLbSbzR7uF2CA9Yob77d').search(value)\n },\n dispatchChangeEvent(detail) {\n this.$refs.searchInput.dispatchEvent(new CustomEvent('change-selection', { bubbles: true, detail }))\n }\n }\"\n >\n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"marye2383f435231ba829d53826ffb82ed15\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Icon\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTED OPTIONS + SEARCH INPUT -->\n <div\n @click=\"focus()\"\n x-ref=\"container\"\n\n class=\"select select-bordered select-primary w-full h-fit pe-16 pb-1 pt-1.5 inline-block cursor-pointer relative flex-1\"\n >\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CLEAR ICON -->\n <!--[if BLOCK]><![endif]--> <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <svg @click=\"reset()\" x-show=\"!isSelectionEmpty\" class=\"inline w-5 h-5 absolute top-1\/2 end-8 -translate-y-1\/2 cursor-pointer text-gray-400 hover:text-gray-600\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"\/>\n<\/svg>\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTED OPTIONS -->\n <span wire:key=\"selected-options-marye2383f435231ba829d53826ffb82ed15\">\n <!--[if BLOCK]><![endif]--> <template x-for=\"(option, index) in selectedOptions\" :key=\"index\">\n <div class=\"mary-choices-element bg-primary\/5 text-primary hover:bg-primary\/10 dark:bg-primary\/20 dark:hover:bg-primary\/40 dark:text-inherit px-2 me-2 mt-0.5 mb-1.5 last:me-0 inline-block rounded cursor-pointer\">\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--> <span x-text=\"option.name\"><\/span>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <svg @click=\"toggle(option.id)\" x-show=\"!isReadonly && !isDisabled && !isSingle\" class=\"inline w-5 h-5 text-gray-500 hover:text-red-500\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" aria-hidden=\"true\" data-slot=\"icon\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\"\/>\n<\/svg>\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]--> <\/div>\n <\/template>\n <!--[if ENDBLOCK]><![endif]-->\n <\/span>\n\n \n\n <!-- INPUT SEARCH -->\n <input\n id=\"marye2383f435231ba829d53826ffb82ed15\"\n x-ref=\"searchInput\"\n @input=\"focus()\"\n :required=\"isRequired && isSelectionEmpty\"\n :readonly=\"isReadonly || isDisabled || ! isSearchable\"\n :class=\"(isReadonly || isDisabled || !isSearchable || !focused) && '!w-1'\"\n class=\"outline-none mt-0.5 bg-transparent w-20\"\n\n \/>\n <\/div>\n\n <!-- APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- OPTIONS LIST -->\n <div x-show=\"focused\" class=\"relative\" wire:key=\"options-list-main-marye2383f435231ba829d53826ffb82ed15\">\n <div wire:key=\"options-list-marye2383f435231ba829d53826ffb82ed15\" class=\"max-h-64 w-full absolute z-10 shadow-xl bg-base-100 border border-base-300 rounded-lg cursor-pointer overflow-y-auto\" x-anchor.bottom-start=\"$refs.container\">\n\n <!-- PROGRESS -->\n <progress wire:loading wire:target=\"search\" class=\"progress absolute progress-primary top-0 h-0.5\"><\/progress>\n\n <!-- SELECT ALL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- NO RESULTS -->\n <div\n x-show=\"noResults\"\n wire:key=\"no-results-388645217\"\n class=\"p-3 decoration-wavy decoration-warning underline font-bold border border-s-4 border-s-warning border-b-base-200\"\n >\n No results found.\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <div\n wire:key=\"option-default.svg\"\n @click=\"toggle('default.svg')\"\n :class=\"isActive('default.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"mary46e9a2f6dab17f7d68b3f12ed8208fc1\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/default.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Default\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div\n wire:key=\"option-exercise.svg\"\n @click=\"toggle('exercise.svg')\"\n :class=\"isActive('exercise.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"mary6a8fd73e9fbdc0b35b931efd32fc6f4f\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/exercise.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Exercise\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div\n wire:key=\"option-food.svg\"\n @click=\"toggle('food.svg')\"\n :class=\"isActive('food.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"maryf7b5e2b2ad411f4815d510e377738bc5\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/food.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Food\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div\n wire:key=\"option-mind.svg\"\n @click=\"toggle('mind.svg')\"\n :class=\"isActive('mind.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"maryee3bc5ed3c2c813a3d7032133868141e\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/mind.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Mind\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div\n wire:key=\"option-stick.svg\"\n @click=\"toggle('stick.svg')\"\n :class=\"isActive('stick.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"maryad1e28c8c756b93961890ac4c70d03b3\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/stick.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Stick\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div\n wire:key=\"option-water.svg\"\n @click=\"toggle('water.svg')\"\n :class=\"isActive('water.svg') && 'border-s-4 border-s-primary'\"\n class=\"border-s-4\"\n >\n <!-- ITEM SLOT -->\n <!--[if BLOCK]><![endif]--> <div wire:key=\"mary4d43e6419a4507aae5afede8b85e20fb\">\n <div\n class=\"flex justify-start items-center gap-4 px-3 hover:bg-base-200\/50\"\n >\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- AVATAR -->\n <!--[if BLOCK]><![endif]--> <div class=\"py-3\">\n <div class=\"avatar\">\n <div class=\"w-11 rounded-full\">\n <img src=\"http:\/\/localhost:8000\/images\/metrics\/water.svg\" \/>\n <\/div>\n <\/div>\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- CONTENT -->\n <div class=\"flex-1 overflow-hidden whitespace-nowrap text-ellipsis truncate w-0 mary-hideable\">\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"py-3\">\n <div class=\"font-semibold truncate\" >\n Water\n <\/div>\n\n <div class=\"text-gray-400 text-sm truncate\" >\n \n <\/div>\n <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- ACTION -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!--[if BLOCK]><![endif]--> <hr class=\"border-base-300\"\/>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div> <!--[if ENDBLOCK]><![endif]-->\n\n <!-- SELECTION SLOT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <\/div>\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <\/div> <\/div>\n\n <div class=\"col-span-1\">\n <div>\n \n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary11c56079f7ac0e8d70ce45bfb135eafeselectedJourney\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Journey\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND\/APPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- PREPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <div class=\"relative flex-1\">\n <select\n id=\"mary11c56079f7ac0e8d70ce45bfb135eafeselectedJourney\"\n wire:model.lazy=\"selectedJourney\"\n class=\"select select-primary w-full font-normal\" wire:model.lazy=\"selectedJourney\"\n\n >\n <!--[if BLOCK]><![endif]--> <option value=\"\">Select Journey<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--> <option value=\"9cb6ca0d-1931-49d8-911b-72dbb09621a3\" >Garland Rath<\/option>\n <!--[if ENDBLOCK]><![endif]-->\n <\/select>\n\n <!-- ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- RIGHT ICON -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- INLINE LABEL -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n\n <!-- APPEND -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- END: APPEND\/PREPEND CONTAINER -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!-- HINT -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div> <\/div>\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/div>\n <div class=\"text-right\">\n <button class=\"inline-flex justify-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-300\" wire:click=\"submit\">\n Save\n<\/button> <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 md:gap-6\">\n <div class=\"md:col-span-1\">\n <div class=\"px-4 space-y-4 sm:px-0\">\n <h3 class=\"text-lg font-medium leading-6 text-gray-900\">Metric Details<\/h3>\n <p class=\"mt-1 text-sm text-gray-600\">These fields control the instructions, helpful info and auto message copy for the Metric. If you select a Metric template, initial sample copy will be supplied.<\/p>\n <\/div>\n <\/div>\n <div class=\"mt-5 md:col-span-2 md:mt-0\">\n <div class=\"shadow sm:overflow-hidden sm:rounded-md\">\n <div class=\"px-4 py-5 space-y-6 bg-white sm:p-6\">\n <div class=\"grid grid-cols-1 gap-6\">\n\n <div class=\"col-span-1\">\n <div>\n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary570b0a154c4122ac68b77e2edf8f8b82\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Input Page Help\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- EDITOR -->\n <div\n x-data=\"\n {\n editor: null,\n value: window.Livewire.find('NLbSbzR7uF2CA9Yob77d').entangle('metric.input_page_help'),\n uploadUrl: '\/mary\/upload?disk=public&folder=markdown&_token=r0I2I315grr4PZM3GGUmOA0MfaNVOjJsaPSlQVGs',\n uploading: false,\n init() {\n this.editor = new EasyMDE({\n 'spellChecker':false,'autoSave':false,'uploadImage':true,'imageAccept':'image\\\/png, image\\\/jpeg, image\\\/gif, image\\\/avif','toolbar':['heading','bold','italic','strikethrough','|','code','quote','unordered-list','ordered-list','horizontal-rule','|','link','upload-image',{ 'title' : 'Table', 'name' : 'myTable', 'action' : EasyMDE.drawTable, 'className' : 'fa fa-table' },'|','preview','side-by-side'],\n element: $refs.markdownmary570b0a154c4122ac68b77e2edf8f8b82,\n initialValue: this.value ?? '',\n imageUploadFunction: (file, onSuccess, onError) => {\n if (file.type.split('\/')[0] !== 'image') {\n return onError('File must be an image.');\n }\n\n var data = new FormData()\n data.append('file', file)\n\n this.uploading = true\n\n fetch(this.uploadUrl, { method: 'POST', body: data })\n .then(response => response.json())\n .then(data => onSuccess(data.location))\n .catch((err) => onError('Error uploading image!'))\n .finally(() => this.uploading = false)\n }\n })\n\n this.editor.codemirror.on('change', () => this.value = this.editor.value())\n }\n }\"\n wire:ignore\n x-on:livewire:navigating.window=\"editor.toTextArea(); editor = null\"\n >\n <div class=\"relative disabled\" :class=\"uploading && 'pointer-events-none opacity-50'\">\n <textarea id=\"mary570b0a154c4122ac68b77e2edf8f8b82\" x-ref=\"markdownmary570b0a154c4122ac68b77e2edf8f8b82\"><\/textarea>\n\n <div class=\"absolute top-1\/2 start-1\/2 !opacity-100 text-center hidden\" :class=\"uploading && '!block'\">\n <div>Uploading<\/div>\n <div class=\"loading loading-dots\"><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n<\/div> <\/div>\n\n <div class=\"col-span-1\">\n <div>\n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary1eadb8ff5a2c07e7de005ca261de70aa\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Helpful Info\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- EDITOR -->\n <div\n x-data=\"\n {\n editor: null,\n value: window.Livewire.find('NLbSbzR7uF2CA9Yob77d').entangle('metric.helpful_info'),\n uploadUrl: '\/mary\/upload?disk=public&folder=markdown&_token=r0I2I315grr4PZM3GGUmOA0MfaNVOjJsaPSlQVGs',\n uploading: false,\n init() {\n this.editor = new EasyMDE({\n 'spellChecker':false,'autoSave':false,'uploadImage':true,'imageAccept':'image\\\/png, image\\\/jpeg, image\\\/gif, image\\\/avif','toolbar':['heading','bold','italic','strikethrough','|','code','quote','unordered-list','ordered-list','horizontal-rule','|','link','upload-image',{ 'title' : 'Table', 'name' : 'myTable', 'action' : EasyMDE.drawTable, 'className' : 'fa fa-table' },'|','preview','side-by-side'],\n element: $refs.markdownmary1eadb8ff5a2c07e7de005ca261de70aa,\n initialValue: this.value ?? '',\n imageUploadFunction: (file, onSuccess, onError) => {\n if (file.type.split('\/')[0] !== 'image') {\n return onError('File must be an image.');\n }\n\n var data = new FormData()\n data.append('file', file)\n\n this.uploading = true\n\n fetch(this.uploadUrl, { method: 'POST', body: data })\n .then(response => response.json())\n .then(data => onSuccess(data.location))\n .catch((err) => onError('Error uploading image!'))\n .finally(() => this.uploading = false)\n }\n })\n\n this.editor.codemirror.on('change', () => this.value = this.editor.value())\n }\n }\"\n wire:ignore\n x-on:livewire:navigating.window=\"editor.toTextArea(); editor = null\"\n >\n <div class=\"relative disabled\" :class=\"uploading && 'pointer-events-none opacity-50'\">\n <textarea id=\"mary1eadb8ff5a2c07e7de005ca261de70aa\" x-ref=\"markdownmary1eadb8ff5a2c07e7de005ca261de70aa\"><\/textarea>\n\n <div class=\"absolute top-1\/2 start-1\/2 !opacity-100 text-center hidden\" :class=\"uploading && '!block'\">\n <div>Uploading<\/div>\n <div class=\"loading loading-dots\"><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n<\/div> <\/div>\n\n <div class=\"col-span-1\">\n <div>\n <!-- STANDARD LABEL -->\n <!--[if BLOCK]><![endif]--> <label for=\"mary3c95234edb3fe7461dbd0039b49535d7\" class=\"pt-0 label label-text font-semibold\">\n <span>\n Auto Messaging Copy\n\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n <\/span>\n <\/label>\n <!--[if ENDBLOCK]><![endif]-->\n\n <!-- EDITOR -->\n <div\n x-data=\"\n {\n editor: null,\n value: window.Livewire.find('NLbSbzR7uF2CA9Yob77d').entangle('metric.auto_messaging_copy'),\n uploadUrl: '\/mary\/upload?disk=public&folder=markdown&_token=r0I2I315grr4PZM3GGUmOA0MfaNVOjJsaPSlQVGs',\n uploading: false,\n init() {\n this.editor = new EasyMDE({\n 'spellChecker':false,'autoSave':false,'uploadImage':true,'imageAccept':'image\\\/png, image\\\/jpeg, image\\\/gif, image\\\/avif','toolbar':['heading','bold','italic','strikethrough','|','code','quote','unordered-list','ordered-list','horizontal-rule','|','link','upload-image',{ 'title' : 'Table', 'name' : 'myTable', 'action' : EasyMDE.drawTable, 'className' : 'fa fa-table' },'|','preview','side-by-side'],\n element: $refs.markdownmary3c95234edb3fe7461dbd0039b49535d7,\n initialValue: this.value ?? '',\n imageUploadFunction: (file, onSuccess, onError) => {\n if (file.type.split('\/')[0] !== 'image') {\n return onError('File must be an image.');\n }\n\n var data = new FormData()\n data.append('file', file)\n\n this.uploading = true\n\n fetch(this.uploadUrl, { method: 'POST', body: data })\n .then(response => response.json())\n .then(data => onSuccess(data.location))\n .catch((err) => onError('Error uploading image!'))\n .finally(() => this.uploading = false)\n }\n })\n\n this.editor.codemirror.on('change', () => this.value = this.editor.value())\n }\n }\"\n wire:ignore\n x-on:livewire:navigating.window=\"editor.toTextArea(); editor = null\"\n >\n <div class=\"relative disabled\" :class=\"uploading && 'pointer-events-none opacity-50'\">\n <textarea id=\"mary3c95234edb3fe7461dbd0039b49535d7\" x-ref=\"markdownmary3c95234edb3fe7461dbd0039b49535d7\"><\/textarea>\n\n <div class=\"absolute top-1\/2 start-1\/2 !opacity-100 text-center hidden\" :class=\"uploading && '!block'\">\n <div>Uploading<\/div>\n <div class=\"loading loading-dots\"><\/div>\n <\/div>\n <\/div>\n\n <\/div>\n\n <!-- ERROR -->\n <!--[if BLOCK]><![endif]--><!--[if ENDBLOCK]><![endif]-->\n\n<\/div> <\/div>\n <\/div>\n <div class=\"text-right\">\n <button class=\"inline-flex justify-center px-4 py-2 text-sm font-medium text-white border border-transparent rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 bg-indigo-500 text-white hover:bg-indigo-600 focus:ring-indigo-300\" wire:click=\"submit\">\n Save\n<\/button> <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/div>"
}
}
],
"assets": []
}<?php
namespace App\Livewire\Metric;
use App\Helpers\Helper;
use App\Models\Company;
use App\Models\Interval;
use App\Models\Journey;
use App\Models\Metric;
use App\Models\MetricLibrary;
use App\Models\MetricType;
use App\Models\Season;
use App\Rules\DivisibleBy;
use Illuminate\Database\Eloquent\Collection;
use Illuminate\Support\Facades\Auth;
use Livewire\Component;
use PHPUnit\TextUI\Help;
class Form extends Component
{
public Metric $metric;
public string $selectedJourney = '';
public string $selectedSeason = '';
public string $selectedInterval = '';
public string $selectedMetricLibrary = '';
public Collection $metricLibraries;
public Collection $allMetricTypes;
public Collection $allJourneys;
public Collection $allSeasons;
public Collection $allIntervals;
public array $icons;
public function mount(Metric $metric)
{
$this->icons = Helper::getMetricIcons();
$this->metricLibraries = MetricLibrary::when(Auth::user()->company_id, function ($query, $companyId) {
$query->where(function ($query) use ($companyId) {
$query->where('company_id', $companyId)
->orWhereNull('company_id');
});
})->get();
$this->metric = $metric;
$this->allMetricTypes = MetricType::get();
$this->allJourneys = Journey::where('company_id', Auth::user()->company_id)->with('seasons')->get();
if ($this->metric->exists) {
$interval = $this->metric->interval;
$season = $interval->season;
$journey = $season->journey;
$this->selectedJourney = $journey->id;
$this->selectedSeason = $season->id;
$this->selectedInterval = $interval->id;
$this->setAllSeasons();
$this->setAllIntervals();
} else {
$this->metric->point_step = 1;
$this->metric->free_points = 0;
}
}
public function submit()
{
$this->validate();
$this->metric->save();
toastr()->success('', [], config('crud.common.saved'));
$this->mount($this->metric->fresh());
}
protected function rules(): array
{
return [
'metric.name' => ['required'],
'metric.point_allocation' => ['required', 'integer', new DivisibleBy($this->metric->point_step)],
'metric.point_step' => ['required', 'integer', 'gte:1'],
'metric.free_points' => ['required', 'integer', 'gte:0'],
'metric.icon' => ['required'],
'metric.metric_type_id' => ['required', 'exists:metric_types,id'],
'metric.input_page_help' => ['nullable'],
'metric.helpful_info' => ['nullable'],
'metric.auto_messaging_copy' => ['nullable'],
'selectedJourney' => ['required'],
'selectedSeason' => ['required'],
'selectedInterval' => ['required'],
];
}
public function updatedSelectedJourney()
{
$this->setAllSeasons();
}
public function updatedSelectedSeason()
{
$this->setAllIntervals();
}
public function updatedSelectedInterval()
{
$this->metric->interval_id = $this->selectedInterval;
}
public function updatedSelectedMetricLibrary($value)
{
$metricLibrary = MetricLibrary::find($value);
$metricData = $metricLibrary->toArray();
// Populate metric with data from the library
$this->metric->fill($metricData);
$this->metric->input_page_help = 'asdasdsad';
}
private function setAllSeasons()
{
$this->allSeasons = Season::where('journey_id', $this->selectedJourney)->orderBy('season_number', 'asc')->get();
}
private function setAllIntervals()
{
$this->allIntervals = Interval::where('season_id', $this->selectedSeason)->orderBy('interval_number', 'asc')->get();
}
public function render()
{
return view('livewire.metric.form');
}
}
protected $fillable = [
'interval_id',
'metric_type_id',
'name',
'icon',
'point_allocation',
'point_step',
'free_points',
'input_page_help',
'helpful_info',
'auto_messaging_copy',
'order_column',
];This is the same issue of #564 , but for <x-editor> component. Please, follow it.
ndarproj
commented
2 months ago Hello @robsontenorio i'm trying to figure this out myself but i cant seem to fix it using #564. were you able to reproduce the fix for x-markdown?
robsontenorio
commented
2 months ago Could you try the main branch? There is a fix merged.
composer require robsontenorio/mary:dev-main
php artisan view:clear
maryUI version
1.35
daisyUI version
4.12
Livewire version
3.5
What browsers are affected?
Firefox, Chrome, Safari, Microsoft Edge
What happened?
basically i select one option & everything that isn't a markdown got their value updated except for the markdown.. setting the markdown value from livewire works on mount but not after that.
HTML/Blade
the value from dd($this->metric);