bare min table reused for csv upload

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>
+  
+
+<app-shared-table
+    [tableColumns]="examsTableColumns"
+    [tableData]="exams"
+    [isPageable]="false"
+    > 
+
+</app-shared-table>
+</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[];
+  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)
+  }
+
+
+  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,