Activity Info
-
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss
deleted file mode 100644
index 04ec3cac670..00000000000
--- a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-component-type-selector {
- padding: 0 8px;
-}
\ No newline at end of file
diff --git a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts
index 8f299f18cfa..8014edf35d7 100644
--- a/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.ts
@@ -20,7 +20,6 @@ import { MatDividerModule } from '@angular/material/divider';
MatTabsModule,
PreviewComponentComponent
],
- styleUrl: './component-info-dialog.component.scss',
templateUrl: './component-info-dialog.component.html'
})
export class ComponentInfoDialogComponent {
diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html
index 77902aa5c18..8c32c3ad369 100644
--- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html
+++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.html
@@ -2,15 +2,10 @@
-
diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss
index 67d9b4e622b..05db68e2d4e 100644
--- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss
+++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.scss
@@ -7,5 +7,5 @@ mat-card {
justify-content: flex-start;
text-transform: capitalize;
text-align: start;
- padding: 0 8px;
+ padding: 0 8px !important;
}
\ No newline at end of file
diff --git a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts
index d20d98d1119..0f5896ad2c4 100644
--- a/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts
+++ b/src/assets/wise5/authoringTool/components/component-type-button/component-type-button.component.ts
@@ -16,6 +16,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
export class ComponentTypeButtonComponent {
@Output() componentSelectedEvent: EventEmitter
= new EventEmitter();
@Input() componentType: string;
+ protected icon: string;
protected label: string;
constructor(
@@ -24,6 +25,7 @@ export class ComponentTypeButtonComponent {
) {}
ngOnInit(): void {
+ this.icon = this.componentInfoService.getInfo(this.componentType).getIcon();
this.label = this.componentInfoService.getInfo(this.componentType).getLabel();
}
diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html
index 556ac25e8c8..5dd0f4a6214 100644
--- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html
+++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html
@@ -10,8 +10,21 @@
- @for (componentTypeOption of componentTypes; track componentTypeOption.type) {
- {{ componentTypeOption.name }}
+
+
+ {{ selectedComponentTypeOption?.icon }}
+ {{ selectedComponentTypeOption?.name }}
+
+
+ @for (group of componentGroups; track group.name) {
+
+ @for (componentTypeOption of group.types; track componentTypeOption.type) {
+
+ {{ componentTypeOption.icon }}
+ {{ componentTypeOption.name }}
+
+ }
+
}
diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts
index c430964161d..4b1d8f76802 100644
--- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts
+++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts
@@ -25,27 +25,127 @@ describe('ComponentTypeSelectorComponent', () => {
});
fixture = TestBed.createComponent(ComponentTypeSelectorComponent);
const componentTypeService = TestBed.inject(ComponentTypeService);
- spyOn(componentTypeService, 'getComponentTypes').and.returnValue([
- { type: 'AiChat', name: 'AI Chat' },
- { type: 'Animation', name: 'Animation' },
- { type: 'AudioOscillator', name: 'Audio Oscillator' },
- { type: 'ConceptMap', name: 'Concept Map' },
- { type: 'DialogGuidance', name: 'Dialog Guidance' },
- { type: 'Discussion', name: 'Discussion' },
- { type: 'Draw', name: 'Draw' },
- { type: 'Embedded', name: 'Embedded' },
- { type: 'Graph', name: 'Graph' },
- { type: 'Label', name: 'Label' },
- { type: 'Match', name: 'Match' },
- { type: 'MultipleChoice', name: 'Multiple Choice' },
- { type: 'OpenResponse', name: 'Open Response' },
- { type: 'OutsideURL', name: 'Outside URL' },
- { type: 'PeerChat', name: 'Peer Chat' },
- { type: 'HTML', name: 'HTML' },
- { type: 'ShowGroupWork', name: 'Show Group Work' },
- { type: 'ShowMyWork', name: 'Show My Work' },
- { type: 'Summary', name: 'Summary' },
- { type: 'Table', name: 'Table' }
+ spyOn(componentTypeService, 'getComponentGroups').and.returnValue([
+ {
+ name: 'View Information',
+ types: [
+ {
+ type: 'HTML',
+ name: 'Display Content',
+ icon: 'newspaper'
+ },
+ {
+ type: 'ShowMyWork',
+ name: 'Show Student Work',
+ icon: 'assignment'
+ },
+ {
+ type: 'Summary',
+ name: 'Summary Graph',
+ icon: 'pie_chart'
+ }
+ ]
+ },
+ {
+ name: 'Explain and Assess',
+ types: [
+ {
+ type: 'ConceptMap',
+ name: 'Concept Map',
+ icon: 'account_tree'
+ },
+ {
+ type: 'Draw',
+ name: 'Draw',
+ icon: 'draw'
+ },
+ {
+ type: 'Label',
+ name: 'Label',
+ icon: 'sticky_note_2'
+ },
+ {
+ type: 'MultipleChoice',
+ name: 'Multiple Choice',
+ icon: 'ballot'
+ },
+ {
+ type: 'OpenResponse',
+ name: 'Open Response',
+ icon: 'edit_note'
+ },
+ {
+ type: 'Match',
+ name: 'Sort',
+ icon: 'category'
+ }
+ ]
+ },
+ {
+ name: 'Experiment, Discover, Distinguish',
+ types: [
+ {
+ type: 'AiChat',
+ name: 'AI Chat',
+ icon: 'assistant'
+ },
+ {
+ type: 'Animation',
+ name: 'Animation',
+ icon: 'animation'
+ },
+ {
+ type: 'AudioOscillator',
+ name: 'Audio Oscillator',
+ icon: 'waves'
+ },
+ {
+ type: 'Embedded',
+ name: 'Custom',
+ icon: 'handyman'
+ },
+ {
+ type: 'Graph',
+ name: 'Graph',
+ icon: 'bar_chart'
+ },
+ {
+ type: 'OutsideURL',
+ name: 'Outside Resource',
+ icon: 'web'
+ },
+ {
+ type: 'Table',
+ name: 'Table',
+ icon: 'table_chart'
+ }
+ ]
+ },
+ {
+ name: 'Collaborate',
+ types: [
+ {
+ type: 'DialogGuidance',
+ name: 'Dialog',
+ icon: 'chat'
+ },
+ {
+ type: 'Discussion',
+ name: 'Discussion',
+ icon: 'forum'
+ },
+ {
+ type: 'PeerChat',
+ name: 'Peer Chat',
+ icon: 'people'
+ },
+ {
+ type: 'ShowGroupWork',
+ name: 'Show Group Work',
+ icon: 'co_present'
+ }
+ ]
+ }
]);
configService = TestBed.inject(ConfigService);
@@ -81,7 +181,7 @@ function goToNextComponent() {
it('changes to the next component type', async () => {
expect(component.componentType).toEqual('OpenResponse');
await (await componentTypeSelectorHarness.getNextComponentTypeButton()).click();
- expect(component.componentType).toEqual('OutsideURL');
+ expect(component.componentType).toEqual('Match');
});
});
}
@@ -92,9 +192,9 @@ function selectComponent() {
await (
await componentTypeSelectorHarness.getComponentTypeSelect()
).clickOptions({
- text: 'AI Chat'
+ text: 'Display Content'
});
- expect(component.componentType).toEqual('AiChat');
+ expect(component.componentType).toEqual('HTML');
expect(
await (await componentTypeSelectorHarness.getPreviousComponentTypeButton()).isDisabled()
).toBeTrue();
@@ -105,9 +205,9 @@ function selectComponent() {
await (
await componentTypeSelectorHarness.getComponentTypeSelect()
).clickOptions({
- text: 'Table'
+ text: 'Show Group Work'
});
- expect(component.componentType).toEqual('Table');
+ expect(component.componentType).toEqual('ShowGroupWork');
expect(
await (await componentTypeSelectorHarness.getNextComponentTypeButton()).isDisabled()
).toBeTrue();
diff --git a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts
index 7e739d1637b..4904da253d6 100644
--- a/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts
+++ b/src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts
@@ -12,7 +12,9 @@ import { MatIconModule } from '@angular/material/icon';
})
export class ComponentTypeSelectorComponent {
@Input() componentType: string;
- protected componentTypes: any[];
+ protected componentGroups: any[];
+ private componentTypes: any[];
+ protected selectedComponentTypeOption: any;
@Output() componentTypeSelectedEvent: EventEmitter = new EventEmitter();
protected firstComponent: boolean;
protected lastComponent: boolean;
@@ -20,13 +22,15 @@ export class ComponentTypeSelectorComponent {
constructor(private componentTypeService: ComponentTypeService) {}
ngOnInit(): void {
- this.componentTypes = this.componentTypeService.getComponentTypes();
+ this.componentGroups = this.componentTypeService.getComponentGroups();
+ this.componentTypes = this.componentGroups.flatMap((group) => group.types);
this.selectComponent(this.componentType);
}
protected selectComponent(componentType: string): void {
this.componentType = componentType;
const index = this.getComponentIndex(this.componentType);
+ this.selectedComponentTypeOption = this.componentTypes[index];
this.firstComponent = index === 0;
this.lastComponent = index === this.componentTypes.length - 1;
this.componentTypeSelectedEvent.emit(this.componentType);
@@ -41,6 +45,6 @@ export class ComponentTypeSelectorComponent {
}
private getComponentIndex(componentType: string): number {
- return this.componentTypes.findIndex((type) => type.type === componentType);
+ return this.componentTypes?.findIndex((type) => type?.type === componentType) ?? -1;
}
}
diff --git a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
index 66487163d3b..accb0b63fd3 100644
--- a/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
+++ b/src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts
@@ -3,12 +3,13 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import { EditComponentComponent } from '../edit-component/edit-component.component';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
-import { ComponentTypeService } from '../../../services/componentTypeService';
+import { MatIconModule } from '@angular/material/icon';
import { MatSlideToggle } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';
import { Component as WISEComponent } from '../../../common/Component';
import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { ComponentInfoService } from '../../../services/componentInfoService';
@Component({
encapsulation: ViewEncapsulation.None,
@@ -19,11 +20,15 @@ import { TeacherProjectService } from '../../../services/teacherProjectService';
MatButtonModule,
MatDialogModule,
MatDividerModule,
+ MatIconModule,
MatSlideToggle
],
template: `
-
-
Edit: {{ componentIndex }}. {{ componentTypeLabel }}
+
+
+ Edit: {{ componentIndex }}. {{ componentTypeLabel }}
+ {{ componentTypeIcon }}
+
Advanced
@@ -74,10 +79,11 @@ export class EditComponentDialogComponent {
protected advancedMode = false;
protected component: WISEComponent;
protected componentIndex: number;
+ protected componentTypeIcon: string;
protected componentTypeLabel: string;
constructor(
- private componentTypeService: ComponentTypeService,
+ private componentInfoService: ComponentInfoService,
@Inject(MAT_DIALOG_DATA) public data: any,
private projectService: TeacherProjectService
) {
@@ -86,8 +92,11 @@ export class EditComponentDialogComponent {
this.projectService
.getNode(this.data.nodeId)
.getComponentIndex(this.data.componentContent.id) + 1;
- this.componentTypeLabel = this.componentTypeService.getComponentTypeLabel(
- this.data.componentContent.type
- );
+ this.componentTypeIcon = this.componentInfoService
+ .getInfo(this.data.componentContent.type)
+ .getIcon();
+ this.componentTypeLabel = this.componentInfoService
+ .getInfo(this.data.componentContent.type)
+ .getLabel();
}
}
diff --git a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
index a77d8e31043..e4564428753 100644
--- a/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
+++ b/src/assets/wise5/authoringTool/node/node-authoring/node-authoring.component.html
@@ -21,7 +21,7 @@
@for (component of components; track component.id; let i = $index; let last = $last) {