[#30] update my-links & shared component to handle dynamic data

philipphoeninger · Oct 16, 2024 · 1719024 · 1719024
1 parent 17baeb2
commit 1719024
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 12 deletions.
diff --git a/CLIENT/CLIENT.FileSharing/src/app/pages/my-links/my-links.component.html b/CLIENT/CLIENT.FileSharing/src/app/pages/my-links/my-links.component.html
@@ -115,13 +115,14 @@ <h2 class="heading">My Links</h2>
 <mat-paginator
   #paginator
   class="my-links-table-paginator"
-  [length]="dataSource.data.length"
+  [length]="(dataSource.data | async)?.length"
   [pageIndex]="0"
   [pageSize]="10"
   [pageSizeOptions]="[5, 10, 20]"
   aria-label="Select page"
 >
 </mat-paginator>
+
 <div
   class="my-links-context-menu"
   [style.left]="contextMenuPosition.x"

diff --git a/CLIENT/CLIENT.FileSharing/src/app/pages/my-links/my-links.component.ts b/CLIENT/CLIENT.FileSharing/src/app/pages/my-links/my-links.component.ts
@@ -1,5 +1,5 @@
 import { EnExtendTimeSpan } from './../../links/shared/extend-time-span.enum';
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, inject, ViewChild } from '@angular/core';
 import { MatTableModule, MatTable } from '@angular/material/table';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import { MatSortModule, MatSort } from '@angular/material/sort';
@@ -16,6 +16,9 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { SelectionModel } from '@angular/cdk/collections';
 import { EnFileType } from '../../file-items/shared/file-type.enum';
 import { MOCK_TIME_SPANS_FUTURE } from '../../links/shared/mocks/timeSpans.mock.data';
+import { AsyncPipe } from '@angular/common';
+import { LinksApiService } from '../../links/shared/links-api.service';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'my-links',
@@ -34,6 +37,7 @@ import { MOCK_TIME_SPANS_FUTURE } from '../../links/shared/mocks/timeSpans.mock.
     MatButtonModule,
     MatMenuModule,
     MatCheckboxModule,
+    AsyncPipe,
   ],
 })
 export class MyLinksComponent implements AfterViewInit {
@@ -42,11 +46,13 @@ export class MyLinksComponent implements AfterViewInit {
   @ViewChild(MatTable) table!: MatTable<LinkModel>;
   @ViewChild(MatMenuTrigger) contextMenu!: MatMenuTrigger;
 
+  dataSource: MyLinksDataSource = new MyLinksDataSource(
+    inject(LinksApiService),
+  );
+
   EnFileType = EnFileType;
   EnExtendTimeSpan = EnExtendTimeSpan;
 
-  dataSource = new MyLinksDataSource();
-
   timeSpans: ITimeSpan[] = MOCK_TIME_SPANS_FUTURE;
 
   displayedColumns = [
@@ -69,7 +75,10 @@ export class MyLinksComponent implements AfterViewInit {
     this.initialSelection,
   );
 
+  constructor(private linkApiService: LinksApiService) {}
+
   ngAfterViewInit(): void {
+    this.dataSource = new MyLinksDataSource(this.linkApiService);
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
@@ -90,14 +99,18 @@ export class MyLinksComponent implements AfterViewInit {
 
   isAllSelected() {
     const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
+    const numRows = this.dataSource.data.value.length;
     return numSelected == numRows;
   }
 
   toggleAllRows() {
     this.isAllSelected()
       ? this.selection.clear()
-      : this.dataSource.data.forEach((row) => this.selection.select(row));
+      : this.dataSource.data
+          .pipe(
+            map((links) => links.forEach((row) => this.selection.select(row))),
+          )
+          .subscribe();
   }
 
   extendLink(link: LinkModel, time: EnExtendTimeSpan) {

diff --git a/CLIENT/CLIENT.FileSharing/src/app/pages/shared-component/shared.component.html b/CLIENT/CLIENT.FileSharing/src/app/pages/shared-component/shared.component.html
@@ -161,7 +161,7 @@ <h2 class="heading">Shared with me</h2>
 <mat-paginator
   #paginator
   class="shared-table-paginator"
-  [length]="dataSource.data.length"
+  [length]="(dataSource.data | async)?.length"
   [pageIndex]="0"
   [pageSize]="10"
   [pageSizeOptions]="[5, 10, 20]"

diff --git a/CLIENT/CLIENT.FileSharing/src/app/pages/shared-component/shared.component.ts b/CLIENT/CLIENT.FileSharing/src/app/pages/shared-component/shared.component.ts
@@ -1,7 +1,7 @@
-import { AfterViewInit, Component, ViewChild } from '@angular/core';
+import { AfterViewInit, Component, inject, ViewChild } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { DatePipe } from '@angular/common';
+import { AsyncPipe, DatePipe } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
 import { MatPaginatorModule, MatPaginator } from '@angular/material/paginator';
 import { MatSortModule, MatSort } from '@angular/material/sort';
@@ -21,6 +21,8 @@ import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { EnTimeSpan } from '../../file-items/shared/time-span.enum';
 import { MOCK_TIME_SPANS } from '../../file-items/shared/mocks/timeSpans.mock.data';
+import { LinksApiService } from '../../links/shared/links-api.service';
+import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-shared',
@@ -42,6 +44,7 @@ import { MOCK_TIME_SPANS } from '../../file-items/shared/mocks/timeSpans.mock.da
     FormsModule,
     ReactiveFormsModule,
     MatButtonModule,
+    AsyncPipe,
   ],
   templateUrl: './shared.component.html',
   styleUrl: './shared.component.scss',
@@ -52,7 +55,9 @@ export class SharedComponent implements AfterViewInit {
   @ViewChild(MatTable) table!: MatTable<LinkModel>;
   @ViewChild(MatMenuTrigger) contextMenu!: MatMenuTrigger;
 
-  dataSource = new MyLinksDataSource();
+  dataSource: MyLinksDataSource = new MyLinksDataSource(
+    inject(LinksApiService),
+  );
 
   displayedColumns = [
     'select',
@@ -83,7 +88,10 @@ export class SharedComponent implements AfterViewInit {
     this.initialSelection,
   );
 
+  constructor(private linkApiService: LinksApiService) {}
+
   ngAfterViewInit(): void {
+    this.dataSource = new MyLinksDataSource(this.linkApiService);
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
     this.table.dataSource = this.dataSource;
@@ -97,14 +105,18 @@ export class SharedComponent implements AfterViewInit {
 
   isAllSelected() {
     const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
+    const numRows = this.dataSource.data.value.length;
     return numSelected == numRows;
   }
 
   toggleAllRows() {
     this.isAllSelected()
       ? this.selection.clear()
-      : this.dataSource.data.forEach((row) => this.selection.select(row));
+      : this.dataSource.data
+          .pipe(
+            map((links) => links.forEach((row) => this.selection.select(row))),
+          )
+          .subscribe();
   }
 
   onContextMenuAction(event: any, link: LinkModel) {