Refactoring

[adityabanerjee]

What we observe in the admin page of the website is that in the network tab we see our custom pages that we have created are also been called every time. The ajax is been requested for all the pages. So we want to serve the request only for the specific tabs in the admin. I have attached screenshot for reference. How could this be done to prevent unnecessary ajax calls for the admin pages? If you see the screenshot you would notice that in the sales tab we could see ajax calls for get-all-questions, get-all-reviews and so on.
Please assist.

[aimeos]

Check your Javascript code when the requests are made and try to perform them only if the HTML contains the required nodes.

[adityabanerjee]

How can I do it? Could you please explain the files I need to go in to check this?

[adityabanerjee]

Hi Aimeos @aimeos I have this file named stocklog.js. Now how can I load it when requests are made and try to perform them only if the HTML contains the required nodes.

Code: Select all

$(function() {
    Aimeos.Product.StockLog.init();
});


Aimeos.Product.StockLog = {

    init : function() {

        this.StockLog = new Vue({
            el: '#stockLog',
            data: {
                items: [],

                loading: false,
                hasError: null,
                hasSuccess: null,
                errorMessage: null,
                successMessage:null,
                successClass:null,
                siteid: null,
                sitecode: null,
                siteLabel: null,


                product_id:'',
                question_id:'',
                stock_id:'',
                sku:'',
                stock_level_old:'',
                stock_level_new:'',
                from:'',
                status:'',

                product_filter:null,
                customer_filter:null,
                stock_filter:null,
                stock_level_old_filter:null,
                stock_level_new_filter:null,
                message:null,
                date_start:null,
                date_end:null,

                current_page: null,
                to: null,
                total: null,
                first_page: 1,
                prev_page: null,
                next_page: null,
                last_page: null,
                per_page: null,

                next_is_disabled: true,
                prev_is_disabled: false,
                shops:[],

            },
            mounted: function() {
                this.getStockLog();
            },
            methods: {
                getStockLog: function(number) {
                    this.siteid = this.$el.dataset.siteid;
                    let url = '/stocklog';
                    axios.get(url, {
                        params:{
                            siteid:this.siteid,
                            sitecode:this.sitecode,
                            page: number,
                            product_filter: this.product_filter,
                            stock_filter: this.stock_filter,
                            stock_level_new: this.stock_level_new_filter,
                            stock_level_old: this.stock_level_old_filter,
                            date_start:this.date_start,
                            date_end:this.date_end,
                            customer_id:this.customer_filter,
                        }
                    }).then(({data}) => {
                        this.items = data.StockLogs.data;
                        this.shops = data.SiteList;
                        this.last_page = data.StockLogs.last_page;
                        this.current_page = data.StockLogs.current_page;
                        this.from = data.StockLogs.from;
                        this.per_page = data.StockLogs.per_page;
                        this.to = data.StockLogs.to;
                        this.total = data.StockLogs.total;

                        if (this.current_page > this.first_page){
                            this.prev_is_disabled = false;
                            this.next_page = this.current_page + 1;
                            this.next_is_disabled = false;
                            this.prev_page = this.current_page -1;
                        }
                        else {
                            this.prev_page = this.current_page;
                            this.prev_is_disabled = true;
                            this.next_is_disabled = false
                        }

                        if (this.current_page < this.last_page){
                            this.next_page = this.current_page + 1;
                            this.next_is_disabled = false;
                        }
                        else {
                            this.next_page = this.current_page;
                            this.next_is_disabled = true;
                        }
                    });
                },
                removeStockLog: function(id){
                    let url = '/stocklog/' + id;
                    this.hasSuccess = id;
                    this.successMessage = 'Stock Log Removed';
                    this.successClass = 'alert alert-success';
                    axios.delete(url).then( () =>{
                        setTimeout(() => {
                            this.successClass = null;
                            this.hasSuccess = null;
                            this.successMessage = null;
                        }, 3000);
                        this.getStockLog();
                    }).catch((error) =>{
                        console.log(error);
                    });
                },
                getStatus: function (item_old,item_new) {
                    if (item_new === 0){
                        return this.status = '&#8595;';
                    }
                    else if (item_old === 0){
                        return this.status = '&#8593;';
                    }
                    else if (item_old < item_new){
                        return this.status = '&nearr;';
                    }
                    else if (item_old > item_new) return this.status = '&#8600;';
                    else return this.status = '&mdash;'
                }
            }
        });

    }

};

Please guide.

[adityabanerjee]

This is what my manifest.jsb2 looks like

Code: Select all

{
    "projectName": "ebdaa",
    "licenseText": "proprietary",
    "pkgs": [
        {
            "name": "ebdaa CSS",
            "file": "ebdaa.css",
            "isDebug": true,
            "fileIncludes": [
                {
                    "text": "sidebar.css",
                    "path": "themes/css/"
                },
                {
                    "text": "admin.css",
                    "path": "themes/css/"
                },
                {
                    "text": "dashboard.css",
                    "path": "themes/css/"
                },
                {
                    "text": "catalog.css",
                    "path": "themes/css/"
                },
                {
                    "text": "product.css",
                    "path": "themes/css/"
                }
            ]
        },
        {
            "name": "ebdaa JS",
            "file": "ebdaa.js",
            "isDebug": true,
            "fileIncludes": [
                {
                    "text": "custom_order.js",
                    "path": "themes/js/"
                },
                {
                    "text": "custom_admin.js",
                    "path": "themes/js/"
                },
                {
                    "text": "get_orders.js",
                    "path": "themes/js/"
                },
                {
                    "text": "get_transactions.js",
                    "path": "themes/js/"
                },
                {
                    "text": "dashboard-order.js",
                    "path": "themes/js/"
                },
                {
                    "text": "stock.js",
                    "path": "themes/js/"
                },
                {
                    "text": "product-questions.js",
                    "path": "themes/js/"
                },
                {
                    "text": "product-rating.js",
                    "path": "themes/js/"
                },
                {
                    "text": "moment.js",
                    "path": "themes/js/"
                },
                {
                    "text": "get_questions.js",
                    "path": "themes/js/"
                },
                {
                    "text": "get_reviews.js",
                    "path": "themes/js/"
                },
                {
                    "text": "stock_log.js",
                    "path": "themes/js/"
                },
                {
                    "text": "exported.js",
                    "path": "themes/js/"
                },
                {
                    "text": "uploader.js",
                    "path": "themes/js/"
                },
                {
                    "text": "price.js",
                    "path": "themes/js/"
                },
                {
                    "text": "price_log.js",
                    "path": "themes/js/"
                },
                {
                    "text": "product_price.js",
                    "path": "themes/js/"
                }
            ]
        }
    ],
    "resources": []
}

[aimeos]

The component should only be created and initialized if a HTML node with the ID "stockLog" is available. Otherwise, nothing should be fetched from the server. You can check that by adding a console.log() debug statement in the VueJS component JS code.