Added Ivy file page without full pagination

src/app/app.module.ts

@@ -47,6 +47,8 @@ import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule, DateAdapter } from '@angular/material/core';
 import {MatPaginatorModule} from '@angular/material/paginator';
 import { CustomDateAdapter } from './custom-date-adapter';
+import { MatTableModule } from '@angular/material/table'  
+
 
 
 /**
@@ -89,6 +91,7 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
   ],
   imports: [
     MatPaginatorModule,
+    MatTableModule,
     MatNativeDateModule,
     BrowserModule,
     ChartsModule,

src/app/graphs/graphs.component.html

@@ -201,7 +201,7 @@
       </table>
     </div>
 
-    <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+    <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
       (page)="updatePage($event)">
     </mat-paginator>
 

src/app/imported-files/imported-files.component.html

@@ -1,28 +1,67 @@
 
-<div class="container-fluid mt--7">
-    <div class="card">
-        <div class="card-header">
-            <h3 class="mb-0">The following files were imported from IVY</h3>
-        </div>
-        <div class="card-body">
-            <div class="justify-content-center">
-                <div class="table-responsive">
-                    <table class="table align-items-center table-flush">
-                        <thead><tr><th>Date Added</th><th>File Name</th><th>Sample Count</th></tr></thead>
-                        <tbody>
-                        <tr *ngFor="let file of fileList">
-                          <td>{{file.date_added | date : 'medium'}}</td>
-                          <td>{{file.file_name}}</td>
-                          <td>{{file.sample_count}}</td>
-                        </tr>
-                        </tbody>
+<div
+  class="full-height bg-primary"
+  fxLayout="row"
+  fxLayoutAlign="center center"
+  fxLayoutGap="40px"
+>
+  <mat-card fxFlex="50%">
+    <mat-card-header>
+      <h1>The following files were imported from IVY</h1>
+    </mat-card-header>
+
+    <mat-card-content fxLayout="row wrap" fxLayoutAlign="center center">
+        <table mat-table [dataSource]="fileList" class="mat-elevation-z8">
+
+            <!--- Note that these columns can be defined in any order.
+                  The actual rendered columns are set as a property on the row definition" -->
+          
+            <!-- Position Column -->
+            <ng-container matColumnDef="position">
+              <th mat-header-cell *matHeaderCellDef> Date Added </th>
+              <td mat-cell *matCellDef="let element"> {{element.date_added | date:"medium"}} </td>
+            </ng-container>
+          
+            <!-- Name Column -->
+            <ng-container matColumnDef="name">
+              <th mat-header-cell *matHeaderCellDef> File Name </th>
+              <td mat-cell *matCellDef="let element"> {{element.file_name}} </td>
+            </ng-container>
+          
+            <!-- Weight Column -->
+            <ng-container matColumnDef="weight">
+              <th mat-header-cell *matHeaderCellDef> Sample Count </th>
+              <td mat-cell *matCellDef="let element"> {{element.sample_count}} </td>
+            </ng-container>
+          
+      
+          
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
-                </div>
-            </div>
-        </div>
+          <mat-card-actions>
+            <button
+            mat-flat-button
+            class="btn-lg"
+            color="accent"
+            fxFlex="50%"
+            (click) = "prev()"
+          ><mat-icon>navigate_before</mat-icon>Prev </button>
+            <button
+              id="btn_next"
+              #nextButton="matButton"
+              mat-flat-button
+              class="btn-lg"
+              color="accent"
+              fxFlex="50%"
+              (click) = "next()"
+            >Next <mat-icon>navigate_next</mat-icon></button>
+           
+          </mat-card-actions>
+   
+    
+    </mat-card-content>
+    
+  </mat-card>
 
-        <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
-        (page)="updatePage($event)">
-      </mat-paginator>
-    </div>
 </div>

src/app/imported-files/imported-files.component.spec.ts

@@ -1,19 +1,55 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {APP_BASE_HREF} from '@angular/common';
+import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCardModule} from '@angular/material/card';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {Router} from '@angular/router';
+import {ApiService} from '../services/api.service';
+import {CacheService} from '../services/cache.service';
+import {SettingsService} from '../services/settings.service';
+import {MockEnvironment} from '../testing/environment.mock';
 
 import { ImportedFilesComponent } from './imported-files.component';
 
 describe('ImportedFilesComponent', () => {
   let component: ImportedFilesComponent;
   let fixture: ComponentFixture<ImportedFilesComponent>;
+  const mockRouter = {navigate: jasmine.createSpy('navigate')};
+  let httpMock: HttpTestingController;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ ImportedFilesComponent ]
+      declarations: [ ImportedFilesComponent ],
+      imports: [
+        HttpClientTestingModule,
+        MatButtonModule,
+        MatCardModule,
+        MatFormFieldModule,
+        MatIconModule,
+        MatInputModule,
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+      ],
+      providers: [
+        {provide: 'APP_ENVIRONMENT', useClass: MockEnvironment},
+        {provide: APP_BASE_HREF, useValue: '/'},
+        {provide: Router, useValue: mockRouter},
+        ApiService,
+        CacheService,
+        SettingsService,
+      ]
     })
     .compileComponents();
   });
 
   beforeEach(() => {
+
+    httpMock = TestBed.inject(HttpTestingController);
     fixture = TestBed.createComponent(ImportedFilesComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();

src/app/imported-files/imported-files.component.ts

@@ -4,6 +4,13 @@ import { ApiService } from '../services/api.service';
 import {PageEvent} from '@angular/material/paginator'
 import { IvyFile } from '../models/ivyfile.interface';
 
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
 @Component({
   selector: 'app-imported-files',
   templateUrl: './imported-files.component.html',
@@ -11,22 +18,32 @@ import { IvyFile } from '../models/ivyfile.interface';
 })
 export class ImportedFilesComponent implements OnInit {
   fileList: IvyFile[] = [];
+
   constructor(private fileService: ApiService) { }
 
   
   ngOnInit(): void {
     this.fileService.getFiles(0).subscribe(fileList => this.fileList = fileList);
   }
-
+  displayedColumns: string[] = ['position', 'name', 'weight'];
   current_page: number = 0;
   pageSize: number = 10;
   pageSizeOptions: number[] = [10,20,50,100];
 
   updatePage(event: PageEvent) {
     this.current_page = event.pageIndex;
-
     this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList);
   }
+  next(){
+    if (this.fileList.length > 0){
+    this.current_page += 1; 
+    this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList);  }}
+  prev(){
+    if (this.current_page > 0){
+      this.current_page -= 1; 
+      this.fileService.getFiles(this.current_page).subscribe(fileList => this.fileList = fileList);
+    }
+  }
 
 }
 

src/styles.scss

@@ -1,2 +1,5 @@
 @import './material-theme.scss';
 @include cr-connect-theme($cr-connect-theme);
+table {
+    width: 100%;
+  }