safekat/httpdocs/assets/js/safekat/components/modalYesNo.js

class ModalYesNo {

    constructor(text= "", alias = "") {

        this.modalId = alias !== "" ? `yesNoModal-${alias}`: 'yesNoModal';

        this.btnCancelId = alias !== "" ? `btnCancelModal-${alias}` : 'btnCancelModal';
        this.btnConfirmId = alias !== "" ? `btnYesModal-${alias}` : 'btnYesModal';

        this.callback = () => {};

        this.modalHtml = `
            <div class="modal modalYesNo fade" id="${this.modalId}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="${this.modalId}Label" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="${this.modalId}Label">Aplicar cambios</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            ${text}  
                        </div>
                        <div class="modal-footer">
                            <button id=${this.btnCancelId} type="button" class="btn btn-default" data-bs-dismiss="modal">Cancelar</button>
                            <a id=${this.btnConfirmId} href="javascript:void(0);" class="btn btn-danger ">Si</a>
                        </div><!--//.modal-footer -->
                    </div><!--//.modal-content -->
                </div><!--//.modal-dialog -->
            </div><!--//.modal -->
        `;
    }

    init() {

        const self = this;

        // Insertar el modal en el body del documento si no existe
        if (!document.getElementById(this.modalId)) {
            document.body.insertAdjacentHTML('beforeend', this.modalHtml);
        }
        $('#' + this.btnCancelId).on('click', () => {
            
            $('#' + self.modalId).modal('hide');
        });

        $('#' + this.btnConfirmId).on('click', () => {
            
            self.callback(); // Llamar al callback que el usuario haya proporcionado            
        });
    }

    getModalId() {
        return '#' + this.modalId;
    }

    // Método para mostrar el modal
    show(callback) {

        this.callback = callback;

        // Mostrar el modal usando Bootstrap
        $('#' + this.modalId).modal('show');
    }

    // Método para ocultar el modal si es necesario
    hide() {
        $('#' + this.modalId).modal('hide');
    }
}


export default ModalYesNo;