Merge pull request #5 from arun1205/bulk-upload-csv

Bulk upload csv

src/app/modules/manage-exams-module/components/exam-cycle/exam-cycle.component.html

@@ -71,22 +71,22 @@
                                 <mat-datepicker #picker3></mat-datepicker>
                             </mat-form-field>
                         </div>
-                        <div class="flex flex-column ">
+                     <!--    <div class="flex flex-column ">
                             <h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">Start time</h4>
                             <mat-form-field appearance="outline" style="width:16.5rem">
                                 <mat-label>hh:mm</mat-label>
                                 <input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker"  [strict]="false" id="timepicker-example" mode="12h">
                                 <mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
                             </mat-form-field>
-                        </div>
-                        <div class="flex flex-column">
+                        </div> -->
+                     <!--    <div class="flex flex-column">
                             <h4 style="font-weight:400;margin-bottom:1rem;margin-top:2rem">End time</h4>
                             <mat-form-field appearance="outline" style="width:16.5rem">
                                 <mat-label>hh:mm</mat-label>
                                 <input class="custom-timepicker"style="border:none;"matTimepicker #t="matTimepicker"  [strict]="false" id="timepicker-example" mode="12h">
                                 <mat-icon matSuffix (click)="t.showDialog()">access_time</mat-icon>
                             </mat-form-field>
-                        </div>
+                        </div> -->
                     </div>
                     <div class="flex flex-row  " style="gap: 1.5rem">
                         <div class="flex flex-column">

src/app/modules/manage-exams-module/components/exams-table/exams-table.component.html

 <div style="margin: 105px;">
     <h2 class="mx-auto m3 p3" i18n>{{msgs.manageExamsText}}</h2>
 </div>
-
+<div class="fixed right-0 ">
+    <button mat-button color="primary" mat-raised-button (click)="openBulkUploadDialog()">Bulk Upload</button>
+  </div>
 
 <app-shared-table
     [tableColumns]="examsTableColumns"

src/app/modules/manage-exams-module/components/exams-table/exams-table.component.ts

-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import {MatDialog} from '@angular/material/dialog';
 
 import { msgs } from "../../../../../locale/en";
 import { TableColumn } from '../../../shared/components/shared-table/shared-table.component';
+import { SharedDialogOverlayComponent } from '../../../shared/components/shared-dialog-overlay/shared-dialog-overlay.component';
 
 export interface Exams {
   examId: string;
@@ -23,6 +25,7 @@ export class ExamsTableComponent {
 
   exams: Exams[];
   examsTableColumns: TableColumn[];
+  constructor(public dialog: MatDialog){}
 
   ngOnInit(): void {
     this.initializeColumns();
@@ -81,7 +84,6 @@ export class ExamsTableComponent {
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -89,7 +91,6 @@ export class ExamsTableComponent {
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -97,7 +98,6 @@ export class ExamsTableComponent {
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -105,7 +105,6 @@ export class ExamsTableComponent {
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -113,14 +112,12 @@ export class ExamsTableComponent {
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       }, {
         examId: "M SC ( NURSING ) - SEMESTER 2",
         description: 'M SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -128,7 +125,6 @@ export class ExamsTableComponent {
         description: 'B SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -136,7 +132,6 @@ export class ExamsTableComponent {
         description: 'B SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -144,7 +139,6 @@ export class ExamsTableComponent {
         description: 'B SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -152,7 +146,6 @@ export class ExamsTableComponent {
         description: 'B SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       },
       {
@@ -160,7 +153,6 @@ export class ExamsTableComponent {
         description: 'B SC ( NURSING )',
         startDate: "23-06-2023",
         endDate: "23-12-2023",
-
         isActive: true
       }
     ];
@@ -169,4 +161,26 @@ export class ExamsTableComponent {
   removeItem(e: Event) {
     console.log(e)
   }
+
+
+  openBulkUploadDialog(): void {
+    const dialogRef = this.dialog.open(SharedDialogOverlayComponent, {
+      data: {
+        exams: this.exams,
+        examsTableColumns: this.examsTableColumns
+      },
+      maxWidth: '800vw',
+      maxHeight: '100vh',
+      height: '80%',
+      width: '80%',
+      disableClose: true
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      console.log('The dialog was closed');
+      //this.animal = result;
+    });
 }
+
+
+}
\ No newline at end of file

src/app/modules/manage-exams-module/manage-exams-module.module.ts

@@ -6,7 +6,7 @@ import { ExamsTableComponent } from './components/exams-table/exams-table.compon
 import { SharedModule } from '../shared/shared.module';
 import { ExamCycleComponent } from './components/exam-cycle/exam-cycle.component';
 import { MaterialModule } from 'src/material/material.module';
-import { MatTimepickerModule } from 'mat-timepicker';
+//import { MatTimepickerModule } from 'mat-timepicker';
 
 
 
@@ -21,7 +21,7 @@ import { MatTimepickerModule } from 'mat-timepicker';
     ManageExamsModuleRoutingModule,
     SharedModule,
     MaterialModule,
-    MatTimepickerModule,
+   // MatTimepickerModule,
    
     
     

src/app/modules/shared/components/shared-dialog-overlay/shared-dialog-overlay.component.html

+<h1 mat-dialog-title>Bulk Upload Exam Cycles</h1>
+<div mat-dialog-content>
+  
+    
+
+
+<div *ngIf="tableDataReady; else dataNotReady">
+
+    <app-shared-table
+    [tableColumns]="examsTableColumns"
+    [tableData]="exams"
+    [isPageable]="false"
+    > 
+
+</app-shared-table>
+
+
+</div>
+
+<ng-template #dataNotReady>
+    <div>
+       
+        <input class="form-control" accept=".csv" id="csv" type="file" 
+        (change)="onFileSelect($event.target)" name="myfile">
+     </div>
+</ng-template>
+
+</div>
+<div mat-dialog-actions>
+  <button mat-button (click)="onNoClick()">Cancel</button>
+  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Add Exam Cycle</button>
+</div>
\ No newline at end of file

src/app/modules/shared/components/shared-dialog-overlay/shared-dialog-overlay.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SharedDialogOverlayComponent } from './shared-dialog-overlay.component';
+
+describe('SharedDialogOverlayComponent', () => {
+  let component: SharedDialogOverlayComponent;
+  let fixture: ComponentFixture<SharedDialogOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SharedDialogOverlayComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SharedDialogOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/shared/components/shared-dialog-overlay/shared-dialog-overlay.component.ts

+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { TableColumn } from '../../../shared/components/shared-table/shared-table.component';
+import { Exams } from '../../../manage-exams-module/components/exams-table/exams-table.component';
+export interface DialogData {
+  examsTableColumns: [];
+  exams: [];
+}
+
+@Component({
+  selector: 'app-shared-dialog-overlay',
+  templateUrl: './shared-dialog-overlay.component.html',
+  styleUrls: ['./shared-dialog-overlay.component.scss']
+})
+export class SharedDialogOverlayComponent {
+  exams: Exams[] = [];
+  examsTableColumns: TableColumn[] = [];
+  tableDataReady: boolean = false;
+
+
+  csvContent: any;
+  convertedArray: Array<any> = [];
+  properties: any = '';
+
+
+  constructor(
+    public dialogRef: MatDialogRef<SharedDialogOverlayComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) { }
+
+  ngOnInit(): void {
+    /*   this.exams = this.data.exams;
+      console.log(this.exams)
+      this.examsTableColumns =this.data.examsTableColumns;
+      console.log(this.examsTableColumns)  */
+  }
+
+  onFileSelect(input:any) {
+    const files = input.files;
+    var fileTypes = ['csv']; //acceptable file types
+
+    if (files && files.length) {
+      var extension = input.files[0].name.split('.').pop().toLowerCase(), //file extension from input file
+        //Validating type of File Uploaded
+        isSuccess = fileTypes.indexOf(extension) > -1; //is extension in acceptable types
+      var that = this;
+      //Flag to check the Validation Result
+      if (isSuccess) {
+        const fileToRead = files[0];
+
+        const fileReader = new FileReader();
+
+        fileReader.onload = (fileLoadedEvent) => {
+          const textFromFileLoaded = fileLoadedEvent?.target?.result;
+          that.csvContent = textFromFileLoaded;
+
+          //Flag is for extracting first line
+          let flag = false;
+          // Main Data
+          let objarray: Array<any> = [];
+          //Properties
+          let prop: Array<any> = [];
+          //Total Length
+          let size: any = 0;
+
+          for (const line of that.csvContent.split(/[\r\n]+/)) {
+            if (flag) {
+              let obj: any = {};
+              for (let k = 0; k < size; k++) {
+                //Dynamic Object Properties
+                obj[prop[k]] = line.split(',')[k];
+              }
+              objarray.push(obj);
+            } else {
+              //First Line of CSV will be having Properties
+              for (let k = 0; k < line.split(',').length; k++) {
+                size = line.split(',').length;
+                //Removing all the spaces to make them usefull
+                prop.push(line.split(',')[k].replace(/ /g, ''));
+              }
+              flag = true;
+            }
+          }
+          //All the values converted from CSV to JSON Array
+          that.convertedArray = objarray;
+          that.properties = [];
+          //Object Keys of Converted JSON Array
+          that.properties = prop;
+
+
+          this.examsTableColumns =  [
+            {
+              columnDef:  that.properties[0],
+              header: 'Exam Cycle',
+              isSortable: true,
+              cell: (element: Record<string, any>) => `${element[that.properties[0]]}`
+            },
+            {
+              columnDef:that.properties[1],
+              header: 'Course Name',
+              isSortable: true,
+              cell: (element: Record<string, any>) => `${element[that.properties[1]]}`
+            },
+            {
+              columnDef: that.properties[2],
+              header: 'Start Date',
+              isSortable: true,
+              cell: (element: Record<string, any>) => `${element[that.properties[2]]}`
+            },
+            {
+              columnDef: that.properties[3],
+              header: 'End Date',
+              isSortable: true,
+              cell: (element: Record<string, any>) => `${element[that.properties[3]]}`
+            },
+          ];
+
+          this.exams = that.convertedArray
+        
+          this.tableDataReady = true;
+        };
+
+        fileReader.readAsText(fileToRead, 'UTF-8');
+      } else {
+        //On Error
+        console.error('Invalid File Format!');
+      }
+    }
+  }
+
+
+
+        
+
+
+  initializeColumns() {
+
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+}

src/app/modules/shared/shared.module.ts

@@ -7,13 +7,15 @@ import { SharedTableComponent } from './components/shared-table/shared-table.com
 import {MaterialModule} from '../../../material/material.module';
 
 import { HeaderComponent } from './components/header/header.component';
+import { SharedDialogOverlayComponent } from './components/shared-dialog-overlay/shared-dialog-overlay.component';
 
 
 
 @NgModule({
   declarations: [
     SharedTableComponent,
-    HeaderComponent
+    HeaderComponent,
+    SharedDialogOverlayComponent
   ],
   imports: [
     CommonModule,