refactor(ProjectAuthoringCompoonent): Extract

ProjectAuthoringParentComponent

src/app/teacher/authoring-routing.module.ts

@@ -34,6 +34,7 @@ import { RecoveryAuthoringComponent } from '../../assets/wise5/authoringTool/rec
 import { ChooseImportComponentComponent } from '../../assets/wise5/authoringTool/importComponent/choose-import-component/choose-import-component.component';
 import { ChooseMoveNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-move-node-location/choose-move-node-location.component';
 import { ChooseCopyNodeLocationComponent } from '../../assets/wise5/authoringTool/choose-node-location/choose-copy-node-location/choose-copy-node-location.component';
+import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 
 const routes: Routes = [
   {
@@ -46,9 +47,10 @@ const routes: Routes = [
       { path: 'new-unit', component: AddProjectComponent },
       {
         path: 'unit/:unitId',
-        component: ProjectAuthoringComponent,
+        component: ProjectAuthoringParentComponent,
         resolve: { project: AuthoringProjectResolver },
         children: [
+          { path: '', component: ProjectAuthoringComponent },
           {
             path: 'add-lesson',
             children: [

src/app/teacher/authoring-tool.module.ts

@@ -48,6 +48,7 @@ import { InsertNodeAfterButtonComponent } from '../../assets/wise5/authoringTool
 import { InsertNodeInsideButtonComponent } from '../../assets/wise5/authoringTool/choose-node-location/insert-node-inside-button/insert-node-inside-button.component';
 import { NodeIconAndTitleComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-icon-and-title/node-icon-and-title.component';
 import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTool/choose-node-location/node-with-move-after-button/node-with-move-after-button.component';
+import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 
 @NgModule({
   declarations: [
@@ -81,6 +82,7 @@ import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTo
     NotebookAuthoringComponent,
     ProjectInfoAuthoringComponent,
     ProjectAuthoringComponent,
+    ProjectAuthoringParentComponent,
     RecoveryAuthoringComponent,
     RequiredErrorLabelComponent,
     RubricAuthoringComponent,

src/assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component.html

@@ -0,0 +1,13 @@
+<div id="top" class="view-content view-content--with-sidemenu">
+  <div class="l-constrained" fxLayout="column">
+    <div class="node-content md-whiteframe-1dp" fxLayout="row wrap">
+      <div class="main-content">
+        <concurrent-authors-message
+          [projectId]="projectId"
+          class="concurrent-authors-message center app-background"
+        ></concurrent-authors-message>
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+  </div>
+</div>

src/assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component.scss

@@ -0,0 +1,17 @@
+.node-content {
+  padding: 0px 16px;
+  position: relative;
+}
+
+.main-content {
+  margin-bottom: 20px;
+  width: 100%;
+}
+
+.concurrent-authors-message {
+  position: sticky;
+  top: 1px;
+  padding: 4px 0;
+  display: block;
+  z-index: 3;
+}

src/assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TeacherProjectService } from '../../services/teacherProjectService';
+
+@Component({
+  templateUrl: './project-authoring-parent.component.html',
+  styleUrls: ['./project-authoring-parent.component.scss']
+})
+export class ProjectAuthoringParentComponent {
+  protected projectId: number;
+
+  constructor(private projectService: TeacherProjectService, private route: ActivatedRoute) {}
+
+  ngOnInit(): void {
+    this.projectId = Number(this.route.snapshot.paramMap.get('unitId'));
+    this.projectService.notifyAuthorProjectBegin(this.projectId);
+    window.onbeforeunload = (event) => {
+      this.projectService.notifyAuthorProjectEnd(this.projectId);
+    };
+  }
+
+  ngOnDestroy(): void {
+    this.projectService.notifyAuthorProjectEnd(this.projectId);
+  }
+}