aswi2021jmsd-gitlab/static/js/index.js @ 6db8a3cb

Vue.use(VueLoading);
Vue.component('loading', VueLoading)

// certificate listing app VUE instance
var certificateListingApp = new Vue({
    el: "#certificateListingPage",
    data: {
        certificatesPerPage: 2,
        hasNextPage: false,
        hasPreviousPage: false,
        currentPage: 1,
        loading: true,
        // list of all certificates to be displayed in the list
        certificates: [],
        successMessage: ''
    },
    methods: {
        onNextPage: async function () {
            this.currentPage++;
            await this.loadPage(this.currentPage, this.certificatesPerPage);
        },
        onPreviousPage: async function () {
            this.currentPage--;
            await this.loadPage(this.currentPage, this.certificatesPerPage);
        },
        loadPage: async function (page, perPage) {
            // download a list of all available certificates and display them in the table
            try {
                const response = await axios.get(API_URL + "certificates", {
                    params: {
                        page: page - 1,
                        per_page: perPage
                    }
                });
                if (response.data["success"]) {
                    this.certificates = [];
                    response.data["data"].forEach(item => certificateListingApp.certificates.push(item));
                    this.hasPreviousPage = page > 1;
                    this.hasNextPage = await this.checkIfNextPage(page, this.certificatesPerPage);
                }
            } catch (error) {
                console.log(error);
            }
        },
        checkIfNextPage: async function(page, perPage) {
            try {
                const response = await axios.get(API_URL + "certificates", {
                    params: {
                        page: page,
                        per_page: perPage
                    }
                });
                if (response.data["success"]) {
                    return response.data["data"].length > 0;
                }
                return false;
            } catch (error) {
                return false;
            }
        }
    },
    mounted: async function () {
        const params = window.location.search;
        if (params !== "") {
            const urlParams = new URLSearchParams(params);
            if (urlParams.get("success") != null) this.successMessage = urlParams.get("success");

            // the following code is necessary to dismiss the alert when the page is reloaded
            const nextURL = '/static/index.html';
            const nextTitle = 'X.509 Certificate Management';
            const nextState = {additionalInformation: 'Updated the URL with JS'};

            // This will create a new entry in the browser's history, without reloading
            window.history.pushState(nextState, nextTitle, nextURL);

            // This will replace the current entry in the browser's history, without reloading
            window.history.replaceState(nextState, nextTitle, nextURL);
        }

        // download a list of all available certificates and display them in the table
        await this.loadPage(1, this.certificatesPerPage);
        this.loading = false;
    }
});