safekat/httpdocs/assets/js/safekat/components/forms/servicioClienteForm.js

import Ajax from '../ajax.js'
import ClassSelect from '../select2.js'

class ServicioClienteForm {
    /**
     * 
     * @param {*} domItem jQuery item of the form html element 
     */
    constructor(domItem) {
        this.item = domItem
        this.btnNew = this.item.find("#btn-new-servicio-cliente")
        this.btnUpdate = this.item.find("#btn-update-servicio-cliente")
        this.selectItemTarifaAcabado = this.item.find("#servicio-cliente-tarifa-acabado")
        this.selectItemTarifaManipulado = this.item.find("#servicio-cliente-tarifa-manipulado")
        this.selectTarifaAcabado = new ClassSelect(this.selectItemTarifaAcabado, '/tarifas/acabados/select', "Seleccione una tarifa", true)
        this.selectTarifaManipulado = new ClassSelect(this.selectItemTarifaManipulado, '/tarifasmanipulado/select', "Seleccione una tarifa", true)
        this.checkTarifaAcabado = this.item.find("#check-tarifa-acabado")
        this.checkTarifaManipulado = this.item.find("#check-tarifa-manipulado")


    }
    init() {
        this.modelId = this.item.data('id')
        this.uri = `/configuracion/servicios/${this.modelId}`
        this.uriUpdate = `/configuracion/servicios/update/${this.modelId}`
        this.uriPost = `/configuracion/servicios`
        this.btnNew.on("click", this.handlePost.bind(this))
        this.btnUpdate.on("click", this.handlePut.bind(this))
        this.handleGet()
        this.selectTarifaAcabado.init()
        this.selectTarifaManipulado.init()
        this.btnUpdate.removeClass("d-none")
        this.checkTarifaAcabado.change(() => {
            console.log("Acabado", this.checkTarifaAcabado.is(":checked"))
            if (this.checkTarifaAcabado.is(":checked")) {
                this.item.find("#container-tarifa-acabado-select").removeClass("d-none")
                this.item.find("#container-tarifa-manipulado-select").addClass("d-none")
            } else {
                this.item.find("#container-tarifa-acabado-select").addClass("d-none")
                this.item.find("#container-tarifa-manipulado-select").removeClass("d-none")
            }
        })
        this.checkTarifaManipulado.change(() => {
            console.log("Manipulado", this.checkTarifaManipulado.is(":checked"))
            if (this.checkTarifaManipulado.is(":checked")) {
                this.item.find("#container-tarifa-acabado-select").addClass("d-none")
                this.item.find("#container-tarifa-manipulado-select").removeClass("d-none")
            } else {
                this.item.find("#container-tarifa-acabado-select").removeClass("d-none")
                this.item.find("#container-tarifa-manipulado-select").addClass("d-none")
            }
        })
    }
    handleGet() {
        const ajax = new Ajax(
            this.uri,
            null,
            null,
            this.handleGetSuccess.bind(this),
            this.handleGetError.bind(this)
        )
        ajax.get()
    }
    handleGetSuccess(data) {
        this.item.find('[name="nombre"]').val(data.nombre)
        this.item.find('[name="code"]').val(data.code)
        if(data?.tarifas_acabado){
            this.selectTarifaAcabado.setOption(data.tarifas_acabado.id,data.tarifas_acabado.nombre)
            this.checkTarifaAcabado.prop("checked",true)
            this.checkTarifaAcabado.trigger("change")
            this.selectTarifaManipulado.reset()
        }
        if(data?.tarifas_manipulado){
            this.checkTarifaManipulado.prop("checked",true)
            this.selectTarifaManipulado.setOption(data.tarifas_manipulado.id,data.tarifas_manipulado.nombre)
            this.checkTarifaManipulado.trigger("change")
            this.selectTarifaAcabado.reset()
        }

    }
    handleGetError(e) {
        console.error(e)
    }
    handlePost() {
        let bodyData = this.getFormData()
        const ajax = new Ajax(
            this.uriPost,
            bodyData,
            null,
            this.handlePostSuccess.bind(this),
            this.handlePostError.bind(this)
        )
        ajax.post()
    }
    handlePostSuccess() {
        this.item.reset()
    }
    handlePostError() { }
    handlePut() {
        let bodyData = this.getFormData()
        const ajax = new Ajax(
            this.uriUpdate,
            bodyData,
            null,
            this.handlePutSuccess.bind(this),
            this.handlePutError.bind(this)
        )
        ajax.post()
    }
    handlePutSuccess(data) {
        // this.item.reset()
        this.handleGet(data)
    }
    handlePutError() { }

    getFormData() {
        let data = {}
        this.item.serializeArray().forEach((e) => {
            data[e.name] = e.value
        }
        )
        return data
    }
}
export default ServicioClienteForm