bet/beteran-backend-app-browser
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

checkbox bug fix

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/app/modules/admin/member/partner-recommendation/components/list.component.html
View File

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

47
src/app/modules/admin/member/partner-recommendation/components/list.component.ts
View File

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