Integrated API for Student Dashboard

src/app/services/student.service.ts

@@ -1,13 +1,22 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Certificate } from './certificate.model';
+import { Environment } from '../environments/environments';
+import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class StudentService {
 
-  constructor() { }
+  constructor(private http: HttpClient) { }
 
-  private getAllCertificates() {
-    // Fetches all the certificates issued to student
+  getCertificates(): Observable<Certificate[]> {
+    const token = 'JWT ' + localStorage.getItem('token');
+    const options = {
+      headers: new HttpHeaders().set('Authorization', token)
+    };
+    return this.http.get<Certificate[]>(Environment.baseUrl+"api/get_certificates", options);
   }
+
 }

src/app/student/student.component.html

@@ -7,40 +7,25 @@
     </div>
     <div class="col-md-7">
       <div class="details-wrapper">
-        <h2 class="title"> Saba Khukhunashvili </h2>
-        <h3> Certificates owned: 13 </h3>
+        <h2 class="title"> Aayushman Choudhary </h2>
+        <h3> Certificates owned: {{this.rowData.length}} </h3>
         <button type="button" class="text-center outline-btn"> Edit Profile </button>
       </div>
     </div>
   </div>
-  <h2 class="text-center section-title title"><i class="fa fa-users"></i>&nbsp;&nbsp; Your Organizations </h2>
+  <h2 class="text-center section-title title"><i class="fa fa-users"></i>&nbsp;&nbsp; Your Certificates </h2>
 
 </div>
 <div class="container">
-  <div class="row">
-    <div class="col-md-3 card">
-      <img class="card-img-top" src="https://lh3.googleusercontent.com/7Lo14ZuKL-nNlCYvOobYQwP8ou-50WUVfCVAsQqd5pWkvbNiAfWeXt8yS99eFuHpjid2mEfLiHfj9VQq_ZkUFRY=s300" alt="Card image cap">
-      <div class="card-body">
-        <h4 class="card-title title">JBoss Outreach</h4>
-        <p class="card-text">Certificates: 11 </p>
-        <a href="#" class="btn btn-danger">See certificates</a>
-      </div>
-    </div>
-    <div class="col-md-3 card">
-      <img class="card-img-top" src="https://lh3.googleusercontent.com/pothvfKKMOM1e-SrPJ3vQKvw5ojTdW9mBsiWLMqRH3d92XqCQT4HajIWLsE8kfzfEKGdwE9RJPovRY8TtFcx0QI=s300" alt="Card image cap">
-      <div class="card-body">
-        <h4 class="card-title title">MetaBrainz</h4>
-        <p class="card-text">Certificates: 3 </p>
-        <a href="#" class="btn btn-danger">See certificates</a>
-      </div>
-    </div>
-    <div class="col-md-3 card">
-      <img class="card-img-top" src="https://lh3.googleusercontent.com/HjDjIIomG9Y4zWk8Ws-p0MxHSIWRwXdYbNJZfsoQ6RGjC5Rp9RdDOIhxhU3eJM4nEZfJ3-0-WSd27oHcmh3NBx22=s300" alt="Card image cap">
-      <div class="card-body">
-        <h4 class="card-title title">Coala</h4>
-        <p class="card-text">Certificates: 11 </p>
-        <a href="#" class="btn btn-danger">See certificates</a>
-      </div>
-    </div>
-  </div>
+    <ag-grid-angular
+      style="width: 60%; height: 500px; margin: 0 auto;"
+      class="ag-theme-balham"
+      [rowData]="rowData"
+      [enableSorting]="true"
+      [enableFilter]="true"
+      [columnDefs]="columnDefs"
+      [enableColResize] = "true"
+      (gridReady)="onGridReady($event)"
+      >
+    </ag-grid-angular>
 </div>

src/app/student/student.component.ts

@@ -1,14 +1,38 @@
 import { Component, OnInit } from '@angular/core';
+import { StudentService } from '../services/student.service';
+import { Certificate } from '../services/certificate.model';
 
 @Component({
   selector: 'app-student',
   templateUrl: './student.component.html',
   styleUrls: ['./student.component.css']
 })
 export class StudentComponent implements OnInit {
+  private gridApi;
 
-  constructor() { }
+    columnDefs = [
+        {headerName: 'Organization Name', field: 'name', checkboxSelection: true},
+        {headerName: 'Date', field: 'date' },
+        {headerName: 'Certificate Description', field: 'desc'}
+    ];
+
+    rowData = [];
+
+  constructor(private studentService: StudentService) { }
 
   ngOnInit() {
+    this.studentService.getCertificates().subscribe((certificates: Certificate[]) => {
+
+      // add certificates in ag-grid
+      for (const certificate of certificates){ 
+        this.rowData.push({ name: certificate.issuing_organization.name, date: certificate.date, desc: certificate.issued_for });
+      }
+      this.gridApi.setRowData(this.rowData);
+    });
   }
+
+  onGridReady(event) {
+    this.gridApi = event.api;
+  }
+
 }