TransWikia.com

How do I exclude a repeated click event?

Stack Overflow Asked by Jessy on January 8, 2021

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.

2 Answers

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();
        });
    }
}

Correct answer by lissettdm on January 8, 2021

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 by Rodrigo Chapeta on January 8, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP