feat(Add Lesson): Combine Create Your Own and Lesson Structure choices

src/app/authoring-tool/import-step/import-step.scss → src/app/authoring-tool/add-content.scss

@@ -6,6 +6,6 @@
   z-index: 1;
 
   .mat-divider {
-    margin: 8px 0;
+    margin: 16px 0 8px 0;
   }
 }

src/app/authoring-tool/import-step/choose-import-step-location/choose-import-step-location.component.ts

@@ -7,7 +7,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'choose-import-step-location',
-  styleUrls: ['choose-import-step-location.component.scss', '../import-step.scss'],
+  styleUrls: ['choose-import-step-location.component.scss', '../../add-content.scss'],
   templateUrl: 'choose-import-step-location.component.html'
 })
 export class ChooseImportStepLocationComponent {

src/app/authoring-tool/import-step/choose-import-step/choose-import-step.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'choose-import-step',
-  styleUrls: ['choose-import-step.component.scss', '../import-step.scss'],
+  styleUrls: ['choose-import-step.component.scss', '../../add-content.scss'],
   templateUrl: 'choose-import-step.component.html'
 })
 export class ChooseImportStepComponent {

src/app/authoring-tool/import-step/choose-import-unit/choose-import-unit.component.ts

@@ -6,7 +6,7 @@ import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'choose-import-unit',
-  styleUrls: ['./choose-import-unit.component.scss', '../import-step.scss'],
+  styleUrls: ['./choose-import-unit.component.scss', '../../add-content.scss'],
   templateUrl: './choose-import-unit.component.html'
 })
 export class ChooseImportUnitComponent {

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

@@ -37,6 +37,7 @@ import { ChooseCopyNodeLocationComponent } from '../../assets/wise5/authoringToo
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
 import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
+import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component';
 
 const routes: Routes = [
   {
@@ -56,13 +57,24 @@ const routes: Routes = [
           {
             path: 'add-lesson',
             children: [
+              {
+                path: '',
+                component: AddLessonChooseTemplateComponent
+              },
               {
                 path: 'configure',
                 component: AddLessonConfigureComponent
               },
               {
                 path: 'choose-location',
                 component: AddLessonChooseLocationComponent
+              },
+              {
+                path: 'structure',
+                loadChildren: () =>
+                  import(
+                    '../../assets/wise5/authoringTool/structure/structure-authoring.module'
+                  ).then((m) => m.StructureAuthoringModule)
               }
             ]
           },
@@ -154,14 +166,7 @@ const routes: Routes = [
             ]
           },
           { path: 'notebook', component: NotebookAuthoringComponent },
-          { path: 'recovery', component: RecoveryAuthoringComponent },
-          {
-            path: 'structure',
-            loadChildren: () =>
-              import('../../assets/wise5/authoringTool/structure/structure-authoring.module').then(
-                (m) => m.StructureAuthoringModule
-              )
-          }
+          { path: 'recovery', component: RecoveryAuthoringComponent }
         ]
       }
     ]

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

@@ -51,10 +51,12 @@ import { NodeWithMoveAfterButtonComponent } from '../../assets/wise5/authoringTo
 import { ProjectAuthoringParentComponent } from '../../assets/wise5/authoringTool/project-authoring-parent/project-authoring-parent.component';
 import { ChooseImportUnitComponent } from '../authoring-tool/import-step/choose-import-unit/choose-import-unit.component';
 import { NodeAuthoringParentComponent } from '../../assets/wise5/authoringTool/node/node-authoring-parent/node-authoring-parent.component';
+import { AddLessonChooseTemplateComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component';
 
 @NgModule({
   declarations: [
     AddLessonChooseLocationComponent,
+    AddLessonChooseTemplateComponent,
     AddLessonConfigureComponent,
     AddProjectComponent,
     AddYourOwnNode,

src/assets/wise5/authoringTool/add-content.scss

@@ -0,0 +1,11 @@
+.nav-controls {
+  background-color: white;
+  position: sticky;
+  bottom: 0;
+  padding-bottom: 8px;
+  z-index: 1;
+
+  .mat-divider {
+    margin: 16px 0 8px 0;
+  }
+}

src/assets/wise5/authoringTool/addLesson/add-lesson-choose-location/add-lesson-choose-location.component.html

@@ -15,10 +15,8 @@ <h5 i18n>Unused Lessons</h5>
     <ng-container *ngTemplateOutlet="group; context: { groupId: groupId }"></ng-container>
   </div>
 </div>
-<hr />
-<button mat-raised-button color="primary" (click)="cancel()" aria-label="Cancel" i18n>
-  Cancel
-</button>
+<mat-divider></mat-divider>
+<button mat-button color="primary" (click)="cancel()" aria-label="Cancel" i18n>Cancel</button>
 
 <ng-template #group let-groupId="groupId">
   <div fxLayout="row" fxLayoutGap="16px" style="margin: 4px 0px">

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.html → src/assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component.html

@@ -1,37 +1,34 @@
-<h5 i18n>Choose a Lesson Structure</h5>
-<p i18n>
-  Based on our work with classroom teachers, we have developed several lesson structures that follow
-  the
-  <a href="https://wise.berkeley.edu/about#ki" target="_blank">Knowledge Integration</a> framework
-  and help teachers productively integrate open educational resources (OERs) into their curricula.
-  These structures have also proven useful for developing students' capacity for self-directed
-  learning. We have made the structures very general, so that teachers can customize and incorporate
-  them into any WISE unit to strengthen support for knowledge integration and self-directed
-  learning.
-</p>
-<div fxLayout="row wrap" fxLayoutAlign="start stretch">
-  <mat-card *ngFor="let structure of structures" class="structure-card">
+<h5 i18n>Start from scratch or choose a Lesson Structure*:</h5>
+<div fxLayout="row wrap" fxLayoutAlign="center" fxLayoutAlign.gt-sm="start">
+  <mat-card *ngFor="let template of templates" appearance="outlined">
     <mat-card-title>
-      <h6 class="center">{{ structure.label }}</h6>
+      <h6 class="center">
+        <strong>{{ template.label }}</strong>
+      </h6>
     </mat-card-title>
     <mat-card-content fxLayoutAlign="center center">
-      <mat-icon>{{ structure.icon }}</mat-icon>
+      <mat-icon>{{ template.icon }}</mat-icon>
     </mat-card-content>
     <mat-card-actions fxLayout="column" fxLayoutAlign="start">
-      <button
-        mat-raised-button
-        color="primary"
-        (click)="chooseStructure(structure)"
-        aria-label="Choose Structure"
-        i18n-aria-label
-        i18n
-      >
+      <button mat-flat-button color="primary" (click)="chooseTemplate(template)" i18n>
         Select
       </button>
     </mat-card-actions>
   </mat-card>
 </div>
-<hr />
-<button mat-button color="primary" routerLink="../.." aria-label="Cancel" i18n-aria-label i18n>
-  Cancel
-</button>
+<p i18n>
+  *Based on our work with classroom teachers, we have developed several lesson structures that
+  follow the
+  <a href="https://wise.berkeley.edu/about#ki" target="_blank">Knowledge Integration</a> framework
+  and help teachers productively integrate open educational resources (OERs) into their curricula.
+  These structures have also proven useful for developing students' capacity for self-directed
+  learning. We have made the structures very general, so that teachers can customize and incorporate
+  them into any WISE unit to strengthen support for knowledge integration and self-directed
+  learning.
+</p>
+<div class="nav-controls">
+  <mat-divider></mat-divider>
+  <div>
+    <button mat-button color="primary" routerLink=".." i18n>Cancel</button>
+  </div>
+</div>

src/assets/wise5/authoringTool/structure/choose-structure/choose-structure.component.scss → src/assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component.scss

@@ -1,4 +1,4 @@
-.structure-card {
+mat-card {
   width: 280px;
   margin: 8px;
-}
+}

src/assets/wise5/authoringTool/addLesson/add-lesson-choose-template/add-lesson-choose-template.component.ts

@@ -0,0 +1,45 @@
+import { Component } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+
+@Component({
+  selector: 'add-lesson-choose-template',
+  styleUrls: ['./add-lesson-choose-template.component.scss', '../../add-content.scss'],
+  templateUrl: './add-lesson-choose-template.component.html'
+})
+export class AddLessonChooseTemplateComponent {
+  protected templates = [
+    {
+      label: $localize`Create Your Own`,
+      icon: 'mode_edit',
+      route: 'configure'
+    },
+    {
+      label: $localize`Jigsaw`,
+      icon: 'extension',
+      route: 'structure/jigsaw'
+    },
+    {
+      label: $localize`Self-Directed Investigation`,
+      icon: 'contact_support',
+      route: 'structure/self-directed-investigation'
+    },
+    {
+      label: $localize`Peer Review & Revision`,
+      icon: 'question_answer',
+      route: 'structure/peer-review-and-revision'
+    },
+    {
+      label: $localize`KI Lesson with OER`,
+      icon: 'autorenew',
+      route: 'structure/ki-cycle-using-oer'
+    }
+  ];
+
+  constructor(private route: ActivatedRoute, private router: Router) {}
+
+  protected chooseTemplate(template: any): void {
+    this.router.navigate([...template.route.split('/')], {
+      relativeTo: this.route
+    });
+  }
+}

src/assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component.html

@@ -21,20 +21,21 @@ <h5 i18n>Enter a title for the new lesson</h5>
       Lesson Title is required
     </mat-error>
   </mat-form-field>
-  <mat-divider></mat-divider>
-  <div fxLayout="row">
-    <button mat-button class="mat-primary" routerLink="../.." aria-label="cancel" i18n>
-      Cancel
-    </button>
-    <button
-      mat-button
-      class="mat-raised-button mat-primary"
-      (click)="next()"
-      aria-label="next"
-      [disabled]="!addLessonFormGroup.valid"
-      i18n
-    >
-      Next
-    </button>
+  <div class="nav-controls">
+    <mat-divider></mat-divider>
+    <div fxLayout="row" fxLayoutGap="8px">
+      <button mat-button color="primary" routerLink=".." i18n>Back</button>
+      <span fxFlex></span>
+      <button mat-button color="primary" routerLink="../.." i18n>Cancel</button>
+      <button
+        mat-button
+        class="mat-raised-button mat-primary"
+        (click)="next()"
+        [disabled]="!addLessonFormGroup.valid"
+        i18n
+      >
+        Next
+      </button>
+    </div>
   </div>
 </form>

src/assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component.ts

@@ -4,7 +4,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'add-lesson-configure',
-  styleUrls: ['./add-lesson-configure.component.scss'],
+  styleUrls: ['./add-lesson-configure.component.scss', '../../add-content.scss'],
   templateUrl: './add-lesson-configure.component.html'
 })
 export class AddLessonConfigureComponent {

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -51,24 +51,26 @@ <h5 i18n>Select components to add to your new step (optional):</h5>
       </p>
     </div>
   </div>
-  <mat-divider></mat-divider>
-  <div fxLayout="row">
-    <button mat-button class="mat-primary" routerLink="../choose-template" aria-label="back" i18n>
-      Back
-    </button>
-    <span fxFlex></span>
-    <button mat-button class="mat-primary" routerLink="../.." aria-label="cancel" i18n>
-      Cancel
-    </button>
-    <button
-      mat-raised-button
-      color="primary"
-      [disabled]="!addNodeFormGroup.valid"
-      (click)="chooseLocation()"
-      aria-label="next"
-      i18n
-    >
-      Next
-    </button>
+  <div class="nav-controls">
+    <mat-divider></mat-divider>
+    <div>
+      <button mat-button class="mat-primary" routerLink="../choose-template" aria-label="back" i18n>
+        Back
+      </button>
+      <span fxFlex></span>
+      <button mat-button class="mat-primary" routerLink="../.." aria-label="cancel" i18n>
+        Cancel
+      </button>
+      <button
+        mat-raised-button
+        color="primary"
+        [disabled]="!addNodeFormGroup.valid"
+        (click)="chooseLocation()"
+        aria-label="next"
+        i18n
+      >
+        Next
+      </button>
+    </div>
   </div>
 </form>

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts

@@ -6,7 +6,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 @Component({
   selector: 'add-your-own-node',
-  styleUrls: ['add-your-own-node.component.scss'],
+  styleUrls: ['add-your-own-node.component.scss', '../../add-content.scss'],
   templateUrl: 'add-your-own-node.component.html'
 })
 export class AddYourOwnNode {