How do I exclude a repeated click event?

Question

I have several components in the template which have an <div (click) = "edit (obj)"> </div> event bound

Same type of handler:

public edit(actdoc: any): void {
  this.applicationRelationShipsService
    .get(actdoc.actdocid)
    .pipe(
      indicate(this.loading$),
      observableTimestampResponse(),
      switchMap((actdoc) =>
        this.dialog
        .open(DialogAddExistingRelationshipDetailsComponent, {
          ...this.dialogConfig,
          height: '480px',
          data: {
            appid: this.application.appid,
            mode: MODES.EDIT,
            actdoc
          },
        })
        .afterClosed()
        .pipe(
          filter(Boolean),
          concatMap(() => this.applicationRelationShipsService.getByAppId(this.application.appid)),
        ),
      ),
    )
    .subscribe((actdocs) => {
      this.actdocs = actdocs.slice();
      this.changeDetection.detectChanges();
    });
}

How to exclude repeated click and this.applicationRelationShipsService.get() call. until the dialog box opens and then closes. Or the request fails.

As solution I can define a public process$ = new BehaviorSubject<boolean>(false); in each component and use it in rxjs, but I don't really want to pollute the component by Subject.

score 0 · Accepted Answer · answered Oct 19 '20 at 18:04

You can use css to disable pointer events. Other solution is to create a flag, something like this:

 public edit(actdoc: any): void {
     if(this.canEdit) {
      this.canEdit = false; 
      this.applicationRelationShipsService
        .get(actdoc.actdocid)
        .pipe(
          indicate(this.loading$),
          observableTimestampResponse(),
          switchMap((actdoc) =>
            this.dialog
            .open(DialogAddExistingRelationshipDetailsComponent, {
              ...this.dialogConfig,
              height: '480px',
              data: {
                appid: this.application.appid,
                mode: MODES.EDIT,
                actdoc
              },
            })
            .afterClosed()
            .pipe(
              filter(Boolean),
              concatMap(() => this.applicationRelationShipsService.getByAppId(this.application.appid)),
            ),
          ),
        )
        .subscribe((actdocs) => {
          this.canEdit = true;
          this.actdocs = actdocs.slice();
          this.changeDetection.detectChanges();
        });
    }
}

Suppose I have 20 compnent where there is `edit()` method, so I should use duplication then: ` if(this.canEdit) { this.canEdit = false;...` — , Oct 19 '20 at 18:05
You can create a feature component with this logic. Add click event as callback function — lissettdm, Oct 19 '20 at 18:09

score 0 · Answer 2 · answered Oct 19 '20 at 18:04

0

how about a simple property with editing = false; then set editing true at the start of edit and have if(this.editing) return; before the relationship service

answered Oct 19 '20 at 18:04

Rodrigo Chapeta

119
1
10

Suppose I have 20 compnent where there is edit() method, so I should use duplication then: `if(this.canEdit) { this.canEdit = false;...` – Oct 19 '20 at 18:05
then you should have something like a guard or this https://stackoverflow.com/questions/49385369/angular-show-spinner-for-every-http-request-with-very-less-code-changes – Rodrigo Chapeta Oct 19 '20 at 18:12

How do I exclude a repeated click event?

2 Answers2