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.datatableNews = this.item.find("#ot-datatable-news")
        this.datatableProd = this.item.find("#ot-datatable-prod")
        this.datatableWaiting = this.item.find("#ot-datatable-waiting")
        this.datatableRevisionComerical = this.item.find("#ot-datatable-revision-com")


        this.columnIdIndex = 1;

        this.datatableColumns = [
            { data: 'pdf_check', searchable: false, sortable: false, render: d => `<input class="form-check-input  pdf-check" data-id="${d}" type="checkbox">` },
            { data: 'id', searchable: true, sortable: true },
            { data: 'pedido_id', searchable: true, sortable: true },
            { data: 'fecha_encuadernado_at',name:"pedidos.fecha_encuadernado", searchable: true, sortable: true },
            { data: 'cliente_nombre', name:"clientes.nombre", searchable: true, sortable: false },
            { data: 'presupuesto_titulo', name:"presupuestos.titulo", searchable: true, sortable: true },
            { data: 'ubicacion_nombre', name:"ubicaciones.nombre", searchable: true, sortable: true },
            { data: 'total_tirada', name:"pedidos.total_tirada",searchable: true, sortable: true, render: (d) => `<span class="autonumeric">${d}</span>` },
            { data: 'tipo_presupuesto_impresion', name:"tipos_presupuestos.codigo", searchable: true, sortable: true },
            {
                data: 'logo', searchable: false, sortable: false, render: (d, t) => {
                    return `<div class="logo-container">
                                <img class="d-block" src="${d.logo}" width="45px" height="45px" alt="logo-impresion" />
                                ${d.imposicion ? `<span class="imposicion-overlay-image">${d.imposicion ?? ""}</span>` : ''}
                            </div>`
                }
            },
            {
                data: 'progreso',name:"ordenes_trabajo.progreso", searchable: false, sortable: true, 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>
                </div>`
                }
                // <a type="button" target="_blank" href="/produccion/ordentrabajo/pdf/${d}" class="btn btn-outline ot-pdf"><i class="ti ti-download ti-sm mx-2"></i></a>

            }
        ]
    }
    actualDatatable(event) {
        let order = $(event.currentTarget).data('order')
        console.log(order)
        this.focusDatatable = this.datatableOrder[order]
    }
    events(){
        this.datatableOrder = [
            this.datatableN,
            this.datatableP,
            this.datatableW,
            this.datatableFP,
            this.datatableFO,
            this.datatableRC,
            this.datatableProduccion,
            this.datatable
        ]
        this.focusDatatable = this.datatableN
        $('.nav-link').on('click', this.actualDatatable.bind(this))
    }
    init() {
        this.datatable = this.datatableItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            order: [[this.columnIdIndex, 'desc']],
            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',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `10px solid ${data.logo.color}`)
                $(row).css("border-right", `10px solid ${data.logo.color}`)
            }
        });
    }
    initPendientes() {
        this.datatableP = this.datatablePendientesItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            order: [[this.columnIdIndex, 'desc']],
            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',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)

            }
        });
    }
    initFerroPendiente() {
        this.datatableFP = this.datatableFerroPendienteItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            pageLength: 25,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_pendiente',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
    }
    initFerroOk() {
        this.datatableFO = this.datatableFerroOkItem.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_ferro_ok',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
    }
    initNews() {
        this.datatableN = this.datatableNews.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_news',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
        this.focusDatatable = this.datatableN

    }
    initWaiting() {
        this.datatableW = this.datatableWaiting.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_waiting',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
    }
    initProd() {
        this.datatableProduccion = this.datatableProd.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_prod',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
    }
    initRevisionComercial() {
        this.datatableRC = this.datatableRevisionComerical.DataTable({
            processing: true,
            layout: {
                topStart: 'pageLength',
                topEnd: 'search',
                bottomStart: 'info',
                bottomEnd: 'paging'
            },
            serverSide: true,
            order: [[this.columnIdIndex, 'desc']],
            columnDefs: [
                { className: 'dt-center', targets: '_all' },

            ],
            pageLength: 25,
            language: {
                url: "/themes/vuexy/vendor/libs/datatables-sk/plugins/i18n/es-ES.json"
            },
            columns: this.datatableColumns,
            ajax: '/produccion/ordentrabajo/datatable_revision_com',
            createdRow: (row, data, dataIndex) => {
                $(row).css("border-left", `20px solid ${data.logo.color}`)
                $(row).css("border-right", `20px solid ${data.logo.color}`)
            }
        });
    }
    getSelectIDs() {
        return this.focusDatatable.rows((idx, data, node) => {
            return $(node).find('input[type="checkbox"]').prop('checked');
        }).data().toArray().map((e) => parseInt(e.id))

    }

}

export default OrdenTrabajoDatatable;