How can I include different alerts for delete rows in a table?

user_10114552 0
Viewed 72

I have created a CRUD table in which you can delete rows by clicking checkboxes. Now I want to add the following conditions:

  • If no row is selected, the message "No rows selected" should appear.
  • If all rows are selected, then the message "Delete all rows?" should appear.
  • When clicking on single rows the message "Delete this rows?" appears.

How do I implement this?

My Code:

  // To delete selected rows
  deleteSelectedRows(): void {
    const rowsToRemove = this.rows.value.filter((v: any) => v.select).map((v: any) => v.calculatoryBookingsLineValuesId);
    const formArray = this.calcBookingsForm.get('rows') as FormArray;
    if (rowsToRemove && rowsToRemove !== null) {
      const ctrls = [...formArray.controls];
      formArray.clear();
      let index  = 0;
      for (const ctrl of ctrls) {
        if (!rowsToRemove.includes(ctrl.value.calculatoryBookingsLineValuesId)) {
          ctrl.get('calculatoryBookingsLineValuesId').setValue(`${index}`);
          formArray.push(ctrl);
          index += 1;
        }
      }
      this.rows = formArray;
    }
  }

// Selected all rows
  public toggleCheckboxes() {
    this.all = !this.all;
    for (const formGroup of this.rows.controls) {
      formGroup.get('select').setValue(this.all);
    }
  }
angular typescript javascript
1 Answers

If rowsToRemove contains actually the rows to delete you can do this:

if(rowsToRemove.length === 0) alert('No rows selected');
else {
    let message = rowsToRemove.length === formArray.length ? 'Delete all rows ?' : 'Delete this rows ?';
    if (window.confirm(message)) { 
       // delete rows here
    }
}
user_60021630
Related