Provider to intercept click buttons

Asked

Viewed 33 times

1

The project I am developing is composed of many forms with several buttons. What I need to develop is a way to catch double clicks and unnecessary requests for the API. So I developed a directive that I put on all the buttons. <dx-button mltClick text="Enviar"(onClick)="submit()"></dx-button>

The directive basically prevents double clicks from happening and executing the Submit method more times than it should.

@Directive({
    selector: '[mltClick]'
})
export class MultipleClicksDirective {
    lastClick = 0;

    constructor() {
    }

    @HostListener('click', ['$event'])
    clickEvent(event) {
        const currentTime = new Date().getTime();
        const currentClick = currentTime - this.lastClick;
        if (currentClick < 400) {
            event.stopImmediatePropagation();
        }
        this.lastClick = currentTime;
    }
}

There is one problem, though. As you may have noticed I am using Devextreme and its components so some buttons are created from the TS file.

this.dataGrid.instance.addColumn(new ButtonsColumn().add({
     onClick: (event) => this.submit(event)
}));

Then I realized that I should put the directive code in a class with a static method like this:

export class ButtonClickUtils {
    static clickEvent(event) {
        const currentTime = new Date().getTime();
        const currentClick = currentTime - this.lastClick;
        if (currentClick < 400) {
            event.stopImmediatePropagation();
        }
        this.lastClick = currentTime;
    }
}

And call it in every method called by the click events

submit = (event) => {
  ButtonClickUtils.clickEvent(event);
};

the idea was to detect multiple clicks and prevent before firing the same event twice or more.

1 problem: Directive works only on html buttons

2 Problem: Static method does not store the value of the this.lastClick variable;

3 problem: The project consists of numerous buttons and it would be impossible to maintain all forms after.

The solution I thought was to create a Provider that would detect all click-on events on a button. But I do not know whether it would be the best solution and whether it would be feasible to create such a type. If it is feasible as I would create a Provider that detects button-clicking events?

angular onclick devexpress angular-providers

  • It became kind of hard to understand in the background what you need, but basically pq does not disable the buttons when clicked?

  • That would be a great solution, but would I have to put that code on every button? When disabling the button I would need to activate it again creating a duplicate routine in all forms.

  • Turning it on and off in a short period would automatically work but would have a Buttonclickutils.clickEvent(); in all methods?

  • When a new programmer creates a new button or form can’t forget to call the same method?

  • You’re the one who knows if you should turn the button back on. The idea would be this, call a function and run it every click on a button passing its reference, then you just disable that button clicked.

  • then falls in 3 problem, I can not simply call the function on all buttons

  • No pq? How do you want to control button status without placing a function for each button?

  • Each button has a different routine. I can add this disable function within the routine of each button. The problem is that there will be many buttons and every day there are new buttons being created.

Show 3 more comments

1 answer

0

Browser other questions tagged angular onclick devexpress angular-providers

You are not signed in. Login or sign up in order to post.