Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor(NotebookReportComponent): Convert to standalone #1949

Merged
merged 1 commit into from
Sep 19, 2024
Merged

refactor(NotebookReportComponent): Convert to standalone #1949

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 97 additions & 87 deletions src/app/notebook/notebook-report/notebook-report.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
}
45 changes: 6 additions & 39 deletions src/app/notebook/notebook-report/notebook-report.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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() {
Expand All @@ -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);
});
}
Loading
Loading