koperasi/script/kekayaan/index.js

const app = document.getElementById('app');
 
export const tempate = function(){
    let c = div()
    .padding('10px')
    .background('#333')
    .width('calc(100vw - 20px)')
    .height('calc(100vh - 20px)')
    
    c.child( 
        div().margin('10px')
        .width('calc(100vw - 40px)')
        .height('calc(100vh - 40px)')
        .background('white')
        .css('display','grid')
        .css('overflow','hidden')
        .css('grid-template-rows','50px auto 50px')
        .child( 
            div()
            .css('padding','10px')
            .css('box-shadow', ' 0 0 10px #ddd')
            .child(
                el('button').cursor('pointer').padding('5px').margin('0 5px').html(`<i class="fa-solid fa-arrow-left"></i> Halaman Utama`)
                .click(function(){
                    window.history.back();
                })
            )
            .child(
                el('button').cursor('pointer').padding('5px').html(`<i class="fa-regular fa-file-excel"></i> Export Excel`)
                .click(function(){
                    var content = '';
                    content = new Blob([content], {
                        type: 'application/vdn.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                    });
                    var title = 'Kekayaan anggota';
                    saveAs(content, title + '.xls');
                })
            )
        )
        .child( 
            div()
            .css('border','1px solid #ddd')
            .css('box-shadow', 'inset 0 0 10px #797')
            .css('overflow', 'scroll')
            .id('body')
            .margin('10px')
            .child(
                el('table').css('border-spacing',0).width('100%').id('sheet')
            )
        )
        .child( 
            div()
            .css('border','1px solid #ddd')
            .css('box-shadow', 'inset 0 0 10px #797')
            .css('overflow', 'auto')
            .css('max-width', '100%')
            .css('display', 'flex-inline')
            .id('footer')
            .margin('10px')
        )
    )
    return c.get();
}

app.appendChild(tempate());

Array.prototype.bagiArray = function (jumlahElemenPerBagian) {
    const bagianArray = [];
    let index = 0;

    while (index < this.length) {
        const bagian = this.slice(index, index + jumlahElemenPerBagian);
        bagianArray.push(bagian);
        index += jumlahElemenPerBagian;
    }

    return bagianArray;
};

const Sheet = function(data){
    let dataLoad = data
    .map(function(s,i){
        s.no = i+1;
        return s;
    })
    .bagiArray(25);
    let length = dataLoad.length;
    return {
        data:dataLoad,
        length:length,
        footer: document.getElementById('footer'),
        element: document.getElementById('sheet'),
        tr: function(d){
            let newTr = el('tr')
            Object.keys(d).forEach(function(name){
                let h = el('td')
                .border('1px solid #999')
                .padding('3px 5px')
                .size('12px')
                .css('vertical-align', 'top');
                if(name == 'alamat'){
                    h.css('min-width', '250px')
                    h.css('max-width', '300px')
                } else if (name == 'temtala' || name == 'nama' || name == 'unitkerja'){
                    h.css('min-width', '180px')
                    h.css('max-width', '200px')
                }
                if (name == 'temtala') {
                    h.html(d[name].replace(/\-,/g,''))
                }else{
                    h.html(d[name])
                }
                newTr.child(
                    h
                )
            })
            return newTr.get();
        },
        load: function(n = 0){
            let d = this.data;
            let trData = this.tr;
            let bodyTable = this.element;
            bodyTable.innerHTML = '';
            d[n].forEach(function (s) {
                bodyTable.appendChild(trData(s))
            })
        },
        makefooter: function(){
            let ds = this;
            let foo = this.footer;
            for (let index = 0; index < this.length; index++) {
                foo.appendChild(
                    el('button').css('padding','5px 8px').data('poin',index).cursor('pointer').text(index + 1)
                    .click(function(){
                        console.log('clear')
                        let poin = this.dataset.poin;
                        ds.load(poin);
                    })
                    .get()
                );
            } this.length
        },
        makebody : function(){
            this.makefooter()
            this.load(0)
        }
    }
}

fetch('/usp/admin/api/export/excel/kekayaan/testing').then(function(res){
    return res.json()
}).then(function(res){
    Sheet(res)
        .makebody()
})