refactor(NotebookReportComponent): Convert to standalone (#1949)

WISE-Community · Sep 19, 2024 · bdbad6f · bdbad6f
1 parent e0e6226
commit bdbad6f
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 254 deletions.
diff --git a/src/app/notebook/notebook-report/notebook-report.component.html b/src/app/notebook/notebook-report/notebook-report.component.html
@@ -1,93 +1,103 @@
-<mat-card
-  *ngIf="mode !== 'classroomMonitor'"
-  class="notebook-report"
-  fxLayout="column"
-  [ngClass]="{ collapsed: collapsed, full: full && !collapsed }"
->
-  <mat-card-header
-    class="dark-theme mat-app-background"
-    (click)="toggleCollapse()"
-    fxLayoutAlign="start center"
+@if (mode !== 'classroomMonitor') {
+  <mat-card
+    class="notebook-report"
+    fxLayout="column"
+    [ngClass]="{ collapsed: collapsed, full: full && !collapsed }"
   >
-    <mat-card-title
-      class="mat-body-2 overflow--ellipsis"
+    <mat-card-header
+      class="dark-theme mat-app-background"
+      (click)="toggleCollapse()"
       fxLayoutAlign="start center"
-      fxLayoutGap="4px"
     >
-      <mat-icon> assignment </mat-icon>
-      <span>
-        {{ reportItem.content.title }}
-      </span>
-    </mat-card-title>
-    <span fxFlex></span>
-    <button
-      mat-icon-button
-      i18n-title
-      title="Toggle Full Screen"
-      (click)="$event.stopPropagation(); fullscreen()"
-      fxHide.lt-sm
-    >
-      <mat-icon *ngIf="!full || collapsed"> fullscreen </mat-icon>
-      <mat-icon *ngIf="full && !collapsed"> fullscreen_exit </mat-icon>
-    </button>
-    <button
-      *ngIf="!collapsed"
-      mat-icon-button
-      i18n-title
-      title="Collapse"
-      (click)="$event.stopPropagation(); toggleCollapse()"
-    >
-      <mat-icon> arrow_drop_down </mat-icon>
-    </button>
-    <button
-      *ngIf="collapsed"
-      mat-icon-button
-      i18n-title
-      title="Restore"
-      (click)="$event.stopPropagation(); toggleCollapse()"
-    >
-      <mat-icon> arrow_drop_up </mat-icon>
-    </button>
-  </mat-card-header>
-  <mat-card-content [class.hidden]="collapsed" fxFlex>
-    <wise-tinymce-editor
-      [(model)]="reportItemContent"
-      (modelChange)="changed(reportItemContent)"
-      [isAddNoteButtonAvailable]="isAddNoteButtonAvailable"
-      (openNotebook)="addNotebookItemContent($event)"
-    >
-    </wise-tinymce-editor>
-  </mat-card-content>
-  <mat-card-actions [class.hidden]="collapsed">
-    <div class="actions" fxLayoutGap="8px" fxLayoutAlign="start center">
-      <button
-        mat-flat-button
-        color="primary"
-        [disabled]="!dirty"
-        (click)="saveNotebookReportItem()"
-        i18n
+      <mat-card-title
+        class="mat-body-2 overflow--ellipsis"
+        fxLayoutAlign="start center"
+        fxLayoutGap="4px"
       >
-        Save
-      </button>
-      <save-time-message *ngIf="saveTime" [saveTime]="saveTime"></save-time-message>
-      <div id="{{ reportId }}-toolbar"></div>
+        <mat-icon> assignment </mat-icon>
+        <span>
+          {{ reportItem.content.title }}
+        </span>
+      </mat-card-title>
       <span fxFlex></span>
-      <mat-icon
-        *ngIf="reportItem.content.prompt"
-        class="info"
-        tabindex="0"
-        matTooltip="{{ reportItem.content.title }}: {{ reportItem.content.prompt }}"
-        matTooltipPosition="above"
-        >info</mat-icon
+      <button
+        mat-icon-button
+        i18n-title
+        title="Toggle Full Screen"
+        (click)="$event.stopPropagation(); fullscreen()"
+        fxHide.lt-sm
       >
-    </div>
-  </mat-card-actions>
-</mat-card>
-<div *ngIf="mode === 'classroomMonitor'">
-  <article *ngIf="hasReport">
-    <div [innerHTML]="reportItemContent"></div>
-  </article>
-  <p *ngIf="!hasReport" i18n>
-    Team hasn't worked on {{ config.itemTypes.report.notes[0].title }} yet.
-  </p>
-</div>
+        @if (!full || collapsed) {
+          <mat-icon> fullscreen </mat-icon>
+        }
+        @if (full && !collapsed) {
+          <mat-icon> fullscreen_exit </mat-icon>
+        }
+      </button>
+      @if (!collapsed) {
+        <button
+          mat-icon-button
+          i18n-title
+          title="Collapse"
+          (click)="$event.stopPropagation(); toggleCollapse()"
+        >
+          <mat-icon> arrow_drop_down </mat-icon>
+        </button>
+      } @else {
+        <button
+          mat-icon-button
+          i18n-title
+          title="Restore"
+          (click)="$event.stopPropagation(); toggleCollapse()"
+        >
+          <mat-icon> arrow_drop_up </mat-icon>
+        </button>
+      }
+    </mat-card-header>
+    <mat-card-content [class.hidden]="collapsed" fxFlex>
+      <wise-tinymce-editor
+        [(model)]="reportItemContent"
+        (modelChange)="changed(reportItemContent)"
+        [isAddNoteButtonAvailable]="isAddNoteButtonAvailable"
+        (openNotebook)="addNotebookItemContent($event)"
+      />
+    </mat-card-content>
+    <mat-card-actions [class.hidden]="collapsed">
+      <div class="actions" fxLayoutGap="8px" fxLayoutAlign="start center">
+        <button
+          mat-flat-button
+          color="primary"
+          [disabled]="!dirty"
+          (click)="saveNotebookReportItem()"
+          i18n
+        >
+          Save
+        </button>
+        @if (saveTime) {
+          <save-time-message [saveTime]="saveTime" />
+        }
+        <div id="{{ reportId }}-toolbar"></div>
+        <span fxFlex></span>
+        @if (reportItem.content.prompt) {
+          <mat-icon
+            class="info"
+            tabindex="0"
+            matTooltip="{{ reportItem.content.title }}: {{ reportItem.content.prompt }}"
+            matTooltipPosition="above"
+            >info</mat-icon
+          >
+        }
+      </div>
+    </mat-card-actions>
+  </mat-card>
+} @else {
+  <div>
+    @if (hasReport) {
+      <article>
+        <div [innerHTML]="reportItemContent"></div>
+      </article>
+    } @else {
+      <p i18n>Team hasn't worked on {{ config.itemTypes.report.notes[0].title }} yet.</p>
+    }
+  </div>
+}
diff --git 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);
-  });
-}