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

class OrdenTrabajoDatatable {
    constructor(domItem) {
        this.item = domItem
        this.datatableItem = this.item.find("#ot-datatable-finalizados")
        this.datatablePendientesItem = this.item.find("#ot-datatable-pendientes")
        this.datatableFerroPendienteItem = this.item.find("#ot-datatable-ferro-pendiente")
        this.datatableFerroOkItem = this.item.find("#ot-datatable-ferro-ok")


        this.datatableColumns = [
            { data: 'pedido_id', searchable: false, sortable: false },
            { data: 'fecha_encuadernado_at', searchable: false, sortable: false },
            { data: 'cliente_nombre', searchable: false, sortable: false },
            { data: 'presupuesto_titulo', searchable: false, sortable: false },
            { data: 'ubicacion_nombre', searchable: false, sortable: false },
            { data: 'total_tirada', searchable: false, sortable: false ,render : (d) => `<span class="autonumeric">${d}</span>`},
            { data: 'tipo_presupuesto_impresion', searchable: false, sortable: false },
            {
                data: 'logo', searchable: false, sortable: false, render: (d, t) => {
                    return `<img src="${d}" width="30px" height="30px" alt="logo-impresion" />`
                }
            },
            {
                data: 'progreso', searchable: false, sortable: false, render: (d, t) => {
                    return `<div class="progress border rounded-2" style="height: 1rem;">
                <div id="ot-progress-bar" class="progress-bar" role="progressbar" style="width: ${parseInt(d)}%;"  aria-valuenow="${d}" aria-valuemin="0" aria-valuemax="100">${d}%</div>
                </div>
                `
                }
            },
            {
                data: 'action', searchable: false, sortable: false,
                render: (d, t) => {
                    return `<div class="btn-group btn-group-sm">
                    <a type="button" href="/produccion/ordentrabajo/edit/${d}" class=" btn btn-outline ot-edit"><i class="ti ti-eye ti-sm mx-2"></i></a>
                    <a type="button" href="/produccion/ordentrabajo/pdf/${d}" class="btn btn-outline ot-pdf"><i class="ti ti-download ti-sm mx-2"></i></a>

                </div>`
                }
            }
        ]
    }
    init() {
        this.datatable = this.datatableItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            columnDefs : [
                { className: 'dt-center', targets: '_all' },
            ],
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable'
        });
    }
    initPendientes() {
        this.datatable = this.datatablePendientesItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            columnDefs : [
                { className: 'dt-center', targets: '_all' },
            ],
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_pendientes'
        });
    }
    initFerroPendiente() {
        this.datatable = this.datatableFerroPendienteItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_pendiente'
        });
    }
    initFerroOk() {
        this.datatable = this.datatableFerroOkItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_ok'
        });
    }

}

export default OrdenTrabajoDatatable;