adcfi/pages/menu.html

<main class="container">
    <dialog :open="option.modal" v-if="option.modal">
        <article>
            <header>
                <a href="#close" aria-label="Close" class="close" @click="closeModal"></a>
                <h2>{{ option.modal }}</h2>
            </header>
            <form>
                <div v-for="item in currentOptions">
                    <label :for="item.name">{{ item.label }}</label>
                    <input :type="item.type" :name="item.name" :value="item.value" :list="item.name"
                        v-model="item.value">
                    <datalist v-if="item.datalist.length" :id="item.name">
                        <option v-for="option in item.datalist" :value="option.id">{{ option.nombre }}</option>
                    </datalist>
                </div>
                <div class="grid">
                    <button type="reset" class="danger secondary">
                        <i class="fas fa-eraser"></i>
                        Limpiar
                    </button>
                    <button type="submit" @click="submitModal" :disabled="currentOptions?.some(item => !item.value)">
                        <i class="fas fa-check"></i>
                        Exportar</button>
                </div>
            </form>
        </article>
    </dialog>
    <button type="button" class="secondary" v-for="item in menu" @click="item.click">
        <i :class="item.icon"></i>
        {{ item.name }}
    </button>
</main>
<script>
    const option = PetiteVue.reactive({ modal: null });

    function createDownloadLink({ url, filename, postData }) {
        return async () => {
            store.loading = true;
            const response = await fetch(url, { method: 'POST', body: JSON.stringify(postData) });
            const blob = await response.blob();
            const downloadUrl = window.URL.createObjectURL(blob);
            const anchor = document.createElement('a');
            anchor.href = downloadUrl;
            anchor.download = filename;
            anchor.charset = "windows-1252"; // Set the charset to ANSI for compatibility
            anchor.click();
            anchor.remove();
            store.loading = false;
        };
    }

    async function fetchOptions(url, optionName) {
        const response = await fetch(url);
        const data = await response.json();
        return data.map(item => ({ id: item[optionName.id], nombre: item[optionName.nombre] }));
    }

    PetiteVue.createApp({
        option,
        modal: false,
        menu: [
            {
                name: 'Construcción de Calificación',
                icon: 'fas fa-plus',
                url: '/export/excel.php',
                filename: 'calificacion.csv',
                click: createDownloadLink({ url: '/export/excel.php', filename: 'calificacion.csv', postData: { query: 'calificaciones' } })
            },
            {
                name: 'Calificaciones Brutas',
                icon: 'fas fa-plus',
                url: '/export/excel.php',
                filename: 'calificacion.csv',
                click: createDownloadLink({ url: '/export/excel.php', filename: 'calificaciones.csv', postData: { query: 'calificaciones_brutas' } })
            },
            {
                name: 'Usuarios Registrados',
                icon: 'fas fa-plus',
                url: '/export/excel.php',
                filename: 'usuarios.csv',
                opciones: [
                    // radio button
                    { type: 'radio', name: 'query', label: 'Alumno', value: 'alumnos' },
                    { type: 'radio', name: 'query', label: 'Usuarios temporales', value: 'usuarios_temporales' },
                    { type: 'radio', name: 'query', label: 'Todos los usuarios', value: 'usuarios' },


                ],
                click: async function () {
                    option.modal = this.name;
                    try {
                        await new Promise((resolve, reject) => {
                            option.closeModal = () => {
                                option.modal = false;
                                reject(new Error("Modal closed by user"));
                            };
                            option.submitModal = resolve;
                        });
                        store.loading = true;
                        option.modal = false;

                        let formData = { query: 'usuarios' };
                        document.querySelectorAll('input[name="query"]').forEach(input => {
                            if (input.checked) formData.query = input.value;
                        });

                        await createDownloadLink({ url: this.url, filename: this.filename, postData: formData })();

                    } catch (error) {
                        console.error(error);
                    } finally {
                        store.loading = false;
                    }
                }
            },
            {
                name: 'Reporte Syllabus Plan de Cátedra',
                icon: 'fas fa-plus',
                url: '/export/gema.php',
                filename: 'syllabus_plan_catedra.csv',
                opciones: [
                    { type: 'list', name: 'periodo_id', label: 'Periodo de GEMA', value: null, datalist: [] },
                ],
                mounted: async function () {
                    this.opciones.find(item => item.name === 'periodo_id').datalist = await fetchOptions('/fetch/periodos.php', { nombre: 'Periodo_desc', id: 'Periodo_id' });
                },
                click: async function () {
                    option.modal = this.name;
                    await this.mounted();
                    try {
                        await new Promise((resolve, reject) => {
                            option.closeModal = () => {
                                option.modal = false;
                                reject(new Error("Modal closed by user"));
                            };
                            option.submitModal = resolve;
                        });
                        store.loading = true;
                        option.modal = false;

                        let formData = { query: 'cursos' };
                        this.opciones.forEach(opt => formData[opt.name] = opt.value);

                        await createDownloadLink({ url: this.url, filename: this.filename, postData: formData })();
                    } catch (error) {
                        console.error(error);
                    } finally {
                        store.loading = false;
                    }
                }
            },
        ],
        get currentOptions() {
            const currentItem = this.menu.find(item => item.name === this.option.modal);
            return currentItem ? currentItem.opciones : [];
        },
        closeModal: function () {
            if (typeof option.closeModal === 'function') option.closeModal();
        },
        submitModal: function () {
            if (typeof option.submitModal === 'function') option.submitModal();
        },
    }).mount();
</script>