refactor(NotebookItemComponent): Convert to standalone

src/app/notebook/notebook-item/notebook-item.component.html

@@ -1,53 +1,57 @@
 <mat-card
   class="notebook-item"
-  (click)="doSelect($event)"
-  (keyup.enter)="doSelect($event)"
+  (click)="select($event)"
+  (keyup.enter)="select($event)"
   role="button"
   tabindex="0"
 >
-  <mat-card-content class="content notice-bg-bg" [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-2" style="color: {{ label.color }}">
-      {{ item.content.text }}
-    </div>
+  <mat-card-content
+    class="content notice-bg-bg"
+    [ngClass]="{ 'text-only': !item.content.attachments.length }"
+  >
+    @if (item.content.attachments.length > 0) {
+      <div
+        class="attachment-content"
+        style="background-image: url('{{ item.content.attachments[0].iconURL }}')"
+      ></div>
+    }
+    @if (item.content.text) {
+      <div class="text-content mat-body-2" style="color: {{ label.color }}">
+        {{ item.content.text }}
+      </div>
+    }
   </mat-card-content>
   <mat-card-actions
     class="dark-theme"
-    [ngClass]="{'has-action': canDelete || canRevive }"
+    [ngClass]="{ 'has-action': canDelete || canRevive }"
     style="background-color: {{ color }}"
     fxLayoutAlign="start center"
   >
     <span class="location" fxLayoutAlign="start center">
       <mat-icon>place</mat-icon><span class="mat-body-2">{{ getItemNodePosition() }}</span>
     </span>
     <span fxFlex></span>
-    <button
-      mat-icon-button
-      *ngIf="canDelete"
-      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="canRevive"
-      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>
+    @if (canDelete) {
+      <button
+        mat-icon-button
+        i18n-matTooltip
+        matTooltip="Delete {{ label.singular }}"
+        matTooltipPosition="above"
+        (click)="delete($event)"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+    }
+    @if (canRevive) {
+      <button
+        mat-icon-button
+        i18n-matTooltip
+        matTooltip="Revive {{ label.singular }}"
+        matTooltipPosition="above"
+        (click)="revive($event)"
+      >
+        <mat-icon>undo</mat-icon>
+      </button>
+    }
   </mat-card-actions>
 </mat-card>

src/app/notebook/notebook-item/notebook-item.component.spec.ts

@@ -1,49 +1,23 @@
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { TestBed } from '@angular/core/testing';
-import { MatDialogModule } from '@angular/material/dialog';
-import { Subscription } from 'rxjs';
 import { StudentTeacherCommonServicesModule } from '../../student-teacher-common-services.module';
 import { NotebookItemComponent } from './notebook-item.component';
 import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 
 let component: NotebookItemComponent;
-
 describe('NotebookItemComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-    declarations: [NotebookItemComponent],
-    schemas: [NO_ERRORS_SCHEMA],
-    imports: [MatDialogModule, StudentTeacherCommonServicesModule],
-    providers: [provideHttpClient(withInterceptorsFromDi()), provideHttpClientTesting()]
-});
+      imports: [NotebookItemComponent, StudentTeacherCommonServicesModule],
+      providers: [provideHttpClient(withInterceptorsFromDi())]
+    });
     const fixture = TestBed.createComponent(NotebookItemComponent);
     component = fixture.componentInstance;
-    component.notebookUpdatedSubscription = new Subscription();
+    component.note = { type: 'note', content: { attachments: [] } };
+    component.config = { itemTypes: { note: { label: 'note!' } } };
+    fixture.detectChanges();
   });
 
-  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);
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
-}
-
-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);
-  });
-}
+});

src/app/notebook/notebook-item/notebook-item.component.ts

@@ -1,36 +1,52 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MatDialog } from '@angular/material/dialog';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { Subscription } from 'rxjs';
 import { DialogWithConfirmComponent } from '../../../assets/wise5/directives/dialog-with-confirm/dialog-with-confirm.component';
 import { ConfigService } from '../../../assets/wise5/services/configService';
 import { NotebookService } from '../../../assets/wise5/services/notebookService';
 import { ProjectService } from '../../../assets/wise5/services/projectService';
+import { MatCardModule } from '@angular/material/card';
+import { CommonModule } from '@angular/common';
+import { MatIconModule } from '@angular/material/icon';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatCardModule,
+    MatDialogModule,
+    MatIconModule,
+    MatTooltipModule
+  ],
   selector: 'notebook-item',
-  styleUrls: ['notebook-item.component.scss'],
+  standalone: true,
+  styleUrl: 'notebook-item.component.scss',
   templateUrl: 'notebook-item.component.html'
 })
 export class NotebookItemComponent {
-  canDelete: boolean;
-  canRevive: boolean;
-  color: string;
+  protected canDelete: boolean;
+  protected canRevive: boolean;
+  protected color: string;
   @Input() config: any;
   @Input() group: string;
   @Input() isChooseMode: boolean;
-  item: any;
+  protected item: any;
   @Input() itemId: string;
-  label: any;
+  protected label: any;
   @Input() note: any;
-  notebookUpdatedSubscription: Subscription;
+  private notebookUpdatedSubscription: Subscription;
   @Output() onSelect: EventEmitter<any> = new EventEmitter<any>();
-  type: string;
+  private type: string;
 
   constructor(
     private configService: ConfigService,
+    private dialog: MatDialog,
     private notebookService: NotebookService,
-    private projectService: ProjectService,
-    private dialog: MatDialog
+    private projectService: ProjectService
   ) {}
 
   ngOnInit(): void {
@@ -56,43 +72,19 @@ export class NotebookItemComponent {
   }
 
   ngOnChanges(): void {
-    this.label = this.config.itemTypes[this.type].label;
+    this.label = this.config.itemTypes[this.type]?.label;
   }
 
   ngOnDestroy(): void {
     this.notebookUpdatedSubscription.unsubscribe();
   }
 
-  isItemInGroup(group: string): boolean {
-    return this.item.groups != null && this.item.groups.includes(group);
-  }
-
-  getItemNodeId(): string {
-    if (this.item == null) {
-      return null;
-    } else {
-      return this.item.nodeId;
-    }
+  protected getItemNodePosition(): string {
+    return this.item == null ? '' : this.projectService.getNodePositionById(this.item.nodeId);
   }
 
-  getItemNodeLink(): string {
-    if (this.item == null) {
-      return '';
-    } else {
-      return this.projectService.getNodePositionAndTitle(this.item.nodeId);
-    }
-  }
-
-  getItemNodePosition(): string {
-    if (this.item == null) {
-      return '';
-    } else {
-      return this.projectService.getNodePositionById(this.item.nodeId);
-    }
-  }
-
-  doDelete(ev: any): void {
-    ev.stopPropagation();
+  protected delete(event: Event): void {
+    event.stopPropagation();
     this.dialog
       .open(DialogWithConfirmComponent, {
         data: {
@@ -108,8 +100,8 @@ export class NotebookItemComponent {
       });
   }
 
-  doRevive(ev: any): void {
-    ev.stopPropagation();
+  protected revive(event: Event): void {
+    event.stopPropagation();
     this.dialog
       .open(DialogWithConfirmComponent, {
         data: {
@@ -125,45 +117,21 @@ export class NotebookItemComponent {
       });
   }
 
-  doSelect(event: any): void {
+  protected select(event: any): void {
     if (this.onSelect) {
       this.onSelect.emit({ event: event, note: this.item });
     }
   }
 
-  canShareNotebookItem(): boolean {
-    return (
-      this.projectService.isSpaceExists('public') &&
-      this.isMyNotebookItem() &&
-      this.item.serverDeleteTime == null &&
-      !this.isChooseMode &&
-      !this.isItemInGroup('public')
-    );
-  }
-
-  canUnshareNotebookItem(): boolean {
-    return (
-      this.projectService.isSpaceExists('public') &&
-      this.isMyNotebookItem() &&
-      this.item.serverDeleteTime == null &&
-      !this.isChooseMode &&
-      this.isItemInGroup('public')
-    );
-  }
-
-  canDeleteNotebookItem(): boolean {
+  private canDeleteNotebookItem(): boolean {
     return this.isMyNotebookItem() && this.item.serverDeleteTime == null && !this.isChooseMode;
   }
 
-  canReviveNotebookItem(): boolean {
+  private canReviveNotebookItem(): boolean {
     return this.item.serverDeleteTime != null && !this.isChooseMode;
   }
 
   private isMyNotebookItem(): boolean {
     return this.item.workgroupId === this.configService.getWorkgroupId();
   }
-
-  isNotebookItemActive(): boolean {
-    return this.item.serverDeleteTime == null;
-  }
 }

src/app/notebook/notebook-notes/notebook-notes.component.html

@@ -14,8 +14,7 @@
         (onSelect)="select($event)"
         fxFlex="100"
         fxFlex.gt-xs="50"
-      >
-      </notebook-item>
+      />
     </ng-container>
   </div>
 </ng-template>
@@ -97,8 +96,7 @@ <h4 *ngIf="groups.length > 1" class="group-header mat-subtitle-2 secondary-text"
             fxFlex.gt-xs="50"
             fxFlex.gt-sm="33"
             fxFlex.gt-md="25"
-          >
-          </notebook-item>
+          />
         </ng-container>
       </div>
     </div>

src/app/notebook/notebook.module.ts

@@ -25,7 +25,6 @@ import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-t
 @NgModule({
   declarations: [
     NotebookParentComponent,
-    NotebookItemComponent,
     NotebookNotesComponent,
     NotebookReportComponent,
     NotebookReportAnnotationsComponent
@@ -46,6 +45,7 @@ import { WiseTinymceEditorComponent } from '../../assets/wise5/directives/wise-t
     MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
+    NotebookItemComponent,
     NotebookLauncherComponent,
     WiseTinymceEditorComponent
   ],