Skip to content

Commit

Permalink
courses: smoother steps loading (fixes #7779) (#7781)
Browse files Browse the repository at this point in the history 
Co-authored-by: mutugiii <[email protected]>
Co-authored-by: dogi <[email protected]>
  • Loading branch information
@RheuX @Mutugiii @dogi
3 people authored Nov 19, 2024
1 parent 2ea6618 commit 937d33e
Show file tree
Hide file tree
Showing 5 changed files with 103 additions and 85 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "planet",
"license": "AGPL-3.0",
"version": "0.15.51",
"version": "0.15.52",
"myplanet": {
"latest": "v0.20.99",
"min": "v0.19.99"
Expand Down
7 changes: 6 additions & 1 deletion src/app/courses/step-view-courses/courses-step-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,11 @@ <h3 class="margin-lr-3 ellipsis-title"><ng-container i18n>Step</ng-container> {{
</ng-template>
</div>
<ng-template #emptyRecord>
<div class="view-container view-full-height" i18n>No description provided.</div>
<div class="view-container view-full-height" i18n>
<ng-container *ngIf="isLoading; else noContent">
Loading Content...
</ng-container>
<ng-template #noContent>No description provided.</ng-template>
</div>
</ng-template>
</div>
2 changes: 2 additions & 0 deletions src/app/courses/step-view-courses/courses-step-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
isGridView = true;
showChat = false;
isOpenai = false;
isLoading = true;
@ViewChild(MatMenuTrigger) previewButton: MatMenuTrigger;

constructor(
Expand Down Expand Up @@ -125,6 +126,7 @@ export class CoursesStepViewComponent implements OnInit, OnDestroy {
user: this.userService.get(),
type: 'exam' });
}
this.isLoading = false;
}

initResources(resources) {
Expand Down
173 changes: 90 additions & 83 deletions src/app/exams/exams-view.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,91 +16,98 @@
<button mat-icon-button [disabled]="questionNum === maxQuestions" (click)="nextQuestion({ nextClicked: true })" [planetSubmit]="spinnerOn"><mat-icon>navigate_next</mat-icon></button>
</mat-toolbar>
<div class="view-container" [ngClass]="{ 'view-full-height': !isDialog }">
<td-markdown [content]="question?.body"></td-markdown>
<div [ngSwitch]="mode">
<ng-container *ngSwitchCase="'take'">
<ng-container [ngSwitch]="question?.type">
<mat-form-field class="full-width" *ngSwitchCase="'input'">
<input matInput i18n-placeholder placeholder="Enter answer here" [formControl]="answer">
</mat-form-field>
<mat-form-field *ngSwitchCase="'textarea'" class="full-width mat-form-field-type-no-underline">
<planet-markdown-textbox [formControl]="answer"></planet-markdown-textbox>
</mat-form-field>
<mat-radio-group *ngSwitchCase="'select'" class="question-list" [formControl]="answer">
<mat-radio-button [value]="option" *ngFor="let option of question?.choices">
<span class="multiple-choice-text">{{option.text}}</span>
</mat-radio-button>
</mat-radio-group>
<div *ngSwitchCase="'selectMultiple'" class="question-list">
<span class="mat-caption" i18n>
{examType, select, survey {You can choose one or more answers.} exam {There are one or more correct answers. Please choose all correct answers.}}
</span>
<mat-checkbox *ngFor="let option of question?.choices" [value]="option" (change)="setAnswer($event, option)" [checked]="checkboxState[option.id]">
<span class="multiple-choice-text">{{option.text}}</span>
</mat-checkbox>
</div>
<ng-container *ngIf="!isLoading; else LoadingContent">
<td-markdown [content]="question?.body"></td-markdown>
<div [ngSwitch]="mode">
<ng-container *ngSwitchCase="'take'">
<ng-container [ngSwitch]="question?.type">
<mat-form-field class="full-width" *ngSwitchCase="'input'">
<input matInput i18n-placeholder placeholder="Enter answer here" [formControl]="answer">
</mat-form-field>
<mat-form-field *ngSwitchCase="'textarea'" class="full-width mat-form-field-type-no-underline">
<planet-markdown-textbox [formControl]="answer"></planet-markdown-textbox>
</mat-form-field>
<mat-radio-group *ngSwitchCase="'select'" class="question-list" [formControl]="answer">
<mat-radio-button [value]="option" *ngFor="let option of question?.choices">
<span class="multiple-choice-text">{{option.text}}</span>
</mat-radio-button>
</mat-radio-group>
<div *ngSwitchCase="'selectMultiple'" class="question-list">
<span class="mat-caption" i18n>
{examType, select, survey {You can choose one or more answers.} exam {There are one or more correct answers. Please choose all correct answers.}}
</span>
<mat-checkbox *ngFor="let option of question?.choices" [value]="option" (change)="setAnswer($event, option)" [checked]="checkboxState[option.id]">
<span class="multiple-choice-text">{{option.text}}</span>
</mat-checkbox>
</div>
</ng-container>
</ng-container>
</ng-container>
<ng-container *ngSwitchCase="'grade'">
<p><b i18n>Submitted answer:</b></p>
<td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
<mat-radio-group [(ngModel)]="grade" [disabled]="question?.type === 'select' || question?.type === 'selectMultiple'">
<mat-radio-button [value]="1" class="planet-radio-button" i18n>Correct</mat-radio-button>
<mat-radio-button [value]="0" class="planet-radio-button" i18n>Incorrect</mat-radio-button>
</mat-radio-group>
<mat-form-field class="full-width mat-form-field-type-no-underline">
<planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Comment" [(ngModel)]="comment"></planet-markdown-textbox>
</mat-form-field>
</ng-container>
<ng-container *ngSwitchCase="'view'">
<p><b i18n>Response:</b></p>
<td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
<ng-container *ngIf="grade>=0">
<p><b i18n>Grade:</b></p>
<p *ngIf="grade===1" i18n>Correct</p>
<p *ngIf="grade===0" i18n>Incorrect</p>
<ng-container *ngSwitchCase="'grade'">
<p><b i18n>Submitted answer:</b></p>
<td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
<mat-radio-group [(ngModel)]="grade" [disabled]="question?.type === 'select' || question?.type === 'selectMultiple'">
<mat-radio-button [value]="1" class="planet-radio-button" i18n>Correct</mat-radio-button>
<mat-radio-button [value]="0" class="planet-radio-button" i18n>Incorrect</mat-radio-button>
</mat-radio-group>
<mat-form-field class="full-width mat-form-field-type-no-underline">
<planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Comment" [(ngModel)]="comment"></planet-markdown-textbox>
</mat-form-field>
</ng-container>
<ng-container *ngIf="comment">
<p><b i18n>Feedback:</b></p>
<td-markdown [content]="comment"></td-markdown>
<ng-container *ngSwitchCase="'view'">
<p><b i18n>Response:</b></p>
<td-markdown [content]="answer?.value?.text || answer?.value"></td-markdown>
<ng-container *ngIf="grade>=0">
<p><b i18n>Grade:</b></p>
<p *ngIf="grade===1" i18n>Correct</p>
<p *ngIf="grade===0" i18n>Incorrect</p>
</ng-container>
<ng-container *ngIf="comment">
<p><b i18n>Feedback:</b></p>
<td-markdown [content]="comment"></td-markdown>
</ng-container>
</ng-container>
</ng-container>
</div>
<div class="v-align-center action-buttons">
<button
*ngIf="mode !== 'view'"
mat-raised-button
color="primary"
(click)="nextQuestion()"
[planetSubmit]="spinnerOn"
[disabled]="!answer.valid || grade === undefined || grade === null">
<ng-container i18n>Submit Answer</ng-container>
</button>
<button
*ngIf="mode === 'take'"
mat-raised-button
color="accent"
(click)="nextQuestion({ isFinish: true })"
[disabled]="!isComplete || !answer.valid || grade === undefined || grade === null"
i18n>
{examType, select, survey {Finish Survey} exam {Finish Test}}
</button>
<span class="v-align-center small" [ngSwitch]="statusMessage">
<div *ngSwitchCase="'incorrect'" class="warn-text-color">
<mat-icon>error</mat-icon><span i18n>Incorrect answer, please try again</span>
</div>
<div *ngSwitchCase="'complete'" class="primary-text-color">
<mat-icon>check_circle</mat-icon>
<span>
<ng-container i18n>{examType, select, survey {Survey is complete.} exam {Test is complete.}}</ng-container>
{{' '}}
<ng-container i18n *ngIf="previewMode; else finishExam">You can close the preview.</ng-container>
<ng-template #finishExam>
<ng-container i18n>{examType, select, survey {Click Finish Survey to submit for review.} exam {Click Finish Test to submit for review.}}</ng-container>
</ng-template>
</span>
</div>
</span>
</div>
</div>
<div class="v-align-center action-buttons">
<button
*ngIf="mode !== 'view'"
mat-raised-button
color="primary"
(click)="nextQuestion()"
[planetSubmit]="spinnerOn"
[disabled]="!answer.valid || grade === undefined || grade === null">
<ng-container i18n>Submit Answer</ng-container>
</button>
<button
*ngIf="mode === 'take'"
mat-raised-button
color="accent"
(click)="nextQuestion({ isFinish: true })"
[disabled]="!isComplete || !answer.valid || grade === undefined || grade === null"
i18n>
{examType, select, survey {Finish Survey} exam {Finish Test}}
</button>
<span class="v-align-center small" [ngSwitch]="statusMessage">
<div *ngSwitchCase="'incorrect'" class="warn-text-color">
<mat-icon>error</mat-icon><span i18n>Incorrect answer, please try again</span>
</div>
<div *ngSwitchCase="'complete'" class="primary-text-color">
<mat-icon>check_circle</mat-icon>
<span>
<ng-container i18n>{examType, select, survey {Survey is complete.} exam {Test is complete.}}</ng-container>
{{' '}}
<ng-container i18n *ngIf="previewMode; else finishExam">You can close the preview.</ng-container>
<ng-template #finishExam>
<ng-container i18n>{examType, select, survey {Click Finish Survey to submit for review.} exam {Click Finish Test to submit for review.}}</ng-container>
</ng-template>
</span>
</div>
</span>
</div>
</ng-container>
<ng-template #LoadingContent>
<div i18n>
Loading content...
</div>
</ng-template>
</div>
</div>
4 changes: 4 additions & 0 deletions src/app/exams/exams-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
unansweredQuestions: number[];
isComplete = false;
comment: string;
isLoading = true;
courseId: string;

constructor(
Expand Down Expand Up @@ -126,6 +127,7 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
this.updatedOn = this.submission.lastUpdateTime;
this.setViewAnswerText(this.submission.answers[this.questionNum - 1]);
}
this.isLoading = false;
}

nextQuestion({ nextClicked = false, isFinish = false }: { nextClicked?: boolean, isFinish?: boolean } = {}) {
Expand Down Expand Up @@ -196,6 +198,7 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
}

goBack() {
this.isLoading = false;
this.router.navigate([ '../',
this.mode === 'take' ? {} :
{ type: this.mode === 'grade' ? 'exam' : 'survey' }
Expand Down Expand Up @@ -232,6 +235,7 @@ export class ExamsViewComponent implements OnInit, OnDestroy {
const type = this.examType;
const takingExam = exam ? exam : step[type];
this.setTakingExam(takingExam, takingExam._id + '@' + course._id, type);
this.isLoading = false;
});
}

Expand Down

0 comments on commit 937d33e

Please sign in to comment.