From c13c49bbad589f2fc7a4c1f3d9dfaf43ccbbf258 Mon Sep 17 00:00:00 2001 From: crowded Date: Tue, 17 Dec 2019 21:50:30 +0530 Subject: [PATCH] Added Bulk Upload functionality. --- .../organization/organization.component.html | 3 ++- .../organization/organization.component.ts | 21 ++++++++++++++----- src/app/services/organization.service.ts | 13 +++++++++--- 3 files changed, 28 insertions(+), 9 deletions(-) diff --git a/src/app/organization/organization.component.html b/src/app/organization/organization.component.html index f26a97b..8d2e29a 100644 --- a/src/app/organization/organization.component.html +++ b/src/app/organization/organization.component.html @@ -14,7 +14,8 @@

Download

- + +
diff --git a/src/app/organization/organization.component.ts b/src/app/organization/organization.component.ts index 35c1f8b..9a6d369 100644 --- a/src/app/organization/organization.component.ts +++ b/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,11 +11,9 @@ import { Certificate } from '../services/certificate.model'; export class OrganizationComponent implements OnInit { private gridApi; - constructor(private orgService: OrganizationService) { } title = 'app'; - columnDefs = [ {headerName: 'Student Name', field: 'name', checkboxSelection: true}, {headerName: 'Date', field: 'date' }, @@ -23,14 +22,26 @@ export class OrganizationComponent implements OnInit { rowData = []; + uploadCSV(event) { + const csv = event.target.files[0]; + 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.gridApi.setRowData(this.rowData); + this.gridApi.setRowData(this.rowData); }); } diff --git a/src/app/services/organization.service.ts b/src/app/services/organization.service.ts index e97353b..fcf541c 100644 --- a/src/app/services/organization.service.ts +++ b/src/app/services/organization.service.ts @@ -1,5 +1,5 @@ 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'; @@ -23,7 +23,14 @@ export class OrganizationService { // Would be used when organization wants to generate single certificate } - private generateBulkCertificate() { - // Would be used when organization wants to many certificates by using csv/excel file + generateBulkCertificate(csv) { + let data = new FormData(); + data.set('file', csv); + let 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); } }