Skip to content

Commit

Permalink
[#24] add selection column to uploads table
Browse files Browse the repository at this point in the history
  • Loading branch information
philipphoeninger committed Oct 13, 2024
1 parent 39c08bd commit 3e02e1d
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ <h2 class="heading">My Uploads</h2>
<!-- Filter by File Type -->
<mat-form-field subscriptSizing="dynamic">
<mat-label>Type</mat-label>
<mat-select [formControl]="fileTypeControl" multiple>
<mat-select
[formControl]="fileTypeControl"
multiple
(selectionChange)="(null)"
>
@for (group of fileTypeGroups; track group) {
<mat-optgroup [label]="group.name" [disabled]="group.disabled">
@for (type of group.fileTypes; track type) {
Expand All @@ -23,7 +27,10 @@ <h2 class="heading">My Uploads</h2>
<!-- Filter by Changed Time -->
<mat-form-field style="margin-left: 16px" subscriptSizing="dynamic">
<mat-label>Changed</mat-label>
<mat-select [formControl]="timeSpanControl">
<mat-select
[formControl]="timeSpanControl"
(selectionChange)="onTimeSpanFilterChanged($event)"
>
@for (timeSpan of timeSpans; track timeSpan) {
<mat-option [value]="timeSpan">{{ timeSpan.label }}</mat-option>
}
Expand All @@ -43,10 +50,36 @@ <h2 class="heading">My Uploads</h2>
</div>
<div class="table-container">
<table mat-table class="full-width-table" matSort aria-label="Elements">
<!-- Select Column -->
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef style="padding-inline: 0">
<mat-checkbox
(change)="$event ? toggleAllRows() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let row" style="padding-inline: 0">
<mat-checkbox
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</td>
</ng-container>
<!-- Name Column -->
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
<td mat-cell *matCellDef="let row">
<th
mat-header-cell
*matHeaderCellDef
mat-sort-header
style="padding-left: 0"
>
Name
</th>
<td mat-cell *matCellDef="let row" style="padding-left: 0">
<div style="display: flex; align-items: center; gap: 8px">
<mat-icon>{{ row.isFolder ? "folder" : "description" }}</mat-icon>
<span>{{ row.name }}</span>
Expand Down Expand Up @@ -84,6 +117,7 @@ <h2 class="heading">My Uploads</h2>
*matRowDef="let row; columns: displayedColumns"
(contextmenu)="onContextMenuAction($event, row)"
></tr>
<!-- TODO: matNoDataRow -->
</table>
</div>
<mat-paginator
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,3 +56,8 @@
visibility: hidden;
position: fixed;
}

.mat-column-select {
overflow: initial;
width: 44px;
}
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,15 @@ import { MatTableModule, MatTable } from '@angular/material/table';
import { FileItem } from '../../file-items/shared/file-item.model';
import { FileItemsDataSource } from '../../file-items/shared/mocks/fileItemDataSource';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatSelectChange, MatSelectModule } from '@angular/material/select';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatButtonModule } from '@angular/material/button';
import { MOCK_FILE_TYPE_GROUPS } from '../../file-items/shared/mocks/fileTypeGroups.mock.data';
import { ITimeSpan } from '../../file-items/shared/time-span.interface';
import { MOCK_TIME_SPANS } from '../../file-items/shared/mocks/timeSpans.mock.data';
import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
import { SelectionModel } from '@angular/cdk/collections';
import { MatCheckboxModule } from '@angular/material/checkbox';

@Component({
selector: 'app-uploads',
Expand All @@ -34,6 +36,7 @@ import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
ReactiveFormsModule,
MatButtonModule,
MatMenuModule,
MatCheckboxModule,
],
templateUrl: './uploads.component.html',
styleUrl: './uploads.component.scss',
Expand All @@ -44,7 +47,7 @@ export class UploadsComponent {
@ViewChild(MatTable) table!: MatTable<FileItem>;
@ViewChild(MatMenuTrigger) contextMenu!: MatMenuTrigger;
dataSource = new FileItemsDataSource();
displayedColumns = ['name', 'fileSize', 'lastChanged', 'actions'];
displayedColumns = ['select', 'name', 'fileSize', 'lastChanged', 'actions'];

fileTypeControl = new FormControl('');
fileTypeGroups = MOCK_FILE_TYPE_GROUPS;
Expand All @@ -54,6 +57,13 @@ export class UploadsComponent {

contextMenuPosition = { x: '0px', y: '0px' };

initialSelection = [];
allowMultiSelect = true;
selection = new SelectionModel<FileItem>(
this.allowMultiSelect,
this.initialSelection,
);

ngAfterViewInit(): void {
this.dataSource.sort = this.sort;
this.dataSource.paginator = this.paginator;
Expand All @@ -65,6 +75,20 @@ export class UploadsComponent {
this.timeSpanControl.setValue('');
}

/** Whether the number of selected elements matches the total number of rows. */
isAllSelected() {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected == numRows;
}

/** Selects all rows if they are not all selected; otherwise clear selection. */
toggleAllRows() {
this.isAllSelected()
? this.selection.clear()
: this.dataSource.data.forEach((row) => this.selection.select(row));
}

onContextMenuAction(event: any, file: FileItem) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
Expand Down

0 comments on commit 3e02e1d

Please sign in to comment.