whmcsProxmoxAddon/templates/admin/assets/js/defaultComponents/ajaxFieldForDataTable.js

if (typeof mgDtAjaxCpWrappers === 'undefined') {
    var mgDtAjaxCpWrappers = {
        ajaxComponents: {},
        updateInProgress: false,
        registerAjaxComponent: function (object) {
            var self = this;
            var tmpAjaxObj = {
                obj: object,
                status: 'notStarted',
                inProgress: false
            };
            self.ajaxComponents[object.component_id] = tmpAjaxObj;
            setTimeout(function () {
                self.loadAjaxData();
            }, 100);
        },
        loadAjaxData: async function () {
            var self = this;
            for (var key in self.ajaxComponents) {
                if (!self.ajaxComponents.hasOwnProperty(key)) {
                    continue;
                }

                if(self.ajaxComponents[key].inProgress){
                    continue;
                }

                if (self.ajaxComponents[key].status !== 'notStarted') {
                    continue;
                }

                self.ajaxComponents[key].inProgress = true;

                await self.getPromise(key).then(function () {
                    self.ajaxComponents[key].status = 'completed';
                    self.ajaxComponents[key].inProgress = false;
                });
            }
        },
        getPromise: function (key) {
            var self = this;
            return new Promise(function (resolve, reject) {
                self.ajaxComponents[key].obj.loadAjaxData().then(function (data) {
                    resolve();
                });
            });
        },
        getUnloadedKey: function () {
            var self = this;
            for (var key in self.ajaxComponents) {
                if (!self.ajaxComponents.hasOwnProperty(key)) {
                    continue;
                }
                if (self.ajaxComponents[key].status === 'notStarted') {
                    return key;
                }
            }

            return false;
        }
    };
}

mgJsComponentHandler.addDefaultComponent('dt-ajax-field', {
    template: '#t-dt-ajax-field',
    data: function () {
        return {
            component_id: null,
            component_namespace: null,
            component_index: null,
            wrapper_id: null,
            loading_async: null,
            loading_lang: null,
            data: {},
            loading_state: true
        };
    },
    mounted: function () {
        var self = this;
        var wrapper = $(self.$el).parent();

        self.wrapper_id = $(wrapper).attr('id');
        self.component_id = $(wrapper).attr('component_id');
        self.component_namespace = $(wrapper).attr('component_namespace');
        self.component_index = $(wrapper).attr('component_index');
        self.loading_lang = $(wrapper).attr('loading_lang');
        self.loading_async = $(wrapper).attr('loading_async');
        initTooltipsForDatatables(self.wrapper_id);

        self.initAjaxCp();

    },
    methods: {
        initAjaxCp: function () {
            var self = this;
            if (self.loading_async) {
                mgDtAjaxCpWrappers.registerAjaxComponent(this);
            } else {
                self.loadAjaxData();
            }
        },
        loadAjaxData: function () {

            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;
                self.loading_state = false;
            });
        }
    }
});