Skip to content

Commit

Permalink
Add bulk actions to console
Browse files Browse the repository at this point in the history
  • Loading branch information
ptkach committed Jan 16, 2025
1 parent 9f22f2e commit 348cebf
Show file tree
Hide file tree
Showing 3 changed files with 68 additions and 0 deletions.
23 changes: 23 additions & 0 deletions console-webapp/src/app/domains/domainList.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -65,11 +65,34 @@ <h1>No domains found</h1>
/>
</mat-form-field>

<div class="console-app__domains-selection" [ngClass]="{'active': selection.hasValue()}">
<div class="console-app__domains-selection-text">{{selection.selected.length}} Selected</div>
<div class="console-app__domains-selection-actions"></div>
</div>

<mat-table
[dataSource]="dataSource"
class="mat-elevation-z0"
class="console-app__domains-table"
>
<!-- Checkbox Column -->
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? toggleAllRows() : null"
[checked]="selection.hasValue() && isAllSelected"
[indeterminate]="selection.hasValue() && !isAllSelected"
[aria-label]="checkboxLabel()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
[aria-label]="checkboxLabel(row)">
</mat-checkbox>
</mat-cell>
</ng-container>

<ng-container matColumnDef="domainName">
<mat-header-cell *matHeaderCellDef>Domain Name</mat-header-cell>
<mat-cell *matCellDef="let element">{{
Expand Down
13 changes: 13 additions & 0 deletions console-webapp/src/app/domains/domainList.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,15 @@
}
}

&__domains-selection {
height: 30px;
max-height: 0;
transition: max-height .2s linear;
&.active {
max-height: 30px;
}
}

&-domains__download {
position: absolute;
top: -55px;
Expand Down Expand Up @@ -41,6 +50,10 @@
overflow: hidden;
word-break: break-word;
}
.mat-column-select {
max-width: 60px;
padding-left: 15px;
}
}

&__domains-spinner {
Expand Down
32 changes: 32 additions & 0 deletions console-webapp/src/app/domains/domainList.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
// See the License for the specific language governing permissions and
// limitations under the License.

import { SelectionModel } from '@angular/cdk/collections';
import { HttpErrorResponse, HttpStatusCode } from '@angular/common/http';
import { Component, ViewChild, effect } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
Expand All @@ -31,8 +32,10 @@ import { RegistryLockService } from './registryLock.service';
export class DomainListComponent {
public static PATH = 'domain-list';
private readonly DEBOUNCE_MS = 500;
isAllSelected = false;

displayedColumns: string[] = [
'select',
'domainName',
'creationTime',
'registrationExpirationTime',
Expand All @@ -42,6 +45,7 @@ export class DomainListComponent {
];

dataSource: MatTableDataSource<Domain> = new MatTableDataSource();
selection = new SelectionModel<Domain>(true, [], undefined, this.isChecked());
isLoading = true;

searchTermSubject = new Subject<string>();
Expand Down Expand Up @@ -136,4 +140,32 @@ export class DomainListComponent {
this.resultsPerPage = event.pageSize;
this.reloadData();
}

toggleAllRows() {
if (this.isAllSelected) {
this.selection.clear();
this.isAllSelected = false;
return;
}

this.selection.select(...this.dataSource.data);
this.isAllSelected = true;
}

checkboxLabel(row?: Domain): string {
if (!row) {
return `${this.isAllSelected ? 'deselect' : 'select'} all`;
}
return `${this.selection.isSelected(row) ? 'deselect' : 'select'} row ${row.domainName + 1}`;
}

private isChecked(): ((o1: Domain, o2: Domain) => boolean) | undefined {
return (o1: Domain, o2: Domain) => {
if (!o1.domainName || !o2.domainName) {
return false;
}

return this.isAllSelected || o1.domainName === o2.domainName;
};
}
}

0 comments on commit 348cebf

Please sign in to comment.