table view added

Author: Binod Sahu

src/app/components/customer-right-side-table/customer-right-side-table.component.html

@@ -1,33 +1,39 @@
 <div class="mat-elevation-z8">
- <table mat-table [dataSource]="dataSource">
- 
- <!-- Position Column -->
- <ng-container matColumnDef="position">
- <th mat-header-cell *matHeaderCellDef> No. </th>
- <td mat-cell *matCellDef="let element"> {{element.position}} </td>
- </ng-container>
- 
- <!-- Name Column -->
- <ng-container matColumnDef="name">
- <th mat-header-cell *matHeaderCellDef> Name </th>
- <td mat-cell *matCellDef="let element"> {{element.name}} </td>
- </ng-container>
- 
- <!-- Weight Column -->
- <ng-container matColumnDef="weight">
- <th mat-header-cell *matHeaderCellDef> Weight </th>
- <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
- </ng-container>
- 
- <!-- Symbol Column -->
- <ng-container matColumnDef="symbol">
- <th mat-header-cell *matHeaderCellDef> Symbol </th>
- <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
- </ng-container>
- 
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
- </table>
- 
- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+ <table mat-table [dataSource]="dataSource">
+
+ <!-- Position Column -->
+ <ng-container matColumnDef="model">
+ <th mat-header-cell *matHeaderCellDef> Model </th>
+ <td mat-cell *matCellDef="let element"> {{element.model}} </td>
+ </ng-container>
+
+ <!-- Name Column -->
+ <ng-container matColumnDef="ram">
+ <th mat-header-cell *matHeaderCellDef> RAM </th>
+ <td mat-cell *matCellDef="let element"> {{element.ram.memory}} {{element.ram.unit}}</td>
+ </ng-container>
+
+ <!-- Weight Column -->
+ <ng-container matColumnDef="hdd">
+ <th mat-header-cell *matHeaderCellDef> HDD </th>
+ <td mat-cell *matCellDef="let element"> {{element.hdd.count}}{{element.hdd.unit}} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="location">
+ <th mat-header-cell *matHeaderCellDef> Location </th>
+ <td mat-cell *matCellDef="let element"> {{element.location | slice:0:-6}} </td>
+ </ng-container>
+
+ <!-- Symbol Column -->
+ <ng-container matColumnDef="price">
+ <th mat-header-cell *matHeaderCellDef> price </th>
+ <td mat-cell *matCellDef="let element"> {{element.price.currencySymbol}} {{element.price.amountCents}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+ </table>
+
+ <mat-paginator [pageSizeOptions]="[10, 20, 30]" showFirstLastButtons></mat-paginator>
 </div>

src/app/components/customer-right-side-table/customer-right-side-table.component.ts

@@ -1,52 +1,29 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, Input, ChangeDetectorRef, SimpleChanges, OnChanges } from '@angular/core';
 import {MatPaginator} from '@angular/material/paginator';
 import {MatTableDataSource} from '@angular/material/table';
 // import { PeriodicElement } from '../customer-side-nav/customer-side-nav.component';
-
-export interface PeriodicElement {
- name: string;
- position: number;
- weight: number;
- symbol: string;
-}
+import {
+ Servers
+} from 'src/app/model/customer';
 
 @Component({
  selector: 'app-customer-right-side-table',
  templateUrl: './customer-right-side-table.component.html',
  styleUrls: ['./customer-right-side-table.component.scss']
 })
-export class CustomerRightSideTableComponent implements OnInit {
- displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
- dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
+export class CustomerRightSideTableComponent implements OnInit, OnChanges {
+ @Input() serverTabledata: Servers[] = null;
+ displayedColumns: string[] = ['model', 'ram', 'hdd', 'location', 'price'];
+ dataSource: MatTableDataSource<Servers> = null;
  @ViewChild(MatPaginator) paginator: MatPaginator;
 
- constructor() { }
+ constructor(private cd: ChangeDetectorRef) { }
 
- ngOnInit() {
+ ngOnInit() { }
+ 
+ ngOnChanges(changes: SimpleChanges): void {
+ this.dataSource = new MatTableDataSource(this.serverTabledata);
  this.dataSource.paginator = this.paginator;
+ this.cd.markForCheck();
  }
-
 }
-
-const ELEMENT_DATA: PeriodicElement[] = [
- {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
- {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
- {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
- {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
- {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
- {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
- {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
- {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
- {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
- {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
- {position: 11, name: 'Sodium', weight: 22.9897, symbol: 'Na'},
- {position: 12, name: 'Magnesium', weight: 24.305, symbol: 'Mg'},
- {position: 13, name: 'Aluminum', weight: 26.9815, symbol: 'Al'},
- {position: 14, name: 'Silicon', weight: 28.0855, symbol: 'Si'},
- {position: 15, name: 'Phosphorus', weight: 30.9738, symbol: 'P'},
- {position: 16, name: 'Sulfur', weight: 32.065, symbol: 'S'},
- {position: 17, name: 'Chlorine', weight: 35.453, symbol: 'Cl'},
- {position: 18, name: 'Argon', weight: 39.948, symbol: 'Ar'},
- {position: 19, name: 'Potassium', weight: 39.0983, symbol: 'K'},
- {position: 20, name: 'Calcium', weight: 40.078, symbol: 'Ca'},
-];

src/app/components/customer-side-nav/customer-side-nav.component.html

@@ -54,6 +54,6 @@
  </div>
  </div>
  <div class="customer-table-container">
- <app-customer-right-side-table></app-customer-right-side-table>
+ <app-customer-right-side-table [serverTabledata]="serverTabledata"></app-customer-right-side-table>
  </div>
 </div>

src/app/components/customer-side-nav/customer-side-nav.component.ts

@@ -1,11 +1,11 @@
-import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewEncapsulation, ViewChild, ChangeDetectorRef } from '@angular/core';
 import { CustomerService } from 'src/app/services/customer-service';
 import {
  Customer,
  HDDs,
  Hddtype,
  checkboxContentType,
- checkboxContent
+ checkboxContent, Servers
 } from 'src/app/model/customer';
 import { removeDuplicates } from '../../util/util';
 
@@ -22,12 +22,14 @@ export class CustomerSideNavComponent implements OnInit {
  step = 250;
  stepRange = [0, 72000];
  serverData: Customer;
+ serverTabledata: Servers[];
  HDDs: Hddtype[] = HDDs;
  ramCheckboxContent: checkboxContentType[] = checkboxContent;
  locationDropdown: string | string[];
 
  constructor(
- public restApi: CustomerService
+ public restApi: CustomerService,
+ private cd: ChangeDetectorRef
  ) { }
 
  ngOnInit() {
@@ -37,17 +39,17 @@ export class CustomerSideNavComponent implements OnInit {
  loadCustomer() {
  this.restApi.getCustomer().subscribe((data: Customer) => {
  this.serverData = data;
- console.log(this.serverData.servers);
+ this.serverTabledata = data.servers;
+ this.cd.markForCheck();
  this.locationDropdown = removeDuplicates(this.serverData.servers.map(location => { return location.location }));
- console.log(this.locationDropdown);
  });
  }
  rangeChanged(event) {
  console.log(event[0]);
  console.log(event[1]);
  }
  valueChange() {
- console.log(this.ramCheckboxContent.filter(x => x.checked === true).map(x => x.name).join(','));
+ console.log(this.ramCheckboxContent.filter(x => x.checked === true).map(x => x.value).join(','));
  }
  locationSelection(event){
  console.error(event.value); 

src/app/services/customer-service.ts

@@ -12,7 +12,6 @@ export class CustomerService {
 
  endpointURL:string = 'http://assignment.ut3.nl:4300/api/servers';
  constructor(private httpClient: HttpClient) { }
-
  getFilteredCustomerList(searchParams){
  const httpOptions = {
  params: new HttpParams().set("storageMin", searchParams.storageMin)