Skip to content
Snippets Groups Projects
Commit a7209971 authored by ywb16155's avatar ywb16155
Browse files

commit #31 - refactoring frontend components,adding AgGrids, beginning styling

parent 43587f5b
No related branches found
No related tags found
No related merge requests found
Showing
with 93 additions and 53 deletions
......@@ -131,11 +131,11 @@ public class LecturerInfoService {
public void delete(String paperId, Boolean isTemplate) {
if(paperId != null && !paperId.isEmpty()) {
int id = parseId(paperId);
questionEntityRepository.deleteByPaperId(id);
minutePaperEntityRepository.deleteByPaperId(id);
if(!isTemplate) {
answerEntityRepository.deleteByPaperId(id);
}
questionEntityRepository.deleteByPaperId(id);
minutePaperEntityRepository.deleteByPaperId(id);
}
}
......
.btn {
line-height: 0.5
}
<span><button style="height: 20px" (click)="invokeParentMethod()" class="btn btn-info">View Response</button></span>
import {Component, OnDestroy} from '@angular/core';
import {ICellRendererAngularComp} from 'ag-grid-angular';
@Component({
selector: 'app-view-response-button',
templateUrl: './view-responses-button.component.html',
styleUrls: ['./view-responses-button.component.css']
})
export class ViewResponsesButtonComponent implements ICellRendererAngularComp, OnDestroy {
public params: any;
agInit(params: any): void {
this.params = params;
}
ngOnDestroy(): void {
}
public invokeParentMethod() {
this.params.context.componentParent.goToResponse(this.params.data);
}
refresh(): boolean {
return false;
}
}
<div class="container">
<div *ngFor="let pair of questionAnswerPairs; let i = index" [attr.data-index]="i">
<div class="row">
<span>Question {{i+1}}:</span>
</div>
<div class="row">
<span>{{pair.question.questionText}}</span>
</div>
<div class="row">
<span>Your response:</span>
</div>
<div class="row">
<span>{{pair.answer.answerText}}</span>
</div>
<div *ngFor="let pair of questionAnswerPairs; let i = index" [attr.data-index]="i">
<div class="row">
<span>Question {{i+1}}:</span>
</div>
<div class="row">
<span>{{pair.question.questionText}}</span>
</div>
<div class="row">
<span>Your response:</span>
</div>
<div class="row">
<span>{{pair.answer.answerText}}</span>
</div>
</div>
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Component, Input, OnDestroy, OnInit} from '@angular/core';
import {LecturerDataService} from 'src/app/services/lecturer-data.service';
import {Router} from '@angular/router';
import {MinutePaperDao} from 'src/app/dao/minute-paper.dao';
import {QuestionAnswerPairDao} from 'src/app/dao/question-answer-pair.dao';
import {Observable} from 'rxjs';
import {AnswerSetDao} from '../../dao/answer-set.dao';
@Component({
selector: 'app-lecturer-response-view',
......@@ -11,9 +13,8 @@ import {QuestionAnswerPairDao} from 'src/app/dao/question-answer-pair.dao';
})
export class LecturerResponseViewComponent implements OnInit, OnDestroy {
public username: String;
public classCode: String;
public currentPaper: MinutePaperDao;
private eventSubscription: any;
@Input() viewEvent: Observable<any>;
public questionAnswerPairs: QuestionAnswerPairDao[];
constructor(private lecturerDataService: LecturerDataService,
......@@ -21,22 +22,18 @@ export class LecturerResponseViewComponent implements OnInit, OnDestroy {
}
ngOnInit(): void {
this.classCode = this.lecturerDataService.classCode;
this.currentPaper = this.lecturerDataService.currentPaper;
this.username = this.lecturerDataService.currentAnswerSet.answerSets[0].username;
this.eventSubscription = this.viewEvent.subscribe((data) => {this.generatePairs(data); });
this.questionAnswerPairs = [];
this.generatePairs();
}
ngOnDestroy(): void {
this.questionAnswerPairs = [];
}
private generatePairs() {
private generatePairs(data: AnswerSetDao) {
for (let i = 0; i < this.lecturerDataService.currentQuestions.length; i++) {
if (this.lecturerDataService.currentQuestions[i] && this.lecturerDataService.currentAnswerSet.answerSets[i]) {
this.questionAnswerPairs.push(new QuestionAnswerPairDao(this.lecturerDataService.currentQuestions[i],
this.lecturerDataService.currentAnswerSet.answerSets[i]));
if (this.lecturerDataService.currentQuestions[i] && data.answerSets[i]) {
this.questionAnswerPairs.push(new QuestionAnswerPairDao(this.lecturerDataService.currentQuestions[i], data.answerSets[i]));
}
}
}
......
<app-navbar></app-navbar>
<div class="row">
<div id="closed-papers" class="col">
<h3>One-minute Paper Responses</h3>
<div *ngFor="let set of answers; let i = index" [attr.data-index]="i">
<div class="container">
<span class="row">{{set.answerSets[i].username}}</span>
<span class="row">{{set.answerSets[i].submissionDate}}</span>
<span class="row"><button (click)="goToResponse(set)">View</button></span>
</div>
</div>
<div id="closed-papers" class="col-6">
<h3>Responses to {{paper.name}} for class {{paper.classCode}}</h3>
<ag-grid-angular
style="width: 1000px; height: 500px;"
class="ag-theme-balham"
[columnDefs]="columnDefs"
[rowData]="rowData | async"
[gridOptions]="gridOptions"
>
</ag-grid-angular>
</div>
<div id="response" class="col-6">
<h3>Responses</h3>
<app-lecturer-response-view [viewEvent]="responseEventSubject.asObservable()"></app-lecturer-response-view>
</div>
<router-outlet></router-outlet>
</div>
import {Component, OnDestroy, OnInit} from '@angular/core';
import {Component, OnDestroy, OnInit, Output} from '@angular/core';
import {LecturerDataService} from 'src/app/services/lecturer-data.service';
import {LecturerInfoService} from 'src/app/services/lecturer-info.service';
import {Router} from '@angular/router';
......@@ -6,6 +6,9 @@ import {QuestionDao} from 'src/app/dao/question.dao';
import {AnswerSetDao} from 'src/app/dao/answer-set.dao';
import {ViewClassesButtonComponent} from '../../GridComponents/ViewClassesButton/view-classes-button.component';
import {GridOptions} from 'ag-grid-community';
import {ViewResponsesButtonComponent} from '../../GridComponents/ViewResponsesButton/view-responses-button.component';
import {Observable, Subject} from 'rxjs';
import {AnswerDao} from '../../dao/answer.dao';
@Component({
selector: 'app-lecturer-submissionsview',
......@@ -14,18 +17,18 @@ import {GridOptions} from 'ag-grid-community';
})
export class LecturerSubmissionsViewComponent implements OnInit, OnDestroy {
public responseEventSubject: Subject<AnswerSetDao> = new Subject();
public lecturerId;
public classCode;
public paperId;
public paper;
public questions: QuestionDao[];
public answers: AnswerSetDao[];
public rowData: any;
public gridOptions: GridOptions;
public columnDefs = [
{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: ViewClassesButtonComponent, lockPosition: true},
{headerName: 'Username', valueGetter: params => params.data.answerSets[0].username, sortable: true, lockPosition: true},
{headerName: 'Submission Date', valueGetter: params => params.data.answerSets[0].submissionDate, sortable: true, lockPosition: true},
{headerName: 'View', field: '', cellRendererFramework: ViewResponsesButtonComponent, lockPosition: true},
];
constructor(private lecturerDataService: LecturerDataService,
......@@ -38,9 +41,12 @@ export class LecturerSubmissionsViewComponent implements OnInit, OnDestroy {
this.answers = [];
this.lecturerId = this.lecturerDataService.lecturerId;
this.classCode = this.lecturerDataService.classCode;
this.paperId = this.lecturerDataService.currentPaper.paperId;
this.paper = this.lecturerDataService.currentPaper;
this.gridOptions = {
context: {componentParent: this}
};
this.rowData = this.lecturerInfoService.getPaperAnswers(this.paper.paperId);
this.getPaperQuestions();
this.getPaperSubmissions();
}
ngOnDestroy(): void {
......@@ -51,18 +57,18 @@ export class LecturerSubmissionsViewComponent implements OnInit, OnDestroy {
public goToResponse(set: AnswerSetDao): void {
this.lecturerDataService.currentAnswerSet = set;
this.lecturerDataService.currentQuestions = this.questions;
this.router.navigate(['response-view']);
this.responseEventSubject.next(set);
this.ngOnDestroy();
}
private getPaperQuestions(): void {
this.lecturerInfoService.getPaperQuestions(this.paperId).subscribe((data: QuestionDao[]) => {
this.lecturerInfoService.getPaperQuestions(this.paper.paperId).subscribe((data: QuestionDao[]) => {
data.forEach(e => this.questions.push(e));
});
}
private getPaperSubmissions(): void {
this.lecturerInfoService.getPaperAnswers(this.paperId).subscribe((data: AnswerSetDao[]) => {
private getPaperAnswers() {
this.lecturerInfoService.getPaperAnswers(this.paper.paperId).subscribe((data: AnswerSetDao[]) => {
data.forEach(e => this.answers.push(e));
});
}
......
......@@ -18,6 +18,7 @@ import {AgGridModule} from 'ag-grid-angular';
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';
import {ViewResponsesButtonComponent} from 'src/app/GridComponents/ViewResponsesButton/view-responses-button.component';
@NgModule({
declarations: [
......@@ -31,14 +32,17 @@ import {DeletePaperButtonComponent} from 'src/app/GridComponents/DeletePaperButt
LecturerEditTemplateViewComponent,
ViewClassesButtonComponent,
ViewSubmissionsButtonComponent,
DeletePaperButtonComponent
DeletePaperButtonComponent,
ViewResponsesButtonComponent
],
imports: [
CommonModule,
AgGridModule.withComponents([
ViewClassesButtonComponent,
ViewSubmissionsButtonComponent,
DeletePaperButtonComponent]),
DeletePaperButtonComponent,
ViewResponsesButtonComponent
]),
FormsModule,
ReactiveFormsModule,
NavbarModule,
......
......@@ -12,7 +12,7 @@ import {LecturerEditTemplateViewComponent} from './LecturerEditTemplateView/lect
const lecturerRoutes = [
{ path: 'ldashboard', component: LecturerRootComponent },
{ path: 'paper-view', component: LecturerPaperViewComponent },
{ path: 'submissions-view', component: LecturerSubmissionsViewComponent },
{ path: 'submissions-view', component: LecturerSubmissionsViewComponent},
{ path: 'response-view', component: LecturerResponseViewComponent },
{ path: 'creation-view', component: LecturerCreateOmpViewComponent },
{ path: 'template-view', component: LecturerTemplateViewComponent },
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment