future transactions template

Core/Core/ClientApp/src/app/home/home.component.css

@@ -18,3 +18,13 @@
 .chart{
   max-width: 20em;
 }
+
+table {
+  width: 100%;
+}
+
+.mat-column-name {
+  max-width: 7em;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}

Core/Core/ClientApp/src/app/home/home.component.html

@@ -15,7 +15,28 @@
         </div>
         <div class="row justify-content-center"><div class="col-md-auto">&nbsp;</div></div>
         <div class="row justify-content-center">
-          <div id="Forecast_Table" class="col-md-auto"><div class="placeholder"><div class="placeholder_inner_text">forecast_table_placeholder</div></div></div>
+          <div id="Forecast_Table" class="col-md-auto, chart">
+            <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+              <!-- 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>
+              <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>
+          </div>
           <div id="Forecast_Pie" class="col-md-auto, chart"><div [chart]="ForecastPieChart"></div></div>
         </div>
         <!--<div id="Expense" class="row justify-content-center"><div class="colauto"><app-expenses>Expenses</app-expenses></div></div>-->

Core/Core/ClientApp/src/app/home/home.component.ts

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LoginService } from '../login/login.service';
 import { Chart } from 'angular-highcharts';
 import { HomeService } from './home.service';
+import { MatPaginator, MatTableDataSource } from '@angular/material';
 @Component({
     selector: 'app-home',
@@ -11,6 +12,11 @@ import { HomeService } from './home.service';
 })
 /** home component*/
 export class HomeComponent implements OnInit {
+  @ViewChild(MatPaginator, { static: true })
+  paginator: MatPaginator;
+  dataSource: MatTableDataSource<PeriodicElement>;
+  displayedColumns: string[] = ['position', 'name', 'weight'];
+
   LoginStatus$: Observable<boolean>;
   Username$: Observable<string>;
@@ -21,9 +27,13 @@ export class HomeComponent implements OnInit {
   /** home ctor */
   constructor(private LoginService: LoginService, private HomeService: HomeService) {
+    //this.dataSource = new MatTableDataSource<PeriodicElement>([]);
+    this.dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);
   }
   ngOnInit() {
+    this.dataSource.paginator = this.paginator;
+
     this.LoginStatus$ = this.LoginService.IsLoggedIn;
     this.Username$ = this.LoginService.CurrentUsername;
     this.HistoryPieChart = this.HomeService.GetHistoryPie();
@@ -35,3 +45,33 @@ export class HomeComponent implements OnInit {
     this.LoginService.logout();
   }
 }
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  { position: 1, name: 'HydrogennnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnX', 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' },
+];