vendredi 4 octobre 2019

Mat-checkbox checked property determined by modal response

I have an array of users and in HTML I used *ngFor to generate a checkbox for each element. I also have an @Input assignedAccountIds[] which represents the default selected users.

The checkbox element is the following one:

<mat-checkbox
   color="primary"
   [disabled]="disableCurrentAccountCheckbox && account.id === currentAccountId"
   [checked]="isAccountSelected(account)"
   (change)="onSelectAccount($event, account)"
>

isAccountSelected method verify if a user exists in the selected items array to know if I need to check it or not, and here is the implementation:

isAccountSelected(account: ClientAccount): boolean {
    return (this.assignedAccountIds || []).includes(account.id);
}

On the change output, the method implementation is the following one:

onSelectAccount(event: MatCheckboxChange, account: ClientAccount): void {
    if (
      !event.checked &&
      this.currentAccountId &&
      account.id === this.currentAccountId
    ) {
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        data: {
          message: `You will not be able to see this inspection if you unassign yourself!`,
          buttonColor: 'primary',
          buttonLabel: 'Unassign',
        },
        position: {
          right: '10px',
          bottom: '10px',
        },
        maxWidth: '580px',
      });

      dialogRef
        .afterClosed()
        .pipe(untilDestroyed(this))
        .subscribe(result => console.log(result));
    } else {
      this.selectionChange.emit({ id: account.id, checked: event.checked });
    }
  }

So, what I'm actually trying to do is to display a confirmation modal when you want to unselect yourself from the list. And only after you select Yes or No from the modal, the checkbox will remain checked or will be unchecked.




Aucun commentaire:

Enregistrer un commentaire