bulk upload functionality

src/app/organization/organization.component.html

@@ -3,7 +3,7 @@
 <div class="container-fluid">
   <div class="row details-wrapper">
     <div class="col">
-      <h1 class="org-title"> @JBossOutreach </h1>
+      <h1 class="org-title"> {{this.orgname}} </h1>
       <h4> Mentor @ JBoss </h4>
       <h4> Mumbai, IN </h4>
     </div>
@@ -14,32 +14,32 @@ <h4> Download </h4>
     <div class="container-fluid">
       <div class="row action-wrapper">
         <div class="col-2"></div>
-        <button class="col-lg-3"> IMPORT </button>
+        <button class="col-lg-3" (click)="uploader.click()"> IMPORT </button>
+        <input hidden type="file" #uploader (change)="importCSV($event)"/>
         <div class="col-2"></div>
         <button type="button" routerLink="/issue/single" class="col-lg-3 blue-btn"> GENERATE </button>
         <div class="col-2"></div>
       </div>
     </div>
   </div>
-  <h2 class="text-center org-title"><i class="fa fa-calendar"></i>&nbsp;&nbsp; Events: </h2>
-  <div class="container">
-    <div class="row">
-      <div class="col-md-3 card">
-        <img class="card-img-top" src="https://codein.withgoogle.com/static/img/og-image.png" alt="Card image cap">
-        <div class="card-body">
-          <h4 class="card-title title">Google Code-In</h4>
-          <p class="card-text">Certificates: 6590 </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://cdn-images-1.medium.com/max/1200/1*z__mBuA-_5LAzNo0dr0gCQ.png" alt="Card image cap">
-        <div class="card-body">
-          <h4 class="card-title title">Summer of Code </h4>
-          <p class="card-text">Certificates: 3 </p>
-          <a href="#" class="btn btn-danger">See certificates</a>
-        </div>
-      </div>
-    </div>
-  </div>
+  <h2 class="text-center section-title title"><i class="fa fa-users"></i>&nbsp;&nbsp; Certificates Issued</h2>
+<div class="container-fluid details-wrapper">
+  <table class="table shadow">
+    <thead class="table-head ">
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Date</th>
+        <th scope="col">Issued For</th>
+      </tr>
+    </thead>
+    <tbody class="table-body">
+      <h1 *ngIf="rowData.length == 0" class="empty-title">No Certificates Issued</h1>
+      <tr *ngFor="let student of rowData">
+        <th scope="row">{{student.name}}</th>
+        <td>{{student.date}}</td>
+        <td>{{student.desc}}</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
 </div>

src/app/organization/organization.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { OrganizationService } from '../services/organization.service';
 import { Certificate } from '../services/certificate.model';
+import { HttpEvent, HttpResponse } from '@angular/common/http';
 
 @Component({
   selector: 'app-organization',
@@ -10,6 +11,7 @@ import { Certificate } from '../services/certificate.model';
 export class OrganizationComponent implements OnInit {
 
   private gridApi;
+  private orgname;
 
   constructor(private orgService: OrganizationService) { }
 
@@ -23,14 +25,34 @@ export class OrganizationComponent implements OnInit {
 
   rowData = [];
 
+  importCSV(event) {
+      const csv = event.target.files[0];
+      if(event.target.files[0].type != "text/csv" && event.target.files[0].type != "application/vnd.ms-excel"){
+      console.log('type 1 is! '+ event.target.files[0].type);
+    }
+    else{
+      console.log('type 2 is! '+ event.target.files[0].type);
+    }
+      if (csv.size > 5_242_880) {
+        alert(`CSV is larger than 5MBs.`);
+      } else {
+      this.orgService.generateBulkCertificate(event.target.files[0]).subscribe(event => {
+        if (event instanceof HttpResponse) {
+          console.log('Uploaded!');
+        }
+      },
+      error => {console.log("Error: "+error.message);});
+    }
+  }
+
   ngOnInit() {
     this.orgService.getCertificates().subscribe((certificates: Certificate[]) => {
 
       // add certificates in ag-grid
       for (const certificate of certificates){
         this.rowData.push({ name: certificate.student.name, date: certificate.date, desc: certificate.issued_for });
+        this.orgname = certificate.issuing_organization.name;
       }
-      this.gridApi.setRowData(this.rowData);
     });
   }
 

src/app/services/organization.service.ts

@@ -1,8 +1,8 @@
 import { Injectable } from '@angular/core';
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpRequest } from '@angular/common/http';
 import { Certificate } from './certificate.model';
 import { Environment } from '../environments/environments';
-import { Observable } from 'rxjs';
+import { Observable,of } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -23,7 +23,15 @@ export class OrganizationService {
     // Would be used when organization wants to generate single certificate
   }
 
-  private generateBulkCertificate() {
+  generateBulkCertificate(file:File) {
     // Would be used when organization wants to many certificates by using csv/excel file
+    const data = new FormData();
+    data.append('file', file);
+    const token = 'JWT '+localStorage.getItem('token');
+    const options = {
+      headers: new HttpHeaders().set('Authorization', token)
+    };
+    const req = new HttpRequest('POST', Environment.baseUrl+'api/issue_certificate/csv/', data, options);
+    return this.http.request(req);
   }
 }