jigDatepicker closes modal #11

mquevedob · 2022-01-19T18:37:46Z

mquevedob
Jan 19, 2022

hello !

i am implementing a modal form, and there are 2 fields with date format
so, the datepicker is used for these 2 fields
when i click on the date, the modal closes

i would appreciate any suggestions

regards,
martin

Answered by coolsam726

Jan 25, 2022

On Further evaluation, I have noticed that https://headlessui.dev/vue/dialog static option does not work as long as you have passed the onClose event to Dialog. As a work around, I have made the following modification and added a static prop to JigModal component. Now the component will check if static is true before calling the toggleModal method. If static is true, it will not close the modal. Just copy the code below and replace it in your js/JigComponents/JigModal.vue, then in your view that calls the dialog, simply pass the :static="true" prop to jig-modal.
This should work, I have tested it locally.
JigModal.vue

<template>
    <TransitionRoot appear :show="isOpen" as="template">
   …

View full answer

mquevedob · 2022-01-25T17:43:59Z

mquevedob
Jan 25, 2022
Author

Hello guys!

can anyone take a look at this issue, please?
maybe point me in the right direction?

regards,
Martin

0 replies

coolsam726 · 2022-01-25T17:59:02Z

coolsam726
Jan 25, 2022
Maintainer

hello !

i am implementing a modal form, and there are 2 fields with date format so, the datepicker is used for these 2 fields when i click on the date, the modal closes

i would appreciate any suggestions

regards, martin

Hi @mquevedob ,
Sorry for the late response. Would you kindly share your code so that I have a look at it?

1 reply

mquevedob Jan 25, 2022
Author

this is my appointment/index

<template>
    <jig-layout>
        <template #header>
            <div class="flex flex-wrap items-center justify-between w-full px-4">

            </div>
        </template>
        <div v-if="can.viewAny" class="flex flex-wrap px-4">
            <div class="z-10 flex-auto bg-white md:rounded-md md:shadow-md">
                <div class="z-10 flex-auto bg-white md:rounded-md md:shadow-md">
                    <JigCalendar
                        @editModel="editModel"
                        @showModel="showModel"
                    />
                </div>
            </div>

            <div v-if="showModal">
                <jig-modal
                    :show="showModal"
                    corner-class="rounded-lg"
                    position-class="align-middle"
                    @close="currentModel = null; showModal = false"
                >
                    <create-appointments-form
                        :new_date="new_date"
                        @error="onError"
                        @success="onSuccess"
                    />
                </jig-modal>
            </div>

            <div v-if="editModal">
                <jig-modal
                    :show="editModal"
                    corner-class="rounded-lg"
                    position-class="align-middle"
                    @close="currentModel = null; editModal = false"
                >
                    <edit-appointment-form
                        :model="editCurrentModel"
                        @error="onError"
                        @success="onSuccess"
                    />
                </jig-modal>
            </div>
        </div>
        <div v-else class="p-4 font-bold text-red-500 bg-red-100 rounded-md shadow-md ">
            You are not authorized to view a list of Appointments
        </div>
    </jig-layout>
</template>

<script>
import JigLayout from "@/Layouts/JigLayout.vue";
import JetConfirmationModal from "@/Jetstream/ConfirmationModal.vue";
import JetDialogModal from "@/Jetstream/DialogModal.vue";
import InertiaButton from "@/JigComponents/InertiaButton.vue";
import JigToggle from "@/JigComponents/JigToggle.vue";
import JigModal from "@/JigComponents/JigModal.vue";
import DtComponent from "@/JigComponents/DtComponent.vue";
import DisplayMixin from "@/Mixins/DisplayMixin.js";
import ShowAppointmentsForm from "@/Pages/Appointments/ShowForm.vue";
import JigCalendar from "@/JigComponents/JigCalendar.vue";
import CreateAppointmentsForm from "./CreateForm.vue";
import EditAppointmentForm from "./EditForm.vue";
import {defineComponent} from "vue";

export default defineComponent({
    name: "Index",
    components: {
        DtComponent,
        JigToggle,
        InertiaButton,
        JetConfirmationModal,
        JetDialogModal,
        JigModal,
        JigLayout,
        ShowAppointmentsForm,
        JigCalendar,
        CreateAppointmentsForm,
        EditAppointmentForm,
    },
    props: {
        can: Object,
        columns: Array,
    },
    inject: ["$refreshDt", "$dayjs"],
    data() {
        return {
            tableId: 'appointments-dt',
            tableParams: {},
            datatable: null,
            confirmDelete: false,
            currentModel: null,
            withDisabled: false,
            showModal: false,
        }
    },
    mixins: [
        DisplayMixin,
    ],
    mounted() {
    },
    computed: {
        ajaxUrl() {
            const url = new URL(this.route('api.appointments.dt'));
            /*if (this.withDisabled) {
                url.searchParams.append('include-disabled',true);
            }*/
            return url.href;
        }
    },
    methods: {
        onSuccess(msg) {
            this.displayNotification('success', msg);
            this.$inertia.visit(route('admin.appointments.index'));
        },
        onError(msg) {
            this.displayNotification('error', msg);
        },
        showModel(model) {
            this.showModal = true;
            this.new_date = model.new_date;
        },
        editModel(model) {
            this.editModal = true;
            this.editCurrentModel = model;
        },
        confirmDeletion(model) {
            this.currentModel = model;
            this.confirmDelete = true;
        },
        cancelDelete() {
            this.currentModel = false;
            this.confirmDelete = false;
        },
        async deleteModel() {
            const vm = this;
            this.confirmDelete = false;
            if (this.currentModel) {
                this.$inertia.delete(route('admin.appointments.destroy', vm.currentModel), {
                    onFinish: res => {
                        this.displayNotification('success', "Item deleted.");
                        vm.$refreshDt(vm.tableId);
                    },
                    onError: err => {
                        console.log(err);
                        this.displayNotification('error', "There was an error while deleting the item.");
                    }
                });
            }
        },
        async toggleActivation(enabled, model) {
            const vm = this;
            console.log(enabled);
            axios.put(route(`api.appointments.update`, model.id), {
                enabled: enabled
            }).then(res => {
                this.displayNotification('success', res.data.message);
                this.$refreshDt(this.tableId);
            })
        }
    }
});
</script>

<style scoped>

</style>

and this is the JigCalendar which it wasnt implemented so I added code to it

<template>
    <div class='demo-app'>
        <div class='demo-app-main'>
            <FullCalendar
                ref="fullCalendar"
                :header="{
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                }"
                :options='calendarOptions'
                :plugins="calendarPlugins"
                :weekends="calendarWeekends"
                class='demo-app-calendar'
                defaultView="timeGridDay"
                navLinks="true"
                timeZone="UTC"
            >
                <template v-slot:eventContent='arg'>
                    <b>{{ arg.timeText }}</b>
                    <i>{{ arg.event.title }}</i>
                </template>
            </FullCalendar>
        </div>
    </div>
</template>

<script>

import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import DisplayMixin from "@/Mixins/DisplayMixin.js"
import {defineComponent} from "vue";

export default defineComponent({

    name: "JigCalendar",

    components: {
        FullCalendar // make the <FullCalendar> tag available
    },

    emits: ["showModel", "editModel"],

    props: {},
    data: function () {
        return {
            calendarPlugins: [
                dayGridPlugin,
                timeGridPlugin,
                interactionPlugin,
            ],
            calendarWeekends: true,
            calendarOptions: {
                events: route('api.appointments.filter'),
                plugins: [
                    dayGridPlugin,
                    timeGridPlugin,
                    interactionPlugin // needed for dateClick
                ],
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay'
                },
                initialView: 'dayGridMonth',
                editable: true,
                selectable: true,
                selectMirror: true,
                dayMaxEvents: true,
                weekends: true,
                dateClick: this.handleDateClick,
                eventDrop: this.handleEventDrop,
                eventClick: this.handleEventClick,
                eventResize: this.eventResize,

                /* you can update a remote database when these fire:
                eventAdd:
                eventChange:
                eventRemove:
                */
            },
            currentEvents: []
        }
    },
    mixins: [
        DisplayMixin,
    ],
    methods: {

        handleWeekendsToggle() {
            this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
        },

        eventResize(e) {
            let updatedEventData = {
                start: e.event.start,
                end: e.event.end
            }
            axios.put(route('api.appointments.update', e.event.id), updatedEventData)
                .then(({data}) => {
                    this.displayNotification('success', "Appointment duration updated.");
                })
                .catch(error => {
                    e.revert()
                    this.displayNotification('error', "couldn't update appointment duration. Sorry.");
                })
        },

        handleEventDrop(e) {
            let updatedEventData = {
                start: e.event.startStr,
                end: e.event.endStr
            }
            axios.put(route('api.appointments.update', e.event.id), updatedEventData)
                .then(({data}) => {
                    this.displayNotification('success', "Event updated.");
                })
                .catch(error => {
                    e.revert()
                    this.displayNotification('error', "something bad happened while updating your event.");
                })
        },

        handleDateClick(e) {
            this.$emit('showModel', {new_date: e.dateStr})
        },

        handleEventClick(e) {
            this.$emit('editModel', e.event)
        },
    }
});
</script>

<style lang='css' scoped>

h2 {
    margin: 0;
    font-size: 16px;
}

ul {
    margin: 0;
    padding: 0 0 0 1.5em;
}

li {
    margin: 1.5em 0;
    padding: 0;
}

b { /* used for event dates/times */
    margin-right: 3px;
}

.demo-app {
    display: flex;
    min-height: 100%;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
}

.demo-app-sidebar {
    width: 300px;
    line-height: 1.5;
    background: #eaf9ff;
    border-right: 1px solid #d3e2e8;
}

.demo-app-sidebar-section {
    padding: 2em;
}

.demo-app-main {
    flex-grow: 1;
    padding: 3em;
}

.fc { /* the calendar root */
    max-width: 1100px;
    margin: 0 auto;
}

</style>

mquevedob · 2022-01-25T18:07:18Z

mquevedob
Jan 25, 2022
Author

the normal behavior of the modal is that if you click elsewhere, it closes
is it possible that, clicking on the datepickr window closes the modal because it is considering it outside the modal window?

2 replies

mquevedob Jan 25, 2022
Author

you can test it here

http://laravel.temiandu.com/admin/appointments
admin@test.com
password

coolsam726 Jan 25, 2022
Maintainer

Let me have a look

coolsam726 · 2022-01-25T18:48:32Z

coolsam726
Jan 25, 2022
Maintainer

You are actually right, the datepicker is considered outside the modal because it is actually attached to the body. Now I remember I experienced this challenge once.

I can only give you a work-around for it: Configure this particular modal so that it is static (Does not close when you click outside).
Check the component API under https://headlessui.dev/vue/dialog and you will see there a static option which expects a boolean. Try modify the JigModal component and either provide a way of passing :static as a prop or just set :static="true" on the Dialog Component.

1 reply

mquevedob Jan 25, 2022
Author

Sounds great. I will test that

coolsam726 · 2022-01-25T19:05:18Z

coolsam726
Jan 25, 2022
Maintainer

On Further evaluation, I have noticed that https://headlessui.dev/vue/dialog static option does not work as long as you have passed the onClose event to Dialog. As a work around, I have made the following modification and added a static prop to JigModal component. Now the component will check if static is true before calling the toggleModal method. If static is true, it will not close the modal. Just copy the code below and replace it in your js/JigComponents/JigModal.vue, then in your view that calls the dialog, simply pass the :static="true" prop to jig-modal.
This should work, I have tested it locally.
JigModal.vue

<template>
    <TransitionRoot appear :show="isOpen" as="template">
        <Dialog as="div" static :open="isOpen" @close="!static && toggleModal(false)">
            <div class="fixed inset-0 z-50 overflow-y-auto">
                <div class="min-h-screen px-4 text-center">
                    <TransitionChild
                        as="template"
                        enter="duration-300 ease-out"
                        enter-from="opacity-0"
                        enter-to="opacity-75"
                        leave="duration-200 ease-in"
                        leave-from="opacity-75"
                        leave-to="opacity-0"
                    >
                        <DialogOverlay
                            class="fixed inset-0 bg-gray-900 bg-opacity-60"
                        />
                    </TransitionChild>

                    <span
                        class="inline-block h-screen align-middle"
                        aria-hidden="true"
                    >
                        &#8203;
                    </span>

                    <TransitionChild
                        as="template"
                        enter="duration-300 ease-out"
                        enter-from="opacity-0 scale-95"
                        enter-to="opacity-100 scale-100"
                        leave="duration-200 ease-in"
                        leave-from="opacity-100 scale-100"
                        leave-to="opacity-0 scale-95"
                    >
                        <div
                            class="inline-block w-full p-6 my-8 overflow-hidden text-left transition-all transform bg-white shadow-xl "
                            :class="`${cornerClass} ${positionClass} ${maxWidthClass}`"
                        >
                            <DialogTitle
                                as="h3"
                                class="flex items-center justify-between text-lg font-medium leading-6 text-gray-900 "
                            >
                                <span class="flex-1"
                                    >TITLE <slot name="title"></slot
                                ></span>
                                <button
                                    type="button"
                                    class="p-1 px-2"
                                    @click="toggleModal(false)"
                                >
                                    <i
                                        class="font-bold text-red-500  fas fa-times"
                                    ></i>
                                </button>
                            </DialogTitle>
                            <div class="mt-2">
                                <slot name="default"></slot>
                            </div>

                            <div class="mt-4 space-x-2 text-right">
                                <slot name="footer"></slot>
                            </div>
                        </div>
                    </TransitionChild>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script>
import { ref, defineComponent } from "vue";
import {
    TransitionRoot,
    TransitionChild,
    Dialog,
    DialogOverlay,
    DialogTitle,
} from "@headlessui/vue";

export default defineComponent({
    name: "JigModal",
    props: {
        show: Boolean,
        static: Boolean,
        cornerClass: {
            default: "rounded-2xl",
        },
        positionClass: {
            default: "align-middle",
        },
        maxWidthClass: {
            default: "max-w-2xl",
        },
    },
    components: {
        TransitionRoot,
        TransitionChild,
        Dialog,
        DialogOverlay,
        DialogTitle,
    },
    emits: ["close"],

    setup(props, ctx) {
        const isOpen = ref(true);

        return {
            isOpen,
            toggleModal(open) {
                isOpen.value = open;
                if (!open) {
                    ctx.emit("close");
                }
            },
        };
    },
    watch: {
        show(val) {
            this.toggleModal(val);
        },
    },
});
</script>

1 reply

mquevedob Jan 26, 2022
Author

yes, this worked perfectly

thank you!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

jigDatepicker closes modal #11

{{title}}

Replies: 5 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

jigDatepicker closes modal #11

mquevedob Jan 19, 2022

Replies: 5 comments · 5 replies

mquevedob Jan 25, 2022 Author

coolsam726 Jan 25, 2022 Maintainer

mquevedob Jan 25, 2022 Author

mquevedob Jan 25, 2022 Author

mquevedob Jan 25, 2022 Author

coolsam726 Jan 25, 2022 Maintainer

coolsam726 Jan 25, 2022 Maintainer

mquevedob Jan 25, 2022 Author

coolsam726 Jan 25, 2022 Maintainer

mquevedob Jan 26, 2022 Author

mquevedob
Jan 19, 2022

Replies: 5 comments 5 replies

mquevedob
Jan 25, 2022
Author

coolsam726
Jan 25, 2022
Maintainer

mquevedob Jan 25, 2022
Author

mquevedob
Jan 25, 2022
Author

mquevedob Jan 25, 2022
Author

coolsam726 Jan 25, 2022
Maintainer

coolsam726
Jan 25, 2022
Maintainer

mquevedob Jan 25, 2022
Author

coolsam726
Jan 25, 2022
Maintainer

mquevedob Jan 26, 2022
Author