Skip to content

Commit

Permalink
chore(Concurrent Authors): Make into Angular component (#1172)
Browse files Browse the repository at this point in the history
Update styles, layout, and message text
Co-authored-by: Jonathan Lim-Breitbart <breity10@gmail.com>
  • Loading branch information
hirokiterashima authored Apr 11, 2023
1 parent 6209ad5 commit 2fbac01
Show file tree
Hide file tree
Showing 9 changed files with 107 additions and 44 deletions.
2 changes: 2 additions & 0 deletions src/app/teacher/authoring-tool.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import { RecoveryAuthoringComponent } from '../../assets/wise5/authoringTool/rec
import { AddLessonConfigureComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component';
import { AddLessonChooseLocationComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-location/add-lesson-choose-location.component';
import { ConstraintAuthoringComponent } from '../../assets/wise5/authoringTool/constraint/constraint-authoring/constraint-authoring.component';
import { ConcurrentAuthorsMessageComponent } from '../../assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component';

@NgModule({
declarations: [
Expand All @@ -39,6 +40,7 @@ import { ConstraintAuthoringComponent } from '../../assets/wise5/authoringTool/c
ChooseNewComponentLocation,
ChooseNewNodeLocation,
ChooseNewNodeTemplate,
ConcurrentAuthorsMessageComponent,
ConstraintAuthoringComponent,
NodeAdvancedBranchAuthoringComponent,
NodeAdvancedConstraintAuthoringComponent,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<div class="warn">
<b>{{ message }}</b>
</div>
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ConcurrentAuthorsMessageComponent } from './concurrent-authors-message.component';
import { ConfigService } from '../../services/configService';

class MockConfigService {
getMyUsername(): string {
return 'aa';
}
}

let component: ConcurrentAuthorsMessageComponent;
let fixture: ComponentFixture<ConcurrentAuthorsMessageComponent>;
describe('ConcurrentAuthorsMessageComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ConcurrentAuthorsMessageComponent],
providers: [{ provide: ConfigService, useClass: MockConfigService }]
});
fixture = TestBed.createComponent(ConcurrentAuthorsMessageComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
ngOnChanges();
});

function ngOnChanges() {
describe('ngOnChanges()', () => {
it('should set empty message when there are no other authors', () => {
expectMessage(['aa'], '');
});
it('should set message to other authors when there are other authors', () => {
expectMessage(
['aa', 'bb'],
"Also currently editing this unit: bb. Be careful not to overwrite each other's work!"
);
expectMessage(
['aa', 'bb', 'cc'],
"Also currently editing this unit: bb, cc. Be careful not to overwrite each other's work!"
);
});
});
}

function expectMessage(authors: string[], message: string) {
component.authors = authors;
component.ngOnChanges();
expect(component.message).toEqual(message);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Component, Input } from '@angular/core';
import { ConfigService } from '../../services/configService';

@Component({
selector: 'concurrent-authors-message',
templateUrl: 'concurrent-authors-message.component.html'
})
export class ConcurrentAuthorsMessageComponent {
@Input() authors: string[] = [];
message: string = '';

constructor(private configService: ConfigService) {}

ngOnChanges() {
this.authors.splice(this.authors.indexOf(this.configService.getMyUsername()), 1);
this.message =
this.authors.length > 0
? $localize`Also currently editing this unit: ${this.authors.join(
', '
)}. Be careful not to overwrite each other's work!`
: '';
}
}
2 changes: 1 addition & 1 deletion src/assets/wise5/authoringTool/node/nodeAuthoring.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
</style>
<div ui-view></div>
<div ng-if="$ctrl.$state.current.name == 'root.at.project.node'">
<div style="background-color: white; position: sticky; top: 17px; z-index: 2">
<div style="background-color: white; position: sticky; top: 26px; z-index: 2">
<div layout="row" layout-wrap>
<md-button
id="backToProjectButton"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { ProjectAuthoringComponent } from '../../authoringTool/project/projectAu
import { ProjectInfoAuthoringComponent } from '../../authoringTool/info/projectInfoAuthoringComponent';
import { RubricAuthoringComponent } from '../../authoringTool/rubric/rubric-authoring.component';
import { RecoveryAuthoringComponent } from '../recovery-authoring/recovery-authoring.component';
import { ConcurrentAuthorsMessageComponent } from '../concurrent-authors-message/concurrent-authors-message.component';

export default angular
.module('projectAuthoringModule', [])
Expand All @@ -27,6 +28,12 @@ export default angular
component: AdvancedProjectAuthoringComponent
}) as angular.IDirectiveFactory
)
.directive(
'concurrentAuthorsMessage',
downgradeComponent({
component: ConcurrentAuthorsMessageComponent
}) as angular.IDirectiveFactory
)
.directive(
'rubricAuthoringComponent',
downgradeComponent({ component: RubricAuthoringComponent }) as angular.IDirectiveFactory
Expand Down
17 changes: 7 additions & 10 deletions src/assets/wise5/authoringTool/project/projectAuthoring.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,11 @@
layout-wrap
>
<div style="margin-bottom: 20px; width: 100%">
<div
style="text-align: right; background-color: white; position: sticky; top: 0px; z-index: 2"
>
<div style="color: red">{{$ctrl.currentAuthorsMessage}}</div>
<div>
<span>&nbsp</span>
</div>
</div>
<concurrent-authors-message
[authors]="$ctrl.authors"
class="center app-background"
style="position: sticky; top: 1px; padding: 4px 0; display: block; z-index: 3;"
></concurrent-authors-message>
<style>
#commitDiv {
padding: 10px 0px;
Expand Down Expand Up @@ -95,7 +92,7 @@
background-color: white;
margin-bottom: 15px;
position: sticky;
top: 17px;
top: 26px;
z-index: 2;
"
>
Expand Down Expand Up @@ -225,7 +222,7 @@
<md-button
id="previewProjectWithoutConstraintsButton"
class="topButton md-raised md-primary"
ng-click="$ctrl.previewProjectWithoutConstraints()"
ng-click="$ctrl.previewProject(false)"
ng-disabled="$ctrl.insertGroupMode || $ctrl.insertNodeMode"
>
<md-icon>visibility_off</md-icon>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { temporarilyHighlightElement } from '../../common/dom/dom';

class ProjectAuthoringController {
$translate: any;
authors: string[] = [];
projectId: number;
items: any;
nodeIds: [];
Expand All @@ -28,11 +29,8 @@ class ProjectAuthoringController {
idToNode: any;
copyMode: boolean;
nodeToAdd: any;
projectScriptFilename: string;
currentAuthorsMessage: string = '';
stepNodeSelected: boolean = false;
activityNodeSelected: boolean = false;
metadata: any;
moveMode: boolean;
projectURL: string;
rxStomp: RxStomp;
Expand Down Expand Up @@ -94,10 +92,8 @@ class ProjectAuthoringController {
this.inactiveStepNodes = this.ProjectService.getInactiveStepNodes();
this.inactiveNodes = this.ProjectService.getInactiveNodes();
this.idToNode = this.ProjectService.getIdToNode();
this.projectScriptFilename = this.ProjectService.getProjectScriptFilename();
this.stepNodeSelected = false;
this.activityNodeSelected = false;
this.metadata = this.ProjectService.getProjectMetadata();
this.subscribeToCurrentAuthors(this.projectId);
this.projectURL = window.location.origin + this.ConfigService.getConfigParam('projectURL');
this.$transitions.onSuccess({}, ($transition) => {
Expand Down Expand Up @@ -144,35 +140,18 @@ class ProjectAuthoringController {
this.subscriptions.unsubscribe();
}

endProjectAuthoringSession() {
this.unSubscribeFromCurrentAuthors();
private endProjectAuthoringSession(): void {
this.rxStomp.deactivate();
this.ProjectService.notifyAuthorProjectEnd(this.projectId);
}

previewProject(enableConstraints: boolean = true) {
const previewProjectEventData = { constraints: enableConstraints };
this.saveEvent('projectPreviewed', 'Navigation', previewProjectEventData);
previewProject(enableConstraints: boolean = true): void {
this.saveEvent('projectPreviewed', 'Navigation', { constraints: enableConstraints });
window.open(
`${this.ConfigService.getConfigParam('previewProjectURL')}?constraints=${enableConstraints}`
);
}

previewProjectWithoutConstraints() {
this.previewProject(false);
}

showOtherConcurrentAuthors(authors) {
const myUsername = this.ConfigService.getMyUsername();
authors.splice(authors.indexOf(myUsername), 1);
if (authors.length > 0) {
this.currentAuthorsMessage = this.$translate('concurrentAuthorsWarning', {
currentAuthors: authors.join(', ')
});
} else {
this.currentAuthorsMessage = '';
}
}

saveProject() {
try {
// if projectJSONString is bad json,
Expand Down Expand Up @@ -802,24 +781,19 @@ class ProjectAuthoringController {
return this.getSelectedNodeIds().length > 0;
}

subscribeToCurrentAuthors(projectId) {
private subscribeToCurrentAuthors(projectId: number): void {
this.rxStomp = new RxStomp();
this.rxStomp.configure({
brokerURL: this.ConfigService.getWebSocketURL()
});
this.rxStomp.activate();
this.rxStomp.watch(`/topic/current-authors/${projectId}`).subscribe((message: Message) => {
const body = JSON.parse(message.body);
this.showOtherConcurrentAuthors(body);
this.authors = JSON.parse(message.body);
});
this.rxStomp.connected$.subscribe(() => {
this.ProjectService.notifyAuthorProjectBegin(this.projectId);
});
}

unSubscribeFromCurrentAuthors() {
this.rxStomp.deactivate();
}
}

export const ProjectAuthoringComponent = {
Expand Down
9 changes: 9 additions & 0 deletions src/messages.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -8815,6 +8815,15 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
<context context-type="linenumber">43</context>
</context-group>
</trans-unit>
<trans-unit id="1318680729593701201" datatype="html">
<source>Also currently editing this unit: <x id="PH" equiv-text="this.authors.join(
&apos;, &apos;
)"/>. Be careful not to overwrite each other&apos;s work!</source>
<context-group purpose="location">
<context context-type="sourcefile">src/assets/wise5/authoringTool/concurrent-authors-message/concurrent-authors-message.component.ts</context>
<context context-type="linenumber">18,20</context>
</context-group>
</trans-unit>
<trans-unit id="1bd5e17c9582661e20763a7634ef07881e33bbd7" datatype="html">
<source>Action</source>
<context-group purpose="location">
Expand Down

0 comments on commit 2fbac01

Please sign in to comment.