Merge pull request #45 from edu-xored/delete_button_43

Add delete button (#43)
edu-xored · Feb 3, 2018 · 5a942b3 · 5a942b3
2 parents 8d9d7cc + f79a33b
commit 5a942b3
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/src/app/components/reports/reports.component.html b/src/app/components/reports/reports.component.html
@@ -18,6 +18,13 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header> Time </mat-header-cell>
         <mat-cell *matCellDef="let element"> {{element.time}} </mat-cell>
       </ng-container>
+
+      <ng-container matColumnDef="Delete">
+        <mat-header-cell *matHeaderCellDef mat-sort-header> Delete </mat-header-cell>
+        <mat-cell *matCellDef="let element"> 
+          <button mat-button (click)="deleteReport(element.id)"><mat-icon aria-label="Add new report">delete</mat-icon></button>
+        </mat-cell>
+      </ng-container>
 
       <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
       <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>

diff --git a/src/app/components/reports/reports.component.ts b/src/app/components/reports/reports.component.ts
@@ -1,15 +1,18 @@
 import { Component, ViewChild } from '@angular/core';
 import { MatTableDataSource, MatSort } from '@angular/material';
+import { ReportService } from '../../services/report/report.service'
 
 @Component({
   selector: 'app-reports',
   templateUrl: './reports.component.html',
   styleUrls: ['./reports.component.css']
 })
 export class ReportsComponent {
-  displayedColumns = ['Date', 'Distance', 'Time'];
+  displayedColumns = ['Date', 'Distance', 'Time', 'Delete'];
   dataSource = new MatTableDataSource(ELEMENT_DATA);
 
+  constructor(public reportService: ReportService) { }
+
   @ViewChild(MatSort) sort: MatSort;
 
   /**
@@ -19,18 +22,24 @@ export class ReportsComponent {
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
   }
+
+  deleteReport(id: number) {
+    console.log(id);
+    // this.reportService.deleteReport(id);
+  }
 }
 
 export interface Element {
+  id: number;
   date: string;
   distance: number;
   time: string;
 }
 
 const ELEMENT_DATA: Element[] = [
-  {date: '11.03.2018', distance: 5000, time: '00:12:30'},
-  {date: '11.04.2018', distance: 1000, time: '00:13:30'},
-  {date: '11.05.2018', distance: 2500, time: '00:14:31'},
-  {date: '11.06.2018', distance: 3000, time: '00:15:30'},
-  {date: '11.08.2018', distance: 1200, time: '00:20:30'},
+  {id: 0, date: '11.03.2018', distance: 5000, time: '00:12:30'},
+  {id: 1, date: '11.04.2018', distance: 1000, time: '00:13:30'},
+  {id: 2, date: '11.05.2018', distance: 2500, time: '00:14:31'},
+  {id: 3, date: '11.06.2018', distance: 3000, time: '00:15:30'},
+  {id: 4, date: '11.08.2018', distance: 1200, time: '00:20:30'},
 ];