Don't use events, but call the loading controller itself

This commit is contained in:
Jean-Baptiste Bellet
2023-06-30 15:53:51 +02:00
parent 762b777995
commit ddfc60c85e
3 changed files with 16 additions and 12 deletions

View File

@@ -11,7 +11,7 @@
= render partial: 'spree/admin/shared/product_sub_menu'
#products_v3_page{"data-controller": "products", "data-page": @page , "data-perpage": @per_page}
#loading-spinner.spinner-container{ "data-controller": "loading" }
#loading-spinner.spinner-container{ "data-controller": "loading", "data-products-target": "loading" }
.spinner
= t('.loading')
#products-content

View File

@@ -3,13 +3,6 @@ import ApplicationController from "./application_controller";
export default class extends ApplicationController {
connect() {
super.connect();
document.addEventListener("show-loading", this.showLoading);
document.addEventListener("hide-loading", this.hideLoading);
}
disconnect() {
document.removeEventListener("show-loading", this.showLoading);
document.removeEventListener("hide-loading", this.hideLoading);
}
hideLoading = () => {

View File

@@ -1,6 +1,8 @@
import ApplicationController from "./application_controller";
export default class extends ApplicationController {
static targets = ["loading"];
connect() {
super.connect();
// Fetch the products on page load
@@ -16,12 +18,21 @@ export default class extends ApplicationController {
}
showLoading = () => {
const event = new CustomEvent("show-loading");
document.dispatchEvent(event);
if (this.getLoadingController()) {
this.getLoadingController().showLoading();
}
};
hideLoading = () => {
const event = new CustomEvent("hide-loading");
document.dispatchEvent(event);
if (this.getLoadingController()) {
this.getLoadingController().hideLoading();
}
};
getLoadingController = () => {
return (this.loadongController = this.application.getControllerForElementAndIdentifier(
this.loadingTarget,
"loading"
));
};
}