checkbox bug fix

This commit is contained in:
Park Byung Eun 2022-08-19 07:43:52 +00:00
parent 0794156b86
commit 515ae6f754
2 changed files with 57 additions and 26 deletions

View File

@ -25,21 +25,23 @@
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
(change)="$event ? __toggleAllRows() : null"
[checked]="selection.hasValue() && __isAllSelected()"
[indeterminate]="
selection.hasValue() && !__isAllSelected()
(change)="$event ? __registToggleAllRows() : null"
[checked]="
registSelection.hasValue() && __registIsAllSelected()
"
[aria-label]="__checkboxLabel()"
[indeterminate]="
registSelection.hasValue() && !__registIsAllSelected()
"
[aria-label]="__registCheckboxLabel()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="__checkboxLabel(row)"
(change)="$event ? registSelection.toggle(row) : null"
[checked]="registSelection.isSelected(row)"
[aria-label]="__registCheckboxLabel(row)"
>
</mat-checkbox>
</td>
@ -178,21 +180,23 @@
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox
(change)="$event ? __toggleAllRows() : null"
[checked]="selection.hasValue() && __isAllSelected()"
[indeterminate]="
selection.hasValue() && !__isAllSelected()
(change)="$event ? __removeToggleAllRows() : null"
[checked]="
removeSelection.hasValue() && __removeIsAllSelected()
"
[aria-label]="__checkboxLabel()"
[indeterminate]="
removeSelection.hasValue() && !__removeIsAllSelected()
"
[aria-label]="__removeCheckboxLabel()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="__checkboxLabel(row)"
(change)="$event ? removeSelection.toggle(row) : null"
[checked]="removeSelection.isSelected(row)"
[aria-label]="__removeCheckboxLabel(row)"
>
</mat-checkbox>
</td>

View File

@ -115,7 +115,8 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
selectedPartnerRecommendation?: PartnerRecommendation;
pagination?: PartnerRecommendationPagination;
selection = new SelectionModel<MemberModel>(true, []);
registSelection = new SelectionModel<MemberModel>(true, []);
removeSelection = new SelectionModel<MemberModel>(true, []);
private _unsubscribeAll: Subject<any> = new Subject<any>();
@ -234,30 +235,56 @@ export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
// -----------------------------------------------------------------------------------------------------
/** Selects all rows if they are not all selected; otherwise clear selection. */
__toggleAllRows() {
if (this.__isAllSelected()) {
this.selection.clear();
__registToggleAllRows() {
if (this.__registIsAllSelected()) {
this.registSelection.clear();
return;
}
this.selection.select(...this.registPartnerStoreDataSource.data);
this.registSelection.select(...this.registPartnerStoreDataSource.data);
}
__isAllSelected() {
const numSelected = this.selection.selected.length;
__registIsAllSelected() {
const numSelected = this.registSelection.selected.length;
const numRows = this.registPartnerStoreDataSource.data.length;
return numSelected === numRows;
}
/** The label for the checkbox on the passed row */
__checkboxLabel(row?: MemberModel): string {
__registCheckboxLabel(row?: MemberModel): string {
if (!row) {
return `${this.__isAllSelected() ? 'deselect' : 'select'} all`;
return `${this.__registIsAllSelected() ? 'deselect' : 'select'} all`;
}
return `${
this.selection.isSelected(row) ? 'deselect' : 'select'
this.registSelection.isSelected(row) ? 'deselect' : 'select'
} row ${row.getUsername()}`;
}
__removeToggleAllRows() {
if (this.__removeIsAllSelected()) {
this.removeSelection.clear();
return;
}
this.removeSelection.select(...this.removePartnerStoreDataSource.data);
}
__removeIsAllSelected() {
const numSelected = this.removeSelection.selected.length;
const numRows = this.removePartnerStoreDataSource.data.length;
return numSelected === numRows;
}
/** The label for the checkbox on the passed row */
__removeCheckboxLabel(row?: MemberModel): string {
if (!row) {
return `${this.__removeIsAllSelected() ? 'deselect' : 'select'} all`;
}
return `${
this.removeSelection.isSelected(row) ? 'deselect' : 'select'
} row ${row.getUsername()}`;
}
/**
* Create product
*/