safekat/httpdocs/assets/js/safekat/components/datatables/ImposicionDatatable.js

import ClassSelect from "../select2.js";
import Ajax from "../ajax.js";


class ImposicionDatatable {
    constructor(domItem) {
        this.item = domItem
        this.datatableColumns = [
            { data: 'id', searchable: true, sortable: true },
            { data: 'ancho', searchable: true, sortable: true },
            { data: 'alto', searchable: true, sortable: true },
            { data: 'unidades', searchable: true, sortable: true },
            { data: 'orientacion', searchable: true, sortable: true },
            { data: 'maquina', searchable: true, sortable: true },
            { data: 'etiqueta', searchable: true, sortable: true },
            { data: 'esquema', searchable: true, sortable: true, render: this.renderImposicionEsquemaCell.bind(this) },
            { data: 'action', searchable: true, sortable: true },
        ]
        this.datatableEsquemaColumns = [
            { data: 'name', searchable: true, sortable: true },
            { data: 'action', searchable: true, sortable: true },
        ]
    }
    init() {
        this.datatable = this.item.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            columnDefs: [
                { className: 'dt-center', targets: [0, 1, 2, 3, 4, 5, 6] },
            ],
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/imposiciones/datatable',
            createdRow: (row, data, dataIndex) => {
                this.createSelectImposicion(row, data)
            }
        });
        // this.datatable.on("draw.dt", this.createSelectImposicion.bind(this))
        this.item.on("change", ".imposicion-esquema-select", this.handleChangeImposicionEsquema.bind(this))
    }

    renderImposicionEsquemaCell(d, t) {
        return `<select name="imposicion_esquema_id" data-id="${d.imposicionId}" class="select2 form-control imposicion-esquema-select"  data-input>
            </select>`
    }
    createSelectImposicion(row, data) {
        let selectEsquema = new ClassSelect($(row).find(".imposicion-esquema-select"), '/imposiciones/esquema/select', 'Seleccione un esquema', true)
        selectEsquema.init()
        if (data.esquema.esquemaId) {
            selectEsquema.setOption(data.esquema.esquemaId, data.esquema.esquemaName)
        }
    }
    handleChangeImposicionEsquema(event) {
        let imposicionId = $(event.currentTarget).data("id")
        let ajax = new Ajax(`/imposiciones/${imposicionId}`,
            {
                "imposicion_esquema_id": $(event.currentTarget).val(),
            },
            null,
            this.handleChangeImposicionEsquemaSuccess.bind(this),
            this.handleChangeImposicionEsquemaError.bind(this))
        if (imposicionId) {
            ajax.post()
        }
    }
    handleChangeImposicionEsquemaSuccess(response) {
        popSuccessAlert(response.message)
    }
    handleChangeImposicionEsquemaError() { }



}

export default ImposicionDatatable;