udemy-go-web-2/static/js/all-subscriptions.js

import { formatCurrency } from "./common.js"

export let pageSize = 2;
export let currentPage = 1;

export function showTable(api, ps, cp) {
    let token = localStorage.getItem("token");
    let tbody = document.getElementById("subscriptions-table").getElementsByTagName("tbody")[0];

    // reset tbody
    tbody.innerHTML = ``

    const body = {
        page_size: parseInt(ps, 10),
        page: parseInt(cp, 10),
    };

    const requestOptions = {
        method: 'post',
        headers: {
            'Accept': `application/json`,
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token,
        },
        body: JSON.stringify(body),
    };

    fetch(api + "/api/admin/all-subscriptions", requestOptions)
        .then(response => response.json())
        .then(function (data) {
            if (data.orders) {
                data.orders.forEach(function (i) {
                    let newRow = tbody.insertRow();
                    let newCell = newRow.insertCell();

                    newCell.innerHTML = `<a href="/admin/subscriptions/${i.id}">Order ${i.id}</a>`;

                    newCell = newRow.insertCell();
                    let item = document.createTextNode(i.customer.last_name + ", " + i.customer.first_name);
                    newCell.appendChild(item)

                    newCell = newRow.insertCell();
                    item = document.createTextNode(i.widget.name);
                    newCell.appendChild(item)

                    let cur = formatCurrency(i.transaction.amount)
                    newCell = newRow.insertCell();
                    item = document.createTextNode(cur + "/month");
                    newCell.appendChild(item)

                    newCell = newRow.insertCell();
                    if (i.status_id != 1) {
                        newCell.innerHTML = `<span class="badge bg-danger">Cancelled</span>`
                    } else {
                        newCell.innerHTML = `<span class="badge bg-success">Charged</span>`
                    }
                    paginator(api, data.last_page, data.current_page)
                });
            } else {
                let newRow = tbody.insertRow();
                let newCell = newRow.insertCell();
                newCell.setAttribute("colspan", "4");
                newCell.innerHTML = "No data available";
            }
        });
}

function paginator(api, pages, curPage) {
    const p = document.getElementById("paginator")
    let html = `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage - 1}">&lt;</a></li>`;

    for (var i = 0; i < pages; i++) {
        html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${i + 1}">${i + 1}</a></li>`;
    }

    html += `<li class="page-item"><a href="#!" class="page-link pager" data-page="${curPage + 1}">&gt;</a></li>`;

    p.innerHTML = html;

    let pageBtns = document.getElementsByClassName("pager");
    for (var j = 0; j < pageBtns.length; j++) {
        pageBtns[j].addEventListener("click", function(evt){
            let desiredPage = evt.target.getAttribute("data-page");
            if ((desiredPage > 0) && (desiredPage <= pages)) {
                console.log("would go to page", desiredPage);
                showTable(api, pageSize, desiredPage);
                currentPage = desiredPage
            }
        })
    }
}