Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
<div class="component-summary mat-elevation-z1 app-background flex flex-col p-3">
<div class="notice !text-start flex justify-between gap-4">
<ng-template #expandSummaryTpl let-type="type">
<button
matIconButton
class="!absolute top-0 end-0"
title="Expand summary"
i18n-title
(click)="expandSummary(type)"
>
<mat-icon>fullscreen</mat-icon>
</button>
</ng-template>
<div class="component-summary notice flex flex-col p-3">
<div class="flex justify-between gap-4">
<div>
<div i18n>Prompt</div>
@if (component.prompt) {
Expand All @@ -21,57 +32,67 @@
@if (hasSummaryData) {
<div class="flex flex-col sm:flex-row mt-3 gap-3">
@if (hasScoresSummary && hasScoreAnnotation) {
<teacher-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'scores'"
[source]="source"
[chartType]="'column'"
[doRender]="true"
class="w-full md:w-1/2"
/>
<div class="summary-graph">
<teacher-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'scores'"
[source]="source"
[chartType]="'column'"
[doRender]="true"
class="summary"
/>
</div>
}
@if (component?.type === 'MultipleChoice' && hasStudentWork) {
<teacher-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'responses'"
[source]="source"
[highlightCorrectAnswer]="hasCorrectAnswer"
[chartType]="component.choiceType === 'multiple' ? 'columnn' : 'pie'"
[doRender]="true"
class="w-full md:w-1/2"
/>
<div class="summary-graph">
<teacher-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'responses'"
[source]="source"
[highlightCorrectAnswer]="hasCorrectAnswer"
[chartType]="component.choiceType === 'multiple' ? 'columnn' : 'pie'"
[doRender]="true"
class="summary"
/>
</div>
}
@if (hasIdeaRubricData) {
<mat-card appearance="outlined" class="w-full">
<mat-card-content>
<ideas-summary
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'responses'"
[source]="source"
[doRender]="true"
[componentType]="component.type"
/>
</mat-card-content>
</mat-card>
<div class="summary-content">
<ng-container
[ngTemplateOutlet]="expandSummaryTpl"
[ngTemplateOutletContext]="{ type: 'ideas' }"
/>
<ideas-summary
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[studentDataType]="'responses'"
[source]="source"
[doRender]="true"
[componentType]="component.type"
class="summary"
/>
</div>
}
@if (component?.type === 'Match') {
<mat-card appearance="outlined" class="w-full">
<mat-card-content>
<match-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[source]="source"
[doRender]="true"
/>
</mat-card-content>
</mat-card>
<div class="summary-content">
<ng-container
[ngTemplateOutlet]="expandSummaryTpl"
[ngTemplateOutletContext]="{ type: 'match' }"
/>
<match-summary-display
[nodeId]="node.id"
[componentId]="component.id"
[periodId]="periodId"
[source]="source"
[doRender]="true"
class="summary"
/>
</div>
}
</div>
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,40 @@
.component-summary {
.notice {
max-width: none;
margin: 0;
}

.mat-body-1 {
margin-bottom: 0;
}

.mat-mdc-card-content:last-child {
padding-bottom: 12px;
}

.mat-mdc-card-content:first-child {
padding-top: 12px;
}

.mat-mdc-card-content {
padding: 0 12px;
}

milestone-report-button > *,
peer-group-button > * {
margin-top: 12px;
margin-inline-end: 8px;
}
@use "tailwindcss";

.notice {
@apply m-3 !max-w-none !text-start;
}

.mat-body-1 {
margin-bottom: 0;
}

.mat-mdc-card-content:last-child {
padding-bottom: 12px;
}

.mat-mdc-card-content:first-child {
padding-top: 12px;
}

.mat-mdc-card-content {
padding: 0 12px;
}

milestone-report-button > *,
peer-group-button > * {
margin-top: 12px;
margin-inline-end: 8px;
}

.summary {
@apply rounded-md p-3 overflow-hidden bg-white block;
}

.summary-graph {
@apply w-full lg:w-1/2 xl:w-1/3;
}

.summary-content {
@apply w-full lg:w-1/2 xl:w-2/3 relative;
}

Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Component, Input, ViewEncapsulation } from '@angular/core';
import { Component, Inject, Input, ViewEncapsulation } from '@angular/core';
import { NgTemplateOutlet } from '@angular/common';
import { TeacherSummaryDisplayComponent } from '../../../directives/teacher-summary-display/teacher-summary-display.component';
import { ComponentServiceLookupService } from '../../../services/componentServiceLookupService';
import { SummaryService } from '../../../components/summary/summaryService';
Expand All @@ -14,21 +15,31 @@ import { IdeasSummaryComponent } from '../../../directives/teacher-summary-displ
import { MatchSummaryDisplayComponent } from '../../../directives/teacher-summary-display/match-summary-display/match-summary-display.component';
import { MatCardModule } from '@angular/material/card';
import { CRaterService } from '../../../services/cRaterService';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import {
MAT_DIALOG_DATA,
MatDialog,
MatDialogContent,
MatDialogRef
} from '@angular/material/dialog';

@Component({
imports: [
ComponentCompletionComponent,
IdeasSummaryComponent,
MatButtonModule,
MatCardModule,
MatIconModule,
MatchSummaryDisplayComponent,
MilestoneReportButtonComponent,
NgTemplateOutlet,
PeerGroupButtonComponent,
TeacherSummaryDisplayComponent
],
selector: 'component-summary',
styleUrl: './component-summary.component.scss',
templateUrl: './component-summary.component.html',
encapsulation: ViewEncapsulation.None
templateUrl: './component-summary.component.html'
})
export class ComponentSummaryComponent {
protected avgScore: number;
Expand All @@ -48,6 +59,7 @@ export class ComponentSummaryComponent {
private componentServiceLookupService: ComponentServiceLookupService,
private cRaterService: CRaterService,
private dataService: TeacherDataService,
private dialog: MatDialog,
private summaryService: SummaryService
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function with many parameters (count = 6): constructor [qlty:function-parameters]

) {}

Expand Down Expand Up @@ -113,4 +125,43 @@ export class ComponentSummaryComponent {
return soFar;
}, []);
}

protected expandSummary(type: 'ideas' | 'match'): void {
this.dialog.open(SummaryDialogComponent, {
data: {
type: type,
node: this.node,
component: this.component,
periodId: this.periodId,
source: this.source,
componentType: this.component.type
},
panelClass: 'summary-dialog'
});
}
}

@Component({
encapsulation: ViewEncapsulation.None,
imports: [
IdeasSummaryComponent,
MatchSummaryDisplayComponent,
MatButtonModule,
MatDialogContent,
MatIconModule
],
styles: `
@import 'tailwindcss';

.summary-dialog {
@apply w-full h-full !max-w-[120rem];
}
`,
templateUrl: './summary-dialog.component.html'
})
class SummaryDialogComponent {
constructor(
@Inject(MAT_DIALOG_DATA) public data: any,
public dialogRef: MatDialogRef<SummaryDialogComponent>
) {}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<mat-dialog-content>
<button matIconButton (click)="dialogRef.close()" class="!absolute top-0 end-0">
<mat-icon>fullscreen_exit</mat-icon>
</button>
@if (data.type === 'ideas') {
<ideas-summary
[nodeId]="data.node.id"
[componentId]="data.component.id"
[periodId]="data.periodId"
[studentDataType]="'responses'"
[source]="data.source"
[doRender]="true"
[componentType]="data.componentType"
/>
} @else if (data.type === 'match') {
<match-summary-display
[nodeId]="data.node.id"
[componentId]="data.component.id"
[periodId]="data.periodId"
[source]="data.source"
[doRender]="true"
/>
}
</mat-dialog-content>
9 changes: 8 additions & 1 deletion src/messages.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -988,7 +988,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
</context-group>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html</context>
<context context-type="linenumber">4,6</context>
<context context-type="linenumber">15,17</context>
</context-group>
</trans-unit>
<trans-unit id="7561343662252105417" datatype="html">
Expand Down Expand Up @@ -13837,6 +13837,13 @@ The branches will be removed but the steps will remain in the unit.</source>
<context context-type="linenumber">12,14</context>
</context-group>
</trans-unit>
<trans-unit id="6063735713364961693" datatype="html">
<source>Expand summary</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-summary/component-summary.component.html</context>
<context context-type="linenumber">5,9</context>
</context-group>
</trans-unit>
<trans-unit id="4977425233945972011" datatype="html">
<source> No feedback given for this version </source>
<context-group purpose="location">
Expand Down
Loading