Merge pull request #2841 from WISE-Community/issue-2827-convert-notebook-to-angular

Convert Notebook to Angular

Author: geoffreykwan

angular.json

@@ -65,6 +65,11 @@
                 "bundleName": "siteStyles"
               }
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/main/webapp/site/src/style"
+              ]
+            },
             "scripts": []
           },
           "configurations": {
@@ -274,6 +279,11 @@
             "styles": [
               "src/main/webapp/site/src/style/styles.scss"
             ],
+            "stylePreprocessorOptions": {
+              "includePaths": [
+                "src/main/webapp/site/src/style"
+              ]
+            },
             "assets": [
               "src/main/webapp/site/src/assets",
               "src/main/webapp/site/src/favicon.ico"

src/main/webapp/site/src/app/common-hybrid-angular.module.ts

@@ -54,7 +54,16 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MomentModule } from 'ngx-moment';
 import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { WiseTinymceEditorComponent } from '../../../wise5/directives/wise-tinymce-editor/wise-tinymce-editor.component';
+import { NotebookParentComponent } from './notebook/notebook-parent/notebook-parent.component';
+import { NotebookItemComponent } from './notebook/notebook-item/notebook-item.component';
+import { NotebookLauncherComponent } from './notebook/notebook-launcher/notebook-launcher.component';
+import { NotebookNotesComponent } from './notebook/notebook-notes/notebook-notes.component';
+import { NotebookReportComponent } from './notebook/notebook-report/notebook-report.component';
+import { NotebookReportAnnotationsComponent } from './notebook/notebook-report-annotations/notebook-report-annotations.component';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatRadioModule } from '@angular/material/radio';
 import { MatDividerModule } from '@angular/material/divider';
@@ -70,6 +79,12 @@ export class EmptyComponent {}
     HelpIconComponent,
     NodeIconComponent,
     NodeStatusIcon,
+    NotebookParentComponent,
+    NotebookItemComponent,
+    NotebookLauncherComponent,
+    NotebookNotesComponent,
+    NotebookReportComponent,
+    NotebookReportAnnotationsComponent,
     WiseTinymceEditorComponent
   ],
   imports: [
@@ -92,6 +107,9 @@ export class EmptyComponent {}
     MatProgressSpinnerModule,
     MatRadioModule,
     MatSelectModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatToolbarModule,
     MatSlideToggleModule,
     MatTooltipModule,
     MomentModule,
@@ -151,6 +169,9 @@ export class EmptyComponent {}
     MatProgressSpinnerModule,
     MatRadioModule,
     MatSelectModule,
+    MatSidenavModule,
+    MatTabsModule,
+    MatToolbarModule,
     MatSlideToggleModule,
     MatTooltipModule,
     MomentModule,

src/main/webapp/site/src/app/notebook/notebook-item/notebook-item.component.html

@@ -0,0 +1,47 @@
+<mat-card class="notebook-item"
+    (click)="doSelect($event)"
+    (keyup.enter)="doSelect($event)"
+    role="button"
+    tabindex="0">
+  <mat-card-content class="content" [ngClass]="{'text-only': !item.content.attachments.length}">
+    <div *ngIf="item.content.attachments.length > 0"
+        class="attachment-content"
+        style="background-image: url('{{item.content.attachments[0].iconURL}}')">
+    </div>
+    <div *ngIf="item.content.text"
+        class="text-content mat-body-1"
+        style="color: {{label.color}}">
+      {{item.content.text}}
+    </div>
+  </mat-card-content>
+  <mat-card-actions class="dark-theme">
+    <div class="actions app-bar"
+        fxLayoutAlign="start center"
+        style="background-color: {{color}}">
+      <span class="location" fxLayoutAlign="start center">
+        <mat-icon>place</mat-icon><span class="mat-body-1">{{getItemNodePosition()}}</span>
+      </span>
+      <span fxFlex></span>
+      <button mat-icon-button
+          *ngIf="canDeleteNotebookItem()"
+          i18n-aria-label
+          attr.aria-label="Delete {{label.singular}}"
+          i18n-matTooltip
+          attr.matTooltip="Delete {{label.singular}}"
+          matTooltipPosition="above"
+          (click)="doDelete($event)">
+        <mat-icon>delete</mat-icon>
+      </button>
+      <button mat-icon-button
+          *ngIf="canReviveNotebookItem()"
+          i18n-aria-label
+          attr.aria-label="Revive {{label.singular}}"
+          i18n-matTooltip
+          attr.matTooltip="Revive {{label.singular}}"
+          matTooltipPosition="above"
+          (click)="doRevive($event)">
+        <mat-icon>undo</mat-icon>
+      </button>
+    </div>
+  </mat-card-actions>
+</mat-card>

src/main/webapp/site/src/app/notebook/notebook-item/notebook-item.component.scss

@@ -0,0 +1,105 @@
+@import '~@angular/material/theming', 
+    '~style/abstracts/variables',
+    '~style/themes/default';
+
+$light-gray: map-get($mat-grey, 300);
+
+.notebook-item {
+  transition: box-shadow 250ms;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+
+  &:hover, &:focus {
+    @include mat-elevation(4);
+    outline: none;
+  }
+
+  &:active {
+    outline: none;
+  }
+}
+
+.content {
+  height: 200px;
+  padding: 0;
+  background-color: $light-gray;
+  border-top-left-radius: $card-border-radius;
+  border-top-right-radius: $card-border-radius;
+}
+
+.attachment-content, .text-content {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+
+.attachment-content {
+  background-repeat: no-repeat;
+  border-top-left-radius: $card-border-radius;
+  border-top-right-radius: $card-border-radius;
+  background-position: center top;
+  background-size: cover;
+  top: 0;
+  bottom: 0;
+}
+
+.text-content {
+  bottom: 0;
+  padding: 8px;
+  font-weight: 500;
+  overflow: hidden;
+  max-height: 120px;
+  min-height: 56px;
+  background-color: rgba(255,255,255,0.95);
+  border-top: 1px solid $light-gray;
+
+  &:after {
+    content: "";
+    text-align: right;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 0.8em;
+    background: linear-gradient(180deg,hsla(0,0%,100%,0),rgba(255,255,255,0.95) 100%);
+  }
+}
+
+.text-only {
+  &:after {
+    content: "note";
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -moz-osx-font-smoothing: grayscale;
+    font-feature-settings: 'liga';
+    font-size: 80px;
+    color: map-get($default-colors, disabled-text);
+  }
+}
+
+.location {
+  opacity: 0.9;
+  padding: 8px 0;
+}
+
+mat-card-actions {
+  padding-top: 0;
+}
+
+.actions {
+  margin: 0;
+  padding: 0 8px;
+  border-bottom-left-radius: $card-border-radius;
+  border-bottom-right-radius: $card-border-radius;
+}

src/main/webapp/site/src/app/notebook/notebook-item/notebook-item.component.spec.ts

@@ -0,0 +1,68 @@
+import { HttpClientTestingModule } from "@angular/common/http/testing";
+import { TestBed } from "@angular/core/testing";
+import { UpgradeModule } from "@angular/upgrade/static";
+import { configureTestSuite } from "ng-bullet";
+import { Subscription } from "rxjs";
+import { AnnotationService } from "../../../../../wise5/services/annotationService";
+import { ConfigService } from "../../../../../wise5/services/configService";
+import { NotebookService } from "../../../../../wise5/services/notebookService";
+import { ProjectService } from "../../../../../wise5/services/projectService";
+import { SessionService } from "../../../../../wise5/services/sessionService";
+import { StudentAssetService } from "../../../../../wise5/services/studentAssetService";
+import { StudentDataService } from "../../../../../wise5/services/studentDataService";
+import { TagService } from "../../../../../wise5/services/tagService";
+import { UtilService } from "../../../../../wise5/services/utilService";
+import { NotebookItemComponent } from "./notebook-item.component";
+
+let component: NotebookItemComponent;
+
+describe('NotebookItemComponent', () => {
+  configureTestSuite(() => {
+    TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule, UpgradeModule ],
+      declarations: [ NotebookItemComponent ],
+      providers: [
+        AnnotationService,
+        ConfigService,
+        NotebookService,
+        ProjectService,
+        SessionService,
+        StudentAssetService,
+        StudentDataService,
+        TagService,
+        UtilService
+      ]
+    });
+  });
+
+  beforeEach(() => {
+    const fixture = TestBed.createComponent(NotebookItemComponent);
+    component = fixture.componentInstance;
+    component.notebookUpdatedSubscription = new Subscription();
+  });
+
+  isItemInGroup();
+  isNotebookItemActive();
+});
+
+function isItemInGroup() {
+  it('should check if an notebook item is in group when it is not in the group', () => {
+    component.item = { groups: ['Group A'] };
+    expect(component.isItemInGroup('Group B')).toEqual(false);
+  });
+  it('should check if an notebook item is in group when it is in the group', () => {
+    component.item = { groups: ['Group A'] };
+    expect(component.isItemInGroup('Group A')).toEqual(true);
+  });
+}
+
+function isNotebookItemActive() {
+  it('should check if a notebook item is active when it is not active', () => {
+    component.item = { serverDeleteTime: 1607704074794 };
+    expect(component.isNotebookItemActive()).toEqual(false);
+  });
+  it('should check if a notebook item is active when it is active', () => {
+    component.item = { serverDeleteTime: null };
+    expect(component.isNotebookItemActive()).toEqual(true);
+  });
+}