Skip to content

Commit e3e0a09

Browse files
hirokiterashimabreity
hirokiterashima
and
breity
authored
style(Authoring Tool): Organize Unit Info page using tabs (#2304)
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
1 parent 57ec6ef commit e3e0a09

9 files changed

Lines changed: 323 additions & 300 deletions

‎src/assets/wise5/authoringTool/advanced/advanced-project-authoring.component.html‎

Lines changed: 31 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,39 @@
33
<ng-template mat-tab-label>
44
<mat-icon>settings</mat-icon>&nbsp;<span i18n>General settings</span>
55
</ng-template>
6-
<div class="my-4">
7-
<label id="navigation-type-label" i18n>Navigation mode:</label>
8-
<mat-radio-group
9-
aria-labelledby="navigation-type-label"
10-
[(ngModel)]="navigationType"
11-
(ngModelChange)="setNavigationType()"
12-
>
13-
<mat-radio-button color="primary" value="default" i18n
14-
>Default (lessons appear in drop-down list and unit plan)</mat-radio-button
6+
<div class="flex flex-col gap-5">
7+
<div class="my-4">
8+
<label id="navigation-type-label" i18n>Navigation mode:</label>
9+
<mat-radio-group
10+
aria-labelledby="navigation-type-label"
11+
[(ngModel)]="navigationType"
12+
(ngModelChange)="setNavigationType()"
1513
>
16-
<mat-radio-button color="primary" value="tab" i18n
17-
>Tabbed (lessons appear as tabs)
18-
</mat-radio-button>
19-
</mat-radio-group>
14+
<mat-radio-button color="primary" value="default" i18n
15+
>Default (lessons appear in drop-down list and unit plan)</mat-radio-button
16+
>
17+
<mat-radio-button color="primary" value="tab" i18n
18+
>Tabbed (lessons appear as tabs)
19+
</mat-radio-button>
20+
</mat-radio-group>
21+
</div>
22+
<edit-unit-type [metadata]="metadata" />
23+
<div class="flex gap-2">
24+
<button mat-raised-button color="primary" class="topButton" (click)="downloadProject()">
25+
<mat-icon>file_download</mat-icon>
26+
<span i18n>Download unit</span>
27+
</button>
28+
@if (isMyUnit) {
29+
<a href="{{ publishUnitUrl }}" class="share-button">
30+
<button mat-flat-button color="primary">
31+
<mat-icon>public</mat-icon>&nbsp;<ng-container i18n
32+
>Submit to Public Unit Library</ng-container
33+
>
34+
</button>
35+
</a>
36+
}
37+
</div>
2038
</div>
21-
<button mat-raised-button color="primary" class="topButton" (click)="downloadProject()">
22-
<mat-icon>file_download</mat-icon>
23-
<span i18n>Download unit</span>
24-
</button>
2539
</mat-tab>
2640
<mat-tab>
2741
<ng-template mat-tab-label>

‎src/assets/wise5/authoringTool/advanced/advanced-project-authoring.component.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,13 @@ import { TeacherProjectService } from '../../services/teacherProjectService';
1414
import { RubricAuthoringComponent } from '../rubric/rubric-authoring.component';
1515
import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
1616
import { MilestonesAuthoringComponent } from '../milestones-authoring/milestones-authoring.component';
17+
import { EditUnitTypeComponent } from '../edit-unit-type/edit-unit-type.component';
18+
import { UserService } from '../../../../app/services/user.service';
1719

1820
@Component({
1921
imports: [
2022
CdkTextareaAutosize,
23+
EditUnitTypeComponent,
2124
FormsModule,
2225
MatButtonModule,
2326
MatFormFieldModule,
@@ -32,19 +35,31 @@ import { MilestonesAuthoringComponent } from '../milestones-authoring/milestones
3235
templateUrl: 'advanced-project-authoring.component.html'
3336
})
3437
export class AdvancedProjectAuthoringComponent {
38+
protected isMyUnit: boolean;
39+
protected metadata: any;
3540
protected navigationType: 'default' | 'tab';
3641
protected projectJSONString: string;
42+
protected publishUnitUrl;
3743
protected selectedTab: number;
3844

3945
constructor(
4046
private configService: ConfigService,
4147
private notificationService: NotificationService,
42-
private projectService: TeacherProjectService
48+
private projectService: TeacherProjectService,
49+
private userService: UserService
4350
) {}
4451

4552
ngOnInit(): void {
53+
this.metadata = this.projectService.getProjectMetadata();
54+
if (this.metadata.unitType == null) {
55+
this.metadata.unitType = 'Platform';
56+
}
4657
this.navigationType = this.projectService.project.theme ?? 'default';
4758
this.projectJSONString = JSON.stringify(this.projectService.project, null, 4);
59+
this.publishUnitUrl = `${this.configService.getContextPath()}/contact?projectId=${this.configService.getProjectId()}&publish=true`;
60+
this.isMyUnit = this.metadata.authors.some(
61+
(author) => author.id === this.userService.getUserId()
62+
);
4863
}
4964

5065
protected tabChanged(event: MatTabChangeEvent): void {

‎src/assets/wise5/authoringTool/edit-unit-resources/edit-unit-resources.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ <h5 class="flex flex-row items-center gap-1 !text-xl">
1616
<ng-container *ngTemplateOutlet="addButton; context: { addToTop: true }" />
1717
<span class="flex-1"></span>
1818
</h5>
19+
<p i18n>
20+
Add additional resources for this unit. They will appear in the unit info page in the curriculum
21+
library.
22+
</p>
1923
<ul cdkDropList [cdkDropListData]="resources" (cdkDropListDropped)="drop($event)" cdkScrollable>
2024
@for (
2125
resource of resources;

‎src/assets/wise5/authoringTool/project-info-authoring/project-info-authoring.component.html‎

Lines changed: 95 additions & 108 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,96 @@
1-
@if (isMyUnit) {
2-
<a href="{{ publishUnitUrl }}" class="share-button">
3-
<button mat-flat-button color="primary">
4-
<mat-icon>public</mat-icon>&nbsp;<ng-container i18n>Publish</ng-container>
5-
</button>
6-
</a>
7-
}
8-
<div class="project-icon-label flex gap-5">
9-
<span i18n>Unit Icon</span>
10-
<button mat-raised-button color="primary" (click)="toggleEditProjectIconMode()" i18n>Edit</button>
11-
</div>
12-
<div class="project-icon-container">
13-
@if (isShowProjectIcon) {
14-
<div>
15-
<img [src]="projectIcon" class="project-icon" />
16-
</div>
17-
}
18-
@if (isShowProjectIconError) {
19-
<div class="project-icon-error">
20-
<p class="red margin-bottom-20" i18n>This unit does not have a unit icon.</p>
21-
<p class="red" i18n>Click the edit button to set one.</p>
22-
</div>
23-
}
24-
@if (isShowProjectIconLoading) {
25-
<div>
26-
<mat-spinner />
27-
</div>
28-
}
29-
</div>
30-
@if (isEditingProjectIcon) {
31-
<div>
32-
<div class="choose-project-icon-message flex gap-5">
33-
<span i18n
34-
>Choose a new Unit Icon by clicking on one below or upload your own custom icon.</span
35-
>
36-
<button mat-raised-button color="primary" (click)="chooseCustomProjectIcon()" i18n>
37-
Upload
38-
</button>
39-
</div>
40-
<div class="flex flex-wrap">
41-
@for (projectIcon of projectIcons; track projectIcon) {
42-
<img
43-
class="project-icon-to-choose"
44-
src="/projectIcons/{{ projectIcon }}"
45-
(click)="setFeaturedProjectIcon(projectIcon)"
46-
/>
47-
}
48-
</div>
49-
<br />
50-
</div>
51-
}
52-
<br />
53-
@for (metadataField of metadataAuthoring.fields; track metadataField) {
54-
<div>
55-
@if (metadataField.type === 'textarea') {
56-
<translatable-textarea
57-
[content]="metadata"
58-
[key]="metadataField.key"
59-
[label]="metadataField.name"
60-
(defaultLanguageTextChanged)="metadataChanged.next()"
61-
class="textarea"
62-
/>
63-
}
64-
@if (metadataField.type === 'input') {
65-
<translatable-input
66-
[content]="metadata"
67-
[key]="metadataField.key"
68-
[label]="metadataField.name"
69-
(defaultLanguageTextChanged)="metadataChanged.next()"
70-
class="input"
71-
/>
72-
}
73-
@if (metadataField.name === 'Language') {
74-
<edit-project-language-setting />
75-
}
76-
@if (metadataField.type === 'radio' && metadataField.name !== 'Language') {
77-
<label class="bold">{{ metadataField.name }}:</label>
78-
<mat-radio-group class="radio-group margin-bottom-20 flex flex-col">
79-
@for (choice of metadataField.choices; track choice) {
80-
<mat-radio-button
81-
type="radio"
82-
color="primary"
83-
[value]="choice"
84-
[checked]="metadataChoiceIsChecked(metadataField, choice)"
85-
(click)="metadataRadioClicked(metadataField, choice)"
86-
>
87-
{{ getMetadataChoiceText(choice) }}
88-
</mat-radio-button>
89-
}
90-
</mat-radio-group>
91-
}
92-
@if (metadataField.type === 'checkbox') {
93-
<label class="bold">{{ metadataField.name }}:</label>
94-
<div class="flex flex-col">
95-
@for (choice of metadataField.choices; track choice) {
96-
<mat-checkbox
97-
color="primary"
98-
[(ngModel)]="metadataField.choicesMapping[choice]"
99-
(click)="metadataCheckboxClicked(metadataField)"
100-
>
101-
{{ getMetadataChoiceText(choice) }}
102-
</mat-checkbox>
103-
}
1+
<div class="project-info-authoring">
2+
<mat-tab-group animationDuration="0ms">
3+
<mat-tab>
4+
<ng-template mat-tab-label>
5+
<mat-icon>settings</mat-icon>&nbsp;<span i18n>General</span>
6+
</ng-template>
7+
<div class="flex flex-col gap-5 mt-4">
8+
<div>
9+
@for (metadataField of metadataAuthoring.fields; track metadataField) {
10+
@if (metadataField.key === 'title') {
11+
<translatable-input
12+
[content]="metadata"
13+
[key]="metadataField.key"
14+
[label]="metadataField.name"
15+
(defaultLanguageTextChanged)="metadataChanged.next()"
16+
/>
17+
}
18+
@if (metadataField.key === 'summary') {
19+
<translatable-textarea
20+
[content]="metadata"
21+
[key]="metadataField.key"
22+
[label]="metadataField.name"
23+
(defaultLanguageTextChanged)="metadataChanged.next()"
24+
/>
25+
}
26+
}
27+
</div>
28+
<div class="flex flex-col gap-4 p-3">
29+
<div class="project-icon-label flex flex-row items-center gap-4">
30+
<span i18n>Unit Icon</span>
31+
<button mat-raised-button color="primary" (click)="toggleEditProjectIconMode()" i18n>
32+
Edit
33+
</button>
34+
</div>
35+
@if (isShowProjectIcon) {
36+
<div>
37+
<img [src]="projectIcon" class="project-icon" />
38+
</div>
39+
} @else if (isShowProjectIconError) {
40+
<div class="project-icon-error">
41+
<p class="red mb-4" i18n>This unit does not have a unit icon.</p>
42+
<p class="red" i18n>Click the edit button to set one.</p>
43+
</div>
44+
} @else if (isShowProjectIconLoading) {
45+
<div>
46+
<mat-spinner />
47+
</div>
48+
}
49+
@if (isEditingProjectIcon) {
50+
<div>
51+
<div class="flex items-center gap-4 mb-4">
52+
<span i18n
53+
>Choose a new Unit Icon by clicking on one below or upload your own custom
54+
icon.</span
55+
>
56+
<button mat-raised-button color="primary" (click)="chooseCustomProjectIcon()" i18n>
57+
Upload
58+
</button>
59+
</div>
60+
<div class="flex flex-wrap">
61+
@for (projectIcon of projectIcons; track projectIcon) {
62+
<img
63+
role="button"
64+
tabindex="0"
65+
class="project-icon-to-choose"
66+
src="/projectIcons/{{ projectIcon }}"
67+
(click)="setFeaturedProjectIcon(projectIcon)"
68+
(keydown.enter)="setFeaturedProjectIcon(projectIcon)"
69+
aria-label="Choose this project icon"
70+
i18n-aria-label
71+
/>
72+
}
73+
</div>
74+
<br />
75+
</div>
76+
}
77+
</div>
10478
</div>
105-
}
106-
</div>
107-
}
108-
<edit-unit-type [metadata]="metadata" />
109-
<edit-unit-resources [resources]="metadata.resources" />
79+
</mat-tab>
80+
<mat-tab>
81+
<ng-template mat-tab-label>
82+
<mat-icon>translate</mat-icon>&nbsp;<span i18n>Language</span>
83+
</ng-template>
84+
<div class="mt-4" style="min-height: 800px">
85+
<!-- min-height is set to 800px to show all language options without outer scrollbar -->
86+
<edit-project-language-setting />
87+
</div>
88+
</mat-tab>
89+
<mat-tab>
90+
<ng-template mat-tab-label>
91+
<mat-icon>folder</mat-icon>&nbsp;<span i18n>Resources</span>
92+
</ng-template>
93+
<edit-unit-resources [resources]="metadata.resources" class="block mt-4" />
94+
</mat-tab>
95+
</mat-tab-group>
96+
</div>

0 commit comments

Comments
 (0)