commit #29 - adding buttons to AgGrid in paper-view screen

ompp-api/src/main/java/com/diss/omppapp/services/LecturerInfoService.java

@@ -73,7 +73,7 @@ public class LecturerInfoService {
         try {
             boolean exists = minutePaperEntityRepository.existsByPaperId(parseId(wrapper.getPaper().getPaperId()));
             int id = parseId(wrapper.getPaper().getPaperId());
-            createPaper(id, wrapper.getPaper(), exists, isTemplate);
+            id = createPaper(id, wrapper.getPaper(), exists, isTemplate);
             createQuestions(id, wrapper.getQuestions());
         } catch (Exception e) {
             //Tear down
@@ -81,10 +81,11 @@ public class LecturerInfoService {
         }
     }
 
-    private void createPaper(int id ,PaperDetails paperDetails, boolean exists, boolean isTemplate) throws Exception {
+    private int createPaper(int id ,PaperDetails paperDetails, boolean exists, boolean isTemplate) throws Exception {
         MinutePaperEntity entity = new MinutePaperEntity();
         if(exists) {
             entity = minutePaperEntityRepository.findByPaperId(id).get();
+            entity.setPaperId(entity.getPaperId());
         } else {
             entity.setUsername(paperDetails.getUsername());
             entity.setCreationDate(new Date());
@@ -94,11 +95,10 @@ public class LecturerInfoService {
         entity.setName(paperDetails.getName());
         entity.setTopic(paperDetails.getTopic());
         entity.setTemplate(isTemplate);
-        minutePaperEntityRepository.save(entity);
+        return minutePaperEntityRepository.save(entity).getPaperId();
     }
 
     private void createQuestions(int paperId, List<QuestionDetails> questions) throws Exception {
-
         Optional<List<QuestionEntity>> questionEntities = questionEntityRepository.findAllByPaperIdOrderByQuestionIdAsc(paperId);
 
         if(questionEntities.isPresent()) {

ompp-web/src/app/GridComponents/DeletePaperButton/delete-paper-button.component.html

+<span><button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-danger">Delete Paper</button></span>

ompp-web/src/app/GridComponents/DeletePaperButton/delete-paper-button.component.ts

+import {Component, OnDestroy} from '@angular/core';
+import {ICellRendererAngularComp} from 'ag-grid-angular';
+
+@Component({
+  selector: 'app-delete-button',
+  templateUrl: './delete-paper-button.component.html',
+  styleUrls: ['./delete-paper-button.component.css']
+})
+export class DeletePaperButtonComponent implements ICellRendererAngularComp, OnDestroy {
+  public params: any;
+
+  agInit(params: any): void {
+    this.params = params;
+  }
+
+  ngOnDestroy(): void {
+
+  }
+
+  public invokeParentMethod() {
+    const transaction = {
+      remove: [this.params.data]
+    };
+    this.params.context.componentParent.removePaper(this.params.data, transaction);
+  }
+
+  refresh(): boolean {
+    return false;
+  }
+}

ompp-web/src/app/GridComponents/ViewClassesButton/view-classes-button.component.css

+.btn {
+  line-height: 0.5
+}

ompp-web/src/app/GridComponents/ViewButtonComponent/view-button.component.ts → ompp-web/src/app/GridComponents/ViewClassesButton/view-classes-button.component.ts

@@ -3,10 +3,10 @@ import {ICellRendererAngularComp} from 'ag-grid-angular';
 
 @Component({
   selector: 'app-view-button',
-  templateUrl: './view-button.component.html',
-  styleUrls: ['./view-button.component.css']
+  templateUrl: './view-classes-button.component.html',
+  styleUrls: ['./view-classes-button.component.css']
 })
-export class ViewButtonComponent implements ICellRendererAngularComp, OnDestroy {
+export class ViewClassesButtonComponent implements ICellRendererAngularComp, OnDestroy {
   public params: any;
 
   agInit(params: any): void {

ompp-web/src/app/GridComponents/ViewSubmissionsButton/view-submissions-button.component.css

+.btn {
+  line-height: 0.5
+}

ompp-web/src/app/GridComponents/ViewSubmissionsButton/view-submissions-button.component.html

+<span><button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-info">View Submissions</button></span>

ompp-web/src/app/GridComponents/ViewSubmissionsButton/view-submissions-button.component.ts

+import {Component, OnDestroy} from '@angular/core';
+import {ICellRendererAngularComp} from 'ag-grid-angular';
+
+@Component({
+  selector: 'app-submissions-button',
+  templateUrl: './view-submissions-button.component.html',
+  styleUrls: ['./view-submissions-button.component.css']
+})
+export class ViewSubmissionsButtonComponent implements ICellRendererAngularComp, OnDestroy {
+  public params: any;
+
+  agInit(params: any): void {
+    this.params = params;
+  }
+
+  ngOnDestroy(): void {
+
+  }
+
+  public invokeParentMethod() {
+    this.params.context.componentParent.goToSubmissionsView(this.params.data);
+  }
+
+  refresh(): boolean {
+    return false;
+  }
+}

ompp-web/src/app/LecturerComponents/LecturerDashboardComponents/lecturer-dashboard.component.html

@@ -19,8 +19,8 @@
   <ag-grid-angular
      style="width: 1000px; height: 500px;"
      class="ag-theme-balham"
-     [rowData]="rowData | async"
      [columnDefs]="columnDefs"
+     [rowData]="rowData | async"
      [gridOptions]="gridOptions"
   >
   </ag-grid-angular>

ompp-web/src/app/LecturerComponents/LecturerDashboardComponents/lecturer-dashboard.component.ts

@@ -6,7 +6,7 @@ import {ActivatedRoute, Router} from '@angular/router';
 import {LecturerDataService} from 'src/app/services/lecturer-data.service';
 import {LecturerViewService} from 'src/app/services/lecturer-view.service';
 import {GridOptions} from 'ag-grid-community';
-import {ViewButtonComponent} from '../../GridComponents/ViewButtonComponent/view-button.component';
+import {ViewClassesButtonComponent} from 'src/app/GridComponents/ViewClassesButton/view-classes-button.component';
 
 @Component({
   selector: 'app-lecturer-dashboard',
@@ -20,7 +20,7 @@ export class LecturerDashboardComponent implements OnInit, OnDestroy {
     {headerName: 'Class Code', field: 'classCode', sortable: true, lockPosition: true},
     {headerName: 'Class Name', field: 'classname', sortable: true, lockPosition: true},
     {headerName: 'Year', field: 'year', sortable: true, lockPosition: true},
-    {headerName: 'View', field: '', cellRendererFramework: ViewButtonComponent, lockPosition: true},
+    {headerName: 'View', field: '', cellRendererFramework: ViewClassesButtonComponent, lockPosition: true},
   ];
 
   private isAlive = true;
@@ -58,7 +58,6 @@ export class LecturerDashboardComponent implements OnInit, OnDestroy {
   }
 
   public goToPaperView(classCode: String) {
-    console.log('on click produces: ' + classCode);
     this.lecturerDataService.classCode = classCode;
     this.lecturerViewService.changeToDashboard(false);
     this.router.navigate(['/paper-view']);

ompp-web/src/app/LecturerComponents/LecturerPaperView/lecturer-paper-view.component.html

@@ -2,17 +2,13 @@
 <div class="row">
   <div id="closed-papers" class="col">
     <h3>Your Created One-minute Papers</h3>
-    <div *ngIf="classPapers.length <= 0">
-      <h4>You have no submitted responses for this class!</h4>
-    </div>
-    <div *ngFor="let paper of classPapers; let i = index" [attr.data-index]="i">
-      <div class="container">
-        <span class="row">Class Code: {{paper.classCode}} </span>
-        <span class="row">Minute-paper Topic: {{paper.topic}}</span>
-        <span class="row">Opened: {{paper.creationDate}}</span>
-        <span class="row"><button (click)="goToSubmissionsView(paper)">View</button></span>
-        <span class="row"><button (click)="deletePaper(paper, i)">Delete</button></span>
-      </div>
-    </div>
+    <ag-grid-angular
+      style="width: 2000px; height: 500px;"
+      class="ag-theme-balham"
+      [columnDefs]="columnDefs"
+      [rowData]="classPapers | async"
+      [gridOptions]="gridOptions"
+    >
+    </ag-grid-angular>
   </div>
 </div>

ompp-web/src/app/LecturerComponents/LecturerPaperView/lecturer-paper-view.component.ts

 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {LecturerInfoService} from '../../services/lecturer-info.service';
-import {LecturerDataService} from '../../services/lecturer-data.service';
+import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
+import {LecturerDataService} from 'src/app/services/lecturer-data.service';
 import {Router} from '@angular/router';
-import {MinutePaperDao} from '../../dao/minute-paper.dao';
+import {MinutePaperDao} from 'src/app/dao/minute-paper.dao';
+import {GridOptions} from 'ag-grid-community';
+import {ViewSubmissionsButtonComponent} from 'src/app/GridComponents/ViewSubmissionsButton/view-submissions-button.component';
+import {DeletePaperButtonComponent} from 'src/app/GridComponents/DeletePaperButton/delete-paper-button.component';
 
 @Component({
   selector: 'app-lecturer-paperview',
@@ -13,7 +16,17 @@ export class LecturerPaperViewComponent implements OnInit, OnDestroy {
 
   public classCode: String;
   public lecturerId: String;
-  public classPapers: MinutePaperDao[];
+  public classPapers: any;
+  public gridOptions: GridOptions;
+  public columnDefs = [
+    {headerName: 'Class Code', field: 'classCode', sortable: true, lockPosition: true},
+    {headerName: 'Paper Name', field: 'name', sortable: true, lockPosition: true},
+    {headerName: 'Topic', field: 'topic', sortable: true, lockPosition: true, filter: true},
+    {headerName: 'Anonymous', field: 'anonymous', sortable: true, lockPosition: true},
+    {headerName: 'Creation Date', field: 'creationDate', sortable: true, lockPosition: true},
+    {headerName: 'View Submissions', field: '', cellRendererFramework: ViewSubmissionsButtonComponent, lockPosition: true},
+    {headerName: 'Delete paper', field: '', cellRendererFramework: DeletePaperButtonComponent, lockPosition: true},
+  ];
 
   constructor(private lecturerInfoService: LecturerInfoService,
               private lecturerDataService: LecturerDataService,
@@ -21,22 +34,18 @@ export class LecturerPaperViewComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.classPapers = [];
     this.classCode = this.lecturerDataService.classCode;
     this.lecturerId = this.lecturerDataService.lecturerId;
-    this.getClassesPapers();
+    this.gridOptions = {
+      context: {componentParent: this}
+    };
+    this.classPapers = this.lecturerInfoService.getClassPapers(this.lecturerId, this.classCode);
   }
 
   ngOnDestroy(): void {
     this.classPapers = [];
   }
 
-  private getClassesPapers(): void {
-    this.lecturerInfoService.getClassPapers(this.lecturerId, this.classCode).subscribe((data: MinutePaperDao[]) => {
-      data.forEach(p => {this.classPapers.push(p); console.log(p.paperId); });
-    });
-  }
-
   public goToSubmissionsView(paper: MinutePaperDao) {
     this.classPapers = [];
     this.lecturerDataService.currentPaper = paper;
@@ -44,8 +53,8 @@ export class LecturerPaperViewComponent implements OnInit, OnDestroy {
     this.ngOnDestroy();
   }
 
-  public deletePaper(paper: MinutePaperDao, index: number) {
-    this.classPapers.splice(index, 1);
+  public removePaper(paper: MinutePaperDao, transaction: any) {
+    this.gridOptions.api.updateRowData(transaction);
     this.lecturerInfoService.deletePaper(paper.paperId).subscribe();
   }
 

ompp-web/src/app/LecturerComponents/lecturer-root.module.ts

@@ -15,7 +15,9 @@ import {LecturerViewService} from 'src/app/services/lecturer-view.service';
 import {LecturerTemplateViewComponent} from 'src/app/LecturerComponents/LecturerTemplateView/lecturer-template-view.component';
 import {LecturerEditTemplateViewComponent} from 'src/app/LecturerComponents/LecturerEditTemplateView/lecturer-edit-template-view.component';
 import {AgGridModule} from 'ag-grid-angular';
-import {ViewButtonComponent} from 'src/app/GridComponents/ViewButtonComponent/view-button.component';
+import {ViewClassesButtonComponent} from 'src/app/GridComponents/ViewClassesButton/view-classes-button.component';
+import {ViewSubmissionsButtonComponent} from 'src/app/GridComponents/ViewSubmissionsButton/view-submissions-button.component';
+import {DeletePaperButtonComponent} from 'src/app/GridComponents/DeletePaperButton/delete-paper-button.component';
 
 @NgModule({
   declarations: [
@@ -27,11 +29,16 @@ import {ViewButtonComponent} from 'src/app/GridComponents/ViewButtonComponent/vi
     LecturerCreateOmpViewComponent,
     LecturerTemplateViewComponent,
     LecturerEditTemplateViewComponent,
-    ViewButtonComponent
+    ViewClassesButtonComponent,
+    ViewSubmissionsButtonComponent,
+    DeletePaperButtonComponent
   ],
   imports: [
     CommonModule,
-    AgGridModule.withComponents([ViewButtonComponent]),
+    AgGridModule.withComponents([
+      ViewClassesButtonComponent,
+      ViewSubmissionsButtonComponent,
+      DeletePaperButtonComponent]),
     FormsModule,
     ReactiveFormsModule,
     NavbarModule,