Skip to content

Commit bab0c16

Browse files
breitybreity
authored
Merge pull request #2952 from WISE-Community/issue-2948-convert-class-response
Convert classResponse to Angular
2 parents 768a051 + abd1e9f commit bab0c16

22 files changed

Lines changed: 609 additions & 412 deletions

‎src/main/webapp/site/src/app/common-hybrid-angular.module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,12 +58,14 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
5858
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
5959
import { MatRadioModule } from '@angular/material/radio';
6060
import { MatDividerModule } from '@angular/material/divider';
61+
import { ClassResponse } from '../../../wise5/components/discussion/class-response/class-response.component';
6162

6263
@Component({ template: `` })
6364
export class EmptyComponent {}
6465

6566
@NgModule({
6667
declarations: [
68+
ClassResponse,
6769
EmptyComponent,
6870
HelpIconComponent,
6971
NodeIconComponent,

‎src/main/webapp/site/src/messages.xlf‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5593,6 +5593,102 @@
55935593
<context context-type="linenumber">4</context>
55945594
</context-group>
55955595
</trans-unit>
5596+
<trans-unit datatype="html" id="f1affa088d785794802225dbc56ee2ff3d785f87">
5597+
<source>Post attachment</source>
5598+
<context-group purpose="location">
5599+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5600+
<context context-type="linenumber">25</context>
5601+
</context-group>
5602+
</trans-unit>
5603+
<trans-unit datatype="html" id="d7acc4c320f2cec1d3d4e86dfa25ac5f5e6783b9">
5604+
<source> Delete </source>
5605+
<context-group purpose="location">
5606+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5607+
<context context-type="linenumber">37</context>
5608+
</context-group>
5609+
</trans-unit>
5610+
<trans-unit datatype="html" id="f524c5795e54443e0f5c72ab2a19075cc9718bea">
5611+
<source>Delete this post so students will not see it</source>
5612+
<context-group purpose="location">
5613+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5614+
<context context-type="linenumber">34</context>
5615+
</context-group>
5616+
<context-group purpose="location">
5617+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5618+
<context context-type="linenumber">92</context>
5619+
</context-group>
5620+
</trans-unit>
5621+
<trans-unit datatype="html" id="d7f72f04c70b2b96fbd7fe3141ac1d37180cd293">
5622+
<source> Undo Delete </source>
5623+
<context-group purpose="location">
5624+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5625+
<context context-type="linenumber">48</context>
5626+
</context-group>
5627+
</trans-unit>
5628+
<trans-unit datatype="html" id="36ef0871b0f11b13ec0c34610f695b32a85f0bdf">
5629+
<source>Make this post viewable to students</source>
5630+
<context-group purpose="location">
5631+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5632+
<context context-type="linenumber">45</context>
5633+
</context-group>
5634+
<context-group purpose="location">
5635+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5636+
<context context-type="linenumber">112</context>
5637+
</context-group>
5638+
</trans-unit>
5639+
<trans-unit datatype="html" id="44f8132ed48105af852b8d21db511dfc43914bea">
5640+
<source> Comments (<x equiv-text="{{ response.replies.length }}" id="INTERPOLATION"/>) </source>
5641+
<context-group purpose="location">
5642+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5643+
<context context-type="linenumber">56</context>
5644+
</context-group>
5645+
</trans-unit>
5646+
<trans-unit datatype="html" id="e0335c4f9937223080bd249fff412f965e5a75d2">
5647+
<source>Comments (<x equiv-text="{{ response.replies.length }}" id="INTERPOLATION"/>)</source>
5648+
<context-group purpose="location">
5649+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5650+
<context context-type="linenumber">63</context>
5651+
</context-group>
5652+
</trans-unit>
5653+
<trans-unit datatype="html" id="7aafd81526e4dbfbfe16413c3e1350f66939ec96">
5654+
<source> Delete </source>
5655+
<context-group purpose="location">
5656+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5657+
<context context-type="linenumber">94</context>
5658+
</context-group>
5659+
</trans-unit>
5660+
<trans-unit datatype="html" id="02c1d5b1e28ebc2ffda15aefc9e8f281bb2d8b46">
5661+
<source> Parent Deleted </source>
5662+
<context-group purpose="location">
5663+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5664+
<context context-type="linenumber">103</context>
5665+
</context-group>
5666+
</trans-unit>
5667+
<trans-unit datatype="html" id="49ab78663d368b2e86c7b44c46e10636f5c0d6eb">
5668+
<source>Students will not see this post</source>
5669+
<context-group purpose="location">
5670+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5671+
<context context-type="linenumber">101</context>
5672+
</context-group>
5673+
</trans-unit>
5674+
<trans-unit datatype="html" id="df53535d31be0673e662796139ade095bd430358">
5675+
<source> Undo Delete </source>
5676+
<context-group purpose="location">
5677+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5678+
<context context-type="linenumber">114</context>
5679+
</context-group>
5680+
</trans-unit>
5681+
<trans-unit datatype="html" id="73c0a017e42353ac091f4a487c3d9ada970c7dce">
5682+
<source>Add Comment</source>
5683+
<context-group purpose="location">
5684+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5685+
<context context-type="linenumber">127</context>
5686+
</context-group>
5687+
<context-group purpose="location">
5688+
<context context-type="sourcefile">../../wise5/components/discussion/class-response/class-response.component.html</context>
5689+
<context context-type="linenumber">129</context>
5690+
</context-group>
5691+
</trans-unit>
55965692
<trans-unit datatype="html" id="74b04b602d4148d1cb5de4da90c0e91ec9bae5ac">
55975693
<source>Choose a Branch Path</source>
55985694
<context-group purpose="location">

‎src/main/webapp/site/src/style/themes/_apps.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,6 @@ $subhead-font-size-base: rem(1.600) !default;
9393
font-weight: 700;
9494
}
9595

96-
.more-info {
97-
border-bottom: 1px dotted;
98-
font-style: italic;
99-
}
100-
10196
.more {
10297
display: inline-block;
10398
}

‎src/main/webapp/wise5/common-angular-js-module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,7 @@ import './themes/default/theme';
7070
import SideMenu from './common/sideMenuComponent';
7171
import { EditorComponent } from '@tinymce/tinymce-angular';
7272
import { WiseTinymceEditorComponent } from './directives/wise-tinymce-editor/wise-tinymce-editor.component';
73+
import './components/discussion/class-response/classResponseComponentModule';
7374

7475
angular
7576
.module('common', [
@@ -78,6 +79,7 @@ angular
7879
'angular-toArrayFilter',
7980
'animationComponentModule',
8081
'audioOscillatorComponentModule',
82+
'classResponseComponentModule',
8183
'components',
8284
'conceptMapComponentModule',
8385
'discussionComponentModule',

‎src/main/webapp/wise5/components/discussion/class-response/class-response.component.html‎

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<mat-card class="class-response">
2+
<div class="contents">
3+
<div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
4+
<mat-icon class="md-48"
5+
style="color: {{getAvatarColorForWorkgroupId(response.workgroupId)}};">
6+
account_circle
7+
</mat-icon>
8+
<div>
9+
<div class="mat-body-2">{{ response.usernames }}</div>
10+
<div class="mat-caption secondary-text">
11+
<span class="more-info"
12+
matTooltip="{{adjustClientSaveTime(response.serverSaveTime) | amDateFormat:'ddd, MMM D YYYY, h:mm a'}}"
13+
matTooltipPosition="right">
14+
{{ adjustClientSaveTime(response.serverSaveTime) | amTimeAgo }}
15+
</span>
16+
</div>
17+
</div>
18+
</div>
19+
<div class="post"
20+
[innerHTML]="response.studentData.responseTextHTML">
21+
</div>
22+
<img *ngFor="let attachment of response.studentData.attachments"
23+
[src]="attachment.iconURL"
24+
i18n-alt
25+
alt="Post attachment"
26+
class="attachment" />
27+
<div fxLayoutAlign="end center" *ngIf="mode === 'grading' || mode === 'gradingRevision'">
28+
<br />
29+
<button
30+
*ngIf="response.latestInappropriateFlagAnnotation == null || response.latestInappropriateFlagAnnotation.data == null || response.latestInappropriateFlagAnnotation.data.action != 'Delete'"
31+
mat-raised-button
32+
class="warn"
33+
(click)="delete(response)"
34+
matTooltip="Delete this post so students will not see it"
35+
matTooltipPosition="above"
36+
i18n-matTooltip
37+
i18n>
38+
Delete
39+
</button>
40+
<button
41+
*ngIf="response.latestInappropriateFlagAnnotation != null && response.latestInappropriateFlagAnnotation.data.action === 'Delete'"
42+
mat-raised-button
43+
class="warn"
44+
(click)="undoDelete(response)"
45+
matTooltip="Make this post viewable to students"
46+
matTooltipPosition="above"
47+
i18n-matTooltip
48+
i18n>
49+
Undo Delete
50+
</button>
51+
</div>
52+
</div>
53+
<mat-divider *ngIf="mode === 'student' || response.replies.length > 0"></mat-divider>
54+
<div class="notice-bg-bg" *ngIf="response.replies.length > 0">
55+
<div class="comments-header" matSubheader>
56+
<span *ngIf="response.replies.length === 1" i18n>
57+
Comments ({{ response.replies.length }})
58+
</span>
59+
<a *ngIf="response.replies.length > 1"
60+
[routerLink]=""
61+
(click)="toggleExpanded()"
62+
fxLayoutAlign="start center">
63+
<span i18n>Comments ({{ response.replies.length }})</span>
64+
<mat-icon>{{expanded ? "expand_less" : "expand_more"}}</mat-icon>
65+
</a>
66+
</div>
67+
<mat-list class="comments">
68+
<mat-list-item [ngClass]="{'animate-show': !isLast}"
69+
*ngFor="let reply of repliesToShow">
70+
<mat-icon matListAvatar
71+
class="mat-40"
72+
style="color: {{getAvatarColorForWorkgroupId(reply.workgroupId)}}">
73+
account_circle
74+
</mat-icon>
75+
<h3 matLine>
76+
<span class="mat-body-2">{{ reply.usernames }}</span>&nbsp;
77+
<span class="more-info secondary-text mat-caption"
78+
matTooltip="{{adjustClientSaveTime(reply.serverSaveTime) | amDateFormat:'ddd, MMM D YYYY, h:mm a'}}"
79+
matTooltipPosition="right">
80+
{{ adjustClientSaveTime(reply.serverSaveTime) | amTimeAgo }}
81+
</span>
82+
</h3>
83+
<p matLine [innerHTML]="reply.studentData.responseHTML"></p>
84+
<div fxFlex></div>
85+
<div *ngIf="mode === 'grading' || mode === 'gradingRevision'">
86+
<button
87+
*ngIf="(response.latestInappropriateFlagAnnotation == null || response.latestInappropriateFlagAnnotation.data.action !== 'Delete') && (reply.latestInappropriateFlagAnnotation == null || reply.latestInappropriateFlagAnnotation.data.action != 'Delete')"
88+
mat-raised-button
89+
class="warn"
90+
(click)="delete(reply)"
91+
i18n-matTooltip
92+
matTooltip="Delete this post so students will not see it"
93+
matTooltipPosition="above"
94+
i18n>
95+
Delete
96+
</button>
97+
<span
98+
*ngIf="response.latestInappropriateFlagAnnotation != null && response.latestInappropriateFlagAnnotation.data.action === 'Delete'"
99+
class="warn"
100+
i18n-matTooltip
101+
matTooltip="Students will not see this post"
102+
matTooltipPosition="above"
103+
i18n>
104+
Parent Deleted
105+
</span>
106+
<button
107+
*ngIf="reply.latestInappropriateFlagAnnotation != null && reply.latestInappropriateFlagAnnotation.data.action === 'Delete'"
108+
mat-raised-button
109+
class="warn"
110+
(click)="undoDelete(reply)"
111+
i18n-matTooltip
112+
matTooltip="Make this post viewable to students"
113+
matTooltipPosition="above"
114+
i18n>
115+
Undo Delete
116+
</button>
117+
</div>
118+
</mat-list-item>
119+
</mat-list>
120+
<mat-divider></mat-divider>
121+
</div>
122+
<div class="new-reply" fxLayout="row"
123+
*ngIf="mode === 'student' && !isdisabled">
124+
<textarea class="new-reply-input"
125+
[(ngModel)]="response.replyText"
126+
(keyup)="replyEntered($event)"
127+
placeholder="Add Comment"
128+
i18n-placeholder
129+
aria-label="Add Comment"
130+
i18n-aria-label
131+
cdkTextareaAutosize>
132+
</textarea>
133+
</div>
134+
</mat-card>

‎src/main/webapp/wise5/components/discussion/class-response/class-response.component.scss‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
@import '~style/abstracts/variables', '~style/abstracts/functions';
2+
3+
.class-response {
4+
margin: 0 auto 16px;
5+
6+
&.mat-card {
7+
padding: 0px;
8+
}
9+
10+
.contents,
11+
.comments-header {
12+
padding: 16px;
13+
}
14+
15+
.post {
16+
margin-top: 16px;
17+
}
18+
19+
.attachment {
20+
max-width: 100%;
21+
height: auto;
22+
margin-top: 16px;
23+
}
24+
25+
.comments {
26+
padding: 0;
27+
max-height: 400px;
28+
overflow-y: auto;
29+
}
30+
31+
.mat-list-base .mat-list-item {
32+
&.mat-2-line {
33+
height: auto;
34+
margin-bottom: 12px;
35+
}
36+
37+
.mat-line {
38+
white-space: normal;
39+
}
40+
41+
.mat-list-item-content {
42+
align-items: flex-start;
43+
}
44+
45+
&.mat-list-item-with-avatar .mat-list-item-content .mat-list-text {
46+
padding-left: 8px;
47+
48+
[dir=rtl] & {
49+
padding-right: 8px;
50+
}
51+
}
52+
}
53+
54+
.new-reply {
55+
padding: 16px;
56+
}
57+
58+
.new-reply-input {
59+
width: 100%;
60+
border: 0 none;
61+
overflow: hidden;
62+
63+
&:focus {
64+
outline: none;
65+
}
66+
}
67+
}

0 commit comments

Comments
 (0)