whmcsProxmoxCloud/app/UI/FirewallOption/Templates/pages/firewallOption_components.js

mgJsComponentHandler.addDefaultComponent('mg-firewallOption', {
    template: '#t-mg-firewallOption',
    props: [
        'component_id',
        'component_namespace',
        'component_index'
    ],
    data: function () {
        return {
            data: {
                entries: {}
            },
            loading_state: false,
            passwordShow: false,
            loaded: false,
        };
    },
    mounted: function () {
        var self = this;
        
        if(this.$el.offsetParent === null) {
            setInterval(function(){
                if(self.loaded === false && self.$el.offsetParent !== null)
                {
                    self.loadAjaxData();
                    self.$parent.$root.$on('reloadMgData', self.updateMgData);
                    clearInterval(this);
                }
            }, 500);
        }else{
            self.$nextTick(function () {
                self.loadAjaxData();
            });
            self.$parent.$root.$on('reloadMgData', self.updateMgData);
        }
    },
    methods: {
        loadAjaxData: function () {
            this.loaded = true;
            var self = this;
            self.loading_state = true;

            var requestParams = {
                loadData: self.component_id,
                namespace: self.component_namespace,
                index: self.component_index
            };

            var response = mgPageControler.vueLoader.vloadData(requestParams);
            return response.done(function (data) {
                self.data = data.data.rawData.data;
                self.loading_state = false;
            }).fail(function () {
                self.loading_state = false;
            });
        },
        loadModal: function (event, targetId, namespace, index, params, addSpinner) {
            mgPageControler.vueLoader.loadModal(event, targetId,
                typeof namespace !== 'undefined' ? namespace : getItemNamespace(targetId),
                typeof index !== 'undefined' ? index : getItemIndex(targetId), params, addSpinner);
        },
        updateMgData: function(toReloadId){
            if(this.component_id === toReloadId)
            {
                this.loadAjaxData();
            }
        }
    }
});