Skip to content

refactor(LibraryProjectDetailsComponent): Convert to standalone #2125

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

Merged
hirokiterashima merged 1 commit into from
Mar 21, 2025
Merged

refactor(LibraryProjectDetailsComponent): Convert to standalone #2125

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
234 changes: 128 additions & 106 deletions src/app/modules/library/library-project-details/library-project-details.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,22 @@
<div class="flex flex-col">
<div class="mat-mdc-card-title mat-body-1">{{ project.metadata.title }}</div>
<div class="mat-mdc-card-subtitle mat-caption">
<div *ngIf="project.metadata.grades.length || project.metadata.totalTime">
<ng-container *ngIf="project.metadata.grades.length" i18n>Grade level:</ng-container>
<span *ngFor="let g of project.metadata.grades; let isLast = last">
{{ g }}{{ isLast ? '' : ', ' }}</span
>
<ng-container *ngIf="project.metadata.grades.length && project.metadata.totalTime"
>&nbsp;|&nbsp;</ng-container
>
<ng-container *ngIf="project.metadata.totalTime" i18n
>Duration: {{ project.metadata.totalTime }}</ng-container
>
</div>
@if (project.metadata.grades.length || project.metadata.totalTime) {
<div>
@if (project.metadata.grades.length) {
<span i18n>Grade level:</span>
}
@for (grade of project.metadata.grades; track grade; let last = $last) {
<span>{{ grade }}{{ last ? '' : ', ' }}</span>
}
@if (project.metadata.grades.length && project.metadata.totalTime) {
&nbsp;|&nbsp;
}
@if (project.metadata.totalTime) {
<ng-container i18n>Duration: {{ project.metadata.totalTime }}</ng-container>
}
</div>
}
<div>
<ng-container i18n>Unit ID: {{ project.id }}</ng-container>
</div>
Expand All @@ -27,112 +31,130 @@
</div>
</div>
<span class="flex-auto"></span>
<app-library-project-menu
*ngIf="isTeacher && project.wiseVersion !== 4"
[project]="project"
[isRun]="isRunProject"
/>
@if (isTeacher && project.wiseVersion !== 4) {
<app-library-project-menu [project]="project" [isRun]="isRunProject" />
}
</div>
<div class="info-block">
<div class="details">
<p *ngIf="project.wiseVersion === 4" class="warn flex justify-start items-center">
<mat-icon color="warn">warning</mat-icon>&nbsp;
<strong
class="more-info"
tabindex="0"
i18n-matTooltip
matTooltip="This unit is from an old version of WISE that is no longer supported. Please find an alternate unit to use in the future or contact us for upgrade options."
[matTooltipPosition]="'after'"
i18n
>Legacy Unit</strong
>
</p>
<div *ngIf="project.metadata.summary" [innerHTML]="project.metadata.summary"></div>
<p *ngIf="ngss.disciplines.length">
<strong i18n>Discipline:</strong>
<ng-container *ngFor="let discipline of ngss.disciplines; let isLast = last">
{{ discipline.name }}{{ isLast ? '' : ' / ' }}
</ng-container>
</p>
<p *ngIf="project.metadata.features">
<strong i18n>Features:</strong> {{ project.metadata.features }}
</p>
<p *ngIf="ngss.dciArrangements.length">
<strong i18n>NGSS Performance Expectations: </strong>
<ng-container *ngFor="let dcia of ngss.dciArrangements; let isLast = last">
<a href="{{ ngssWebUrl }}{{ dcia.id }}" target="_blank">{{ dcia.id }} {{ dcia.name }}</a>
<ng-container *ngIf="dcia.children.length">
(<ng-container *ngFor="let pe of dcia.children; let isLastChild = last"
><a
class="pe"
href="{{ ngssWebUrl }}{{ pe.id }}"
target="_blank"
matTooltip="{{ pe.name }}"
[matTooltipPosition]="'above'"
>{{ pe.id }}</a
>{{ isLastChild ? '' : ', ' }}</ng-container
>) </ng-container
>{{ isLast ? '' : ' / ' }}
</ng-container>
</p>
@if (project.wiseVersion === 4) {
<p class="warn flex justify-start items-center">
<mat-icon color="warn">warning</mat-icon>&nbsp;
<strong
class="more-info"
tabindex="0"
i18n-matTooltip
matTooltip="This unit is from an old version of WISE that is no longer supported. Please find an alternate unit to use in the future or contact us for upgrade options."
[matTooltipPosition]="'after'"
i18n
>Legacy Unit</strong
>
</p>
}
@if (project.metadata.summary) {
<div [innerHTML]="project.metadata.summary"></div>
}
@if (ngss.disciplines.length) {
<p>
<strong i18n>Discipline:</strong>
@for (discipline of ngss.disciplines; track discipline.name; let last = $last) {
{{ discipline.name }}{{ last ? '' : ' / ' }}
}
</p>
}
@if (project.metadata.features) {
<p><strong i18n>Features:</strong> {{ project.metadata.features }}</p>
}
@if (ngss.dciArrangements.length) {
<p>
<strong i18n>NGSS Performance Expectations: </strong>
@for (dcia of ngss.dciArrangements; track dcia.id; let last = $last) {
<a href="{{ ngssWebUrl }}{{ dcia.id }}" target="_blank"
>{{ dcia.id }} {{ dcia.name }}</a
>
@if (dcia.children.length) {
(
@for (pe of dcia.children; track pe.id; let lastChild = $last) {
<a
class="pe"
href="{{ ngssWebUrl }}{{ pe.id }}"
target="_blank"
matTooltip="{{ pe.name }}"
[matTooltipPosition]="'above'"
>{{ pe.id }}</a
>{{ lastChild ? '' : ', ' }}
}
)
}
{{ last ? '' : ' / ' }}
}
</p>
}
<unit-tags [tags]="project.tags" />
</div>
<discourse-category-activity
*ngIf="project.metadata.discourseCategoryURL"
[categoryURL]="project.metadata.discourseCategoryURL"
/>
@if (project.metadata.discourseCategoryURL) {
<discourse-category-activity [categoryURL]="project.metadata.discourseCategoryURL" />
}
<div class="license notice-bg-bg mat-caption secondary-text">
<img src="../../../../assets/img/by-sa.png" alt="CC BY-SA" />&nbsp;
<span *ngIf="!isCopy" [ngSwitch]="authorsString.length">
<ng-container *ngSwitchCase="0" i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>.</ng-container
>
<ng-container *ngSwitchDefault i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a> by
{{ authorsString }}.</ng-container
>
</span>
<span *ngIf="isCopy" [ngSwitch]="parentAuthorsString.length">
<ng-container *ngSwitchCase="0" i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
<a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> (used
under <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
>
<ng-container *ngSwitchDefault i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
<a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> by
{{ parentAuthorsString }} (used under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
>
</span>
@if (isCopy) {
<span>
@if (parentAuthorsString.length == 0) {
<ng-container i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
<a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> (used
under <a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
>
} @else {
<ng-container i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is a copy of
<a href="{{ parentProject.uri }}" target="_blank">{{ parentProject.title }}</a> by
{{ parentAuthorsString }} (used under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>).</ng-container
>
}
</span>
} @else {
<span>
@if (authorsString.length == 0) {
<ng-container i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a>.</ng-container
>
} @else {
<ng-container i18n
><a href="{{ project.uri }}" target="_blank">This unit</a> is licensed under
<a href="{{ licenseUrl }}" target="_blank">CC BY-SA</a> by
{{ authorsString }}.</ng-container
>
}
</span>
}
/
<span
*ngIf="!project.license"
class="more-info"
[matTooltip]="licenseInfo"
matTooltipPosition="above"
tabindex="0"
i18n
>More</span
>
<a *ngIf="project.license" href="{{ project.license }}" target="_blank" i18n>View License</a>
@if (project.license) {
<a href="{{ project.license }}" target="_blank" i18n>View License</a>
} @else {
<span
class="more-info"
[matTooltip]="licenseInfo"
matTooltipPosition="above"
tabindex="0"
i18n
>More</span
>
}
</div>
</div>
</div>
<div mat-dialog-actions class="flex flex-col sm:flex-row gap-2 sm:gap-4 !items-stretch" align="end">
<button mat-button cdkFocusInitial (click)="onClose()" i18n>Close</button>
<button
*ngIf="isTeacher && !isRunProject && project.wiseVersion !== 4"
mat-flat-button
color="accent"
(click)="runProject()"
>
<mat-icon>supervised_user_circle</mat-icon>&nbsp;<ng-container i18n
>Use with Class</ng-container
>
</button>
<button mat-button cdkFocusInitial (click)="close()" i18n>Close</button>
@if (isTeacher && !isRunProject && project.wiseVersion !== 4) {
<button mat-flat-button color="accent" (click)="runProject()">
<mat-icon>supervised_user_circle</mat-icon>&nbsp;<ng-container i18n
>Use with Class</ng-container
>
</button>
}
<button mat-flat-button color="primary" (click)="previewProject()">
<mat-icon>preview</mat-icon>&nbsp;<ng-container i18n>Preview</ng-container>
</button>
Expand Down
59 changes: 17 additions & 42 deletions src/app/modules/library/library-project-details/library-project-details.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,24 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Observable } from 'rxjs';
import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
import { LibraryProjectDetailsComponent } from './library-project-details.component';
import { UserService } from '../../../services/user.service';
import { Project } from '../../../domain/project';
import { NGSSStandards } from '../ngssStandards';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { ConfigService } from '../../../services/config.service';
import { ParentProject } from '../../../domain/parentProject';

export class MockMatDialog {}

export class MockUserService {
isTeacher(): Observable<boolean> {
const isTeacher: boolean = true;
return Observable.create((observer) => {
observer.next(isTeacher);
observer.complete();
});
}
}

export class MockConfigService {
getContextPath(): string {
return '';
}
}

const parentProject = new ParentProject({
id: 1000,
title: 'Photosynthesis',
uri: 'http://localhost:8080/project/1000',
authors: [{ id: 6, firstName: 'Susie', lastName: 'Derkins', username: 'SusieDerkins' }]
});
import { MockProviders } from 'ng-mocks';

describe('LibraryProjectDetailsComponent', () => {
let component: LibraryProjectDetailsComponent;
let fixture: ComponentFixture<LibraryProjectDetailsComponent>;

beforeEach(() => {
TestBed.configureTestingModule({
declarations: [LibraryProjectDetailsComponent],
imports: [LibraryProjectDetailsComponent],
providers: [
{ provide: UserService, useClass: MockUserService },
{ provide: ConfigService, useClass: MockConfigService },
{ provide: MatDialogRef, useValue: {} },
{ provide: MAT_DIALOG_DATA, useValue: [] },
{ provide: MatDialog, useClass: MockMatDialog }
],
schemas: [NO_ERRORS_SCHEMA]
MockProviders(ConfigService, MatDialog, MatDialogRef, UserService),
{ provide: MAT_DIALOG_DATA, useValue: {} }
]
});
fixture = TestBed.createComponent(LibraryProjectDetailsComponent);
component = fixture.componentInstance;
Expand Down Expand Up @@ -93,10 +63,10 @@ describe('LibraryProjectDetailsComponent', () => {
const ngss: NGSSStandards = new NGSSStandards();
ngss.disciplines = ngssObject.disciplines;
ngss.dciArrangements = ngssObject.dciArrangements;
component.ngss = ngss;
component.project = new Project(project);
component.parentProject = new ParentProject();
component.setLicenseInfo();
component['ngss'] = ngss;
component['project'] = new Project(project);
component['parentProject'] = new ParentProject();
component['setLicenseInfo']();
fixture.detectChanges();
});

Expand All @@ -121,9 +91,14 @@ describe('LibraryProjectDetailsComponent', () => {
});

it('should show copied project info', () => {
component.project.metadata.authors = [];
component.parentProject = parentProject;
component.setLicenseInfo();
component['project'].metadata.authors = [];
component['parentProject'] = new ParentProject({
id: 1000,
title: 'Photosynthesis',
uri: 'http://localhost:8080/project/1000',
authors: [{ id: 6, firstName: 'Susie', lastName: 'Derkins', username: 'SusieDerkins' }]
});
component['setLicenseInfo']();
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.textContent).toContain('is a copy of Photosynthesis');
Expand Down
Loading
Loading