Skip to content

Commit

Permalink
chore(Authoring): Convert notebook authoring (#1333)
Browse files Browse the repository at this point in the history
  • Loading branch information
@geoffreykwan
geoffreykwan authored Jul 11, 2023
1 parent 72a2616 commit f5471c6
Show file tree
Hide file tree
Showing 9 changed files with 630 additions and 437 deletions.
2 changes: 2 additions & 0 deletions src/app/teacher/authoring-tool.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import { NodeAuthoringComponent } from '../../assets/wise5/authoringTool/node/no
import { TeacherNodeIconComponent } from '../../assets/wise5/authoringTool/teacher-node-icon/teacher-node-icon.component';
import { MatChipsModule } from '@angular/material/chips';
import { WiseTinymceEditorModule } from '../../assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.module';
import { NotebookAuthoringComponent } from '../../assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component';

@NgModule({
declarations: [
Expand All @@ -43,6 +44,7 @@ import { WiseTinymceEditorModule } from '../../assets/wise5/directives/wise-tiny
ConcurrentAuthorsMessageComponent,
NodeAuthoringComponent,
NodeIconChooserDialog,
NotebookAuthoringComponent,
RecoveryAuthoringComponent,
RequiredErrorLabelComponent,
RubricAuthoringComponent,
Expand Down
270 changes: 270 additions & 0 deletions src/assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,270 @@
<div>
<h4 i18n>Notebook Settings</h4>
</div>
<div>
<mat-slide-toggle
color="primary"
class="toggle"
[(ngModel)]="project.notebook.enabled"
(ngModelChange)="contentChanged()"
i18n
>
Student Notebook
</mat-slide-toggle>
</div>
<div *ngIf="project.notebook.enabled" class="notebook-div">
<div>
<mat-form-field>
<mat-label i18n>Notebook Label</mat-label>
<input matInput [(ngModel)]="project.notebook.label" (ngModelChange)="contentChanged()" />
</mat-form-field>
</div>
<div>
<mat-slide-toggle
color="primary"
class="toggle"
[(ngModel)]="project.notebook.itemTypes.note.enabled"
(ngModelChange)="contentChanged()"
i18n
>
Enable Note
</mat-slide-toggle>
</div>
<div *ngIf="project.notebook.itemTypes.note.enabled" class="notebook-child-div">
<div fxLayoutGap="20px">
<mat-form-field>
<mat-label i18n>Label (Singular)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.note.label.singular"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Plural)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.note.label.plural"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Link)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.note.label.link"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
</div>
<mat-checkbox
color="primary"
[(ngModel)]="project.notebook.itemTypes.note.enableAddNote"
(ngModelChange)="contentChanged()"
i18n
>
Enable Add Note Button
</mat-checkbox>
<br />
<mat-checkbox
color="primary"
[(ngModel)]="project.notebook.itemTypes.note.enableDeleteNote"
[(ngModel)]="project.notebook.itemTypes.note.requireTextOnEveryNote"
(ngModelChange)="contentChanged()"
i18n
>
Require students to write text on every note
</mat-checkbox>
<br />
<mat-checkbox
color="primary"
[(ngModel)]="project.notebook.itemTypes.note.enableClipping"
(ngModelChange)="contentChanged()"
i18n
>
Enable Clipping
</mat-checkbox>
<br />
<mat-checkbox
color="primary"
[(ngModel)]="project.notebook.itemTypes.note.enableStudentUploads"
(ngModelChange)="contentChanged()"
i18n
>
Enable Student Uploads
</mat-checkbox>
</div>
<mat-slide-toggle
color="primary"
class="toggle"
[(ngModel)]="project.notebook.itemTypes.report.enabled"
(ngModelChange)="contentChanged()"
i18n
>
Enable Report
</mat-slide-toggle>
<div *ngIf="project.notebook.itemTypes.report.enabled" class="notebook-child-div">
<div fxLayoutGap="20px">
<mat-form-field>
<mat-label i18n>Label (Singular)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.report.label.singular"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Plural)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.report.label.plural"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Link)</mat-label>
<input
matInput
[(ngModel)]="project.notebook.itemTypes.report.label.link"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
</div>
<div *ngFor="let reportNote of project.notebook.itemTypes.report.notes">
<mat-form-field>
<mat-label i18n>Title</mat-label>
<input matInput [(ngModel)]="reportNote.title" (ngModelChange)="contentChanged()" />
</mat-form-field>
<br />
<mat-form-field>
<mat-label i18n>Max Score</mat-label>
<input
matInput
[(ngModel)]="reportNote.maxScore"
type="number"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<br />
<mat-form-field class="textarea">
<mat-label i18n>Description</mat-label>
<textarea
matInput
cdkTextareaAutosize
[(ngModel)]="reportNote.description"
(ngModelChange)="contentChanged()"
></textarea>
</mat-form-field>
<br />
<mat-form-field class="textarea">
<mat-label i18n>Prompt</mat-label>
<textarea
matInput
cdkTextareaAutosize
[(ngModel)]="reportNote.prompt"
(ngModelChange)="contentChanged()"
></textarea>
</mat-form-field>
<br />
<mat-label i18n>Starter Text</mat-label>
<wise-authoring-tinymce-editor
[(model)]="reportIdToAuthoringNote[reportNote.reportId].html"
(modelChange)="reportStarterTextChanged(reportNote.reportId)"
>
</wise-authoring-tinymce-editor>
</div>
</div>
</div>
<div>
<mat-slide-toggle
color="primary"
class="toggle"
[(ngModel)]="project.teacherNotebook.enabled"
(ngModelChange)="contentChanged()"
i18n
>
Teacher Notebook
</mat-slide-toggle>
</div>
<div *ngIf="project.teacherNotebook.enabled" class="notebook-div">
<div>
<mat-form-field>
<mat-label i18n>Notebook Label</mat-label>
<input
matInput
[(ngModel)]="project.teacherNotebook.label"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
</div>
<mat-slide-toggle
color="primary"
class="toggle"
[(ngModel)]="project.teacherNotebook.itemTypes.report.enabled"
(ngModelChange)="contentChanged()"
i18n
>
Enable Report
</mat-slide-toggle>
<div *ngIf="project.teacherNotebook.itemTypes.report.enabled" class="notebook-child-div">
<div fxLayoutGap="20px">
<mat-form-field>
<mat-label i18n>Label (Singular)</mat-label>
<input
matInput
[(ngModel)]="project.teacherNotebook.itemTypes.report.label.singular"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Plural)</mat-label>
<input
matInput
[(ngModel)]="project.teacherNotebook.itemTypes.report.label.plural"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
<mat-form-field>
<mat-label i18n>Label (Link)</mat-label>
<input
matInput
[(ngModel)]="project.teacherNotebook.itemTypes.report.label.link"
(ngModelChange)="contentChanged()"
/>
</mat-form-field>
</div>
<div *ngFor="let reportNote of project.teacherNotebook.itemTypes.report.notes">
<mat-form-field>
<mat-label i18n>Title</mat-label>
<input matInput [(ngModel)]="reportNote.title" (ngModelChange)="contentChanged()" />
</mat-form-field>
<br />
<mat-form-field class="textarea">
<mat-label i18n>Description</mat-label>
<textarea
matInput
cdkTextareaAutosize
[(ngModel)]="reportNote.description"
(ngModelChange)="contentChanged()"
></textarea>
</mat-form-field>
<br />
<mat-form-field class="textarea">
<mat-label i18n>Prompt</mat-label>
<textarea
matInput
cdkTextareaAutosize
[(ngModel)]="reportNote.prompt"
(ngModelChange)="contentChanged()"
></textarea>
</mat-form-field>
<br />
<mat-label i18n>Starter Text</mat-label>
<wise-authoring-tinymce-editor
[(model)]="reportIdToAuthoringNote[reportNote.reportId].html"
(modelChange)="reportStarterTextChanged(reportNote.reportId)"
>
</wise-authoring-tinymce-editor>
</div>
</div>
</div>
19 changes: 19 additions & 0 deletions src/assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.toggle {
margin-top: 10px;
margin-bottom: 10px;
}

.notebook-div {
margin-left: 40px;
}

.notebook-child-div {
border: 2px solid #dddddd;
border-radius: 5px;
margin-bottom: 10px;
padding: 20px 20px 10px 20px;
}

.textarea {
width: 100%;
}
52 changes: 52 additions & 0 deletions src/assets/wise5/authoringTool/notebook-authoring/notebook-authoring.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NotebookAuthoringComponent } from './notebook-authoring.component';
import { UpgradeModule } from '@angular/upgrade/static';
import { ConfigService } from '../../services/configService';
import { TeacherProjectService } from '../../services/teacherProjectService';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { StudentTeacherCommonServicesModule } from '../../../../app/student-teacher-common-services.module';
import { FormsModule } from '@angular/forms';

describe('NotebookAuthoringComponent', () => {
let component: NotebookAuthoringComponent;
let fixture: ComponentFixture<NotebookAuthoringComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [NotebookAuthoringComponent],
imports: [
FormsModule,
HttpClientTestingModule,
MatCheckboxModule,
MatFormFieldModule,
MatInputModule,
MatSlideToggleModule,
StudentTeacherCommonServicesModule,
UpgradeModule
],
providers: [ConfigService, TeacherProjectService]
}).compileComponents();

TestBed.inject(UpgradeModule).$injector = {
get: (param: string) => {
if (param === '$stateParams') {
return {
projectId: 1
};
}
}
};
TestBed.inject(TeacherProjectService).project = {};
fixture = TestBed.createComponent(NotebookAuthoringComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading

0 comments on commit f5471c6

Please sign in to comment.