From bdbad6fdc3b0cea4b1a3f3594e01445cfd5524f9 Mon Sep 17 00:00:00 2001 From: Hiroki Terashima Date: Thu, 19 Sep 2024 15:19:10 -0700 Subject: [PATCH] refactor(NotebookReportComponent): Convert to standalone (#1949) --- .../notebook-report.component.html | 184 +++++++++--------- .../notebook-report.component.spec.ts | 45 +---- .../notebook-report.component.ts | 138 +++++-------- src/app/notebook/notebook.module.ts | 3 +- .../classroom-monitor.component.html | 11 +- .../notebook-workgroup-grading.component.html | 19 +- src/assets/wise5/vle/vle.component.html | 12 +- src/messages.xlf | 40 ++-- 8 files changed, 198 insertions(+), 254 deletions(-) diff --git a/src/app/notebook/notebook-report/notebook-report.component.html b/src/app/notebook/notebook-report/notebook-report.component.html index 56da055bead..34c88c3c57c 100644 --- a/src/app/notebook/notebook-report/notebook-report.component.html +++ b/src/app/notebook/notebook-report/notebook-report.component.html @@ -1,93 +1,103 @@ - - - - assignment - - {{ reportItem.content.title }} - - - - - - - - - - - - -
- - -
+ assignment + + {{ reportItem.content.title }} + + - info -
- - -
-
-
-
-

- Team hasn't worked on {{ config.itemTypes.report.notes[0].title }} yet. -

-
+ @if (!full || collapsed) { + fullscreen + } + @if (full && !collapsed) { + fullscreen_exit + } + + @if (!collapsed) { + + } @else { + + } + + + + + +
+ + @if (saveTime) { + + } +
+ + @if (reportItem.content.prompt) { + info + } +
+ + +} @else { +
+ @if (hasReport) { +
+
+
+ } @else { +

Team hasn't worked on {{ config.itemTypes.report.notes[0].title }} yet.

+ } +
+} diff --git a/src/app/notebook/notebook-report/notebook-report.component.spec.ts b/src/app/notebook/notebook-report/notebook-report.component.spec.ts index d545ba2f7b3..b6581b7fc5f 100644 --- a/src/app/notebook/notebook-report/notebook-report.component.spec.ts +++ b/src/app/notebook/notebook-report/notebook-report.component.spec.ts @@ -1,27 +1,23 @@ -import { provideHttpClientTesting } from '@angular/common/http/testing'; import { TestBed } from '@angular/core/testing'; -import { MatDialogModule } from '@angular/material/dialog'; import { NotebookReportComponent } from './notebook-report.component'; import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module'; import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'; let component: NotebookReportComponent; - describe('NotebookReportComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ - declarations: [NotebookReportComponent], - imports: [MatDialogModule, StudentTeacherCommonServicesModule], - providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()] -}); + imports: [NotebookReportComponent, StudentTeacherCommonServicesModule], + providers: [provideHttpClient(withInterceptorsFromDi())] + }); const fixture = TestBed.createComponent(NotebookReportComponent); component = fixture.componentInstance; component.config = createConfig(); }); - isNoteEnabled(); - setSaveTime(); - clearSaveTime(); + it('should create', () => { + expect(component).toBeTruthy(); + }); }); function createConfig() { @@ -33,32 +29,3 @@ function createConfig() { } }; } - -function isNoteEnabled() { - it('should check if note is enabled when it is not enabled', () => { - component.config.itemTypes.note.enabled = false; - expect(component.isNoteEnabled()).toEqual(false); - }); - it('should check if note is enabled when it is enabled', () => { - component.config.itemTypes.note.enabled = true; - expect(component.isNoteEnabled()).toEqual(true); - }); -} - -function setSaveTime() { - it('should set the save time', () => { - expect(component.saveTime).toEqual(null); - const saveTimestamp = 1607718407613; - component.setSaveTime(saveTimestamp); - expect(component.saveTime).toEqual(saveTimestamp); - }); -} - -function clearSaveTime() { - it('should clear the saved time', () => { - const saveTimestamp = 1607718407613; - component.saveTime = saveTimestamp; - component.clearSaveTime(); - expect(component.saveTime).toEqual(null); - }); -} diff --git a/src/app/notebook/notebook-report/notebook-report.component.ts b/src/app/notebook/notebook-report/notebook-report.component.ts index 178efd3d989..9e8e6c9332a 100644 --- a/src/app/notebook/notebook-report/notebook-report.component.ts +++ b/src/app/notebook/notebook-report/notebook-report.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; import { Subscription } from 'rxjs'; -import { MediaChange, MediaObserver } from '@angular/flex-layout'; -import { AnnotationService } from '../../../assets/wise5/services/annotationService'; +import { FlexLayoutModule, MediaChange, MediaObserver } from '@angular/flex-layout'; import { ConfigService } from '../../../assets/wise5/services/configService'; import { NotebookService } from '../../../assets/wise5/services/notebookService'; import { ProjectService } from '../../../assets/wise5/services/projectService'; @@ -10,39 +9,51 @@ import { insertWiseLinks, replaceWiseLinks } from '../../../assets/wise5/common/wise-link/wise-link'; -import { Annotation } from '../../../assets/wise5/common/Annotation'; +import { CommonModule } from '@angular/common'; +import { MatCardModule } from '@angular/material/card'; +import { MatIconModule } from '@angular/material/icon'; +import { MatButtonModule } from '@angular/material/button'; +import { WiseTinymceEditorComponent } from '../../../assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component'; +import { SaveTimeMessageComponent } from '../../../assets/wise5/common/save-time-message/save-time-message.component'; +import { MatTooltipModule } from '@angular/material/tooltip'; @Component({ + imports: [ + CommonModule, + FlexLayoutModule, + MatButtonModule, + MatCardModule, + MatIconModule, + MatTooltipModule, + SaveTimeMessageComponent, + WiseTinymceEditorComponent + ], selector: 'notebook-report', - styleUrls: ['notebook-report.component.scss'], + standalone: true, + styleUrl: 'notebook-report.component.scss', templateUrl: 'notebook-report.component.html' }) export class NotebookReportComponent extends NotebookParentComponent { - autoSaveIntervalMS: number = 30000; - autoSaveIntervalId: any; - collapsed: boolean = true; - dirty: boolean = false; - full: boolean = false; - hasAnnotation: boolean = false; - hasNewAnnotation: boolean = false; - isAddNoteButtonAvailable: boolean; - hasReport: boolean = false; - latestAnnotations: any; - maxScore: number; - reportId: number; - reportItem: any; - reportItemContent: any; - saveTime: number = null; - subscriptions: Subscription = new Subscription(); + private autoSaveIntervalMS: number = 30000; + private autoSaveIntervalId: any; + protected collapsed: boolean = true; + protected dirty: boolean = false; + protected full: boolean = false; + protected isAddNoteButtonAvailable: boolean; + protected hasReport: boolean = false; + protected reportId: number; + protected reportItem: any; + protected reportItemContent: any; + protected saveTime: number = null; + private subscriptions: Subscription = new Subscription(); constructor( - private AnnotationService: AnnotationService, - ConfigService: ConfigService, - NotebookService: NotebookService, - private ProjectService: ProjectService, + configService: ConfigService, + notebookService: NotebookService, + private projectService: ProjectService, private mediaObserver: MediaObserver ) { - super(ConfigService, NotebookService); + super(configService, notebookService); } ngOnInit(): void { @@ -52,30 +63,11 @@ export class NotebookReportComponent extends NotebookParentComponent { if (this.reportItem == null) { return; } - this.maxScore = this.NotebookService.getMaxScoreByReportId(this.reportId); if (this.mode !== 'classroomMonitor') { this.reportItem.id = null; // set the id to null so it can be inserted as initial version, as opposed to updated. this is true for both new and just-loaded reports. } - this.latestAnnotations = this.AnnotationService.getLatestNotebookItemAnnotations( - this.workgroupId, - this.reportId - ); - this.hasAnnotation = this.calculateHasAnnotation(this.latestAnnotations); this.startAutoSaveInterval(); - this.isAddNoteButtonAvailable = this.isNoteEnabled(); - - this.subscriptions.add( - this.NotebookService.notebookItemAnnotationReceived$.subscribe((annotation: Annotation) => { - if (annotation.localNotebookItemId === this.reportId) { - this.hasNewAnnotation = true; - this.latestAnnotations = this.AnnotationService.getLatestNotebookItemAnnotations( - this.workgroupId, - this.reportId - ); - this.hasAnnotation = this.calculateHasAnnotation(this.latestAnnotations); - } - }) - ); + this.isAddNoteButtonAvailable = this.config.itemTypes.note.enabled; this.subscriptions.add( this.NotebookService.showReportAnnotations$.subscribe(() => { @@ -104,7 +96,7 @@ export class NotebookReportComponent extends NotebookParentComponent { ); this.subscriptions.add( - this.ProjectService.projectParsed$.subscribe(() => { + this.projectService.projectParsed$.subscribe(() => { if (this.saveTime == null) { this.setConfig(); this.setReportItem(); @@ -117,39 +109,28 @@ export class NotebookReportComponent extends NotebookParentComponent { this.subscriptions.unsubscribe(); } - setReportItem() { + private setReportItem(): void { this.reportItem = this.NotebookService.getLatestNotebookReportItemByReportId( this.reportId, this.workgroupId ); if (this.reportItem) { this.hasReport = true; - const clientSaveTime = this.convertServerSaveTimeToClientSaveTime( + const clientSaveTime = this.ConfigService.convertToClientTimestamp( this.reportItem.serverSaveTime ); - this.setSaveTime(clientSaveTime); + this.saveTime = clientSaveTime; } else { this.reportItem = this.NotebookService.getTemplateReportItemByReportId(this.reportId); } if (this.reportItem != null) { - this.reportItemContent = this.ProjectService.injectAssetPaths( + this.reportItemContent = this.projectService.injectAssetPaths( replaceWiseLinks(this.reportItem.content.content) ); } } - calculateHasAnnotation(latestAnnotations: any): boolean { - if (latestAnnotations != null) { - return latestAnnotations.score != null || latestAnnotations.comment != null; - } - return false; - } - - convertServerSaveTimeToClientSaveTime(serverSaveTime: number): number { - return this.ConfigService.convertToClientTimestamp(serverSaveTime); - } - - toggleCollapse(): void { + protected toggleCollapse(): void { if (this.collapsed && this.mediaObserver.isActive('xs')) { this.fullscreen(); return; @@ -161,7 +142,7 @@ export class NotebookReportComponent extends NotebookParentComponent { this.collapsed = !this.collapsed; } - fullscreen(): void { + protected fullscreen(): void { if (this.collapsed) { this.full = true; this.collapsed = false; @@ -171,21 +152,21 @@ export class NotebookReportComponent extends NotebookParentComponent { this.NotebookService.setReportFullScreen(this.full); } - addNotebookItemContent($event: any): void { + protected addNotebookItemContent($event: any): void { this.NotebookService.setInsertMode({ insertMode: true, requester: 'report' }); this.NotebookService.setNotesVisible(true); } - changed(value: string): void { + protected changed(value: string): void { this.dirty = true; this.reportItem.content.content = this.ConfigService.removeAbsoluteAssetPaths( insertWiseLinks(value) ); - this.clearSaveTime(); + this.saveTime = null; } - startAutoSaveInterval(): void { - this.stopAutoSaveInterval(); + private startAutoSaveInterval(): void { + clearInterval(this.autoSaveIntervalId); this.autoSaveIntervalId = setInterval(() => { if (this.dirty) { this.saveNotebookReportItem(); @@ -193,11 +174,7 @@ export class NotebookReportComponent extends NotebookParentComponent { }, this.autoSaveIntervalMS); } - stopAutoSaveInterval(): void { - clearInterval(this.autoSaveIntervalId); - } - - saveNotebookReportItem(): void { + protected saveNotebookReportItem(): void { this.NotebookService.saveNotebookItem( this.reportItem.id, this.reportItem.nodeId, @@ -210,24 +187,11 @@ export class NotebookReportComponent extends NotebookParentComponent { ).then((result: any) => { if (result) { this.dirty = false; - this.hasNewAnnotation = false; // set the reportNotebookItemId to the newly-incremented id so that future saves during this // visit will be an update instead of an insert. this.reportItem.id = result.id; - this.setSaveTime(this.convertServerSaveTimeToClientSaveTime(result.serverSaveTime)); + this.saveTime = this.ConfigService.convertToClientTimestamp(result.serverSaveTime); } }); } - - setSaveTime(time: number): void { - this.saveTime = time; - } - - clearSaveTime(): void { - this.setSaveTime(null); - } - - isNoteEnabled(): boolean { - return this.config.itemTypes.note.enabled; - } } diff --git a/src/app/notebook/notebook.module.ts b/src/app/notebook/notebook.module.ts index d0772d0ba30..916e3488430 100644 --- a/src/app/notebook/notebook.module.ts +++ b/src/app/notebook/notebook.module.ts @@ -22,7 +22,7 @@ import { NotebookReportComponent } from './notebook-report/notebook-report.compo import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component'; @NgModule({ - declarations: [NotebookParentComponent, NotebookReportComponent], + declarations: [NotebookParentComponent], imports: [ CommonModule, ComponentStateInfoComponent, @@ -42,6 +42,7 @@ import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-t NotebookItemComponent, NotebookLauncherComponent, NotebookNotesComponent, + NotebookReportComponent, WiseTinymceEditorComponent ], exports: [ diff --git a/src/assets/wise5/classroomMonitor/classroom-monitor.component.html b/src/assets/wise5/classroomMonitor/classroom-monitor.component.html index 34abe001fce..bbff2dd7912 100644 --- a/src/assets/wise5/classroomMonitor/classroom-monitor.component.html +++ b/src/assets/wise5/classroomMonitor/classroom-monitor.component.html @@ -19,11 +19,12 @@ - + @if (reportEnabled) { + + } diff --git a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html index faea18b6b81..c664b705568 100644 --- a/src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html +++ b/src/assets/wise5/classroomMonitor/classroomMonitorComponents/notebook/notebook-workgroup-grading/notebook-workgroup-grading.component.html @@ -44,15 +44,16 @@ [workgroupId]="workgroup.workgroupId" /> - - - - + @if (reportEnabled) { + + + + } diff --git a/src/assets/wise5/vle/vle.component.html b/src/assets/wise5/vle/vle.component.html index 687f9829b0e..c4505e182e7 100644 --- a/src/assets/wise5/vle/vle.component.html +++ b/src/assets/wise5/vle/vle.component.html @@ -8,12 +8,12 @@ - - + @if (reportEnabled) { + + } diff --git a/src/messages.xlf b/src/messages.xlf index a35dd6fc9d9..b957a6476f6 100644 --- a/src/messages.xlf +++ b/src/messages.xlf @@ -5839,7 +5839,7 @@ Click "Cancel" to keep the invalid JSON open so you can fix it. src/app/notebook/notebook-report/notebook-report.component.html - 46 + 50 src/app/teacher/archive-projects-button/archive-projects-button.component.html @@ -6526,29 +6526,25 @@ Click "Cancel" to keep the invalid JSON open so you can fix it.Collapse src/app/notebook/notebook-report/notebook-report.component.html - 37 + 41 - + Save src/app/notebook/notebook-report/notebook-report.component.html - 69,71 + 73,75 - src/assets/wise5/authoringTool/recovery-authoring/recovery-authoring.component.html - 11,13 - - - src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html - 80,82 + src/assets/wise5/vle/node/node.component.html + 45,47 - - Team hasn't worked on yet. + + Team hasn't worked on yet. src/app/notebook/notebook-report/notebook-report.component.html - 90,92 + 100 @@ -12962,6 +12958,17 @@ The branches will be removed but the steps will remain in the unit. 2 + + Save + + src/assets/wise5/authoringTool/recovery-authoring/recovery-authoring.component.html + 11,13 + + + src/assets/wise5/themes/default/notebook/edit-notebook-item-dialog/edit-notebook-item-dialog.component.html + 80,82 + + Go to Authoring View @@ -22294,13 +22301,6 @@ If this problem continues, let your teacher know and move on to the next activit 20 - - Save - - src/assets/wise5/vle/node/node.component.html - 45,47 - - Submit